@html-graph/html-graph 3.7.0 → 3.9.0

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.
Files changed (4) hide show
  1. package/dist/html-graph.d.ts +55 -70
  2. package/dist/html-graph.js +1468 -1332
  3. package/dist/html-graph.umd.cjs +1 -1
  4. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,21 +1,22 @@
1
- var ae = Object.defineProperty;
2
- var le = (t, e, o) => e in t ? ae(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
3
- var r = (t, e, o) => le(t, typeof e != "symbol" ? e + "" : e, o);
4
- const ue = () => {
1
+ var ve = Object.defineProperty;
2
+ var ye = (t, e, o) => e in t ? ve(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
3
+ var r = (t, e, o) => ye(t, typeof e != "symbol" ? e + "" : e, o);
4
+ const Ae = () => {
5
5
  const t = document.createElement("div");
6
6
  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
7
- }, ge = () => {
8
- const t = document.createElement("div");
9
- return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
10
- }, we = () => {
7
+ }, Ee = () => {
11
8
  const t = document.createElement("div");
12
9
  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
13
- };
14
- class ie {
10
+ }, pe = (t) => {
11
+ t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden";
12
+ }, N = (t, e) => ({
13
+ x: t.scale * e.x + t.x,
14
+ y: t.scale * e.y + t.y
15
+ });
16
+ class ne {
15
17
  constructor(e, o, i) {
16
- r(this, "host", we());
17
- r(this, "container", ue());
18
- r(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
18
+ r(this, "host", Ee());
19
+ r(this, "container", Ae());
19
20
  r(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
20
21
  r(this, "applyTransform", () => {
21
22
  const e = this.viewportStore.getContentMatrix();
@@ -24,12 +25,12 @@ class ie {
24
25
  this.graphStore = e, this.viewportStore = o, this.element = i, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
25
26
  }
26
27
  attachNode(e) {
27
- const o = this.graphStore.getNode(e), i = ge();
28
- i.appendChild(o.element), this.container.appendChild(i), this.nodeIdToWrapperElementMap.set(e, i), this.updateNodePosition(e), this.updateNodePriority(e), i.style.visibility = "visible";
28
+ const o = this.graphStore.getNode(e);
29
+ pe(o.element), this.container.appendChild(o.element), this.updateNodePosition(e), this.updateNodePriority(e), o.element.style.visibility = "visible";
29
30
  }
30
31
  detachNode(e) {
31
- const o = this.nodeIdToWrapperElementMap.get(e);
32
- o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(e);
32
+ const o = this.graphStore.getNode(e);
33
+ this.container.removeChild(o.element);
33
34
  }
34
35
  attachEdge(e) {
35
36
  const o = this.graphStore.getEdge(e).shape.svg;
@@ -42,20 +43,20 @@ class ie {
42
43
  clear() {
43
44
  this.edgeIdToElementMap.forEach((e, o) => {
44
45
  this.detachEdge(o);
45
- }), this.nodeIdToWrapperElementMap.forEach((e, o) => {
46
- this.detachNode(o);
46
+ }), this.graphStore.getAllNodeIds().forEach((e) => {
47
+ this.detachNode(e);
47
48
  });
48
49
  }
49
50
  destroy() {
50
51
  this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
51
52
  }
52
53
  updateNodePosition(e) {
53
- const o = this.nodeIdToWrapperElementMap.get(e), i = this.graphStore.getNode(e), { width: s, height: h } = i.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, d = i.centerFn(s, h), c = i.x - n * d.x, a = i.y - n * d.y;
54
- o.style.transform = `translate(${c}px, ${a}px)`;
54
+ const o = this.graphStore.getNode(e), { width: i, height: s } = o.element.getBoundingClientRect(), h = this.viewportStore.getViewportMatrix().scale, n = o.centerFn(i, s), d = o.x - h * n.x, c = o.y - h * n.y;
55
+ o.element.style.transform = `translate(${d}px, ${c}px)`;
55
56
  }
56
57
  updateNodePriority(e) {
57
- const o = this.graphStore.getNode(e), i = this.nodeIdToWrapperElementMap.get(e);
58
- i.style.zIndex = `${o.priority}`;
58
+ const o = this.graphStore.getNode(e);
59
+ o.element.style.zIndex = `${o.priority}`;
59
60
  }
60
61
  updateEdgeShape(e) {
61
62
  const o = this.edgeIdToElementMap.get(e);
@@ -64,37 +65,42 @@ class ie {
64
65
  this.edgeIdToElementMap.set(e, i.shape.svg), this.container.appendChild(i.shape.svg);
65
66
  }
66
67
  renderEdge(e) {
67
- const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = h.left - d.left, l = h.top - d.top, g = n.left - d.left, y = n.top - d.top, p = {
68
- x: c.scale * a + c.x,
69
- y: c.scale * l + c.y
70
- }, f = {
71
- x: c.scale * g + c.x,
72
- y: c.scale * y + c.y
73
- }, A = {
74
- x: p.x,
75
- y: p.y,
76
- width: h.width * c.scale,
77
- height: h.height * c.scale,
78
- direction: i.direction,
79
- portId: o.from,
80
- nodeId: i.nodeId
81
- }, E = {
82
- x: f.x,
83
- y: f.y,
84
- width: n.width * c.scale,
85
- height: n.height * c.scale,
86
- direction: s.direction,
87
- portId: o.to,
88
- nodeId: s.nodeId
89
- };
90
- o.shape.render({ from: A, to: E });
68
+ const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = this.createEdgeRenderPort(
69
+ o.from,
70
+ i,
71
+ h,
72
+ d,
73
+ c
74
+ ), l = this.createEdgeRenderPort(
75
+ o.to,
76
+ s,
77
+ n,
78
+ d,
79
+ c
80
+ );
81
+ o.shape.render({ from: a, to: l });
91
82
  }
92
83
  updateEdgePriority(e) {
93
84
  const o = this.graphStore.getEdge(e);
94
85
  o.shape.svg.style.zIndex = `${o.priority}`;
95
86
  }
87
+ createEdgeRenderPort(e, o, i, s, h) {
88
+ const n = {
89
+ x: i.left - s.left,
90
+ y: i.top - s.top
91
+ }, d = N(h, n);
92
+ return {
93
+ x: d.x,
94
+ y: d.y,
95
+ width: i.width * h.scale,
96
+ height: i.height * h.scale,
97
+ direction: o.direction,
98
+ portId: e,
99
+ nodeId: o.nodeId
100
+ };
101
+ }
96
102
  }
97
- class fe {
103
+ class xe {
98
104
  constructor(e) {
99
105
  r(this, "xFrom", 1 / 0);
100
106
  r(this, "yFrom", 1 / 0);
@@ -114,7 +120,7 @@ class fe {
114
120
  return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
115
121
  }
116
122
  }
117
- class ve {
123
+ class Se {
118
124
  constructor(e, o, i) {
119
125
  r(this, "attachedNodes", /* @__PURE__ */ new Set());
120
126
  r(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -126,8 +132,8 @@ class ve {
126
132
  const d = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
127
133
  d && !c ? o.add(n) : !d && c && i.add(n);
128
134
  }), this.graphStore.getAllEdgeIds().forEach((n) => {
129
- const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
130
- d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), i.delete(g))), d && !c ? s.add(n) : !d && c && h.add(n);
135
+ const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, w = this.graphStore.getPort(a.to).nodeId;
136
+ d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(w) || (o.add(w), i.delete(w))), d && !c ? s.add(n) : !d && c && h.add(n);
131
137
  }), h.forEach((n) => {
132
138
  this.handleDetachEdge(n);
133
139
  }), i.forEach((n) => {
@@ -138,7 +144,7 @@ class ve {
138
144
  this.handleAttachEdge(n);
139
145
  });
140
146
  });
141
- this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new fe(this.graphStore), this.trigger.subscribe(this.updateViewport);
147
+ this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
142
148
  }
143
149
  attachNode(e) {
144
150
  this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -192,7 +198,7 @@ class ve {
192
198
  this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
193
199
  }
194
200
  }
195
- class se {
201
+ class he {
196
202
  constructor() {
197
203
  r(this, "callbacks", /* @__PURE__ */ new Set());
198
204
  }
@@ -209,10 +215,10 @@ class se {
209
215
  }
210
216
  }
211
217
  const x = () => {
212
- const t = new se();
218
+ const t = new he();
213
219
  return [t, t];
214
220
  };
215
- class ye {
221
+ class be {
216
222
  constructor(e) {
217
223
  r(this, "onBeforeUpdated");
218
224
  r(this, "onAfterUpdated");
@@ -225,7 +231,7 @@ class ye {
225
231
  return { ...this.viewportStore.getContentMatrix() };
226
232
  }
227
233
  }
228
- class pe {
234
+ class Te {
229
235
  constructor(e) {
230
236
  r(this, "onAfterNodeAdded");
231
237
  r(this, "onAfterNodeUpdated");
@@ -252,6 +258,9 @@ class pe {
252
258
  priority: o.priority
253
259
  };
254
260
  }
261
+ getElementNodeId(e) {
262
+ return this.graphStore.getElementNodeId(e) ?? null;
263
+ }
255
264
  // TODO: use Set in v4
256
265
  getAllNodeIds() {
257
266
  return this.graphStore.getAllNodeIds();
@@ -317,7 +326,7 @@ class pe {
317
326
  return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
318
327
  }
319
328
  }
320
- class C {
329
+ class W {
321
330
  constructor(e) {
322
331
  r(this, "counter", 0);
323
332
  this.checkExists = e;
@@ -339,1081 +348,349 @@ class S extends Error {
339
348
  r(this, "name", "HtmlGraphError");
340
349
  }
341
350
  }
342
- const Ae = (t, e) => ({
343
- x: t / 2,
344
- y: e / 2
345
- }), $ = (t) => () => t, K = $(0), Ee = () => {
346
- let t = 0;
347
- return () => t++;
348
- }, xe = (t, e) => {
349
- let o = K, i = K;
350
- const s = Ee();
351
- return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = $(t)), typeof e == "number" && (i = $(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
352
- nodesPriorityFn: o,
353
- edgesPriorityFn: i
354
- };
355
- }, v = (t, e, o) => ({
356
- x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
357
- y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
358
- }), w = {
359
- x: 0,
360
- y: 0
361
- }, Se = (t) => {
362
- const e = v(
363
- { x: t.arrowLength, y: w.y },
364
- t.fromVector,
365
- w
366
- ), o = v(
367
- { x: t.to.x - t.arrowLength, y: t.to.y },
368
- t.toVector,
369
- t.to
370
- ), i = {
371
- x: e.x + t.fromVector.x * t.curvature,
372
- y: e.y + t.fromVector.y * t.curvature
373
- }, s = {
374
- x: o.x - t.toVector.x * t.curvature,
375
- y: o.y - t.toVector.y * t.curvature
376
- }, h = `M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
377
- return `${n}${h}${d}`;
378
- }, be = (t) => {
379
- const e = t.hasSourceArrow ? v(
380
- { x: t.arrowLength, y: w.y },
381
- t.fromVector,
382
- w
383
- ) : w, o = t.hasTargetArrow ? v(
384
- { x: t.to.x - t.arrowLength, y: t.to.y },
385
- t.toVector,
386
- t.to
387
- ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = v(
388
- { x: i, y: w.y },
389
- t.fromVector,
390
- w
391
- ), a = {
392
- x: c.x + n,
393
- y: c.y + d
394
- }, l = v(
395
- { x: t.to.x - i, y: t.to.y },
396
- t.toVector,
397
- t.to
398
- ), g = {
399
- x: l.x + n,
400
- y: l.y + d
401
- }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, p = {
402
- x: c.x + t.curvature * t.fromVector.x,
403
- y: c.y + t.curvature * t.fromVector.y
404
- }, f = {
405
- x: l.x - t.curvature * t.toVector.x,
406
- y: l.y - t.curvature * t.toVector.y
407
- }, A = {
408
- x: c.x + n,
409
- y: c.y + d
410
- }, E = {
411
- x: l.x + n,
412
- y: l.y + d
413
- };
414
- return [
415
- `M ${e.x} ${e.y}`,
416
- `L ${c.x} ${c.y}`,
417
- `C ${p.x} ${p.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
418
- `C ${E.x} ${E.y} ${f.x} ${f.y} ${l.x} ${l.y}`,
419
- `L ${o.x} ${o.y}`
420
- ].join(" ");
421
- }, V = (t, e) => {
422
- const o = [];
423
- if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
424
- const i = t.length - 1;
425
- let s = 0, h = 0, n = 0;
426
- t.forEach((d, c) => {
427
- let a = 0, l = 0, g = 0;
428
- const y = c > 0, p = c < i, f = y && p;
429
- if (y && (a = -s, l = -h, g = n), p) {
430
- const L = t[c + 1];
431
- s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
432
- }
433
- const E = n !== 0 ? Math.min((f ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = f ? { x: d.x + s * E, y: d.y + h * E } : d, m = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = f ? { x: d.x + a * m, y: d.y + l * m } : d;
434
- c > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
435
- `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
436
- );
351
+ class de {
352
+ constructor(e, o, i, s, h) {
353
+ /**
354
+ * provides api for accessing model of rendered graph
355
+ */
356
+ r(this, "graph");
357
+ /**
358
+ * provides api for accessing viewport state
359
+ */
360
+ r(this, "viewport");
361
+ r(this, "nodeIdGenerator", new W(
362
+ (e) => this.graph.getNode(e) !== null
363
+ ));
364
+ r(this, "portIdGenerator", new W(
365
+ (e) => this.graph.getPort(e) !== null
366
+ ));
367
+ r(this, "edgeIdGenerator", new W(
368
+ (e) => this.graph.getEdge(e) !== null
369
+ ));
370
+ r(this, "onAfterNodeAdded", (e) => {
371
+ this.htmlView.attachNode(e);
372
+ });
373
+ r(this, "onAfterNodeUpdated", (e) => {
374
+ this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
375
+ this.htmlView.renderEdge(i);
376
+ });
377
+ });
378
+ r(this, "onAfterNodePriorityUpdated", (e) => {
379
+ this.htmlView.updateNodePriority(e);
380
+ });
381
+ r(this, "onBeforeNodeRemoved", (e) => {
382
+ this.graphStore.getNodePortIds(e).forEach((o) => {
383
+ this.unmarkPort(o);
384
+ }), this.htmlView.detachNode(e);
385
+ });
386
+ r(this, "onAfterPortUpdated", (e) => {
387
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
388
+ this.htmlView.renderEdge(i);
389
+ });
390
+ });
391
+ r(this, "onBeforePortUnmarked", (e) => {
392
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
393
+ this.removeEdge(o);
394
+ });
395
+ });
396
+ r(this, "onAfterEdgeAdded", (e) => {
397
+ this.htmlView.attachEdge(e);
398
+ });
399
+ r(this, "onAfterEdgeShapeUpdated", (e) => {
400
+ this.htmlView.updateEdgeShape(e);
401
+ });
402
+ r(this, "onAfterEdgeUpdated", (e) => {
403
+ this.htmlView.renderEdge(e);
404
+ });
405
+ r(this, "onAfterEdgePriorityUpdated", (e) => {
406
+ this.htmlView.updateEdgePriority(e);
407
+ });
408
+ r(this, "onBeforeEdgeRemoved", (e) => {
409
+ this.htmlView.detachEdge(e);
410
+ });
411
+ r(this, "onBeforeClear", () => {
412
+ this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
437
413
  });
414
+ r(this, "onBeforeDestroyEmitter");
415
+ /**
416
+ * emits event just before destruction of canvas
417
+ */
418
+ r(this, "onBeforeDestroy");
419
+ this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = h, this.graph = new Te(this.graphStore), this.viewport = new be(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
420
+ this.onAfterNodePriorityUpdated
421
+ ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
422
+ this.onAfterEdgeShapeUpdated
423
+ ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
424
+ this.onAfterEdgePriorityUpdated
425
+ ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
438
426
  }
439
- return o.join(" ");
440
- }, me = (t) => {
441
- const e = t.hasSourceArrow ? v(
442
- { x: t.arrowLength, y: w.y },
443
- t.fromVector,
444
- w
445
- ) : w, o = t.hasTargetArrow ? v(
446
- { x: t.to.x - t.arrowLength, y: t.to.y },
447
- t.toVector,
448
- t.to
449
- ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
450
- { x: s, y: w.y },
451
- t.fromVector,
452
- w
453
- ), n = v(
454
- { x: t.to.x - s, y: t.to.y },
455
- t.toVector,
456
- t.to
457
- ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
458
- x: t.flipX > 0 ? d : -i,
459
- y: h.y
460
- }, l = { x: a.x, y: c }, g = {
461
- x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
462
- y: n.y
463
- }, y = { x: g.x, y: c };
464
- return V(
465
- [e, h, a, l, y, g, n, o],
466
- t.roundness
467
- );
468
- }, F = (t) => {
469
- const e = t.hasSourceArrow ? v(
470
- { x: t.arrowLength, y: w.y },
471
- t.fromVector,
472
- w
473
- ) : w, o = t.hasTargetArrow ? v(
474
- { x: t.to.x - t.arrowLength, y: t.to.y },
475
- t.toVector,
476
- t.to
477
- ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
478
- { x: i, y: w.y },
479
- t.fromVector,
480
- w
481
- ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = v(
482
- { x: t.to.x - i, y: t.to.y },
483
- t.toVector,
484
- t.to
485
- ), g = { x: l.x + d, y: l.y + c };
486
- return V(
487
- [e, s, a, g, l, o],
488
- t.roundness
489
- );
490
- }, Te = (t) => {
491
- const e = t.hasSourceArrow ? v(
492
- { x: t.arrowLength, y: w.y },
493
- t.fromVector,
494
- w
495
- ) : w, o = t.hasTargetArrow ? v(
496
- { x: t.to.x - t.arrowLength, y: t.to.y },
497
- t.toVector,
498
- t.to
499
- ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
500
- { x: i, y: w.y },
501
- t.fromVector,
502
- w
503
- ), h = v(
504
- { x: t.to.x - i, y: t.to.y },
505
- t.toVector,
506
- t.to
507
- );
508
- return V([e, s, h, o], t.roundness);
509
- }, Pe = (t) => {
510
- const e = t.hasSourceArrow ? v(
511
- { x: t.arrowLength, y: w.y },
512
- t.fromVector,
513
- w
514
- ) : w, o = t.hasTargetArrow ? v(
515
- { x: t.to.x - t.arrowLength, y: t.to.y },
516
- t.toVector,
517
- t.to
518
- ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
519
- { x: s, y: w.y },
520
- t.fromVector,
521
- w
522
- ), n = v(
523
- { x: t.to.x - s, y: t.to.y },
524
- t.toVector,
525
- t.to
526
- ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
527
- x: h.x,
528
- y: t.flipY > 0 ? d : -i
529
- }, l = { x: c, y: a.y }, g = {
530
- x: n.x,
531
- y: t.flipY > 0 ? t.to.y - d : t.to.y + i
532
- }, y = { x: c, y: g.y };
533
- return V(
534
- [e, h, a, l, y, g, n, o],
535
- t.roundness
536
- );
537
- }, k = (t) => {
538
- const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
539
- { x: t.arrowLength, y: w.y },
540
- { x: i, y: w.y },
541
- { x: i, y: t.side },
542
- { x: s, y: t.side },
543
- { x: s, y: -t.side },
544
- { x: i, y: -t.side },
545
- { x: i, y: w.y },
546
- { x: t.arrowLength, y: w.y }
547
- ].map(
548
- (c) => v(c, t.fromVector, w)
549
- ), d = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
550
- return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${V(n, t.roundness)}`;
551
- }, Ne = (t) => {
552
- const e = t.smallRadius, o = t.radius, i = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + i * (1 - o / s), n = e * o / s, c = [
553
- { x: t.arrowLength, y: w.y },
554
- { x: h, y: n },
555
- { x: h, y: -n }
556
- ].map(
557
- (g) => v(g, t.fromVector, w)
558
- ), a = [
559
- `M ${c[0].x} ${c[0].y}`,
560
- `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
561
- `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
562
- `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
563
- ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
564
- return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
565
- }, u = Object.freeze({
566
- color: "#777777",
567
- width: 1,
568
- arrowLength: 15,
569
- arrowWidth: 4,
570
- arrowOffset: 15,
571
- hasSourceArrow: !1,
572
- hasTargetArrow: !1,
573
- cycleRadius: 30,
574
- cycleSquareSide: 30,
575
- roundness: 10,
576
- detourDistance: 100,
577
- detourDirection: -Math.PI / 2,
578
- detourDirectionVertical: 0,
579
- smallCycleRadius: 15,
580
- curvature: 90,
581
- interactiveWidth: 10
582
- }), Q = (t, e, o, i) => {
583
- const h = [
584
- w,
585
- { x: o, y: i },
586
- { x: o, y: -i }
587
- ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
588
- return `${n} ${d} ${c} Z`;
589
- }, _ = (t) => {
590
- const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
591
- return e.setAttribute("fill", t), e;
592
- }, Me = () => {
593
- const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
594
- return t.style.transformOrigin = "50% 50%", t;
595
- }, De = (t, e) => {
596
- const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
597
- return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
598
- }, Le = (t, e) => {
599
- const o = {
600
- x: t.x + t.width / 2,
601
- y: t.y + t.height / 2
602
- }, i = {
603
- x: e.x + e.width / 2,
604
- y: e.y + e.height / 2
605
- }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
606
- return {
607
- x: s,
608
- y: h,
609
- width: n,
610
- height: d,
611
- flipX: c,
612
- flipY: a
613
- };
614
- }, Ve = () => {
615
- const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
616
- return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
617
- }, q = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
618
- class I {
619
- constructor(e) {
620
- r(this, "svg", Ve());
621
- r(this, "group", Me());
622
- r(this, "line");
623
- r(this, "sourceArrow", null);
624
- r(this, "targetArrow", null);
625
- this.params = e, this.svg.appendChild(this.group), this.line = De(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = _(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = _(e.color), this.group.appendChild(this.targetArrow));
626
- }
627
- render(e) {
628
- const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = Le(
629
- e.from,
630
- e.to
631
- );
632
- this.svg.style.transform = `translate(${o}px, ${i}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
633
- const c = q(
634
- e.from.direction,
635
- n,
636
- d
637
- ), a = q(
638
- e.to.direction,
639
- n,
640
- d
641
- ), l = {
642
- x: s,
643
- y: h
644
- };
645
- let g = a, y = -this.params.arrowLength, p;
646
- e.from.portId === e.to.portId ? (p = this.params.createCyclePath, g = c, y = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? p = this.params.createDetourPath : p = this.params.createLinePath;
647
- const f = p(
648
- c,
649
- a,
650
- l,
651
- n,
652
- d
653
- );
654
- if (this.line.setAttribute("d", f), this.sourceArrow) {
655
- const A = Q(
656
- c,
657
- w,
658
- this.params.arrowLength,
659
- this.params.arrowWidth
660
- );
661
- this.sourceArrow.setAttribute("d", A);
662
- }
663
- if (this.targetArrow) {
664
- const A = Q(
665
- g,
666
- l,
667
- y,
668
- this.params.arrowWidth
427
+ /**
428
+ * adds new node
429
+ */
430
+ addNode(e) {
431
+ const o = this.nodeIdGenerator.create(e.id);
432
+ if (this.graph.getNode(o) !== null)
433
+ throw new S("failed to add node with existing id");
434
+ if (this.graphStore.getElementNodeId(e.element) !== void 0)
435
+ throw new S(
436
+ "failed to add node with html element already in use by another node"
669
437
  );
670
- this.targetArrow.setAttribute("d", A);
671
- }
438
+ if (this.graphStore.addNode({
439
+ id: o,
440
+ element: e.element,
441
+ x: e.x,
442
+ y: e.y,
443
+ centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
444
+ priority: e.priority ?? this.defaults.nodes.priorityFn()
445
+ }), e.ports !== void 0)
446
+ for (const i of e.ports)
447
+ this.markPort({
448
+ id: i.id,
449
+ element: i.element,
450
+ nodeId: o,
451
+ direction: i.direction
452
+ });
453
+ return this;
672
454
  }
673
- }
674
- class Re {
675
- constructor(e) {
676
- r(this, "svg");
677
- r(this, "group");
678
- r(this, "line");
679
- r(this, "sourceArrow");
680
- r(this, "targetArrow");
681
- r(this, "arrowLength");
682
- r(this, "arrowWidth");
683
- r(this, "curvature");
684
- r(this, "portCycleRadius");
685
- r(this, "portCycleSmallRadius");
686
- r(this, "detourDirection");
687
- r(this, "detourDistance");
688
- r(this, "hasSourceArrow");
689
- r(this, "hasTargetArrow");
690
- r(this, "lineShape");
691
- r(this, "createCyclePath", (e) => Ne({
692
- fromVector: e,
693
- radius: this.portCycleRadius,
694
- smallRadius: this.portCycleSmallRadius,
695
- arrowLength: this.arrowLength,
696
- hasSourceArrow: this.hasSourceArrow,
697
- hasTargetArrow: this.hasTargetArrow
698
- }));
699
- r(this, "createDetourPath", (e, o, i, s, h) => be({
700
- to: i,
701
- fromVector: e,
702
- toVector: o,
703
- flipX: s,
704
- flipY: h,
705
- arrowLength: this.arrowLength,
706
- detourDirection: this.detourDirection,
707
- detourDistance: this.detourDistance,
708
- curvature: this.curvature,
709
- hasSourceArrow: this.hasSourceArrow,
710
- hasTargetArrow: this.hasTargetArrow
711
- }));
712
- r(this, "createLinePath", (e, o, i) => Se({
713
- to: i,
714
- fromVector: e,
715
- toVector: o,
716
- arrowLength: this.arrowLength,
717
- curvature: this.curvature,
718
- hasSourceArrow: this.hasSourceArrow,
719
- hasTargetArrow: this.hasTargetArrow
720
- }));
721
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
722
- color: (e == null ? void 0 : e.color) ?? u.color,
723
- width: (e == null ? void 0 : e.width) ?? u.width,
724
- arrowLength: this.arrowLength,
725
- arrowWidth: this.arrowWidth,
726
- hasSourceArrow: this.hasSourceArrow,
727
- hasTargetArrow: this.hasTargetArrow,
728
- createCyclePath: this.createCyclePath,
729
- createDetourPath: this.createDetourPath,
730
- createLinePath: this.createLinePath
731
- }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
455
+ /**
456
+ * updates node parameters
457
+ */
458
+ updateNode(e, o) {
459
+ if (this.graph.getNode(e) === null)
460
+ throw new S("failed to update non existing node");
461
+ return this.graphStore.updateNode(e, o ?? {}), this;
732
462
  }
733
- render(e) {
734
- this.lineShape.render(e);
463
+ /**
464
+ * removes specified node
465
+ * all the ports of node get unmarked
466
+ * all the edges adjacent to node get removed
467
+ */
468
+ removeNode(e) {
469
+ if (this.graph.getNode(e) === null)
470
+ throw new S("failed to remove non existing node");
471
+ return this.graphStore.removeNode(e), this;
735
472
  }
736
- }
737
- class Be {
738
- constructor(e) {
739
- r(this, "svg");
740
- r(this, "group");
741
- r(this, "line");
742
- r(this, "sourceArrow");
743
- r(this, "targetArrow");
744
- r(this, "arrowLength");
745
- r(this, "arrowWidth");
746
- r(this, "arrowOffset");
747
- r(this, "roundness");
748
- r(this, "cycleSquareSide");
749
- r(this, "detourDirection");
750
- r(this, "detourDistance");
751
- r(this, "hasSourceArrow");
752
- r(this, "hasTargetArrow");
753
- r(this, "lineShape");
754
- r(this, "createCyclePath", (e) => k({
755
- fromVector: e,
756
- arrowLength: this.arrowLength,
757
- side: this.cycleSquareSide,
758
- arrowOffset: this.arrowOffset,
759
- roundness: this.roundness,
760
- hasSourceArrow: this.hasSourceArrow,
761
- hasTargetArrow: this.hasTargetArrow
762
- }));
763
- r(this, "createDetourPath", (e, o, i, s, h) => F({
764
- to: i,
765
- fromVector: e,
766
- toVector: o,
767
- flipX: s,
768
- flipY: h,
769
- arrowLength: this.arrowLength,
770
- arrowOffset: this.arrowOffset,
771
- roundness: this.roundness,
772
- detourDirection: this.detourDirection,
773
- detourDistance: this.detourDistance,
774
- hasSourceArrow: this.hasSourceArrow,
775
- hasTargetArrow: this.hasTargetArrow
776
- }));
777
- r(this, "createLinePath", (e, o, i, s) => me({
778
- to: i,
779
- fromVector: e,
780
- toVector: o,
781
- flipX: s,
782
- arrowLength: this.arrowLength,
783
- arrowOffset: this.arrowOffset,
784
- roundness: this.roundness,
785
- hasSourceArrow: this.hasSourceArrow,
786
- hasTargetArrow: this.hasTargetArrow
787
- }));
788
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
789
- const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
790
- this.roundness = Math.min(
791
- o,
792
- this.arrowOffset,
793
- this.cycleSquareSide / 2
794
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
795
- color: (e == null ? void 0 : e.color) ?? u.color,
796
- width: (e == null ? void 0 : e.width) ?? u.width,
797
- arrowLength: this.arrowLength,
798
- arrowWidth: this.arrowWidth,
799
- hasSourceArrow: this.hasSourceArrow,
800
- hasTargetArrow: this.hasTargetArrow,
801
- createCyclePath: this.createCyclePath,
802
- createDetourPath: this.createDetourPath,
803
- createLinePath: this.createLinePath
804
- }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
473
+ /**
474
+ * marks specified element as a port for specified node
475
+ */
476
+ markPort(e) {
477
+ const o = this.portIdGenerator.create(e.id);
478
+ if (this.graph.getPort(o) !== null)
479
+ throw new S("failed to add port with existing id");
480
+ if (this.graph.getNode(e.nodeId) === null)
481
+ throw new S("failed to mark port for nonexistent node");
482
+ return this.graphStore.addPort({
483
+ id: o,
484
+ element: e.element,
485
+ nodeId: e.nodeId,
486
+ direction: e.direction ?? this.defaults.ports.direction
487
+ }), this;
805
488
  }
806
- render(e) {
807
- this.lineShape.render(e);
489
+ /**
490
+ * updates port and edges attached to it
491
+ */
492
+ updatePort(e, o) {
493
+ if (this.graph.getPort(e) === null)
494
+ throw new S("failed to update nonexistent port");
495
+ return this.graphStore.updatePort(e, o ?? {}), this;
808
496
  }
809
- }
810
- class Ie {
811
- constructor(e) {
812
- r(this, "svg");
813
- r(this, "group");
814
- r(this, "line");
815
- r(this, "sourceArrow");
816
- r(this, "targetArrow");
817
- r(this, "arrowLength");
818
- r(this, "arrowWidth");
819
- r(this, "arrowOffset");
820
- r(this, "roundness");
821
- r(this, "cycleSquareSide");
822
- r(this, "detourDirection");
823
- r(this, "detourDistance");
824
- r(this, "hasSourceArrow");
825
- r(this, "hasTargetArrow");
826
- r(this, "lineShape");
827
- r(this, "createCyclePath", (e) => k({
828
- fromVector: e,
829
- arrowLength: this.arrowLength,
830
- side: this.cycleSquareSide,
831
- arrowOffset: this.arrowOffset,
832
- roundness: this.roundness,
833
- hasSourceArrow: this.hasSourceArrow,
834
- hasTargetArrow: this.hasTargetArrow
835
- }));
836
- r(this, "createDetourPath", (e, o, i, s, h) => F({
837
- to: i,
838
- fromVector: e,
839
- toVector: o,
840
- flipX: s,
841
- flipY: h,
842
- arrowLength: this.arrowLength,
843
- arrowOffset: this.arrowOffset,
844
- roundness: this.roundness,
845
- detourDirection: this.detourDirection,
846
- detourDistance: this.detourDistance,
847
- hasSourceArrow: this.hasSourceArrow,
848
- hasTargetArrow: this.hasTargetArrow
849
- }));
850
- r(this, "createLinePath", (e, o, i) => Te({
851
- to: i,
852
- fromVector: e,
853
- toVector: o,
854
- arrowLength: this.arrowLength,
855
- arrowOffset: this.arrowOffset,
856
- roundness: this.roundness,
857
- hasSourceArrow: this.hasSourceArrow,
858
- hasTargetArrow: this.hasTargetArrow
859
- }));
860
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
861
- const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
862
- this.roundness = Math.min(
863
- o,
864
- this.arrowOffset,
865
- this.cycleSquareSide / 2
866
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
867
- color: (e == null ? void 0 : e.color) ?? u.color,
868
- width: (e == null ? void 0 : e.width) ?? u.width,
869
- arrowLength: this.arrowLength,
870
- arrowWidth: this.arrowWidth,
871
- hasSourceArrow: this.hasSourceArrow,
872
- hasTargetArrow: this.hasTargetArrow,
873
- createCyclePath: this.createCyclePath,
874
- createDetourPath: this.createDetourPath,
875
- createLinePath: this.createLinePath
876
- }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
497
+ /**
498
+ * unmarks specified port
499
+ * all the edges adjacent to the port get removed
500
+ */
501
+ unmarkPort(e) {
502
+ if (this.graph.getPort(e) === null)
503
+ throw new S("failed to unmark non existing port");
504
+ return this.graphStore.removePort(e), this;
877
505
  }
878
- render(e) {
879
- this.lineShape.render(e);
506
+ /**
507
+ * adds new edge
508
+ */
509
+ addEdge(e) {
510
+ const o = this.edgeIdGenerator.create(e.id);
511
+ if (this.graph.getEdge(o) !== null)
512
+ throw new S("failed to add edge with existing id");
513
+ if (this.graph.getPort(e.from) === null)
514
+ throw new S("failed to add edge from nonexistent port");
515
+ if (this.graph.getPort(e.to) === null)
516
+ throw new S("failed to add edge to nonexistent port");
517
+ return this.graphStore.addEdge({
518
+ id: o,
519
+ from: e.from,
520
+ to: e.to,
521
+ shape: e.shape ?? this.defaults.edges.shapeFactory(o),
522
+ priority: e.priority ?? this.defaults.edges.priorityFn()
523
+ }), this;
880
524
  }
881
- }
882
- class Ue {
883
- constructor(e) {
884
- r(this, "svg");
885
- r(this, "group");
886
- r(this, "line");
887
- r(this, "sourceArrow");
888
- r(this, "targetArrow");
889
- r(this, "arrowLength");
890
- r(this, "arrowWidth");
891
- r(this, "arrowOffset");
892
- r(this, "roundness");
893
- r(this, "cycleSquareSide");
894
- r(this, "detourDirection");
895
- r(this, "detourDistance");
896
- r(this, "hasSourceArrow");
897
- r(this, "hasTargetArrow");
898
- r(this, "lineShape");
899
- r(this, "createCyclePath", (e) => k({
900
- fromVector: e,
901
- arrowLength: this.arrowLength,
902
- side: this.cycleSquareSide,
903
- arrowOffset: this.arrowOffset,
904
- roundness: this.roundness,
905
- hasSourceArrow: this.hasSourceArrow,
906
- hasTargetArrow: this.hasTargetArrow
907
- }));
908
- r(this, "createDetourPath", (e, o, i, s, h) => F({
909
- to: i,
910
- fromVector: e,
911
- toVector: o,
912
- flipX: s,
913
- flipY: h,
914
- arrowLength: this.arrowLength,
915
- arrowOffset: this.arrowOffset,
916
- roundness: this.roundness,
917
- detourDirection: this.detourDirection,
918
- detourDistance: this.detourDistance,
919
- hasSourceArrow: this.hasSourceArrow,
920
- hasTargetArrow: this.hasTargetArrow
921
- }));
922
- r(this, "createLinePath", (e, o, i, s, h) => Pe({
923
- to: i,
924
- fromVector: e,
925
- toVector: o,
926
- flipY: h,
927
- arrowLength: this.arrowLength,
928
- arrowOffset: this.arrowOffset,
929
- roundness: this.roundness,
930
- hasSourceArrow: this.hasSourceArrow,
931
- hasTargetArrow: this.hasTargetArrow
932
- }));
933
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
934
- const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
935
- this.roundness = Math.min(
936
- o,
937
- this.arrowOffset,
938
- this.cycleSquareSide / 2
939
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
940
- color: (e == null ? void 0 : e.color) ?? u.color,
941
- width: (e == null ? void 0 : e.width) ?? u.width,
942
- arrowLength: this.arrowLength,
943
- arrowWidth: this.arrowWidth,
944
- hasSourceArrow: this.hasSourceArrow,
945
- hasTargetArrow: this.hasTargetArrow,
946
- createCyclePath: this.createCyclePath,
947
- createDetourPath: this.createDetourPath,
948
- createLinePath: this.createLinePath
949
- }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
525
+ /**
526
+ * updates specified edge
527
+ */
528
+ updateEdge(e, o) {
529
+ if (this.graph.getEdge(e) === null)
530
+ throw new S("failed to update nonexistent edge");
531
+ return this.graphStore.updateEdge(e, o ?? {}), this;
950
532
  }
951
- render(e) {
952
- this.lineShape.render(e);
533
+ /**
534
+ * removes specified edge
535
+ */
536
+ removeEdge(e) {
537
+ if (this.graph.getEdge(e) === null)
538
+ throw new S("failed to remove nonexistent edge");
539
+ return this.graphStore.removeEdge(e), this;
953
540
  }
954
- }
955
- const Ce = () => {
956
- const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
957
- return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
958
- }, We = (t) => {
959
- const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
960
- return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
961
- }, ee = (t) => {
962
- const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
963
- return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
964
- };
965
- class $e extends Error {
966
- constructor(e) {
967
- super(e), this.name = "InteractiveEdgeError";
541
+ /**
542
+ * applies transformation for viewport matrix
543
+ */
544
+ patchViewportMatrix(e) {
545
+ return this.viewportStore.patchViewportMatrix(e), this;
546
+ }
547
+ /**
548
+ * applies transformation for content matrix
549
+ */
550
+ patchContentMatrix(e) {
551
+ return this.viewportStore.patchContentMatrix(e), this;
552
+ }
553
+ /**
554
+ * clears canvas from nodes and edges
555
+ * canvas gets rolled back to initial state and can be reused
556
+ */
557
+ clear() {
558
+ return this.graphStore.clear(), this;
559
+ }
560
+ /**
561
+ * destroys canvas
562
+ * canvas element gets rolled back to initial state, and can not be reused
563
+ */
564
+ destroy() {
565
+ this.clear(), this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
566
+ this.onAfterNodePriorityUpdated
567
+ ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
568
+ this.onAfterEdgeShapeUpdated
569
+ ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
570
+ this.onAfterEdgePriorityUpdated
571
+ ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
968
572
  }
969
573
  }
970
- class ne {
971
- constructor(e, o) {
972
- r(this, "svg");
973
- r(this, "group");
974
- r(this, "line");
975
- r(this, "sourceArrow");
976
- r(this, "targetArrow");
977
- r(this, "handle", Ce());
978
- r(this, "interactiveLine");
979
- r(this, "interactiveSourceArrow", null);
980
- r(this, "interactiveTargetArrow", null);
981
- if (this.structuredEdge = e, e instanceof ne)
982
- throw new $e(
983
- "interactive edge can be configured only once"
984
- );
985
- this.svg = this.structuredEdge.svg, this.group = this.structuredEdge.group, this.line = this.structuredEdge.line, this.sourceArrow = this.structuredEdge.sourceArrow, this.targetArrow = this.structuredEdge.targetArrow;
986
- const i = (o == null ? void 0 : o.width) ?? u.interactiveWidth;
987
- this.interactiveLine = We(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ee(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ee(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
574
+ class Pe {
575
+ constructor() {
576
+ r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
577
+ r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
988
578
  }
989
- render(e) {
990
- this.structuredEdge.render(e);
991
- const o = this.line.getAttribute("d");
992
- if (this.interactiveLine.setAttribute("d", o), this.sourceArrow) {
993
- const i = this.sourceArrow.getAttribute("d");
994
- this.interactiveSourceArrow.setAttribute("d", i);
995
- }
996
- if (this.targetArrow) {
997
- const i = this.targetArrow.getAttribute("d");
998
- this.interactiveTargetArrow.setAttribute("d", i);
999
- }
579
+ addRecord(e, o) {
580
+ const i = this.singleToMultiMap.get(e);
581
+ i === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([o])) : i.add(o), this.multiToSingleMap.set(o, e);
582
+ }
583
+ getMultiBySingle(e) {
584
+ const o = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
585
+ return Array.from(o.values());
586
+ }
587
+ removeByMulti(e) {
588
+ const o = this.multiToSingleMap.get(e), i = this.singleToMultiMap.get(o);
589
+ i.delete(e), i.size === 0 && this.singleToMultiMap.delete(o), this.multiToSingleMap.delete(e);
590
+ }
591
+ getByMulti(e) {
592
+ return this.multiToSingleMap.get(e);
593
+ }
594
+ removeBySingle(e) {
595
+ this.singleToMultiMap.get(e).forEach((i) => {
596
+ this.multiToSingleMap.delete(i);
597
+ }), this.singleToMultiMap.delete(e);
598
+ }
599
+ clear() {
600
+ this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
601
+ }
602
+ forEachSingle(e) {
603
+ this.singleToMultiMap.forEach((o, i) => {
604
+ e(i);
605
+ });
606
+ }
607
+ hasSingle(e) {
608
+ return this.singleToMultiMap.get(e) !== void 0;
609
+ }
610
+ hasMulti(e) {
611
+ return this.multiToSingleMap.get(e) !== void 0;
1000
612
  }
1001
613
  }
1002
- const Fe = (t) => {
1003
- if (typeof t == "function")
1004
- return t;
1005
- switch (t == null ? void 0 : t.type) {
1006
- case "straight":
1007
- return () => new Ie({
1008
- color: t.color,
1009
- width: t.width,
1010
- arrowLength: t.arrowLength,
1011
- arrowWidth: t.arrowWidth,
1012
- arrowOffset: t.arrowOffset,
1013
- hasSourceArrow: t.hasSourceArrow,
1014
- hasTargetArrow: t.hasTargetArrow,
1015
- cycleSquareSide: t.cycleSquareSide,
1016
- roundness: t.roundness,
1017
- detourDistance: t.detourDistance,
1018
- detourDirection: t.detourDirection
1019
- });
1020
- case "horizontal":
1021
- return () => new Be({
1022
- color: t.color,
1023
- width: t.width,
1024
- arrowLength: t.arrowLength,
1025
- arrowWidth: t.arrowWidth,
1026
- arrowOffset: t.arrowOffset,
1027
- hasSourceArrow: t.hasSourceArrow,
1028
- hasTargetArrow: t.hasTargetArrow,
1029
- cycleSquareSide: t.cycleSquareSide,
1030
- roundness: t.roundness,
1031
- detourDistance: t.detourDistance,
1032
- detourDirection: t.detourDirection
1033
- });
1034
- case "vertical":
1035
- return () => new Ue({
1036
- color: t.color,
1037
- width: t.width,
1038
- arrowLength: t.arrowLength,
1039
- arrowWidth: t.arrowWidth,
1040
- arrowOffset: t.arrowOffset,
1041
- hasSourceArrow: t.hasSourceArrow,
1042
- hasTargetArrow: t.hasTargetArrow,
1043
- cycleSquareSide: t.cycleSquareSide,
1044
- roundness: t.roundness,
1045
- detourDistance: t.detourDistance,
1046
- detourDirection: t.detourDirection
1047
- });
1048
- default:
1049
- return () => new Re({
1050
- color: t.color,
1051
- width: t.width,
1052
- arrowLength: t.arrowLength,
1053
- arrowWidth: t.arrowWidth,
1054
- hasSourceArrow: t.hasSourceArrow,
1055
- hasTargetArrow: t.hasTargetArrow,
1056
- cycleRadius: t.cycleRadius,
1057
- smallCycleRadius: t.smallCycleRadius,
1058
- curvature: t.curvature,
1059
- detourDistance: t.detourDistance,
1060
- detourDirection: t.detourDirection
1061
- });
1062
- }
1063
- }, ke = (t) => {
1064
- var o, i, s, h, n;
1065
- const e = xe(
1066
- (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
1067
- (i = t == null ? void 0 : t.edges) == null ? void 0 : i.priority
1068
- );
1069
- return {
1070
- nodes: {
1071
- centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? Ae,
1072
- priorityFn: e.nodesPriorityFn
1073
- },
1074
- ports: {
1075
- direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
1076
- },
1077
- edges: {
1078
- shapeFactory: Fe(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
1079
- priorityFn: e.edgesPriorityFn
1080
- }
1081
- };
1082
- };
1083
- class he {
1084
- constructor(e, o, i, s, h) {
1085
- /**
1086
- * provides api for accessing model of rendered graph
1087
- */
1088
- r(this, "graph");
1089
- /**
1090
- * provides api for accessing viewport state
1091
- */
1092
- r(this, "viewport");
1093
- r(this, "defaults");
1094
- r(this, "nodeIdGenerator", new C(
1095
- (e) => this.graph.getNode(e) !== null
1096
- ));
1097
- r(this, "portIdGenerator", new C(
1098
- (e) => this.graph.getPort(e) !== null
1099
- ));
1100
- r(this, "edgeIdGenerator", new C(
1101
- (e) => this.graph.getEdge(e) !== null
1102
- ));
1103
- r(this, "onAfterNodeAdded", (e) => {
1104
- this.htmlView.attachNode(e);
1105
- });
1106
- r(this, "onAfterNodeUpdated", (e) => {
1107
- this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
1108
- this.htmlView.renderEdge(i);
1109
- });
1110
- });
1111
- r(this, "onAfterNodePriorityUpdated", (e) => {
1112
- this.htmlView.updateNodePriority(e);
1113
- });
1114
- r(this, "onBeforeNodeRemoved", (e) => {
1115
- this.graphStore.getNodePortIds(e).forEach((o) => {
1116
- this.unmarkPort(o);
1117
- }), this.htmlView.detachNode(e);
1118
- });
1119
- r(this, "onAfterPortUpdated", (e) => {
1120
- this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
1121
- this.htmlView.renderEdge(i);
1122
- });
1123
- });
1124
- r(this, "onBeforePortUnmarked", (e) => {
1125
- this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
1126
- this.removeEdge(o);
1127
- });
1128
- });
1129
- r(this, "onAfterEdgeAdded", (e) => {
1130
- this.htmlView.attachEdge(e);
1131
- });
1132
- r(this, "onAfterEdgeShapeUpdated", (e) => {
1133
- this.htmlView.updateEdgeShape(e);
1134
- });
1135
- r(this, "onAfterEdgeUpdated", (e) => {
1136
- this.htmlView.renderEdge(e);
1137
- });
1138
- r(this, "onAfterEdgePriorityUpdated", (e) => {
1139
- this.htmlView.updateEdgePriority(e);
1140
- });
1141
- r(this, "onBeforeEdgeRemoved", (e) => {
1142
- this.htmlView.detachEdge(e);
1143
- });
1144
- r(this, "onBeforeClear", () => {
1145
- this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
1146
- });
1147
- r(this, "onBeforeDestroyEmitter");
1148
- /**
1149
- * emits event just before destruction of canvas
1150
- */
1151
- r(this, "onBeforeDestroy");
1152
- this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = ke(h), this.graph = new pe(this.graphStore), this.viewport = new ye(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
1153
- this.onAfterNodePriorityUpdated
1154
- ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
1155
- this.onAfterEdgeShapeUpdated
1156
- ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
1157
- this.onAfterEdgePriorityUpdated
1158
- ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
614
+ class ce {
615
+ constructor() {
616
+ r(this, "nodes", /* @__PURE__ */ new Map());
617
+ r(this, "ports", /* @__PURE__ */ new Map());
618
+ r(this, "edges", /* @__PURE__ */ new Map());
619
+ r(this, "nodesElementsMap", /* @__PURE__ */ new Map());
620
+ r(this, "incomingEdges", /* @__PURE__ */ new Map());
621
+ r(this, "outcomingEdges", /* @__PURE__ */ new Map());
622
+ r(this, "cycleEdges", /* @__PURE__ */ new Map());
623
+ r(this, "elementPorts", new Pe());
624
+ r(this, "afterNodeAddedEmitter");
625
+ r(this, "onAfterNodeAdded");
626
+ r(this, "afterNodeUpdatedEmitter");
627
+ r(this, "onAfterNodeUpdated");
628
+ r(this, "afterNodePriorityUpdatedEmitter");
629
+ r(this, "onAfterNodePriorityUpdated");
630
+ r(this, "beforeNodeRemovedEmitter");
631
+ r(this, "onBeforeNodeRemoved");
632
+ r(this, "afterPortAddedEmitter");
633
+ r(this, "onAfterPortAdded");
634
+ r(this, "afterPortUpdatedEmitter");
635
+ r(this, "onAfterPortUpdated");
636
+ r(this, "beforePortRemovedEmitter");
637
+ r(this, "onBeforePortRemoved");
638
+ r(this, "afterEdgeAddedEmitter");
639
+ r(this, "onAfterEdgeAdded");
640
+ r(this, "afterEdgeShapeUpdatedEmitter");
641
+ r(this, "onAfterEdgeShapeUpdated");
642
+ r(this, "afterEdgeUpdatedEmitter");
643
+ r(this, "onAfterEdgeUpdated");
644
+ r(this, "afterEdgePriorityUpdatedEmitter");
645
+ r(this, "onAfterEdgePriorityUpdated");
646
+ r(this, "beforeEdgeRemovedEmitter");
647
+ r(this, "onBeforeEdgeRemoved");
648
+ r(this, "beforeClearEmitter");
649
+ r(this, "onBeforeClear");
650
+ [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = x(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = x(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = x(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = x(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = x(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = x(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = x(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = x(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = x(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = x(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = x(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = x(), [this.beforeClearEmitter, this.onBeforeClear] = x();
1159
651
  }
1160
- /**
1161
- * adds new node
1162
- */
1163
652
  addNode(e) {
1164
- const o = this.nodeIdGenerator.create(e.id);
1165
- if (this.graph.getNode(o) !== null)
1166
- throw new S("failed to add node with existing id");
1167
- if (this.graphStore.addNode({
1168
- id: o,
653
+ const o = /* @__PURE__ */ new Map(), i = {
1169
654
  element: e.element,
1170
655
  x: e.x,
1171
656
  y: e.y,
1172
- centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
1173
- priority: e.priority ?? this.defaults.nodes.priorityFn()
1174
- }), e.ports !== void 0)
1175
- for (const i of e.ports)
1176
- this.markPort({
1177
- id: i.id,
1178
- element: i.element,
1179
- nodeId: o,
1180
- direction: i.direction
1181
- });
1182
- return this;
657
+ centerFn: e.centerFn,
658
+ priority: e.priority,
659
+ ports: o
660
+ };
661
+ this.nodes.set(e.id, i), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
662
+ }
663
+ getAllNodeIds() {
664
+ return Array.from(this.nodes.keys());
665
+ }
666
+ getNode(e) {
667
+ return this.nodes.get(e);
668
+ }
669
+ getElementNodeId(e) {
670
+ return this.nodesElementsMap.get(e);
1183
671
  }
1184
- /**
1185
- * updates node parameters
1186
- */
1187
672
  updateNode(e, o) {
1188
- if (this.graph.getNode(e) === null)
1189
- throw new S("failed to update non existing node");
1190
- return this.graphStore.updateNode(e, o ?? {}), this;
673
+ const i = this.nodes.get(e);
674
+ i.x = o.x ?? i.x, i.y = o.y ?? i.y, i.centerFn = o.centerFn ?? i.centerFn, o.priority !== void 0 && (i.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
1191
675
  }
1192
- /**
1193
- * removes specified node
1194
- * all the ports of node get unmarked
1195
- * all the edges adjacent to node get removed
1196
- */
1197
676
  removeNode(e) {
1198
- if (this.graph.getNode(e) === null)
1199
- throw new S("failed to remove non existing node");
1200
- return this.graphStore.removeNode(e), this;
677
+ this.beforeNodeRemovedEmitter.emit(e);
678
+ const o = this.nodes.get(e);
679
+ this.nodesElementsMap.delete(o.element), this.nodes.delete(e);
1201
680
  }
1202
- /**
1203
- * marks specified element as a port for specified node
1204
- */
1205
- markPort(e) {
1206
- const o = this.portIdGenerator.create(e.id);
1207
- if (this.graph.getPort(o) !== null)
1208
- throw new S("failed to add port with existing id");
1209
- if (this.graph.getNode(e.nodeId) === null)
1210
- throw new S("failed to mark port for nonexistent node");
1211
- return this.graphStore.addPort({
1212
- id: o,
681
+ addPort(e) {
682
+ this.ports.set(e.id, {
1213
683
  element: e.element,
1214
- nodeId: e.nodeId,
1215
- direction: e.direction ?? this.defaults.ports.direction
1216
- }), this;
684
+ direction: e.direction,
685
+ nodeId: e.nodeId
686
+ }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
687
+ }
688
+ getPort(e) {
689
+ return this.ports.get(e);
1217
690
  }
1218
- /**
1219
- * updates port and edges attached to it
1220
- */
1221
691
  updatePort(e, o) {
1222
- if (this.graph.getPort(e) === null)
1223
- throw new S("failed to update nonexistent port");
1224
- return this.graphStore.updatePort(e, o ?? {}), this;
1225
- }
1226
- /**
1227
- * unmarks specified port
1228
- * all the edges adjacent to the port get removed
1229
- */
1230
- unmarkPort(e) {
1231
- if (this.graph.getPort(e) === null)
1232
- throw new S("failed to unmark non existing port");
1233
- return this.graphStore.removePort(e), this;
1234
- }
1235
- /**
1236
- * adds new edge
1237
- */
1238
- addEdge(e) {
1239
- const o = this.edgeIdGenerator.create(e.id);
1240
- if (this.graph.getEdge(o) !== null)
1241
- throw new S("failed to add edge with existing id");
1242
- if (this.graph.getPort(e.from) === null)
1243
- throw new S("failed to add edge from nonexistent port");
1244
- if (this.graph.getPort(e.to) === null)
1245
- throw new S("failed to add edge to nonexistent port");
1246
- return this.graphStore.addEdge({
1247
- id: o,
1248
- from: e.from,
1249
- to: e.to,
1250
- shape: e.shape ?? this.defaults.edges.shapeFactory(o),
1251
- priority: e.priority ?? this.defaults.edges.priorityFn()
1252
- }), this;
1253
- }
1254
- /**
1255
- * updates specified edge
1256
- */
1257
- updateEdge(e, o) {
1258
- if (this.graph.getEdge(e) === null)
1259
- throw new S("failed to update nonexistent edge");
1260
- return this.graphStore.updateEdge(e, o ?? {}), this;
1261
- }
1262
- /**
1263
- * removes specified edge
1264
- */
1265
- removeEdge(e) {
1266
- if (this.graph.getEdge(e) === null)
1267
- throw new S("failed to remove nonexistent edge");
1268
- return this.graphStore.removeEdge(e), this;
1269
- }
1270
- /**
1271
- * applies transformation for viewport matrix
1272
- */
1273
- patchViewportMatrix(e) {
1274
- return this.viewportStore.patchViewportMatrix(e), this;
1275
- }
1276
- /**
1277
- * applies transformation for content matrix
1278
- */
1279
- patchContentMatrix(e) {
1280
- return this.viewportStore.patchContentMatrix(e), this;
1281
- }
1282
- /**
1283
- * clears canvas from nodes and edges
1284
- * canvas gets rolled back to initial state and can be reused
1285
- */
1286
- clear() {
1287
- return this.graphStore.clear(), this;
1288
- }
1289
- /**
1290
- * destroys canvas
1291
- * canvas element gets rolled back to initial state, and can not be reused
1292
- */
1293
- destroy() {
1294
- this.clear(), this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
1295
- this.onAfterNodePriorityUpdated
1296
- ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
1297
- this.onAfterEdgeShapeUpdated
1298
- ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
1299
- this.onAfterEdgePriorityUpdated
1300
- ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
1301
- }
1302
- }
1303
- class de {
1304
- constructor() {
1305
- r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
1306
- r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
1307
- }
1308
- addRecord(e, o) {
1309
- const i = this.singleToMultiMap.get(e);
1310
- i === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([o])) : i.add(o), this.multiToSingleMap.set(o, e);
1311
- }
1312
- getMultiBySingle(e) {
1313
- const o = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
1314
- return Array.from(o.values());
1315
- }
1316
- removeByMulti(e) {
1317
- const o = this.multiToSingleMap.get(e), i = this.singleToMultiMap.get(o);
1318
- i.delete(e), i.size === 0 && this.singleToMultiMap.delete(o), this.multiToSingleMap.delete(e);
1319
- }
1320
- getByMulti(e) {
1321
- return this.multiToSingleMap.get(e);
1322
- }
1323
- removeBySingle(e) {
1324
- this.singleToMultiMap.get(e).forEach((i) => {
1325
- this.multiToSingleMap.delete(i);
1326
- }), this.singleToMultiMap.delete(e);
1327
- }
1328
- clear() {
1329
- this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
1330
- }
1331
- forEachSingle(e) {
1332
- this.singleToMultiMap.forEach((o, i) => {
1333
- e(i);
1334
- });
1335
- }
1336
- hasSingle(e) {
1337
- return this.singleToMultiMap.get(e) !== void 0;
1338
- }
1339
- hasMulti(e) {
1340
- return this.multiToSingleMap.get(e) !== void 0;
1341
- }
1342
- }
1343
- class ce {
1344
- constructor() {
1345
- r(this, "nodes", /* @__PURE__ */ new Map());
1346
- r(this, "ports", /* @__PURE__ */ new Map());
1347
- r(this, "edges", /* @__PURE__ */ new Map());
1348
- r(this, "incomingEdges", /* @__PURE__ */ new Map());
1349
- r(this, "outcomingEdges", /* @__PURE__ */ new Map());
1350
- r(this, "cycleEdges", /* @__PURE__ */ new Map());
1351
- r(this, "elementPorts", new de());
1352
- r(this, "afterNodeAddedEmitter");
1353
- r(this, "onAfterNodeAdded");
1354
- r(this, "afterNodeUpdatedEmitter");
1355
- r(this, "onAfterNodeUpdated");
1356
- r(this, "afterNodePriorityUpdatedEmitter");
1357
- r(this, "onAfterNodePriorityUpdated");
1358
- r(this, "beforeNodeRemovedEmitter");
1359
- r(this, "onBeforeNodeRemoved");
1360
- r(this, "afterPortAddedEmitter");
1361
- r(this, "onAfterPortAdded");
1362
- r(this, "afterPortUpdatedEmitter");
1363
- r(this, "onAfterPortUpdated");
1364
- r(this, "beforePortRemovedEmitter");
1365
- r(this, "onBeforePortRemoved");
1366
- r(this, "afterEdgeAddedEmitter");
1367
- r(this, "onAfterEdgeAdded");
1368
- r(this, "afterEdgeShapeUpdatedEmitter");
1369
- r(this, "onAfterEdgeShapeUpdated");
1370
- r(this, "afterEdgeUpdatedEmitter");
1371
- r(this, "onAfterEdgeUpdated");
1372
- r(this, "afterEdgePriorityUpdatedEmitter");
1373
- r(this, "onAfterEdgePriorityUpdated");
1374
- r(this, "beforeEdgeRemovedEmitter");
1375
- r(this, "onBeforeEdgeRemoved");
1376
- r(this, "beforeClearEmitter");
1377
- r(this, "onBeforeClear");
1378
- [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = x(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = x(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = x(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = x(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = x(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = x(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = x(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = x(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = x(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = x(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = x(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = x(), [this.beforeClearEmitter, this.onBeforeClear] = x();
1379
- }
1380
- addNode(e) {
1381
- const o = /* @__PURE__ */ new Map(), i = {
1382
- element: e.element,
1383
- x: e.x,
1384
- y: e.y,
1385
- centerFn: e.centerFn,
1386
- priority: e.priority,
1387
- ports: o
1388
- };
1389
- this.nodes.set(e.id, i), this.afterNodeAddedEmitter.emit(e.id);
1390
- }
1391
- getAllNodeIds() {
1392
- return Array.from(this.nodes.keys());
1393
- }
1394
- getNode(e) {
1395
- return this.nodes.get(e);
1396
- }
1397
- updateNode(e, o) {
1398
- const i = this.nodes.get(e);
1399
- i.x = o.x ?? i.x, i.y = o.y ?? i.y, i.centerFn = o.centerFn ?? i.centerFn, o.priority !== void 0 && (i.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
1400
- }
1401
- removeNode(e) {
1402
- this.beforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
1403
- }
1404
- addPort(e) {
1405
- this.ports.set(e.id, {
1406
- element: e.element,
1407
- direction: e.direction,
1408
- nodeId: e.nodeId
1409
- }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
1410
- }
1411
- getPort(e) {
1412
- return this.ports.get(e);
1413
- }
1414
- updatePort(e, o) {
1415
- const i = this.ports.get(e);
1416
- i.direction = o.direction ?? i.direction, this.afterPortUpdatedEmitter.emit(e);
692
+ const i = this.ports.get(e);
693
+ i.direction = o.direction ?? i.direction, this.afterPortUpdatedEmitter.emit(e);
1417
694
  }
1418
695
  getAllPortIds() {
1419
696
  return Array.from(this.ports.keys());
@@ -1457,7 +734,7 @@ class ce {
1457
734
  this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
1458
735
  }
1459
736
  clear() {
1460
- this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
737
+ this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
1461
738
  }
1462
739
  getPortIncomingEdgeIds(e) {
1463
740
  return Array.from(this.incomingEdges.get(e));
@@ -1516,19 +793,19 @@ class ce {
1516
793
  this.cycleEdges.get(i).delete(e), this.cycleEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.edges.delete(e);
1517
794
  }
1518
795
  }
1519
- const te = (t) => ({
796
+ const _ = (t) => ({
1520
797
  scale: 1 / t.scale,
1521
798
  x: -t.x / t.scale,
1522
799
  y: -t.y / t.scale
1523
- }), oe = {
800
+ }), q = {
1524
801
  scale: 1,
1525
802
  x: 0,
1526
803
  y: 0
1527
804
  };
1528
- class ze {
805
+ class me {
1529
806
  constructor() {
1530
- r(this, "viewportMatrix", oe);
1531
- r(this, "contentMatrix", oe);
807
+ r(this, "viewportMatrix", q);
808
+ r(this, "contentMatrix", q);
1532
809
  r(this, "afterUpdateEmitter");
1533
810
  r(this, "onAfterUpdated");
1534
811
  r(this, "beforeUpdateEmitter");
@@ -1546,17 +823,17 @@ class ze {
1546
823
  scale: e.scale ?? this.viewportMatrix.scale,
1547
824
  x: e.x ?? this.viewportMatrix.x,
1548
825
  y: e.y ?? this.viewportMatrix.y
1549
- }, this.contentMatrix = te(this.viewportMatrix), this.afterUpdateEmitter.emit();
826
+ }, this.contentMatrix = _(this.viewportMatrix), this.afterUpdateEmitter.emit();
1550
827
  }
1551
828
  patchContentMatrix(e) {
1552
829
  this.beforeUpdateEmitter.emit(), this.contentMatrix = {
1553
830
  scale: e.scale ?? this.contentMatrix.scale,
1554
831
  x: e.x ?? this.contentMatrix.x,
1555
832
  y: e.y ?? this.contentMatrix.y
1556
- }, this.viewportMatrix = te(this.contentMatrix), this.afterUpdateEmitter.emit();
833
+ }, this.viewportMatrix = _(this.contentMatrix), this.afterUpdateEmitter.emit();
1557
834
  }
1558
835
  }
1559
- class z {
836
+ class k {
1560
837
  constructor(e) {
1561
838
  r(this, "elementToNodeId", /* @__PURE__ */ new Map());
1562
839
  r(this, "nodesResizeObserver");
@@ -1582,47 +859,44 @@ class z {
1582
859
  }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
1583
860
  }
1584
861
  static configure(e) {
1585
- new z(e);
862
+ new k(e);
1586
863
  }
1587
864
  handleNodeResize(e) {
1588
865
  const o = this.elementToNodeId.get(e);
1589
866
  this.canvas.updateNode(o);
1590
867
  }
1591
868
  }
1592
- const Oe = (t) => {
1593
- var g, y, p, f, A, E;
1594
- const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
1595
- }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), i = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onNodeDragFinished) ?? (() => {
1596
- }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
869
+ const Ne = (t) => {
870
+ var v, A, y, E, p, b;
871
+ const e = ((v = t == null ? void 0 : t.events) == null ? void 0 : v.onNodeDrag) ?? (() => {
872
+ }), o = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onBeforeNodeDrag) ?? (() => !0), i = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
873
+ }), s = (t == null ? void 0 : t.moveOnTop) !== !1, h = (t == null ? void 0 : t.moveEdgesOnTop) !== !1 && s, n = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.dragCursor, d = n !== void 0 ? n : "grab", c = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseDownEventVerifier, a = c !== void 0 ? c : (T) => T.button === 0, l = (b = t == null ? void 0 : t.mouse) == null ? void 0 : b.mouseUpEventVerifier;
1597
874
  return {
1598
- freezePriority: s,
1599
- dragCursor: n,
1600
- mouseDownEventVerifier: c,
1601
- mouseUpEventVerifier: a !== void 0 ? a : (b) => b.button === 0,
875
+ moveOnTop: s,
876
+ moveEdgesOnTop: h,
877
+ dragCursor: d,
878
+ mouseDownEventVerifier: a,
879
+ mouseUpEventVerifier: l !== void 0 ? l : (T) => T.button === 0,
1602
880
  onNodeDrag: e,
1603
881
  onBeforeNodeDrag: o,
1604
882
  onNodeDragFinished: i
1605
883
  };
1606
- }, Xe = (t, e, o) => {
884
+ }, De = (t, e, o) => {
1607
885
  const { x: i, y: s, width: h, height: n } = t.getBoundingClientRect();
1608
886
  return e >= i && e <= i + h && o >= s && o <= s + n;
1609
- }, Ye = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, M = (t, e, o, i) => Xe(e, o, i) && Ye(t, o, i), B = (t, e) => {
887
+ }, Me = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, D = (t, e, o, i) => De(e, o, i) && Me(t, o, i), I = (t, e) => {
1610
888
  e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
1611
- }, N = (t, e) => ({
1612
- x: t.scale * e.x + t.x,
1613
- y: t.scale * e.y + t.y
1614
- });
1615
- class O {
889
+ };
890
+ class z {
1616
891
  constructor(e, o, i, s) {
1617
892
  r(this, "grabbedNodeId", null);
1618
893
  r(this, "maxNodePriority", 0);
1619
894
  r(this, "previousTouchCoordinates", null);
1620
- r(this, "nodeIds", /* @__PURE__ */ new Map());
1621
895
  r(this, "graph");
1622
896
  r(this, "onAfterNodeAdded", (e) => {
1623
897
  this.updateMaxNodePriority(e);
1624
898
  const o = this.graph.getNode(e);
1625
- this.nodeIds.set(o.element, e), o.element.addEventListener("mousedown", this.onMouseDown, {
899
+ o.element.addEventListener("mousedown", this.onMouseDown, {
1626
900
  passive: !0
1627
901
  }), o.element.addEventListener("touchstart", this.onTouchStart, {
1628
902
  passive: !0
@@ -1633,26 +907,27 @@ class O {
1633
907
  });
1634
908
  r(this, "onBeforeNodeRemoved", (e) => {
1635
909
  const o = this.graph.getNode(e);
1636
- this.nodeIds.delete(o.element), o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
910
+ o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
1637
911
  });
1638
912
  r(this, "onBeforeDestroy", () => {
1639
913
  this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy), this.removeMouseDragListeners(), this.removeTouchDragListeners();
1640
914
  });
1641
915
  r(this, "onBeforeClear", () => {
1642
- this.nodeIds.forEach((e, o) => {
1643
- o.removeEventListener("mousedown", this.onMouseDown), o.removeEventListener("touchstart", this.onTouchStart);
1644
- }), this.nodeIds.clear(), this.maxNodePriority = 0;
916
+ this.canvas.graph.getAllNodeIds().forEach((e) => {
917
+ const o = this.canvas.graph.getNode(e);
918
+ o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
919
+ }), this.maxNodePriority = 0;
1645
920
  });
1646
921
  r(this, "onMouseDown", (e) => {
1647
922
  if (!this.config.mouseDownEventVerifier(e))
1648
923
  return;
1649
- const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
924
+ const o = e.currentTarget, i = this.graph.getElementNodeId(o), s = this.graph.getNode(i);
1650
925
  this.config.onBeforeNodeDrag({
1651
926
  nodeId: i,
1652
927
  element: s.element,
1653
928
  x: s.x,
1654
929
  y: s.y
1655
- }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, B(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
930
+ }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, I(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
1656
931
  passive: !0
1657
932
  }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1658
933
  passive: !0
@@ -1665,7 +940,7 @@ class O {
1665
940
  x: e.touches[0].clientX,
1666
941
  y: e.touches[0].clientY
1667
942
  };
1668
- const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
943
+ const o = e.currentTarget, i = this.canvas.graph.getElementNodeId(o), s = this.graph.getNode(i);
1669
944
  this.config.onBeforeNodeDrag({
1670
945
  nodeId: i,
1671
946
  element: s.element,
@@ -1680,7 +955,7 @@ class O {
1680
955
  }));
1681
956
  });
1682
957
  r(this, "onWindowMouseMove", (e) => {
1683
- if (!M(
958
+ if (!D(
1684
959
  this.window,
1685
960
  this.element,
1686
961
  e.clientX,
@@ -1698,7 +973,7 @@ class O {
1698
973
  if (e.touches.length !== 1)
1699
974
  return;
1700
975
  const o = e.touches[0];
1701
- if (!M(
976
+ if (!D(
1702
977
  this.window,
1703
978
  this.element,
1704
979
  o.clientX,
@@ -1719,10 +994,10 @@ class O {
1719
994
  this.previousTouchCoordinates = null, this.cancelTouchDrag();
1720
995
  });
1721
996
  r(this, "config");
1722
- this.canvas = e, this.element = o, this.window = i, this.config = Oe(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
997
+ this.canvas = e, this.element = o, this.window = i, this.config = Ne(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
1723
998
  }
1724
999
  static configure(e, o, i, s) {
1725
- new O(e, o, i, s);
1000
+ new z(e, o, i, s);
1726
1001
  }
1727
1002
  dragNode(e, o, i) {
1728
1003
  const s = this.graph.getNode(e);
@@ -1743,13 +1018,15 @@ class O {
1743
1018
  });
1744
1019
  }
1745
1020
  moveNodeOnTop(e) {
1746
- if (this.config.freezePriority)
1747
- return;
1748
- this.maxNodePriority += 2, this.canvas.updateNode(e, { priority: this.maxNodePriority });
1749
- const o = this.maxNodePriority - 1;
1750
- this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
1751
- this.canvas.updateEdge(s, { priority: o });
1752
- });
1021
+ if (this.config.moveOnTop) {
1022
+ if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
1023
+ const o = this.maxNodePriority;
1024
+ this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
1025
+ this.canvas.updateEdge(s, { priority: o });
1026
+ });
1027
+ }
1028
+ this.canvas.updateNode(e, { priority: this.maxNodePriority });
1029
+ }
1753
1030
  }
1754
1031
  cancelMouseDrag() {
1755
1032
  const e = this.graph.getNode(this.grabbedNodeId);
@@ -1758,7 +1035,7 @@ class O {
1758
1035
  element: e.element,
1759
1036
  x: e.x,
1760
1037
  y: e.y
1761
- }), this.grabbedNodeId = null, B(this.element, null), this.removeMouseDragListeners();
1038
+ }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
1762
1039
  }
1763
1040
  removeMouseDragListeners() {
1764
1041
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1781,30 +1058,30 @@ class O {
1781
1058
  this.maxNodePriority = Math.max(this.maxNodePriority, o);
1782
1059
  }
1783
1060
  }
1784
- const He = (t) => {
1061
+ const Le = (t) => {
1785
1062
  const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, i = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
1786
1063
  return (h) => {
1787
1064
  let n = h.nextTransform.x, d = h.nextTransform.y;
1788
1065
  n < e && n < h.prevTransform.x && (n = Math.min(h.prevTransform.x, e));
1789
1066
  const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
1790
1067
  n > a && n > h.prevTransform.x && (n = Math.max(h.prevTransform.x, a)), d < i && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, i));
1791
- const l = h.canvasHeight * h.prevTransform.scale, g = s - l;
1792
- return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: n, y: d };
1068
+ const l = h.canvasHeight * h.prevTransform.scale, w = s - l;
1069
+ return d > w && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, w)), { scale: h.nextTransform.scale, x: n, y: d };
1793
1070
  };
1794
- }, je = (t) => {
1071
+ }, Ve = (t) => {
1795
1072
  const e = t.maxContentScale, o = t.minContentScale, i = e !== null ? 1 / e : 0, s = o !== null ? 1 / o : 1 / 0;
1796
1073
  return (h) => {
1797
1074
  const n = h.prevTransform, d = h.nextTransform;
1798
1075
  let c = d.scale, a = d.x, l = d.y;
1799
1076
  if (d.scale > s && d.scale > n.scale) {
1800
1077
  c = Math.max(n.scale, s), a = n.x, l = n.y;
1801
- const g = (c - n.scale) / (d.scale - n.scale);
1802
- a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
1078
+ const w = (c - n.scale) / (d.scale - n.scale);
1079
+ a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
1803
1080
  }
1804
1081
  if (d.scale < i && d.scale < n.scale) {
1805
1082
  c = Math.min(n.scale, i), a = n.x, l = n.y;
1806
- const g = (c - n.scale) / (d.scale - n.scale);
1807
- a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
1083
+ const w = (c - n.scale) / (d.scale - n.scale);
1084
+ a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
1808
1085
  }
1809
1086
  return {
1810
1087
  scale: c,
@@ -1812,7 +1089,7 @@ const He = (t) => {
1812
1089
  y: l
1813
1090
  };
1814
1091
  };
1815
- }, Ge = (t) => (e) => t.reduce(
1092
+ }, Re = (t) => (e) => t.reduce(
1816
1093
  (o, i) => i({
1817
1094
  prevTransform: e.prevTransform,
1818
1095
  nextTransform: o,
@@ -1820,59 +1097,59 @@ const He = (t) => {
1820
1097
  canvasHeight: e.canvasHeight
1821
1098
  }),
1822
1099
  e.nextTransform
1823
- ), re = (t) => {
1100
+ ), ee = (t) => {
1824
1101
  if (typeof t == "function")
1825
1102
  return t;
1826
1103
  switch (t.type) {
1827
1104
  case "scale-limit":
1828
- return je({
1105
+ return Ve({
1829
1106
  minContentScale: t.minContentScale ?? 0,
1830
1107
  maxContentScale: t.maxContentScale ?? 1 / 0
1831
1108
  });
1832
1109
  case "shift-limit":
1833
- return He({
1110
+ return Le({
1834
1111
  minX: t.minX ?? -1 / 0,
1835
1112
  maxX: t.maxX ?? 1 / 0,
1836
1113
  minY: t.minY ?? -1 / 0,
1837
1114
  maxY: t.maxY ?? 1 / 0
1838
1115
  });
1839
1116
  }
1840
- }, Ze = (t) => {
1841
- var f, A, E, b, T, m, D, L, j, G, Z, J;
1842
- const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
1117
+ }, Ie = (t) => {
1118
+ var y, E, p, b, T, P, M, L, Z, J, K, Q;
1119
+ const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
1843
1120
  let s;
1844
- i !== void 0 ? Array.isArray(i) ? s = Ge(
1121
+ i !== void 0 ? Array.isArray(i) ? s = Re(
1845
1122
  i.map(
1846
- (P) => re(P)
1123
+ (m) => ee(m)
1847
1124
  )
1848
- ) : s = re(i) : s = (P) => P.nextTransform;
1849
- const h = ((A = t == null ? void 0 : t.shift) == null ? void 0 : A.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
1125
+ ) : s = ee(i) : s = (m) => m.nextTransform;
1126
+ const h = ((E = t == null ? void 0 : t.shift) == null ? void 0 : E.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
1850
1127
  }), d = ((b = t == null ? void 0 : t.events) == null ? void 0 : b.onTransformChange) ?? (() => {
1851
- }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (m = t == null ? void 0 : t.shift) == null ? void 0 : m.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, y = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, p = y !== void 0 ? y : () => !0;
1128
+ }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (m) => m.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, w = l !== void 0 ? l : (m) => m.button === 0, v = (M = t == null ? void 0 : t.scale) == null ? void 0 : M.mouseWheelEventVerifier, A = v !== void 0 ? v : () => !0;
1852
1129
  return {
1853
1130
  wheelSensitivity: o,
1854
1131
  onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
1855
1132
  }),
1856
- onTransformFinished: ((j = t == null ? void 0 : t.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
1133
+ onTransformFinished: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onTransformFinished) ?? (() => {
1857
1134
  }),
1858
1135
  onBeforeTransformChange: n,
1859
1136
  onTransformChange: d,
1860
1137
  transformPreprocessor: s,
1861
1138
  shiftCursor: h,
1862
1139
  mouseDownEventVerifier: a,
1863
- mouseUpEventVerifier: g,
1864
- mouseWheelEventVerifier: p,
1865
- scaleWheelFinishTimeout: ((G = t == null ? void 0 : t.scale) == null ? void 0 : G.wheelFinishTimeout) ?? 500,
1866
- onResizeTransformStarted: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onResizeTransformStarted) ?? (() => {
1140
+ mouseUpEventVerifier: w,
1141
+ mouseWheelEventVerifier: A,
1142
+ scaleWheelFinishTimeout: ((J = t == null ? void 0 : t.scale) == null ? void 0 : J.wheelFinishTimeout) ?? 500,
1143
+ onResizeTransformStarted: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformStarted) ?? (() => {
1867
1144
  }),
1868
- onResizeTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformFinished) ?? (() => {
1145
+ onResizeTransformFinished: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onResizeTransformFinished) ?? (() => {
1869
1146
  })
1870
1147
  };
1871
- }, Je = (t, e, o) => ({
1148
+ }, Be = (t, e, o) => ({
1872
1149
  scale: t.scale,
1873
1150
  x: t.x + t.scale * e,
1874
1151
  y: t.y + t.scale * o
1875
- }), Ke = (t, e, o, i) => ({
1152
+ }), Ue = (t, e, o, i) => ({
1876
1153
  scale: t.scale * e,
1877
1154
  x: t.scale * (1 - e) * o + t.x,
1878
1155
  y: t.scale * (1 - e) * i + t.y
@@ -1905,14 +1182,14 @@ class U {
1905
1182
  this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("wheel", this.preventWheelScaleListener), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
1906
1183
  });
1907
1184
  r(this, "onMouseDown", (e) => {
1908
- this.element === null || !this.config.mouseDownEventVerifier(e) || (B(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1185
+ this.element === null || !this.config.mouseDownEventVerifier(e) || (I(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1909
1186
  passive: !0
1910
1187
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
1911
1188
  passive: !0
1912
1189
  }), this.startRegisteredTransform());
1913
1190
  });
1914
1191
  r(this, "onWindowMouseMove", (e) => {
1915
- const o = M(
1192
+ const o = D(
1916
1193
  this.window,
1917
1194
  this.element,
1918
1195
  e.clientX,
@@ -1952,7 +1229,7 @@ class U {
1952
1229
  r(this, "onWindowTouchMove", (e) => {
1953
1230
  const o = R(e);
1954
1231
  if (!o.touches.every(
1955
- (s) => M(this.window, this.element, s[0], s[1])
1232
+ (s) => D(this.window, this.element, s[0], s[1])
1956
1233
  )) {
1957
1234
  this.stopTouchDrag();
1958
1235
  return;
@@ -1984,7 +1261,7 @@ class U {
1984
1261
  });
1985
1262
  this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
1986
1263
  passive: !1
1987
- }), this.config = Ze(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
1264
+ }), this.config = Ie(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
1988
1265
  passive: !0
1989
1266
  }), this.element.addEventListener("wheel", this.onWheelScroll, {
1990
1267
  passive: !0
@@ -2001,7 +1278,7 @@ class U {
2001
1278
  );
2002
1279
  }
2003
1280
  moveViewport(e, o) {
2004
- const i = this.viewport.getViewportMatrix(), s = Je(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
1281
+ const i = this.viewport.getViewportMatrix(), s = Be(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
2005
1282
  prevTransform: i,
2006
1283
  nextTransform: s,
2007
1284
  canvasWidth: h,
@@ -2010,7 +1287,7 @@ class U {
2010
1287
  this.performTransform(d);
2011
1288
  }
2012
1289
  scaleViewport(e, o, i) {
2013
- const s = this.canvas.viewport.getViewportMatrix(), h = Ke(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
1290
+ const s = this.canvas.viewport.getViewportMatrix(), h = Ue(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
2014
1291
  prevTransform: s,
2015
1292
  nextTransform: h,
2016
1293
  canvasWidth: n,
@@ -2019,7 +1296,7 @@ class U {
2019
1296
  this.performTransform(c);
2020
1297
  }
2021
1298
  stopMouseDrag() {
2022
- B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
1299
+ I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2023
1300
  }
2024
1301
  removeMouseDragListeners() {
2025
1302
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2072,17 +1349,17 @@ class X {
2072
1349
  this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
2073
1350
  });
2074
1351
  r(this, "userTransformInProgress", !1);
2075
- var p, f, A, E, b;
1352
+ var A, y, E, p, b;
2076
1353
  this.canvas = e, this.element = o, this.window = i, this.trigger = h, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((T) => {
2077
- const m = T[0];
2078
- this.viewportWidth = m.contentRect.width, this.viewportHeight = m.contentRect.height, this.scheduleLoadAreaAroundViewport();
1354
+ const P = T[0];
1355
+ this.viewportWidth = P.contentRect.width, this.viewportHeight = P.contentRect.height, this.scheduleLoadAreaAroundViewport();
2079
1356
  }), this.viewport = e.viewport;
2080
- const d = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onResizeTransformStarted) ?? (() => {
2081
- }), c = ((f = s == null ? void 0 : s.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
2082
- }), a = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onTransformChange) ?? (() => {
2083
- }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
2084
- }), g = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
2085
- }), y = {
1357
+ const d = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onResizeTransformStarted) ?? (() => {
1358
+ }), c = ((y = s == null ? void 0 : s.events) == null ? void 0 : y.onResizeTransformFinished) ?? (() => {
1359
+ }), a = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onTransformChange) ?? (() => {
1360
+ }), l = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
1361
+ }), w = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
1362
+ }), v = {
2086
1363
  ...s,
2087
1364
  events: {
2088
1365
  ...s == null ? void 0 : s.events,
@@ -2101,7 +1378,7 @@ class X {
2101
1378
  this.viewportMatrix = this.viewport.getViewportMatrix(), T.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
2102
1379
  },
2103
1380
  onTransformFinished: () => {
2104
- this.scheduleLoadAreaAroundViewport(), g();
1381
+ this.scheduleLoadAreaAroundViewport(), w();
2105
1382
  }
2106
1383
  }
2107
1384
  };
@@ -2109,7 +1386,7 @@ class X {
2109
1386
  e,
2110
1387
  this.element,
2111
1388
  this.window,
2112
- y
1389
+ v
2113
1390
  ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2114
1391
  }
2115
1392
  static configure(e, o, i, s, h, n) {
@@ -2136,29 +1413,29 @@ class X {
2136
1413
  this.trigger.emit({ x: i, y: s, width: h, height: n });
2137
1414
  }
2138
1415
  }
2139
- const Qe = () => {
1416
+ const Ce = () => {
2140
1417
  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2141
1418
  return t.style.position = "absolute", t.style.inset = "0", t;
2142
- }, _e = () => {
1419
+ }, We = () => {
2143
1420
  const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
2144
1421
  return t.setAttribute("fill", "url(#pattern)"), t;
2145
- }, qe = () => {
1422
+ }, $e = () => {
2146
1423
  const t = document.createElementNS(
2147
1424
  "http://www.w3.org/2000/svg",
2148
1425
  "pattern"
2149
1426
  );
2150
1427
  return t.setAttribute("id", "pattern"), t;
2151
- }, et = (t, e) => {
1428
+ }, Fe = (t, e) => {
2152
1429
  const o = document.createElementNS(
2153
1430
  "http://www.w3.org/2000/svg",
2154
1431
  "circle"
2155
1432
  );
2156
1433
  return o.setAttribute("cx", "0"), o.setAttribute("cy", "0"), o.setAttribute("r", `${t}`), o.setAttribute("fill", `${e}`), o;
2157
- }, tt = (t) => t instanceof SVGElement ? t : et(
1434
+ }, Oe = (t) => t instanceof SVGElement ? t : Fe(
2158
1435
  (t == null ? void 0 : t.radius) ?? 1.5,
2159
1436
  (t == null ? void 0 : t.color) ?? "#d8d8d8"
2160
- ), ot = (t) => {
2161
- const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = tt(t.renderer ?? {});
1437
+ ), ke = (t) => {
1438
+ const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = Oe(t.renderer ?? {});
2162
1439
  return {
2163
1440
  tileWidth: o,
2164
1441
  tileHeight: i,
@@ -2168,9 +1445,9 @@ const Qe = () => {
2168
1445
  };
2169
1446
  class Y {
2170
1447
  constructor(e, o, i) {
2171
- r(this, "svg", Qe());
2172
- r(this, "patternRenderingRectangle", _e());
2173
- r(this, "pattern", qe());
1448
+ r(this, "svg", Ce());
1449
+ r(this, "patternRenderingRectangle", We());
1450
+ r(this, "pattern", $e());
2174
1451
  r(this, "patternContent");
2175
1452
  r(this, "tileWidth");
2176
1453
  r(this, "tileHeight");
@@ -2194,7 +1471,7 @@ class Y {
2194
1471
  ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
2195
1472
  });
2196
1473
  this.canvas = e, this.host = i;
2197
- const s = ot(o);
1474
+ const s = ke(o);
2198
1475
  this.tileWidth = s.tileWidth, this.tileHeight = s.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = s.renderer, this.maxViewportScale = s.maxViewportScale;
2199
1476
  const h = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
2200
1477
  this.patternContent.setAttribute("transform", h), this.pattern.appendChild(this.patternContent);
@@ -2209,7 +1486,7 @@ class Y {
2209
1486
  o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
2210
1487
  }
2211
1488
  }
2212
- const rt = (t) => {
1489
+ const ze = (t) => {
2213
1490
  var d, c, a;
2214
1491
  const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
2215
1492
  }, h = () => {
@@ -2230,18 +1507,17 @@ class H {
2230
1507
  constructor(e, o, i, s, h, n) {
2231
1508
  r(this, "config");
2232
1509
  r(this, "overlayCanvas");
2233
- r(this, "ports", new de());
2234
1510
  r(this, "staticOverlayPortId", "static");
2235
1511
  r(this, "draggingOverlayPortId", "dragging");
2236
1512
  r(this, "staticPortId", null);
2237
1513
  r(this, "isDirect", !0);
2238
1514
  r(this, "onAfterPortMarked", (e) => {
2239
1515
  const o = this.canvas.graph.getPort(e);
2240
- this.ports.hasSingle(o.element) || this.hookPortEvents(o.element), this.ports.addRecord(o.element, e);
1516
+ this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.hookPortEvents(o.element);
2241
1517
  });
2242
1518
  r(this, "onBeforePortUnmarked", (e) => {
2243
1519
  const o = this.canvas.graph.getPort(e);
2244
- this.ports.removeByMulti(e), this.ports.hasSingle(o.element) || this.unhookPortEvents(o.element);
1520
+ this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.unhookPortEvents(o.element);
2245
1521
  });
2246
1522
  r(this, "onPortMouseDown", (e) => {
2247
1523
  const o = e.currentTarget;
@@ -2252,7 +1528,7 @@ class H {
2252
1528
  }));
2253
1529
  });
2254
1530
  r(this, "onWindowMouseMove", (e) => {
2255
- if (!M(
1531
+ if (!D(
2256
1532
  this.window,
2257
1533
  this.overlayLayer,
2258
1534
  e.clientX,
@@ -2282,7 +1558,7 @@ class H {
2282
1558
  });
2283
1559
  r(this, "onWindowTouchMove", (e) => {
2284
1560
  const o = e.touches[0];
2285
- if (!M(
1561
+ if (!D(
2286
1562
  this.window,
2287
1563
  this.overlayLayer,
2288
1564
  o.clientX,
@@ -2298,9 +1574,10 @@ class H {
2298
1574
  this.tryCreateConnection({ x: o.clientX, y: o.clientY }), this.stopTouchDrag();
2299
1575
  });
2300
1576
  r(this, "onBeforeClear", () => {
2301
- this.ports.forEachSingle((e) => {
2302
- this.unhookPortEvents(e);
2303
- }), this.ports.clear();
1577
+ this.canvas.graph.getAllPortIds().forEach((e) => {
1578
+ const o = this.canvas.graph.getPort(e);
1579
+ this.unhookPortEvents(o.element);
1580
+ });
2304
1581
  });
2305
1582
  r(this, "onBeforeDestroy", () => {
2306
1583
  this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
@@ -2310,13 +1587,13 @@ class H {
2310
1587
  r(this, "onEdgeCreated", (e) => {
2311
1588
  this.config.onAfterEdgeCreated(e);
2312
1589
  });
2313
- this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = rt(n);
2314
- const d = new ce(), c = new ie(
1590
+ this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = ze(n);
1591
+ const d = new ce(), c = new ne(
2315
1592
  d,
2316
1593
  this.viewportStore,
2317
1594
  this.overlayLayer
2318
1595
  );
2319
- this.overlayCanvas = new he(
1596
+ this.overlayCanvas = new de(
2320
1597
  this.overlayLayer,
2321
1598
  d,
2322
1599
  this.viewportStore,
@@ -2335,26 +1612,26 @@ class H {
2335
1612
  );
2336
1613
  }
2337
1614
  grabPort(e, o) {
2338
- const i = this.ports.getMultiBySingle(e)[0], s = this.canvas.graph.getPort(i);
1615
+ const i = this.canvas.graph.getElementPortsIds(e)[0], s = this.canvas.graph.getPort(i);
2339
1616
  this.staticPortId = i;
2340
- const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), g = N(l, {
1617
+ const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), w = N(l, {
2341
1618
  x: d - a.x,
2342
1619
  y: c - a.y
2343
- }), y = N(l, {
1620
+ }), v = N(l, {
2344
1621
  x: o.x - a.x,
2345
1622
  y: o.y - a.y
2346
- }), p = {
1623
+ }), A = {
2347
1624
  overlayId: this.staticOverlayPortId,
2348
- portCoords: g,
1625
+ portCoords: w,
2349
1626
  portDirection: s.direction
2350
- }, f = {
1627
+ }, y = {
2351
1628
  overlayId: this.draggingOverlayPortId,
2352
- portCoords: y,
1629
+ portCoords: v,
2353
1630
  portDirection: this.config.dragPortDirection
2354
1631
  };
2355
1632
  this.isDirect = h === "direct";
2356
- const A = this.isDirect ? p : f, E = this.isDirect ? f : p;
2357
- this.createOverlayGraph(A, E);
1633
+ const E = this.isDirect ? A : y, p = this.isDirect ? y : A;
1634
+ this.createOverlayGraph(E, p);
2358
1635
  }
2359
1636
  hookPortEvents(e) {
2360
1637
  e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2363,102 +1640,960 @@ class H {
2363
1640
  passive: !0
2364
1641
  });
2365
1642
  }
2366
- unhookPortEvents(e) {
2367
- e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
1643
+ unhookPortEvents(e) {
1644
+ e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
1645
+ }
1646
+ stopMouseDrag() {
1647
+ this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
1648
+ }
1649
+ stopTouchDrag() {
1650
+ this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
1651
+ }
1652
+ resetDragState() {
1653
+ this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
1654
+ }
1655
+ createOverlayGraph(e, o) {
1656
+ const i = this.createAddNodeRequest(e);
1657
+ this.overlayCanvas.addNode(i);
1658
+ const s = this.createAddNodeRequest(o);
1659
+ this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
1660
+ from: e.overlayId,
1661
+ to: o.overlayId
1662
+ });
1663
+ }
1664
+ createAddNodeRequest(e) {
1665
+ const o = document.createElement("div");
1666
+ return {
1667
+ id: e.overlayId,
1668
+ element: o,
1669
+ x: e.portCoords.x,
1670
+ y: e.portCoords.y,
1671
+ ports: [
1672
+ {
1673
+ id: e.overlayId,
1674
+ element: o,
1675
+ direction: e.portDirection
1676
+ }
1677
+ ]
1678
+ };
1679
+ }
1680
+ tryCreateConnection(e) {
1681
+ const o = this.findPortAtPoint(e);
1682
+ if (o === null) {
1683
+ this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
1684
+ return;
1685
+ }
1686
+ const i = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: i, to: s }, n = this.config.connectionPreprocessor(h);
1687
+ n !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(h);
1688
+ }
1689
+ moveDraggingNode(e) {
1690
+ const o = this.overlayLayer.getBoundingClientRect(), i = {
1691
+ x: e.x - o.x,
1692
+ y: e.y - o.y
1693
+ }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
1694
+ this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
1695
+ x: h.x,
1696
+ y: h.y
1697
+ });
1698
+ }
1699
+ findPortAtPoint(e) {
1700
+ const o = document.elementsFromPoint(e.x, e.y);
1701
+ for (const i of o) {
1702
+ const s = this.findPortAtElement(i);
1703
+ if (s !== null)
1704
+ return s;
1705
+ }
1706
+ return null;
1707
+ }
1708
+ findPortAtElement(e) {
1709
+ let o = e, i = null;
1710
+ for (; o !== null && (i = this.canvas.graph.getElementPortsIds(o)[0] ?? null, i === null); )
1711
+ o = o.parentElement;
1712
+ return i;
1713
+ }
1714
+ isPortConnectionAllowed(e) {
1715
+ const o = this.canvas.graph.getElementPortsIds(e)[0];
1716
+ return this.config.connectionTypeResolver(o) !== null;
1717
+ }
1718
+ }
1719
+ const Xe = () => {
1720
+ const t = document.createElement("div");
1721
+ return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
1722
+ }, $ = () => {
1723
+ const t = document.createElement("div");
1724
+ return t.style.position = "absolute", t.style.inset = "0", t;
1725
+ };
1726
+ class Ye {
1727
+ constructor(e) {
1728
+ r(this, "background", $());
1729
+ r(this, "main", $());
1730
+ r(this, "overlay", $());
1731
+ r(this, "host", Xe());
1732
+ this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
1733
+ }
1734
+ destroy() {
1735
+ this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
1736
+ }
1737
+ }
1738
+ const He = (t, e) => ({
1739
+ x: t / 2,
1740
+ y: e / 2
1741
+ }), F = (t) => () => t, te = F(0), je = () => {
1742
+ let t = 0;
1743
+ return () => t++;
1744
+ }, Ge = (t, e) => {
1745
+ let o = te, i = te;
1746
+ const s = je();
1747
+ return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = F(t)), typeof e == "number" && (i = F(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
1748
+ nodesPriorityFn: o,
1749
+ edgesPriorityFn: i
1750
+ };
1751
+ }, f = (t, e, o) => ({
1752
+ x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
1753
+ y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
1754
+ }), g = {
1755
+ x: 0,
1756
+ y: 0
1757
+ }, Ze = (t) => {
1758
+ const e = f(
1759
+ { x: t.arrowLength, y: g.y },
1760
+ t.fromVector,
1761
+ g
1762
+ ), o = f(
1763
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1764
+ t.toVector,
1765
+ t.to
1766
+ ), i = {
1767
+ x: e.x + t.fromVector.x * t.curvature,
1768
+ y: e.y + t.fromVector.y * t.curvature
1769
+ }, s = {
1770
+ x: o.x - t.toVector.x * t.curvature,
1771
+ y: o.y - t.toVector.y * t.curvature
1772
+ }, h = `M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${g.x} ${g.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
1773
+ return `${n}${h}${d}`;
1774
+ }, Je = (t) => {
1775
+ const e = t.hasSourceArrow ? f(
1776
+ { x: t.arrowLength, y: g.y },
1777
+ t.fromVector,
1778
+ g
1779
+ ) : g, o = t.hasTargetArrow ? f(
1780
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1781
+ t.toVector,
1782
+ t.to
1783
+ ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = f(
1784
+ { x: i, y: g.y },
1785
+ t.fromVector,
1786
+ g
1787
+ ), a = {
1788
+ x: c.x + n,
1789
+ y: c.y + d
1790
+ }, l = f(
1791
+ { x: t.to.x - i, y: t.to.y },
1792
+ t.toVector,
1793
+ t.to
1794
+ ), w = {
1795
+ x: l.x + n,
1796
+ y: l.y + d
1797
+ }, v = { x: (a.x + w.x) / 2, y: (a.y + w.y) / 2 }, A = {
1798
+ x: c.x + t.curvature * t.fromVector.x,
1799
+ y: c.y + t.curvature * t.fromVector.y
1800
+ }, y = {
1801
+ x: l.x - t.curvature * t.toVector.x,
1802
+ y: l.y - t.curvature * t.toVector.y
1803
+ }, E = {
1804
+ x: c.x + n,
1805
+ y: c.y + d
1806
+ }, p = {
1807
+ x: l.x + n,
1808
+ y: l.y + d
1809
+ };
1810
+ return [
1811
+ `M ${e.x} ${e.y}`,
1812
+ `L ${c.x} ${c.y}`,
1813
+ `C ${A.x} ${A.y} ${E.x} ${E.y} ${v.x} ${v.y}`,
1814
+ `C ${p.x} ${p.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
1815
+ `L ${o.x} ${o.y}`
1816
+ ].join(" ");
1817
+ }, V = (t, e) => {
1818
+ const o = [];
1819
+ if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
1820
+ const i = t.length - 1;
1821
+ let s = 0, h = 0, n = 0;
1822
+ t.forEach((d, c) => {
1823
+ let a = 0, l = 0, w = 0;
1824
+ const v = c > 0, A = c < i, y = v && A;
1825
+ if (v && (a = -s, l = -h, w = n), A) {
1826
+ const L = t[c + 1];
1827
+ s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
1828
+ }
1829
+ const p = n !== 0 ? Math.min((y ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = y ? { x: d.x + s * p, y: d.y + h * p } : d, P = w !== 0 ? Math.min((y ? e : 0) / w, c > 1 ? 0.5 : 1) : 0, M = y ? { x: d.x + a * P, y: d.y + l * P } : d;
1830
+ c > 0 && o.push(`L ${M.x} ${M.y}`), y && o.push(
1831
+ `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
1832
+ );
1833
+ });
1834
+ }
1835
+ return o.join(" ");
1836
+ }, Ke = (t) => {
1837
+ const e = t.hasSourceArrow ? f(
1838
+ { x: t.arrowLength, y: g.y },
1839
+ t.fromVector,
1840
+ g
1841
+ ) : g, o = t.hasTargetArrow ? f(
1842
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1843
+ t.toVector,
1844
+ t.to
1845
+ ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
1846
+ { x: s, y: g.y },
1847
+ t.fromVector,
1848
+ g
1849
+ ), n = f(
1850
+ { x: t.to.x - s, y: t.to.y },
1851
+ t.toVector,
1852
+ t.to
1853
+ ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
1854
+ x: t.flipX > 0 ? d : -i,
1855
+ y: h.y
1856
+ }, l = { x: a.x, y: c }, w = {
1857
+ x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
1858
+ y: n.y
1859
+ }, v = { x: w.x, y: c };
1860
+ return V(
1861
+ [e, h, a, l, v, w, n, o],
1862
+ t.roundness
1863
+ );
1864
+ }, j = (t) => {
1865
+ const e = t.hasSourceArrow ? f(
1866
+ { x: t.arrowLength, y: g.y },
1867
+ t.fromVector,
1868
+ g
1869
+ ) : g, o = t.hasTargetArrow ? f(
1870
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1871
+ t.toVector,
1872
+ t.to
1873
+ ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
1874
+ { x: i, y: g.y },
1875
+ t.fromVector,
1876
+ g
1877
+ ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = f(
1878
+ { x: t.to.x - i, y: t.to.y },
1879
+ t.toVector,
1880
+ t.to
1881
+ ), w = { x: l.x + d, y: l.y + c };
1882
+ return V(
1883
+ [e, s, a, w, l, o],
1884
+ t.roundness
1885
+ );
1886
+ }, Qe = (t) => {
1887
+ const e = t.hasSourceArrow ? f(
1888
+ { x: t.arrowLength, y: g.y },
1889
+ t.fromVector,
1890
+ g
1891
+ ) : g, o = t.hasTargetArrow ? f(
1892
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1893
+ t.toVector,
1894
+ t.to
1895
+ ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
1896
+ { x: i, y: g.y },
1897
+ t.fromVector,
1898
+ g
1899
+ ), h = f(
1900
+ { x: t.to.x - i, y: t.to.y },
1901
+ t.toVector,
1902
+ t.to
1903
+ );
1904
+ return V([e, s, h, o], t.roundness);
1905
+ }, _e = (t) => {
1906
+ const e = t.hasSourceArrow ? f(
1907
+ { x: t.arrowLength, y: g.y },
1908
+ t.fromVector,
1909
+ g
1910
+ ) : g, o = t.hasTargetArrow ? f(
1911
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1912
+ t.toVector,
1913
+ t.to
1914
+ ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
1915
+ { x: s, y: g.y },
1916
+ t.fromVector,
1917
+ g
1918
+ ), n = f(
1919
+ { x: t.to.x - s, y: t.to.y },
1920
+ t.toVector,
1921
+ t.to
1922
+ ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
1923
+ x: h.x,
1924
+ y: t.flipY > 0 ? d : -i
1925
+ }, l = { x: c, y: a.y }, w = {
1926
+ x: n.x,
1927
+ y: t.flipY > 0 ? t.to.y - d : t.to.y + i
1928
+ }, v = { x: c, y: w.y };
1929
+ return V(
1930
+ [e, h, a, l, v, w, n, o],
1931
+ t.roundness
1932
+ );
1933
+ }, G = (t) => {
1934
+ const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
1935
+ { x: t.arrowLength, y: g.y },
1936
+ { x: i, y: g.y },
1937
+ { x: i, y: t.side },
1938
+ { x: s, y: t.side },
1939
+ { x: s, y: -t.side },
1940
+ { x: i, y: -t.side },
1941
+ { x: i, y: g.y },
1942
+ { x: t.arrowLength, y: g.y }
1943
+ ].map(
1944
+ (c) => f(c, t.fromVector, g)
1945
+ ), d = `M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;
1946
+ return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${V(n, t.roundness)}`;
1947
+ }, qe = (t) => {
1948
+ const e = t.smallRadius, o = t.radius, i = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + i * (1 - o / s), n = e * o / s, c = [
1949
+ { x: t.arrowLength, y: g.y },
1950
+ { x: h, y: n },
1951
+ { x: h, y: -n }
1952
+ ].map(
1953
+ (w) => f(w, t.fromVector, g)
1954
+ ), a = [
1955
+ `M ${c[0].x} ${c[0].y}`,
1956
+ `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
1957
+ `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
1958
+ `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
1959
+ ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
1960
+ return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
1961
+ }, ae = (t, e) => {
1962
+ t.style.transform = `translate(${e.x}px, ${e.y}px)`, t.style.width = `${Math.max(e.width, 1)}px`, t.style.height = `${Math.max(e.height, 1)}px`;
1963
+ }, u = Object.freeze({
1964
+ color: "#777777",
1965
+ width: 1,
1966
+ arrowLength: 15,
1967
+ arrowWidth: 4,
1968
+ arrowOffset: 15,
1969
+ hasSourceArrow: !1,
1970
+ hasTargetArrow: !1,
1971
+ cycleRadius: 30,
1972
+ cycleSquareSide: 30,
1973
+ roundness: 10,
1974
+ detourDistance: 100,
1975
+ detourDirection: -Math.PI / 2,
1976
+ detourDirectionVertical: 0,
1977
+ smallCycleRadius: 15,
1978
+ curvature: 90,
1979
+ interactiveWidth: 10,
1980
+ preOffset: 0
1981
+ }), O = (t, e, o, i) => {
1982
+ const h = [
1983
+ g,
1984
+ { x: o, y: i },
1985
+ { x: o, y: -i }
1986
+ ].map((a) => f(a, t, g)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
1987
+ return `${n} ${d} ${c} Z`;
1988
+ }, B = (t) => {
1989
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1990
+ return e.setAttribute("fill", t), e;
1991
+ }, le = () => {
1992
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
1993
+ return t.style.transformOrigin = "50% 50%", t;
1994
+ }, ue = (t, e) => {
1995
+ const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
1996
+ return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
1997
+ }, ge = (t, e) => {
1998
+ const o = {
1999
+ x: t.x + t.width / 2,
2000
+ y: t.y + t.height / 2
2001
+ }, i = {
2002
+ x: e.x + e.width / 2,
2003
+ y: e.y + e.height / 2
2004
+ }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
2005
+ return {
2006
+ x: s,
2007
+ y: h,
2008
+ width: n,
2009
+ height: d,
2010
+ flipX: c,
2011
+ flipY: a
2012
+ };
2013
+ }, we = () => {
2014
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2015
+ return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
2016
+ }, oe = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
2017
+ class C {
2018
+ constructor(e) {
2019
+ r(this, "svg", we());
2020
+ r(this, "group", le());
2021
+ r(this, "line");
2022
+ r(this, "sourceArrow", null);
2023
+ r(this, "targetArrow", null);
2024
+ this.params = e, this.svg.appendChild(this.group), this.line = ue(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(e.color), this.group.appendChild(this.targetArrow));
2025
+ }
2026
+ render(e) {
2027
+ const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
2028
+ e.from,
2029
+ e.to
2030
+ );
2031
+ ae(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
2032
+ const c = oe(
2033
+ e.from.direction,
2034
+ n,
2035
+ d
2036
+ ), a = oe(
2037
+ e.to.direction,
2038
+ n,
2039
+ d
2040
+ ), l = {
2041
+ x: s,
2042
+ y: h
2043
+ };
2044
+ let w = a, v = -this.params.arrowLength, A;
2045
+ e.from.portId === e.to.portId ? (A = this.params.createCyclePath, w = c, v = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? A = this.params.createDetourPath : A = this.params.createLinePath;
2046
+ const y = A(
2047
+ c,
2048
+ a,
2049
+ l,
2050
+ n,
2051
+ d
2052
+ );
2053
+ if (this.line.setAttribute("d", y), this.sourceArrow) {
2054
+ const E = O(
2055
+ c,
2056
+ g,
2057
+ this.params.arrowLength,
2058
+ this.params.arrowWidth
2059
+ );
2060
+ this.sourceArrow.setAttribute("d", E);
2061
+ }
2062
+ if (this.targetArrow) {
2063
+ const E = O(
2064
+ w,
2065
+ l,
2066
+ v,
2067
+ this.params.arrowWidth
2068
+ );
2069
+ this.targetArrow.setAttribute("d", E);
2070
+ }
2368
2071
  }
2369
- stopMouseDrag() {
2370
- this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
2072
+ }
2073
+ class et {
2074
+ constructor(e) {
2075
+ r(this, "svg");
2076
+ r(this, "group");
2077
+ r(this, "line");
2078
+ r(this, "sourceArrow");
2079
+ r(this, "targetArrow");
2080
+ r(this, "arrowLength");
2081
+ r(this, "arrowWidth");
2082
+ r(this, "curvature");
2083
+ r(this, "portCycleRadius");
2084
+ r(this, "portCycleSmallRadius");
2085
+ r(this, "detourDirection");
2086
+ r(this, "detourDistance");
2087
+ r(this, "hasSourceArrow");
2088
+ r(this, "hasTargetArrow");
2089
+ r(this, "lineShape");
2090
+ r(this, "createCyclePath", (e) => qe({
2091
+ fromVector: e,
2092
+ radius: this.portCycleRadius,
2093
+ smallRadius: this.portCycleSmallRadius,
2094
+ arrowLength: this.arrowLength,
2095
+ hasSourceArrow: this.hasSourceArrow,
2096
+ hasTargetArrow: this.hasTargetArrow
2097
+ }));
2098
+ r(this, "createDetourPath", (e, o, i, s, h) => Je({
2099
+ to: i,
2100
+ fromVector: e,
2101
+ toVector: o,
2102
+ flipX: s,
2103
+ flipY: h,
2104
+ arrowLength: this.arrowLength,
2105
+ detourDirection: this.detourDirection,
2106
+ detourDistance: this.detourDistance,
2107
+ curvature: this.curvature,
2108
+ hasSourceArrow: this.hasSourceArrow,
2109
+ hasTargetArrow: this.hasTargetArrow
2110
+ }));
2111
+ r(this, "createLinePath", (e, o, i) => Ze({
2112
+ to: i,
2113
+ fromVector: e,
2114
+ toVector: o,
2115
+ arrowLength: this.arrowLength,
2116
+ curvature: this.curvature,
2117
+ hasSourceArrow: this.hasSourceArrow,
2118
+ hasTargetArrow: this.hasTargetArrow
2119
+ }));
2120
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new C({
2121
+ color: (e == null ? void 0 : e.color) ?? u.color,
2122
+ width: (e == null ? void 0 : e.width) ?? u.width,
2123
+ arrowLength: this.arrowLength,
2124
+ arrowWidth: this.arrowWidth,
2125
+ hasSourceArrow: this.hasSourceArrow,
2126
+ hasTargetArrow: this.hasTargetArrow,
2127
+ createCyclePath: this.createCyclePath,
2128
+ createDetourPath: this.createDetourPath,
2129
+ createLinePath: this.createLinePath
2130
+ }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
2371
2131
  }
2372
- stopTouchDrag() {
2373
- this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2132
+ render(e) {
2133
+ this.lineShape.render(e);
2374
2134
  }
2375
- resetDragState() {
2376
- this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
2135
+ }
2136
+ class tt {
2137
+ constructor(e) {
2138
+ r(this, "svg");
2139
+ r(this, "group");
2140
+ r(this, "line");
2141
+ r(this, "sourceArrow");
2142
+ r(this, "targetArrow");
2143
+ r(this, "arrowLength");
2144
+ r(this, "arrowWidth");
2145
+ r(this, "arrowOffset");
2146
+ r(this, "roundness");
2147
+ r(this, "cycleSquareSide");
2148
+ r(this, "detourDirection");
2149
+ r(this, "detourDistance");
2150
+ r(this, "hasSourceArrow");
2151
+ r(this, "hasTargetArrow");
2152
+ r(this, "lineShape");
2153
+ r(this, "createCyclePath", (e) => G({
2154
+ fromVector: e,
2155
+ arrowLength: this.arrowLength,
2156
+ side: this.cycleSquareSide,
2157
+ arrowOffset: this.arrowOffset,
2158
+ roundness: this.roundness,
2159
+ hasSourceArrow: this.hasSourceArrow,
2160
+ hasTargetArrow: this.hasTargetArrow
2161
+ }));
2162
+ r(this, "createDetourPath", (e, o, i, s, h) => j({
2163
+ to: i,
2164
+ fromVector: e,
2165
+ toVector: o,
2166
+ flipX: s,
2167
+ flipY: h,
2168
+ arrowLength: this.arrowLength,
2169
+ arrowOffset: this.arrowOffset,
2170
+ roundness: this.roundness,
2171
+ detourDirection: this.detourDirection,
2172
+ detourDistance: this.detourDistance,
2173
+ hasSourceArrow: this.hasSourceArrow,
2174
+ hasTargetArrow: this.hasTargetArrow
2175
+ }));
2176
+ r(this, "createLinePath", (e, o, i, s) => Ke({
2177
+ to: i,
2178
+ fromVector: e,
2179
+ toVector: o,
2180
+ flipX: s,
2181
+ arrowLength: this.arrowLength,
2182
+ arrowOffset: this.arrowOffset,
2183
+ roundness: this.roundness,
2184
+ hasSourceArrow: this.hasSourceArrow,
2185
+ hasTargetArrow: this.hasTargetArrow
2186
+ }));
2187
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
2188
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
2189
+ this.roundness = Math.min(
2190
+ o,
2191
+ this.arrowOffset,
2192
+ this.cycleSquareSide / 2
2193
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new C({
2194
+ color: (e == null ? void 0 : e.color) ?? u.color,
2195
+ width: (e == null ? void 0 : e.width) ?? u.width,
2196
+ arrowLength: this.arrowLength,
2197
+ arrowWidth: this.arrowWidth,
2198
+ hasSourceArrow: this.hasSourceArrow,
2199
+ hasTargetArrow: this.hasTargetArrow,
2200
+ createCyclePath: this.createCyclePath,
2201
+ createDetourPath: this.createDetourPath,
2202
+ createLinePath: this.createLinePath
2203
+ }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
2377
2204
  }
2378
- createOverlayGraph(e, o) {
2379
- const i = this.createAddNodeRequest(e);
2380
- this.overlayCanvas.addNode(i);
2381
- const s = this.createAddNodeRequest(o);
2382
- this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
2383
- from: e.overlayId,
2384
- to: o.overlayId
2385
- });
2205
+ render(e) {
2206
+ this.lineShape.render(e);
2386
2207
  }
2387
- createAddNodeRequest(e) {
2388
- const o = document.createElement("div");
2389
- return {
2390
- id: e.overlayId,
2391
- element: o,
2392
- x: e.portCoords.x,
2393
- y: e.portCoords.y,
2394
- ports: [
2395
- {
2396
- id: e.overlayId,
2397
- element: o,
2398
- direction: e.portDirection
2399
- }
2400
- ]
2401
- };
2208
+ }
2209
+ class ot {
2210
+ constructor(e) {
2211
+ r(this, "svg");
2212
+ r(this, "group");
2213
+ r(this, "line");
2214
+ r(this, "sourceArrow");
2215
+ r(this, "targetArrow");
2216
+ r(this, "arrowLength");
2217
+ r(this, "arrowWidth");
2218
+ r(this, "arrowOffset");
2219
+ r(this, "roundness");
2220
+ r(this, "cycleSquareSide");
2221
+ r(this, "detourDirection");
2222
+ r(this, "detourDistance");
2223
+ r(this, "hasSourceArrow");
2224
+ r(this, "hasTargetArrow");
2225
+ r(this, "lineShape");
2226
+ r(this, "createCyclePath", (e) => G({
2227
+ fromVector: e,
2228
+ arrowLength: this.arrowLength,
2229
+ side: this.cycleSquareSide,
2230
+ arrowOffset: this.arrowOffset,
2231
+ roundness: this.roundness,
2232
+ hasSourceArrow: this.hasSourceArrow,
2233
+ hasTargetArrow: this.hasTargetArrow
2234
+ }));
2235
+ r(this, "createDetourPath", (e, o, i, s, h) => j({
2236
+ to: i,
2237
+ fromVector: e,
2238
+ toVector: o,
2239
+ flipX: s,
2240
+ flipY: h,
2241
+ arrowLength: this.arrowLength,
2242
+ arrowOffset: this.arrowOffset,
2243
+ roundness: this.roundness,
2244
+ detourDirection: this.detourDirection,
2245
+ detourDistance: this.detourDistance,
2246
+ hasSourceArrow: this.hasSourceArrow,
2247
+ hasTargetArrow: this.hasTargetArrow
2248
+ }));
2249
+ r(this, "createLinePath", (e, o, i) => Qe({
2250
+ to: i,
2251
+ fromVector: e,
2252
+ toVector: o,
2253
+ arrowLength: this.arrowLength,
2254
+ arrowOffset: this.arrowOffset,
2255
+ roundness: this.roundness,
2256
+ hasSourceArrow: this.hasSourceArrow,
2257
+ hasTargetArrow: this.hasTargetArrow
2258
+ }));
2259
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
2260
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
2261
+ this.roundness = Math.min(
2262
+ o,
2263
+ this.arrowOffset,
2264
+ this.cycleSquareSide / 2
2265
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new C({
2266
+ color: (e == null ? void 0 : e.color) ?? u.color,
2267
+ width: (e == null ? void 0 : e.width) ?? u.width,
2268
+ arrowLength: this.arrowLength,
2269
+ arrowWidth: this.arrowWidth,
2270
+ hasSourceArrow: this.hasSourceArrow,
2271
+ hasTargetArrow: this.hasTargetArrow,
2272
+ createCyclePath: this.createCyclePath,
2273
+ createDetourPath: this.createDetourPath,
2274
+ createLinePath: this.createLinePath
2275
+ }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
2402
2276
  }
2403
- tryCreateConnection(e) {
2404
- const o = this.findPortAtPoint(e);
2405
- if (o === null) {
2406
- this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
2407
- return;
2408
- }
2409
- const i = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: i, to: s }, n = this.config.connectionPreprocessor(h);
2410
- n !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(h);
2277
+ render(e) {
2278
+ this.lineShape.render(e);
2411
2279
  }
2412
- moveDraggingNode(e) {
2413
- const o = this.overlayLayer.getBoundingClientRect(), i = {
2414
- x: e.x - o.x,
2415
- y: e.y - o.y
2416
- }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
2417
- this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
2418
- x: h.x,
2419
- y: h.y
2420
- });
2280
+ }
2281
+ class rt {
2282
+ constructor(e) {
2283
+ r(this, "svg");
2284
+ r(this, "group");
2285
+ r(this, "line");
2286
+ r(this, "sourceArrow");
2287
+ r(this, "targetArrow");
2288
+ r(this, "arrowLength");
2289
+ r(this, "arrowWidth");
2290
+ r(this, "arrowOffset");
2291
+ r(this, "roundness");
2292
+ r(this, "cycleSquareSide");
2293
+ r(this, "detourDirection");
2294
+ r(this, "detourDistance");
2295
+ r(this, "hasSourceArrow");
2296
+ r(this, "hasTargetArrow");
2297
+ r(this, "lineShape");
2298
+ r(this, "createCyclePath", (e) => G({
2299
+ fromVector: e,
2300
+ arrowLength: this.arrowLength,
2301
+ side: this.cycleSquareSide,
2302
+ arrowOffset: this.arrowOffset,
2303
+ roundness: this.roundness,
2304
+ hasSourceArrow: this.hasSourceArrow,
2305
+ hasTargetArrow: this.hasTargetArrow
2306
+ }));
2307
+ r(this, "createDetourPath", (e, o, i, s, h) => j({
2308
+ to: i,
2309
+ fromVector: e,
2310
+ toVector: o,
2311
+ flipX: s,
2312
+ flipY: h,
2313
+ arrowLength: this.arrowLength,
2314
+ arrowOffset: this.arrowOffset,
2315
+ roundness: this.roundness,
2316
+ detourDirection: this.detourDirection,
2317
+ detourDistance: this.detourDistance,
2318
+ hasSourceArrow: this.hasSourceArrow,
2319
+ hasTargetArrow: this.hasTargetArrow
2320
+ }));
2321
+ r(this, "createLinePath", (e, o, i, s, h) => _e({
2322
+ to: i,
2323
+ fromVector: e,
2324
+ toVector: o,
2325
+ flipY: h,
2326
+ arrowLength: this.arrowLength,
2327
+ arrowOffset: this.arrowOffset,
2328
+ roundness: this.roundness,
2329
+ hasSourceArrow: this.hasSourceArrow,
2330
+ hasTargetArrow: this.hasTargetArrow
2331
+ }));
2332
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
2333
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
2334
+ this.roundness = Math.min(
2335
+ o,
2336
+ this.arrowOffset,
2337
+ this.cycleSquareSide / 2
2338
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new C({
2339
+ color: (e == null ? void 0 : e.color) ?? u.color,
2340
+ width: (e == null ? void 0 : e.width) ?? u.width,
2341
+ arrowLength: this.arrowLength,
2342
+ arrowWidth: this.arrowWidth,
2343
+ hasSourceArrow: this.hasSourceArrow,
2344
+ hasTargetArrow: this.hasTargetArrow,
2345
+ createCyclePath: this.createCyclePath,
2346
+ createDetourPath: this.createDetourPath,
2347
+ createLinePath: this.createLinePath
2348
+ }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
2421
2349
  }
2422
- findPortAtPoint(e) {
2423
- const o = document.elementsFromPoint(e.x, e.y);
2424
- for (const i of o) {
2425
- const s = this.findPortAtElement(i);
2426
- if (s !== null)
2427
- return s;
2428
- }
2429
- return null;
2350
+ render(e) {
2351
+ this.lineShape.render(e);
2430
2352
  }
2431
- findPortAtElement(e) {
2432
- let o = e, i = null;
2433
- for (; o !== null && (i = this.ports.getMultiBySingle(o)[0] ?? null, i === null); )
2434
- o = o.parentElement;
2435
- return i;
2353
+ }
2354
+ const re = (t) => {
2355
+ if (t.diagonalDistance === 0)
2356
+ return "";
2357
+ const e = t.offset / t.diagonalDistance, o = t.flip * t.to.x, i = t.flip * t.to.y, s = {
2358
+ x: o * e + t.shift.x,
2359
+ y: i * e + t.shift.y
2360
+ }, h = {
2361
+ x: o / t.diagonalDistance,
2362
+ y: i / t.diagonalDistance
2363
+ };
2364
+ return O(
2365
+ h,
2366
+ s,
2367
+ t.arrowLength,
2368
+ t.arrowWidth
2369
+ );
2370
+ }, ie = (t) => {
2371
+ const e = t.hasArrow ? t.arrowLength : 0, o = t.offset + e, i = t.flip * o / t.diagonalDistance;
2372
+ return {
2373
+ x: t.to.x * i + t.shift.x,
2374
+ y: t.to.y * i + t.shift.y
2375
+ };
2376
+ }, it = (t) => {
2377
+ const e = ie({
2378
+ diagonalDistance: t.diagonalDistance,
2379
+ to: t.to,
2380
+ offset: t.sourceOffset,
2381
+ hasArrow: t.hasSourceArrow,
2382
+ flip: 1,
2383
+ shift: g,
2384
+ arrowLength: t.arrowLength
2385
+ }), o = ie({
2386
+ diagonalDistance: t.diagonalDistance,
2387
+ to: t.to,
2388
+ offset: t.targetOffset,
2389
+ hasArrow: t.hasTargetArrow,
2390
+ flip: -1,
2391
+ shift: t.to,
2392
+ arrowLength: t.arrowLength
2393
+ });
2394
+ return `M ${e.x} ${e.y} L ${o.x} ${o.y}`;
2395
+ };
2396
+ class st {
2397
+ constructor(e) {
2398
+ r(this, "svg", we());
2399
+ r(this, "group", le());
2400
+ r(this, "line");
2401
+ r(this, "sourceArrow", null);
2402
+ r(this, "targetArrow", null);
2403
+ r(this, "color");
2404
+ r(this, "width");
2405
+ r(this, "arrowLength");
2406
+ r(this, "arrowWidth");
2407
+ r(this, "sourceOffset");
2408
+ r(this, "targetOffset");
2409
+ this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg.appendChild(this.group), this.line = ue(this.color, this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(this.color), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(this.color), this.group.appendChild(this.targetArrow));
2436
2410
  }
2437
- isPortConnectionAllowed(e) {
2438
- const o = this.ports.getMultiBySingle(e)[0];
2439
- return this.config.connectionTypeResolver(o) !== null;
2411
+ render(e) {
2412
+ const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
2413
+ e.from,
2414
+ e.to
2415
+ );
2416
+ ae(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
2417
+ const c = Math.sqrt(s * s + h * h), a = { x: s, y: h };
2418
+ if (c > 0) {
2419
+ const l = it({
2420
+ diagonalDistance: c,
2421
+ to: a,
2422
+ sourceOffset: this.sourceOffset,
2423
+ targetOffset: this.targetOffset,
2424
+ hasSourceArrow: this.sourceArrow !== null,
2425
+ hasTargetArrow: this.targetArrow !== null,
2426
+ arrowLength: this.arrowLength
2427
+ });
2428
+ this.line.setAttribute("d", l);
2429
+ } else
2430
+ this.line.setAttribute("d", "");
2431
+ if (this.sourceArrow) {
2432
+ const l = re({
2433
+ diagonalDistance: c,
2434
+ to: a,
2435
+ offset: this.sourceOffset,
2436
+ flip: 1,
2437
+ shift: g,
2438
+ arrowWidth: this.arrowWidth,
2439
+ arrowLength: this.arrowLength
2440
+ });
2441
+ this.sourceArrow.setAttribute("d", l);
2442
+ }
2443
+ if (this.targetArrow) {
2444
+ const l = re({
2445
+ diagonalDistance: c,
2446
+ to: a,
2447
+ offset: this.targetOffset,
2448
+ flip: -1,
2449
+ shift: a,
2450
+ arrowWidth: this.arrowWidth,
2451
+ arrowLength: this.arrowLength
2452
+ });
2453
+ this.targetArrow.setAttribute("d", l);
2454
+ }
2440
2455
  }
2441
2456
  }
2442
- const it = () => {
2443
- const t = document.createElement("div");
2444
- return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
2445
- }, W = () => {
2446
- const t = document.createElement("div");
2447
- return t.style.position = "absolute", t.style.inset = "0", t;
2457
+ const nt = () => {
2458
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
2459
+ return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
2460
+ }, ht = (t) => {
2461
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
2462
+ return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
2463
+ }, se = (t) => {
2464
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
2465
+ return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
2448
2466
  };
2449
- class st {
2467
+ class dt extends Error {
2450
2468
  constructor(e) {
2451
- r(this, "background", W());
2452
- r(this, "main", W());
2453
- r(this, "overlay", W());
2454
- r(this, "host", it());
2455
- this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
2469
+ super(e), this.name = "InteractiveEdgeError";
2456
2470
  }
2457
- destroy() {
2458
- this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
2471
+ }
2472
+ class fe {
2473
+ constructor(e, o) {
2474
+ r(this, "svg");
2475
+ r(this, "group");
2476
+ r(this, "line");
2477
+ r(this, "sourceArrow");
2478
+ r(this, "targetArrow");
2479
+ r(this, "handle", nt());
2480
+ r(this, "interactiveLine");
2481
+ r(this, "interactiveSourceArrow", null);
2482
+ r(this, "interactiveTargetArrow", null);
2483
+ if (this.structuredEdge = e, e instanceof fe)
2484
+ throw new dt(
2485
+ "interactive edge can be configured only once"
2486
+ );
2487
+ this.svg = this.structuredEdge.svg, this.group = this.structuredEdge.group, this.line = this.structuredEdge.line, this.sourceArrow = this.structuredEdge.sourceArrow, this.targetArrow = this.structuredEdge.targetArrow;
2488
+ const i = (o == null ? void 0 : o.width) ?? u.interactiveWidth;
2489
+ this.interactiveLine = ht(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = se(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = se(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
2490
+ }
2491
+ render(e) {
2492
+ this.structuredEdge.render(e);
2493
+ const o = this.line.getAttribute("d");
2494
+ if (this.interactiveLine.setAttribute("d", o), this.sourceArrow) {
2495
+ const i = this.sourceArrow.getAttribute("d");
2496
+ this.interactiveSourceArrow.setAttribute("d", i);
2497
+ }
2498
+ if (this.targetArrow) {
2499
+ const i = this.targetArrow.getAttribute("d");
2500
+ this.interactiveTargetArrow.setAttribute("d", i);
2501
+ }
2459
2502
  }
2460
2503
  }
2461
- class ht {
2504
+ const ct = (t) => {
2505
+ if (typeof t == "function")
2506
+ return t;
2507
+ switch (t == null ? void 0 : t.type) {
2508
+ case "straight":
2509
+ return () => new ot({
2510
+ color: t.color,
2511
+ width: t.width,
2512
+ arrowLength: t.arrowLength,
2513
+ arrowWidth: t.arrowWidth,
2514
+ arrowOffset: t.arrowOffset,
2515
+ hasSourceArrow: t.hasSourceArrow,
2516
+ hasTargetArrow: t.hasTargetArrow,
2517
+ cycleSquareSide: t.cycleSquareSide,
2518
+ roundness: t.roundness,
2519
+ detourDistance: t.detourDistance,
2520
+ detourDirection: t.detourDirection
2521
+ });
2522
+ case "horizontal":
2523
+ return () => new tt({
2524
+ color: t.color,
2525
+ width: t.width,
2526
+ arrowLength: t.arrowLength,
2527
+ arrowWidth: t.arrowWidth,
2528
+ arrowOffset: t.arrowOffset,
2529
+ hasSourceArrow: t.hasSourceArrow,
2530
+ hasTargetArrow: t.hasTargetArrow,
2531
+ cycleSquareSide: t.cycleSquareSide,
2532
+ roundness: t.roundness,
2533
+ detourDistance: t.detourDistance,
2534
+ detourDirection: t.detourDirection
2535
+ });
2536
+ case "vertical":
2537
+ return () => new rt({
2538
+ color: t.color,
2539
+ width: t.width,
2540
+ arrowLength: t.arrowLength,
2541
+ arrowWidth: t.arrowWidth,
2542
+ arrowOffset: t.arrowOffset,
2543
+ hasSourceArrow: t.hasSourceArrow,
2544
+ hasTargetArrow: t.hasTargetArrow,
2545
+ cycleSquareSide: t.cycleSquareSide,
2546
+ roundness: t.roundness,
2547
+ detourDistance: t.detourDistance,
2548
+ detourDirection: t.detourDirection
2549
+ });
2550
+ case "direct":
2551
+ return () => new st({
2552
+ color: t.color,
2553
+ width: t.width,
2554
+ arrowLength: t.arrowLength,
2555
+ arrowWidth: t.arrowWidth,
2556
+ hasSourceArrow: t.hasSourceArrow,
2557
+ hasTargetArrow: t.hasTargetArrow,
2558
+ sourceOffset: t.sourceOffset,
2559
+ targetOffset: t.targetOffset
2560
+ });
2561
+ default:
2562
+ return () => new et({
2563
+ color: t.color,
2564
+ width: t.width,
2565
+ arrowLength: t.arrowLength,
2566
+ arrowWidth: t.arrowWidth,
2567
+ hasSourceArrow: t.hasSourceArrow,
2568
+ hasTargetArrow: t.hasTargetArrow,
2569
+ cycleRadius: t.cycleRadius,
2570
+ smallCycleRadius: t.smallCycleRadius,
2571
+ curvature: t.curvature,
2572
+ detourDistance: t.detourDistance,
2573
+ detourDirection: t.detourDirection
2574
+ });
2575
+ }
2576
+ }, at = (t) => {
2577
+ var o, i, s, h, n;
2578
+ const e = Ge(
2579
+ (o = t.nodes) == null ? void 0 : o.priority,
2580
+ (i = t.edges) == null ? void 0 : i.priority
2581
+ );
2582
+ return {
2583
+ nodes: {
2584
+ centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? He,
2585
+ priorityFn: e.nodesPriorityFn
2586
+ },
2587
+ ports: {
2588
+ direction: ((h = t.ports) == null ? void 0 : h.direction) ?? 0
2589
+ },
2590
+ edges: {
2591
+ shapeFactory: ct(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
2592
+ priorityFn: e.edgesPriorityFn
2593
+ }
2594
+ };
2595
+ };
2596
+ class ut {
2462
2597
  constructor(e) {
2463
2598
  r(this, "element", null);
2464
2599
  r(this, "canvasDefaults", {});
@@ -2541,52 +2676,52 @@ class ht {
2541
2676
  "unable to build canvas when no attach element specified"
2542
2677
  );
2543
2678
  let e = this.boxRenderingTrigger;
2544
- this.virtualScrollConfig !== void 0 && e === void 0 && (e = new se());
2545
- const o = new ce(), i = new ze(), s = new st(this.element);
2546
- let h = new ie(
2679
+ this.virtualScrollConfig !== void 0 && e === void 0 && (e = new he());
2680
+ const o = new ce(), i = new me(), s = new Ye(this.element);
2681
+ let h = new ne(
2547
2682
  o,
2548
2683
  i,
2549
2684
  s.main
2550
2685
  );
2551
- e !== void 0 && (h = new ve(h, o, e));
2552
- const n = new he(
2686
+ e !== void 0 && (h = new Se(h, o, e));
2687
+ const n = at(this.canvasDefaults), d = new de(
2553
2688
  this.element,
2554
2689
  o,
2555
2690
  i,
2556
2691
  h,
2557
- this.canvasDefaults
2558
- ), d = () => {
2559
- s.destroy(), n.onBeforeDestroy.unsubscribe(d);
2692
+ n
2693
+ ), c = () => {
2694
+ s.destroy(), d.onBeforeDestroy.unsubscribe(c);
2560
2695
  };
2561
- return n.onBeforeDestroy.subscribe(d), this.hasBackground && Y.configure(
2562
- n,
2696
+ return d.onBeforeDestroy.subscribe(c), this.hasBackground && Y.configure(
2697
+ d,
2563
2698
  this.backgroundConfig,
2564
2699
  s.background
2565
- ), this.hasResizeReactiveNodes && z.configure(n), this.hasDraggableNode && O.configure(
2566
- n,
2700
+ ), this.hasResizeReactiveNodes && k.configure(d), this.hasDraggableNode && z.configure(
2701
+ d,
2567
2702
  s.main,
2568
2703
  this.window,
2569
2704
  this.dragConfig
2570
2705
  ), this.hasUserConnectablePorts && H.configure(
2571
- n,
2706
+ d,
2572
2707
  s.overlay,
2573
2708
  i,
2574
2709
  this.window,
2575
- this.canvasDefaults,
2710
+ n,
2576
2711
  this.connectablePortsConfig
2577
2712
  ), this.virtualScrollConfig !== void 0 ? X.configure(
2578
- n,
2713
+ d,
2579
2714
  s.main,
2580
2715
  this.window,
2581
2716
  this.transformConfig,
2582
2717
  e,
2583
2718
  this.virtualScrollConfig
2584
2719
  ) : this.hasTransformableViewport && U.configure(
2585
- n,
2720
+ d,
2586
2721
  s.main,
2587
2722
  this.window,
2588
2723
  this.transformConfig
2589
- ), this.reset(), n;
2724
+ ), this.reset(), d;
2590
2725
  }
2591
2726
  /**
2592
2727
  * @deprecated
@@ -2597,14 +2732,15 @@ class ht {
2597
2732
  }
2598
2733
  }
2599
2734
  export {
2600
- Re as BezierEdgeShape,
2601
- ht as CanvasBuilder,
2602
- se as EventSubject,
2603
- Be as HorizontalEdgeShape,
2735
+ et as BezierEdgeShape,
2736
+ ut as CanvasBuilder,
2737
+ st as DirectEdgeShape,
2738
+ he as EventSubject,
2739
+ tt as HorizontalEdgeShape,
2604
2740
  S as HtmlGraphError,
2605
- $e as InteractiveEdgeError,
2606
- ne as InteractiveEdgeShape,
2607
- I as LineEdgeShape,
2608
- Ie as StraightEdgeShape,
2609
- Ue as VerticalEdgeShape
2741
+ dt as InteractiveEdgeError,
2742
+ fe as InteractiveEdgeShape,
2743
+ C as LineEdgeShape,
2744
+ ot as StraightEdgeShape,
2745
+ rt as VerticalEdgeShape
2610
2746
  };