@html-graph/html-graph 0.0.52 → 0.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -13
- package/dist/main.d.ts +141 -56
- package/dist/main.js +631 -659
- package/dist/main.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,100 +1,22 @@
|
|
|
1
1
|
var B = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var h = (
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
return
|
|
7
|
-
},
|
|
8
|
-
const
|
|
9
|
-
return
|
|
10
|
-
},
|
|
11
|
-
const
|
|
12
|
-
return
|
|
2
|
+
var G = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
|
+
var h = (r, t, e) => G(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
const j = () => {
|
|
5
|
+
const r = document.createElement("div");
|
|
6
|
+
return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
|
|
7
|
+
}, H = () => {
|
|
8
|
+
const r = document.createElement("canvas");
|
|
9
|
+
return r.style.position = "absolute", r.style.inset = "0", r;
|
|
10
|
+
}, U = () => {
|
|
11
|
+
const r = document.createElement("div");
|
|
12
|
+
return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
|
|
13
13
|
};
|
|
14
|
-
class
|
|
15
|
-
constructor(t) {
|
|
16
|
-
h(this, "nodesContainer", D());
|
|
17
|
-
h(this, "edgesContainer", D());
|
|
18
|
-
this.host = t, this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
|
|
19
|
-
}
|
|
20
|
-
appendNodeElement(t) {
|
|
21
|
-
this.nodesContainer.appendChild(t);
|
|
22
|
-
}
|
|
23
|
-
removeNodeElement(t) {
|
|
24
|
-
this.nodesContainer.removeChild(t);
|
|
25
|
-
}
|
|
26
|
-
appendEdgeElement(t) {
|
|
27
|
-
this.edgesContainer.appendChild(t);
|
|
28
|
-
}
|
|
29
|
-
removeEdgeElement(t) {
|
|
30
|
-
this.edgesContainer.removeChild(t);
|
|
31
|
-
}
|
|
32
|
-
update(t, r, s) {
|
|
33
|
-
this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
|
|
34
|
-
}
|
|
35
|
-
destroy() {
|
|
36
|
-
this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
class H {
|
|
40
|
-
constructor(t) {
|
|
41
|
-
h(this, "nodesContainer", D());
|
|
42
|
-
h(this, "edgesContainer", D());
|
|
43
|
-
this.host = t, this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
|
|
44
|
-
}
|
|
45
|
-
appendNodeElement(t) {
|
|
46
|
-
this.nodesContainer.appendChild(t);
|
|
47
|
-
}
|
|
48
|
-
removeNodeElement(t) {
|
|
49
|
-
this.nodesContainer.removeChild(t);
|
|
50
|
-
}
|
|
51
|
-
appendEdgeElement(t) {
|
|
52
|
-
this.edgesContainer.appendChild(t);
|
|
53
|
-
}
|
|
54
|
-
removeEdgeElement(t) {
|
|
55
|
-
this.edgesContainer.removeChild(t);
|
|
56
|
-
}
|
|
57
|
-
update(t, r, s) {
|
|
58
|
-
this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
|
|
59
|
-
}
|
|
60
|
-
destroy() {
|
|
61
|
-
this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
class U {
|
|
65
|
-
constructor(t) {
|
|
66
|
-
h(this, "container", D());
|
|
67
|
-
this.host = t, this.host.appendChild(this.container);
|
|
68
|
-
}
|
|
69
|
-
appendNodeElement(t) {
|
|
70
|
-
this.container.appendChild(t);
|
|
71
|
-
}
|
|
72
|
-
removeNodeElement(t) {
|
|
73
|
-
this.container.removeChild(t);
|
|
74
|
-
}
|
|
75
|
-
appendEdgeElement(t) {
|
|
76
|
-
this.container.appendChild(t);
|
|
77
|
-
}
|
|
78
|
-
removeEdgeElement(t) {
|
|
79
|
-
this.container.removeChild(t);
|
|
80
|
-
}
|
|
81
|
-
update(t, r, s) {
|
|
82
|
-
this.container.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
|
|
83
|
-
}
|
|
84
|
-
destroy() {
|
|
85
|
-
this.host.removeChild(this.container);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
const _ = {
|
|
89
|
-
"edges-on-top": (e) => new H(e),
|
|
90
|
-
"edges-follow-node": (e) => new U(e),
|
|
91
|
-
"nodes-on-top": (e) => new j(e)
|
|
92
|
-
};
|
|
93
|
-
class J {
|
|
94
|
-
constructor(t, r, s, o, n) {
|
|
14
|
+
class _ {
|
|
15
|
+
constructor(t, e, s, o) {
|
|
95
16
|
h(this, "canvasWrapper", null);
|
|
96
|
-
h(this, "host",
|
|
97
|
-
h(this, "canvas",
|
|
17
|
+
h(this, "host", j());
|
|
18
|
+
h(this, "canvas", H());
|
|
19
|
+
h(this, "container", U());
|
|
98
20
|
h(this, "canvasCtx");
|
|
99
21
|
h(this, "hostResizeObserver");
|
|
100
22
|
h(this, "nodesResizeObserver");
|
|
@@ -102,12 +24,11 @@ class J {
|
|
|
102
24
|
h(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
|
|
103
25
|
h(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
|
|
104
26
|
h(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
if (i === null)
|
|
27
|
+
this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
|
|
28
|
+
const n = this.canvas.getContext("2d");
|
|
29
|
+
if (n === null)
|
|
109
30
|
throw new Error("unable to get canvas context");
|
|
110
|
-
this.canvasCtx =
|
|
31
|
+
this.canvasCtx = n, this.host.appendChild(this.canvas), this.host.appendChild(this.container), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
|
|
111
32
|
}
|
|
112
33
|
clear() {
|
|
113
34
|
Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
|
|
@@ -123,42 +44,42 @@ class J {
|
|
|
123
44
|
this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
|
|
124
45
|
}
|
|
125
46
|
destroy() {
|
|
126
|
-
this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.
|
|
47
|
+
this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.container), this.detach();
|
|
127
48
|
}
|
|
128
49
|
applyTransform() {
|
|
129
50
|
this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
|
|
130
|
-
const [t,
|
|
131
|
-
this.
|
|
51
|
+
const [t, e] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
|
|
52
|
+
this.container.style.transform = `matrix(${s}, 0, 0, ${s}, ${t}, ${e})`;
|
|
132
53
|
}
|
|
133
54
|
attachNode(t) {
|
|
134
|
-
const
|
|
135
|
-
s.appendChild(
|
|
55
|
+
const e = this.graphStore.getNode(t), s = document.createElement("div");
|
|
56
|
+
s.appendChild(e.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.container.appendChild(s), this.nodeElementToIdMap.set(e.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t), this.updateNodePriority(t), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
|
|
136
57
|
}
|
|
137
58
|
detachNode(t) {
|
|
138
|
-
const
|
|
139
|
-
this.nodesResizeObserver.unobserve(
|
|
59
|
+
const e = this.graphStore.getNode(t);
|
|
60
|
+
this.nodesResizeObserver.unobserve(e.element);
|
|
140
61
|
const s = this.nodeIdToWrapperElementMap.get(t);
|
|
141
|
-
s.removeChild(
|
|
62
|
+
s.removeChild(e.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
|
|
142
63
|
}
|
|
143
64
|
attachEdge(t) {
|
|
144
|
-
const s = this.graphStore.getEdge(t).
|
|
145
|
-
s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.
|
|
65
|
+
const s = this.graphStore.getEdge(t).shape.svg;
|
|
66
|
+
s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.container.appendChild(s);
|
|
146
67
|
}
|
|
147
68
|
detachEdge(t) {
|
|
148
|
-
const
|
|
149
|
-
this.edgeIdToElementMap.delete(t), this.
|
|
69
|
+
const e = this.edgeIdToElementMap.get(t);
|
|
70
|
+
this.edgeIdToElementMap.delete(t), this.container.removeChild(e);
|
|
150
71
|
}
|
|
151
72
|
updateNodePriority(t) {
|
|
152
|
-
const
|
|
153
|
-
s.style.zIndex = `${
|
|
73
|
+
const e = this.graphStore.getNode(t), s = this.nodeIdToWrapperElementMap.get(t);
|
|
74
|
+
s.style.zIndex = `${e.priority}`;
|
|
154
75
|
}
|
|
155
76
|
updateEdgePriority(t) {
|
|
156
|
-
const
|
|
157
|
-
this.edgeIdToElementMap.get(t).style.zIndex = `${
|
|
77
|
+
const e = this.graphStore.getEdge(t);
|
|
78
|
+
this.edgeIdToElementMap.get(t).style.zIndex = `${e.priority}`;
|
|
158
79
|
}
|
|
159
80
|
updateNodeCoordinates(t) {
|
|
160
|
-
const
|
|
161
|
-
this.updateNodeCoords(t),
|
|
81
|
+
const e = this.graphStore.getNodeAdjacentEdges(t);
|
|
82
|
+
this.updateNodeCoords(t), e.forEach((s) => {
|
|
162
83
|
this.updateEdgeCoords(s);
|
|
163
84
|
});
|
|
164
85
|
}
|
|
@@ -178,8 +99,8 @@ class J {
|
|
|
178
99
|
}
|
|
179
100
|
createNodesResizeObserver() {
|
|
180
101
|
return new ResizeObserver((t) => {
|
|
181
|
-
t.forEach((
|
|
182
|
-
const s =
|
|
102
|
+
t.forEach((e) => {
|
|
103
|
+
const s = e.target, o = this.nodeWrapperElementToIdMap.get(s);
|
|
183
104
|
this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((i) => {
|
|
184
105
|
this.updateEdgeCoords(i);
|
|
185
106
|
});
|
|
@@ -187,15 +108,15 @@ class J {
|
|
|
187
108
|
});
|
|
188
109
|
}
|
|
189
110
|
updateCanvasDimensions() {
|
|
190
|
-
const { width: t, height:
|
|
191
|
-
this.canvas.width = t, this.canvas.height =
|
|
111
|
+
const { width: t, height: e } = this.host.getBoundingClientRect();
|
|
112
|
+
this.canvas.width = t, this.canvas.height = e;
|
|
192
113
|
}
|
|
193
114
|
updateNodeCoords(t) {
|
|
194
|
-
const
|
|
195
|
-
|
|
115
|
+
const e = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = e.getBoundingClientRect(), n = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [a, c] = i.centerFn(s, o);
|
|
116
|
+
e.style.transform = `matrix(1, 0, 0, 1, ${i.x - n * a}, ${i.y - n * c})`;
|
|
196
117
|
}
|
|
197
118
|
updateEdgeCoords(t) {
|
|
198
|
-
const
|
|
119
|
+
const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), o = this.graphStore.getPort(e.to), n = s.element.getBoundingClientRect(), i = o.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
|
|
199
120
|
n.left - a.left,
|
|
200
121
|
n.top - a.top
|
|
201
122
|
), [d, g] = this.viewportTransformer.getAbsCoords(
|
|
@@ -207,11 +128,11 @@ class J {
|
|
|
207
128
|
), [f, m] = o.centerFn(
|
|
208
129
|
i.width * u,
|
|
209
130
|
i.height * u
|
|
210
|
-
), E = p + c, v = w + l,
|
|
211
|
-
|
|
131
|
+
), E = p + c, v = w + l, y = f + d, C = m + g, S = Math.min(E, y), $ = Math.min(v, C), L = Math.abs(y - E), M = Math.abs(C - v);
|
|
132
|
+
e.shape.update(S, $, L, M, s, o);
|
|
212
133
|
}
|
|
213
134
|
}
|
|
214
|
-
class
|
|
135
|
+
class J {
|
|
215
136
|
constructor() {
|
|
216
137
|
h(this, "state", {
|
|
217
138
|
scale: 1,
|
|
@@ -219,33 +140,33 @@ class K {
|
|
|
219
140
|
y: 0
|
|
220
141
|
});
|
|
221
142
|
}
|
|
222
|
-
getViewCoords(t,
|
|
143
|
+
getViewCoords(t, e) {
|
|
223
144
|
return [
|
|
224
145
|
(t - this.state.x) / this.state.scale,
|
|
225
|
-
(
|
|
146
|
+
(e - this.state.y) / this.state.scale
|
|
226
147
|
];
|
|
227
148
|
}
|
|
228
149
|
getViewScale() {
|
|
229
150
|
return 1 / this.state.scale;
|
|
230
151
|
}
|
|
231
|
-
getAbsCoords(t,
|
|
152
|
+
getAbsCoords(t, e) {
|
|
232
153
|
return [
|
|
233
154
|
t * this.state.scale + this.state.x,
|
|
234
|
-
|
|
155
|
+
e * this.state.scale + this.state.y
|
|
235
156
|
];
|
|
236
157
|
}
|
|
237
158
|
getAbsScale() {
|
|
238
159
|
return this.state.scale;
|
|
239
160
|
}
|
|
240
|
-
patchState(t,
|
|
161
|
+
patchState(t, e, s) {
|
|
241
162
|
this.state = {
|
|
242
163
|
scale: t ?? this.state.scale,
|
|
243
|
-
x:
|
|
164
|
+
x: e ?? this.state.x,
|
|
244
165
|
y: s ?? this.state.y
|
|
245
166
|
};
|
|
246
167
|
}
|
|
247
168
|
}
|
|
248
|
-
class
|
|
169
|
+
class K {
|
|
249
170
|
constructor(t) {
|
|
250
171
|
this.transformer = t;
|
|
251
172
|
}
|
|
@@ -253,8 +174,8 @@ class Q {
|
|
|
253
174
|
* for given absolute coordinates returns viewport coordinates
|
|
254
175
|
* viewport coordinated represent actual coordinates on screen for given absolute coordinates
|
|
255
176
|
*/
|
|
256
|
-
getViewCoords(t,
|
|
257
|
-
return this.transformer.getViewCoords(t,
|
|
177
|
+
getViewCoords(t, e) {
|
|
178
|
+
return this.transformer.getViewCoords(t, e);
|
|
258
179
|
}
|
|
259
180
|
/**
|
|
260
181
|
* returns viewport scale
|
|
@@ -267,8 +188,8 @@ class Q {
|
|
|
267
188
|
* for given viewport coordinates returns absolute coordinates
|
|
268
189
|
* absolute coordinates represent actual coordinates, which stay constant even for transformed canvas
|
|
269
190
|
*/
|
|
270
|
-
getAbsCoords(t,
|
|
271
|
-
return this.transformer.getAbsCoords(t,
|
|
191
|
+
getAbsCoords(t, e) {
|
|
192
|
+
return this.transformer.getAbsCoords(t, e);
|
|
272
193
|
}
|
|
273
194
|
/**
|
|
274
195
|
* returns absolute scale
|
|
@@ -278,7 +199,7 @@ class Q {
|
|
|
278
199
|
return this.transformer.getAbsScale();
|
|
279
200
|
}
|
|
280
201
|
}
|
|
281
|
-
class
|
|
202
|
+
class Q {
|
|
282
203
|
constructor() {
|
|
283
204
|
h(this, "nodes", /* @__PURE__ */ new Map());
|
|
284
205
|
h(this, "ports", /* @__PURE__ */ new Map());
|
|
@@ -289,8 +210,8 @@ class Z {
|
|
|
289
210
|
h(this, "outcommingEdges", /* @__PURE__ */ new Map());
|
|
290
211
|
h(this, "cycleEdges", /* @__PURE__ */ new Map());
|
|
291
212
|
}
|
|
292
|
-
addNode(t,
|
|
293
|
-
this.nodes.set(t, { element:
|
|
213
|
+
addNode(t, e, s, o, n, i) {
|
|
214
|
+
this.nodes.set(t, { element: e, x: s, y: o, centerFn: n, priority: i }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
|
|
294
215
|
}
|
|
295
216
|
getNode(t) {
|
|
296
217
|
return this.nodes.get(t);
|
|
@@ -302,8 +223,8 @@ class Z {
|
|
|
302
223
|
this.portNodeId.delete(n);
|
|
303
224
|
}), this.nodePorts.delete(t);
|
|
304
225
|
}
|
|
305
|
-
addPort(t,
|
|
306
|
-
this.ports.set(t, { element:
|
|
226
|
+
addPort(t, e, s, o, n) {
|
|
227
|
+
this.ports.set(t, { element: e, centerFn: o, direction: n }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, e);
|
|
307
228
|
}
|
|
308
229
|
getPort(t) {
|
|
309
230
|
return this.ports.get(t);
|
|
@@ -319,22 +240,22 @@ class Z {
|
|
|
319
240
|
}), this.incommingEdges.delete(t), this.outcommingEdges.get(t).forEach((s) => {
|
|
320
241
|
this.removeEdge(s);
|
|
321
242
|
}), this.outcommingEdges.get(t);
|
|
322
|
-
const
|
|
323
|
-
this.portNodeId.delete(t), this.nodePorts.get(
|
|
243
|
+
const e = this.portNodeId.get(t);
|
|
244
|
+
this.portNodeId.delete(t), this.nodePorts.get(e).delete(t), this.ports.delete(t);
|
|
324
245
|
}
|
|
325
|
-
addEdge(t,
|
|
246
|
+
addEdge(t, e, s, o, n) {
|
|
326
247
|
this.edges.set(t, {
|
|
327
|
-
from:
|
|
248
|
+
from: e,
|
|
328
249
|
to: s,
|
|
329
|
-
|
|
250
|
+
shape: o,
|
|
330
251
|
priority: n
|
|
331
|
-
}),
|
|
252
|
+
}), e !== s ? (this.outcommingEdges.get(e).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(e).add(t);
|
|
332
253
|
}
|
|
333
254
|
getEdge(t) {
|
|
334
255
|
return this.edges.get(t);
|
|
335
256
|
}
|
|
336
257
|
removeEdge(t) {
|
|
337
|
-
const
|
|
258
|
+
const e = this.edges.get(t), s = e.from, o = e.to;
|
|
338
259
|
this.cycleEdges.get(s).delete(t), this.cycleEdges.get(o).delete(t), this.incommingEdges.get(s).delete(t), this.incommingEdges.get(o).delete(t), this.outcommingEdges.get(s).delete(t), this.outcommingEdges.get(o).delete(t), this.edges.delete(t);
|
|
339
260
|
}
|
|
340
261
|
getPortAdjacentEdges(t) {
|
|
@@ -364,49 +285,106 @@ class Z {
|
|
|
364
285
|
return Array.from(this.cycleEdges.get(t));
|
|
365
286
|
}
|
|
366
287
|
getNodeIncomingEdges(t) {
|
|
367
|
-
const
|
|
288
|
+
const e = Array.from(this.nodePorts.get(t).keys());
|
|
368
289
|
let s = [];
|
|
369
|
-
return
|
|
290
|
+
return e.forEach((o) => {
|
|
370
291
|
s = [...s, ...this.getPortIncomingEdges(o)];
|
|
371
292
|
}), s;
|
|
372
293
|
}
|
|
373
294
|
getNodeOutcomingEdges(t) {
|
|
374
|
-
const
|
|
295
|
+
const e = Array.from(this.nodePorts.get(t).keys());
|
|
375
296
|
let s = [];
|
|
376
|
-
return
|
|
297
|
+
return e.forEach((o) => {
|
|
377
298
|
s = [...s, ...this.getPortOutcomingEdges(o)];
|
|
378
299
|
}), s;
|
|
379
300
|
}
|
|
380
301
|
getNodeCycleEdges(t) {
|
|
381
|
-
const
|
|
302
|
+
const e = Array.from(this.nodePorts.get(t).keys());
|
|
382
303
|
let s = [];
|
|
383
|
-
return
|
|
304
|
+
return e.forEach((o) => {
|
|
384
305
|
s = [...s, ...this.getPortCycleEdges(o)];
|
|
385
306
|
}), s;
|
|
386
307
|
}
|
|
387
308
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
309
|
+
class Z {
|
|
310
|
+
constructor(t) {
|
|
311
|
+
this.graphStore = t;
|
|
312
|
+
}
|
|
313
|
+
getNode(t) {
|
|
314
|
+
const e = this.graphStore.getNode(t);
|
|
315
|
+
if (e !== void 0)
|
|
316
|
+
return {
|
|
317
|
+
element: e.element,
|
|
318
|
+
x: e.x,
|
|
319
|
+
y: e.y,
|
|
320
|
+
centerFn: e.centerFn,
|
|
321
|
+
priority: e.priority
|
|
322
|
+
};
|
|
323
|
+
}
|
|
324
|
+
getPort(t) {
|
|
325
|
+
const e = this.graphStore.getPort(t);
|
|
326
|
+
if (e !== void 0)
|
|
327
|
+
return {
|
|
328
|
+
element: e.element,
|
|
329
|
+
centerFn: e.centerFn,
|
|
330
|
+
direction: e.direction
|
|
331
|
+
};
|
|
332
|
+
}
|
|
333
|
+
getPortNode(t) {
|
|
334
|
+
return this.graphStore.getPortNode(t);
|
|
335
|
+
}
|
|
336
|
+
getEdge(t) {
|
|
337
|
+
const e = this.graphStore.getEdge(t);
|
|
338
|
+
if (e !== void 0)
|
|
339
|
+
return { from: e.from, to: e.to, priority: e.priority };
|
|
340
|
+
}
|
|
341
|
+
getPortAdjacentEdges(t) {
|
|
342
|
+
return this.graphStore.getPortAdjacentEdges(t);
|
|
343
|
+
}
|
|
344
|
+
getNodeAdjacentEdges(t) {
|
|
345
|
+
return this.graphStore.getNodeAdjacentEdges(t);
|
|
346
|
+
}
|
|
347
|
+
getPortIncomingEdges(t) {
|
|
348
|
+
return this.graphStore.getPortIncomingEdges(t);
|
|
349
|
+
}
|
|
350
|
+
getPortOutcomingEdges(t) {
|
|
351
|
+
return this.graphStore.getPortOutcomingEdges(t);
|
|
352
|
+
}
|
|
353
|
+
getPortCycleEdges(t) {
|
|
354
|
+
return this.graphStore.getPortCycleEdges(t);
|
|
355
|
+
}
|
|
356
|
+
getNodeIncomingEdges(t) {
|
|
357
|
+
return this.graphStore.getNodeIncomingEdges(t);
|
|
358
|
+
}
|
|
359
|
+
getNodeOutcomingEdges(t) {
|
|
360
|
+
return this.graphStore.getNodeOutcomingEdges(t);
|
|
361
|
+
}
|
|
362
|
+
getNodeCycleEdges(t) {
|
|
363
|
+
return this.graphStore.getNodeCycleEdges(t);
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
const T = (r) => {
|
|
367
|
+
const { top: t, left: e, width: s, height: o } = r.element.getBoundingClientRect(), n = r.centerFn(s, o);
|
|
368
|
+
return [e + n[0], t + n[1]];
|
|
369
|
+
}, A = (r, t, e) => [
|
|
370
|
+
t[0] * r[0] - t[1] * r[1] + ((1 - t[0]) * e[0] + t[1] * e[1]),
|
|
371
|
+
t[1] * r[0] + t[0] * r[1] + ((1 - t[0]) * e[1] - t[1] * e[0])
|
|
372
|
+
], b = (r, t, e) => [t * Math.cos(r), e * Math.sin(r)], N = (r, t, e, s, o) => {
|
|
395
373
|
const i = [
|
|
396
374
|
[0, 0],
|
|
397
375
|
[s, o],
|
|
398
376
|
[s, -o]
|
|
399
|
-
].map((d) =>
|
|
377
|
+
].map((d) => A(d, r, [0, 0])).map((d) => [d[0] + t, d[1] + e]), a = `M ${i[0][0]} ${i[0][1]}`, c = `L ${i[1][0]} ${i[1][1]}`, l = `L ${i[2][0]} ${i[2][1]}`;
|
|
400
378
|
return `${a} ${c} ${l}`;
|
|
401
379
|
};
|
|
402
380
|
class q {
|
|
403
|
-
constructor(t,
|
|
381
|
+
constructor(t, e, s, o, n, i, a) {
|
|
404
382
|
h(this, "svg");
|
|
405
383
|
h(this, "group");
|
|
406
384
|
h(this, "line");
|
|
407
385
|
h(this, "sourceArrow", null);
|
|
408
386
|
h(this, "targetArrow", null);
|
|
409
|
-
this.color = t, this.width =
|
|
387
|
+
this.color = t, this.width = e, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
410
388
|
"http://www.w3.org/2000/svg",
|
|
411
389
|
"path"
|
|
412
390
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -414,11 +392,11 @@ class q {
|
|
|
414
392
|
"path"
|
|
415
393
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
416
394
|
}
|
|
417
|
-
update(t,
|
|
395
|
+
update(t, e, s, o, n, i) {
|
|
418
396
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
419
397
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
420
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
421
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p =
|
|
398
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
399
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = A([this.arrowLength, 0], g, [0, 0]), w = A([s - this.arrowLength, o], u, [
|
|
422
400
|
s,
|
|
423
401
|
o
|
|
424
402
|
]), f = [
|
|
@@ -427,57 +405,57 @@ class q {
|
|
|
427
405
|
], m = [
|
|
428
406
|
w[0] - u[0] * this.curvature,
|
|
429
407
|
w[1] - u[1] * this.curvature
|
|
430
|
-
], E = `M ${p[0]} ${p[1]} C ${f[0]} ${f[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, v = this.sourceArrow ? "" : `M 0 0 L ${p[0]} ${p[1]} `,
|
|
431
|
-
if (this.line.setAttribute("d",
|
|
432
|
-
const
|
|
408
|
+
], E = `M ${p[0]} ${p[1]} C ${f[0]} ${f[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, v = this.sourceArrow ? "" : `M 0 0 L ${p[0]} ${p[1]} `, y = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, C = `${v}${E}${y}`;
|
|
409
|
+
if (this.line.setAttribute("d", C), this.sourceArrow) {
|
|
410
|
+
const S = N(
|
|
433
411
|
g,
|
|
434
412
|
0,
|
|
435
413
|
0,
|
|
436
414
|
this.arrowLength,
|
|
437
415
|
this.arrowWidth
|
|
438
416
|
);
|
|
439
|
-
this.sourceArrow.setAttribute("d",
|
|
417
|
+
this.sourceArrow.setAttribute("d", S);
|
|
440
418
|
}
|
|
441
419
|
if (this.targetArrow) {
|
|
442
|
-
const
|
|
420
|
+
const S = N(
|
|
443
421
|
u,
|
|
444
422
|
s,
|
|
445
423
|
o,
|
|
446
424
|
-this.arrowLength,
|
|
447
425
|
this.arrowWidth
|
|
448
426
|
);
|
|
449
|
-
this.targetArrow.setAttribute("d",
|
|
427
|
+
this.targetArrow.setAttribute("d", S);
|
|
450
428
|
}
|
|
451
429
|
}
|
|
452
430
|
}
|
|
453
|
-
const
|
|
454
|
-
const
|
|
455
|
-
if (
|
|
456
|
-
const s =
|
|
431
|
+
const F = (r, t) => {
|
|
432
|
+
const e = [];
|
|
433
|
+
if (r.length > 0 && e.push(`M ${r[0][0]} ${r[0][1]}`), r.length === 2 && e.push(`L ${r[1][0]} ${r[1][1]}`), r.length > 2) {
|
|
434
|
+
const s = r.length - 1;
|
|
457
435
|
let o = 0, n = 0, i = 0;
|
|
458
|
-
|
|
436
|
+
r.forEach((a, c) => {
|
|
459
437
|
let l = 0, d = 0, g = 0;
|
|
460
438
|
const u = c > 0, p = c < s, w = u && p;
|
|
461
439
|
if (u && (l = -o, d = -n, g = i), p) {
|
|
462
|
-
const
|
|
463
|
-
o =
|
|
440
|
+
const S = r[c + 1];
|
|
441
|
+
o = S[0] - a[0], n = S[1] - a[1], i = Math.sqrt(o * o + n * n);
|
|
464
442
|
}
|
|
465
|
-
const m = Math.min((w ? t : 0) / i, c < s - 1 ? 0.5 : 1), E = w ? [a[0] + o * m, a[1] + n * m] : a,
|
|
466
|
-
c > 0 &&
|
|
443
|
+
const m = Math.min((w ? t : 0) / i, c < s - 1 ? 0.5 : 1), E = w ? [a[0] + o * m, a[1] + n * m] : a, y = Math.min((w ? t : 0) / g, c > 1 ? 0.5 : 1), C = w ? [a[0] + l * y, a[1] + d * y] : a;
|
|
444
|
+
c > 0 && e.push(`L ${C[0]} ${C[1]}`), w && e.push(
|
|
467
445
|
`C ${a[0]} ${a[1]} ${a[0]} ${a[1]} ${E[0]} ${E[1]}`
|
|
468
446
|
);
|
|
469
447
|
});
|
|
470
448
|
}
|
|
471
|
-
return
|
|
449
|
+
return e.join(" ");
|
|
472
450
|
};
|
|
473
451
|
class I {
|
|
474
|
-
constructor(t,
|
|
452
|
+
constructor(t, e, s, o, n, i, a, c) {
|
|
475
453
|
h(this, "svg");
|
|
476
454
|
h(this, "group");
|
|
477
455
|
h(this, "line");
|
|
478
456
|
h(this, "sourceArrow", null);
|
|
479
457
|
h(this, "targetArrow", null);
|
|
480
|
-
this.color = t, this.width =
|
|
458
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
481
459
|
"http://www.w3.org/2000/svg",
|
|
482
460
|
"path"
|
|
483
461
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -485,47 +463,47 @@ class I {
|
|
|
485
463
|
"path"
|
|
486
464
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
487
465
|
}
|
|
488
|
-
update(t,
|
|
466
|
+
update(t, e, s, o, n, i) {
|
|
489
467
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
490
468
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
491
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
492
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ?
|
|
469
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
470
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
|
|
493
471
|
s,
|
|
494
472
|
o
|
|
495
|
-
]) : [s, o], f = this.arrowLength + this.arrowOffset, m =
|
|
473
|
+
]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
|
|
496
474
|
s,
|
|
497
475
|
o
|
|
498
|
-
]), v =
|
|
476
|
+
]), v = F([p, m, E, w], this.roundness);
|
|
499
477
|
if (this.line.setAttribute("d", v), this.sourceArrow) {
|
|
500
|
-
const
|
|
478
|
+
const y = N(
|
|
501
479
|
g,
|
|
502
480
|
0,
|
|
503
481
|
0,
|
|
504
482
|
this.arrowLength,
|
|
505
483
|
this.arrowWidth
|
|
506
484
|
);
|
|
507
|
-
this.sourceArrow.setAttribute("d",
|
|
485
|
+
this.sourceArrow.setAttribute("d", y);
|
|
508
486
|
}
|
|
509
487
|
if (this.targetArrow) {
|
|
510
|
-
const
|
|
488
|
+
const y = N(
|
|
511
489
|
u,
|
|
512
490
|
s,
|
|
513
491
|
o,
|
|
514
492
|
-this.arrowLength,
|
|
515
493
|
this.arrowWidth
|
|
516
494
|
);
|
|
517
|
-
this.targetArrow.setAttribute("d",
|
|
495
|
+
this.targetArrow.setAttribute("d", y);
|
|
518
496
|
}
|
|
519
497
|
}
|
|
520
498
|
}
|
|
521
499
|
class tt {
|
|
522
|
-
constructor(t,
|
|
500
|
+
constructor(t, e, s, o, n, i, a, c) {
|
|
523
501
|
h(this, "svg");
|
|
524
502
|
h(this, "group");
|
|
525
503
|
h(this, "line");
|
|
526
504
|
h(this, "sourceArrow", null);
|
|
527
505
|
h(this, "targetArrow", null);
|
|
528
|
-
this.color = t, this.width =
|
|
506
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
529
507
|
"http://www.w3.org/2000/svg",
|
|
530
508
|
"path"
|
|
531
509
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -533,50 +511,50 @@ class tt {
|
|
|
533
511
|
"path"
|
|
534
512
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
535
513
|
}
|
|
536
|
-
update(t,
|
|
514
|
+
update(t, e, s, o, n, i) {
|
|
537
515
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
538
516
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
539
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
540
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ?
|
|
517
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
518
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
|
|
541
519
|
s,
|
|
542
520
|
o
|
|
543
|
-
]) : [s, o], f = this.arrowLength + this.arrowOffset, m =
|
|
521
|
+
]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
|
|
544
522
|
s,
|
|
545
523
|
o
|
|
546
|
-
]), v = Math.max((m[0] + E[0]) / 2, f),
|
|
547
|
-
[p, m,
|
|
524
|
+
]), v = Math.max((m[0] + E[0]) / 2, f), y = o / 2, C = [l > 0 ? v : -f, m[1]], S = [C[0], y], $ = [l > 0 ? s - v : s + f, E[1]], L = [$[0], y], M = F(
|
|
525
|
+
[p, m, C, S, L, $, E, w],
|
|
548
526
|
this.roundness
|
|
549
527
|
);
|
|
550
|
-
if (this.line.setAttribute("d",
|
|
551
|
-
const
|
|
528
|
+
if (this.line.setAttribute("d", M), this.sourceArrow) {
|
|
529
|
+
const x = N(
|
|
552
530
|
g,
|
|
553
531
|
0,
|
|
554
532
|
0,
|
|
555
533
|
this.arrowLength,
|
|
556
534
|
this.arrowWidth
|
|
557
535
|
);
|
|
558
|
-
this.sourceArrow.setAttribute("d",
|
|
536
|
+
this.sourceArrow.setAttribute("d", x);
|
|
559
537
|
}
|
|
560
538
|
if (this.targetArrow) {
|
|
561
|
-
const
|
|
539
|
+
const x = N(
|
|
562
540
|
u,
|
|
563
541
|
s,
|
|
564
542
|
o,
|
|
565
543
|
-this.arrowLength,
|
|
566
544
|
this.arrowWidth
|
|
567
545
|
);
|
|
568
|
-
this.targetArrow.setAttribute("d",
|
|
546
|
+
this.targetArrow.setAttribute("d", x);
|
|
569
547
|
}
|
|
570
548
|
}
|
|
571
549
|
}
|
|
572
550
|
class et {
|
|
573
|
-
constructor(t,
|
|
551
|
+
constructor(t, e, s, o, n, i, a, c) {
|
|
574
552
|
h(this, "svg");
|
|
575
553
|
h(this, "group");
|
|
576
554
|
h(this, "line");
|
|
577
555
|
h(this, "sourceArrow", null);
|
|
578
556
|
h(this, "targetArrow", null);
|
|
579
|
-
this.color = t, this.width =
|
|
557
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
580
558
|
"http://www.w3.org/2000/svg",
|
|
581
559
|
"path"
|
|
582
560
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -584,60 +562,60 @@ class et {
|
|
|
584
562
|
"path"
|
|
585
563
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
586
564
|
}
|
|
587
|
-
update(t,
|
|
565
|
+
update(t, e, s, o, n, i) {
|
|
588
566
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
589
567
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
590
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
591
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ?
|
|
568
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
569
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
|
|
592
570
|
s,
|
|
593
571
|
o
|
|
594
|
-
]) : [s, o], f = this.arrowLength + this.arrowOffset, m =
|
|
572
|
+
]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
|
|
595
573
|
s,
|
|
596
574
|
o
|
|
597
|
-
]), v = Math.max((m[1] + E[1]) / 2, f),
|
|
598
|
-
[p, m,
|
|
575
|
+
]), v = Math.max((m[1] + E[1]) / 2, f), y = s / 2, C = [m[0], d > 0 ? v : -f], S = [y, C[1]], $ = [E[0], d > 0 ? o - v : o + f], L = [y, $[1]], M = F(
|
|
576
|
+
[p, m, C, S, L, $, E, w],
|
|
599
577
|
this.roundness
|
|
600
578
|
);
|
|
601
|
-
if (this.line.setAttribute("d",
|
|
602
|
-
const
|
|
579
|
+
if (this.line.setAttribute("d", M), this.sourceArrow) {
|
|
580
|
+
const x = N(
|
|
603
581
|
g,
|
|
604
582
|
0,
|
|
605
583
|
0,
|
|
606
584
|
this.arrowLength,
|
|
607
585
|
this.arrowWidth
|
|
608
586
|
);
|
|
609
|
-
this.sourceArrow.setAttribute("d",
|
|
587
|
+
this.sourceArrow.setAttribute("d", x);
|
|
610
588
|
}
|
|
611
589
|
if (this.targetArrow) {
|
|
612
|
-
const
|
|
590
|
+
const x = N(
|
|
613
591
|
u,
|
|
614
592
|
s,
|
|
615
593
|
o,
|
|
616
594
|
-this.arrowLength,
|
|
617
595
|
this.arrowWidth
|
|
618
596
|
);
|
|
619
|
-
this.targetArrow.setAttribute("d",
|
|
597
|
+
this.targetArrow.setAttribute("d", x);
|
|
620
598
|
}
|
|
621
599
|
}
|
|
622
600
|
}
|
|
623
601
|
class rt {
|
|
624
|
-
constructor(t,
|
|
602
|
+
constructor(t, e, s, o, n, i, a) {
|
|
625
603
|
h(this, "svg");
|
|
626
604
|
h(this, "group");
|
|
627
605
|
h(this, "line");
|
|
628
606
|
h(this, "arrow", null);
|
|
629
|
-
this.color = t, this.width =
|
|
607
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.radius = i, this.smallRadius = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.arrow = document.createElementNS(
|
|
630
608
|
"http://www.w3.org/2000/svg",
|
|
631
609
|
"path"
|
|
632
610
|
), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
|
|
633
611
|
}
|
|
634
|
-
update(t,
|
|
635
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
612
|
+
update(t, e, s, o, n) {
|
|
613
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`;
|
|
636
614
|
const i = b(n.direction, 1, 1), a = this.smallRadius, c = this.radius, l = Math.sqrt(a * a + c * c), d = a + c, g = this.arrowLength + l * (1 - c / d), u = a * c / d, w = [
|
|
637
615
|
[this.arrowLength, 0],
|
|
638
616
|
[g, u],
|
|
639
617
|
[g, -u]
|
|
640
|
-
].map((v) =>
|
|
618
|
+
].map((v) => A(v, i, [0, 0])), f = [
|
|
641
619
|
`M ${w[0][0]} ${w[0][1]}`,
|
|
642
620
|
`A ${a} ${a} 0 0 1 ${w[1][0]} ${w[1][1]}`,
|
|
643
621
|
`A ${c} ${c} 0 1 0 ${w[2][0]} ${w[2][1]}`,
|
|
@@ -655,15 +633,15 @@ class rt {
|
|
|
655
633
|
}
|
|
656
634
|
}
|
|
657
635
|
}
|
|
658
|
-
class
|
|
659
|
-
constructor(t,
|
|
636
|
+
class O {
|
|
637
|
+
constructor(t, e, s, o, n, i, a, c) {
|
|
660
638
|
h(this, "svg");
|
|
661
639
|
h(this, "group");
|
|
662
640
|
h(this, "line");
|
|
663
641
|
h(this, "arrow", null);
|
|
664
642
|
h(this, "roundness");
|
|
665
643
|
h(this, "linePoints");
|
|
666
|
-
this.color = t, this.width =
|
|
644
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.side = i, this.minPortOffset = a, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.arrow = document.createElementNS(
|
|
667
645
|
"http://www.w3.org/2000/svg",
|
|
668
646
|
"path"
|
|
669
647
|
), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
|
|
@@ -679,11 +657,11 @@ class W {
|
|
|
679
657
|
[this.arrowLength, 0]
|
|
680
658
|
];
|
|
681
659
|
}
|
|
682
|
-
update(t,
|
|
683
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
660
|
+
update(t, e, s, o, n) {
|
|
661
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`;
|
|
684
662
|
const i = b(n.direction, 1, 1), a = this.linePoints.map(
|
|
685
|
-
(d) =>
|
|
686
|
-
), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${
|
|
663
|
+
(d) => A(d, i, [0, 0])
|
|
664
|
+
), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${F(a, this.roundness)}`;
|
|
687
665
|
if (this.line.setAttribute("d", l), this.arrow) {
|
|
688
666
|
const d = N(
|
|
689
667
|
i,
|
|
@@ -697,7 +675,7 @@ class W {
|
|
|
697
675
|
}
|
|
698
676
|
}
|
|
699
677
|
class k {
|
|
700
|
-
constructor(t,
|
|
678
|
+
constructor(t, e, s, o, n, i, a, c, l, d) {
|
|
701
679
|
h(this, "svg");
|
|
702
680
|
h(this, "group");
|
|
703
681
|
h(this, "line");
|
|
@@ -705,7 +683,7 @@ class k {
|
|
|
705
683
|
h(this, "targetArrow", null);
|
|
706
684
|
h(this, "detourX");
|
|
707
685
|
h(this, "detourY");
|
|
708
|
-
this.color = t, this.width =
|
|
686
|
+
this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.detourX = Math.cos(d) * l, this.detourY = Math.sin(d) * l, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
709
687
|
"http://www.w3.org/2000/svg",
|
|
710
688
|
"path"
|
|
711
689
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -713,45 +691,45 @@ class k {
|
|
|
713
691
|
"path"
|
|
714
692
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
715
693
|
}
|
|
716
|
-
update(t,
|
|
694
|
+
update(t, e, s, o, n, i) {
|
|
717
695
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
718
696
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
719
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
720
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ?
|
|
697
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
698
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
|
|
721
699
|
s,
|
|
722
700
|
o
|
|
723
|
-
]) : [s, o], f = this.arrowLength + this.arrowOffset, m =
|
|
701
|
+
]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = A([s - f, o], u, [
|
|
724
702
|
s,
|
|
725
703
|
o
|
|
726
|
-
]),
|
|
727
|
-
[p, m, E,
|
|
704
|
+
]), y = [v[0] + this.detourX, v[1] + this.detourY], C = F(
|
|
705
|
+
[p, m, E, y, v, w],
|
|
728
706
|
this.roundness
|
|
729
707
|
);
|
|
730
|
-
if (this.line.setAttribute("d",
|
|
731
|
-
const
|
|
708
|
+
if (this.line.setAttribute("d", C), this.sourceArrow) {
|
|
709
|
+
const S = N(
|
|
732
710
|
g,
|
|
733
711
|
0,
|
|
734
712
|
0,
|
|
735
713
|
this.arrowLength,
|
|
736
714
|
this.arrowWidth
|
|
737
715
|
);
|
|
738
|
-
this.sourceArrow.setAttribute("d",
|
|
716
|
+
this.sourceArrow.setAttribute("d", S);
|
|
739
717
|
}
|
|
740
718
|
if (this.targetArrow) {
|
|
741
|
-
const
|
|
719
|
+
const S = N(
|
|
742
720
|
u,
|
|
743
721
|
s,
|
|
744
722
|
o,
|
|
745
723
|
-this.arrowLength,
|
|
746
724
|
this.arrowWidth
|
|
747
725
|
);
|
|
748
|
-
this.targetArrow.setAttribute("d",
|
|
726
|
+
this.targetArrow.setAttribute("d", S);
|
|
749
727
|
}
|
|
750
728
|
}
|
|
751
729
|
}
|
|
752
|
-
var
|
|
730
|
+
var P = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(P || {});
|
|
753
731
|
class st {
|
|
754
|
-
constructor(t,
|
|
732
|
+
constructor(t, e, s, o, n, i, a, c, l) {
|
|
755
733
|
h(this, "svg");
|
|
756
734
|
h(this, "group");
|
|
757
735
|
h(this, "line");
|
|
@@ -759,7 +737,7 @@ class st {
|
|
|
759
737
|
h(this, "targetArrow", null);
|
|
760
738
|
h(this, "detourX");
|
|
761
739
|
h(this, "detourY");
|
|
762
|
-
this.color = t, this.width =
|
|
740
|
+
this.color = t, this.width = e, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, this.detourX = Math.cos(l) * c, this.detourY = Math.sin(l) * c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
|
|
763
741
|
"http://www.w3.org/2000/svg",
|
|
764
742
|
"path"
|
|
765
743
|
), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
|
|
@@ -767,171 +745,171 @@ class st {
|
|
|
767
745
|
"path"
|
|
768
746
|
), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
|
|
769
747
|
}
|
|
770
|
-
update(t,
|
|
748
|
+
update(t, e, s, o, n, i) {
|
|
771
749
|
this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
|
|
772
750
|
const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
|
|
773
|
-
this.svg.style.transform = `translate(${t}px, ${
|
|
774
|
-
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ?
|
|
751
|
+
this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
|
|
752
|
+
const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
|
|
775
753
|
s,
|
|
776
754
|
o
|
|
777
|
-
]) : [s, o], f = this.arrowLength, m =
|
|
755
|
+
]) : [s, o], f = this.arrowLength, m = A([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = A([s - f, o], u, [
|
|
778
756
|
s,
|
|
779
757
|
o
|
|
780
|
-
]),
|
|
758
|
+
]), y = [v[0] + this.detourX, v[1] + this.detourY], C = [(E[0] + y[0]) / 2, (E[1] + y[1]) / 2], S = [
|
|
781
759
|
m[0] - this.curvature * Math.cos(n.direction),
|
|
782
760
|
m[1] - this.curvature * Math.sin(n.direction)
|
|
783
|
-
],
|
|
761
|
+
], $ = [
|
|
784
762
|
v[0] + this.curvature * Math.cos(i.direction),
|
|
785
763
|
v[1] + this.curvature * Math.sin(i.direction)
|
|
786
|
-
],
|
|
764
|
+
], L = [m[0] + this.detourX, m[1] + this.detourY], M = [v[0] + this.detourX, v[1] + this.detourY], x = [
|
|
787
765
|
`M ${p[0]} ${p[1]}`,
|
|
788
766
|
`L ${m[0]} ${m[1]}`,
|
|
789
|
-
`C ${
|
|
790
|
-
`C ${
|
|
767
|
+
`C ${S[0]} ${S[1]} ${L[0]} ${L[1]} ${C[0]} ${C[1]}`,
|
|
768
|
+
`C ${M[0]} ${M[1]} ${$[0]} ${$[1]} ${v[0]} ${v[1]}`,
|
|
791
769
|
`L ${w[0]} ${w[1]}`
|
|
792
770
|
].join(" ");
|
|
793
|
-
if (this.line.setAttribute("d",
|
|
794
|
-
const
|
|
771
|
+
if (this.line.setAttribute("d", x), this.sourceArrow) {
|
|
772
|
+
const V = N(
|
|
795
773
|
g,
|
|
796
774
|
0,
|
|
797
775
|
0,
|
|
798
776
|
this.arrowLength,
|
|
799
777
|
this.arrowWidth
|
|
800
778
|
);
|
|
801
|
-
this.sourceArrow.setAttribute("d",
|
|
779
|
+
this.sourceArrow.setAttribute("d", V);
|
|
802
780
|
}
|
|
803
781
|
if (this.targetArrow) {
|
|
804
|
-
const
|
|
782
|
+
const V = N(
|
|
805
783
|
u,
|
|
806
784
|
s,
|
|
807
785
|
o,
|
|
808
786
|
-this.arrowLength,
|
|
809
787
|
this.arrowWidth
|
|
810
788
|
);
|
|
811
|
-
this.targetArrow.setAttribute("d",
|
|
789
|
+
this.targetArrow.setAttribute("d", V);
|
|
812
790
|
}
|
|
813
791
|
}
|
|
814
792
|
}
|
|
815
|
-
const ot = (
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
) : t ===
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
793
|
+
const ot = (r) => (t) => t === P.PortCycle ? new rt(
|
|
794
|
+
r.color,
|
|
795
|
+
r.width,
|
|
796
|
+
r.arrowLength,
|
|
797
|
+
r.arrowWidth,
|
|
798
|
+
r.hasSourceArrow || r.hasTargetArrow,
|
|
799
|
+
r.cycleRadius,
|
|
800
|
+
r.smallCycleRadius
|
|
801
|
+
) : t === P.NodeCycle ? new st(
|
|
802
|
+
r.color,
|
|
803
|
+
r.width,
|
|
804
|
+
r.curvature,
|
|
805
|
+
r.arrowLength,
|
|
806
|
+
r.arrowWidth,
|
|
807
|
+
r.hasSourceArrow,
|
|
808
|
+
r.hasTargetArrow,
|
|
809
|
+
r.detourDistance,
|
|
810
|
+
r.detourDirection
|
|
833
811
|
) : new q(
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
), it = (
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
) : t ===
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
812
|
+
r.color,
|
|
813
|
+
r.width,
|
|
814
|
+
r.curvature,
|
|
815
|
+
r.arrowLength,
|
|
816
|
+
r.arrowWidth,
|
|
817
|
+
r.hasSourceArrow,
|
|
818
|
+
r.hasTargetArrow
|
|
819
|
+
), it = (r) => (t) => t === P.PortCycle ? new O(
|
|
820
|
+
r.color,
|
|
821
|
+
r.width,
|
|
822
|
+
r.arrowLength,
|
|
823
|
+
r.arrowWidth,
|
|
824
|
+
r.hasSourceArrow || r.hasTargetArrow,
|
|
825
|
+
r.cycleSquareSide,
|
|
826
|
+
r.arrowOffset,
|
|
827
|
+
r.roundness
|
|
828
|
+
) : t === P.NodeCycle ? new k(
|
|
829
|
+
r.color,
|
|
830
|
+
r.width,
|
|
831
|
+
r.arrowLength,
|
|
832
|
+
r.arrowWidth,
|
|
833
|
+
r.arrowOffset,
|
|
834
|
+
r.hasSourceArrow,
|
|
835
|
+
r.hasTargetArrow,
|
|
836
|
+
r.roundness,
|
|
837
|
+
r.detourDistance,
|
|
838
|
+
r.detourDirection
|
|
861
839
|
) : new I(
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
), nt = (
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
) : t ===
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
840
|
+
r.color,
|
|
841
|
+
r.width,
|
|
842
|
+
r.arrowLength,
|
|
843
|
+
r.arrowWidth,
|
|
844
|
+
r.arrowOffset,
|
|
845
|
+
r.hasSourceArrow,
|
|
846
|
+
r.hasTargetArrow,
|
|
847
|
+
r.roundness
|
|
848
|
+
), nt = (r) => (t) => t === P.PortCycle ? new O(
|
|
849
|
+
r.color,
|
|
850
|
+
r.width,
|
|
851
|
+
r.arrowLength,
|
|
852
|
+
r.arrowWidth,
|
|
853
|
+
r.hasSourceArrow || r.hasTargetArrow,
|
|
854
|
+
r.cycleSquareSide,
|
|
855
|
+
r.arrowOffset,
|
|
856
|
+
r.roundness
|
|
857
|
+
) : t === P.NodeCycle ? new k(
|
|
858
|
+
r.color,
|
|
859
|
+
r.width,
|
|
860
|
+
r.arrowLength,
|
|
861
|
+
r.arrowWidth,
|
|
862
|
+
r.arrowOffset,
|
|
863
|
+
r.hasSourceArrow,
|
|
864
|
+
r.hasTargetArrow,
|
|
865
|
+
r.roundness,
|
|
866
|
+
r.detourDistance,
|
|
867
|
+
r.detourDirection
|
|
890
868
|
) : new tt(
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
), ht = (
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
) : t ===
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
869
|
+
r.color,
|
|
870
|
+
r.width,
|
|
871
|
+
r.arrowLength,
|
|
872
|
+
r.arrowWidth,
|
|
873
|
+
r.arrowOffset,
|
|
874
|
+
r.hasSourceArrow,
|
|
875
|
+
r.hasTargetArrow,
|
|
876
|
+
r.roundness
|
|
877
|
+
), ht = (r) => (t) => t === P.PortCycle ? new O(
|
|
878
|
+
r.color,
|
|
879
|
+
r.width,
|
|
880
|
+
r.arrowLength,
|
|
881
|
+
r.arrowWidth,
|
|
882
|
+
r.hasSourceArrow || r.hasTargetArrow,
|
|
883
|
+
r.cycleSquareSide,
|
|
884
|
+
r.arrowOffset,
|
|
885
|
+
r.roundness
|
|
886
|
+
) : t === P.NodeCycle ? new k(
|
|
887
|
+
r.color,
|
|
888
|
+
r.width,
|
|
889
|
+
r.arrowLength,
|
|
890
|
+
r.arrowWidth,
|
|
891
|
+
r.arrowOffset,
|
|
892
|
+
r.hasSourceArrow,
|
|
893
|
+
r.hasTargetArrow,
|
|
894
|
+
r.roundness,
|
|
895
|
+
r.detourDistance,
|
|
896
|
+
r.detourDirection
|
|
919
897
|
) : new et(
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
898
|
+
r.color,
|
|
899
|
+
r.width,
|
|
900
|
+
r.arrowLength,
|
|
901
|
+
r.arrowWidth,
|
|
902
|
+
r.arrowOffset,
|
|
903
|
+
r.hasSourceArrow,
|
|
904
|
+
r.hasTargetArrow,
|
|
905
|
+
r.roundness
|
|
928
906
|
);
|
|
929
|
-
class
|
|
907
|
+
class D {
|
|
930
908
|
constructor() {
|
|
931
909
|
h(this, "counter", 0);
|
|
932
910
|
}
|
|
933
911
|
create() {
|
|
934
|
-
const t =
|
|
912
|
+
const t = this.counter;
|
|
935
913
|
return this.counter++, t;
|
|
936
914
|
}
|
|
937
915
|
reset() {
|
|
@@ -939,75 +917,49 @@ class O {
|
|
|
939
917
|
}
|
|
940
918
|
}
|
|
941
919
|
class at {
|
|
942
|
-
constructor() {
|
|
943
|
-
h(this, "
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
return this.priority++, t;
|
|
948
|
-
}
|
|
949
|
-
push(t) {
|
|
950
|
-
this.priority = Math.max(this.priority, t);
|
|
951
|
-
}
|
|
952
|
-
reset() {
|
|
953
|
-
this.priority = 0;
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
class ct {
|
|
957
|
-
constructor(t, r, s, o, n, i) {
|
|
958
|
-
h(this, "nodeIdGenerator", new O());
|
|
959
|
-
h(this, "portIdGenerator", new O());
|
|
960
|
-
h(this, "edgeIdGenerator", new O());
|
|
961
|
-
h(this, "priorityGenerator", new at());
|
|
962
|
-
this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = n, this.portsDirection = i;
|
|
963
|
-
}
|
|
964
|
-
moveNodeOnTop(t) {
|
|
965
|
-
const r = this.graphStore.getNode(t);
|
|
966
|
-
if (r === void 0)
|
|
967
|
-
throw new Error("failed to move on top nonexisting node");
|
|
968
|
-
const s = this.priorityGenerator.create(), o = this.priorityGenerator.create();
|
|
969
|
-
r.priority = o, this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdges(t).forEach((i) => {
|
|
970
|
-
const a = this.graphStore.getEdge(i);
|
|
971
|
-
a.priority = s, this.htmlController.updateEdgePriority(i);
|
|
972
|
-
});
|
|
920
|
+
constructor(t, e, s, o, n, i, a, c) {
|
|
921
|
+
h(this, "nodeIdGenerator", new D());
|
|
922
|
+
h(this, "portIdGenerator", new D());
|
|
923
|
+
h(this, "edgeIdGenerator", new D());
|
|
924
|
+
this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = n, this.portsDirection = i, this.nodesPriorityFn = a, this.edgesPriorityFn = c;
|
|
973
925
|
}
|
|
974
|
-
addNode(t,
|
|
926
|
+
addNode(t, e, s, o, n, i, a) {
|
|
975
927
|
if (t === void 0)
|
|
976
928
|
do
|
|
977
929
|
t = this.nodeIdGenerator.create();
|
|
978
930
|
while (this.graphStore.getNode(t) !== void 0);
|
|
979
931
|
if (this.graphStore.getNode(t) !== void 0)
|
|
980
932
|
throw new Error("failed to add node with existing id");
|
|
981
|
-
|
|
933
|
+
this.graphStore.addNode(
|
|
982
934
|
t,
|
|
983
|
-
|
|
935
|
+
e,
|
|
984
936
|
s,
|
|
985
937
|
o,
|
|
986
938
|
i ?? this.nodesCenterFn,
|
|
987
|
-
a ?? this.
|
|
988
|
-
), this.htmlController.attachNode(t), n
|
|
989
|
-
|
|
939
|
+
a ?? this.nodesPriorityFn()
|
|
940
|
+
), this.htmlController.attachNode(t), new Map(n ?? []).forEach((l, d) => {
|
|
941
|
+
l instanceof HTMLElement ? this.markPort(
|
|
942
|
+
d,
|
|
990
943
|
l,
|
|
991
|
-
c,
|
|
992
944
|
t,
|
|
993
945
|
this.portsCenterFn,
|
|
994
946
|
this.portsDirection
|
|
995
947
|
) : this.markPort(
|
|
996
|
-
|
|
997
|
-
|
|
948
|
+
d,
|
|
949
|
+
l.element,
|
|
998
950
|
t,
|
|
999
|
-
|
|
1000
|
-
|
|
951
|
+
l.centerFn ?? this.portsCenterFn,
|
|
952
|
+
l.direction ?? this.portsDirection
|
|
1001
953
|
);
|
|
1002
954
|
});
|
|
1003
955
|
}
|
|
1004
|
-
updateNode(t,
|
|
956
|
+
updateNode(t, e, s, o, n) {
|
|
1005
957
|
const i = this.graphStore.getNode(t);
|
|
1006
958
|
if (i === void 0)
|
|
1007
959
|
throw new Error("failed to update nonexisting node");
|
|
1008
|
-
i.x =
|
|
960
|
+
i.x = e ?? i.x, i.y = s ?? i.y, i.centerFn = n ?? i.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (i.priority = o, this.htmlController.updateNodePriority(t));
|
|
1009
961
|
}
|
|
1010
|
-
markPort(t,
|
|
962
|
+
markPort(t, e, s, o, n) {
|
|
1011
963
|
if (t === void 0)
|
|
1012
964
|
do
|
|
1013
965
|
t = this.portIdGenerator.create();
|
|
@@ -1018,51 +970,51 @@ class ct {
|
|
|
1018
970
|
throw new Error("failed to add port with existing id");
|
|
1019
971
|
this.graphStore.addPort(
|
|
1020
972
|
t,
|
|
1021
|
-
|
|
973
|
+
e,
|
|
1022
974
|
s,
|
|
1023
975
|
o ?? this.portsCenterFn,
|
|
1024
976
|
n ?? 0
|
|
1025
977
|
);
|
|
1026
978
|
}
|
|
1027
|
-
updatePort(t,
|
|
979
|
+
updatePort(t, e) {
|
|
1028
980
|
const s = this.graphStore.getPort(t);
|
|
1029
981
|
if (s === void 0)
|
|
1030
982
|
throw new Error("failed to unset nonexisting port");
|
|
1031
|
-
s.direction = (
|
|
983
|
+
s.direction = (e == null ? void 0 : e.direction) ?? s.direction, s.centerFn = (e == null ? void 0 : e.centerFn) ?? s.centerFn, this.htmlController.updatePortEdges(t);
|
|
1032
984
|
}
|
|
1033
985
|
unmarkPort(t) {
|
|
1034
986
|
if (this.graphStore.getPort(t) === void 0)
|
|
1035
987
|
throw new Error("failed to unset nonexisting port");
|
|
1036
|
-
this.graphStore.getPortAdjacentEdges(t).forEach((
|
|
1037
|
-
this.removeEdge(
|
|
988
|
+
this.graphStore.getPortAdjacentEdges(t).forEach((e) => {
|
|
989
|
+
this.removeEdge(e);
|
|
1038
990
|
}), this.graphStore.removePort(t);
|
|
1039
991
|
}
|
|
1040
|
-
addEdge(t,
|
|
992
|
+
addEdge(t, e, s, o, n) {
|
|
1041
993
|
if (t === void 0)
|
|
1042
994
|
do
|
|
1043
995
|
t = this.edgeIdGenerator.create();
|
|
1044
996
|
while (this.graphStore.getEdge(t) !== void 0);
|
|
1045
|
-
if (this.graphStore.getPort(
|
|
997
|
+
if (this.graphStore.getPort(e) === void 0)
|
|
1046
998
|
throw new Error("failed to add edge from nonexisting port");
|
|
1047
999
|
if (this.graphStore.getPort(s) === void 0)
|
|
1048
1000
|
throw new Error("failed to add edge to nonexisting port");
|
|
1049
1001
|
if (this.graphStore.getEdge(t) !== void 0)
|
|
1050
1002
|
throw new Error("failed to add edge with existing id");
|
|
1051
|
-
let i =
|
|
1052
|
-
const a = this.graphStore.getPortNode(
|
|
1053
|
-
|
|
1003
|
+
let i = P.Regular;
|
|
1004
|
+
const a = this.graphStore.getPortNode(e), c = this.graphStore.getPortNode(s);
|
|
1005
|
+
e === s ? i = P.PortCycle : a === c && (i = P.NodeCycle), this.graphStore.addEdge(
|
|
1054
1006
|
t,
|
|
1055
|
-
|
|
1007
|
+
e,
|
|
1056
1008
|
s,
|
|
1057
1009
|
o(i),
|
|
1058
|
-
n ?? this.
|
|
1010
|
+
n ?? this.edgesPriorityFn()
|
|
1059
1011
|
), this.htmlController.attachEdge(t);
|
|
1060
1012
|
}
|
|
1061
|
-
updateEdge(t,
|
|
1013
|
+
updateEdge(t, e) {
|
|
1062
1014
|
const s = this.graphStore.getEdge(t);
|
|
1063
1015
|
if (s === void 0)
|
|
1064
1016
|
throw new Error("failed to update nonexisting edge");
|
|
1065
|
-
|
|
1017
|
+
e.controller !== void 0 && (this.htmlController.detachEdge(t), s.shape = e.controller, this.htmlController.attachEdge(t)), e.priority !== void 0 && (s.priority = e.priority, this.htmlController.updateEdgePriority(t));
|
|
1066
1018
|
}
|
|
1067
1019
|
removeEdge(t) {
|
|
1068
1020
|
if (this.graphStore.getEdge(t) === void 0)
|
|
@@ -1074,19 +1026,19 @@ class ct {
|
|
|
1074
1026
|
throw new Error("failed to remove nonexisting node");
|
|
1075
1027
|
this.htmlController.detachNode(t), this.graphStore.removeNode(t);
|
|
1076
1028
|
}
|
|
1077
|
-
patchViewportState(t,
|
|
1078
|
-
this.viewportTransformer.patchState(t,
|
|
1029
|
+
patchViewportState(t, e, s) {
|
|
1030
|
+
this.viewportTransformer.patchState(t, e, s), this.htmlController.applyTransform();
|
|
1079
1031
|
}
|
|
1080
1032
|
moveToNodes(t) {
|
|
1081
1033
|
if (t.length === 0)
|
|
1082
1034
|
return;
|
|
1083
|
-
const
|
|
1084
|
-
if (
|
|
1035
|
+
const e = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
|
|
1036
|
+
if (e.length < t.length)
|
|
1085
1037
|
throw new Error("failed to move to nonexisting node");
|
|
1086
|
-
const [s, o] =
|
|
1038
|
+
const [s, o] = e.reduce(
|
|
1087
1039
|
(u, p) => [u[0] + p.x, u[1] + p.y],
|
|
1088
1040
|
[0, 0]
|
|
1089
|
-
), n = s /
|
|
1041
|
+
), n = s / e.length, i = o / e.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), d = n - l * a / 2, g = i - l * c / 2;
|
|
1090
1042
|
this.patchViewportState(null, d, g);
|
|
1091
1043
|
}
|
|
1092
1044
|
attach(t) {
|
|
@@ -1096,180 +1048,192 @@ class ct {
|
|
|
1096
1048
|
this.htmlController.detach();
|
|
1097
1049
|
}
|
|
1098
1050
|
clear() {
|
|
1099
|
-
this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset()
|
|
1051
|
+
this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
|
|
1100
1052
|
}
|
|
1101
1053
|
destroy() {
|
|
1102
1054
|
this.htmlController.destroy();
|
|
1103
1055
|
}
|
|
1104
1056
|
}
|
|
1105
|
-
class
|
|
1106
|
-
constructor(t,
|
|
1057
|
+
class ct {
|
|
1058
|
+
constructor(t, e, s, o, n, i) {
|
|
1107
1059
|
h(this, "publicViewportTransformer");
|
|
1060
|
+
h(this, "publicGraphStore");
|
|
1108
1061
|
h(this, "canvasController");
|
|
1109
|
-
const
|
|
1110
|
-
this.publicViewportTransformer = new
|
|
1111
|
-
|
|
1062
|
+
const a = new J(), c = new Q();
|
|
1063
|
+
this.publicGraphStore = new Z(c), this.publicViewportTransformer = new K(
|
|
1064
|
+
a
|
|
1112
1065
|
);
|
|
1113
|
-
const
|
|
1066
|
+
const l = new _(
|
|
1067
|
+
c,
|
|
1114
1068
|
a,
|
|
1115
|
-
i,
|
|
1116
1069
|
this.publicViewportTransformer,
|
|
1117
|
-
t
|
|
1118
|
-
r
|
|
1070
|
+
t
|
|
1119
1071
|
);
|
|
1120
|
-
this.canvasController = new
|
|
1121
|
-
a,
|
|
1072
|
+
this.canvasController = new at(
|
|
1122
1073
|
c,
|
|
1123
|
-
|
|
1074
|
+
l,
|
|
1075
|
+
a,
|
|
1076
|
+
e,
|
|
1124
1077
|
s,
|
|
1125
1078
|
o,
|
|
1126
|
-
n
|
|
1079
|
+
n,
|
|
1080
|
+
i
|
|
1127
1081
|
);
|
|
1128
1082
|
}
|
|
1129
1083
|
}
|
|
1130
|
-
const R = (
|
|
1131
|
-
|
|
1084
|
+
const R = (r, t) => [
|
|
1085
|
+
r / 2,
|
|
1132
1086
|
t / 2
|
|
1133
|
-
],
|
|
1134
|
-
},
|
|
1135
|
-
|
|
1087
|
+
], lt = () => () => {
|
|
1088
|
+
}, dt = (r, t, e, s, o, n) => {
|
|
1089
|
+
r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = n, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
|
|
1136
1090
|
const i = t.getViewCoords(0, 0), a = t.getViewScale(), c = s * a;
|
|
1137
1091
|
let l = 0, d = 0, g = c / 2;
|
|
1138
1092
|
do
|
|
1139
|
-
g *= 2, l =
|
|
1093
|
+
g *= 2, l = r.canvas.width / g, d = r.canvas.height / g;
|
|
1140
1094
|
while (l * d > 1e4);
|
|
1141
|
-
const u = i[0] - Math.floor(i[0] / g) * g, p = i[1] - Math.floor(i[1] / g) * g, w = o * a, f = 2 * Math.PI, m = u - g, E = p - g, v =
|
|
1142
|
-
|
|
1143
|
-
for (let
|
|
1144
|
-
for (let
|
|
1145
|
-
|
|
1146
|
-
},
|
|
1147
|
-
|
|
1095
|
+
const u = i[0] - Math.floor(i[0] / g) * g, p = i[1] - Math.floor(i[1] / g) * g, w = o * a, f = 2 * Math.PI, m = u - g, E = p - g, v = r.canvas.width + u, y = r.canvas.height + p;
|
|
1096
|
+
r.fillStyle = e;
|
|
1097
|
+
for (let C = m; C <= v; C += g)
|
|
1098
|
+
for (let S = E; S <= y; S += g)
|
|
1099
|
+
r.beginPath(), r.arc(C, S, w, 0, f), r.closePath(), r.fill();
|
|
1100
|
+
}, gt = (r, t, e, s) => (o, n) => {
|
|
1101
|
+
dt(
|
|
1148
1102
|
o,
|
|
1149
1103
|
n,
|
|
1150
|
-
e,
|
|
1151
|
-
t,
|
|
1152
1104
|
r,
|
|
1105
|
+
t,
|
|
1106
|
+
e,
|
|
1153
1107
|
s
|
|
1154
1108
|
);
|
|
1155
|
-
},
|
|
1156
|
-
|
|
1157
|
-
}, mt = (e) => (t) => {
|
|
1158
|
-
wt(t, e);
|
|
1159
|
-
}, pt = (e) => {
|
|
1160
|
-
switch (e == null ? void 0 : e.type) {
|
|
1109
|
+
}, ut = (r) => {
|
|
1110
|
+
switch (r == null ? void 0 : r.type) {
|
|
1161
1111
|
case "custom":
|
|
1162
|
-
return
|
|
1112
|
+
return r.drawingFn;
|
|
1163
1113
|
case "dots":
|
|
1164
|
-
return
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1114
|
+
return gt(
|
|
1115
|
+
r.dotColor ?? "#d8d8d8",
|
|
1116
|
+
r.dotGap ?? 25,
|
|
1117
|
+
r.dotRadius ?? 1.5,
|
|
1118
|
+
r.color ?? "#ffffff"
|
|
1169
1119
|
);
|
|
1170
|
-
case "color":
|
|
1171
|
-
return mt(e.color ?? "#ffffff");
|
|
1172
1120
|
default:
|
|
1173
|
-
return
|
|
1121
|
+
return lt();
|
|
1174
1122
|
}
|
|
1175
|
-
},
|
|
1176
|
-
switch (
|
|
1123
|
+
}, X = (r) => {
|
|
1124
|
+
switch (r == null ? void 0 : r.type) {
|
|
1177
1125
|
case "custom":
|
|
1178
|
-
return
|
|
1126
|
+
return r.controllerFactory;
|
|
1179
1127
|
case "straight":
|
|
1180
1128
|
return it({
|
|
1181
|
-
color:
|
|
1182
|
-
width:
|
|
1183
|
-
arrowLength:
|
|
1184
|
-
arrowWidth:
|
|
1185
|
-
arrowOffset:
|
|
1186
|
-
hasSourceArrow:
|
|
1187
|
-
hasTargetArrow:
|
|
1188
|
-
cycleSquareSide:
|
|
1189
|
-
roundness:
|
|
1190
|
-
detourDistance:
|
|
1191
|
-
detourDirection:
|
|
1129
|
+
color: r.color ?? "#5c5c5c",
|
|
1130
|
+
width: r.width ?? 1,
|
|
1131
|
+
arrowLength: r.arrowLength ?? 15,
|
|
1132
|
+
arrowWidth: r.arrowWidth ?? 4,
|
|
1133
|
+
arrowOffset: r.arrowOffset ?? 15,
|
|
1134
|
+
hasSourceArrow: r.hasSourceArrow ?? !1,
|
|
1135
|
+
hasTargetArrow: r.hasTargetArrow ?? !1,
|
|
1136
|
+
cycleSquareSide: r.cycleSquareSide ?? 30,
|
|
1137
|
+
roundness: r.roundness ?? 10,
|
|
1138
|
+
detourDistance: r.detourDistance ?? 100,
|
|
1139
|
+
detourDirection: r.detourDirection ?? -Math.PI / 2
|
|
1192
1140
|
});
|
|
1193
1141
|
case "horizontal":
|
|
1194
1142
|
return nt({
|
|
1195
|
-
color:
|
|
1196
|
-
width:
|
|
1197
|
-
arrowLength:
|
|
1198
|
-
arrowWidth:
|
|
1199
|
-
arrowOffset:
|
|
1200
|
-
hasSourceArrow:
|
|
1201
|
-
hasTargetArrow:
|
|
1202
|
-
cycleSquareSide:
|
|
1203
|
-
roundness:
|
|
1204
|
-
detourDistance:
|
|
1205
|
-
detourDirection:
|
|
1143
|
+
color: r.color ?? "#5c5c5c",
|
|
1144
|
+
width: r.width ?? 1,
|
|
1145
|
+
arrowLength: r.arrowLength ?? 15,
|
|
1146
|
+
arrowWidth: r.arrowWidth ?? 4,
|
|
1147
|
+
arrowOffset: r.arrowOffset ?? 15,
|
|
1148
|
+
hasSourceArrow: r.hasSourceArrow ?? !1,
|
|
1149
|
+
hasTargetArrow: r.hasTargetArrow ?? !1,
|
|
1150
|
+
cycleSquareSide: r.cycleSquareSide ?? 30,
|
|
1151
|
+
roundness: r.roundness ?? 10,
|
|
1152
|
+
detourDistance: r.detourDistance ?? 100,
|
|
1153
|
+
detourDirection: r.detourDirection ?? -Math.PI / 2
|
|
1206
1154
|
});
|
|
1207
1155
|
case "vertical":
|
|
1208
1156
|
return ht({
|
|
1209
|
-
color:
|
|
1210
|
-
width:
|
|
1211
|
-
arrowLength:
|
|
1212
|
-
arrowWidth:
|
|
1213
|
-
arrowOffset:
|
|
1214
|
-
hasSourceArrow:
|
|
1215
|
-
hasTargetArrow:
|
|
1216
|
-
cycleSquareSide:
|
|
1217
|
-
roundness:
|
|
1218
|
-
detourDistance:
|
|
1219
|
-
detourDirection:
|
|
1157
|
+
color: r.color ?? "#5c5c5c",
|
|
1158
|
+
width: r.width ?? 1,
|
|
1159
|
+
arrowLength: r.arrowLength ?? 15,
|
|
1160
|
+
arrowWidth: r.arrowWidth ?? 4,
|
|
1161
|
+
arrowOffset: r.arrowOffset ?? 15,
|
|
1162
|
+
hasSourceArrow: r.hasSourceArrow ?? !1,
|
|
1163
|
+
hasTargetArrow: r.hasTargetArrow ?? !1,
|
|
1164
|
+
cycleSquareSide: r.cycleSquareSide ?? 30,
|
|
1165
|
+
roundness: r.roundness ?? 10,
|
|
1166
|
+
detourDistance: r.detourDistance ?? 100,
|
|
1167
|
+
detourDirection: r.detourDirection ?? -Math.PI / 2
|
|
1220
1168
|
});
|
|
1221
1169
|
default:
|
|
1222
1170
|
return ot({
|
|
1223
|
-
color:
|
|
1224
|
-
width:
|
|
1225
|
-
curvature:
|
|
1226
|
-
arrowLength:
|
|
1227
|
-
arrowWidth:
|
|
1228
|
-
hasSourceArrow:
|
|
1229
|
-
hasTargetArrow:
|
|
1230
|
-
cycleRadius:
|
|
1231
|
-
smallCycleRadius:
|
|
1232
|
-
detourDistance:
|
|
1233
|
-
detourDirection:
|
|
1171
|
+
color: r.color ?? "#5c5c5c",
|
|
1172
|
+
width: r.width ?? 1,
|
|
1173
|
+
curvature: r.curvature ?? 90,
|
|
1174
|
+
arrowLength: r.arrowLength ?? 15,
|
|
1175
|
+
arrowWidth: r.arrowWidth ?? 4,
|
|
1176
|
+
hasSourceArrow: r.hasSourceArrow ?? !1,
|
|
1177
|
+
hasTargetArrow: r.hasTargetArrow ?? !1,
|
|
1178
|
+
cycleRadius: r.cycleRadius ?? 30,
|
|
1179
|
+
smallCycleRadius: r.smallCycleRadius ?? 15,
|
|
1180
|
+
detourDistance: r.detourDistance ?? 100,
|
|
1181
|
+
detourDirection: r.detourDirection ?? -Math.PI / 2
|
|
1234
1182
|
});
|
|
1235
1183
|
}
|
|
1236
|
-
},
|
|
1237
|
-
|
|
1184
|
+
}, Y = () => 0, z = (r) => () => r, W = () => {
|
|
1185
|
+
let r = 0;
|
|
1186
|
+
return () => r++;
|
|
1187
|
+
}, wt = (r, t) => {
|
|
1188
|
+
const e = [
|
|
1189
|
+
Y,
|
|
1190
|
+
Y
|
|
1191
|
+
];
|
|
1192
|
+
r === "incremental" && (e[0] = W()), t === "incremental" && (e[1] = W());
|
|
1193
|
+
const s = W();
|
|
1194
|
+
return r === "shared-incremental" && (e[0] = s), t === "shared-incremental" && (e[1] = s), typeof r == "number" && (e[0] = z(r)), typeof t == "number" && (e[1] = z(t)), typeof r == "function" && (e[0] = r), typeof t == "function" && (e[1] = t), e;
|
|
1195
|
+
}, mt = (r) => {
|
|
1196
|
+
var s, o, n, i, a, c;
|
|
1197
|
+
const [t, e] = wt(
|
|
1198
|
+
(s = r.nodes) == null ? void 0 : s.priority,
|
|
1199
|
+
(o = r.edges) == null ? void 0 : o.priority
|
|
1200
|
+
);
|
|
1238
1201
|
return {
|
|
1239
1202
|
background: {
|
|
1240
|
-
drawingFn:
|
|
1241
|
-
|
|
1203
|
+
drawingFn: ut(
|
|
1204
|
+
r.background ?? { type: "none" }
|
|
1242
1205
|
)
|
|
1243
1206
|
},
|
|
1244
1207
|
nodes: {
|
|
1245
|
-
centerFn: ((
|
|
1208
|
+
centerFn: ((n = r.nodes) == null ? void 0 : n.centerFn) ?? R,
|
|
1209
|
+
priorityFn: t
|
|
1246
1210
|
},
|
|
1247
1211
|
ports: {
|
|
1248
|
-
centerFn: ((
|
|
1249
|
-
direction: ((
|
|
1212
|
+
centerFn: ((i = r.ports) == null ? void 0 : i.centerFn) ?? R,
|
|
1213
|
+
direction: ((a = r.ports) == null ? void 0 : a.direction) ?? 0
|
|
1250
1214
|
},
|
|
1251
1215
|
edges: {
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
layers: {
|
|
1255
|
-
mode: ((o = e.layers) == null ? void 0 : o.mode) ?? "edges-follow-node"
|
|
1216
|
+
shapeFactory: X(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
|
|
1217
|
+
priorityFn: e
|
|
1256
1218
|
}
|
|
1257
1219
|
};
|
|
1258
1220
|
};
|
|
1259
|
-
class
|
|
1221
|
+
class pt {
|
|
1260
1222
|
constructor(t) {
|
|
1261
1223
|
h(this, "transformation");
|
|
1224
|
+
h(this, "model");
|
|
1262
1225
|
h(this, "di");
|
|
1263
|
-
h(this, "
|
|
1226
|
+
h(this, "edgeShapeFactory");
|
|
1264
1227
|
this.apiOptions = t;
|
|
1265
|
-
const
|
|
1266
|
-
this.di = new
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1228
|
+
const e = mt(this.apiOptions ?? {});
|
|
1229
|
+
this.di = new ct(
|
|
1230
|
+
e.background.drawingFn,
|
|
1231
|
+
e.nodes.centerFn,
|
|
1232
|
+
e.ports.centerFn,
|
|
1233
|
+
e.ports.direction,
|
|
1234
|
+
e.nodes.priorityFn,
|
|
1235
|
+
e.edges.priorityFn
|
|
1236
|
+
), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = e.edges.shapeFactory;
|
|
1273
1237
|
}
|
|
1274
1238
|
addNode(t) {
|
|
1275
1239
|
return this.di.canvasController.addNode(
|
|
@@ -1282,21 +1246,18 @@ class ft {
|
|
|
1282
1246
|
t.priority
|
|
1283
1247
|
), this;
|
|
1284
1248
|
}
|
|
1285
|
-
updateNode(t,
|
|
1249
|
+
updateNode(t, e) {
|
|
1286
1250
|
return this.di.canvasController.updateNode(
|
|
1287
1251
|
t,
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1252
|
+
e.x,
|
|
1253
|
+
e.y,
|
|
1254
|
+
e.priority,
|
|
1255
|
+
e.centerFn
|
|
1292
1256
|
), this;
|
|
1293
1257
|
}
|
|
1294
1258
|
removeNode(t) {
|
|
1295
1259
|
return this.di.canvasController.removeNode(t), this;
|
|
1296
1260
|
}
|
|
1297
|
-
moveNodeOnTop(t) {
|
|
1298
|
-
return this.di.canvasController.moveNodeOnTop(t), this;
|
|
1299
|
-
}
|
|
1300
1261
|
markPort(t) {
|
|
1301
1262
|
return this.di.canvasController.markPort(
|
|
1302
1263
|
t.id,
|
|
@@ -1306,24 +1267,24 @@ class ft {
|
|
|
1306
1267
|
t.direction
|
|
1307
1268
|
), this;
|
|
1308
1269
|
}
|
|
1309
|
-
updatePort(t,
|
|
1310
|
-
return this.di.canvasController.updatePort(t,
|
|
1270
|
+
updatePort(t, e) {
|
|
1271
|
+
return this.di.canvasController.updatePort(t, e), this;
|
|
1311
1272
|
}
|
|
1312
1273
|
unmarkPort(t) {
|
|
1313
1274
|
return this.di.canvasController.unmarkPort(t), this;
|
|
1314
1275
|
}
|
|
1315
1276
|
addEdge(t) {
|
|
1316
|
-
const
|
|
1277
|
+
const e = t.options !== void 0 ? X(t.options) : this.edgeShapeFactory;
|
|
1317
1278
|
return this.di.canvasController.addEdge(
|
|
1318
1279
|
t.id,
|
|
1319
1280
|
t.from,
|
|
1320
1281
|
t.to,
|
|
1321
|
-
|
|
1282
|
+
e,
|
|
1322
1283
|
t.priority
|
|
1323
1284
|
), this;
|
|
1324
1285
|
}
|
|
1325
|
-
updateEdge(t,
|
|
1326
|
-
return this.di.canvasController.updateEdge(t,
|
|
1286
|
+
updateEdge(t, e) {
|
|
1287
|
+
return this.di.canvasController.updateEdge(t, e), this;
|
|
1327
1288
|
}
|
|
1328
1289
|
removeEdge(t) {
|
|
1329
1290
|
return this.di.canvasController.removeEdge(t), this;
|
|
@@ -1351,14 +1312,16 @@ class ft {
|
|
|
1351
1312
|
this.di.canvasController.destroy();
|
|
1352
1313
|
}
|
|
1353
1314
|
}
|
|
1354
|
-
class
|
|
1355
|
-
constructor(t,
|
|
1315
|
+
class vt {
|
|
1316
|
+
constructor(t, e) {
|
|
1317
|
+
h(this, "model");
|
|
1356
1318
|
h(this, "transformation");
|
|
1319
|
+
h(this, "maxNodePriority", 0);
|
|
1357
1320
|
h(this, "nodes", /* @__PURE__ */ new Map());
|
|
1358
1321
|
h(this, "grabbedNodeId", null);
|
|
1359
1322
|
h(this, "onNodeDrag");
|
|
1360
1323
|
h(this, "onBeforeNodeDrag");
|
|
1361
|
-
h(this, "nodeIdGenerator", new
|
|
1324
|
+
h(this, "nodeIdGenerator", new D());
|
|
1362
1325
|
h(this, "element", null);
|
|
1363
1326
|
h(this, "onCanvasMouseUp", () => {
|
|
1364
1327
|
this.setCursor(null), this.grabbedNodeId = null;
|
|
@@ -1376,11 +1339,11 @@ class Et {
|
|
|
1376
1339
|
if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
|
|
1377
1340
|
return;
|
|
1378
1341
|
t.stopImmediatePropagation();
|
|
1379
|
-
const [
|
|
1342
|
+
const [e, s] = [
|
|
1380
1343
|
t.touches[0].clientX - this.previousTouchCoords[0],
|
|
1381
1344
|
t.touches[0].clientY - this.previousTouchCoords[1]
|
|
1382
1345
|
];
|
|
1383
|
-
this.dragNode(this.grabbedNodeId,
|
|
1346
|
+
this.dragNode(this.grabbedNodeId, e, s), this.previousTouchCoords = [
|
|
1384
1347
|
t.touches[0].clientX,
|
|
1385
1348
|
t.touches[0].clientY
|
|
1386
1349
|
];
|
|
@@ -1392,56 +1355,57 @@ class Et {
|
|
|
1392
1355
|
] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
|
|
1393
1356
|
});
|
|
1394
1357
|
h(this, "previousTouchCoords", null);
|
|
1358
|
+
h(this, "freezePriority");
|
|
1395
1359
|
var n, i;
|
|
1396
|
-
this.canvas = t, this.transformation = this.canvas.transformation;
|
|
1360
|
+
this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
|
|
1397
1361
|
const s = () => {
|
|
1398
1362
|
};
|
|
1399
|
-
this.onNodeDrag = ((n =
|
|
1363
|
+
this.onNodeDrag = ((n = e == null ? void 0 : e.events) == null ? void 0 : n.onNodeDrag) ?? s;
|
|
1400
1364
|
const o = () => !0;
|
|
1401
|
-
this.onBeforeNodeDrag = ((i =
|
|
1365
|
+
this.onBeforeNodeDrag = ((i = e == null ? void 0 : e.events) == null ? void 0 : i.onBeforeNodeDrag) ?? o, this.freezePriority = (e == null ? void 0 : e.grabPriorityStrategy) === "freeze";
|
|
1402
1366
|
}
|
|
1403
1367
|
addNode(t) {
|
|
1404
|
-
let
|
|
1405
|
-
if (
|
|
1368
|
+
let e = t.id;
|
|
1369
|
+
if (e === void 0)
|
|
1406
1370
|
do
|
|
1407
|
-
|
|
1408
|
-
while (this.nodes.has(
|
|
1409
|
-
this.canvas.addNode(t);
|
|
1371
|
+
e = this.nodeIdGenerator.create();
|
|
1372
|
+
while (this.nodes.has(e));
|
|
1373
|
+
this.canvas.addNode({ ...t, id: e }), this.updateMaxNodePriority(e);
|
|
1410
1374
|
const s = (n) => {
|
|
1375
|
+
const i = this.model.getNode(e);
|
|
1411
1376
|
this.onBeforeNodeDrag({
|
|
1412
|
-
nodeId:
|
|
1377
|
+
nodeId: e,
|
|
1413
1378
|
element: t.element,
|
|
1414
|
-
x:
|
|
1415
|
-
y:
|
|
1416
|
-
}) && (n.stopImmediatePropagation(), this.grabbedNodeId =
|
|
1379
|
+
x: i.x,
|
|
1380
|
+
y: i.y
|
|
1381
|
+
}) && (n.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.moveNodeOnTop(e));
|
|
1417
1382
|
}, o = (n) => {
|
|
1383
|
+
const i = this.model.getNode(e);
|
|
1418
1384
|
this.onBeforeNodeDrag({
|
|
1419
|
-
nodeId:
|
|
1385
|
+
nodeId: e,
|
|
1420
1386
|
element: t.element,
|
|
1421
|
-
x:
|
|
1422
|
-
y:
|
|
1423
|
-
}) && n.touches.length === 1 && (this.grabbedNodeId =
|
|
1387
|
+
x: i.x,
|
|
1388
|
+
y: i.y
|
|
1389
|
+
}) && n.touches.length === 1 && (this.grabbedNodeId = e, this.moveNodeOnTop(e));
|
|
1424
1390
|
};
|
|
1425
|
-
return this.nodes.set(
|
|
1391
|
+
return this.nodes.set(e, {
|
|
1426
1392
|
element: t.element,
|
|
1427
1393
|
onMouseDown: s,
|
|
1428
|
-
onTouchStart: o
|
|
1429
|
-
x: t.x,
|
|
1430
|
-
y: t.y
|
|
1394
|
+
onTouchStart: o
|
|
1431
1395
|
}), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", o), this;
|
|
1432
1396
|
}
|
|
1433
|
-
updateNode(t,
|
|
1434
|
-
return this.canvas.updateNode(t,
|
|
1397
|
+
updateNode(t, e) {
|
|
1398
|
+
return this.canvas.updateNode(t, e), this.updateMaxNodePriority(t), this;
|
|
1435
1399
|
}
|
|
1436
1400
|
removeNode(t) {
|
|
1437
|
-
const
|
|
1438
|
-
return
|
|
1401
|
+
const e = this.nodes.get(t);
|
|
1402
|
+
return e !== void 0 && (e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), this;
|
|
1439
1403
|
}
|
|
1440
1404
|
markPort(t) {
|
|
1441
1405
|
return this.canvas.markPort(t), this;
|
|
1442
1406
|
}
|
|
1443
|
-
updatePort(t,
|
|
1444
|
-
return this.canvas.updatePort(t,
|
|
1407
|
+
updatePort(t, e) {
|
|
1408
|
+
return this.canvas.updatePort(t, e), this;
|
|
1445
1409
|
}
|
|
1446
1410
|
unmarkPort(t) {
|
|
1447
1411
|
return this.canvas.unmarkPort(t), this;
|
|
@@ -1449,8 +1413,8 @@ class Et {
|
|
|
1449
1413
|
addEdge(t) {
|
|
1450
1414
|
return this.canvas.addEdge(t), this;
|
|
1451
1415
|
}
|
|
1452
|
-
updateEdge(t,
|
|
1453
|
-
return this.canvas.updateEdge(t,
|
|
1416
|
+
updateEdge(t, e) {
|
|
1417
|
+
return this.canvas.updateEdge(t, e), this;
|
|
1454
1418
|
}
|
|
1455
1419
|
removeEdge(t) {
|
|
1456
1420
|
return this.canvas.removeEdge(t), this;
|
|
@@ -1461,13 +1425,10 @@ class Et {
|
|
|
1461
1425
|
moveToNodes(t) {
|
|
1462
1426
|
return this.canvas.moveToNodes(t), this;
|
|
1463
1427
|
}
|
|
1464
|
-
moveNodeOnTop(t) {
|
|
1465
|
-
return this.canvas.moveNodeOnTop(t), this;
|
|
1466
|
-
}
|
|
1467
1428
|
clear() {
|
|
1468
1429
|
return this.canvas.clear(), this.nodes.forEach((t) => {
|
|
1469
1430
|
t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
|
|
1470
|
-
}), this.nodes.clear(), this;
|
|
1431
|
+
}), this.nodes.clear(), this.maxNodePriority = 0, this;
|
|
1471
1432
|
}
|
|
1472
1433
|
attach(t) {
|
|
1473
1434
|
return this.detach(), this.element = t, this.canvas.attach(this.element), this.element.addEventListener("mouseup", this.onCanvasMouseUp), this.element.addEventListener("mousemove", this.onCanvasMouseMove), this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.element.addEventListener("touchmove", this.onCanvasTouchMove), this.element.addEventListener("touchend", this.onCanvasTouchEnd), this.element.addEventListener("touchcancel", this.onCanvasTouchEnd), this;
|
|
@@ -1483,21 +1444,35 @@ class Et {
|
|
|
1483
1444
|
setCursor(t) {
|
|
1484
1445
|
this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
|
|
1485
1446
|
}
|
|
1486
|
-
dragNode(t,
|
|
1487
|
-
const o = this.
|
|
1447
|
+
dragNode(t, e, s) {
|
|
1448
|
+
const o = this.model.getNode(t);
|
|
1488
1449
|
if (o === void 0)
|
|
1489
1450
|
throw new Error("failed to drag nonexisting node");
|
|
1490
|
-
const [n, i] = this.transformation.getViewCoords(o.x, o.y), a = n +
|
|
1491
|
-
|
|
1451
|
+
const [n, i] = this.transformation.getViewCoords(o.x, o.y), a = n + e, c = i + s, [l, d] = this.transformation.getAbsCoords(a, c);
|
|
1452
|
+
this.canvas.updateNode(t, { x: l, y: d }), this.onNodeDrag({
|
|
1492
1453
|
nodeId: t,
|
|
1493
1454
|
element: o.element,
|
|
1494
1455
|
x: o.x,
|
|
1495
1456
|
y: o.y
|
|
1496
1457
|
});
|
|
1497
1458
|
}
|
|
1459
|
+
updateMaxNodePriority(t) {
|
|
1460
|
+
const e = this.model.getNode(t).priority;
|
|
1461
|
+
this.maxNodePriority = Math.max(this.maxNodePriority, e);
|
|
1462
|
+
}
|
|
1463
|
+
moveNodeOnTop(t) {
|
|
1464
|
+
if (this.freezePriority)
|
|
1465
|
+
return;
|
|
1466
|
+
this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
|
|
1467
|
+
const e = this.maxNodePriority - 1;
|
|
1468
|
+
this.model.getNodeAdjacentEdges(t).forEach((o) => {
|
|
1469
|
+
this.updateEdge(o, { priority: e });
|
|
1470
|
+
});
|
|
1471
|
+
}
|
|
1498
1472
|
}
|
|
1499
|
-
class
|
|
1500
|
-
constructor(t,
|
|
1473
|
+
class ft {
|
|
1474
|
+
constructor(t, e) {
|
|
1475
|
+
h(this, "model");
|
|
1501
1476
|
h(this, "transformation");
|
|
1502
1477
|
h(this, "element", null);
|
|
1503
1478
|
h(this, "isMoving", !1);
|
|
@@ -1515,8 +1490,8 @@ class Ct {
|
|
|
1515
1490
|
h(this, "onMouseMove", (t) => {
|
|
1516
1491
|
if (!this.isMoving || !this.isShiftable)
|
|
1517
1492
|
return;
|
|
1518
|
-
const
|
|
1519
|
-
this.moveViewport(
|
|
1493
|
+
const e = -t.movementX, s = -t.movementY;
|
|
1494
|
+
this.moveViewport(e, s);
|
|
1520
1495
|
});
|
|
1521
1496
|
h(this, "onMouseUp", () => {
|
|
1522
1497
|
this.setCursor(null), this.isMoving = !1;
|
|
@@ -1525,7 +1500,7 @@ class Ct {
|
|
|
1525
1500
|
if (this.element === null || this.isScalable === !1)
|
|
1526
1501
|
return;
|
|
1527
1502
|
t.preventDefault();
|
|
1528
|
-
const { left:
|
|
1503
|
+
const { left: e, top: s } = this.element.getBoundingClientRect(), o = t.clientX - e, n = t.clientY - s, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
|
|
1529
1504
|
this.scaleViewport(a, o, n);
|
|
1530
1505
|
});
|
|
1531
1506
|
h(this, "onTouchStart", (t) => {
|
|
@@ -1534,36 +1509,36 @@ class Ct {
|
|
|
1534
1509
|
h(this, "onTouchMove", (t) => {
|
|
1535
1510
|
if (this.prevTouches === null || this.element === null || !this.isShiftable)
|
|
1536
1511
|
return;
|
|
1537
|
-
const
|
|
1538
|
-
if ((
|
|
1539
|
-
-(
|
|
1540
|
-
-(
|
|
1541
|
-
),
|
|
1542
|
-
const { left: s, top: o } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, i = this.prevTouches.y - o, c = 1 / (
|
|
1512
|
+
const e = this.getAverageTouch(t);
|
|
1513
|
+
if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
|
|
1514
|
+
-(e.x - this.prevTouches.x),
|
|
1515
|
+
-(e.y - this.prevTouches.y)
|
|
1516
|
+
), e.touchesCnt === 2 && this.isScalable) {
|
|
1517
|
+
const { left: s, top: o } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, i = this.prevTouches.y - o, c = 1 / (e.scale / this.prevTouches.scale);
|
|
1543
1518
|
this.scaleViewport(c, n, i);
|
|
1544
1519
|
}
|
|
1545
|
-
this.prevTouches =
|
|
1520
|
+
this.prevTouches = e, t.preventDefault();
|
|
1546
1521
|
});
|
|
1547
1522
|
h(this, "onTouchEnd", (t) => {
|
|
1548
1523
|
t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
|
|
1549
1524
|
});
|
|
1550
|
-
var c, l, d, g, u, p, w, f, m, E, v,
|
|
1551
|
-
this.canvas = t, this.options =
|
|
1525
|
+
var c, l, d, g, u, p, w, f, m, E, v, y;
|
|
1526
|
+
this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
|
|
1552
1527
|
const s = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.min) ?? null, o = ((g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.max) ?? null;
|
|
1553
1528
|
this.isScalable = ((p = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : p.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((f = (w = this.options) == null ? void 0 : w.shift) == null ? void 0 : f.enabled) !== !1;
|
|
1554
1529
|
const n = (E = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : E.wheelSensitivity;
|
|
1555
1530
|
this.wheelSensitivity = n !== void 0 ? n : 1.2;
|
|
1556
1531
|
const i = () => {
|
|
1557
1532
|
};
|
|
1558
|
-
this.onTransform = ((v =
|
|
1533
|
+
this.onTransform = ((v = e == null ? void 0 : e.events) == null ? void 0 : v.onTransform) ?? i;
|
|
1559
1534
|
const a = () => !0;
|
|
1560
|
-
this.onBeforeTransform = ((
|
|
1535
|
+
this.onBeforeTransform = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeTransform) ?? a;
|
|
1561
1536
|
}
|
|
1562
1537
|
addNode(t) {
|
|
1563
1538
|
return this.canvas.addNode(t), this;
|
|
1564
1539
|
}
|
|
1565
|
-
updateNode(t,
|
|
1566
|
-
return this.canvas.updateNode(t,
|
|
1540
|
+
updateNode(t, e) {
|
|
1541
|
+
return this.canvas.updateNode(t, e), this;
|
|
1567
1542
|
}
|
|
1568
1543
|
removeNode(t) {
|
|
1569
1544
|
return this.canvas.removeNode(t), this;
|
|
@@ -1571,8 +1546,8 @@ class Ct {
|
|
|
1571
1546
|
markPort(t) {
|
|
1572
1547
|
return this.canvas.markPort(t), this;
|
|
1573
1548
|
}
|
|
1574
|
-
updatePort(t,
|
|
1575
|
-
return this.canvas.updatePort(t,
|
|
1549
|
+
updatePort(t, e) {
|
|
1550
|
+
return this.canvas.updatePort(t, e), this;
|
|
1576
1551
|
}
|
|
1577
1552
|
unmarkPort(t) {
|
|
1578
1553
|
return this.canvas.unmarkPort(t), this;
|
|
@@ -1580,8 +1555,8 @@ class Ct {
|
|
|
1580
1555
|
addEdge(t) {
|
|
1581
1556
|
return this.canvas.addEdge(t), this;
|
|
1582
1557
|
}
|
|
1583
|
-
updateEdge(t,
|
|
1584
|
-
return this.canvas.updateEdge(t,
|
|
1558
|
+
updateEdge(t, e) {
|
|
1559
|
+
return this.canvas.updateEdge(t, e), this;
|
|
1585
1560
|
}
|
|
1586
1561
|
removeEdge(t) {
|
|
1587
1562
|
return this.canvas.removeEdge(t), this;
|
|
@@ -1592,9 +1567,6 @@ class Ct {
|
|
|
1592
1567
|
moveToNodes(t) {
|
|
1593
1568
|
return this.canvas.moveToNodes(t), this;
|
|
1594
1569
|
}
|
|
1595
|
-
moveNodeOnTop(t) {
|
|
1596
|
-
return this.canvas.moveNodeOnTop(t), this;
|
|
1597
|
-
}
|
|
1598
1570
|
clear() {
|
|
1599
1571
|
return this.canvas.clear(), this;
|
|
1600
1572
|
}
|
|
@@ -1608,13 +1580,13 @@ class Ct {
|
|
|
1608
1580
|
this.detach(), this.canvas.destroy();
|
|
1609
1581
|
}
|
|
1610
1582
|
getAverageTouch(t) {
|
|
1611
|
-
const
|
|
1583
|
+
const e = [], s = t.touches.length;
|
|
1612
1584
|
for (let c = 0; c < s; c++)
|
|
1613
|
-
|
|
1614
|
-
const o =
|
|
1585
|
+
e.push([t.touches[c].clientX, t.touches[c].clientY]);
|
|
1586
|
+
const o = e.reduce(
|
|
1615
1587
|
(c, l) => [c[0] + l[0], c[1] + l[1]],
|
|
1616
1588
|
[0, 0]
|
|
1617
|
-
), n = [o[0] / s, o[1] / s], a =
|
|
1589
|
+
), n = [o[0] / s, o[1] / s], a = e.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
|
|
1618
1590
|
(c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
|
|
1619
1591
|
0
|
|
1620
1592
|
);
|
|
@@ -1623,23 +1595,23 @@ class Ct {
|
|
|
1623
1595
|
setCursor(t) {
|
|
1624
1596
|
this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
|
|
1625
1597
|
}
|
|
1626
|
-
moveViewport(t,
|
|
1598
|
+
moveViewport(t, e) {
|
|
1627
1599
|
const [s, o] = this.transformation.getAbsCoords(0, 0), n = this.canvas.transformation.getAbsScale(), i = {
|
|
1628
1600
|
scale: n,
|
|
1629
1601
|
x: s + n * t,
|
|
1630
|
-
y: o + n *
|
|
1602
|
+
y: o + n * e
|
|
1631
1603
|
};
|
|
1632
1604
|
this.onBeforeTransform({ ...i }) && (this.canvas.patchViewportState(i), this.onTransform(i));
|
|
1633
1605
|
}
|
|
1634
|
-
scaleViewport(t,
|
|
1635
|
-
const [o, n] = this.canvas.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), a = i * t, c = i * (1 - t) *
|
|
1606
|
+
scaleViewport(t, e, s) {
|
|
1607
|
+
const [o, n] = this.canvas.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), a = i * t, c = i * (1 - t) * e + o, l = i * (1 - t) * s + n;
|
|
1636
1608
|
if (this.maxViewScale !== null && a > this.maxViewScale && a > i || this.minViewScale !== null && a < this.minViewScale && a < i)
|
|
1637
1609
|
return;
|
|
1638
1610
|
const d = { scale: a, x: c, y: l };
|
|
1639
1611
|
this.onBeforeTransform({ ...d }) && (this.canvas.patchViewportState(d), this.onTransform(d));
|
|
1640
1612
|
}
|
|
1641
1613
|
}
|
|
1642
|
-
class
|
|
1614
|
+
class yt {
|
|
1643
1615
|
constructor() {
|
|
1644
1616
|
h(this, "coreOptions");
|
|
1645
1617
|
h(this, "dragOptions");
|
|
@@ -1657,25 +1629,25 @@ class At {
|
|
|
1657
1629
|
return this.isTransformable = !0, this.transformOptions = t, this;
|
|
1658
1630
|
}
|
|
1659
1631
|
build() {
|
|
1660
|
-
let t = new
|
|
1661
|
-
return this.isDraggable && (t = new
|
|
1632
|
+
let t = new pt(this.coreOptions);
|
|
1633
|
+
return this.isDraggable && (t = new vt(t, this.dragOptions)), this.isTransformable && (t = new ft(t, this.transformOptions)), t;
|
|
1662
1634
|
}
|
|
1663
1635
|
}
|
|
1664
1636
|
export {
|
|
1665
|
-
q as
|
|
1666
|
-
|
|
1667
|
-
rt as
|
|
1668
|
-
|
|
1669
|
-
k as
|
|
1670
|
-
|
|
1671
|
-
tt as
|
|
1672
|
-
|
|
1673
|
-
I as
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
et as
|
|
1677
|
-
ot as
|
|
1678
|
-
nt as
|
|
1679
|
-
it as
|
|
1680
|
-
ht as
|
|
1637
|
+
q as BezierEdgeShape,
|
|
1638
|
+
pt as CanvasCore,
|
|
1639
|
+
rt as CycleCircleEdgeShape,
|
|
1640
|
+
O as CycleSquareEdgeShape,
|
|
1641
|
+
k as DetourStraightEdgeShape,
|
|
1642
|
+
P as EdgeType,
|
|
1643
|
+
tt as HorizontalEdgeShape,
|
|
1644
|
+
yt as HtmlGraphBuilder,
|
|
1645
|
+
I as StraightEdgeShape,
|
|
1646
|
+
vt as UserDraggableNodesCanvas,
|
|
1647
|
+
ft as UserTransformableCanvas,
|
|
1648
|
+
et as VerticalEdgeShape,
|
|
1649
|
+
ot as createBezierEdgeShapeFactory,
|
|
1650
|
+
nt as createHorizontalEdgeShapeFactory,
|
|
1651
|
+
it as createStraightEdgeShareFactory,
|
|
1652
|
+
ht as createVerticalEdgeShapeFactory
|
|
1681
1653
|
};
|