-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
edge-labels.ts
101 lines (84 loc) · 2.83 KB
/
edge-labels.ts
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
93
94
95
96
97
98
99
100
101
import { Attributes } from "graphology-types";
import { Settings } from "../settings";
import { EdgeDisplayData, NodeDisplayData, PartialButFor } from "../types";
export type EdgeLabelDrawingFunction<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
> = (
context: CanvasRenderingContext2D,
edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
settings: Settings<N, E, G>,
) => void;
export function drawStraightEdgeLabel<
N extends Attributes = Attributes,
E extends Attributes = Attributes,
G extends Attributes = Attributes,
>(
context: CanvasRenderingContext2D,
edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
settings: Settings<N, E, G>,
): void {
const size = settings.edgeLabelSize,
font = settings.edgeLabelFont,
weight = settings.edgeLabelWeight,
color = settings.edgeLabelColor.attribute
? edgeData[settings.edgeLabelColor.attribute] || settings.edgeLabelColor.color || "#000"
: settings.edgeLabelColor.color;
let label = edgeData.label;
if (!label) return;
context.fillStyle = color;
context.font = `${weight} ${size}px ${font}`;
// Computing positions without considering nodes sizes:
const sSize = sourceData.size;
const tSize = targetData.size;
let sx = sourceData.x;
let sy = sourceData.y;
let tx = targetData.x;
let ty = targetData.y;
let cx = (sx + tx) / 2;
let cy = (sy + ty) / 2;
let dx = tx - sx;
let dy = ty - sy;
let d = Math.sqrt(dx * dx + dy * dy);
if (d < sSize + tSize) return;
// Adding nodes sizes:
sx += (dx * sSize) / d;
sy += (dy * sSize) / d;
tx -= (dx * tSize) / d;
ty -= (dy * tSize) / d;
cx = (sx + tx) / 2;
cy = (sy + ty) / 2;
dx = tx - sx;
dy = ty - sy;
d = Math.sqrt(dx * dx + dy * dy);
// Handling ellipsis
let textLength = context.measureText(label).width;
if (textLength > d) {
const ellipsis = "…";
label = label + ellipsis;
textLength = context.measureText(label).width;
while (textLength > d && label.length > 1) {
label = label.slice(0, -2) + ellipsis;
textLength = context.measureText(label).width;
}
if (label.length < 4) return;
}
let angle;
if (dx > 0) {
if (dy > 0) angle = Math.acos(dx / d);
else angle = Math.asin(dy / d);
} else {
if (dy > 0) angle = Math.acos(dx / d) + Math.PI;
else angle = Math.asin(dx / d) + Math.PI / 2;
}
context.save();
context.translate(cx, cy);
context.rotate(angle);
context.fillText(label, -textLength / 2, edgeData.size / 2 + size);
context.restore();
}