@html-graph/html-graph 3.19.0 → 3.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html-graph.d.ts +13 -2
  2. package/dist/html-graph.js +534 -456
  3. package/dist/html-graph.umd.cjs +1 -1
  4. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,24 +1,24 @@
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);
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
4
  const D = (r, e) => ({
5
5
  x: r.scale * e.x + r.x,
6
6
  y: r.scale * e.y + r.y
7
7
  });
8
- var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
9
- const Re = () => {
8
+ var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
9
+ const Le = () => {
10
10
  const r = document.createElement("div");
11
11
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
12
- }, Ce = () => {
12
+ }, Re = () => {
13
13
  const r = document.createElement("div");
14
14
  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
15
- }, Ve = (r) => {
15
+ }, Ce = (r) => {
16
16
  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
17
17
  };
18
18
  class pe {
19
19
  constructor(e, t, s) {
20
- o(this, "host", Re());
21
- o(this, "container", Ce());
20
+ o(this, "host", Le());
21
+ o(this, "container", Re());
22
22
  o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
23
23
  o(this, "applyTransform", () => {
24
24
  const e = this.viewportStore.getContentMatrix();
@@ -28,7 +28,7 @@ class pe {
28
28
  }
29
29
  attachNode(e) {
30
30
  const t = this.graphStore.getNode(e);
31
- Ve(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
31
+ Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
32
32
  }
33
33
  detachNode(e) {
34
34
  const t = this.graphStore.getNode(e);
@@ -53,8 +53,8 @@ class pe {
53
53
  this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
54
54
  }
55
55
  updateNodePosition(e) {
56
- 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;
57
- t.element.style.transform = `translate(${a}px, ${d}px)`;
56
+ 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;
57
+ t.element.style.transform = `translate(${h}px, ${d}px)`;
58
58
  }
59
59
  updateNodePriority(e) {
60
60
  const t = this.graphStore.getNode(e);
@@ -67,34 +67,34 @@ class pe {
67
67
  this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
68
68
  }
69
69
  renderEdge(e) {
70
- 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(
70
+ 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(
71
71
  t.from,
72
72
  s,
73
73
  n,
74
- a,
74
+ h,
75
75
  d
76
76
  ), l = this.createEdgeRenderPort(
77
77
  t.to,
78
78
  i,
79
- h,
80
79
  a,
80
+ h,
81
81
  d
82
82
  );
83
- let g = L.Line;
84
- s.element === i.element ? g = L.PortCycle : s.nodeId === i.nodeId && (g = L.NodeCycle), t.shape.render({ from: c, to: l, category: g });
83
+ let g = R.Line;
84
+ s.element === i.element ? g = R.PortCycle : s.nodeId === i.nodeId && (g = R.NodeCycle), t.shape.render({ from: c, to: l, category: g });
85
85
  }
86
86
  updateEdgePriority(e) {
87
87
  const t = this.graphStore.getEdge(e);
88
88
  t.shape.svg.style.zIndex = `${t.priority}`;
89
89
  }
90
90
  createEdgeRenderPort(e, t, s, i, n) {
91
- const h = {
91
+ const a = {
92
92
  x: s.left - i.left,
93
93
  y: s.top - i.top
94
- }, a = D(n, h);
94
+ }, h = D(n, a);
95
95
  return {
96
- x: a.x,
97
- y: a.y,
96
+ x: h.x,
97
+ y: h.y,
98
98
  width: s.width * n.scale,
99
99
  height: s.height * n.scale,
100
100
  direction: t.direction,
@@ -103,7 +103,7 @@ class pe {
103
103
  };
104
104
  }
105
105
  }
106
- class Ie {
106
+ class Ve {
107
107
  constructor(e) {
108
108
  o(this, "xFrom", 1 / 0);
109
109
  o(this, "yFrom", 1 / 0);
@@ -119,11 +119,11 @@ class Ie {
119
119
  return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
120
120
  }
121
121
  hasEdge(e) {
122
- 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);
123
- return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
122
+ 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);
123
+ return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
124
124
  }
125
125
  }
126
- class Ue {
126
+ class Ie {
127
127
  constructor(e, t, s, i) {
128
128
  o(this, "attachedNodes", /* @__PURE__ */ new Set());
129
129
  o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -131,23 +131,23 @@ class Ue {
131
131
  o(this, "updateViewport", (e) => {
132
132
  this.renderingBox.setRenderingBox(e);
133
133
  const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
134
- this.graphStore.getAllNodeIds().forEach((h) => {
135
- const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
136
- a && !d ? t.add(h) : !a && d && s.add(h);
137
- }), this.graphStore.getAllEdgeIds().forEach((h) => {
138
- 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;
139
- 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);
140
- }), n.forEach((h) => {
141
- this.handleDetachEdge(h);
142
- }), s.forEach((h) => {
143
- this.handleDetachNode(h);
144
- }), t.forEach((h) => {
145
- this.attachedNodes.has(h) || this.handleAttachNode(h);
146
- }), i.forEach((h) => {
147
- this.handleAttachEdge(h);
134
+ this.graphStore.getAllNodeIds().forEach((a) => {
135
+ const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
136
+ h && !d ? t.add(a) : !h && d && s.add(a);
137
+ }), this.graphStore.getAllEdgeIds().forEach((a) => {
138
+ 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;
139
+ 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);
140
+ }), n.forEach((a) => {
141
+ this.handleDetachEdge(a);
142
+ }), s.forEach((a) => {
143
+ this.handleDetachNode(a);
144
+ }), t.forEach((a) => {
145
+ this.attachedNodes.has(a) || this.handleAttachNode(a);
146
+ }), i.forEach((a) => {
147
+ this.handleAttachEdge(a);
148
148
  });
149
149
  });
150
- this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
150
+ this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ve(this.graphStore), this.trigger.subscribe(this.updateViewport);
151
151
  }
152
152
  attachNode(e) {
153
153
  this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -189,10 +189,10 @@ class Ue {
189
189
  this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
190
190
  }
191
191
  handleAttachNode(e) {
192
- this.attachedNodes.add(e), this.params.onBeforeNodeAttached(e), this.htmlView.attachNode(e);
192
+ this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
193
193
  }
194
194
  handleDetachNode(e) {
195
- this.htmlView.detachNode(e), this.params.onAfterNodeDetached(e), this.attachedNodes.delete(e);
195
+ this.htmlView.detachNode(e), this.attachedNodes.delete(e), this.params.onAfterNodeDetached(e);
196
196
  }
197
197
  handleAttachEdge(e) {
198
198
  this.attachedEdges.add(e), this.htmlView.attachEdge(e);
@@ -221,7 +221,7 @@ const A = () => {
221
221
  const r = new we();
222
222
  return [r, r];
223
223
  };
224
- class Be {
224
+ class Ue {
225
225
  constructor(e) {
226
226
  /**
227
227
  * @deprecated
@@ -346,7 +346,7 @@ class We {
346
346
  return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
347
347
  }
348
348
  }
349
- class k {
349
+ class z {
350
350
  constructor(e) {
351
351
  o(this, "counter", 0);
352
352
  this.checkExists = e;
@@ -378,13 +378,13 @@ class fe {
378
378
  * provides api for accessing viewport state
379
379
  */
380
380
  o(this, "viewport");
381
- o(this, "nodeIdGenerator", new k(
381
+ o(this, "nodeIdGenerator", new z(
382
382
  (e) => this.graph.getNode(e) !== null
383
383
  ));
384
- o(this, "portIdGenerator", new k(
384
+ o(this, "portIdGenerator", new z(
385
385
  (e) => this.graph.getPort(e) !== null
386
386
  ));
387
- o(this, "edgeIdGenerator", new k(
387
+ o(this, "edgeIdGenerator", new z(
388
388
  (e) => this.graph.getEdge(e) !== null
389
389
  ));
390
390
  o(this, "onAfterNodeAdded", (e) => {
@@ -437,7 +437,7 @@ class fe {
437
437
  * emits event just before destruction of canvas
438
438
  */
439
439
  o(this, "onBeforeDestroy");
440
- 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(
440
+ this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Ue(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
441
441
  this.onAfterNodePriorityUpdated
442
442
  ), 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(
443
443
  this.onAfterEdgeShapeUpdated
@@ -592,7 +592,7 @@ class fe {
592
592
  ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
593
593
  }
594
594
  }
595
- class $e {
595
+ class Be {
596
596
  constructor() {
597
597
  o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
598
598
  o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -641,7 +641,7 @@ class me {
641
641
  o(this, "incomingEdges", /* @__PURE__ */ new Map());
642
642
  o(this, "outcomingEdges", /* @__PURE__ */ new Map());
643
643
  o(this, "cycleEdges", /* @__PURE__ */ new Map());
644
- o(this, "elementPorts", new $e());
644
+ o(this, "elementPorts", new Be());
645
645
  o(this, "afterNodeAddedEmitter");
646
646
  o(this, "onAfterNodeAdded");
647
647
  o(this, "afterNodeUpdatedEmitter");
@@ -823,7 +823,7 @@ const ie = (r) => ({
823
823
  x: 0,
824
824
  y: 0
825
825
  };
826
- class Fe {
826
+ class $e {
827
827
  constructor() {
828
828
  o(this, "viewportMatrix", ne);
829
829
  o(this, "contentMatrix", ne);
@@ -858,7 +858,7 @@ class Fe {
858
858
  }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
859
859
  }
860
860
  }
861
- class Y {
861
+ class j {
862
862
  constructor(e) {
863
863
  o(this, "elementToNodeId", /* @__PURE__ */ new Map());
864
864
  o(this, "nodesResizeObserver");
@@ -881,19 +881,19 @@ class Y {
881
881
  }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
882
882
  }
883
883
  static configure(e) {
884
- new Y(e);
884
+ new j(e);
885
885
  }
886
886
  handleNodeResize(e) {
887
887
  const t = this.elementToNodeId.get(e);
888
888
  this.canvas.updateNode(t);
889
889
  }
890
890
  }
891
- const Oe = (r, e, t) => {
892
- const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
893
- return e >= s && e <= s + n && t >= i && t <= i + h;
894
- }, 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), U = (r, e) => {
891
+ const Fe = (r, e, t) => {
892
+ const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
893
+ return e >= s && e <= s + n && t >= i && t <= i + a;
894
+ }, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
895
895
  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
896
- }, B = (r) => {
896
+ }, W = (r) => {
897
897
  const e = document.createElement("div");
898
898
  return {
899
899
  id: r.overlayId,
@@ -908,7 +908,7 @@ const Oe = (r, e, t) => {
908
908
  }
909
909
  ]
910
910
  };
911
- }, ze = (r, e) => {
911
+ }, ke = (r, e) => {
912
912
  let t = e, s = null;
913
913
  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
914
914
  t = t.parentElement;
@@ -916,7 +916,7 @@ const Oe = (r, e, t) => {
916
916
  }, ye = (r, e) => {
917
917
  const t = document.elementsFromPoint(e.x, e.y);
918
918
  for (const s of t) {
919
- const i = ze(r, s);
919
+ const i = ke(r, s);
920
920
  if (i !== null)
921
921
  return i;
922
922
  }
@@ -926,39 +926,39 @@ var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r
926
926
  const ve = (r, e) => ({
927
927
  x: r / 2,
928
928
  y: e / 2
929
- }), y = (r, e, t) => ({
929
+ }), m = (r, e, t) => ({
930
930
  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
931
931
  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
932
- }), w = {
932
+ }), u = {
933
933
  x: 0,
934
934
  y: 0
935
935
  };
936
- class He {
936
+ class ze {
937
937
  constructor(e) {
938
938
  o(this, "path");
939
939
  o(this, "midpoint");
940
940
  this.params = e;
941
941
  const t = this.params.to;
942
942
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
943
- const s = y(
944
- { x: this.params.arrowLength, y: w.y },
943
+ const s = m(
944
+ { x: this.params.arrowLength, y: u.y },
945
945
  this.params.sourceDirection,
946
- w
947
- ), i = y(
946
+ u
947
+ ), i = m(
948
948
  { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
949
949
  this.params.targetDirection,
950
950
  this.params.to
951
951
  ), n = {
952
952
  x: s.x + this.params.sourceDirection.x * this.params.curvature,
953
953
  y: s.y + this.params.sourceDirection.y * this.params.curvature
954
- }, h = {
954
+ }, a = {
955
955
  x: i.x - this.params.targetDirection.x * this.params.curvature,
956
956
  y: i.y - this.params.targetDirection.y * this.params.curvature
957
- }, 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}`;
958
- this.path = `${d}${a}${c}`;
957
+ }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
958
+ this.path = `${d}${h}${c}`;
959
959
  }
960
960
  }
961
- const Ee = (r, e, t, s) => ({
961
+ const $ = (r, e, t, s) => ({
962
962
  x: e * r.x + (1 - e) / 2 * s.x,
963
963
  y: t * r.y + (1 - t) / 2 * s.y
964
964
  });
@@ -967,71 +967,71 @@ class Xe {
967
967
  o(this, "path");
968
968
  o(this, "midpoint");
969
969
  this.params = e;
970
- const t = this.params.hasSourceArrow ? y(
971
- { x: this.params.arrowLength, y: w.y },
970
+ const t = this.params.hasSourceArrow ? m(
971
+ { x: this.params.arrowLength, y: u.y },
972
972
  this.params.sourceDirection,
973
- w
974
- ) : w, s = this.params.hasTargetArrow ? y(
973
+ u
974
+ ) : u, s = this.params.hasTargetArrow ? m(
975
975
  {
976
976
  x: this.params.to.x - this.params.arrowLength,
977
977
  y: this.params.to.y
978
978
  },
979
979
  this.params.targetDirection,
980
980
  this.params.to
981
- ) : 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 = y(
982
- { x: i, y: w.y },
981
+ ) : 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(
982
+ { x: i, y: u.y },
983
983
  this.params.sourceDirection,
984
- w
984
+ u
985
985
  ), l = {
986
- x: c.x + a,
986
+ x: c.x + h,
987
987
  y: c.y + d
988
- }, g = y(
988
+ }, g = m(
989
989
  { x: this.params.to.x - i, y: this.params.to.y },
990
990
  this.params.targetDirection,
991
991
  this.params.to
992
- ), p = {
993
- x: g.x + a,
992
+ ), w = {
993
+ x: g.x + h,
994
994
  y: g.y + d
995
995
  }, f = {
996
- x: (l.x + p.x) / 2,
997
- y: (l.y + p.y) / 2
998
- }, m = {
996
+ x: (l.x + w.x) / 2,
997
+ y: (l.y + w.y) / 2
998
+ }, y = {
999
999
  x: c.x + this.params.curvature * this.params.sourceDirection.x,
1000
1000
  y: c.y + this.params.curvature * this.params.sourceDirection.y
1001
1001
  }, v = {
1002
1002
  x: g.x - this.params.curvature * this.params.targetDirection.x,
1003
1003
  y: g.y - this.params.curvature * this.params.targetDirection.y
1004
1004
  }, E = {
1005
- x: c.x + a,
1005
+ x: c.x + h,
1006
1006
  y: c.y + d
1007
1007
  }, x = {
1008
- x: g.x + a,
1008
+ x: g.x + h,
1009
1009
  y: g.y + d
1010
1010
  };
1011
1011
  this.path = [
1012
1012
  `M ${t.x} ${t.y}`,
1013
1013
  `L ${c.x} ${c.y}`,
1014
- `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
1014
+ `C ${y.x} ${y.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
1015
1015
  `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
1016
1016
  `L ${s.x} ${s.y}`
1017
- ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
1017
+ ].join(" "), this.midpoint = $(f, e.flipX, e.flipY, e.to);
1018
1018
  }
1019
1019
  }
1020
- const V = (r, e) => {
1020
+ const L = (r, e) => {
1021
1021
  const t = [];
1022
1022
  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) {
1023
1023
  const s = r.length - 1;
1024
- let i = 0, n = 0, h = 0;
1025
- r.forEach((a, d) => {
1024
+ let i = 0, n = 0, a = 0;
1025
+ r.forEach((h, d) => {
1026
1026
  let c = 0, l = 0, g = 0;
1027
- const p = d > 0, f = d < s, m = p && f;
1028
- if (p && (c = -i, l = -n, g = h), f) {
1029
- const C = r[d + 1];
1030
- i = C.x - a.x, n = C.y - a.y, h = Math.sqrt(i * i + n * n);
1027
+ const w = d > 0, f = d < s, y = w && f;
1028
+ if (w && (c = -i, l = -n, g = a), f) {
1029
+ const V = r[d + 1];
1030
+ i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
1031
1031
  }
1032
- const E = h !== 0 ? Math.min((m ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: a.x + i * E, y: a.y + n * E } : a, T = g !== 0 ? Math.min((m ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = m ? { x: a.x + c * T, y: a.y + l * T } : a;
1033
- d > 0 && t.push(`L ${N.x} ${N.y}`), m && t.push(
1034
- `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
1032
+ const E = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = y ? { x: h.x + i * E, y: h.y + n * E } : h, T = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * T, y: h.y + l * T } : h;
1033
+ d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
1034
+ `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
1035
1035
  );
1036
1036
  });
1037
1037
  }
@@ -1044,65 +1044,65 @@ class Ye {
1044
1044
  this.params = e;
1045
1045
  const t = this.params.to;
1046
1046
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1047
- const s = this.params.hasSourceArrow ? y(
1048
- { x: this.params.arrowLength, y: w.y },
1047
+ const s = this.params.hasSourceArrow ? m(
1048
+ { x: this.params.arrowLength, y: u.y },
1049
1049
  this.params.sourceDirection,
1050
- w
1051
- ) : w, i = this.params.hasTargetArrow ? y(
1050
+ u
1051
+ ) : u, i = this.params.hasTargetArrow ? m(
1052
1052
  {
1053
1053
  x: this.params.to.x - this.params.arrowLength,
1054
1054
  y: this.params.to.y
1055
1055
  },
1056
1056
  this.params.targetDirection,
1057
1057
  this.params.to
1058
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
1059
- { x: h, y: w.y },
1058
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1059
+ { x: a, y: u.y },
1060
1060
  this.params.sourceDirection,
1061
- w
1062
- ), d = y(
1063
- { x: this.params.to.x - h, y: this.params.to.y },
1061
+ u
1062
+ ), d = m(
1063
+ { x: this.params.to.x - a, y: this.params.to.y },
1064
1064
  this.params.targetDirection,
1065
1065
  this.params.to
1066
- ), c = Math.max((a.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
1066
+ ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
1067
1067
  x: this.params.flipX > 0 ? c : -n,
1068
- y: a.y
1069
- }, p = { x: g.x, y: l }, f = {
1068
+ y: h.y
1069
+ }, w = { x: g.x, y: l }, f = {
1070
1070
  x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
1071
1071
  y: d.y
1072
- }, m = { x: f.x, y: l };
1073
- this.path = V(
1074
- [s, a, g, p, m, f, d, i],
1072
+ }, y = { x: f.x, y: l };
1073
+ this.path = L(
1074
+ [s, h, g, w, y, f, d, i],
1075
1075
  this.params.roundness
1076
1076
  );
1077
1077
  }
1078
1078
  }
1079
- class j {
1079
+ class He {
1080
1080
  constructor(e) {
1081
1081
  o(this, "path");
1082
1082
  o(this, "midpoint");
1083
1083
  this.params = e;
1084
- const t = this.params.hasSourceArrow ? y(
1085
- { x: this.params.arrowLength, y: w.y },
1084
+ const t = this.params.hasSourceArrow ? m(
1085
+ { x: this.params.arrowLength, y: u.y },
1086
1086
  this.params.sourceDirection,
1087
- w
1088
- ) : w, s = this.params.hasTargetArrow ? y(
1087
+ u
1088
+ ) : u, s = this.params.hasTargetArrow ? m(
1089
1089
  {
1090
1090
  x: this.params.to.x - this.params.arrowLength,
1091
1091
  y: this.params.to.y
1092
1092
  },
1093
1093
  this.params.targetDirection,
1094
1094
  this.params.to
1095
- ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
1096
- { x: i, y: w.y },
1095
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1096
+ { x: i, y: u.y },
1097
1097
  this.params.sourceDirection,
1098
- w
1099
- ), 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 = y(
1098
+ u
1099
+ ), 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(
1100
1100
  { x: this.params.to.x - i, y: this.params.to.y },
1101
1101
  this.params.targetDirection,
1102
1102
  this.params.to
1103
- ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
1104
- this.midpoint = Ee(f, e.flipX, e.flipY, e.to), this.path = V(
1105
- [t, n, l, p, g, s],
1103
+ ), w = { x: g.x + d, y: g.y + c }, f = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 };
1104
+ this.midpoint = $(f, e.flipX, e.flipY, e.to), this.path = L(
1105
+ [t, n, l, w, g, s],
1106
1106
  this.params.roundness
1107
1107
  );
1108
1108
  }
@@ -1114,27 +1114,27 @@ class je {
1114
1114
  this.params = e;
1115
1115
  const t = this.params.to;
1116
1116
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1117
- const s = this.params.hasSourceArrow ? y(
1118
- { x: this.params.arrowLength, y: w.y },
1117
+ const s = this.params.hasSourceArrow ? m(
1118
+ { x: this.params.arrowLength, y: u.y },
1119
1119
  this.params.sourceDirection,
1120
- w
1121
- ) : w, i = this.params.hasTargetArrow ? y(
1120
+ u
1121
+ ) : u, i = this.params.hasTargetArrow ? m(
1122
1122
  {
1123
1123
  x: this.params.to.x - this.params.arrowLength,
1124
1124
  y: this.params.to.y
1125
1125
  },
1126
1126
  this.params.targetDirection,
1127
1127
  this.params.to
1128
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = y(
1129
- { x: n, y: w.y },
1128
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
1129
+ { x: n, y: u.y },
1130
1130
  this.params.sourceDirection,
1131
- w
1132
- ), a = y(
1131
+ u
1132
+ ), h = m(
1133
1133
  { x: this.params.to.x - n, y: this.params.to.y },
1134
1134
  this.params.targetDirection,
1135
1135
  this.params.to
1136
1136
  );
1137
- this.path = V([s, h, a, i], this.params.roundness);
1137
+ this.path = L([s, a, h, i], this.params.roundness);
1138
1138
  }
1139
1139
  }
1140
1140
  class Ge {
@@ -1144,34 +1144,34 @@ class Ge {
1144
1144
  this.params = e;
1145
1145
  const t = this.params.to;
1146
1146
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1147
- const s = this.params.hasSourceArrow ? y(
1148
- { x: this.params.arrowLength, y: w.y },
1147
+ const s = this.params.hasSourceArrow ? m(
1148
+ { x: this.params.arrowLength, y: u.y },
1149
1149
  this.params.sourceDirection,
1150
- w
1151
- ) : w, i = this.params.hasTargetArrow ? y(
1150
+ u
1151
+ ) : u, i = this.params.hasTargetArrow ? m(
1152
1152
  {
1153
1153
  x: this.params.to.x - this.params.arrowLength,
1154
1154
  y: this.params.to.y
1155
1155
  },
1156
1156
  this.params.targetDirection,
1157
1157
  this.params.to
1158
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
1159
- { x: h, y: w.y },
1158
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1159
+ { x: a, y: u.y },
1160
1160
  this.params.sourceDirection,
1161
- w
1162
- ), d = y(
1163
- { x: this.params.to.x - h, y: this.params.to.y },
1161
+ u
1162
+ ), d = m(
1163
+ { x: this.params.to.x - a, y: this.params.to.y },
1164
1164
  this.params.targetDirection,
1165
1165
  this.params.to
1166
- ), c = Math.max((a.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
1167
- x: a.x,
1166
+ ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
1167
+ x: h.x,
1168
1168
  y: this.params.flipY > 0 ? c : -n
1169
- }, p = { x: l, y: g.y }, f = {
1169
+ }, w = { x: l, y: g.y }, f = {
1170
1170
  x: d.x,
1171
1171
  y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
1172
- }, m = { x: l, y: f.y };
1173
- this.path = V(
1174
- [s, a, g, p, m, f, d, i],
1172
+ }, y = { x: l, y: f.y };
1173
+ this.path = L(
1174
+ [s, h, g, w, y, f, d, i],
1175
1175
  this.params.roundness
1176
1176
  );
1177
1177
  }
@@ -1181,19 +1181,19 @@ class G {
1181
1181
  o(this, "path");
1182
1182
  o(this, "midpoint");
1183
1183
  this.params = e;
1184
- const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
1185
- { x: this.params.arrowLength, y: w.y },
1186
- { x: i, y: w.y },
1184
+ const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
1185
+ { x: this.params.arrowLength, y: u.y },
1186
+ { x: i, y: u.y },
1187
1187
  { x: i, y: this.params.side },
1188
1188
  { x: n, y: this.params.side },
1189
1189
  { x: n, y: -this.params.side },
1190
1190
  { x: i, y: -this.params.side },
1191
- { x: i, y: w.y },
1192
- { x: this.params.arrowLength, y: w.y }
1191
+ { x: i, y: u.y },
1192
+ { x: this.params.arrowLength, y: u.y }
1193
1193
  ].map(
1194
- (c) => y(c, this.params.sourceDirection, w)
1195
- ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
1196
- 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 };
1194
+ (c) => m(c, this.params.sourceDirection, u)
1195
+ ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
1196
+ this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
1197
1197
  }
1198
1198
  }
1199
1199
  class Ke {
@@ -1201,20 +1201,20 @@ class Ke {
1201
1201
  o(this, "path");
1202
1202
  o(this, "midpoint");
1203
1203
  this.params = e;
1204
- 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 = [
1205
- { x: this.params.arrowLength, y: w.y },
1204
+ 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 = [
1205
+ { x: this.params.arrowLength, y: u.y },
1206
1206
  { x: c, y: n },
1207
1207
  { x: c, y: -n },
1208
1208
  { x: d, y: 0 }
1209
1209
  ].map(
1210
- (m) => y(m, this.params.sourceDirection, w)
1211
- ), p = [
1210
+ (y) => m(y, this.params.sourceDirection, u)
1211
+ ), w = [
1212
1212
  `M ${g[0].x} ${g[0].y}`,
1213
1213
  `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
1214
1214
  `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
1215
1215
  `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
1216
1216
  ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
1217
- this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
1217
+ this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${w}`, this.midpoint = g[3];
1218
1218
  }
1219
1219
  }
1220
1220
  class Ze {
@@ -1236,7 +1236,7 @@ class Ze {
1236
1236
  offset: this.params.sourceOffset,
1237
1237
  hasArrow: this.params.hasSourceArrow,
1238
1238
  flip: 1,
1239
- shift: w
1239
+ shift: u
1240
1240
  }), n = this.createDirectLinePoint({
1241
1241
  offset: this.params.targetOffset,
1242
1242
  hasArrow: this.params.hasTargetArrow,
@@ -1253,46 +1253,128 @@ class Ze {
1253
1253
  };
1254
1254
  }
1255
1255
  }
1256
- const Ae = (r, e) => {
1256
+ class Je {
1257
+ constructor(e) {
1258
+ o(this, "path");
1259
+ o(this, "midpoint");
1260
+ this.params = e;
1261
+ const t = this.params.hasSourceArrow ? m(
1262
+ { x: this.params.arrowLength, y: u.y },
1263
+ this.params.sourceDirection,
1264
+ u
1265
+ ) : u, s = this.params.hasTargetArrow ? m(
1266
+ {
1267
+ x: this.params.to.x - this.params.arrowLength,
1268
+ y: this.params.to.y
1269
+ },
1270
+ this.params.targetDirection,
1271
+ this.params.to
1272
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1273
+ { x: i, y: u.y },
1274
+ this.params.sourceDirection,
1275
+ u
1276
+ ), a = m(
1277
+ { x: this.params.to.x - i, y: this.params.to.y },
1278
+ this.params.targetDirection,
1279
+ this.params.to
1280
+ ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.y / 2, c = d + Math.abs(this.params.detourDistance), l = d + c * this.params.flipY * h, g = {
1281
+ x: (n.x + a.x) / 2,
1282
+ y: l
1283
+ };
1284
+ this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
1285
+ [
1286
+ t,
1287
+ n,
1288
+ { x: n.x, y: l },
1289
+ { x: a.x, y: l },
1290
+ a,
1291
+ s
1292
+ ],
1293
+ this.params.roundness
1294
+ );
1295
+ }
1296
+ }
1297
+ class Qe {
1298
+ constructor(e) {
1299
+ o(this, "path");
1300
+ o(this, "midpoint");
1301
+ this.params = e;
1302
+ const t = this.params.hasSourceArrow ? m(
1303
+ { x: this.params.arrowLength, y: u.y },
1304
+ this.params.sourceDirection,
1305
+ u
1306
+ ) : u, s = this.params.hasTargetArrow ? m(
1307
+ {
1308
+ x: this.params.to.x - this.params.arrowLength,
1309
+ y: this.params.to.y
1310
+ },
1311
+ this.params.targetDirection,
1312
+ this.params.to
1313
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1314
+ { x: i, y: u.y },
1315
+ this.params.sourceDirection,
1316
+ u
1317
+ ), a = m(
1318
+ { x: this.params.to.x - i, y: this.params.to.y },
1319
+ this.params.targetDirection,
1320
+ this.params.to
1321
+ ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.x / 2, c = d + Math.abs(this.params.detourDistance), l = d + c * this.params.flipX * h, g = {
1322
+ x: l,
1323
+ y: (n.y + a.y) / 2
1324
+ };
1325
+ this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
1326
+ [
1327
+ t,
1328
+ n,
1329
+ { x: l, y: n.y },
1330
+ { x: l, y: a.y },
1331
+ a,
1332
+ s
1333
+ ],
1334
+ this.params.roundness
1335
+ );
1336
+ }
1337
+ }
1338
+ const Ee = (r, e) => {
1257
1339
  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`;
1258
1340
  }, K = Object.freeze({
1259
1341
  edgeColor: "--edge-color"
1260
- }), xe = (r) => {
1342
+ }), Ae = (r) => {
1261
1343
  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1262
1344
  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;
1263
- }, W = () => {
1345
+ }, B = () => {
1264
1346
  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
1265
1347
  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
1266
- }, Se = () => {
1348
+ }, xe = () => {
1267
1349
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1268
1350
  return r.style.transformOrigin = "50% 50%", r;
1269
- }, Pe = (r) => {
1351
+ }, Se = (r) => {
1270
1352
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1271
1353
  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1272
- }, be = (r, e) => {
1354
+ }, Pe = (r, e) => {
1273
1355
  const t = {
1274
1356
  x: r.x + r.width / 2,
1275
1357
  y: r.y + r.height / 2
1276
1358
  }, s = {
1277
1359
  x: e.x + e.width / 2,
1278
1360
  y: e.y + e.height / 2
1279
- }, 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;
1361
+ }, 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;
1280
1362
  return {
1281
1363
  x: i,
1282
1364
  y: n,
1283
- width: h,
1284
- height: a,
1365
+ width: a,
1366
+ height: h,
1285
1367
  flipX: d,
1286
1368
  flipY: c
1287
1369
  };
1288
- }, z = (r, e, t, s) => {
1370
+ }, X = (r, e, t, s) => {
1289
1371
  const n = [
1290
- w,
1372
+ u,
1291
1373
  { x: t, y: s },
1292
1374
  { x: t, y: -s }
1293
- ].map((c) => y(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}`;
1294
- return `${h} ${a} ${d} Z`;
1295
- }, u = Object.freeze({
1375
+ ].map((c) => m(c, r, u)).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}`;
1376
+ return `${a} ${h} ${d} Z`;
1377
+ }, p = Object.freeze({
1296
1378
  color: "#777777",
1297
1379
  width: 1,
1298
1380
  arrowLength: 15,
@@ -1310,67 +1392,67 @@ const Ae = (r, e) => {
1310
1392
  curvature: 90,
1311
1393
  interactiveWidth: 10,
1312
1394
  preOffset: 0
1313
- }), he = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1314
- class $ {
1395
+ }), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1396
+ class F {
1315
1397
  constructor(e) {
1316
1398
  o(this, "svg");
1317
- o(this, "group", Se());
1399
+ o(this, "group", xe());
1318
1400
  o(this, "line");
1319
1401
  o(this, "sourceArrow", null);
1320
1402
  o(this, "targetArrow", null);
1321
1403
  o(this, "onAfterRender");
1322
1404
  o(this, "afterRenderEmitter");
1323
- 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));
1405
+ 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));
1324
1406
  }
1325
1407
  render(e) {
1326
- const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
1408
+ const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
1327
1409
  e.from,
1328
1410
  e.to
1329
1411
  );
1330
- Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
1331
- const d = he(
1412
+ Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1413
+ const d = ae(
1332
1414
  e.from.direction,
1333
- h,
1334
- a
1335
- ), c = he(
1415
+ a,
1416
+ h
1417
+ ), c = ae(
1336
1418
  e.to.direction,
1337
- h,
1338
- a
1419
+ a,
1420
+ h
1339
1421
  ), l = {
1340
1422
  x: i,
1341
1423
  y: n
1342
1424
  };
1343
- let g = c, p = -this.params.arrowLength, f;
1344
- 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;
1345
- const m = f(
1425
+ let g = c, w = -this.params.arrowLength, f;
1426
+ e.category === R.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : e.category === R.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
1427
+ const y = f(
1346
1428
  d,
1347
1429
  c,
1348
1430
  l,
1349
- h,
1350
- a
1431
+ a,
1432
+ h
1351
1433
  );
1352
- this.line.setAttribute("d", m.path);
1434
+ this.line.setAttribute("d", y.path);
1353
1435
  let v = null;
1354
- this.sourceArrow && (v = z(
1436
+ this.sourceArrow && (v = X(
1355
1437
  d,
1356
- w,
1438
+ u,
1357
1439
  this.params.arrowLength,
1358
1440
  this.params.arrowWidth
1359
1441
  ), this.sourceArrow.setAttribute("d", v));
1360
1442
  let E = null;
1361
- this.targetArrow && (E = z(
1443
+ this.targetArrow && (E = X(
1362
1444
  g,
1363
1445
  l,
1364
- p,
1446
+ w,
1365
1447
  this.params.arrowWidth
1366
1448
  ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
1367
- edgePath: m,
1449
+ edgePath: y,
1368
1450
  sourceArrowPath: v,
1369
1451
  targetArrowPath: E
1370
1452
  });
1371
1453
  }
1372
1454
  }
1373
- class Je {
1455
+ class _e {
1374
1456
  constructor(e) {
1375
1457
  o(this, "svg");
1376
1458
  o(this, "group");
@@ -1409,7 +1491,7 @@ class Je {
1409
1491
  hasSourceArrow: this.hasSourceArrow,
1410
1492
  hasTargetArrow: this.hasTargetArrow
1411
1493
  }));
1412
- o(this, "createLinePath", (e, t, s) => new He({
1494
+ o(this, "createLinePath", (e, t, s) => new ze({
1413
1495
  to: s,
1414
1496
  sourceDirection: e,
1415
1497
  targetDirection: t,
@@ -1418,9 +1500,9 @@ class Je {
1418
1500
  hasSourceArrow: this.hasSourceArrow,
1419
1501
  hasTargetArrow: this.hasTargetArrow
1420
1502
  }));
1421
- 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 $({
1422
- color: (e == null ? void 0 : e.color) ?? u.color,
1423
- width: (e == null ? void 0 : e.width) ?? u.width,
1503
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? p.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1504
+ color: (e == null ? void 0 : e.color) ?? p.color,
1505
+ width: (e == null ? void 0 : e.width) ?? p.width,
1424
1506
  arrowLength: this.arrowLength,
1425
1507
  arrowWidth: this.arrowWidth,
1426
1508
  hasSourceArrow: this.hasSourceArrow,
@@ -1434,7 +1516,7 @@ class Je {
1434
1516
  this.pathShape.render(e);
1435
1517
  }
1436
1518
  }
1437
- class Qe {
1519
+ class qe {
1438
1520
  constructor(e) {
1439
1521
  o(this, "svg");
1440
1522
  o(this, "group");
@@ -1447,7 +1529,6 @@ class Qe {
1447
1529
  o(this, "arrowOffset");
1448
1530
  o(this, "roundness");
1449
1531
  o(this, "cycleSquareSide");
1450
- o(this, "detourDirection");
1451
1532
  o(this, "detourDistance");
1452
1533
  o(this, "hasSourceArrow");
1453
1534
  o(this, "hasTargetArrow");
@@ -1461,7 +1542,7 @@ class Qe {
1461
1542
  hasSourceArrow: this.hasSourceArrow,
1462
1543
  hasTargetArrow: this.hasTargetArrow
1463
1544
  }));
1464
- o(this, "createDetourPath", (e, t, s, i, n) => new j({
1545
+ o(this, "createDetourPath", (e, t, s, i, n) => new Je({
1465
1546
  to: s,
1466
1547
  sourceDirection: e,
1467
1548
  targetDirection: t,
@@ -1470,7 +1551,6 @@ class Qe {
1470
1551
  arrowLength: this.arrowLength,
1471
1552
  arrowOffset: this.arrowOffset,
1472
1553
  roundness: this.roundness,
1473
- detourDirection: this.detourDirection,
1474
1554
  detourDistance: this.detourDistance,
1475
1555
  hasSourceArrow: this.hasSourceArrow,
1476
1556
  hasTargetArrow: this.hasTargetArrow
@@ -1486,15 +1566,15 @@ class Qe {
1486
1566
  hasSourceArrow: this.hasSourceArrow,
1487
1567
  hasTargetArrow: this.hasTargetArrow
1488
1568
  }));
1489
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1490
- const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
1569
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
1570
+ const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
1491
1571
  this.roundness = Math.min(
1492
1572
  t,
1493
1573
  this.arrowOffset,
1494
1574
  this.cycleSquareSide / 2
1495
- ), 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 $({
1496
- color: (e == null ? void 0 : e.color) ?? u.color,
1497
- width: (e == null ? void 0 : e.width) ?? u.width,
1575
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1576
+ color: (e == null ? void 0 : e.color) ?? p.color,
1577
+ width: (e == null ? void 0 : e.width) ?? p.width,
1498
1578
  arrowLength: this.arrowLength,
1499
1579
  arrowWidth: this.arrowWidth,
1500
1580
  hasSourceArrow: this.hasSourceArrow,
@@ -1508,7 +1588,7 @@ class Qe {
1508
1588
  this.pathShape.render(e);
1509
1589
  }
1510
1590
  }
1511
- class _e {
1591
+ class et {
1512
1592
  constructor(e) {
1513
1593
  o(this, "svg");
1514
1594
  o(this, "group");
@@ -1535,7 +1615,7 @@ class _e {
1535
1615
  hasSourceArrow: this.hasSourceArrow,
1536
1616
  hasTargetArrow: this.hasTargetArrow
1537
1617
  }));
1538
- o(this, "createDetourPath", (e, t, s, i, n) => new j({
1618
+ o(this, "createDetourPath", (e, t, s, i, n) => new He({
1539
1619
  to: s,
1540
1620
  sourceDirection: e,
1541
1621
  targetDirection: t,
@@ -1559,15 +1639,15 @@ class _e {
1559
1639
  hasSourceArrow: this.hasSourceArrow,
1560
1640
  hasTargetArrow: this.hasTargetArrow
1561
1641
  }));
1562
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1563
- const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
1642
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
1643
+ const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
1564
1644
  this.roundness = Math.min(
1565
1645
  t,
1566
1646
  this.arrowOffset,
1567
1647
  this.cycleSquareSide / 2
1568
- ), 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 $({
1569
- color: (e == null ? void 0 : e.color) ?? u.color,
1570
- width: (e == null ? void 0 : e.width) ?? u.width,
1648
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1649
+ color: (e == null ? void 0 : e.color) ?? p.color,
1650
+ width: (e == null ? void 0 : e.width) ?? p.width,
1571
1651
  arrowLength: this.arrowLength,
1572
1652
  arrowWidth: this.arrowWidth,
1573
1653
  hasSourceArrow: this.hasSourceArrow,
@@ -1581,7 +1661,7 @@ class _e {
1581
1661
  this.pathShape.render(e);
1582
1662
  }
1583
1663
  }
1584
- class qe {
1664
+ class tt {
1585
1665
  constructor(e) {
1586
1666
  o(this, "svg");
1587
1667
  o(this, "group");
@@ -1594,7 +1674,6 @@ class qe {
1594
1674
  o(this, "arrowOffset");
1595
1675
  o(this, "roundness");
1596
1676
  o(this, "cycleSquareSide");
1597
- o(this, "detourDirection");
1598
1677
  o(this, "detourDistance");
1599
1678
  o(this, "hasSourceArrow");
1600
1679
  o(this, "hasTargetArrow");
@@ -1608,7 +1687,7 @@ class qe {
1608
1687
  hasSourceArrow: this.hasSourceArrow,
1609
1688
  hasTargetArrow: this.hasTargetArrow
1610
1689
  }));
1611
- o(this, "createDetourPath", (e, t, s, i, n) => new j({
1690
+ o(this, "createDetourPath", (e, t, s, i, n) => new Qe({
1612
1691
  to: s,
1613
1692
  sourceDirection: e,
1614
1693
  targetDirection: t,
@@ -1617,7 +1696,6 @@ class qe {
1617
1696
  arrowLength: this.arrowLength,
1618
1697
  arrowOffset: this.arrowOffset,
1619
1698
  roundness: this.roundness,
1620
- detourDirection: this.detourDirection,
1621
1699
  detourDistance: this.detourDistance,
1622
1700
  hasSourceArrow: this.hasSourceArrow,
1623
1701
  hasTargetArrow: this.hasTargetArrow
@@ -1633,15 +1711,15 @@ class qe {
1633
1711
  hasSourceArrow: this.hasSourceArrow,
1634
1712
  hasTargetArrow: this.hasTargetArrow
1635
1713
  }));
1636
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1637
- const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
1714
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
1715
+ const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
1638
1716
  this.roundness = Math.min(
1639
1717
  t,
1640
1718
  this.arrowOffset,
1641
1719
  this.cycleSquareSide / 2
1642
- ), 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 $({
1643
- color: (e == null ? void 0 : e.color) ?? u.color,
1644
- width: (e == null ? void 0 : e.width) ?? u.width,
1720
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1721
+ color: (e == null ? void 0 : e.color) ?? p.color,
1722
+ width: (e == null ? void 0 : e.width) ?? p.width,
1645
1723
  arrowLength: this.arrowLength,
1646
1724
  arrowWidth: this.arrowWidth,
1647
1725
  hasSourceArrow: this.hasSourceArrow,
@@ -1655,7 +1733,7 @@ class qe {
1655
1733
  this.pathShape.render(e);
1656
1734
  }
1657
1735
  }
1658
- const ae = (r) => {
1736
+ const he = (r) => {
1659
1737
  if (r.diagonalDistance === 0)
1660
1738
  return "";
1661
1739
  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
@@ -1665,17 +1743,17 @@ const ae = (r) => {
1665
1743
  x: t / r.diagonalDistance,
1666
1744
  y: s / r.diagonalDistance
1667
1745
  };
1668
- return z(
1746
+ return X(
1669
1747
  n,
1670
1748
  i,
1671
1749
  r.arrowLength,
1672
1750
  r.arrowWidth
1673
1751
  );
1674
1752
  };
1675
- class Te {
1753
+ class be {
1676
1754
  constructor(e) {
1677
1755
  o(this, "svg");
1678
- o(this, "group", Se());
1756
+ o(this, "group", xe());
1679
1757
  o(this, "line");
1680
1758
  o(this, "sourceArrow", null);
1681
1759
  o(this, "targetArrow", null);
@@ -1687,14 +1765,14 @@ class Te {
1687
1765
  o(this, "targetOffset");
1688
1766
  o(this, "onAfterRender");
1689
1767
  o(this, "afterRenderEmitter");
1690
- [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));
1768
+ [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? p.color, this.width = (e == null ? void 0 : e.width) ?? p.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? p.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? p.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));
1691
1769
  }
1692
1770
  render(e) {
1693
- const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
1771
+ const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
1694
1772
  e.from,
1695
1773
  e.to
1696
1774
  );
1697
- Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
1775
+ Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1698
1776
  const d = { x: i, y: n }, c = new Ze({
1699
1777
  to: d,
1700
1778
  sourceOffset: this.sourceOffset,
@@ -1705,17 +1783,17 @@ class Te {
1705
1783
  });
1706
1784
  this.line.setAttribute("d", c.path);
1707
1785
  let l = null;
1708
- this.sourceArrow && (l = ae({
1786
+ this.sourceArrow && (l = he({
1709
1787
  diagonalDistance: c.diagonalDistance,
1710
1788
  to: d,
1711
1789
  offset: this.sourceOffset,
1712
1790
  flip: 1,
1713
- shift: w,
1791
+ shift: u,
1714
1792
  arrowWidth: this.arrowWidth,
1715
1793
  arrowLength: this.arrowLength
1716
1794
  }), this.sourceArrow.setAttribute("d", l));
1717
1795
  let g = null;
1718
- this.targetArrow && (g = ae({
1796
+ this.targetArrow && (g = he({
1719
1797
  diagonalDistance: c.diagonalDistance,
1720
1798
  to: d,
1721
1799
  offset: this.targetOffset,
@@ -1730,40 +1808,40 @@ class Te {
1730
1808
  });
1731
1809
  }
1732
1810
  }
1733
- const et = () => {
1811
+ const rt = () => {
1734
1812
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1735
1813
  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
1736
- }, tt = (r) => {
1814
+ }, ot = (r) => {
1737
1815
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1738
1816
  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
1739
1817
  }, de = (r) => {
1740
1818
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1741
1819
  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
1742
1820
  };
1743
- class rt extends Error {
1821
+ class st extends Error {
1744
1822
  constructor(e) {
1745
1823
  super(e), this.name = "InteractiveEdgeError";
1746
1824
  }
1747
1825
  }
1748
- class De {
1826
+ class Te {
1749
1827
  constructor(e, t) {
1750
1828
  o(this, "svg");
1751
1829
  o(this, "group");
1752
1830
  o(this, "line");
1753
1831
  o(this, "sourceArrow");
1754
1832
  o(this, "targetArrow");
1755
- o(this, "handle", et());
1833
+ o(this, "handle", rt());
1756
1834
  o(this, "onAfterRender");
1757
1835
  o(this, "interactiveLine");
1758
1836
  o(this, "interactiveSourceArrow", null);
1759
1837
  o(this, "interactiveTargetArrow", null);
1760
- if (this.baseEdge = e, e instanceof De)
1761
- throw new rt(
1838
+ if (this.baseEdge = e, e instanceof Te)
1839
+ throw new st(
1762
1840
  "interactive edge can be configured only once"
1763
1841
  );
1764
1842
  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;
1765
- const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
1766
- 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) => {
1843
+ const s = (t == null ? void 0 : t.width) ?? p.interactiveWidth;
1844
+ this.interactiveLine = ot(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) => {
1767
1845
  this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
1768
1846
  });
1769
1847
  }
@@ -1771,7 +1849,7 @@ class De {
1771
1849
  this.baseEdge.render(e);
1772
1850
  }
1773
1851
  }
1774
- class bt {
1852
+ class Dt {
1775
1853
  constructor(e, t) {
1776
1854
  o(this, "group");
1777
1855
  o(this, "line");
@@ -1793,14 +1871,14 @@ class bt {
1793
1871
  this.baseShape.render(e);
1794
1872
  }
1795
1873
  }
1796
- const Ne = (r, e) => {
1874
+ const De = (r, e) => {
1797
1875
  const t = new me(), s = new pe(t, e, r), i = {
1798
1876
  nodes: {
1799
1877
  centerFn: ve,
1800
1878
  priorityFn: () => 0
1801
1879
  },
1802
1880
  edges: {
1803
- shapeFactory: () => new Te(),
1881
+ shapeFactory: () => new be(),
1804
1882
  priorityFn: () => 0
1805
1883
  },
1806
1884
  ports: {
@@ -1815,7 +1893,7 @@ const Ne = (r, e) => {
1815
1893
  i
1816
1894
  );
1817
1895
  };
1818
- class F {
1896
+ class O {
1819
1897
  constructor(e, t, s, i) {
1820
1898
  o(this, "onAfterPortMarked", (e) => {
1821
1899
  const t = this.canvas.graph.getPort(e);
@@ -1839,7 +1917,7 @@ class F {
1839
1917
  }));
1840
1918
  });
1841
1919
  o(this, "onWindowMouseMove", (e) => {
1842
- if (!R(
1920
+ if (!C(
1843
1921
  this.window,
1844
1922
  this.element,
1845
1923
  e.clientX,
@@ -1870,7 +1948,7 @@ class F {
1870
1948
  });
1871
1949
  o(this, "onWindowTouchMove", (e) => {
1872
1950
  const t = e.touches[0];
1873
- if (!R(
1951
+ if (!C(
1874
1952
  this.window,
1875
1953
  this.element,
1876
1954
  t.clientX,
@@ -1897,7 +1975,7 @@ class F {
1897
1975
  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);
1898
1976
  }
1899
1977
  static configure(e, t, s, i) {
1900
- new F(e, t, s, i);
1978
+ new O(e, t, s, i);
1901
1979
  }
1902
1980
  hookPortEvents(e) {
1903
1981
  e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1956,7 +2034,7 @@ class Z {
1956
2034
  if (!this.params.mouseDownEventVerifier(e))
1957
2035
  return;
1958
2036
  const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
1959
- if (!this.params.onBeforeNodeDrag({
2037
+ if (!this.params.nodeDragVerifier({
1960
2038
  nodeId: s,
1961
2039
  element: i.element,
1962
2040
  x: i.x,
@@ -1964,14 +2042,14 @@ class Z {
1964
2042
  }))
1965
2043
  return;
1966
2044
  e.stopPropagation();
1967
- const h = this.calculateContentPoint({
2045
+ const a = this.calculateContentPoint({
1968
2046
  x: e.clientX,
1969
2047
  y: e.clientY
1970
2048
  });
1971
2049
  this.grabbedNode = {
1972
2050
  nodeId: s,
1973
- dx: h.x - i.x,
1974
- dy: h.y - i.y
2051
+ dx: a.x - i.x,
2052
+ dy: a.y - i.y
1975
2053
  }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1976
2054
  passive: !0
1977
2055
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
@@ -1983,21 +2061,21 @@ class Z {
1983
2061
  return;
1984
2062
  e.stopPropagation();
1985
2063
  const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
1986
- if (!this.params.onBeforeNodeDrag({
2064
+ if (!this.params.nodeDragVerifier({
1987
2065
  nodeId: i,
1988
2066
  element: n.element,
1989
2067
  x: n.x,
1990
2068
  y: n.y
1991
2069
  }))
1992
2070
  return;
1993
- const a = this.calculateContentPoint({
2071
+ const h = this.calculateContentPoint({
1994
2072
  x: t.clientX,
1995
2073
  y: t.clientY
1996
2074
  });
1997
2075
  this.grabbedNode = {
1998
2076
  nodeId: i,
1999
- dx: a.x - n.x,
2000
- dy: a.y - n.y
2077
+ dx: h.x - n.x,
2078
+ dy: h.y - n.y
2001
2079
  }, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2002
2080
  passive: !0
2003
2081
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
@@ -2007,7 +2085,7 @@ class Z {
2007
2085
  });
2008
2086
  });
2009
2087
  o(this, "onWindowMouseMove", (e) => {
2010
- if (!R(
2088
+ if (!C(
2011
2089
  this.window,
2012
2090
  this.element,
2013
2091
  e.clientX,
@@ -2028,7 +2106,7 @@ class Z {
2028
2106
  if (e.touches.length !== 1)
2029
2107
  return;
2030
2108
  const t = e.touches[0];
2031
- if (!R(
2109
+ if (!C(
2032
2110
  this.window,
2033
2111
  this.element,
2034
2112
  t.clientX,
@@ -2057,15 +2135,15 @@ class Z {
2057
2135
  const i = this.calculateContentPoint(t), n = {
2058
2136
  x: i.x - e.dx,
2059
2137
  y: i.y - e.dy
2060
- }, h = this.adjustNodeCoords(n);
2138
+ }, a = this.adjustNodeCoords(n);
2061
2139
  this.canvas.updateNode(e.nodeId, {
2062
- x: h.x,
2063
- y: h.y
2140
+ x: a.x,
2141
+ y: a.y
2064
2142
  }), this.params.onNodeDrag({
2065
2143
  nodeId: e.nodeId,
2066
2144
  element: s.element,
2067
- x: h.x,
2068
- y: h.y
2145
+ x: a.x,
2146
+ y: a.y
2069
2147
  });
2070
2148
  }
2071
2149
  moveNodeOnTop(e) {
@@ -2132,34 +2210,34 @@ class Z {
2132
2210
  return e;
2133
2211
  }
2134
2212
  }
2135
- const ot = (r, e, t) => ({
2213
+ const it = (r, e, t) => ({
2136
2214
  scale: r.scale,
2137
2215
  x: r.x + r.scale * e,
2138
2216
  y: r.y + r.scale * t
2139
- }), st = (r, e, t, s) => ({
2217
+ }), nt = (r, e, t, s) => ({
2140
2218
  scale: r.scale * e,
2141
2219
  x: r.scale * (1 - e) * t + r.x,
2142
2220
  y: r.scale * (1 - e) * s + r.y
2143
2221
  }), I = (r) => {
2144
2222
  const e = [], t = r.touches.length;
2145
- for (let a = 0; a < t; a++)
2146
- e.push([r.touches[a].clientX, r.touches[a].clientY]);
2223
+ for (let h = 0; h < t; h++)
2224
+ e.push([r.touches[h].clientX, r.touches[h].clientY]);
2147
2225
  const s = e.reduce(
2148
- (a, d) => [a[0] + d[0], a[1] + d[1]],
2226
+ (h, d) => [h[0] + d[0], h[1] + d[1]],
2149
2227
  [0, 0]
2150
- ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
2151
- (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
2228
+ ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
2229
+ (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
2152
2230
  0
2153
2231
  );
2154
2232
  return {
2155
2233
  x: i[0],
2156
2234
  y: i[1],
2157
- scale: h / t,
2235
+ scale: a / t,
2158
2236
  touchesCnt: t,
2159
2237
  touches: e
2160
2238
  };
2161
2239
  };
2162
- class O {
2240
+ class k {
2163
2241
  constructor(e, t, s, i) {
2164
2242
  o(this, "viewport");
2165
2243
  o(this, "prevTouches", null);
@@ -2176,7 +2254,7 @@ class O {
2176
2254
  }), this.startRegisteredTransform());
2177
2255
  });
2178
2256
  o(this, "onWindowMouseMove", (e) => {
2179
- const t = R(
2257
+ const t = C(
2180
2258
  this.window,
2181
2259
  this.element,
2182
2260
  e.clientX,
@@ -2195,8 +2273,8 @@ class O {
2195
2273
  o(this, "onWheelScroll", (e) => {
2196
2274
  if (!this.params.mouseWheelEventVerifier(e))
2197
2275
  return;
2198
- 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);
2199
- this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2276
+ 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);
2277
+ this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2200
2278
  this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
2201
2279
  }, this.params.scaleWheelFinishTimeout);
2202
2280
  });
@@ -2216,7 +2294,7 @@ class O {
2216
2294
  o(this, "onWindowTouchMove", (e) => {
2217
2295
  const t = I(e);
2218
2296
  if (!t.touches.every(
2219
- (i) => R(this.window, this.element, i[0], i[1])
2297
+ (i) => C(this.window, this.element, i[0], i[1])
2220
2298
  )) {
2221
2299
  this.stopTouchDrag();
2222
2300
  return;
@@ -2225,8 +2303,8 @@ class O {
2225
2303
  -(t.x - this.prevTouches.x),
2226
2304
  -(t.y - this.prevTouches.y)
2227
2305
  ), t.touchesCnt === 2) {
2228
- 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);
2229
- this.scaleViewport(c, h, a);
2306
+ 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);
2307
+ this.scaleViewport(c, a, h);
2230
2308
  }
2231
2309
  this.prevTouches = t;
2232
2310
  });
@@ -2256,23 +2334,23 @@ class O {
2256
2334
  }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2257
2335
  }
2258
2336
  static configure(e, t, s, i) {
2259
- new O(e, t, s, i);
2337
+ new k(e, t, s, i);
2260
2338
  }
2261
2339
  moveViewport(e, t) {
2262
- const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
2340
+ const s = this.viewport.getViewportMatrix(), i = it(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
2263
2341
  prevTransform: s,
2264
2342
  nextTransform: i,
2265
2343
  canvasWidth: n,
2266
- canvasHeight: h
2344
+ canvasHeight: a
2267
2345
  });
2268
- this.performTransform(a);
2346
+ this.performTransform(h);
2269
2347
  }
2270
2348
  scaleViewport(e, t, s) {
2271
- const i = this.canvas.viewport.getViewportMatrix(), n = st(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2349
+ const i = this.canvas.viewport.getViewportMatrix(), n = nt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2272
2350
  prevTransform: i,
2273
2351
  nextTransform: n,
2274
- canvasWidth: h,
2275
- canvasHeight: a
2352
+ canvasWidth: a,
2353
+ canvasHeight: h
2276
2354
  });
2277
2355
  this.performTransform(d);
2278
2356
  }
@@ -2299,7 +2377,7 @@ class O {
2299
2377
  }
2300
2378
  }
2301
2379
  class J {
2302
- constructor(e, t, s, i, n, h) {
2380
+ constructor(e, t, s, i, n, a) {
2303
2381
  o(this, "canvasResizeObserver");
2304
2382
  o(this, "nodeHorizontal");
2305
2383
  o(this, "nodeVertical");
@@ -2325,11 +2403,11 @@ class J {
2325
2403
  this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
2326
2404
  });
2327
2405
  o(this, "userTransformInProgress", !1);
2328
- 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) => {
2406
+ this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
2329
2407
  const c = d[0];
2330
2408
  this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
2331
2409
  }), this.viewport = e.viewport;
2332
- const a = {
2410
+ const h = {
2333
2411
  ...i,
2334
2412
  onResizeTransformStarted: () => {
2335
2413
  this.userTransformInProgress = !0, i.onResizeTransformStarted();
@@ -2349,21 +2427,21 @@ class J {
2349
2427
  this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
2350
2428
  }
2351
2429
  };
2352
- O.configure(
2430
+ k.configure(
2353
2431
  e,
2354
2432
  this.element,
2355
2433
  this.window,
2356
- a
2434
+ h
2357
2435
  ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
2358
2436
  }
2359
- static configure(e, t, s, i, n, h) {
2437
+ static configure(e, t, s, i, n, a) {
2360
2438
  new J(
2361
2439
  e,
2362
2440
  t,
2363
2441
  s,
2364
2442
  i,
2365
2443
  n,
2366
- h
2444
+ a
2367
2445
  );
2368
2446
  }
2369
2447
  scheduleLoadAreaAroundViewport() {
@@ -2372,21 +2450,21 @@ class J {
2372
2450
  });
2373
2451
  }
2374
2452
  scheduleEnsureViewportAreaLoaded() {
2375
- 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;
2376
- this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
2453
+ 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;
2454
+ this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
2377
2455
  }
2378
2456
  loadAreaAroundViewport() {
2379
- 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;
2380
- this.trigger.emit({ x: s, y: i, width: n, height: h });
2457
+ 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;
2458
+ this.trigger.emit({ x: s, y: i, width: n, height: a });
2381
2459
  }
2382
2460
  }
2383
- const it = () => {
2461
+ const at = () => {
2384
2462
  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2385
2463
  return r.style.position = "absolute", r.style.inset = "0", r;
2386
- }, nt = () => {
2464
+ }, ht = () => {
2387
2465
  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
2388
2466
  return r.setAttribute("fill", "url(#pattern)"), r;
2389
- }, ht = () => {
2467
+ }, dt = () => {
2390
2468
  const r = document.createElementNS(
2391
2469
  "http://www.w3.org/2000/svg",
2392
2470
  "pattern"
@@ -2395,9 +2473,9 @@ const it = () => {
2395
2473
  };
2396
2474
  class Q {
2397
2475
  constructor(e, t, s) {
2398
- o(this, "svg", it());
2399
- o(this, "patternRenderingRectangle", nt());
2400
- o(this, "pattern", ht());
2476
+ o(this, "svg", at());
2477
+ o(this, "patternRenderingRectangle", ht());
2478
+ o(this, "pattern", dt());
2401
2479
  o(this, "patternContent");
2402
2480
  o(this, "tileWidth");
2403
2481
  o(this, "tileHeight");
@@ -2408,8 +2486,8 @@ class Q {
2408
2486
  o(this, "resizeObserver", new ResizeObserver((e) => {
2409
2487
  const t = e[0], { width: s, height: i } = t.contentRect;
2410
2488
  this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
2411
- const n = this.tileWidth / s, h = this.tileHeight / i;
2412
- this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
2489
+ const n = this.tileWidth / s, a = this.tileHeight / i;
2490
+ this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
2413
2491
  }));
2414
2492
  o(this, "onAfterTransformUpdated", () => {
2415
2493
  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})`;
@@ -2437,10 +2515,10 @@ class _ {
2437
2515
  o(this, "onEdgeCreated", (e) => {
2438
2516
  this.params.onAfterEdgeCreated(e);
2439
2517
  });
2440
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
2518
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
2441
2519
  this.overlayLayer,
2442
2520
  this.viewportStore
2443
- ), F.configure(
2521
+ ), O.configure(
2444
2522
  this.canvas,
2445
2523
  this.overlayLayer,
2446
2524
  this.window,
@@ -2450,15 +2528,15 @@ class _ {
2450
2528
  onStopDrag: () => {
2451
2529
  this.resetDragState();
2452
2530
  },
2453
- onPortPointerDown: (h, a) => {
2454
- const d = this.params.connectionTypeResolver(h);
2455
- return d === null ? !1 : (this.grabPort(h, a, d), !0);
2531
+ onPortPointerDown: (a, h) => {
2532
+ const d = this.params.connectionTypeResolver(a);
2533
+ return d === null ? !1 : (this.grabPort(a, h, d), !0);
2456
2534
  },
2457
- onPointerMove: (h) => {
2458
- this.moveDraggingPort(h);
2535
+ onPointerMove: (a) => {
2536
+ this.moveDraggingPort(a);
2459
2537
  },
2460
- onPointerUp: (h) => {
2461
- this.tryCreateConnection(h);
2538
+ onPointerUp: (a) => {
2539
+ this.tryCreateConnection(a);
2462
2540
  }
2463
2541
  }
2464
2542
  );
@@ -2475,13 +2553,13 @@ class _ {
2475
2553
  grabPort(e, t, s) {
2476
2554
  const i = this.canvas.graph.getPort(e);
2477
2555
  this.staticPortId = e;
2478
- 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 = D(c, {
2479
- x: h - d.x,
2480
- y: a - d.y
2556
+ 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 = D(c, {
2557
+ x: a - d.x,
2558
+ y: h - d.y
2481
2559
  }), g = D(c, {
2482
2560
  x: t.x - d.x,
2483
2561
  y: t.y - d.y
2484
- }), p = {
2562
+ }), w = {
2485
2563
  overlayId: P.Static,
2486
2564
  portCoords: l,
2487
2565
  portDirection: i.direction
@@ -2491,9 +2569,9 @@ class _ {
2491
2569
  portDirection: this.params.dragPortDirection
2492
2570
  };
2493
2571
  this.isTargetDragging = s === "direct";
2494
- const [m, v] = this.isTargetDragging ? [p, f] : [f, p];
2495
- this.overlayCanvas.addNode(B(m)), this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addEdge({
2496
- from: m.overlayId,
2572
+ const [y, v] = this.isTargetDragging ? [w, f] : [f, w];
2573
+ this.overlayCanvas.addNode(W(y)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
2574
+ from: y.overlayId,
2497
2575
  to: v.overlayId,
2498
2576
  shape: this.params.edgeShapeFactory(P.Edge)
2499
2577
  });
@@ -2510,8 +2588,8 @@ class _ {
2510
2588
  );
2511
2589
  return;
2512
2590
  }
2513
- const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, h = this.params.connectionPreprocessor(n);
2514
- h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
2591
+ const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
2592
+ a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
2515
2593
  }
2516
2594
  moveDraggingPort(e) {
2517
2595
  const t = this.overlayLayer.getBoundingClientRect(), s = {
@@ -2533,10 +2611,10 @@ class q {
2533
2611
  o(this, "onEdgeReattached", (e) => {
2534
2612
  this.params.onAfterEdgeReattached(e);
2535
2613
  });
2536
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
2614
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
2537
2615
  this.overlayLayer,
2538
2616
  this.viewportStore
2539
- ), F.configure(
2617
+ ), O.configure(
2540
2618
  this.canvas,
2541
2619
  this.overlayLayer,
2542
2620
  this.window,
@@ -2546,12 +2624,12 @@ class q {
2546
2624
  onStopDrag: () => {
2547
2625
  this.resetDragState();
2548
2626
  },
2549
- onPortPointerDown: (h, a) => this.tryStartEdgeDragging(h, a),
2550
- onPointerMove: (h) => {
2551
- this.moveDraggingPort(h);
2627
+ onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
2628
+ onPointerMove: (a) => {
2629
+ this.moveDraggingPort(a);
2552
2630
  },
2553
- onPointerUp: (h) => {
2554
- this.tryCreateConnection(h);
2631
+ onPointerUp: (a) => {
2632
+ this.tryCreateConnection(a);
2555
2633
  }
2556
2634
  }
2557
2635
  );
@@ -2572,15 +2650,15 @@ class q {
2572
2650
  const i = this.canvas.graph.getEdge(s);
2573
2651
  if (i === null)
2574
2652
  return !1;
2575
- const n = e === i.from, h = e === i.to, a = n ? i.to : i.from;
2576
- this.staticPortId = a, this.isTargetDragging = h;
2577
- const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(a), l = c.element.getBoundingClientRect(), g = {
2653
+ const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
2654
+ this.staticPortId = h, this.isTargetDragging = a;
2655
+ const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
2578
2656
  x: l.x + l.width / 2,
2579
2657
  y: l.y + l.height / 2
2580
- }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = D(p, {
2658
+ }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = D(w, {
2581
2659
  x: g.x - f.x,
2582
2660
  y: g.y - f.y
2583
- }), v = D(p, {
2661
+ }), v = D(w, {
2584
2662
  x: t.x - f.x,
2585
2663
  y: t.y - f.y
2586
2664
  });
@@ -2593,14 +2671,14 @@ class q {
2593
2671
  }, this.canvas.removeEdge(s);
2594
2672
  const E = {
2595
2673
  overlayId: P.Static,
2596
- portCoords: m,
2674
+ portCoords: y,
2597
2675
  portDirection: c.direction
2598
2676
  }, x = {
2599
2677
  overlayId: P.Dragging,
2600
2678
  portCoords: v,
2601
2679
  portDirection: d.direction
2602
2680
  }, [b, T] = this.isTargetDragging ? [E, x] : [x, E];
2603
- this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(T));
2681
+ this.overlayCanvas.addNode(W(b)), this.overlayCanvas.addNode(W(T));
2604
2682
  const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
2605
2683
  return this.overlayCanvas.addEdge({
2606
2684
  id: P.Edge,
@@ -2635,15 +2713,15 @@ class q {
2635
2713
  });
2636
2714
  return;
2637
2715
  }
2638
- const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, h = {
2716
+ const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
2639
2717
  id: n.id,
2640
2718
  from: s,
2641
2719
  to: i,
2642
2720
  shape: n.shape,
2643
2721
  priority: n.priority
2644
- }, a = this.params.connectionPreprocessor(h);
2645
- if (a !== null)
2646
- this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
2722
+ }, h = this.params.connectionPreprocessor(a);
2723
+ if (h !== null)
2724
+ this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
2647
2725
  else {
2648
2726
  const d = this.draggingEdgePayload;
2649
2727
  this.params.onEdgeReattachPrevented({
@@ -2656,36 +2734,36 @@ class q {
2656
2734
  }
2657
2735
  }
2658
2736
  }
2659
- const at = () => {
2737
+ const ct = () => {
2660
2738
  const r = document.createElement("div");
2661
2739
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
2662
- }, H = () => {
2740
+ }, Y = () => {
2663
2741
  const r = document.createElement("div");
2664
2742
  return r.style.position = "absolute", r.style.inset = "0", r;
2665
2743
  }, ce = () => {
2666
- const r = H();
2744
+ const r = Y();
2667
2745
  return r.style.pointerEvents = "none", r;
2668
2746
  };
2669
- class dt {
2747
+ class gt {
2670
2748
  constructor(e) {
2671
- o(this, "background", H());
2672
- o(this, "main", H());
2749
+ o(this, "background", Y());
2750
+ o(this, "main", Y());
2673
2751
  o(this, "overlayConnectablePorts", ce());
2674
2752
  o(this, "overlayDraggableEdges", ce());
2675
- o(this, "host", at());
2753
+ o(this, "host", ct());
2676
2754
  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);
2677
2755
  }
2678
2756
  destroy() {
2679
2757
  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);
2680
2758
  }
2681
2759
  }
2682
- const X = (r) => () => r, ge = X(0), ct = () => {
2760
+ const H = (r) => () => r, ge = H(0), lt = () => {
2683
2761
  let r = 0;
2684
2762
  return () => r++;
2685
- }, gt = (r, e) => {
2763
+ }, ut = (r, e) => {
2686
2764
  let t = ge, s = ge;
2687
- const i = ct();
2688
- 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), {
2765
+ const i = lt();
2766
+ return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (s = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
2689
2767
  nodesPriorityFn: t,
2690
2768
  edgesPriorityFn: s
2691
2769
  };
@@ -2694,7 +2772,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2694
2772
  return r;
2695
2773
  switch (r == null ? void 0 : r.type) {
2696
2774
  case "straight":
2697
- return () => new _e({
2775
+ return () => new et({
2698
2776
  color: r.color,
2699
2777
  width: r.width,
2700
2778
  arrowLength: r.arrowLength,
@@ -2708,7 +2786,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2708
2786
  detourDirection: r.detourDirection
2709
2787
  });
2710
2788
  case "horizontal":
2711
- return () => new Qe({
2789
+ return () => new qe({
2712
2790
  color: r.color,
2713
2791
  width: r.width,
2714
2792
  arrowLength: r.arrowLength,
@@ -2722,7 +2800,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2722
2800
  detourDirection: r.detourDirection
2723
2801
  });
2724
2802
  case "vertical":
2725
- return () => new qe({
2803
+ return () => new tt({
2726
2804
  color: r.color,
2727
2805
  width: r.width,
2728
2806
  arrowLength: r.arrowLength,
@@ -2736,7 +2814,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2736
2814
  detourDirection: r.detourDirection
2737
2815
  });
2738
2816
  case "direct":
2739
- return () => new Te({
2817
+ return () => new be({
2740
2818
  color: r.color,
2741
2819
  width: r.width,
2742
2820
  arrowLength: r.arrowLength,
@@ -2747,7 +2825,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2747
2825
  targetOffset: r.targetOffset
2748
2826
  });
2749
2827
  default:
2750
- return () => new Je({
2828
+ return () => new _e({
2751
2829
  color: r.color,
2752
2830
  width: r.width,
2753
2831
  arrowLength: r.arrowLength,
@@ -2761,9 +2839,9 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2761
2839
  detourDirection: r.detourDirection
2762
2840
  });
2763
2841
  }
2764
- }, lt = (r) => {
2765
- var t, s, i, n, h;
2766
- const e = gt(
2842
+ }, pt = (r) => {
2843
+ var t, s, i, n, a;
2844
+ const e = ut(
2767
2845
  (t = r.nodes) == null ? void 0 : t.priority,
2768
2846
  (s = r.edges) == null ? void 0 : s.priority
2769
2847
  );
@@ -2776,50 +2854,50 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2776
2854
  direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
2777
2855
  },
2778
2856
  edges: {
2779
- shapeFactory: ee(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
2857
+ shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
2780
2858
  priorityFn: e.edgesPriorityFn
2781
2859
  }
2782
2860
  };
2783
- }, ut = (r) => {
2784
- var p, f, m, v, E, x;
2785
- const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
2786
- }), t = ((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((m = r.events) == null ? void 0 : m.onNodeDragFinished) ?? (() => {
2787
- }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, h = (v = r.mouse) == null ? void 0 : v.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
2861
+ }, wt = (r) => {
2862
+ var w, f, y, v, E, x;
2863
+ const e = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
2864
+ }), t = (((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) || r.nodeDragVerifier) ?? (() => !0), s = ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
2865
+ }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (v = r.mouse) == null ? void 0 : v.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
2788
2866
  return {
2789
2867
  moveOnTop: i,
2790
2868
  moveEdgesOnTop: n,
2791
- dragCursor: a,
2869
+ dragCursor: h,
2792
2870
  gridSize: r.gridSize ?? null,
2793
2871
  mouseDownEventVerifier: c,
2794
2872
  mouseUpEventVerifier: g,
2795
2873
  onNodeDrag: e,
2796
- onBeforeNodeDrag: t,
2874
+ nodeDragVerifier: t,
2797
2875
  onNodeDragFinished: s
2798
2876
  };
2799
- }, pt = (r) => {
2877
+ }, ft = (r) => {
2800
2878
  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;
2801
2879
  return (n) => {
2802
- let h = n.nextTransform.x, a = n.nextTransform.y;
2803
- h < e && h < n.prevTransform.x && (h = Math.min(n.prevTransform.x, e));
2880
+ let a = n.nextTransform.x, h = n.nextTransform.y;
2881
+ a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
2804
2882
  const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
2805
- 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));
2883
+ 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));
2806
2884
  const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
2807
- return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
2885
+ return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
2808
2886
  };
2809
- }, wt = (r) => {
2887
+ }, mt = (r) => {
2810
2888
  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
2811
2889
  return (n) => {
2812
- const h = n.prevTransform, a = n.nextTransform;
2813
- let d = a.scale, c = a.x, l = a.y;
2814
- if (a.scale > i && a.scale > h.scale) {
2815
- d = Math.max(h.scale, i), c = h.x, l = h.y;
2816
- const g = (d - h.scale) / (a.scale - h.scale);
2817
- c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
2890
+ const a = n.prevTransform, h = n.nextTransform;
2891
+ let d = h.scale, c = h.x, l = h.y;
2892
+ if (h.scale > i && h.scale > a.scale) {
2893
+ d = Math.max(a.scale, i), c = a.x, l = a.y;
2894
+ const g = (d - a.scale) / (h.scale - a.scale);
2895
+ c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2818
2896
  }
2819
- if (a.scale < s && a.scale < h.scale) {
2820
- d = Math.min(h.scale, s), c = h.x, l = h.y;
2821
- const g = (d - h.scale) / (a.scale - h.scale);
2822
- c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
2897
+ if (h.scale < s && h.scale < a.scale) {
2898
+ d = Math.min(a.scale, s), c = a.x, l = a.y;
2899
+ const g = (d - a.scale) / (h.scale - a.scale);
2900
+ c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2823
2901
  }
2824
2902
  return {
2825
2903
  scale: d,
@@ -2827,7 +2905,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2827
2905
  y: l
2828
2906
  };
2829
2907
  };
2830
- }, ft = (r) => (e) => r.reduce(
2908
+ }, yt = (r) => (e) => r.reduce(
2831
2909
  (t, s) => s({
2832
2910
  prevTransform: e.prevTransform,
2833
2911
  nextTransform: t,
@@ -2840,12 +2918,12 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2840
2918
  return r;
2841
2919
  switch (r.type) {
2842
2920
  case "scale-limit":
2843
- return wt({
2921
+ return mt({
2844
2922
  minContentScale: r.minContentScale ?? 0,
2845
2923
  maxContentScale: r.maxContentScale ?? 1 / 0
2846
2924
  });
2847
2925
  case "shift-limit":
2848
- return pt({
2926
+ return ft({
2849
2927
  minX: r.minX ?? -1 / 0,
2850
2928
  maxX: r.maxX ?? 1 / 0,
2851
2929
  minY: r.minY ?? -1 / 0,
@@ -2853,25 +2931,25 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2853
2931
  });
2854
2932
  }
2855
2933
  }, ue = (r) => {
2856
- var m, v, E, x, b, T, N, C, te, re, oe, se;
2857
- const e = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
2934
+ var y, v, E, x, b, T, N, V, te, re, oe, se;
2935
+ const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
2858
2936
  let i;
2859
- s !== void 0 ? Array.isArray(s) ? i = ft(
2937
+ s !== void 0 ? Array.isArray(s) ? i = yt(
2860
2938
  s.map(
2861
2939
  (M) => le(M)
2862
2940
  )
2863
2941
  ) : i = le(s) : i = (M) => M.nextTransform;
2864
- const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
2865
- }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
2866
- }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.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;
2942
+ const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
2943
+ }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
2944
+ }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, w = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
2867
2945
  return {
2868
2946
  wheelSensitivity: t,
2869
- onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
2947
+ onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
2870
2948
  }),
2871
2949
  onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
2872
2950
  }),
2873
- onBeforeTransformChange: h,
2874
- onTransformChange: a,
2951
+ onBeforeTransformChange: a,
2952
+ onTransformChange: h,
2875
2953
  transformPreprocessor: i,
2876
2954
  shiftCursor: n,
2877
2955
  mouseDownEventVerifier: c,
@@ -2883,27 +2961,27 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2883
2961
  onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
2884
2962
  })
2885
2963
  };
2886
- }, mt = (r, e) => {
2964
+ }, vt = (r, e) => {
2887
2965
  const t = document.createElementNS(
2888
2966
  "http://www.w3.org/2000/svg",
2889
2967
  "circle"
2890
2968
  );
2891
2969
  return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
2892
- }, yt = (r) => r instanceof SVGElement ? r : mt(
2970
+ }, Et = (r) => r instanceof SVGElement ? r : vt(
2893
2971
  (r == null ? void 0 : r.radius) ?? 1.5,
2894
2972
  (r == null ? void 0 : r.color) ?? "#d8d8d8"
2895
- ), vt = (r) => {
2896
- const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = yt(r.renderer ?? {});
2973
+ ), At = (r) => {
2974
+ const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Et(r.renderer ?? {});
2897
2975
  return {
2898
2976
  tileWidth: t,
2899
2977
  tileHeight: s,
2900
2978
  renderer: i,
2901
2979
  maxViewportScale: r.maxViewportScale ?? 10
2902
2980
  };
2903
- }, Et = (r, e, t) => {
2981
+ }, xt = (r, e, t) => {
2904
2982
  var c, l, g;
2905
- const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
2906
- }, a = () => {
2983
+ const s = () => "direct", i = (w) => w, n = (w) => w.button === 0, a = () => {
2984
+ }, h = () => {
2907
2985
  }, d = () => {
2908
2986
  };
2909
2987
  return {
@@ -2911,19 +2989,19 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2911
2989
  connectionPreprocessor: r.connectionPreprocessor ?? i,
2912
2990
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
2913
2991
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
2914
- onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? h,
2992
+ onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
2915
2993
  onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
2916
- onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
2994
+ onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
2917
2995
  dragPortDirection: r.dragPortDirection ?? t,
2918
2996
  edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
2919
2997
  };
2920
- }, At = (r, e) => {
2998
+ }, St = (r, e) => {
2921
2999
  var c, l, g;
2922
- const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
2923
- const f = e.getPortAdjacentEdgeIds(p);
3000
+ const t = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
3001
+ const f = e.getPortAdjacentEdgeIds(w);
2924
3002
  return f.length > 0 ? f[f.length - 1] : null;
2925
- }, h = () => {
2926
3003
  }, a = () => {
3004
+ }, h = () => {
2927
3005
  }, d = () => {
2928
3006
  };
2929
3007
  return {
@@ -2932,14 +3010,14 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2932
3010
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
2933
3011
  draggingEdgeResolver: r.draggingEdgeResolver ?? n,
2934
3012
  draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
2935
- onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
3013
+ onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
2936
3014
  onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
2937
- onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
3015
+ onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
2938
3016
  };
2939
- }, xt = (r) => ({
3017
+ }, Pt = (r) => ({
2940
3018
  nodeVerticalRadius: r.nodeContainingRadius.vertical,
2941
3019
  nodeHorizontalRadius: r.nodeContainingRadius.horizontal
2942
- }), St = (r) => {
3020
+ }), bt = (r) => {
2943
3021
  var e, t;
2944
3022
  return {
2945
3023
  onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -2948,7 +3026,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
2948
3026
  })
2949
3027
  };
2950
3028
  };
2951
- class Tt {
3029
+ class Nt {
2952
3030
  constructor(e) {
2953
3031
  o(this, "element", null);
2954
3032
  o(this, "canvasDefaults", {});
@@ -3046,42 +3124,42 @@ class Tt {
3046
3124
  );
3047
3125
  let e = this.boxRenderingTrigger;
3048
3126
  this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
3049
- const t = new me(), s = new Fe(), i = new dt(this.element);
3127
+ const t = new me(), s = new $e(), i = new gt(this.element);
3050
3128
  let n = new pe(
3051
3129
  t,
3052
3130
  s,
3053
3131
  i.main
3054
3132
  );
3055
- e !== void 0 && (n = new Ue(
3133
+ e !== void 0 && (n = new Ie(
3056
3134
  n,
3057
3135
  t,
3058
3136
  e,
3059
- St(this.virtualScrollConfig)
3137
+ bt(this.virtualScrollConfig)
3060
3138
  ));
3061
- const h = lt(this.canvasDefaults), a = new fe(
3139
+ const a = pt(this.canvasDefaults), h = new fe(
3062
3140
  this.element,
3063
3141
  t,
3064
3142
  s,
3065
3143
  n,
3066
- h
3144
+ a
3067
3145
  );
3068
3146
  if (this.hasBackground && Q.configure(
3069
- a,
3070
- vt(this.backgroundConfig),
3147
+ h,
3148
+ At(this.backgroundConfig),
3071
3149
  i.background
3072
- ), this.hasNodeResizeReactiveEdges && Y.configure(a), this.hasDraggableNode && Z.configure(
3073
- a,
3150
+ ), this.hasNodeResizeReactiveEdges && j.configure(h), this.hasDraggableNode && Z.configure(
3151
+ h,
3074
3152
  i.main,
3075
3153
  this.window,
3076
- ut(this.dragConfig)
3154
+ wt(this.dragConfig)
3077
3155
  ), this.hasUserConnectablePorts) {
3078
- const c = Et(
3156
+ const c = xt(
3079
3157
  this.connectablePortsConfig,
3080
- h.edges.shapeFactory,
3081
- h.ports.direction
3158
+ a.edges.shapeFactory,
3159
+ a.ports.direction
3082
3160
  );
3083
3161
  _.configure(
3084
- a,
3162
+ h,
3085
3163
  i.overlayConnectablePorts,
3086
3164
  s,
3087
3165
  this.window,
@@ -3089,12 +3167,12 @@ class Tt {
3089
3167
  );
3090
3168
  }
3091
3169
  if (this.hasUserDraggableEdges) {
3092
- const c = At(
3170
+ const c = St(
3093
3171
  this.draggableEdgesConfig,
3094
- a.graph
3172
+ h.graph
3095
3173
  );
3096
3174
  q.configure(
3097
- a,
3175
+ h,
3098
3176
  i.overlayDraggableEdges,
3099
3177
  s,
3100
3178
  this.window,
@@ -3102,22 +3180,22 @@ class Tt {
3102
3180
  );
3103
3181
  }
3104
3182
  this.virtualScrollConfig !== void 0 ? J.configure(
3105
- a,
3183
+ h,
3106
3184
  i.main,
3107
3185
  this.window,
3108
3186
  ue(this.transformConfig),
3109
3187
  e,
3110
- xt(this.virtualScrollConfig)
3111
- ) : this.hasTransformableViewport && O.configure(
3112
- a,
3188
+ Pt(this.virtualScrollConfig)
3189
+ ) : this.hasTransformableViewport && k.configure(
3190
+ h,
3113
3191
  i.main,
3114
3192
  this.window,
3115
3193
  ue(this.transformConfig)
3116
3194
  ), this.reset();
3117
3195
  const d = () => {
3118
- i.destroy(), a.onBeforeDestroy.unsubscribe(d);
3196
+ i.destroy(), h.onBeforeDestroy.unsubscribe(d);
3119
3197
  };
3120
- return a.onBeforeDestroy.subscribe(d), a;
3198
+ return h.onBeforeDestroy.subscribe(d), h;
3121
3199
  }
3122
3200
  /**
3123
3201
  * @deprecated
@@ -3128,17 +3206,17 @@ class Tt {
3128
3206
  }
3129
3207
  }
3130
3208
  export {
3131
- Je as BezierEdgeShape,
3132
- Tt as CanvasBuilder,
3133
- Te as DirectEdgeShape,
3209
+ _e as BezierEdgeShape,
3210
+ Nt as CanvasBuilder,
3211
+ be as DirectEdgeShape,
3134
3212
  we as EventSubject,
3135
- Qe as HorizontalEdgeShape,
3213
+ qe as HorizontalEdgeShape,
3136
3214
  S as HtmlGraphError,
3137
- rt as InteractiveEdgeError,
3138
- De as InteractiveEdgeShape,
3139
- $ as LineEdgeShape,
3140
- bt as MedianEdgeShape,
3141
- bt as MidpointEdgeShape,
3142
- _e as StraightEdgeShape,
3143
- qe as VerticalEdgeShape
3215
+ st as InteractiveEdgeError,
3216
+ Te as InteractiveEdgeShape,
3217
+ F as LineEdgeShape,
3218
+ Dt as MedianEdgeShape,
3219
+ Dt as MidpointEdgeShape,
3220
+ et as StraightEdgeShape,
3221
+ tt as VerticalEdgeShape
3144
3222
  };