@html-graph/html-graph 3.15.0 → 3.17.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 (5) hide show
  1. package/README.md +1 -1
  2. package/dist/html-graph.d.ts +21 -0
  3. package/dist/html-graph.js +471 -450
  4. package/dist/html-graph.umd.cjs +1 -1
  5. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,22 +1,23 @@
1
- var Ne = Object.defineProperty;
2
- var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
- var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
4
- const Le = () => {
1
+ var Me = Object.defineProperty;
2
+ var Le = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
+ var o = (r, e, t) => Le(r, typeof e != "symbol" ? e + "" : e, t);
4
+ const Re = () => {
5
5
  const r = document.createElement("div");
6
6
  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
7
- }, Re = () => {
7
+ }, Ce = () => {
8
8
  const r = document.createElement("div");
9
9
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
10
- }, Ce = (r) => {
10
+ }, Ve = (r) => {
11
11
  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
12
12
  }, T = (r, e) => ({
13
13
  x: r.scale * e.x + r.x,
14
14
  y: r.scale * e.y + r.y
15
15
  });
16
- class ue {
16
+ var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
17
+ class pe {
17
18
  constructor(e, t, s) {
18
- o(this, "host", Re());
19
- o(this, "container", Le());
19
+ o(this, "host", Ce());
20
+ o(this, "container", Re());
20
21
  o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
21
22
  o(this, "applyTransform", () => {
22
23
  const e = this.viewportStore.getContentMatrix();
@@ -26,7 +27,7 @@ class ue {
26
27
  }
27
28
  attachNode(e) {
28
29
  const t = this.graphStore.getNode(e);
29
- Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
30
+ Ve(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
30
31
  }
31
32
  detachNode(e) {
32
33
  const t = this.graphStore.getNode(e);
@@ -51,8 +52,8 @@ class ue {
51
52
  this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
52
53
  }
53
54
  updateNodePosition(e) {
54
- const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.centerFn(s, i), h = t.x - n * a.x, d = t.y - n * a.y;
55
- t.element.style.transform = `translate(${h}px, ${d}px)`;
55
+ const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = t.centerFn(s, i), a = t.x - n * h.x, d = t.y - n * h.y;
56
+ t.element.style.transform = `translate(${a}px, ${d}px)`;
56
57
  }
57
58
  updateNodePriority(e) {
58
59
  const t = this.graphStore.getNode(e);
@@ -65,33 +66,34 @@ class ue {
65
66
  this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
66
67
  }
67
68
  renderEdge(e) {
68
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
69
+ const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
69
70
  t.from,
70
71
  s,
71
72
  n,
72
- h,
73
+ a,
73
74
  d
74
75
  ), l = this.createEdgeRenderPort(
75
76
  t.to,
76
77
  i,
77
- a,
78
78
  h,
79
+ a,
79
80
  d
80
81
  );
81
- t.shape.render({ from: c, to: l });
82
+ let g = L.Line;
83
+ s.element === i.element ? g = L.PortCycle : s.nodeId === i.nodeId && (g = L.NodeCycle), t.shape.render({ from: c, to: l, category: g });
82
84
  }
83
85
  updateEdgePriority(e) {
84
86
  const t = this.graphStore.getEdge(e);
85
87
  t.shape.svg.style.zIndex = `${t.priority}`;
86
88
  }
87
89
  createEdgeRenderPort(e, t, s, i, n) {
88
- const a = {
90
+ const h = {
89
91
  x: s.left - i.left,
90
92
  y: s.top - i.top
91
- }, h = T(n, a);
93
+ }, a = T(n, h);
92
94
  return {
93
- x: h.x,
94
- y: h.y,
95
+ x: a.x,
96
+ y: a.y,
95
97
  width: s.width * n.scale,
96
98
  height: s.height * n.scale,
97
99
  direction: t.direction,
@@ -100,7 +102,7 @@ class ue {
100
102
  };
101
103
  }
102
104
  }
103
- class Ie {
105
+ class Ue {
104
106
  constructor(e) {
105
107
  o(this, "xFrom", 1 / 0);
106
108
  o(this, "yFrom", 1 / 0);
@@ -116,35 +118,35 @@ class Ie {
116
118
  return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
117
119
  }
118
120
  hasEdge(e) {
119
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
120
- return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
121
+ const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), h = this.graphStore.getNode(i), a = Math.min(n.x, h.x), d = Math.max(n.x, h.x), c = Math.min(n.y, h.y), l = Math.max(n.y, h.y);
122
+ return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
121
123
  }
122
124
  }
123
- class Ue {
124
- constructor(e, t, s) {
125
+ class Ie {
126
+ constructor(e, t, s, i) {
125
127
  o(this, "attachedNodes", /* @__PURE__ */ new Set());
126
128
  o(this, "attachedEdges", /* @__PURE__ */ new Set());
127
129
  o(this, "renderingBox");
128
130
  o(this, "updateViewport", (e) => {
129
131
  this.renderingBox.setRenderingBox(e);
130
132
  const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
131
- this.graphStore.getAllNodeIds().forEach((a) => {
132
- const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
133
- h && !d ? t.add(a) : !h && d && s.add(a);
134
- }), this.graphStore.getAllEdgeIds().forEach((a) => {
135
- const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
136
- h && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
137
- }), n.forEach((a) => {
138
- this.handleDetachEdge(a);
139
- }), s.forEach((a) => {
140
- this.handleDetachNode(a);
141
- }), t.forEach((a) => {
142
- this.attachedNodes.has(a) || this.handleAttachNode(a);
143
- }), i.forEach((a) => {
144
- this.handleAttachEdge(a);
133
+ this.graphStore.getAllNodeIds().forEach((h) => {
134
+ const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
135
+ a && !d ? t.add(h) : !a && d && s.add(h);
136
+ }), this.graphStore.getAllEdgeIds().forEach((h) => {
137
+ const a = this.renderingBox.hasEdge(h), d = this.attachedEdges.has(h), c = this.graphStore.getEdge(h), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
138
+ a && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), a && !d ? i.add(h) : !a && d && n.add(h);
139
+ }), n.forEach((h) => {
140
+ this.handleDetachEdge(h);
141
+ }), s.forEach((h) => {
142
+ this.handleDetachNode(h);
143
+ }), t.forEach((h) => {
144
+ this.attachedNodes.has(h) || this.handleAttachNode(h);
145
+ }), i.forEach((h) => {
146
+ this.handleAttachEdge(h);
145
147
  });
146
148
  });
147
- this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
149
+ this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ue(this.graphStore), this.trigger.subscribe(this.updateViewport);
148
150
  }
149
151
  attachNode(e) {
150
152
  this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -186,10 +188,10 @@ class Ue {
186
188
  this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
187
189
  }
188
190
  handleAttachNode(e) {
189
- this.attachedNodes.add(e), this.htmlView.attachNode(e);
191
+ this.attachedNodes.add(e), this.params.onBeforeNodeAttached(e), this.htmlView.attachNode(e);
190
192
  }
191
193
  handleDetachNode(e) {
192
- this.htmlView.detachNode(e), this.attachedNodes.delete(e);
194
+ this.htmlView.detachNode(e), this.params.onAfterNodeDetached(e), this.attachedNodes.delete(e);
193
195
  }
194
196
  handleAttachEdge(e) {
195
197
  this.attachedEdges.add(e), this.htmlView.attachEdge(e);
@@ -198,7 +200,7 @@ class Ue {
198
200
  this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
199
201
  }
200
202
  }
201
- class pe {
203
+ class we {
202
204
  constructor() {
203
205
  o(this, "callbacks", /* @__PURE__ */ new Set());
204
206
  }
@@ -215,10 +217,10 @@ class pe {
215
217
  }
216
218
  }
217
219
  const A = () => {
218
- const r = new pe();
220
+ const r = new we();
219
221
  return [r, r];
220
222
  };
221
- class Ve {
223
+ class Be {
222
224
  constructor(e) {
223
225
  o(this, "onBeforeUpdated");
224
226
  o(this, "onAfterUpdated");
@@ -231,7 +233,7 @@ class Ve {
231
233
  return { ...this.viewportStore.getContentMatrix() };
232
234
  }
233
235
  }
234
- class Be {
236
+ class We {
235
237
  constructor(e) {
236
238
  o(this, "onAfterNodeAdded");
237
239
  o(this, "onAfterNodeUpdated");
@@ -339,7 +341,7 @@ class Be {
339
341
  return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
340
342
  }
341
343
  }
342
- class O {
344
+ class k {
343
345
  constructor(e) {
344
346
  o(this, "counter", 0);
345
347
  this.checkExists = e;
@@ -361,7 +363,7 @@ class S extends Error {
361
363
  o(this, "name", "HtmlGraphError");
362
364
  }
363
365
  }
364
- class we {
366
+ class fe {
365
367
  constructor(e, t, s, i, n) {
366
368
  /**
367
369
  * provides api for accessing model of rendered graph
@@ -371,13 +373,13 @@ class we {
371
373
  * provides api for accessing viewport state
372
374
  */
373
375
  o(this, "viewport");
374
- o(this, "nodeIdGenerator", new O(
376
+ o(this, "nodeIdGenerator", new k(
375
377
  (e) => this.graph.getNode(e) !== null
376
378
  ));
377
- o(this, "portIdGenerator", new O(
379
+ o(this, "portIdGenerator", new k(
378
380
  (e) => this.graph.getPort(e) !== null
379
381
  ));
380
- o(this, "edgeIdGenerator", new O(
382
+ o(this, "edgeIdGenerator", new k(
381
383
  (e) => this.graph.getEdge(e) !== null
382
384
  ));
383
385
  o(this, "onAfterNodeAdded", (e) => {
@@ -429,7 +431,7 @@ class we {
429
431
  * emits event just before destruction of canvas
430
432
  */
431
433
  o(this, "onBeforeDestroy");
432
- this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new Be(this.graphStore), this.viewport = new Ve(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
434
+ this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Be(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
433
435
  this.onAfterNodePriorityUpdated
434
436
  ), 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(
435
437
  this.onAfterEdgeShapeUpdated
@@ -584,7 +586,7 @@ class we {
584
586
  ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
585
587
  }
586
588
  }
587
- class We {
589
+ class $e {
588
590
  constructor() {
589
591
  o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
590
592
  o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -624,7 +626,7 @@ class We {
624
626
  return this.multiToSingleMap.get(e) !== void 0;
625
627
  }
626
628
  }
627
- class fe {
629
+ class ve {
628
630
  constructor() {
629
631
  o(this, "nodes", /* @__PURE__ */ new Map());
630
632
  o(this, "ports", /* @__PURE__ */ new Map());
@@ -633,7 +635,7 @@ class fe {
633
635
  o(this, "incomingEdges", /* @__PURE__ */ new Map());
634
636
  o(this, "outcomingEdges", /* @__PURE__ */ new Map());
635
637
  o(this, "cycleEdges", /* @__PURE__ */ new Map());
636
- o(this, "elementPorts", new We());
638
+ o(this, "elementPorts", new $e());
637
639
  o(this, "afterNodeAddedEmitter");
638
640
  o(this, "onAfterNodeAdded");
639
641
  o(this, "afterNodeUpdatedEmitter");
@@ -806,19 +808,19 @@ class fe {
806
808
  this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
807
809
  }
808
810
  }
809
- const se = (r) => ({
811
+ const ie = (r) => ({
810
812
  scale: 1 / r.scale,
811
813
  x: -r.x / r.scale,
812
814
  y: -r.y / r.scale
813
- }), ie = {
815
+ }), ne = {
814
816
  scale: 1,
815
817
  x: 0,
816
818
  y: 0
817
819
  };
818
- class $e {
820
+ class Fe {
819
821
  constructor() {
820
- o(this, "viewportMatrix", ie);
821
- o(this, "contentMatrix", ie);
822
+ o(this, "viewportMatrix", ne);
823
+ o(this, "contentMatrix", ne);
822
824
  o(this, "afterUpdateEmitter");
823
825
  o(this, "onAfterUpdated");
824
826
  o(this, "beforeUpdateEmitter");
@@ -836,17 +838,17 @@ class $e {
836
838
  scale: e.scale ?? this.viewportMatrix.scale,
837
839
  x: e.x ?? this.viewportMatrix.x,
838
840
  y: e.y ?? this.viewportMatrix.y
839
- }, this.contentMatrix = se(this.viewportMatrix), this.afterUpdateEmitter.emit();
841
+ }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
840
842
  }
841
843
  patchContentMatrix(e) {
842
844
  this.beforeUpdateEmitter.emit(), this.contentMatrix = {
843
845
  scale: e.scale ?? this.contentMatrix.scale,
844
846
  x: e.x ?? this.contentMatrix.x,
845
847
  y: e.y ?? this.contentMatrix.y
846
- }, this.viewportMatrix = se(this.contentMatrix), this.afterUpdateEmitter.emit();
848
+ }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
847
849
  }
848
850
  }
849
- class Y {
851
+ class H {
850
852
  constructor(e) {
851
853
  o(this, "elementToNodeId", /* @__PURE__ */ new Map());
852
854
  o(this, "nodesResizeObserver");
@@ -872,19 +874,19 @@ class Y {
872
874
  }), 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);
873
875
  }
874
876
  static configure(e) {
875
- new Y(e);
877
+ new H(e);
876
878
  }
877
879
  handleNodeResize(e) {
878
880
  const t = this.elementToNodeId.get(e);
879
881
  this.canvas.updateNode(t);
880
882
  }
881
883
  }
882
- const Fe = (r, e, t) => {
883
- const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
884
- return e >= s && e <= s + n && t >= i && t <= i + a;
885
- }, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
884
+ const Oe = (r, e, t) => {
885
+ const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
886
+ return e >= s && e <= s + n && t >= i && t <= i + h;
887
+ }, ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => Oe(e, t, s) && ke(r, t, s), I = (r, e) => {
886
888
  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
887
- }, V = (r) => {
889
+ }, B = (r) => {
888
890
  const e = document.createElement("div");
889
891
  return {
890
892
  id: r.overlayId,
@@ -899,22 +901,22 @@ const Fe = (r, e, t) => {
899
901
  }
900
902
  ]
901
903
  };
902
- }, ke = (r, e) => {
904
+ }, ze = (r, e) => {
903
905
  let t = e, s = null;
904
906
  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
905
907
  t = t.parentElement;
906
908
  return s;
907
- }, ve = (r, e) => {
909
+ }, me = (r, e) => {
908
910
  const t = document.elementsFromPoint(e.x, e.y);
909
911
  for (const s of t) {
910
- const i = ke(r, s);
912
+ const i = ze(r, s);
911
913
  if (i !== null)
912
914
  return i;
913
915
  }
914
916
  return null;
915
917
  };
916
- var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
917
- const me = (r, e) => ({
918
+ var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
919
+ const ye = (r, e) => ({
918
920
  x: r / 2,
919
921
  y: e / 2
920
922
  }), m = (r, e, t) => ({
@@ -924,7 +926,7 @@ const me = (r, e) => ({
924
926
  x: 0,
925
927
  y: 0
926
928
  };
927
- class ze {
929
+ class Xe {
928
930
  constructor(e) {
929
931
  o(this, "path");
930
932
  o(this, "midpoint");
@@ -942,18 +944,18 @@ class ze {
942
944
  ), n = {
943
945
  x: s.x + this.params.sourceDirection.x * this.params.curvature,
944
946
  y: s.y + this.params.sourceDirection.y * this.params.curvature
945
- }, a = {
947
+ }, h = {
946
948
  x: i.x - this.params.targetDirection.x * this.params.curvature,
947
949
  y: i.y - this.params.targetDirection.y * this.params.curvature
948
- }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
949
- this.path = `${d}${h}${c}`;
950
+ }, a = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
951
+ this.path = `${d}${a}${c}`;
950
952
  }
951
953
  }
952
- const ye = (r, e, t, s) => ({
954
+ const Ee = (r, e, t, s) => ({
953
955
  x: e * r.x + (1 - e) / 2 * s.x,
954
956
  y: t * r.y + (1 - t) / 2 * s.y
955
957
  });
956
- class Xe {
958
+ class Ye {
957
959
  constructor(e) {
958
960
  o(this, "path");
959
961
  o(this, "midpoint");
@@ -969,19 +971,19 @@ class Xe {
969
971
  },
970
972
  this.params.targetDirection,
971
973
  this.params.to
972
- ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
974
+ ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = m(
973
975
  { x: i, y: w.y },
974
976
  this.params.sourceDirection,
975
977
  w
976
978
  ), l = {
977
- x: c.x + h,
979
+ x: c.x + a,
978
980
  y: c.y + d
979
981
  }, g = m(
980
982
  { x: this.params.to.x - i, y: this.params.to.y },
981
983
  this.params.targetDirection,
982
984
  this.params.to
983
985
  ), p = {
984
- x: g.x + h,
986
+ x: g.x + a,
985
987
  y: g.y + d
986
988
  }, f = {
987
989
  x: (l.x + p.x) / 2,
@@ -993,10 +995,10 @@ class Xe {
993
995
  x: g.x - this.params.curvature * this.params.targetDirection.x,
994
996
  y: g.y - this.params.curvature * this.params.targetDirection.y
995
997
  }, E = {
996
- x: c.x + h,
998
+ x: c.x + a,
997
999
  y: c.y + d
998
1000
  }, x = {
999
- x: g.x + h,
1001
+ x: g.x + a,
1000
1002
  y: g.y + d
1001
1003
  };
1002
1004
  this.path = [
@@ -1005,30 +1007,30 @@ class Xe {
1005
1007
  `C ${v.x} ${v.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
1006
1008
  `C ${x.x} ${x.y} ${y.x} ${y.y} ${g.x} ${g.y}`,
1007
1009
  `L ${s.x} ${s.y}`
1008
- ].join(" "), this.midpoint = ye(f, e.flipX, e.flipY, e.to);
1010
+ ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
1009
1011
  }
1010
1012
  }
1011
- const C = (r, e) => {
1013
+ const V = (r, e) => {
1012
1014
  const t = [];
1013
1015
  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
1014
1016
  const s = r.length - 1;
1015
- let i = 0, n = 0, a = 0;
1016
- r.forEach((h, d) => {
1017
+ let i = 0, n = 0, h = 0;
1018
+ r.forEach((a, d) => {
1017
1019
  let c = 0, l = 0, g = 0;
1018
1020
  const p = d > 0, f = d < s, v = p && f;
1019
- if (p && (c = -i, l = -n, g = a), f) {
1020
- const R = r[d + 1];
1021
- i = R.x - h.x, n = R.y - h.y, a = Math.sqrt(i * i + n * n);
1021
+ if (p && (c = -i, l = -n, g = h), f) {
1022
+ const C = r[d + 1];
1023
+ i = C.x - a.x, n = C.y - a.y, h = Math.sqrt(i * i + n * n);
1022
1024
  }
1023
- const E = a !== 0 ? Math.min((v ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: h.x + i * E, y: h.y + n * E } : h, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: h.x + c * D, y: h.y + l * D } : h;
1025
+ const E = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: a.x + i * E, y: a.y + n * E } : a, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: a.x + c * D, y: a.y + l * D } : a;
1024
1026
  d > 0 && t.push(`L ${N.x} ${N.y}`), v && t.push(
1025
- `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
1027
+ `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
1026
1028
  );
1027
1029
  });
1028
1030
  }
1029
1031
  return t.join(" ");
1030
1032
  };
1031
- class Ye {
1033
+ class He {
1032
1034
  constructor(e) {
1033
1035
  o(this, "path");
1034
1036
  o(this, "midpoint");
@@ -1046,28 +1048,28 @@ class Ye {
1046
1048
  },
1047
1049
  this.params.targetDirection,
1048
1050
  this.params.to
1049
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1050
- { x: a, y: w.y },
1051
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
1052
+ { x: h, y: w.y },
1051
1053
  this.params.sourceDirection,
1052
1054
  w
1053
1055
  ), d = m(
1054
- { x: this.params.to.x - a, y: this.params.to.y },
1056
+ { x: this.params.to.x - h, y: this.params.to.y },
1055
1057
  this.params.targetDirection,
1056
1058
  this.params.to
1057
- ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
1059
+ ), c = Math.max((a.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
1058
1060
  x: this.params.flipX > 0 ? c : -n,
1059
- y: h.y
1061
+ y: a.y
1060
1062
  }, p = { x: g.x, y: l }, f = {
1061
1063
  x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
1062
1064
  y: d.y
1063
1065
  }, v = { x: f.x, y: l };
1064
- this.path = C(
1065
- [s, h, g, p, v, f, d, i],
1066
+ this.path = V(
1067
+ [s, a, g, p, v, f, d, i],
1066
1068
  this.params.roundness
1067
1069
  );
1068
1070
  }
1069
1071
  }
1070
- class H {
1072
+ class j {
1071
1073
  constructor(e) {
1072
1074
  o(this, "path");
1073
1075
  o(this, "midpoint");
@@ -1087,18 +1089,18 @@ class H {
1087
1089
  { x: i, y: w.y },
1088
1090
  this.params.sourceDirection,
1089
1091
  w
1090
- ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
1092
+ ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
1091
1093
  { x: this.params.to.x - i, y: this.params.to.y },
1092
1094
  this.params.targetDirection,
1093
1095
  this.params.to
1094
1096
  ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
1095
- this.midpoint = ye(f, e.flipX, e.flipY, e.to), this.path = C(
1097
+ this.midpoint = Ee(f, e.flipX, e.flipY, e.to), this.path = V(
1096
1098
  [t, n, l, p, g, s],
1097
1099
  this.params.roundness
1098
1100
  );
1099
1101
  }
1100
1102
  }
1101
- class He {
1103
+ class je {
1102
1104
  constructor(e) {
1103
1105
  o(this, "path");
1104
1106
  o(this, "midpoint");
@@ -1116,19 +1118,19 @@ class He {
1116
1118
  },
1117
1119
  this.params.targetDirection,
1118
1120
  this.params.to
1119
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
1121
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = m(
1120
1122
  { x: n, y: w.y },
1121
1123
  this.params.sourceDirection,
1122
1124
  w
1123
- ), h = m(
1125
+ ), a = m(
1124
1126
  { x: this.params.to.x - n, y: this.params.to.y },
1125
1127
  this.params.targetDirection,
1126
1128
  this.params.to
1127
1129
  );
1128
- this.path = C([s, a, h, i], this.params.roundness);
1130
+ this.path = V([s, h, a, i], this.params.roundness);
1129
1131
  }
1130
1132
  }
1131
- class je {
1133
+ class Ge {
1132
1134
  constructor(e) {
1133
1135
  o(this, "path");
1134
1136
  o(this, "midpoint");
@@ -1146,33 +1148,33 @@ class je {
1146
1148
  },
1147
1149
  this.params.targetDirection,
1148
1150
  this.params.to
1149
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1150
- { x: a, y: w.y },
1151
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
1152
+ { x: h, y: w.y },
1151
1153
  this.params.sourceDirection,
1152
1154
  w
1153
1155
  ), d = m(
1154
- { x: this.params.to.x - a, y: this.params.to.y },
1156
+ { x: this.params.to.x - h, y: this.params.to.y },
1155
1157
  this.params.targetDirection,
1156
1158
  this.params.to
1157
- ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
1158
- x: h.x,
1159
+ ), c = Math.max((a.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
1160
+ x: a.x,
1159
1161
  y: this.params.flipY > 0 ? c : -n
1160
1162
  }, p = { x: l, y: g.y }, f = {
1161
1163
  x: d.x,
1162
1164
  y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
1163
1165
  }, v = { x: l, y: f.y };
1164
- this.path = C(
1165
- [s, h, g, p, v, f, d, i],
1166
+ this.path = V(
1167
+ [s, a, g, p, v, f, d, i],
1166
1168
  this.params.roundness
1167
1169
  );
1168
1170
  }
1169
1171
  }
1170
- class j {
1172
+ class G {
1171
1173
  constructor(e) {
1172
1174
  o(this, "path");
1173
1175
  o(this, "midpoint");
1174
1176
  this.params = e;
1175
- const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
1177
+ const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
1176
1178
  { x: this.params.arrowLength, y: w.y },
1177
1179
  { x: i, y: w.y },
1178
1180
  { x: i, y: this.params.side },
@@ -1183,16 +1185,16 @@ class j {
1183
1185
  { x: this.params.arrowLength, y: w.y }
1184
1186
  ].map(
1185
1187
  (c) => m(c, this.params.sourceDirection, w)
1186
- ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
1187
- this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${C(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
1188
+ ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
1189
+ this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${V(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
1188
1190
  }
1189
1191
  }
1190
- class Ge {
1192
+ class Ke {
1191
1193
  constructor(e) {
1192
1194
  o(this, "path");
1193
1195
  o(this, "midpoint");
1194
1196
  this.params = e;
1195
- const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
1197
+ const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, h = Math.sqrt(i * i - t * t), a = h * t / i, d = h + s + this.params.arrowLength, c = this.params.arrowLength + a, g = [
1196
1198
  { x: this.params.arrowLength, y: w.y },
1197
1199
  { x: c, y: n },
1198
1200
  { x: c, y: -n },
@@ -1208,7 +1210,7 @@ class Ge {
1208
1210
  this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
1209
1211
  }
1210
1212
  }
1211
- class Ke {
1213
+ class Ze {
1212
1214
  constructor(e) {
1213
1215
  o(this, "path");
1214
1216
  o(this, "midpoint");
@@ -1244,22 +1246,22 @@ class Ke {
1244
1246
  };
1245
1247
  }
1246
1248
  }
1247
- const Ee = (r, e) => {
1249
+ const Ae = (r, e) => {
1248
1250
  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
1249
- }, G = Object.freeze({
1251
+ }, K = Object.freeze({
1250
1252
  edgeColor: "--edge-color"
1251
- }), Ae = (r) => {
1253
+ }), xe = (r) => {
1252
1254
  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1253
- return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
1254
- }, B = () => {
1255
+ return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
1256
+ }, W = () => {
1255
1257
  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
1256
- return r.setAttribute("fill", `var(${G.edgeColor})`), r;
1257
- }, xe = () => {
1258
+ return r.setAttribute("fill", `var(${K.edgeColor})`), r;
1259
+ }, Se = () => {
1258
1260
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1259
1261
  return r.style.transformOrigin = "50% 50%", r;
1260
- }, Se = (r) => {
1262
+ }, Pe = (r) => {
1261
1263
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1262
- return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1264
+ return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1263
1265
  }, be = (r, e) => {
1264
1266
  const t = {
1265
1267
  x: r.x + r.width / 2,
@@ -1267,22 +1269,22 @@ const Ee = (r, e) => {
1267
1269
  }, s = {
1268
1270
  x: e.x + e.width / 2,
1269
1271
  y: e.y + e.height / 2
1270
- }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
1272
+ }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), h = Math.abs(s.x - t.x), a = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
1271
1273
  return {
1272
1274
  x: i,
1273
1275
  y: n,
1274
- width: a,
1275
- height: h,
1276
+ width: h,
1277
+ height: a,
1276
1278
  flipX: d,
1277
1279
  flipY: c
1278
1280
  };
1279
- }, k = (r, e, t, s) => {
1281
+ }, z = (r, e, t, s) => {
1280
1282
  const n = [
1281
1283
  w,
1282
1284
  { x: t, y: s },
1283
1285
  { x: t, y: -s }
1284
- ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
1285
- return `${a} ${h} ${d} Z`;
1286
+ ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
1287
+ return `${h} ${a} ${d} Z`;
1286
1288
  }, u = Object.freeze({
1287
1289
  color: "#777777",
1288
1290
  width: 1,
@@ -1301,55 +1303,55 @@ const Ee = (r, e) => {
1301
1303
  curvature: 90,
1302
1304
  interactiveWidth: 10,
1303
1305
  preOffset: 0
1304
- }), ne = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1305
- class W {
1306
+ }), he = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1307
+ class $ {
1306
1308
  constructor(e) {
1307
1309
  o(this, "svg");
1308
- o(this, "group", xe());
1310
+ o(this, "group", Se());
1309
1311
  o(this, "line");
1310
1312
  o(this, "sourceArrow", null);
1311
1313
  o(this, "targetArrow", null);
1312
1314
  o(this, "onAfterRender");
1313
1315
  o(this, "afterRenderEmitter");
1314
- this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
1316
+ this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = xe(e.color), this.svg.appendChild(this.group), this.line = Pe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
1315
1317
  }
1316
1318
  render(e) {
1317
- const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
1319
+ const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
1318
1320
  e.from,
1319
1321
  e.to
1320
1322
  );
1321
- Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1322
- const d = ne(
1323
+ Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
1324
+ const d = he(
1323
1325
  e.from.direction,
1324
- a,
1325
- h
1326
- ), c = ne(
1326
+ h,
1327
+ a
1328
+ ), c = he(
1327
1329
  e.to.direction,
1328
- a,
1329
- h
1330
+ h,
1331
+ a
1330
1332
  ), l = {
1331
1333
  x: i,
1332
1334
  y: n
1333
1335
  };
1334
1336
  let g = c, p = -this.params.arrowLength, f;
1335
- e.from.portId === e.to.portId ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? f = this.params.createDetourPath : f = this.params.createLinePath;
1337
+ e.category === L.PortCycle ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.category === L.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
1336
1338
  const v = f(
1337
1339
  d,
1338
1340
  c,
1339
1341
  l,
1340
- a,
1341
- h
1342
+ h,
1343
+ a
1342
1344
  );
1343
1345
  this.line.setAttribute("d", v.path);
1344
1346
  let y = null;
1345
- this.sourceArrow && (y = k(
1347
+ this.sourceArrow && (y = z(
1346
1348
  d,
1347
1349
  w,
1348
1350
  this.params.arrowLength,
1349
1351
  this.params.arrowWidth
1350
1352
  ), this.sourceArrow.setAttribute("d", y));
1351
1353
  let E = null;
1352
- this.targetArrow && (E = k(
1354
+ this.targetArrow && (E = z(
1353
1355
  g,
1354
1356
  l,
1355
1357
  p,
@@ -1361,7 +1363,7 @@ class W {
1361
1363
  });
1362
1364
  }
1363
1365
  }
1364
- class Ze {
1366
+ class Je {
1365
1367
  constructor(e) {
1366
1368
  o(this, "svg");
1367
1369
  o(this, "group");
@@ -1379,7 +1381,7 @@ class Ze {
1379
1381
  o(this, "hasSourceArrow");
1380
1382
  o(this, "hasTargetArrow");
1381
1383
  o(this, "pathShape");
1382
- o(this, "createCyclePath", (e) => new Ge({
1384
+ o(this, "createCyclePath", (e) => new Ke({
1383
1385
  sourceDirection: e,
1384
1386
  radius: this.portCycleRadius,
1385
1387
  smallRadius: this.portCycleSmallRadius,
@@ -1387,7 +1389,7 @@ class Ze {
1387
1389
  hasSourceArrow: this.hasSourceArrow,
1388
1390
  hasTargetArrow: this.hasTargetArrow
1389
1391
  }));
1390
- o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
1392
+ o(this, "createDetourPath", (e, t, s, i, n) => new Ye({
1391
1393
  to: s,
1392
1394
  sourceDirection: e,
1393
1395
  targetDirection: t,
@@ -1400,7 +1402,7 @@ class Ze {
1400
1402
  hasSourceArrow: this.hasSourceArrow,
1401
1403
  hasTargetArrow: this.hasTargetArrow
1402
1404
  }));
1403
- o(this, "createLinePath", (e, t, s) => new ze({
1405
+ o(this, "createLinePath", (e, t, s) => new Xe({
1404
1406
  to: s,
1405
1407
  sourceDirection: e,
1406
1408
  targetDirection: t,
@@ -1409,7 +1411,7 @@ class Ze {
1409
1411
  hasSourceArrow: this.hasSourceArrow,
1410
1412
  hasTargetArrow: this.hasTargetArrow
1411
1413
  }));
1412
- 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.pathShape = new W({
1414
+ 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.pathShape = new $({
1413
1415
  color: (e == null ? void 0 : e.color) ?? u.color,
1414
1416
  width: (e == null ? void 0 : e.width) ?? u.width,
1415
1417
  arrowLength: this.arrowLength,
@@ -1425,7 +1427,7 @@ class Ze {
1425
1427
  this.pathShape.render(e);
1426
1428
  }
1427
1429
  }
1428
- class Je {
1430
+ class Qe {
1429
1431
  constructor(e) {
1430
1432
  o(this, "svg");
1431
1433
  o(this, "group");
@@ -1443,7 +1445,7 @@ class Je {
1443
1445
  o(this, "hasSourceArrow");
1444
1446
  o(this, "hasTargetArrow");
1445
1447
  o(this, "pathShape");
1446
- o(this, "createCyclePath", (e) => new j({
1448
+ o(this, "createCyclePath", (e) => new G({
1447
1449
  sourceDirection: e,
1448
1450
  arrowLength: this.arrowLength,
1449
1451
  side: this.cycleSquareSide,
@@ -1452,7 +1454,7 @@ class Je {
1452
1454
  hasSourceArrow: this.hasSourceArrow,
1453
1455
  hasTargetArrow: this.hasTargetArrow
1454
1456
  }));
1455
- o(this, "createDetourPath", (e, t, s, i, n) => new H({
1457
+ o(this, "createDetourPath", (e, t, s, i, n) => new j({
1456
1458
  to: s,
1457
1459
  sourceDirection: e,
1458
1460
  targetDirection: t,
@@ -1466,7 +1468,7 @@ class Je {
1466
1468
  hasSourceArrow: this.hasSourceArrow,
1467
1469
  hasTargetArrow: this.hasTargetArrow
1468
1470
  }));
1469
- o(this, "createLinePath", (e, t, s, i) => new Ye({
1471
+ o(this, "createLinePath", (e, t, s, i) => new He({
1470
1472
  to: s,
1471
1473
  sourceDirection: e,
1472
1474
  targetDirection: t,
@@ -1483,7 +1485,7 @@ class Je {
1483
1485
  t,
1484
1486
  this.arrowOffset,
1485
1487
  this.cycleSquareSide / 2
1486
- ), 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.pathShape = new W({
1488
+ ), 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.pathShape = new $({
1487
1489
  color: (e == null ? void 0 : e.color) ?? u.color,
1488
1490
  width: (e == null ? void 0 : e.width) ?? u.width,
1489
1491
  arrowLength: this.arrowLength,
@@ -1499,7 +1501,7 @@ class Je {
1499
1501
  this.pathShape.render(e);
1500
1502
  }
1501
1503
  }
1502
- class Qe {
1504
+ class _e {
1503
1505
  constructor(e) {
1504
1506
  o(this, "svg");
1505
1507
  o(this, "group");
@@ -1517,7 +1519,7 @@ class Qe {
1517
1519
  o(this, "hasSourceArrow");
1518
1520
  o(this, "hasTargetArrow");
1519
1521
  o(this, "pathShape");
1520
- o(this, "createCyclePath", (e) => new j({
1522
+ o(this, "createCyclePath", (e) => new G({
1521
1523
  sourceDirection: e,
1522
1524
  arrowLength: this.arrowLength,
1523
1525
  side: this.cycleSquareSide,
@@ -1526,7 +1528,7 @@ class Qe {
1526
1528
  hasSourceArrow: this.hasSourceArrow,
1527
1529
  hasTargetArrow: this.hasTargetArrow
1528
1530
  }));
1529
- o(this, "createDetourPath", (e, t, s, i, n) => new H({
1531
+ o(this, "createDetourPath", (e, t, s, i, n) => new j({
1530
1532
  to: s,
1531
1533
  sourceDirection: e,
1532
1534
  targetDirection: t,
@@ -1540,7 +1542,7 @@ class Qe {
1540
1542
  hasSourceArrow: this.hasSourceArrow,
1541
1543
  hasTargetArrow: this.hasTargetArrow
1542
1544
  }));
1543
- o(this, "createLinePath", (e, t, s) => new He({
1545
+ o(this, "createLinePath", (e, t, s) => new je({
1544
1546
  to: s,
1545
1547
  sourceDirection: e,
1546
1548
  targetDirection: t,
@@ -1556,7 +1558,7 @@ class Qe {
1556
1558
  t,
1557
1559
  this.arrowOffset,
1558
1560
  this.cycleSquareSide / 2
1559
- ), 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.pathShape = new W({
1561
+ ), 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.pathShape = new $({
1560
1562
  color: (e == null ? void 0 : e.color) ?? u.color,
1561
1563
  width: (e == null ? void 0 : e.width) ?? u.width,
1562
1564
  arrowLength: this.arrowLength,
@@ -1572,7 +1574,7 @@ class Qe {
1572
1574
  this.pathShape.render(e);
1573
1575
  }
1574
1576
  }
1575
- class _e {
1577
+ class qe {
1576
1578
  constructor(e) {
1577
1579
  o(this, "svg");
1578
1580
  o(this, "group");
@@ -1590,7 +1592,7 @@ class _e {
1590
1592
  o(this, "hasSourceArrow");
1591
1593
  o(this, "hasTargetArrow");
1592
1594
  o(this, "pathShape");
1593
- o(this, "createCyclePath", (e) => new j({
1595
+ o(this, "createCyclePath", (e) => new G({
1594
1596
  sourceDirection: e,
1595
1597
  arrowLength: this.arrowLength,
1596
1598
  side: this.cycleSquareSide,
@@ -1599,7 +1601,7 @@ class _e {
1599
1601
  hasSourceArrow: this.hasSourceArrow,
1600
1602
  hasTargetArrow: this.hasTargetArrow
1601
1603
  }));
1602
- o(this, "createDetourPath", (e, t, s, i, n) => new H({
1604
+ o(this, "createDetourPath", (e, t, s, i, n) => new j({
1603
1605
  to: s,
1604
1606
  sourceDirection: e,
1605
1607
  targetDirection: t,
@@ -1613,7 +1615,7 @@ class _e {
1613
1615
  hasSourceArrow: this.hasSourceArrow,
1614
1616
  hasTargetArrow: this.hasTargetArrow
1615
1617
  }));
1616
- o(this, "createLinePath", (e, t, s, i, n) => new je({
1618
+ o(this, "createLinePath", (e, t, s, i, n) => new Ge({
1617
1619
  to: s,
1618
1620
  sourceDirection: e,
1619
1621
  targetDirection: t,
@@ -1630,7 +1632,7 @@ class _e {
1630
1632
  t,
1631
1633
  this.arrowOffset,
1632
1634
  this.cycleSquareSide / 2
1633
- ), 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.pathShape = new W({
1635
+ ), 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.pathShape = new $({
1634
1636
  color: (e == null ? void 0 : e.color) ?? u.color,
1635
1637
  width: (e == null ? void 0 : e.width) ?? u.width,
1636
1638
  arrowLength: this.arrowLength,
@@ -1646,7 +1648,7 @@ class _e {
1646
1648
  this.pathShape.render(e);
1647
1649
  }
1648
1650
  }
1649
- const he = (r) => {
1651
+ const ae = (r) => {
1650
1652
  if (r.diagonalDistance === 0)
1651
1653
  return "";
1652
1654
  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
@@ -1656,17 +1658,17 @@ const he = (r) => {
1656
1658
  x: t / r.diagonalDistance,
1657
1659
  y: s / r.diagonalDistance
1658
1660
  };
1659
- return k(
1661
+ return z(
1660
1662
  n,
1661
1663
  i,
1662
1664
  r.arrowLength,
1663
1665
  r.arrowWidth
1664
1666
  );
1665
1667
  };
1666
- class Pe {
1668
+ class Te {
1667
1669
  constructor(e) {
1668
1670
  o(this, "svg");
1669
- o(this, "group", xe());
1671
+ o(this, "group", Se());
1670
1672
  o(this, "line");
1671
1673
  o(this, "sourceArrow", null);
1672
1674
  o(this, "targetArrow", null);
@@ -1678,15 +1680,15 @@ class Pe {
1678
1680
  o(this, "targetOffset");
1679
1681
  o(this, "onAfterRender");
1680
1682
  o(this, "afterRenderEmitter");
1681
- [this.afterRenderEmitter, this.onAfterRender] = A(), 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 = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
1683
+ [this.afterRenderEmitter, this.onAfterRender] = A(), 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 = xe(this.color), this.svg.appendChild(this.group), this.line = Pe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
1682
1684
  }
1683
1685
  render(e) {
1684
- const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
1686
+ const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
1685
1687
  e.from,
1686
1688
  e.to
1687
1689
  );
1688
- Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1689
- const d = { x: i, y: n }, c = new Ke({
1690
+ Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
1691
+ const d = { x: i, y: n }, c = new Ze({
1690
1692
  to: d,
1691
1693
  sourceOffset: this.sourceOffset,
1692
1694
  targetOffset: this.targetOffset,
@@ -1696,7 +1698,7 @@ class Pe {
1696
1698
  });
1697
1699
  this.line.setAttribute("d", c.path);
1698
1700
  let l = null;
1699
- this.sourceArrow && (l = he({
1701
+ this.sourceArrow && (l = ae({
1700
1702
  diagonalDistance: c.diagonalDistance,
1701
1703
  to: d,
1702
1704
  offset: this.sourceOffset,
@@ -1706,7 +1708,7 @@ class Pe {
1706
1708
  arrowLength: this.arrowLength
1707
1709
  }), this.sourceArrow.setAttribute("d", l));
1708
1710
  let g = null;
1709
- this.targetArrow && (g = he({
1711
+ this.targetArrow && (g = ae({
1710
1712
  diagonalDistance: c.diagonalDistance,
1711
1713
  to: d,
1712
1714
  offset: this.targetOffset,
@@ -1721,40 +1723,40 @@ class Pe {
1721
1723
  });
1722
1724
  }
1723
1725
  }
1724
- const qe = () => {
1726
+ const et = () => {
1725
1727
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1726
1728
  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
1727
- }, et = (r) => {
1729
+ }, tt = (r) => {
1728
1730
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1729
1731
  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
1730
- }, ae = (r) => {
1732
+ }, de = (r) => {
1731
1733
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1732
1734
  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
1733
1735
  };
1734
- class tt extends Error {
1736
+ class rt extends Error {
1735
1737
  constructor(e) {
1736
1738
  super(e), this.name = "InteractiveEdgeError";
1737
1739
  }
1738
1740
  }
1739
- class Te {
1741
+ class De {
1740
1742
  constructor(e, t) {
1741
1743
  o(this, "svg");
1742
1744
  o(this, "group");
1743
1745
  o(this, "line");
1744
1746
  o(this, "sourceArrow");
1745
1747
  o(this, "targetArrow");
1746
- o(this, "handle", qe());
1748
+ o(this, "handle", et());
1747
1749
  o(this, "onAfterRender");
1748
1750
  o(this, "interactiveLine");
1749
1751
  o(this, "interactiveSourceArrow", null);
1750
1752
  o(this, "interactiveTargetArrow", null);
1751
- if (this.baseEdge = e, e instanceof Te)
1752
- throw new tt(
1753
+ if (this.baseEdge = e, e instanceof De)
1754
+ throw new rt(
1753
1755
  "interactive edge can be configured only once"
1754
1756
  );
1755
1757
  this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
1756
1758
  const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
1757
- this.interactiveLine = et(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ae(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ae(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
1759
+ this.interactiveLine = tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
1758
1760
  this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
1759
1761
  });
1760
1762
  }
@@ -1762,7 +1764,7 @@ class Te {
1762
1764
  this.baseEdge.render(e);
1763
1765
  }
1764
1766
  }
1765
- class xt {
1767
+ class bt {
1766
1768
  constructor(e, t) {
1767
1769
  o(this, "group");
1768
1770
  o(this, "line");
@@ -1784,21 +1786,21 @@ class xt {
1784
1786
  this.baseShape.render(e);
1785
1787
  }
1786
1788
  }
1787
- const De = (r, e) => {
1788
- const t = new fe(), s = new ue(t, e, r), i = {
1789
+ const Ne = (r, e) => {
1790
+ const t = new ve(), s = new pe(t, e, r), i = {
1789
1791
  nodes: {
1790
- centerFn: me,
1792
+ centerFn: ye,
1791
1793
  priorityFn: () => 0
1792
1794
  },
1793
1795
  edges: {
1794
- shapeFactory: () => new Pe(),
1796
+ shapeFactory: () => new Te(),
1795
1797
  priorityFn: () => 0
1796
1798
  },
1797
1799
  ports: {
1798
1800
  direction: 0
1799
1801
  }
1800
1802
  };
1801
- return new we(
1803
+ return new fe(
1802
1804
  r,
1803
1805
  t,
1804
1806
  e,
@@ -1806,7 +1808,7 @@ const De = (r, e) => {
1806
1808
  i
1807
1809
  );
1808
1810
  };
1809
- class K {
1811
+ class Z {
1810
1812
  constructor(e, t, s, i) {
1811
1813
  o(this, "grabbedNodeId", null);
1812
1814
  o(this, "maxNodePriority", 0);
@@ -1846,7 +1848,7 @@ class K {
1846
1848
  element: i.element,
1847
1849
  x: i.x,
1848
1850
  y: i.y
1849
- }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, U(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
1851
+ }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, I(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
1850
1852
  passive: !0
1851
1853
  }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1852
1854
  passive: !0
@@ -1874,7 +1876,7 @@ class K {
1874
1876
  }));
1875
1877
  });
1876
1878
  o(this, "onWindowMouseMove", (e) => {
1877
- if (!L(
1879
+ if (!R(
1878
1880
  this.window,
1879
1881
  this.element,
1880
1882
  e.clientX,
@@ -1892,7 +1894,7 @@ class K {
1892
1894
  if (e.touches.length !== 1)
1893
1895
  return;
1894
1896
  const t = e.touches[0];
1895
- if (!L(
1897
+ if (!R(
1896
1898
  this.window,
1897
1899
  this.element,
1898
1900
  t.clientX,
@@ -1915,19 +1917,19 @@ class K {
1915
1917
  this.canvas = e, this.element = t, this.window = s, this.config = i, 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);
1916
1918
  }
1917
1919
  static configure(e, t, s, i) {
1918
- new K(e, t, s, i);
1920
+ new Z(e, t, s, i);
1919
1921
  }
1920
1922
  dragNode(e, t, s) {
1921
1923
  const i = this.graph.getNode(e);
1922
1924
  if (i === null)
1923
1925
  return;
1924
- const n = this.canvas.viewport.getContentMatrix(), a = T(n, {
1926
+ const n = this.canvas.viewport.getContentMatrix(), h = T(n, {
1925
1927
  x: i.x,
1926
1928
  y: i.y
1927
- }), h = T(
1929
+ }), a = T(
1928
1930
  { scale: 1, x: t, y: s },
1929
- a
1930
- ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, h);
1931
+ h
1932
+ ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, a);
1931
1933
  this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
1932
1934
  nodeId: e,
1933
1935
  element: i.element,
@@ -1953,7 +1955,7 @@ class K {
1953
1955
  element: e.element,
1954
1956
  x: e.x,
1955
1957
  y: e.y
1956
- }), this.grabbedNodeId = null, U(this.element, null), this.removeMouseDragListeners();
1958
+ }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
1957
1959
  }
1958
1960
  removeMouseDragListeners() {
1959
1961
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1976,34 +1978,34 @@ class K {
1976
1978
  this.maxNodePriority = Math.max(this.maxNodePriority, t);
1977
1979
  }
1978
1980
  }
1979
- const rt = (r, e, t) => ({
1981
+ const ot = (r, e, t) => ({
1980
1982
  scale: r.scale,
1981
1983
  x: r.x + r.scale * e,
1982
1984
  y: r.y + r.scale * t
1983
- }), ot = (r, e, t, s) => ({
1985
+ }), st = (r, e, t, s) => ({
1984
1986
  scale: r.scale * e,
1985
1987
  x: r.scale * (1 - e) * t + r.x,
1986
1988
  y: r.scale * (1 - e) * s + r.y
1987
- }), I = (r) => {
1989
+ }), U = (r) => {
1988
1990
  const e = [], t = r.touches.length;
1989
- for (let h = 0; h < t; h++)
1990
- e.push([r.touches[h].clientX, r.touches[h].clientY]);
1991
+ for (let a = 0; a < t; a++)
1992
+ e.push([r.touches[a].clientX, r.touches[a].clientY]);
1991
1993
  const s = e.reduce(
1992
- (h, d) => [h[0] + d[0], h[1] + d[1]],
1994
+ (a, d) => [a[0] + d[0], a[1] + d[1]],
1993
1995
  [0, 0]
1994
- ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
1995
- (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
1996
+ ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
1997
+ (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
1996
1998
  0
1997
1999
  );
1998
2000
  return {
1999
2001
  x: i[0],
2000
2002
  y: i[1],
2001
- scale: a / t,
2003
+ scale: h / t,
2002
2004
  touchesCnt: t,
2003
2005
  touches: e
2004
2006
  };
2005
2007
  };
2006
- class $ {
2008
+ class F {
2007
2009
  constructor(e, t, s, i) {
2008
2010
  o(this, "viewport");
2009
2011
  o(this, "prevTouches", null);
@@ -2013,14 +2015,14 @@ class $ {
2013
2015
  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);
2014
2016
  });
2015
2017
  o(this, "onMouseDown", (e) => {
2016
- this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2018
+ this.element === null || !this.params.mouseDownEventVerifier(e) || (I(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2017
2019
  passive: !0
2018
2020
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2019
2021
  passive: !0
2020
2022
  }), this.startRegisteredTransform());
2021
2023
  });
2022
2024
  o(this, "onWindowMouseMove", (e) => {
2023
- const t = L(
2025
+ const t = R(
2024
2026
  this.window,
2025
2027
  this.element,
2026
2028
  e.clientX,
@@ -2039,17 +2041,17 @@ class $ {
2039
2041
  o(this, "onWheelScroll", (e) => {
2040
2042
  if (!this.params.mouseWheelEventVerifier(e))
2041
2043
  return;
2042
- const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2043
- this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2044
+ const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, a = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2045
+ this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2044
2046
  this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
2045
2047
  }, this.params.scaleWheelFinishTimeout);
2046
2048
  });
2047
2049
  o(this, "onTouchStart", (e) => {
2048
2050
  if (this.prevTouches !== null) {
2049
- this.prevTouches = I(e);
2051
+ this.prevTouches = U(e);
2050
2052
  return;
2051
2053
  }
2052
- this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2054
+ this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2053
2055
  passive: !0
2054
2056
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2055
2057
  passive: !0
@@ -2058,9 +2060,9 @@ class $ {
2058
2060
  }), this.startRegisteredTransform();
2059
2061
  });
2060
2062
  o(this, "onWindowTouchMove", (e) => {
2061
- const t = I(e);
2063
+ const t = U(e);
2062
2064
  if (!t.touches.every(
2063
- (i) => L(this.window, this.element, i[0], i[1])
2065
+ (i) => R(this.window, this.element, i[0], i[1])
2064
2066
  )) {
2065
2067
  this.stopTouchDrag();
2066
2068
  return;
@@ -2069,13 +2071,13 @@ class $ {
2069
2071
  -(t.x - this.prevTouches.x),
2070
2072
  -(t.y - this.prevTouches.y)
2071
2073
  ), t.touchesCnt === 2) {
2072
- const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
2073
- this.scaleViewport(c, a, h);
2074
+ const { left: i, top: n } = this.element.getBoundingClientRect(), h = this.prevTouches.x - i, a = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
2075
+ this.scaleViewport(c, h, a);
2074
2076
  }
2075
2077
  this.prevTouches = t;
2076
2078
  });
2077
2079
  o(this, "onWindowTouchFinish", (e) => {
2078
- e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
2080
+ e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
2079
2081
  });
2080
2082
  o(this, "observer", new ResizeObserver(() => {
2081
2083
  const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
@@ -2100,28 +2102,28 @@ class $ {
2100
2102
  }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2101
2103
  }
2102
2104
  static configure(e, t, s, i) {
2103
- new $(e, t, s, i);
2105
+ new F(e, t, s, i);
2104
2106
  }
2105
2107
  moveViewport(e, t) {
2106
- const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
2108
+ const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
2107
2109
  prevTransform: s,
2108
2110
  nextTransform: i,
2109
2111
  canvasWidth: n,
2110
- canvasHeight: a
2112
+ canvasHeight: h
2111
2113
  });
2112
- this.performTransform(h);
2114
+ this.performTransform(a);
2113
2115
  }
2114
2116
  scaleViewport(e, t, s) {
2115
- const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2117
+ const i = this.canvas.viewport.getViewportMatrix(), n = st(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2116
2118
  prevTransform: i,
2117
2119
  nextTransform: n,
2118
- canvasWidth: a,
2119
- canvasHeight: h
2120
+ canvasWidth: h,
2121
+ canvasHeight: a
2120
2122
  });
2121
2123
  this.performTransform(d);
2122
2124
  }
2123
2125
  stopMouseDrag() {
2124
- U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2126
+ I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2125
2127
  }
2126
2128
  removeMouseDragListeners() {
2127
2129
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2142,8 +2144,8 @@ class $ {
2142
2144
  this.transformInProgress = !1, this.params.onTransformFinished();
2143
2145
  }
2144
2146
  }
2145
- class Z {
2146
- constructor(e, t, s, i, n, a) {
2147
+ class J {
2148
+ constructor(e, t, s, i, n, h) {
2147
2149
  o(this, "canvasResizeObserver");
2148
2150
  o(this, "nodeHorizontal");
2149
2151
  o(this, "nodeVertical");
@@ -2174,11 +2176,11 @@ class Z {
2174
2176
  this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
2175
2177
  });
2176
2178
  o(this, "userTransformInProgress", !1);
2177
- this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
2179
+ this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
2178
2180
  const c = d[0];
2179
2181
  this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
2180
2182
  }), this.viewport = e.viewport;
2181
- const h = {
2183
+ const a = {
2182
2184
  ...i,
2183
2185
  onResizeTransformStarted: () => {
2184
2186
  this.userTransformInProgress = !0, i.onResizeTransformStarted();
@@ -2198,21 +2200,21 @@ class Z {
2198
2200
  this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
2199
2201
  }
2200
2202
  };
2201
- $.configure(
2203
+ F.configure(
2202
2204
  e,
2203
2205
  this.element,
2204
2206
  this.window,
2205
- h
2207
+ a
2206
2208
  ), 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);
2207
2209
  }
2208
- static configure(e, t, s, i, n, a) {
2209
- new Z(
2210
+ static configure(e, t, s, i, n, h) {
2211
+ new J(
2210
2212
  e,
2211
2213
  t,
2212
2214
  s,
2213
2215
  i,
2214
2216
  n,
2215
- a
2217
+ h
2216
2218
  );
2217
2219
  }
2218
2220
  scheduleLoadAreaAroundViewport() {
@@ -2221,32 +2223,32 @@ class Z {
2221
2223
  });
2222
2224
  }
2223
2225
  scheduleEnsureViewportAreaLoaded() {
2224
- const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
2225
- this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
2226
+ const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, h = this.viewportMatrix.y + t + this.nodeVertical;
2227
+ this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
2226
2228
  }
2227
2229
  loadAreaAroundViewport() {
2228
- const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
2229
- this.trigger.emit({ x: s, y: i, width: n, height: a });
2230
+ const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, h = 3 * t + 2 * this.nodeVertical;
2231
+ this.trigger.emit({ x: s, y: i, width: n, height: h });
2230
2232
  }
2231
2233
  }
2232
- const st = () => {
2234
+ const it = () => {
2233
2235
  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2234
2236
  return r.style.position = "absolute", r.style.inset = "0", r;
2235
- }, it = () => {
2237
+ }, nt = () => {
2236
2238
  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
2237
2239
  return r.setAttribute("fill", "url(#pattern)"), r;
2238
- }, nt = () => {
2240
+ }, ht = () => {
2239
2241
  const r = document.createElementNS(
2240
2242
  "http://www.w3.org/2000/svg",
2241
2243
  "pattern"
2242
2244
  );
2243
2245
  return r.setAttribute("id", "pattern"), r;
2244
2246
  };
2245
- class J {
2247
+ class Q {
2246
2248
  constructor(e, t, s) {
2247
- o(this, "svg", st());
2248
- o(this, "patternRenderingRectangle", it());
2249
- o(this, "pattern", nt());
2249
+ o(this, "svg", it());
2250
+ o(this, "patternRenderingRectangle", nt());
2251
+ o(this, "pattern", ht());
2250
2252
  o(this, "patternContent");
2251
2253
  o(this, "tileWidth");
2252
2254
  o(this, "tileHeight");
@@ -2257,8 +2259,8 @@ class J {
2257
2259
  o(this, "resizeObserver", new ResizeObserver((e) => {
2258
2260
  const t = e[0], { width: s, height: i } = t.contentRect;
2259
2261
  this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
2260
- const n = this.tileWidth / s, a = this.tileHeight / i;
2261
- this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
2262
+ const n = this.tileWidth / s, h = this.tileHeight / i;
2263
+ this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
2262
2264
  }));
2263
2265
  o(this, "onAfterTransformUpdated", () => {
2264
2266
  const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
@@ -2276,14 +2278,14 @@ class J {
2276
2278
  n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.host), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated(), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2277
2279
  }
2278
2280
  static configure(e, t, s) {
2279
- new J(e, t, s);
2281
+ new Q(e, t, s);
2280
2282
  }
2281
2283
  updateVisibility() {
2282
2284
  const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
2283
2285
  t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
2284
2286
  }
2285
2287
  }
2286
- class F {
2288
+ class O {
2287
2289
  constructor(e, t, s, i) {
2288
2290
  o(this, "onAfterPortMarked", (e) => {
2289
2291
  const t = this.canvas.graph.getPort(e);
@@ -2307,7 +2309,7 @@ class F {
2307
2309
  }));
2308
2310
  });
2309
2311
  o(this, "onWindowMouseMove", (e) => {
2310
- if (!L(
2312
+ if (!R(
2311
2313
  this.window,
2312
2314
  this.element,
2313
2315
  e.clientX,
@@ -2338,7 +2340,7 @@ class F {
2338
2340
  });
2339
2341
  o(this, "onWindowTouchMove", (e) => {
2340
2342
  const t = e.touches[0];
2341
- if (!L(
2343
+ if (!R(
2342
2344
  this.window,
2343
2345
  this.element,
2344
2346
  t.clientX,
@@ -2367,7 +2369,7 @@ class F {
2367
2369
  this.canvas = e, this.element = t, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2368
2370
  }
2369
2371
  static configure(e, t, s, i) {
2370
- new F(e, t, s, i);
2372
+ new O(e, t, s, i);
2371
2373
  }
2372
2374
  hookPortEvents(e) {
2373
2375
  e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2386,7 +2388,7 @@ class F {
2386
2388
  this.params.onStopDrag(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2387
2389
  }
2388
2390
  }
2389
- class Q {
2391
+ class _ {
2390
2392
  constructor(e, t, s, i, n) {
2391
2393
  o(this, "overlayCanvas");
2392
2394
  o(this, "staticPortId", null);
@@ -2394,10 +2396,10 @@ class Q {
2394
2396
  o(this, "onEdgeCreated", (e) => {
2395
2397
  this.params.onAfterEdgeCreated(e);
2396
2398
  });
2397
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
2399
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
2398
2400
  this.overlayLayer,
2399
2401
  this.viewportStore
2400
- ), F.configure(
2402
+ ), O.configure(
2401
2403
  this.canvas,
2402
2404
  this.overlayLayer,
2403
2405
  this.window,
@@ -2407,21 +2409,21 @@ class Q {
2407
2409
  onStopDrag: () => {
2408
2410
  this.resetDragState();
2409
2411
  },
2410
- onPortPointerDown: (a, h) => {
2411
- const d = this.params.connectionTypeResolver(a);
2412
- return d === null ? !1 : (this.grabPort(a, h, d), !0);
2412
+ onPortPointerDown: (h, a) => {
2413
+ const d = this.params.connectionTypeResolver(h);
2414
+ return d === null ? !1 : (this.grabPort(h, a, d), !0);
2413
2415
  },
2414
- onPointerMove: (a) => {
2415
- this.moveDraggingPort(a);
2416
+ onPointerMove: (h) => {
2417
+ this.moveDraggingPort(h);
2416
2418
  },
2417
- onPointerUp: (a) => {
2418
- this.tryCreateConnection(a);
2419
+ onPointerUp: (h) => {
2420
+ this.tryCreateConnection(h);
2419
2421
  }
2420
2422
  }
2421
2423
  );
2422
2424
  }
2423
2425
  static configure(e, t, s, i, n) {
2424
- new Q(
2426
+ new _(
2425
2427
  e,
2426
2428
  t,
2427
2429
  s,
@@ -2432,34 +2434,34 @@ class Q {
2432
2434
  grabPort(e, t, s) {
2433
2435
  const i = this.canvas.graph.getPort(e);
2434
2436
  this.staticPortId = e;
2435
- const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
2436
- x: a - d.x,
2437
- y: h - d.y
2437
+ const n = i.element.getBoundingClientRect(), h = n.x + n.width / 2, a = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
2438
+ x: h - d.x,
2439
+ y: a - d.y
2438
2440
  }), g = T(c, {
2439
2441
  x: t.x - d.x,
2440
2442
  y: t.y - d.y
2441
2443
  }), p = {
2442
- overlayId: b.Static,
2444
+ overlayId: P.Static,
2443
2445
  portCoords: l,
2444
2446
  portDirection: i.direction
2445
2447
  }, f = {
2446
- overlayId: b.Dragging,
2448
+ overlayId: P.Dragging,
2447
2449
  portCoords: g,
2448
2450
  portDirection: this.params.dragPortDirection
2449
2451
  };
2450
2452
  this.isTargetDragging = s === "direct";
2451
2453
  const [v, y] = this.isTargetDragging ? [p, f] : [f, p];
2452
- this.overlayCanvas.addNode(V(v)), this.overlayCanvas.addNode(V(y)), this.overlayCanvas.addEdge({
2454
+ this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addEdge({
2453
2455
  from: v.overlayId,
2454
2456
  to: y.overlayId,
2455
- shape: this.params.edgeShapeFactory(b.Edge)
2457
+ shape: this.params.edgeShapeFactory(P.Edge)
2456
2458
  });
2457
2459
  }
2458
2460
  resetDragState() {
2459
2461
  this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2460
2462
  }
2461
2463
  tryCreateConnection(e) {
2462
- const t = ve(this.canvas.graph, e);
2464
+ const t = me(this.canvas.graph, e);
2463
2465
  if (t === null) {
2464
2466
  this.params.onEdgeCreationInterrupted(
2465
2467
  this.staticPortId,
@@ -2467,21 +2469,21 @@ class Q {
2467
2469
  );
2468
2470
  return;
2469
2471
  }
2470
- const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
2471
- a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
2472
+ const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, h = this.params.connectionPreprocessor(n);
2473
+ h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
2472
2474
  }
2473
2475
  moveDraggingPort(e) {
2474
2476
  const t = this.overlayLayer.getBoundingClientRect(), s = {
2475
2477
  x: e.x - t.x,
2476
2478
  y: e.y - t.y
2477
2479
  }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
2478
- this.overlayCanvas.updateNode(b.Dragging, {
2480
+ this.overlayCanvas.updateNode(P.Dragging, {
2479
2481
  x: n.x,
2480
2482
  y: n.y
2481
2483
  });
2482
2484
  }
2483
2485
  }
2484
- class _ {
2486
+ class q {
2485
2487
  constructor(e, t, s, i, n) {
2486
2488
  o(this, "overlayCanvas");
2487
2489
  o(this, "staticPortId", null);
@@ -2490,10 +2492,10 @@ class _ {
2490
2492
  o(this, "onEdgeReattached", (e) => {
2491
2493
  this.params.onAfterEdgeReattached(e);
2492
2494
  });
2493
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
2495
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
2494
2496
  this.overlayLayer,
2495
2497
  this.viewportStore
2496
- ), F.configure(
2498
+ ), O.configure(
2497
2499
  this.canvas,
2498
2500
  this.overlayLayer,
2499
2501
  this.window,
@@ -2503,18 +2505,18 @@ class _ {
2503
2505
  onStopDrag: () => {
2504
2506
  this.resetDragState();
2505
2507
  },
2506
- onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
2507
- onPointerMove: (a) => {
2508
- this.moveDraggingPort(a);
2508
+ onPortPointerDown: (h, a) => this.tryStartEdgeDragging(h, a),
2509
+ onPointerMove: (h) => {
2510
+ this.moveDraggingPort(h);
2509
2511
  },
2510
- onPointerUp: (a) => {
2511
- this.tryCreateConnection(a);
2512
+ onPointerUp: (h) => {
2513
+ this.tryCreateConnection(h);
2512
2514
  }
2513
2515
  }
2514
2516
  );
2515
2517
  }
2516
2518
  static configure(e, t, s, i, n) {
2517
- new _(
2519
+ new q(
2518
2520
  e,
2519
2521
  t,
2520
2522
  s,
@@ -2529,9 +2531,9 @@ class _ {
2529
2531
  const i = this.canvas.graph.getEdge(s);
2530
2532
  if (i === null)
2531
2533
  return !1;
2532
- const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
2533
- this.staticPortId = h, this.isTargetDragging = a;
2534
- const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
2534
+ const n = e === i.from, h = e === i.to, a = n ? i.to : i.from;
2535
+ this.staticPortId = a, this.isTargetDragging = h;
2536
+ const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(a), l = c.element.getBoundingClientRect(), g = {
2535
2537
  x: l.x + l.width / 2,
2536
2538
  y: l.y + l.height / 2
2537
2539
  }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), v = T(p, {
@@ -2549,19 +2551,19 @@ class _ {
2549
2551
  priority: i.priority
2550
2552
  }, this.canvas.removeEdge(s);
2551
2553
  const E = {
2552
- overlayId: b.Static,
2554
+ overlayId: P.Static,
2553
2555
  portCoords: v,
2554
2556
  portDirection: c.direction
2555
2557
  }, x = {
2556
- overlayId: b.Dragging,
2558
+ overlayId: P.Dragging,
2557
2559
  portCoords: y,
2558
2560
  portDirection: d.direction
2559
- }, [P, D] = this.isTargetDragging ? [E, x] : [x, E];
2560
- this.overlayCanvas.addNode(V(P)), this.overlayCanvas.addNode(V(D));
2561
- const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
2561
+ }, [b, D] = this.isTargetDragging ? [E, x] : [x, E];
2562
+ this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(D));
2563
+ const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
2562
2564
  return this.overlayCanvas.addEdge({
2563
- id: b.Edge,
2564
- from: P.overlayId,
2565
+ id: P.Edge,
2566
+ from: b.overlayId,
2565
2567
  to: D.overlayId,
2566
2568
  shape: N
2567
2569
  }), !0;
@@ -2574,83 +2576,84 @@ class _ {
2574
2576
  x: e.x - t.x,
2575
2577
  y: e.y - t.y
2576
2578
  }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
2577
- this.overlayCanvas.updateNode(b.Dragging, {
2579
+ this.overlayCanvas.updateNode(P.Dragging, {
2578
2580
  x: n.x,
2579
2581
  y: n.y
2580
2582
  });
2581
2583
  }
2582
2584
  tryCreateConnection(e) {
2583
- const t = ve(this.canvas.graph, e);
2584
- if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
2585
- const h = this.draggingEdgePayload;
2585
+ const t = me(this.canvas.graph, e);
2586
+ if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
2587
+ const d = this.draggingEdgePayload;
2586
2588
  this.params.onEdgeReattachInterrupted({
2587
- id: h.id,
2588
- from: h.from,
2589
- to: h.to,
2590
- shape: h.shape,
2591
- priority: h.priority
2589
+ id: d.id,
2590
+ from: d.from,
2591
+ to: d.to,
2592
+ shape: d.shape,
2593
+ priority: d.priority
2592
2594
  });
2593
2595
  return;
2594
2596
  }
2595
- const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = {
2597
+ const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, h = {
2598
+ id: n.id,
2596
2599
  from: s,
2597
2600
  to: i,
2598
- shape: this.draggingEdgePayload.shape,
2599
- priority: this.draggingEdgePayload.priority
2600
- }, a = this.params.connectionPreprocessor(n);
2601
+ shape: n.shape,
2602
+ priority: n.priority
2603
+ }, a = this.params.connectionPreprocessor(h);
2601
2604
  if (a !== null)
2602
2605
  this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
2603
2606
  else {
2604
- const h = this.draggingEdgePayload;
2607
+ const d = this.draggingEdgePayload;
2605
2608
  this.params.onEdgeReattachPrevented({
2606
- id: h.id,
2607
- from: h.from,
2608
- to: h.to,
2609
- shape: h.shape,
2610
- priority: h.priority
2609
+ id: d.id,
2610
+ from: d.from,
2611
+ to: d.to,
2612
+ shape: d.shape,
2613
+ priority: d.priority
2611
2614
  });
2612
2615
  }
2613
2616
  }
2614
2617
  }
2615
- const ht = () => {
2618
+ const at = () => {
2616
2619
  const r = document.createElement("div");
2617
2620
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
2618
- }, z = () => {
2621
+ }, X = () => {
2619
2622
  const r = document.createElement("div");
2620
2623
  return r.style.position = "absolute", r.style.inset = "0", r;
2621
- }, de = () => {
2622
- const r = z();
2624
+ }, ce = () => {
2625
+ const r = X();
2623
2626
  return r.style.pointerEvents = "none", r;
2624
2627
  };
2625
- class at {
2628
+ class dt {
2626
2629
  constructor(e) {
2627
- o(this, "background", z());
2628
- o(this, "main", z());
2629
- o(this, "overlayConnectablePorts", de());
2630
- o(this, "overlayDraggableEdges", de());
2631
- o(this, "host", ht());
2630
+ o(this, "background", X());
2631
+ o(this, "main", X());
2632
+ o(this, "overlayConnectablePorts", ce());
2633
+ o(this, "overlayDraggableEdges", ce());
2634
+ o(this, "host", at());
2632
2635
  this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
2633
2636
  }
2634
2637
  destroy() {
2635
2638
  this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
2636
2639
  }
2637
2640
  }
2638
- const X = (r) => () => r, ce = X(0), dt = () => {
2641
+ const Y = (r) => () => r, ge = Y(0), ct = () => {
2639
2642
  let r = 0;
2640
2643
  return () => r++;
2641
- }, ct = (r, e) => {
2642
- let t = ce, s = ce;
2643
- const i = dt();
2644
- return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = X(r)), typeof e == "number" && (s = X(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
2644
+ }, gt = (r, e) => {
2645
+ let t = ge, s = ge;
2646
+ const i = ct();
2647
+ return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = Y(r)), typeof e == "number" && (s = Y(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
2645
2648
  nodesPriorityFn: t,
2646
2649
  edgesPriorityFn: s
2647
2650
  };
2648
- }, q = (r) => {
2651
+ }, ee = (r) => {
2649
2652
  if (typeof r == "function")
2650
2653
  return r;
2651
2654
  switch (r == null ? void 0 : r.type) {
2652
2655
  case "straight":
2653
- return () => new Qe({
2656
+ return () => new _e({
2654
2657
  color: r.color,
2655
2658
  width: r.width,
2656
2659
  arrowLength: r.arrowLength,
@@ -2664,7 +2667,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2664
2667
  detourDirection: r.detourDirection
2665
2668
  });
2666
2669
  case "horizontal":
2667
- return () => new Je({
2670
+ return () => new Qe({
2668
2671
  color: r.color,
2669
2672
  width: r.width,
2670
2673
  arrowLength: r.arrowLength,
@@ -2678,7 +2681,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2678
2681
  detourDirection: r.detourDirection
2679
2682
  });
2680
2683
  case "vertical":
2681
- return () => new _e({
2684
+ return () => new qe({
2682
2685
  color: r.color,
2683
2686
  width: r.width,
2684
2687
  arrowLength: r.arrowLength,
@@ -2692,7 +2695,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2692
2695
  detourDirection: r.detourDirection
2693
2696
  });
2694
2697
  case "direct":
2695
- return () => new Pe({
2698
+ return () => new Te({
2696
2699
  color: r.color,
2697
2700
  width: r.width,
2698
2701
  arrowLength: r.arrowLength,
@@ -2703,7 +2706,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2703
2706
  targetOffset: r.targetOffset
2704
2707
  });
2705
2708
  default:
2706
- return () => new Ze({
2709
+ return () => new Je({
2707
2710
  color: r.color,
2708
2711
  width: r.width,
2709
2712
  arrowLength: r.arrowLength,
@@ -2717,64 +2720,64 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2717
2720
  detourDirection: r.detourDirection
2718
2721
  });
2719
2722
  }
2720
- }, gt = (r) => {
2721
- var t, s, i, n, a;
2722
- const e = ct(
2723
+ }, lt = (r) => {
2724
+ var t, s, i, n, h;
2725
+ const e = gt(
2723
2726
  (t = r.nodes) == null ? void 0 : t.priority,
2724
2727
  (s = r.edges) == null ? void 0 : s.priority
2725
2728
  );
2726
2729
  return {
2727
2730
  nodes: {
2728
- centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
2731
+ centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ye,
2729
2732
  priorityFn: e.nodesPriorityFn
2730
2733
  },
2731
2734
  ports: {
2732
2735
  direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
2733
2736
  },
2734
2737
  edges: {
2735
- shapeFactory: q(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
2738
+ shapeFactory: ee(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
2736
2739
  priorityFn: e.edgesPriorityFn
2737
2740
  }
2738
2741
  };
2739
- }, lt = (r) => {
2742
+ }, ut = (r) => {
2740
2743
  var p, f, v, y, E, x;
2741
2744
  const e = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
2742
2745
  }), t = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
2743
- }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, a = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
2746
+ }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
2744
2747
  return {
2745
2748
  moveOnTop: i,
2746
2749
  moveEdgesOnTop: n,
2747
- dragCursor: h,
2750
+ dragCursor: a,
2748
2751
  mouseDownEventVerifier: c,
2749
- mouseUpEventVerifier: l !== void 0 ? l : (P) => P.button === 0,
2752
+ mouseUpEventVerifier: l !== void 0 ? l : (b) => b.button === 0,
2750
2753
  onNodeDrag: e,
2751
2754
  onBeforeNodeDrag: t,
2752
2755
  onNodeDragFinished: s
2753
2756
  };
2754
- }, ut = (r) => {
2757
+ }, pt = (r) => {
2755
2758
  const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
2756
2759
  return (n) => {
2757
- let a = n.nextTransform.x, h = n.nextTransform.y;
2758
- a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
2760
+ let h = n.nextTransform.x, a = n.nextTransform.y;
2761
+ h < e && h < n.prevTransform.x && (h = Math.min(n.prevTransform.x, e));
2759
2762
  const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
2760
- a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
2763
+ h > c && h > n.prevTransform.x && (h = Math.max(n.prevTransform.x, c)), a < s && a < n.prevTransform.y && (a = Math.min(n.prevTransform.y, s));
2761
2764
  const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
2762
- return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
2765
+ return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
2763
2766
  };
2764
- }, pt = (r) => {
2767
+ }, wt = (r) => {
2765
2768
  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
2766
2769
  return (n) => {
2767
- const a = n.prevTransform, h = n.nextTransform;
2768
- let d = h.scale, c = h.x, l = h.y;
2769
- if (h.scale > i && h.scale > a.scale) {
2770
- d = Math.max(a.scale, i), c = a.x, l = a.y;
2771
- const g = (d - a.scale) / (h.scale - a.scale);
2772
- c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2770
+ const h = n.prevTransform, a = n.nextTransform;
2771
+ let d = a.scale, c = a.x, l = a.y;
2772
+ if (a.scale > i && a.scale > h.scale) {
2773
+ d = Math.max(h.scale, i), c = h.x, l = h.y;
2774
+ const g = (d - h.scale) / (a.scale - h.scale);
2775
+ c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
2773
2776
  }
2774
- if (h.scale < s && h.scale < a.scale) {
2775
- d = Math.min(a.scale, s), c = a.x, l = a.y;
2776
- const g = (d - a.scale) / (h.scale - a.scale);
2777
- c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2777
+ if (a.scale < s && a.scale < h.scale) {
2778
+ d = Math.min(h.scale, s), c = h.x, l = h.y;
2779
+ const g = (d - h.scale) / (a.scale - h.scale);
2780
+ c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
2778
2781
  }
2779
2782
  return {
2780
2783
  scale: d,
@@ -2782,7 +2785,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2782
2785
  y: l
2783
2786
  };
2784
2787
  };
2785
- }, wt = (r) => (e) => r.reduce(
2788
+ }, ft = (r) => (e) => r.reduce(
2786
2789
  (t, s) => s({
2787
2790
  prevTransform: e.prevTransform,
2788
2791
  nextTransform: t,
@@ -2790,75 +2793,75 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2790
2793
  canvasHeight: e.canvasHeight
2791
2794
  }),
2792
2795
  e.nextTransform
2793
- ), ge = (r) => {
2796
+ ), le = (r) => {
2794
2797
  if (typeof r == "function")
2795
2798
  return r;
2796
2799
  switch (r.type) {
2797
2800
  case "scale-limit":
2798
- return pt({
2801
+ return wt({
2799
2802
  minContentScale: r.minContentScale ?? 0,
2800
2803
  maxContentScale: r.maxContentScale ?? 1 / 0
2801
2804
  });
2802
2805
  case "shift-limit":
2803
- return ut({
2806
+ return pt({
2804
2807
  minX: r.minX ?? -1 / 0,
2805
2808
  maxX: r.maxX ?? 1 / 0,
2806
2809
  minY: r.minY ?? -1 / 0,
2807
2810
  maxY: r.maxY ?? 1 / 0
2808
2811
  });
2809
2812
  }
2810
- }, le = (r) => {
2811
- var v, y, E, x, P, D, N, R, ee, te, re, oe;
2813
+ }, ue = (r) => {
2814
+ var v, y, E, x, b, D, N, C, te, re, oe, se;
2812
2815
  const e = (v = r == null ? void 0 : r.scale) == null ? void 0 : v.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
2813
2816
  let i;
2814
- s !== void 0 ? Array.isArray(s) ? i = wt(
2817
+ s !== void 0 ? Array.isArray(s) ? i = ft(
2815
2818
  s.map(
2816
- (M) => ge(M)
2819
+ (M) => le(M)
2817
2820
  )
2818
- ) : i = ge(s) : i = (M) => M.nextTransform;
2819
- const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
2820
- }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
2821
- }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
2821
+ ) : i = le(s) : i = (M) => M.nextTransform;
2822
+ const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
2823
+ }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
2824
+ }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
2822
2825
  return {
2823
2826
  wheelSensitivity: t,
2824
- onTransformStarted: ((R = r == null ? void 0 : r.events) == null ? void 0 : R.onTransformStarted) ?? (() => {
2827
+ onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
2825
2828
  }),
2826
- onTransformFinished: ((ee = r == null ? void 0 : r.events) == null ? void 0 : ee.onTransformFinished) ?? (() => {
2829
+ onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
2827
2830
  }),
2828
- onBeforeTransformChange: a,
2829
- onTransformChange: h,
2831
+ onBeforeTransformChange: h,
2832
+ onTransformChange: a,
2830
2833
  transformPreprocessor: i,
2831
2834
  shiftCursor: n,
2832
2835
  mouseDownEventVerifier: c,
2833
2836
  mouseUpEventVerifier: g,
2834
2837
  mouseWheelEventVerifier: f,
2835
- scaleWheelFinishTimeout: ((te = r == null ? void 0 : r.scale) == null ? void 0 : te.wheelFinishTimeout) ?? 500,
2836
- onResizeTransformStarted: ((re = r == null ? void 0 : r.events) == null ? void 0 : re.onResizeTransformStarted) ?? (() => {
2838
+ scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
2839
+ onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
2837
2840
  }),
2838
- onResizeTransformFinished: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformFinished) ?? (() => {
2841
+ onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
2839
2842
  })
2840
2843
  };
2841
- }, ft = (r, e) => {
2844
+ }, vt = (r, e) => {
2842
2845
  const t = document.createElementNS(
2843
2846
  "http://www.w3.org/2000/svg",
2844
2847
  "circle"
2845
2848
  );
2846
2849
  return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
2847
- }, vt = (r) => r instanceof SVGElement ? r : ft(
2850
+ }, mt = (r) => r instanceof SVGElement ? r : vt(
2848
2851
  (r == null ? void 0 : r.radius) ?? 1.5,
2849
2852
  (r == null ? void 0 : r.color) ?? "#d8d8d8"
2850
- ), mt = (r) => {
2851
- const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = vt(r.renderer ?? {});
2853
+ ), yt = (r) => {
2854
+ const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = mt(r.renderer ?? {});
2852
2855
  return {
2853
2856
  tileWidth: t,
2854
2857
  tileHeight: s,
2855
2858
  renderer: i,
2856
2859
  maxViewportScale: r.maxViewportScale ?? 10
2857
2860
  };
2858
- }, yt = (r, e, t) => {
2861
+ }, Et = (r, e, t) => {
2859
2862
  var c, l, g;
2860
- const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
2861
- }, h = () => {
2863
+ const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
2864
+ }, a = () => {
2862
2865
  }, d = () => {
2863
2866
  };
2864
2867
  return {
@@ -2866,19 +2869,19 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2866
2869
  connectionPreprocessor: r.connectionPreprocessor ?? i,
2867
2870
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
2868
2871
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
2869
- onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
2872
+ onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? h,
2870
2873
  onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
2871
- onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
2874
+ onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
2872
2875
  dragPortDirection: r.dragPortDirection ?? t,
2873
- edgeShapeFactory: r.edgeShape !== void 0 ? q(r.edgeShape) : e
2876
+ edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
2874
2877
  };
2875
- }, Et = (r, e) => {
2878
+ }, At = (r, e) => {
2876
2879
  var c, l, g;
2877
2880
  const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
2878
2881
  const f = e.getPortAdjacentEdgeIds(p);
2879
2882
  return f.length > 0 ? f[f.length - 1] : null;
2880
- }, a = () => {
2881
2883
  }, h = () => {
2884
+ }, a = () => {
2882
2885
  }, d = () => {
2883
2886
  };
2884
2887
  return {
@@ -2886,13 +2889,24 @@ const X = (r) => () => r, ce = X(0), dt = () => {
2886
2889
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
2887
2890
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
2888
2891
  draggingEdgeResolver: r.draggingEdgeResolver ?? n,
2889
- draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? q(r.draggingEdgeShape) : null,
2890
- onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
2892
+ draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
2893
+ onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
2891
2894
  onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
2892
- onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
2895
+ onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
2896
+ };
2897
+ }, xt = (r) => ({
2898
+ nodeVerticalRadius: r.nodeContainingRadius.vertical,
2899
+ nodeHorizontalRadius: r.nodeContainingRadius.horizontal
2900
+ }), St = (r) => {
2901
+ var e, t;
2902
+ return {
2903
+ onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
2904
+ }),
2905
+ onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
2906
+ })
2893
2907
  };
2894
2908
  };
2895
- class St {
2909
+ class Tt {
2896
2910
  constructor(e) {
2897
2911
  o(this, "element", null);
2898
2912
  o(this, "canvasDefaults", {});
@@ -2944,6 +2958,8 @@ class St {
2944
2958
  return this.hasResizeReactiveNodes = !0, this;
2945
2959
  }
2946
2960
  /**
2961
+ * @deprecated
2962
+ * do not use
2947
2963
  * sets emitter for rendering graph inside bounded area
2948
2964
  */
2949
2965
  enableBoxAreaRendering(e) {
@@ -2980,38 +2996,43 @@ class St {
2980
2996
  "unable to build canvas when no attach element specified"
2981
2997
  );
2982
2998
  let e = this.boxRenderingTrigger;
2983
- this.virtualScrollConfig !== void 0 && e === void 0 && (e = new pe());
2984
- const t = new fe(), s = new $e(), i = new at(this.element);
2985
- let n = new ue(
2999
+ this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
3000
+ const t = new ve(), s = new Fe(), i = new dt(this.element);
3001
+ let n = new pe(
2986
3002
  t,
2987
3003
  s,
2988
3004
  i.main
2989
3005
  );
2990
- e !== void 0 && (n = new Ue(n, t, e));
2991
- const a = gt(this.canvasDefaults), h = new we(
3006
+ e !== void 0 && (n = new Ie(
3007
+ n,
3008
+ t,
3009
+ e,
3010
+ St(this.virtualScrollConfig)
3011
+ ));
3012
+ const h = lt(this.canvasDefaults), a = new fe(
2992
3013
  this.element,
2993
3014
  t,
2994
3015
  s,
2995
3016
  n,
2996
- a
3017
+ h
2997
3018
  );
2998
- if (this.hasBackground && J.configure(
2999
- h,
3000
- mt(this.backgroundConfig),
3019
+ if (this.hasBackground && Q.configure(
3020
+ a,
3021
+ yt(this.backgroundConfig),
3001
3022
  i.background
3002
- ), this.hasResizeReactiveNodes && Y.configure(h), this.hasDraggableNode && K.configure(
3003
- h,
3023
+ ), this.hasResizeReactiveNodes && H.configure(a), this.hasDraggableNode && Z.configure(
3024
+ a,
3004
3025
  i.main,
3005
3026
  this.window,
3006
- lt(this.dragConfig)
3027
+ ut(this.dragConfig)
3007
3028
  ), this.hasUserConnectablePorts) {
3008
- const c = yt(
3029
+ const c = Et(
3009
3030
  this.connectablePortsConfig,
3010
- a.edges.shapeFactory,
3011
- a.ports.direction
3031
+ h.edges.shapeFactory,
3032
+ h.ports.direction
3012
3033
  );
3013
- Q.configure(
3014
- h,
3034
+ _.configure(
3035
+ a,
3015
3036
  i.overlayConnectablePorts,
3016
3037
  s,
3017
3038
  this.window,
@@ -3019,35 +3040,35 @@ class St {
3019
3040
  );
3020
3041
  }
3021
3042
  if (this.hasUserDraggableEdges) {
3022
- const c = Et(
3043
+ const c = At(
3023
3044
  this.draggableEdgesConfig,
3024
- h.graph
3045
+ a.graph
3025
3046
  );
3026
- _.configure(
3027
- h,
3047
+ q.configure(
3048
+ a,
3028
3049
  i.overlayDraggableEdges,
3029
3050
  s,
3030
3051
  this.window,
3031
3052
  c
3032
3053
  );
3033
3054
  }
3034
- this.virtualScrollConfig !== void 0 ? Z.configure(
3035
- h,
3055
+ this.virtualScrollConfig !== void 0 ? J.configure(
3056
+ a,
3036
3057
  i.main,
3037
3058
  this.window,
3038
- le(this.transformConfig),
3059
+ ue(this.transformConfig),
3039
3060
  e,
3040
- this.virtualScrollConfig
3041
- ) : this.hasTransformableViewport && $.configure(
3042
- h,
3061
+ xt(this.virtualScrollConfig)
3062
+ ) : this.hasTransformableViewport && F.configure(
3063
+ a,
3043
3064
  i.main,
3044
3065
  this.window,
3045
- le(this.transformConfig)
3066
+ ue(this.transformConfig)
3046
3067
  ), this.reset();
3047
3068
  const d = () => {
3048
- i.destroy(), h.onBeforeDestroy.unsubscribe(d);
3069
+ i.destroy(), a.onBeforeDestroy.unsubscribe(d);
3049
3070
  };
3050
- return h.onBeforeDestroy.subscribe(d), h;
3071
+ return a.onBeforeDestroy.subscribe(d), a;
3051
3072
  }
3052
3073
  /**
3053
3074
  * @deprecated
@@ -3058,17 +3079,17 @@ class St {
3058
3079
  }
3059
3080
  }
3060
3081
  export {
3061
- Ze as BezierEdgeShape,
3062
- St as CanvasBuilder,
3063
- Pe as DirectEdgeShape,
3064
- pe as EventSubject,
3065
- Je as HorizontalEdgeShape,
3082
+ Je as BezierEdgeShape,
3083
+ Tt as CanvasBuilder,
3084
+ Te as DirectEdgeShape,
3085
+ we as EventSubject,
3086
+ Qe as HorizontalEdgeShape,
3066
3087
  S as HtmlGraphError,
3067
- tt as InteractiveEdgeError,
3068
- Te as InteractiveEdgeShape,
3069
- W as LineEdgeShape,
3070
- xt as MedianEdgeShape,
3071
- xt as MidpointEdgeShape,
3072
- Qe as StraightEdgeShape,
3073
- _e as VerticalEdgeShape
3088
+ rt as InteractiveEdgeError,
3089
+ De as InteractiveEdgeShape,
3090
+ $ as LineEdgeShape,
3091
+ bt as MedianEdgeShape,
3092
+ bt as MidpointEdgeShape,
3093
+ _e as StraightEdgeShape,
3094
+ qe as VerticalEdgeShape
3074
3095
  };