1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
// Copyright (C) 2019 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
export function cropText(str: string, charWidth: number, rectWidth: number) {
let displayText = '';
const maxLength = Math.floor(rectWidth / charWidth) - 1;
if (str.length <= maxLength) {
displayText = str;
} else {
let limit = maxLength;
let maybeTripleDot = '';
if (maxLength > 1) {
limit = maxLength - 1;
maybeTripleDot = '\u2026';
}
// Javascript strings are UTF-16. |limit| could point in the middle of a
// 32-bit double-wchar codepoint (e.g., an emoji). Here we detect if the
// |limit|-th wchar is a leading surrogate and attach the trailing one.
const lastCharCode = str.charCodeAt(limit - 1);
limit += (lastCharCode >= 0xD800 && lastCharCode < 0xDC00) ? 1 : 0;
displayText = str.substring(0, limit) + maybeTripleDot;
}
return displayText;
}
export function drawDoubleHeadedArrow(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
length: number,
showArrowHeads: boolean,
width = 2,
color = 'black') {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.moveTo(x, y);
ctx.lineTo(x + length, y);
ctx.stroke();
ctx.closePath();
// Arrowheads on the each end of the line.
if (showArrowHeads) {
ctx.beginPath();
ctx.moveTo(x + length - 8, y - 4);
ctx.lineTo(x + length, y);
ctx.lineTo(x + length - 8, y + 4);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(x + 8, y - 4);
ctx.lineTo(x, y);
ctx.lineTo(x + 8, y + 4);
ctx.stroke();
ctx.closePath();
}
}
export function drawIncompleteSlice(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
length: number,
width: number,
color: string) {
ctx.beginPath();
ctx.fillStyle = color;
const triangleSize = width / 4;
ctx.moveTo(x, y);
ctx.lineTo(x + length, y);
ctx.lineTo(x + length - 3, y + triangleSize * 0.5);
ctx.lineTo(x + length, y + triangleSize);
ctx.lineTo(x + length - 3, y + (triangleSize * 1.5));
ctx.lineTo(x + length, y + 2 * triangleSize);
ctx.lineTo(x + length - 3, y + (triangleSize * 2.5));
ctx.lineTo(x + length, y + 3 * triangleSize);
ctx.lineTo(x + length - 3, y + (triangleSize * 3.5));
ctx.lineTo(x + length, y + 4 * triangleSize);
ctx.lineTo(x, y + width);
ctx.fill();
}
|
