@html-graph/html-graph 4.1.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +4 -10
  2. package/dist/html-graph.d.ts +55 -28
  3. package/dist/html-graph.js +1680 -1583
  4. package/dist/html-graph.umd.cjs +1 -1
  5. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,74 +1,75 @@
1
- var Nt = Object.defineProperty;
2
- var Mt = (r, t, e) => t in r ? Nt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
3
- var o = (r, t, e) => Mt(r, typeof t != "symbol" ? t + "" : t, e);
4
- const T = (r, t) => ({
5
- x: r.scale * t.x + r.x,
6
- y: r.scale * t.y + r.y
1
+ var Me = Object.defineProperty;
2
+ var Re = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
+ var s = (r, e, t) => Re(r, typeof e != "symbol" ? e + "" : e, t);
4
+ const T = (r, e) => ({
5
+ x: r.scale * e.x + r.x,
6
+ y: r.scale * e.y + r.y
7
7
  });
8
- var C = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(C || {});
9
- const Lt = () => {
8
+ var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
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
- }, Ct = () => {
12
+ }, Ce = () => {
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
- }, Rt = (r) => {
15
+ }, Ve = (r) => {
16
16
  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
17
17
  };
18
- class pt {
19
- constructor(t, e, s) {
20
- o(this, "host", Lt());
21
- o(this, "container", Ct());
22
- o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
23
- o(this, "applyTransform", () => {
24
- const t = this.viewportStore.getContentMatrix();
25
- this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
26
- });
27
- this.graphStore = t, this.viewportStore = e, this.element = s, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
28
- }
29
- attachNode(t) {
30
- const e = this.graphStore.getNode(t);
31
- Rt(e.element), this.container.appendChild(e.element), this.updateNodePosition(t), this.updateNodePriority(t), e.element.style.visibility = "visible";
32
- }
33
- detachNode(t) {
34
- const e = this.graphStore.getNode(t);
35
- this.container.removeChild(e.element);
36
- }
37
- attachEdge(t) {
38
- const e = this.graphStore.getEdge(t).payload.shape.svg;
39
- this.edgeIdToElementMap.set(t, e), this.container.appendChild(e), this.renderEdge(t), this.updateEdgePriority(t);
40
- }
41
- detachEdge(t) {
42
- const e = this.edgeIdToElementMap.get(t);
43
- this.container.removeChild(e), this.edgeIdToElementMap.delete(t);
18
+ class ue {
19
+ constructor(e, t, o) {
20
+ s(this, "host", Le());
21
+ s(this, "container", Ce());
22
+ s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
23
+ s(this, "attachedNodeIds", /* @__PURE__ */ new Set());
24
+ s(this, "applyTransform", () => {
25
+ const e = this.viewportStore.getContentMatrix();
26
+ this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
27
+ });
28
+ this.graphStore = e, this.viewportStore = t, this.element = o, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
29
+ }
30
+ attachNode(e) {
31
+ const t = this.graphStore.getNode(e);
32
+ Ve(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
33
+ }
34
+ detachNode(e) {
35
+ const t = this.graphStore.getNode(e);
36
+ this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
37
+ }
38
+ attachEdge(e) {
39
+ const t = this.graphStore.getEdge(e).payload.shape.svg;
40
+ this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
41
+ }
42
+ detachEdge(e) {
43
+ const t = this.edgeIdToElementMap.get(e);
44
+ this.container.removeChild(t), this.edgeIdToElementMap.delete(e);
44
45
  }
45
46
  clear() {
46
- this.edgeIdToElementMap.forEach((t, e) => {
47
- this.detachEdge(e);
48
- }), this.graphStore.getAllNodeIds().forEach((t) => {
49
- this.detachNode(t);
47
+ this.edgeIdToElementMap.forEach((e, t) => {
48
+ this.detachEdge(t);
49
+ }), this.attachedNodeIds.forEach((e) => {
50
+ this.detachNode(e);
50
51
  });
51
52
  }
52
53
  destroy() {
53
- this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
54
+ this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
54
55
  }
55
- updateNodePosition(t) {
56
- const e = this.graphStore.getNode(t), { width: s, height: i } = e.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = e.payload.centerFn(s, i), h = e.payload.x - n * a.x, d = e.payload.y - n * a.y;
57
- e.element.style.transform = `translate(${h}px, ${d}px)`;
56
+ updateNodePosition(e) {
57
+ const t = this.graphStore.getNode(e), { width: o, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.payload.centerFn(o, i), { payload: h } = t, d = h.x - n * a.x, c = h.y - n * a.y;
58
+ t.element.style.transform = `translate(${d}px, ${c}px)`;
58
59
  }
59
- updateNodePriority(t) {
60
- const e = this.graphStore.getNode(t);
61
- e.element.style.zIndex = `${e.payload.priority}`;
60
+ updateNodePriority(e) {
61
+ const t = this.graphStore.getNode(e);
62
+ t.element.style.zIndex = `${t.payload.priority}`;
62
63
  }
63
- updateEdgeShape(t) {
64
- const e = this.edgeIdToElementMap.get(t);
65
- this.container.removeChild(e);
66
- const i = this.graphStore.getEdge(t).payload.shape.svg;
67
- this.edgeIdToElementMap.set(t, i), this.container.appendChild(i);
64
+ updateEdgeShape(e) {
65
+ const t = this.edgeIdToElementMap.get(e);
66
+ this.container.removeChild(t);
67
+ const i = this.graphStore.getEdge(e).payload.shape.svg;
68
+ this.edgeIdToElementMap.set(e, i), this.container.appendChild(i);
68
69
  }
69
- renderEdge(t) {
70
- const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), i = this.graphStore.getPort(e.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
71
- s,
70
+ renderEdge(e) {
71
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = o.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
72
+ o,
72
73
  n,
73
74
  h,
74
75
  d
@@ -78,101 +79,101 @@ class pt {
78
79
  h,
79
80
  d
80
81
  );
81
- let g = C.Line;
82
- s.element === i.element ? g = C.PortCycle : s.nodeId === i.nodeId && (g = C.NodeCycle), e.payload.shape.render({ from: c, to: l, category: g });
82
+ let g = L.Line;
83
+ o.element === i.element ? g = L.PortCycle : o.nodeId === i.nodeId && (g = L.NodeCycle), t.payload.shape.render({ from: c, to: l, category: g });
83
84
  }
84
- updateEdgePriority(t) {
85
- const e = this.graphStore.getEdge(t);
86
- e.payload.shape.svg.style.zIndex = `${e.payload.priority}`;
85
+ updateEdgePriority(e) {
86
+ const t = this.graphStore.getEdge(e);
87
+ t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
87
88
  }
88
- createEdgeRenderPort(t, e, s, i) {
89
+ createEdgeRenderPort(e, t, o, i) {
89
90
  const n = {
90
- x: e.left - s.left,
91
- y: e.top - s.top
91
+ x: t.left - o.left,
92
+ y: t.top - o.top
92
93
  }, a = T(i, n);
93
94
  return {
94
95
  x: a.x,
95
96
  y: a.y,
96
- width: e.width * i.scale,
97
- height: e.height * i.scale,
98
- direction: t.payload.direction
97
+ width: t.width * i.scale,
98
+ height: t.height * i.scale,
99
+ direction: e.payload.direction
99
100
  };
100
101
  }
101
102
  }
102
- class Vt {
103
- constructor(t) {
104
- o(this, "xFrom", 1 / 0);
105
- o(this, "yFrom", 1 / 0);
106
- o(this, "xTo", 1 / 0);
107
- o(this, "yTo", 1 / 0);
108
- this.graphStore = t;
109
- }
110
- setRenderingBox(t) {
111
- this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
112
- }
113
- hasNode(t) {
114
- const e = this.graphStore.getNode(t).payload;
115
- return e.x >= this.xFrom && e.x <= this.xTo && e.y >= this.yFrom && e.y <= this.yTo;
116
- }
117
- hasEdge(t) {
118
- const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(i).payload, 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);
103
+ class $e {
104
+ constructor(e) {
105
+ s(this, "xFrom", 1 / 0);
106
+ s(this, "yFrom", 1 / 0);
107
+ s(this, "xTo", 1 / 0);
108
+ s(this, "yTo", 1 / 0);
109
+ this.graphStore = e;
110
+ }
111
+ setRenderingBox(e) {
112
+ this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
113
+ }
114
+ hasNode(e) {
115
+ const t = this.graphStore.getNode(e).payload, { x: o, y: i } = t;
116
+ return o >= this.xFrom && o <= this.xTo && i >= this.yFrom && i <= this.yTo;
117
+ }
118
+ hasEdge(e) {
119
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(i).payload, 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);
119
120
  return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
120
121
  }
121
122
  }
122
- class It {
123
- constructor(t, e, s, i) {
124
- o(this, "attachedNodes", /* @__PURE__ */ new Set());
125
- o(this, "attachedEdges", /* @__PURE__ */ new Set());
126
- o(this, "renderingBox");
127
- o(this, "updateViewport", (t) => {
128
- this.renderingBox.setRenderingBox(t);
129
- const e = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
123
+ class Ue {
124
+ constructor(e, t, o, i) {
125
+ s(this, "attachedNodes", /* @__PURE__ */ new Set());
126
+ s(this, "attachedEdges", /* @__PURE__ */ new Set());
127
+ s(this, "renderingBox");
128
+ s(this, "updateViewport", (e) => {
129
+ this.renderingBox.setRenderingBox(e);
130
+ const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
130
131
  this.graphStore.getAllNodeIds().forEach((a) => {
131
132
  const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
132
- h && !d ? e.add(a) : !h && d && s.add(a);
133
+ h && !d ? t.add(a) : !h && d && o.add(a);
133
134
  }), this.graphStore.getAllEdgeIds().forEach((a) => {
134
135
  const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
135
- h && (this.renderingBox.hasNode(l) || (e.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (e.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
136
+ h && (this.renderingBox.hasNode(l) || (t.add(l), o.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), o.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
136
137
  }), n.forEach((a) => {
137
138
  this.handleDetachEdge(a);
138
- }), s.forEach((a) => {
139
+ }), o.forEach((a) => {
139
140
  this.handleDetachNode(a);
140
- }), e.forEach((a) => {
141
+ }), t.forEach((a) => {
141
142
  this.attachedNodes.has(a) || this.handleAttachNode(a);
142
143
  }), i.forEach((a) => {
143
144
  this.handleAttachEdge(a);
144
145
  });
145
146
  });
146
- this.htmlView = t, this.graphStore = e, this.trigger = s, this.params = i, this.renderingBox = new Vt(this.graphStore), this.trigger.subscribe(this.updateViewport);
147
+ this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new $e(this.graphStore), this.trigger.subscribe(this.updateViewport);
147
148
  }
148
- attachNode(t) {
149
- this.renderingBox.hasNode(t) && this.handleAttachNode(t);
149
+ attachNode(e) {
150
+ this.renderingBox.hasNode(e) && this.handleAttachNode(e);
150
151
  }
151
- detachNode(t) {
152
- this.attachedNodes.has(t) && this.handleDetachNode(t);
152
+ detachNode(e) {
153
+ this.attachedNodes.has(e) && this.handleDetachNode(e);
153
154
  }
154
- attachEdge(t) {
155
- this.renderingBox.hasEdge(t) && this.attachEdgeEntities(t);
155
+ attachEdge(e) {
156
+ this.renderingBox.hasEdge(e) && this.attachEdgeEntities(e);
156
157
  }
157
- detachEdge(t) {
158
- this.attachedEdges.has(t) && this.handleDetachEdge(t);
158
+ detachEdge(e) {
159
+ this.attachedEdges.has(e) && this.handleDetachEdge(e);
159
160
  }
160
- updateNodePosition(t) {
161
- this.attachedNodes.has(t) ? this.htmlView.updateNodePosition(t) : this.renderingBox.hasNode(t) && (this.handleAttachNode(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((e) => {
162
- this.attachEdgeEntities(e);
161
+ updateNodePosition(e) {
162
+ this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((t) => {
163
+ this.attachEdgeEntities(t);
163
164
  }));
164
165
  }
165
- updateNodePriority(t) {
166
- this.attachedNodes.has(t) && this.htmlView.updateNodePriority(t);
166
+ updateNodePriority(e) {
167
+ this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
167
168
  }
168
- updateEdgeShape(t) {
169
- this.attachedEdges.has(t) && this.htmlView.updateEdgeShape(t);
169
+ updateEdgeShape(e) {
170
+ this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
170
171
  }
171
- renderEdge(t) {
172
- this.attachedEdges.has(t) && this.htmlView.renderEdge(t);
172
+ renderEdge(e) {
173
+ this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
173
174
  }
174
- updateEdgePriority(t) {
175
- this.attachedEdges.has(t) && this.htmlView.updateEdgePriority(t);
175
+ updateEdgePriority(e) {
176
+ this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
176
177
  }
177
178
  clear() {
178
179
  this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
@@ -180,156 +181,93 @@ class It {
180
181
  destroy() {
181
182
  this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
182
183
  }
183
- attachEdgeEntities(t) {
184
- const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId;
185
- this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(t);
184
+ attachEdgeEntities(e) {
185
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId;
186
+ this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
186
187
  }
187
- handleAttachNode(t) {
188
- this.params.onBeforeNodeAttached(t), this.attachedNodes.add(t), this.htmlView.attachNode(t);
188
+ handleAttachNode(e) {
189
+ this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
189
190
  }
190
- handleDetachNode(t) {
191
- this.htmlView.detachNode(t), this.attachedNodes.delete(t), this.params.onAfterNodeDetached(t);
191
+ handleDetachNode(e) {
192
+ this.htmlView.detachNode(e), this.attachedNodes.delete(e), this.params.onAfterNodeDetached(e);
192
193
  }
193
- handleAttachEdge(t) {
194
- this.attachedEdges.add(t), this.htmlView.attachEdge(t);
194
+ handleAttachEdge(e) {
195
+ this.attachedEdges.add(e), this.htmlView.attachEdge(e);
195
196
  }
196
- handleDetachEdge(t) {
197
- this.htmlView.detachEdge(t), this.attachedEdges.delete(t);
197
+ handleDetachEdge(e) {
198
+ this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
198
199
  }
199
200
  }
200
- class wt {
201
- constructor() {
202
- o(this, "callbacks", /* @__PURE__ */ new Set());
203
- }
204
- subscribe(t) {
205
- this.callbacks.add(t);
206
- }
207
- unsubscribe(t) {
208
- this.callbacks.delete(t);
201
+ class Ie {
202
+ constructor(e, t) {
203
+ s(this, "deferredNodes", /* @__PURE__ */ new Set());
204
+ s(this, "deferredEdges", /* @__PURE__ */ new Set());
205
+ this.htmlView = e, this.graphStore = t;
209
206
  }
210
- emit(t) {
211
- this.callbacks.forEach((e) => {
212
- e(t);
213
- });
207
+ attachNode(e) {
208
+ const t = this.graphStore.getNode(e);
209
+ t.payload.x !== null && t.payload.y !== null ? this.htmlView.attachNode(e) : this.deferredNodes.add(e);
214
210
  }
215
- }
216
- const A = () => {
217
- const r = new wt();
218
- return [r, r];
219
- };
220
- class Ut {
221
- constructor(t) {
222
- o(this, "onAfterUpdated");
223
- this.viewportStore = t, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
211
+ detachNode(e) {
212
+ this.deferredNodes.has(e) ? this.deferredNodes.delete(e) : this.htmlView.detachNode(e);
224
213
  }
225
- getViewportMatrix() {
226
- return { ...this.viewportStore.getViewportMatrix() };
227
- }
228
- getContentMatrix() {
229
- return { ...this.viewportStore.getContentMatrix() };
230
- }
231
- }
232
- class Wt {
233
- constructor(t) {
234
- o(this, "onAfterNodeAdded");
235
- o(this, "onAfterNodeUpdated");
236
- o(this, "onAfterNodePriorityUpdated");
237
- o(this, "onBeforeNodeRemoved");
238
- o(this, "onAfterPortMarked");
239
- o(this, "onAfterPortUpdated");
240
- o(this, "onBeforePortUnmarked");
241
- o(this, "onAfterEdgeAdded");
242
- o(this, "onAfterEdgeShapeUpdated");
243
- o(this, "onAfterEdgeUpdated");
244
- o(this, "onAfterEdgePriorityUpdated");
245
- o(this, "onBeforeEdgeRemoved");
246
- o(this, "onBeforeClear");
247
- this.graphStore = t, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
248
- }
249
- getNode(t) {
250
- const e = this.graphStore.getNode(t);
251
- if (e === void 0)
252
- return null;
253
- const s = e.payload;
254
- return {
255
- element: e.element,
256
- x: s.x,
257
- y: s.y,
258
- centerFn: s.centerFn,
259
- priority: s.priority
260
- };
261
- }
262
- getElementNodeId(t) {
263
- return this.graphStore.getElementNodeId(t) ?? null;
264
- }
265
- getAllNodeIds() {
266
- return this.graphStore.getAllNodeIds();
267
- }
268
- getPort(t) {
269
- const e = this.graphStore.getPort(t);
270
- return e === void 0 ? null : {
271
- element: e.element,
272
- direction: e.payload.direction,
273
- nodeId: e.nodeId
274
- };
275
- }
276
- getAllPortIds() {
277
- return this.graphStore.getAllPortIds();
214
+ attachEdge(e) {
215
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to);
216
+ this.deferredNodes.has(o.nodeId) || this.deferredNodes.has(i.nodeId) ? this.deferredEdges.add(e) : this.htmlView.attachEdge(e);
278
217
  }
279
- getNodePortIds(t) {
280
- return this.graphStore.getNodePortIds(t) ?? null;
218
+ detachEdge(e) {
219
+ this.deferredEdges.has(e) ? this.deferredEdges.delete(e) : this.htmlView.detachEdge(e);
281
220
  }
282
- getElementPortIds(t) {
283
- return [...this.graphStore.getElementPortIds(t)];
221
+ updateNodePosition(e) {
222
+ this.deferredNodes.has(e) || this.htmlView.updateNodePosition(e);
284
223
  }
285
- getAllEdgeIds() {
286
- return this.graphStore.getAllEdgeIds();
224
+ updateNodePriority(e) {
225
+ this.deferredNodes.has(e) || this.htmlView.updateNodePriority(e);
287
226
  }
288
- getEdge(t) {
289
- const e = this.graphStore.getEdge(t);
290
- if (e === void 0)
291
- return null;
292
- const s = e.payload;
293
- return {
294
- from: e.from,
295
- to: e.to,
296
- priority: s.priority,
297
- shape: s.shape
298
- };
227
+ updateEdgeShape(e) {
228
+ this.deferredEdges.has(e) || this.htmlView.updateEdgeShape(e);
299
229
  }
300
- getPortIncomingEdgeIds(t) {
301
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
230
+ renderEdge(e) {
231
+ this.deferredEdges.has(e) || this.htmlView.renderEdge(e);
302
232
  }
303
- getPortOutgoingEdgeIds(t) {
304
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(t);
233
+ updateEdgePriority(e) {
234
+ this.deferredEdges.has(e) || this.htmlView.updateEdgePriority(e);
305
235
  }
306
- getPortCycleEdgeIds(t) {
307
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
236
+ clear() {
237
+ this.deferredNodes.clear(), this.deferredEdges.clear(), this.htmlView.clear();
308
238
  }
309
- getPortAdjacentEdgeIds(t) {
310
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
239
+ destroy() {
240
+ this.htmlView.destroy();
311
241
  }
312
- getNodeIncomingEdgeIds(t) {
313
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
242
+ }
243
+ class pe {
244
+ constructor() {
245
+ s(this, "callbacks", /* @__PURE__ */ new Set());
314
246
  }
315
- getNodeOutgoingEdgeIds(t) {
316
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(t);
247
+ subscribe(e) {
248
+ this.callbacks.add(e);
317
249
  }
318
- getNodeCycleEdgeIds(t) {
319
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
250
+ unsubscribe(e) {
251
+ this.callbacks.delete(e);
320
252
  }
321
- getNodeAdjacentEdgeIds(t) {
322
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
253
+ emit(e) {
254
+ this.callbacks.forEach((t) => {
255
+ t(e);
256
+ });
323
257
  }
324
258
  }
325
- class z {
326
- constructor(t) {
327
- o(this, "counter", 0);
328
- this.checkExists = t;
259
+ const E = () => {
260
+ const r = new pe();
261
+ return [r, r];
262
+ };
263
+ class X {
264
+ constructor(e) {
265
+ s(this, "counter", 0);
266
+ this.checkExists = e;
329
267
  }
330
- create(t) {
331
- if (t !== void 0)
332
- return t;
268
+ create(e) {
269
+ if (e !== void 0)
270
+ return e;
333
271
  for (; this.checkExists(this.counter); )
334
272
  this.counter++;
335
273
  return this.counter;
@@ -341,218 +279,210 @@ class z {
341
279
  class S extends Error {
342
280
  constructor() {
343
281
  super(...arguments);
344
- o(this, "name", "CanvasError");
282
+ s(this, "name", "CanvasError");
345
283
  }
346
284
  }
347
- class ft {
348
- constructor(t, e, s, i) {
349
- /**
350
- * provides api for accessing model of rendered graph
351
- */
352
- o(this, "graph");
353
- /**
354
- * provides api for accessing viewport state
355
- */
356
- o(this, "viewport");
357
- o(this, "nodeIdGenerator", new z(
358
- (t) => this.graph.getNode(t) !== null
285
+ class we {
286
+ constructor(e, t, o, i, n, a) {
287
+ s(this, "nodeIdGenerator", new X(
288
+ (e) => this.graph.getNode(e) !== null
359
289
  ));
360
- o(this, "portIdGenerator", new z(
361
- (t) => this.graph.getPort(t) !== null
290
+ s(this, "portIdGenerator", new X(
291
+ (e) => this.graph.getPort(e) !== null
362
292
  ));
363
- o(this, "edgeIdGenerator", new z(
364
- (t) => this.graph.getEdge(t) !== null
293
+ s(this, "edgeIdGenerator", new X(
294
+ (e) => this.graph.getEdge(e) !== null
365
295
  ));
366
- o(this, "onAfterNodeAdded", (t) => {
367
- this.htmlView.attachNode(t);
296
+ s(this, "onAfterNodeAdded", (e) => {
297
+ this.htmlView.attachNode(e);
368
298
  });
369
- o(this, "onAfterNodeUpdated", (t) => {
370
- this.htmlView.updateNodePosition(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
371
- this.htmlView.renderEdge(s);
299
+ s(this, "onAfterNodeUpdated", (e) => {
300
+ this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
301
+ this.htmlView.renderEdge(o);
372
302
  });
373
303
  });
374
- o(this, "onAfterNodePriorityUpdated", (t) => {
375
- this.htmlView.updateNodePriority(t);
304
+ s(this, "onAfterNodePriorityUpdated", (e) => {
305
+ this.htmlView.updateNodePriority(e);
376
306
  });
377
- o(this, "onBeforeNodeRemoved", (t) => {
378
- this.graphStore.getNodePortIds(t).forEach((e) => {
379
- this.unmarkPort(e);
380
- }), this.htmlView.detachNode(t);
307
+ s(this, "onBeforeNodeRemoved", (e) => {
308
+ this.graphStore.getNodePortIds(e).forEach((t) => {
309
+ this.unmarkPort(t);
310
+ }), this.htmlView.detachNode(e);
381
311
  });
382
- o(this, "onAfterPortUpdated", (t) => {
383
- this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
384
- this.htmlView.renderEdge(s);
312
+ s(this, "onAfterPortUpdated", (e) => {
313
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
314
+ this.htmlView.renderEdge(o);
385
315
  });
386
316
  });
387
- o(this, "onBeforePortUnmarked", (t) => {
388
- this.graphStore.getPortAdjacentEdgeIds(t).forEach((e) => {
389
- this.removeEdge(e);
317
+ s(this, "onBeforePortUnmarked", (e) => {
318
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
319
+ this.removeEdge(t);
390
320
  });
391
321
  });
392
- o(this, "onAfterEdgeAdded", (t) => {
393
- this.htmlView.attachEdge(t);
322
+ s(this, "onAfterEdgeAdded", (e) => {
323
+ this.htmlView.attachEdge(e);
394
324
  });
395
- o(this, "onAfterEdgeShapeUpdated", (t) => {
396
- this.htmlView.updateEdgeShape(t);
325
+ s(this, "onAfterEdgeShapeUpdated", (e) => {
326
+ this.htmlView.updateEdgeShape(e);
397
327
  });
398
- o(this, "onAfterEdgeUpdated", (t) => {
399
- this.htmlView.renderEdge(t);
328
+ s(this, "onAfterEdgeUpdated", (e) => {
329
+ this.htmlView.renderEdge(e);
400
330
  });
401
- o(this, "onAfterEdgePriorityUpdated", (t) => {
402
- this.htmlView.updateEdgePriority(t);
331
+ s(this, "onAfterEdgePriorityUpdated", (e) => {
332
+ this.htmlView.updateEdgePriority(e);
403
333
  });
404
- o(this, "onBeforeEdgeRemoved", (t) => {
405
- this.htmlView.detachEdge(t);
334
+ s(this, "onBeforeEdgeRemoved", (e) => {
335
+ this.htmlView.detachEdge(e);
406
336
  });
407
- o(this, "onBeforeClear", () => {
337
+ s(this, "onBeforeClear", () => {
408
338
  this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
409
339
  });
410
- o(this, "onBeforeDestroyEmitter");
411
- o(this, "destroyed", !1);
340
+ s(this, "onBeforeDestroyEmitter");
341
+ s(this, "destroyed", !1);
412
342
  /**
413
343
  * emits event just before destruction of canvas
414
344
  */
415
- o(this, "onBeforeDestroy");
416
- this.graphStore = t, this.viewportStore = e, this.htmlView = s, this.params = i, this.graph = new Wt(this.graphStore), this.viewport = new Ut(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
345
+ s(this, "onBeforeDestroy");
346
+ this.graph = e, this.viewport = t, this.graphStore = o, this.viewportStore = i, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
417
347
  this.onAfterNodePriorityUpdated
418
348
  ), 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(
419
349
  this.onAfterEdgeShapeUpdated
420
350
  ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
421
351
  this.onAfterEdgePriorityUpdated
422
- ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = A();
352
+ ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = E();
423
353
  }
424
354
  /**
425
355
  * adds new node
426
356
  */
427
- addNode(t) {
428
- const e = this.nodeIdGenerator.create(t.id);
429
- if (this.graphStore.getNode(e) !== void 0)
357
+ addNode(e) {
358
+ const t = this.nodeIdGenerator.create(e.id);
359
+ if (this.graphStore.getNode(t) !== void 0)
430
360
  throw new S("failed to add node with existing id");
431
- if (this.graphStore.getElementNodeId(t.element) !== void 0)
361
+ if (this.graphStore.getElementNodeId(e.element) !== void 0)
432
362
  throw new S(
433
363
  "failed to add node with html element already in use by another node"
434
364
  );
435
365
  if (this.graphStore.addNode({
436
- id: e,
437
- element: t.element,
438
- x: t.x,
439
- y: t.y,
440
- centerFn: t.centerFn ?? this.params.nodes.centerFn,
441
- priority: t.priority ?? this.params.nodes.priorityFn()
442
- }), t.ports !== void 0)
443
- for (const s of t.ports)
366
+ id: t,
367
+ element: e.element,
368
+ x: e.x,
369
+ y: e.y,
370
+ centerFn: e.centerFn ?? this.params.nodes.centerFn,
371
+ priority: e.priority ?? this.params.nodes.priorityFn()
372
+ }), e.ports !== void 0)
373
+ for (const o of e.ports)
444
374
  this.markPort({
445
- id: s.id,
446
- element: s.element,
447
- nodeId: e,
448
- direction: s.direction
375
+ id: o.id,
376
+ element: o.element,
377
+ nodeId: t,
378
+ direction: o.direction
449
379
  });
450
380
  return this;
451
381
  }
452
382
  /**
453
383
  * updates node parameters
454
384
  */
455
- updateNode(t, e) {
456
- if (this.graphStore.getNode(t) === void 0)
457
- throw new S("failed to update non existing node");
458
- return this.graphStore.updateNode(t, e ?? {}), this;
385
+ updateNode(e, t) {
386
+ if (this.graphStore.getNode(e) === void 0)
387
+ throw new S("failed to update nonexistent node");
388
+ return this.graphStore.updateNode(e, t ?? {}), this;
459
389
  }
460
390
  /**
461
391
  * removes specified node
462
392
  * all the ports of node get unmarked
463
393
  * all the edges adjacent to node get removed
464
394
  */
465
- removeNode(t) {
466
- if (this.graphStore.getNode(t) === void 0)
467
- throw new S("failed to remove non existing node");
468
- return this.graphStore.removeNode(t), this;
395
+ removeNode(e) {
396
+ if (this.graphStore.getNode(e) === void 0)
397
+ throw new S("failed to remove nonexistent node");
398
+ return this.graphStore.removeNode(e), this;
469
399
  }
470
400
  /**
471
401
  * marks specified element as a port for specified node
472
402
  */
473
- markPort(t) {
474
- const e = this.portIdGenerator.create(t.id);
475
- if (this.graphStore.getPort(e) !== void 0)
403
+ markPort(e) {
404
+ const t = this.portIdGenerator.create(e.id);
405
+ if (this.graphStore.getPort(t) !== void 0)
476
406
  throw new S("failed to add port with existing id");
477
- if (this.graphStore.getNode(t.nodeId) === void 0)
407
+ if (this.graphStore.getNode(e.nodeId) === void 0)
478
408
  throw new S("failed to mark port for nonexistent node");
479
409
  return this.graphStore.addPort({
480
- id: e,
481
- element: t.element,
482
- nodeId: t.nodeId,
483
- direction: t.direction ?? this.params.ports.direction
410
+ id: t,
411
+ element: e.element,
412
+ nodeId: e.nodeId,
413
+ direction: e.direction ?? this.params.ports.direction
484
414
  }), this;
485
415
  }
486
416
  /**
487
417
  * updates port and edges attached to it
488
418
  */
489
- updatePort(t, e) {
490
- if (this.graphStore.getPort(t) === void 0)
419
+ updatePort(e, t) {
420
+ if (this.graphStore.getPort(e) === void 0)
491
421
  throw new S("failed to update nonexistent port");
492
- return this.graphStore.updatePort(t, e ?? {}), this;
422
+ return this.graphStore.updatePort(e, t ?? {}), this;
493
423
  }
494
424
  /**
495
425
  * unmarks specified port
496
426
  * all the edges adjacent to the port get removed
497
427
  */
498
- unmarkPort(t) {
499
- if (this.graphStore.getPort(t) === void 0)
500
- throw new S("failed to unmark non existing port");
501
- return this.graphStore.removePort(t), this;
428
+ unmarkPort(e) {
429
+ if (this.graphStore.getPort(e) === void 0)
430
+ throw new S("failed to unmark nonexistent port");
431
+ return this.graphStore.removePort(e), this;
502
432
  }
503
433
  /**
504
434
  * adds new edge
505
435
  */
506
- addEdge(t) {
507
- const e = this.edgeIdGenerator.create(t.id);
508
- if (this.graphStore.getEdge(e) !== void 0)
436
+ addEdge(e) {
437
+ const t = this.edgeIdGenerator.create(e.id);
438
+ if (this.graphStore.getEdge(t) !== void 0)
509
439
  throw new S("failed to add edge with existing id");
510
- if (this.graphStore.getPort(t.from) === void 0)
440
+ if (this.graphStore.getPort(e.from) === void 0)
511
441
  throw new S("failed to add edge from nonexistent port");
512
- if (this.graphStore.getPort(t.to) === void 0)
442
+ if (this.graphStore.getPort(e.to) === void 0)
513
443
  throw new S("failed to add edge to nonexistent port");
514
444
  return this.graphStore.addEdge({
515
- id: e,
516
- from: t.from,
517
- to: t.to,
518
- shape: t.shape ?? this.params.edges.shapeFactory(e),
519
- priority: t.priority ?? this.params.edges.priorityFn()
445
+ id: t,
446
+ from: e.from,
447
+ to: e.to,
448
+ shape: e.shape ?? this.params.edges.shapeFactory(t),
449
+ priority: e.priority ?? this.params.edges.priorityFn()
520
450
  }), this;
521
451
  }
522
452
  /**
523
453
  * updates specified edge
524
454
  */
525
- updateEdge(t, e) {
526
- if (this.graphStore.getEdge(t) === void 0)
455
+ updateEdge(e, t) {
456
+ if (this.graphStore.getEdge(e) === void 0)
527
457
  throw new S("failed to update nonexistent edge");
528
- return this.graphStore.updateEdge(t, e ?? {}), this;
458
+ return this.graphStore.updateEdge(e, t ?? {}), this;
529
459
  }
530
460
  /**
531
461
  * removes specified edge
532
462
  */
533
- removeEdge(t) {
534
- if (this.graphStore.getEdge(t) === void 0)
463
+ removeEdge(e) {
464
+ if (this.graphStore.getEdge(e) === void 0)
535
465
  throw new S("failed to remove nonexistent edge");
536
- return this.graphStore.removeEdge(t), this;
466
+ return this.graphStore.removeEdge(e), this;
537
467
  }
538
468
  /**
539
- * applies transformation for viewport matrix
469
+ * clears canvas from nodes and edges
470
+ * canvas gets rolled back to initial state and can be reused
540
471
  */
541
- patchViewportMatrix(t) {
542
- return this.viewportStore.patchViewportMatrix(t), this;
472
+ clear() {
473
+ return this.graphStore.clear(), this;
543
474
  }
544
475
  /**
545
- * applies transformation for content matrix
476
+ * applies transformation for viewport matrix
546
477
  */
547
- patchContentMatrix(t) {
548
- return this.viewportStore.patchContentMatrix(t), this;
478
+ patchViewportMatrix(e) {
479
+ return this.viewportStore.patchViewportMatrix(e), this;
549
480
  }
550
481
  /**
551
- * clears canvas from nodes and edges
552
- * canvas gets rolled back to initial state and can be reused
482
+ * applies transformation for content matrix
553
483
  */
554
- clear() {
555
- return this.graphStore.clear(), this;
484
+ patchContentMatrix(e) {
485
+ return this.viewportStore.patchContentMatrix(e), this;
556
486
  }
557
487
  /**
558
488
  * destroys canvas
@@ -568,250 +498,250 @@ class ft {
568
498
  ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
569
499
  }
570
500
  }
571
- class $t {
501
+ class Be {
572
502
  constructor() {
573
- o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
574
- o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
503
+ s(this, "singleToMultiMap", /* @__PURE__ */ new Map());
504
+ s(this, "multiToSingleMap", /* @__PURE__ */ new Map());
575
505
  }
576
- addRecord(t, e) {
577
- const s = this.singleToMultiMap.get(t);
578
- s === void 0 ? this.singleToMultiMap.set(t, /* @__PURE__ */ new Set([e])) : s.add(e), this.multiToSingleMap.set(e, t);
506
+ addRecord(e, t) {
507
+ const o = this.singleToMultiMap.get(e);
508
+ o === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : o.add(t), this.multiToSingleMap.set(t, e);
579
509
  }
580
- getMultiBySingle(t) {
581
- const e = this.singleToMultiMap.get(t) ?? /* @__PURE__ */ new Set();
582
- return Array.from(e.values());
510
+ getMultiBySingle(e) {
511
+ const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
512
+ return Array.from(t.values());
583
513
  }
584
- removeByMulti(t) {
585
- const e = this.multiToSingleMap.get(t), s = this.singleToMultiMap.get(e);
586
- s.delete(t), s.size === 0 && this.singleToMultiMap.delete(e), this.multiToSingleMap.delete(t);
514
+ removeByMulti(e) {
515
+ const t = this.multiToSingleMap.get(e), o = this.singleToMultiMap.get(t);
516
+ o.delete(e), o.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
587
517
  }
588
- getByMulti(t) {
589
- return this.multiToSingleMap.get(t);
518
+ getByMulti(e) {
519
+ return this.multiToSingleMap.get(e);
590
520
  }
591
- removeBySingle(t) {
592
- this.singleToMultiMap.get(t).forEach((s) => {
593
- this.multiToSingleMap.delete(s);
594
- }), this.singleToMultiMap.delete(t);
521
+ removeBySingle(e) {
522
+ this.singleToMultiMap.get(e).forEach((o) => {
523
+ this.multiToSingleMap.delete(o);
524
+ }), this.singleToMultiMap.delete(e);
595
525
  }
596
526
  clear() {
597
527
  this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
598
528
  }
599
- forEachSingle(t) {
600
- this.singleToMultiMap.forEach((e, s) => {
601
- t(s);
529
+ forEachSingle(e) {
530
+ this.singleToMultiMap.forEach((t, o) => {
531
+ e(o);
602
532
  });
603
533
  }
604
- hasSingle(t) {
605
- return this.singleToMultiMap.get(t) !== void 0;
534
+ hasSingle(e) {
535
+ return this.singleToMultiMap.get(e) !== void 0;
606
536
  }
607
- hasMulti(t) {
608
- return this.multiToSingleMap.get(t) !== void 0;
537
+ hasMulti(e) {
538
+ return this.multiToSingleMap.get(e) !== void 0;
609
539
  }
610
540
  }
611
- class yt {
541
+ class fe {
612
542
  constructor() {
613
- o(this, "nodes", /* @__PURE__ */ new Map());
614
- o(this, "ports", /* @__PURE__ */ new Map());
615
- o(this, "edges", /* @__PURE__ */ new Map());
616
- o(this, "nodesElementsMap", /* @__PURE__ */ new Map());
617
- o(this, "incomingEdges", /* @__PURE__ */ new Map());
618
- o(this, "outcomingEdges", /* @__PURE__ */ new Map());
619
- o(this, "cycleEdges", /* @__PURE__ */ new Map());
620
- o(this, "elementPorts", new $t());
621
- o(this, "afterNodeAddedEmitter");
622
- o(this, "onAfterNodeAdded");
623
- o(this, "afterNodeUpdatedEmitter");
624
- o(this, "onAfterNodeUpdated");
625
- o(this, "afterNodePriorityUpdatedEmitter");
626
- o(this, "onAfterNodePriorityUpdated");
627
- o(this, "beforeNodeRemovedEmitter");
628
- o(this, "onBeforeNodeRemoved");
629
- o(this, "afterPortAddedEmitter");
630
- o(this, "onAfterPortAdded");
631
- o(this, "afterPortUpdatedEmitter");
632
- o(this, "onAfterPortUpdated");
633
- o(this, "beforePortRemovedEmitter");
634
- o(this, "onBeforePortRemoved");
635
- o(this, "afterEdgeAddedEmitter");
636
- o(this, "onAfterEdgeAdded");
637
- o(this, "afterEdgeShapeUpdatedEmitter");
638
- o(this, "onAfterEdgeShapeUpdated");
639
- o(this, "afterEdgeUpdatedEmitter");
640
- o(this, "onAfterEdgeUpdated");
641
- o(this, "afterEdgePriorityUpdatedEmitter");
642
- o(this, "onAfterEdgePriorityUpdated");
643
- o(this, "beforeEdgeRemovedEmitter");
644
- o(this, "onBeforeEdgeRemoved");
645
- o(this, "beforeClearEmitter");
646
- o(this, "onBeforeClear");
647
- [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
648
- }
649
- addNode(t) {
650
- const e = /* @__PURE__ */ new Map(), s = {
651
- element: t.element,
543
+ s(this, "nodes", /* @__PURE__ */ new Map());
544
+ s(this, "ports", /* @__PURE__ */ new Map());
545
+ s(this, "edges", /* @__PURE__ */ new Map());
546
+ s(this, "nodesElementsMap", /* @__PURE__ */ new Map());
547
+ s(this, "incomingEdges", /* @__PURE__ */ new Map());
548
+ s(this, "outcomingEdges", /* @__PURE__ */ new Map());
549
+ s(this, "cycleEdges", /* @__PURE__ */ new Map());
550
+ s(this, "elementPorts", new Be());
551
+ s(this, "afterNodeAddedEmitter");
552
+ s(this, "onAfterNodeAdded");
553
+ s(this, "afterNodeUpdatedEmitter");
554
+ s(this, "onAfterNodeUpdated");
555
+ s(this, "afterNodePriorityUpdatedEmitter");
556
+ s(this, "onAfterNodePriorityUpdated");
557
+ s(this, "beforeNodeRemovedEmitter");
558
+ s(this, "onBeforeNodeRemoved");
559
+ s(this, "afterPortAddedEmitter");
560
+ s(this, "onAfterPortAdded");
561
+ s(this, "afterPortUpdatedEmitter");
562
+ s(this, "onAfterPortUpdated");
563
+ s(this, "beforePortRemovedEmitter");
564
+ s(this, "onBeforePortRemoved");
565
+ s(this, "afterEdgeAddedEmitter");
566
+ s(this, "onAfterEdgeAdded");
567
+ s(this, "afterEdgeShapeUpdatedEmitter");
568
+ s(this, "onAfterEdgeShapeUpdated");
569
+ s(this, "afterEdgeUpdatedEmitter");
570
+ s(this, "onAfterEdgeUpdated");
571
+ s(this, "afterEdgePriorityUpdatedEmitter");
572
+ s(this, "onAfterEdgePriorityUpdated");
573
+ s(this, "beforeEdgeRemovedEmitter");
574
+ s(this, "onBeforeEdgeRemoved");
575
+ s(this, "beforeClearEmitter");
576
+ s(this, "onBeforeClear");
577
+ [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
578
+ }
579
+ addNode(e) {
580
+ const t = /* @__PURE__ */ new Map(), o = {
581
+ element: e.element,
652
582
  payload: {
653
- x: t.x,
654
- y: t.y,
655
- centerFn: t.centerFn,
656
- priority: t.priority
583
+ x: e.x,
584
+ y: e.y,
585
+ centerFn: e.centerFn,
586
+ priority: e.priority
657
587
  },
658
- ports: e
588
+ ports: t
659
589
  };
660
- this.nodes.set(t.id, s), this.nodesElementsMap.set(t.element, t.id), this.afterNodeAddedEmitter.emit(t.id);
590
+ this.nodes.set(e.id, o), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
661
591
  }
662
592
  getAllNodeIds() {
663
593
  return Array.from(this.nodes.keys());
664
594
  }
665
- getNode(t) {
666
- return this.nodes.get(t);
595
+ getNode(e) {
596
+ return this.nodes.get(e);
667
597
  }
668
- getElementNodeId(t) {
669
- return this.nodesElementsMap.get(t);
598
+ getElementNodeId(e) {
599
+ return this.nodesElementsMap.get(e);
670
600
  }
671
- updateNode(t, e) {
672
- const s = this.nodes.get(t).payload;
673
- s.x = e.x ?? s.x, s.y = e.y ?? s.y, s.centerFn = e.centerFn ?? s.centerFn, e.priority !== void 0 && (s.priority = e.priority, this.afterNodePriorityUpdatedEmitter.emit(t)), this.afterNodeUpdatedEmitter.emit(t);
601
+ updateNode(e, t) {
602
+ const o = this.nodes.get(e).payload;
603
+ o.x = t.x ?? o.x, o.y = t.y ?? o.y, o.centerFn = t.centerFn ?? o.centerFn, t.priority !== void 0 && (o.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
674
604
  }
675
- removeNode(t) {
676
- this.beforeNodeRemovedEmitter.emit(t);
677
- const e = this.nodes.get(t);
678
- this.nodesElementsMap.delete(e.element), this.nodes.delete(t);
605
+ removeNode(e) {
606
+ this.beforeNodeRemovedEmitter.emit(e);
607
+ const t = this.nodes.get(e);
608
+ this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
679
609
  }
680
- addPort(t) {
681
- this.ports.set(t.id, {
682
- element: t.element,
610
+ addPort(e) {
611
+ this.ports.set(e.id, {
612
+ element: e.element,
683
613
  payload: {
684
- direction: t.direction
614
+ direction: e.direction
685
615
  },
686
- nodeId: t.nodeId
687
- }), this.elementPorts.addRecord(t.element, t.id), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element), this.afterPortAddedEmitter.emit(t.id);
616
+ nodeId: e.nodeId
617
+ }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
688
618
  }
689
- getPort(t) {
690
- return this.ports.get(t);
619
+ getPort(e) {
620
+ return this.ports.get(e);
691
621
  }
692
- updatePort(t, e) {
693
- const s = this.ports.get(t).payload;
694
- s.direction = e.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(t);
622
+ updatePort(e, t) {
623
+ const o = this.ports.get(e).payload;
624
+ o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
695
625
  }
696
626
  getAllPortIds() {
697
627
  return Array.from(this.ports.keys());
698
628
  }
699
- getElementPortIds(t) {
700
- return this.elementPorts.getMultiBySingle(t);
629
+ getElementPortIds(e) {
630
+ return this.elementPorts.getMultiBySingle(e);
701
631
  }
702
- getNodePortIds(t) {
703
- const e = this.nodes.get(t);
704
- if (e !== void 0)
705
- return Array.from(e.ports.keys());
706
- }
707
- removePort(t) {
708
- const e = this.ports.get(t).nodeId;
709
- this.beforePortRemovedEmitter.emit(t), this.nodes.get(e).ports.delete(t), this.ports.delete(t), this.elementPorts.removeByMulti(t);
710
- }
711
- addEdge(t) {
712
- this.addEdgeInternal(t), this.afterEdgeAddedEmitter.emit(t.id);
713
- }
714
- updateEdge(t, e) {
715
- if (e.from !== void 0 || e.to !== void 0) {
716
- const i = this.edges.get(t), n = i.payload;
717
- this.removeEdgeInternal(t), this.addEdgeInternal({
718
- id: t,
719
- from: e.from ?? i.from,
720
- to: e.to ?? i.to,
632
+ getNodePortIds(e) {
633
+ const t = this.nodes.get(e);
634
+ if (t !== void 0)
635
+ return Array.from(t.ports.keys());
636
+ }
637
+ removePort(e) {
638
+ const t = this.ports.get(e).nodeId;
639
+ this.beforePortRemovedEmitter.emit(e), this.nodes.get(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
640
+ }
641
+ addEdge(e) {
642
+ this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
643
+ }
644
+ updateEdge(e, t) {
645
+ if (t.from !== void 0 || t.to !== void 0) {
646
+ const i = this.edges.get(e), n = i.payload;
647
+ this.removeEdgeInternal(e), this.addEdgeInternal({
648
+ id: e,
649
+ from: t.from ?? i.from,
650
+ to: t.to ?? i.to,
721
651
  shape: n.shape,
722
652
  priority: n.priority
723
653
  });
724
654
  }
725
- const s = this.edges.get(t);
726
- e.shape !== void 0 && (s.payload.shape = e.shape, this.afterEdgeShapeUpdatedEmitter.emit(t)), e.priority !== void 0 && (s.payload.priority = e.priority, this.afterEdgePriorityUpdatedEmitter.emit(t)), this.afterEdgeUpdatedEmitter.emit(t);
655
+ const o = this.edges.get(e);
656
+ t.shape !== void 0 && (o.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (o.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
727
657
  }
728
658
  getAllEdgeIds() {
729
659
  return Array.from(this.edges.keys());
730
660
  }
731
- getEdge(t) {
732
- return this.edges.get(t);
661
+ getEdge(e) {
662
+ return this.edges.get(e);
733
663
  }
734
- removeEdge(t) {
735
- this.beforeEdgeRemovedEmitter.emit(t), this.removeEdgeInternal(t);
664
+ removeEdge(e) {
665
+ this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
736
666
  }
737
667
  clear() {
738
668
  this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
739
669
  }
740
- getPortIncomingEdgeIds(t) {
741
- return Array.from(this.incomingEdges.get(t));
670
+ getPortIncomingEdgeIds(e) {
671
+ return Array.from(this.incomingEdges.get(e));
742
672
  }
743
- getPortOutgoingEdgeIds(t) {
744
- return Array.from(this.outcomingEdges.get(t));
673
+ getPortOutgoingEdgeIds(e) {
674
+ return Array.from(this.outcomingEdges.get(e));
745
675
  }
746
- getPortCycleEdgeIds(t) {
747
- return Array.from(this.cycleEdges.get(t));
676
+ getPortCycleEdgeIds(e) {
677
+ return Array.from(this.cycleEdges.get(e));
748
678
  }
749
- getPortAdjacentEdgeIds(t) {
679
+ getPortAdjacentEdgeIds(e) {
750
680
  return [
751
- ...this.getPortIncomingEdgeIds(t),
752
- ...this.getPortOutgoingEdgeIds(t),
753
- ...this.getPortCycleEdgeIds(t)
681
+ ...this.getPortIncomingEdgeIds(e),
682
+ ...this.getPortOutgoingEdgeIds(e),
683
+ ...this.getPortCycleEdgeIds(e)
754
684
  ];
755
685
  }
756
- getNodeIncomingEdgeIds(t) {
757
- const e = Array.from(this.nodes.get(t).ports.keys());
758
- let s = [];
759
- return e.forEach((i) => {
760
- s = [...s, ...this.getPortIncomingEdgeIds(i)];
761
- }), s;
762
- }
763
- getNodeOutgoingEdgeIds(t) {
764
- const e = Array.from(this.nodes.get(t).ports.keys());
765
- let s = [];
766
- return e.forEach((i) => {
767
- s = [...s, ...this.getPortOutgoingEdgeIds(i)];
768
- }), s;
769
- }
770
- getNodeCycleEdgeIds(t) {
771
- const e = Array.from(this.nodes.get(t).ports.keys());
772
- let s = [];
773
- return e.forEach((i) => {
774
- s = [...s, ...this.getPortCycleEdgeIds(i)];
775
- }), s;
776
- }
777
- getNodeAdjacentEdgeIds(t) {
686
+ getNodeIncomingEdgeIds(e) {
687
+ const t = Array.from(this.nodes.get(e).ports.keys());
688
+ let o = [];
689
+ return t.forEach((i) => {
690
+ o = [...o, ...this.getPortIncomingEdgeIds(i)];
691
+ }), o;
692
+ }
693
+ getNodeOutgoingEdgeIds(e) {
694
+ const t = Array.from(this.nodes.get(e).ports.keys());
695
+ let o = [];
696
+ return t.forEach((i) => {
697
+ o = [...o, ...this.getPortOutgoingEdgeIds(i)];
698
+ }), o;
699
+ }
700
+ getNodeCycleEdgeIds(e) {
701
+ const t = Array.from(this.nodes.get(e).ports.keys());
702
+ let o = [];
703
+ return t.forEach((i) => {
704
+ o = [...o, ...this.getPortCycleEdgeIds(i)];
705
+ }), o;
706
+ }
707
+ getNodeAdjacentEdgeIds(e) {
778
708
  return [
779
- ...this.getNodeIncomingEdgeIds(t),
780
- ...this.getNodeOutgoingEdgeIds(t),
781
- ...this.getNodeCycleEdgeIds(t)
709
+ ...this.getNodeIncomingEdgeIds(e),
710
+ ...this.getNodeOutgoingEdgeIds(e),
711
+ ...this.getNodeCycleEdgeIds(e)
782
712
  ];
783
713
  }
784
- addEdgeInternal(t) {
785
- this.edges.set(t.id, {
786
- from: t.from,
787
- to: t.to,
714
+ addEdgeInternal(e) {
715
+ this.edges.set(e.id, {
716
+ from: e.from,
717
+ to: e.to,
788
718
  payload: {
789
- shape: t.shape,
790
- priority: t.priority
719
+ shape: e.shape,
720
+ priority: e.priority
791
721
  }
792
- }), t.from !== t.to ? (this.outcomingEdges.get(t.from).add(t.id), this.incomingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
722
+ }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
793
723
  }
794
- removeEdgeInternal(t) {
795
- const e = this.edges.get(t), s = e.from, i = e.to;
796
- this.cycleEdges.get(s).delete(t), this.cycleEdges.get(i).delete(t), this.incomingEdges.get(s).delete(t), this.incomingEdges.get(i).delete(t), this.outcomingEdges.get(s).delete(t), this.outcomingEdges.get(i).delete(t), this.edges.delete(t);
724
+ removeEdgeInternal(e) {
725
+ const t = this.edges.get(e), o = t.from, i = t.to;
726
+ this.cycleEdges.get(o).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(o).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(o).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
797
727
  }
798
728
  }
799
- const it = (r) => ({
729
+ const ie = (r) => ({
800
730
  scale: 1 / r.scale,
801
731
  x: -r.x / r.scale,
802
732
  y: -r.y / r.scale
803
- }), nt = {
733
+ }), ne = {
804
734
  scale: 1,
805
735
  x: 0,
806
736
  y: 0
807
737
  };
808
- class Bt {
738
+ class Fe {
809
739
  constructor() {
810
- o(this, "viewportMatrix", nt);
811
- o(this, "contentMatrix", nt);
812
- o(this, "afterUpdateEmitter");
813
- o(this, "onAfterUpdated");
814
- [this.afterUpdateEmitter, this.onAfterUpdated] = A();
740
+ s(this, "viewportMatrix", ne);
741
+ s(this, "contentMatrix", ne);
742
+ s(this, "afterUpdateEmitter");
743
+ s(this, "onAfterUpdated");
744
+ [this.afterUpdateEmitter, this.onAfterUpdated] = E();
815
745
  }
816
746
  getViewportMatrix() {
817
747
  return this.viewportMatrix;
@@ -819,345 +749,376 @@ class Bt {
819
749
  getContentMatrix() {
820
750
  return this.contentMatrix;
821
751
  }
822
- patchViewportMatrix(t) {
752
+ patchViewportMatrix(e) {
823
753
  this.viewportMatrix = {
824
- scale: t.scale ?? this.viewportMatrix.scale,
825
- x: t.x ?? this.viewportMatrix.x,
826
- y: t.y ?? this.viewportMatrix.y
827
- }, this.contentMatrix = it(this.viewportMatrix), this.afterUpdateEmitter.emit();
754
+ scale: e.scale ?? this.viewportMatrix.scale,
755
+ x: e.x ?? this.viewportMatrix.x,
756
+ y: e.y ?? this.viewportMatrix.y
757
+ }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
828
758
  }
829
- patchContentMatrix(t) {
759
+ patchContentMatrix(e) {
830
760
  this.contentMatrix = {
831
- scale: t.scale ?? this.contentMatrix.scale,
832
- x: t.x ?? this.contentMatrix.x,
833
- y: t.y ?? this.contentMatrix.y
834
- }, this.viewportMatrix = it(this.contentMatrix), this.afterUpdateEmitter.emit();
761
+ scale: e.scale ?? this.contentMatrix.scale,
762
+ x: e.x ?? this.contentMatrix.x,
763
+ y: e.y ?? this.contentMatrix.y
764
+ }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
835
765
  }
836
766
  }
837
767
  class j {
838
- constructor(t) {
839
- o(this, "elementToNodeId", /* @__PURE__ */ new Map());
840
- o(this, "nodesResizeObserver");
841
- o(this, "onAfterNodeAdded", (t) => {
842
- const e = this.canvas.graph.getNode(t);
843
- this.elementToNodeId.set(e.element, t), this.nodesResizeObserver.observe(e.element);
844
- });
845
- o(this, "onBeforeNodeRemoved", (t) => {
846
- const e = this.canvas.graph.getNode(t);
847
- this.elementToNodeId.delete(e.element), this.nodesResizeObserver.unobserve(e.element);
848
- });
849
- o(this, "onBeforeClear", () => {
768
+ constructor(e) {
769
+ s(this, "elementToNodeId", /* @__PURE__ */ new Map());
770
+ s(this, "nodesResizeObserver");
771
+ s(this, "onAfterNodeAdded", (e) => {
772
+ const t = this.canvas.graph.getNode(e);
773
+ this.elementToNodeId.set(t.element, e), this.nodesResizeObserver.observe(t.element);
774
+ });
775
+ s(this, "onBeforeNodeRemoved", (e) => {
776
+ const t = this.canvas.graph.getNode(e);
777
+ this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
778
+ });
779
+ s(this, "onBeforeClear", () => {
850
780
  this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
851
781
  });
852
- this.canvas = t, this.nodesResizeObserver = new ResizeObserver((e) => {
853
- e.forEach((s) => {
854
- const i = s.target;
782
+ this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
783
+ t.forEach((o) => {
784
+ const i = o.target;
855
785
  this.handleNodeResize(i);
856
786
  });
857
787
  }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
858
788
  }
859
- static configure(t) {
860
- new j(t);
789
+ static configure(e) {
790
+ new j(e);
861
791
  }
862
- handleNodeResize(t) {
863
- const e = this.elementToNodeId.get(t);
864
- this.canvas.updateNode(e);
792
+ handleNodeResize(e) {
793
+ const t = this.elementToNodeId.get(e);
794
+ this.canvas.updateNode(t);
865
795
  }
866
796
  }
867
- const Ft = (r, t, e) => {
868
- const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
869
- return t >= s && t <= s + n && e >= i && e <= i + a;
870
- }, Ot = (r, t, e) => t >= 0 && t <= r.innerWidth && e >= 0 && e <= r.innerHeight, R = (r, t, e, s) => Ft(t, e, s) && Ot(r, e, s), U = (r, t) => {
871
- t !== null ? r.style.cursor = t : r.style.removeProperty("cursor");
872
- }, W = (r) => {
873
- const t = document.createElement("div");
797
+ const Oe = (r, e, t) => {
798
+ const { x: o, y: i, width: n, height: a } = r.getBoundingClientRect();
799
+ return e >= o && e <= o + n && t >= i && t <= i + a;
800
+ }, We = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, o) => Oe(e, t, o) && We(r, t, o), I = (r, e) => {
801
+ e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
802
+ }, B = (r) => {
803
+ const e = document.createElement("div");
874
804
  return {
875
805
  id: r.overlayId,
876
- element: t,
806
+ element: e,
877
807
  x: r.portCoords.x,
878
808
  y: r.portCoords.y,
879
809
  ports: [
880
810
  {
881
811
  id: r.overlayId,
882
- element: t,
812
+ element: e,
883
813
  direction: r.portDirection
884
814
  }
885
815
  ]
886
816
  };
887
- }, kt = (r, t) => {
888
- let e = t, s = null;
889
- for (; e !== null && (s = r.getElementPortIds(e)[0] ?? null, s === null); )
890
- e = e.parentElement;
891
- return s;
892
- }, mt = (r, t) => {
893
- const e = document.elementsFromPoint(t.x, t.y);
894
- for (const s of e) {
895
- const i = kt(r, s);
817
+ }, ke = (r, e) => {
818
+ let t = e, o = null;
819
+ for (; t !== null && (o = r.getElementPortIds(t)[0] ?? null, o === null); )
820
+ t = t.parentElement;
821
+ return o;
822
+ }, ye = (r, e) => {
823
+ const t = document.elementsFromPoint(e.x, e.y);
824
+ for (const o of t) {
825
+ const i = ke(r, o);
896
826
  if (i !== null)
897
827
  return i;
898
828
  }
899
829
  return null;
900
830
  };
901
831
  var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
902
- const vt = (r, t) => ({
832
+ const me = (r, e) => ({
903
833
  x: r / 2,
904
- y: t / 2
905
- }), y = (r, t, e) => ({
906
- x: t.x * r.x - t.y * r.y + ((1 - t.x) * e.x + t.y * e.y),
907
- y: t.y * r.x + t.x * r.y + ((1 - t.x) * e.y - t.y * e.x)
834
+ y: e / 2
908
835
  }), u = {
909
836
  x: 0,
910
837
  y: 0
911
- };
912
- class zt {
913
- constructor(t) {
914
- o(this, "path");
915
- o(this, "midpoint");
916
- this.params = t;
917
- const e = this.params.to;
918
- this.midpoint = { x: e.x / 2, y: e.y / 2 };
919
- const s = y(
838
+ }, m = (r, e, t) => ({
839
+ x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
840
+ y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
841
+ }), ve = (r, e) => {
842
+ const t = {
843
+ x: r.x + r.width / 2,
844
+ y: r.y + r.height / 2
845
+ }, o = {
846
+ x: e.x + e.width / 2,
847
+ y: e.y + e.height / 2
848
+ }, i = Math.min(t.x, o.x), n = Math.min(t.y, o.y), a = Math.abs(o.x - t.x), h = Math.abs(o.y - t.y), d = t.x <= o.x ? 1 : -1, c = t.y <= o.y ? 1 : -1;
849
+ return {
850
+ x: i,
851
+ y: n,
852
+ width: a,
853
+ height: h,
854
+ flipX: d,
855
+ flipY: c
856
+ };
857
+ }, O = (r, e, t, o) => ({
858
+ x: e * r.x + (1 - e) / 2 * o.x,
859
+ y: t * r.y + (1 - t) / 2 * o.y
860
+ });
861
+ class ze {
862
+ constructor(e) {
863
+ s(this, "path");
864
+ s(this, "midpoint");
865
+ this.params = e;
866
+ const t = this.params.to;
867
+ this.midpoint = { x: t.x / 2, y: t.y / 2 };
868
+ const o = m(
920
869
  { x: this.params.arrowLength, y: u.y },
921
870
  this.params.sourceDirection,
922
871
  u
923
- ), i = y(
872
+ ), i = m(
924
873
  { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
925
874
  this.params.targetDirection,
926
875
  this.params.to
927
876
  ), n = {
928
- x: s.x + this.params.sourceDirection.x * this.params.curvature,
929
- y: s.y + this.params.sourceDirection.y * this.params.curvature
877
+ x: o.x + this.params.sourceDirection.x * this.params.curvature,
878
+ y: o.y + this.params.sourceDirection.y * this.params.curvature
930
879
  }, a = {
931
880
  x: i.x - this.params.targetDirection.x * this.params.curvature,
932
881
  y: i.y - this.params.targetDirection.y * this.params.curvature
933
- }, 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}`;
882
+ }, h = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${o.x} ${o.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
934
883
  this.path = `${d}${h}${c}`;
935
884
  }
936
885
  }
937
- const B = (r, t, e, s) => ({
938
- x: t * r.x + (1 - t) / 2 * s.x,
939
- y: e * r.y + (1 - e) / 2 * s.y
940
- });
941
- class Xt {
942
- constructor(t) {
943
- o(this, "path");
944
- o(this, "midpoint");
945
- this.params = t;
946
- const e = this.params.hasSourceArrow ? y(
886
+ class Xe {
887
+ constructor(e) {
888
+ s(this, "path");
889
+ s(this, "midpoint");
890
+ this.params = e;
891
+ const t = this.params.hasSourceArrow ? m(
947
892
  { x: this.params.arrowLength, y: u.y },
948
893
  this.params.sourceDirection,
949
894
  u
950
- ) : u, s = this.params.hasTargetArrow ? y(
895
+ ) : u, o = this.params.hasTargetArrow ? m(
951
896
  {
952
897
  x: this.params.to.x - this.params.arrowLength,
953
898
  y: this.params.to.y
954
899
  },
955
900
  this.params.targetDirection,
956
901
  this.params.to
957
- ) : 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 = y(
902
+ ) : 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(
958
903
  { x: i, y: u.y },
959
904
  this.params.sourceDirection,
960
905
  u
961
906
  ), l = {
962
907
  x: c.x + h,
963
908
  y: c.y + d
964
- }, g = y(
909
+ }, g = m(
965
910
  { x: this.params.to.x - i, y: this.params.to.y },
966
911
  this.params.targetDirection,
967
912
  this.params.to
968
- ), w = {
913
+ ), p = {
969
914
  x: g.x + h,
970
915
  y: g.y + d
971
916
  }, f = {
972
- x: (l.x + w.x) / 2,
973
- y: (l.y + w.y) / 2
974
- }, m = {
917
+ x: (l.x + p.x) / 2,
918
+ y: (l.y + p.y) / 2
919
+ }, y = {
975
920
  x: c.x + this.params.curvature * this.params.sourceDirection.x,
976
921
  y: c.y + this.params.curvature * this.params.sourceDirection.y
977
922
  }, v = {
978
923
  x: g.x - this.params.curvature * this.params.targetDirection.x,
979
924
  y: g.y - this.params.curvature * this.params.targetDirection.y
980
- }, E = {
925
+ }, x = {
981
926
  x: c.x + h,
982
927
  y: c.y + d
983
- }, x = {
928
+ }, A = {
984
929
  x: g.x + h,
985
930
  y: g.y + d
986
931
  };
987
932
  this.path = [
988
- `M ${e.x} ${e.y}`,
933
+ `M ${t.x} ${t.y}`,
989
934
  `L ${c.x} ${c.y}`,
990
- `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
991
- `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
992
- `L ${s.x} ${s.y}`
993
- ].join(" "), this.midpoint = B(f, t.flipX, t.flipY, t.to);
935
+ `C ${y.x} ${y.y} ${x.x} ${x.y} ${f.x} ${f.y}`,
936
+ `C ${A.x} ${A.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
937
+ `L ${o.x} ${o.y}`
938
+ ].join(" "), this.midpoint = O(f, e.flipX, e.flipY, e.to);
994
939
  }
995
940
  }
996
- const M = (r, t) => {
997
- const e = [];
998
- if (r.length > 0 && e.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && e.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
999
- const s = r.length - 1;
941
+ const G = Object.freeze({
942
+ edgeColor: "--edge-color"
943
+ }), Ee = (r) => {
944
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
945
+ return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
946
+ }, Ae = (r) => {
947
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
948
+ return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
949
+ }, F = () => {
950
+ const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
951
+ return r.setAttribute("fill", `var(${G.edgeColor})`), r;
952
+ }, xe = () => {
953
+ const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
954
+ return r.style.transformOrigin = "50% 50%", r;
955
+ }, Se = (r, e) => {
956
+ 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`;
957
+ }, M = (r, e) => {
958
+ const t = [];
959
+ 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) {
960
+ const o = r.length - 1;
1000
961
  let i = 0, n = 0, a = 0;
1001
962
  r.forEach((h, d) => {
1002
963
  let c = 0, l = 0, g = 0;
1003
- const w = d > 0, f = d < s, m = w && f;
1004
- if (w && (c = -i, l = -n, g = a), f) {
964
+ const p = d > 0, f = d < o, y = p && f;
965
+ if (p && (c = -i, l = -n, g = a), f) {
1005
966
  const V = r[d + 1];
1006
967
  i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
1007
968
  }
1008
- const E = a !== 0 ? Math.min((m ? t : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: h.x + i * E, y: h.y + n * E } : h, b = g !== 0 ? Math.min((m ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = m ? { x: h.x + c * b, y: h.y + l * b } : h;
1009
- d > 0 && e.push(`L ${D.x} ${D.y}`), m && e.push(
1010
- `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
969
+ const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, A = y ? { x: h.x + i * x, y: h.y + n * x } : h, b = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
970
+ d > 0 && t.push(`L ${D.x} ${D.y}`), y && t.push(
971
+ `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
1011
972
  );
1012
973
  });
1013
974
  }
1014
- return e.join(" ");
975
+ return t.join(" ");
1015
976
  };
1016
- class Yt {
1017
- constructor(t) {
1018
- o(this, "path");
1019
- o(this, "midpoint");
1020
- this.params = t;
1021
- const e = this.params.to;
1022
- this.midpoint = { x: e.x / 2, y: e.y / 2 };
1023
- const s = this.params.hasSourceArrow ? y(
977
+ class Ye {
978
+ constructor(e) {
979
+ s(this, "path");
980
+ s(this, "midpoint");
981
+ this.params = e;
982
+ const t = this.params.to;
983
+ this.midpoint = { x: t.x / 2, y: t.y / 2 };
984
+ const o = this.params.hasSourceArrow ? m(
1024
985
  { x: this.params.arrowLength, y: u.y },
1025
986
  this.params.sourceDirection,
1026
987
  u
1027
- ) : u, i = this.params.hasTargetArrow ? y(
988
+ ) : u, i = this.params.hasTargetArrow ? m(
1028
989
  {
1029
990
  x: this.params.to.x - this.params.arrowLength,
1030
991
  y: this.params.to.y
1031
992
  },
1032
993
  this.params.targetDirection,
1033
994
  this.params.to
1034
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
995
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1035
996
  { x: a, y: u.y },
1036
997
  this.params.sourceDirection,
1037
998
  u
1038
- ), d = y(
999
+ ), d = m(
1039
1000
  { x: this.params.to.x - a, y: this.params.to.y },
1040
1001
  this.params.targetDirection,
1041
1002
  this.params.to
1042
1003
  ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
1043
1004
  x: this.params.flipX > 0 ? c : -n,
1044
1005
  y: h.y
1045
- }, w = { x: g.x, y: l }, f = {
1006
+ }, p = { x: g.x, y: l }, f = {
1046
1007
  x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
1047
1008
  y: d.y
1048
- }, m = { x: f.x, y: l };
1009
+ }, y = { x: f.x, y: l };
1049
1010
  this.path = M(
1050
- [s, h, g, w, m, f, d, i],
1011
+ [o, h, g, p, y, f, d, i],
1051
1012
  this.params.roundness
1052
1013
  );
1053
1014
  }
1054
1015
  }
1055
- class Ht {
1056
- constructor(t) {
1057
- o(this, "path");
1058
- o(this, "midpoint");
1059
- this.params = t;
1060
- const e = this.params.hasSourceArrow ? y(
1016
+ class He {
1017
+ constructor(e) {
1018
+ s(this, "path");
1019
+ s(this, "midpoint");
1020
+ this.params = e;
1021
+ const t = this.params.hasSourceArrow ? m(
1061
1022
  { x: this.params.arrowLength, y: u.y },
1062
1023
  this.params.sourceDirection,
1063
1024
  u
1064
- ) : u, s = this.params.hasTargetArrow ? y(
1025
+ ) : u, o = this.params.hasTargetArrow ? m(
1065
1026
  {
1066
1027
  x: this.params.to.x - this.params.arrowLength,
1067
1028
  y: this.params.to.y
1068
1029
  },
1069
1030
  this.params.targetDirection,
1070
1031
  this.params.to
1071
- ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
1032
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1072
1033
  { x: i, y: u.y },
1073
1034
  this.params.sourceDirection,
1074
1035
  u
1075
- ), 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 = y(
1036
+ ), 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(
1076
1037
  { x: this.params.to.x - i, y: this.params.to.y },
1077
1038
  this.params.targetDirection,
1078
1039
  this.params.to
1079
- ), w = { x: g.x + d, y: g.y + c }, f = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 };
1080
- this.midpoint = B(f, t.flipX, t.flipY, t.to), this.path = M(
1081
- [e, n, l, w, g, s],
1040
+ ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
1041
+ this.midpoint = O(f, e.flipX, e.flipY, e.to), this.path = M(
1042
+ [t, n, l, p, g, o],
1082
1043
  this.params.roundness
1083
1044
  );
1084
1045
  }
1085
1046
  }
1086
- class jt {
1087
- constructor(t) {
1088
- o(this, "path");
1089
- o(this, "midpoint");
1090
- this.params = t;
1091
- const e = this.params.to;
1092
- this.midpoint = { x: e.x / 2, y: e.y / 2 };
1093
- const s = this.params.hasSourceArrow ? y(
1047
+ class je {
1048
+ constructor(e) {
1049
+ s(this, "path");
1050
+ s(this, "midpoint");
1051
+ this.params = e;
1052
+ const t = this.params.to;
1053
+ this.midpoint = { x: t.x / 2, y: t.y / 2 };
1054
+ const o = this.params.hasSourceArrow ? m(
1094
1055
  { x: this.params.arrowLength, y: u.y },
1095
1056
  this.params.sourceDirection,
1096
1057
  u
1097
- ) : u, i = this.params.hasTargetArrow ? y(
1058
+ ) : u, i = this.params.hasTargetArrow ? m(
1098
1059
  {
1099
1060
  x: this.params.to.x - this.params.arrowLength,
1100
1061
  y: this.params.to.y
1101
1062
  },
1102
1063
  this.params.targetDirection,
1103
1064
  this.params.to
1104
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
1065
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
1105
1066
  { x: n, y: u.y },
1106
1067
  this.params.sourceDirection,
1107
1068
  u
1108
- ), h = y(
1069
+ ), h = m(
1109
1070
  { x: this.params.to.x - n, y: this.params.to.y },
1110
1071
  this.params.targetDirection,
1111
1072
  this.params.to
1112
1073
  );
1113
- this.path = M([s, a, h, i], this.params.roundness);
1074
+ this.path = M([o, a, h, i], this.params.roundness);
1114
1075
  }
1115
1076
  }
1116
- class Gt {
1117
- constructor(t) {
1118
- o(this, "path");
1119
- o(this, "midpoint");
1120
- this.params = t;
1121
- const e = this.params.to;
1122
- this.midpoint = { x: e.x / 2, y: e.y / 2 };
1123
- const s = this.params.hasSourceArrow ? y(
1077
+ class Ge {
1078
+ constructor(e) {
1079
+ s(this, "path");
1080
+ s(this, "midpoint");
1081
+ this.params = e;
1082
+ const t = this.params.to;
1083
+ this.midpoint = { x: t.x / 2, y: t.y / 2 };
1084
+ const o = this.params.hasSourceArrow ? m(
1124
1085
  { x: this.params.arrowLength, y: u.y },
1125
1086
  this.params.sourceDirection,
1126
1087
  u
1127
- ) : u, i = this.params.hasTargetArrow ? y(
1088
+ ) : u, i = this.params.hasTargetArrow ? m(
1128
1089
  {
1129
1090
  x: this.params.to.x - this.params.arrowLength,
1130
1091
  y: this.params.to.y
1131
1092
  },
1132
1093
  this.params.targetDirection,
1133
1094
  this.params.to
1134
- ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
1095
+ ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
1135
1096
  { x: a, y: u.y },
1136
1097
  this.params.sourceDirection,
1137
1098
  u
1138
- ), d = y(
1099
+ ), d = m(
1139
1100
  { x: this.params.to.x - a, y: this.params.to.y },
1140
1101
  this.params.targetDirection,
1141
1102
  this.params.to
1142
1103
  ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
1143
1104
  x: h.x,
1144
1105
  y: this.params.flipY > 0 ? c : -n
1145
- }, w = { x: l, y: g.y }, f = {
1106
+ }, p = { x: l, y: g.y }, f = {
1146
1107
  x: d.x,
1147
1108
  y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
1148
- }, m = { x: l, y: f.y };
1109
+ }, y = { x: l, y: f.y };
1149
1110
  this.path = M(
1150
- [s, h, g, w, m, f, d, i],
1111
+ [o, h, g, p, y, f, d, i],
1151
1112
  this.params.roundness
1152
1113
  );
1153
1114
  }
1154
1115
  }
1155
- class G {
1156
- constructor(t) {
1157
- o(this, "path");
1158
- o(this, "midpoint");
1159
- this.params = t;
1160
- const e = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + e, n = i + 2 * s, h = [
1116
+ class K {
1117
+ constructor(e) {
1118
+ s(this, "path");
1119
+ s(this, "midpoint");
1120
+ this.params = e;
1121
+ const t = this.params.arrowOffset, o = this.params.side, i = this.params.arrowLength + t, n = i + 2 * o, h = [
1161
1122
  { x: this.params.arrowLength, y: u.y },
1162
1123
  { x: i, y: u.y },
1163
1124
  { x: i, y: this.params.side },
@@ -1167,40 +1128,40 @@ class G {
1167
1128
  { x: i, y: u.y },
1168
1129
  { x: this.params.arrowLength, y: u.y }
1169
1130
  ].map(
1170
- (c) => y(c, this.params.sourceDirection, u)
1131
+ (c) => m(c, this.params.sourceDirection, u)
1171
1132
  ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
1172
1133
  this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
1173
1134
  }
1174
1135
  }
1175
- class Kt {
1176
- constructor(t) {
1177
- o(this, "path");
1178
- o(this, "midpoint");
1179
- this.params = t;
1180
- const e = this.params.smallRadius, s = this.params.radius, i = e + s, n = e * s / i, a = Math.sqrt(i * i - e * e), h = a * e / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
1136
+ class Ke {
1137
+ constructor(e) {
1138
+ s(this, "path");
1139
+ s(this, "midpoint");
1140
+ this.params = e;
1141
+ const t = this.params.smallRadius, o = this.params.radius, i = t + o, n = t * o / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + o + this.params.arrowLength, c = this.params.arrowLength + h, g = [
1181
1142
  { x: this.params.arrowLength, y: u.y },
1182
1143
  { x: c, y: n },
1183
1144
  { x: c, y: -n },
1184
1145
  { x: d, y: 0 }
1185
1146
  ].map(
1186
- (m) => y(m, this.params.sourceDirection, u)
1187
- ), w = [
1147
+ (y) => m(y, this.params.sourceDirection, u)
1148
+ ), p = [
1188
1149
  `M ${g[0].x} ${g[0].y}`,
1189
- `A ${e} ${e} 0 0 1 ${g[1].x} ${g[1].y}`,
1190
- `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
1191
- `A ${e} ${e} 0 0 1 ${g[0].x} ${g[0].y}`
1150
+ `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
1151
+ `A ${o} ${o} 0 1 0 ${g[2].x} ${g[2].y}`,
1152
+ `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
1192
1153
  ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
1193
- this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${w}`, this.midpoint = g[3];
1154
+ this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
1194
1155
  }
1195
1156
  }
1196
- class Zt {
1197
- constructor(t) {
1198
- o(this, "path");
1199
- o(this, "midpoint");
1200
- o(this, "diagonalDistance");
1201
- this.params = t;
1202
- const e = this.params.to;
1203
- if (this.midpoint = { x: e.x / 2, y: e.y / 2 }, this.diagonalDistance = Math.sqrt(
1157
+ class Ze {
1158
+ constructor(e) {
1159
+ s(this, "path");
1160
+ s(this, "midpoint");
1161
+ s(this, "diagonalDistance");
1162
+ this.params = e;
1163
+ const t = this.params.to;
1164
+ if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
1204
1165
  this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
1205
1166
  ), Math.sqrt(
1206
1167
  this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
@@ -1221,35 +1182,35 @@ class Zt {
1221
1182
  });
1222
1183
  this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
1223
1184
  }
1224
- createDirectLinePoint(t) {
1225
- const e = t.hasArrow ? this.params.arrowLength : 0, s = t.offset + e, i = t.flip * s / this.diagonalDistance;
1185
+ createDirectLinePoint(e) {
1186
+ const t = e.hasArrow ? this.params.arrowLength : 0, o = e.offset + t, i = e.flip * o / this.diagonalDistance;
1226
1187
  return {
1227
- x: this.params.to.x * i + t.shift.x,
1228
- y: this.params.to.y * i + t.shift.y
1188
+ x: this.params.to.x * i + e.shift.x,
1189
+ y: this.params.to.y * i + e.shift.y
1229
1190
  };
1230
1191
  }
1231
1192
  }
1232
- class Jt {
1233
- constructor(t) {
1234
- o(this, "path");
1235
- o(this, "midpoint");
1236
- this.params = t;
1237
- const e = this.params.hasSourceArrow ? y(
1193
+ class Je {
1194
+ constructor(e) {
1195
+ s(this, "path");
1196
+ s(this, "midpoint");
1197
+ this.params = e;
1198
+ const t = this.params.hasSourceArrow ? m(
1238
1199
  { x: this.params.arrowLength, y: u.y },
1239
1200
  this.params.sourceDirection,
1240
1201
  u
1241
- ) : u, s = this.params.hasTargetArrow ? y(
1202
+ ) : u, o = this.params.hasTargetArrow ? m(
1242
1203
  {
1243
1204
  x: this.params.to.x - this.params.arrowLength,
1244
1205
  y: this.params.to.y
1245
1206
  },
1246
1207
  this.params.targetDirection,
1247
1208
  this.params.to
1248
- ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
1209
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1249
1210
  { x: i, y: u.y },
1250
1211
  this.params.sourceDirection,
1251
1212
  u
1252
- ), a = y(
1213
+ ), a = m(
1253
1214
  { x: this.params.to.x - i, y: this.params.to.y },
1254
1215
  this.params.targetDirection,
1255
1216
  this.params.to
@@ -1257,40 +1218,40 @@ class Jt {
1257
1218
  x: (n.x + a.x) / 2,
1258
1219
  y: l
1259
1220
  };
1260
- this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
1221
+ this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
1261
1222
  [
1262
- e,
1223
+ t,
1263
1224
  n,
1264
1225
  { x: n.x, y: l },
1265
1226
  { x: a.x, y: l },
1266
1227
  a,
1267
- s
1228
+ o
1268
1229
  ],
1269
1230
  this.params.roundness
1270
1231
  );
1271
1232
  }
1272
1233
  }
1273
- class Qt {
1274
- constructor(t) {
1275
- o(this, "path");
1276
- o(this, "midpoint");
1277
- this.params = t;
1278
- const e = this.params.hasSourceArrow ? y(
1234
+ class Qe {
1235
+ constructor(e) {
1236
+ s(this, "path");
1237
+ s(this, "midpoint");
1238
+ this.params = e;
1239
+ const t = this.params.hasSourceArrow ? m(
1279
1240
  { x: this.params.arrowLength, y: u.y },
1280
1241
  this.params.sourceDirection,
1281
1242
  u
1282
- ) : u, s = this.params.hasTargetArrow ? y(
1243
+ ) : u, o = this.params.hasTargetArrow ? m(
1283
1244
  {
1284
1245
  x: this.params.to.x - this.params.arrowLength,
1285
1246
  y: this.params.to.y
1286
1247
  },
1287
1248
  this.params.targetDirection,
1288
1249
  this.params.to
1289
- ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
1250
+ ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
1290
1251
  { x: i, y: u.y },
1291
1252
  this.params.sourceDirection,
1292
1253
  u
1293
- ), a = y(
1254
+ ), a = m(
1294
1255
  { x: this.params.to.x - i, y: this.params.to.y },
1295
1256
  this.params.targetDirection,
1296
1257
  this.params.to
@@ -1298,63 +1259,28 @@ class Qt {
1298
1259
  x: l,
1299
1260
  y: (n.y + a.y) / 2
1300
1261
  };
1301
- this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
1262
+ this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
1302
1263
  [
1303
- e,
1264
+ t,
1304
1265
  n,
1305
1266
  { x: l, y: n.y },
1306
1267
  { x: l, y: a.y },
1307
1268
  a,
1308
- s
1269
+ o
1309
1270
  ],
1310
1271
  this.params.roundness
1311
1272
  );
1312
1273
  }
1313
1274
  }
1314
- const Et = (r, t) => {
1315
- r.style.transform = `translate(${t.x}px, ${t.y}px)`, r.style.width = `${Math.max(t.width, 1)}px`, r.style.height = `${Math.max(t.height, 1)}px`;
1316
- }, K = Object.freeze({
1317
- edgeColor: "--edge-color"
1318
- }), At = (r) => {
1319
- const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1320
- return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t.style.setProperty(K.edgeColor, r), t;
1321
- }, $ = () => {
1322
- const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
1323
- return r.setAttribute("fill", `var(${K.edgeColor})`), r;
1324
- }, xt = () => {
1325
- const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1326
- return r.style.transformOrigin = "50% 50%", r;
1327
- }, St = (r) => {
1328
- const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
1329
- return t.setAttribute("stroke", `var(${K.edgeColor})`), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t;
1330
- }, Pt = (r, t) => {
1331
- const e = {
1332
- x: r.x + r.width / 2,
1333
- y: r.y + r.height / 2
1334
- }, s = {
1335
- x: t.x + t.width / 2,
1336
- y: t.y + t.height / 2
1337
- }, i = Math.min(e.x, s.x), n = Math.min(e.y, s.y), a = Math.abs(s.x - e.x), h = Math.abs(s.y - e.y), d = e.x <= s.x ? 1 : -1, c = e.y <= s.y ? 1 : -1;
1338
- return {
1339
- x: i,
1340
- y: n,
1341
- width: a,
1342
- height: h,
1343
- flipX: d,
1344
- flipY: c
1345
- };
1346
- }, X = (r, t, e, s) => {
1347
- const n = [
1348
- u,
1349
- { x: e, y: s },
1350
- { x: e, y: -s }
1351
- ].map((c) => y(c, r, u)).map((c) => ({ x: c.x + t.x, y: c.y + t.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}`;
1352
- return `${a} ${h} ${d} Z`;
1353
- }, p = Object.freeze({
1275
+ const w = Object.freeze({
1354
1276
  color: "#777777",
1355
1277
  width: 1,
1356
- arrowLength: 15,
1357
- arrowWidth: 4,
1278
+ arrowLength: 20,
1279
+ polygonArrowRadius: 4,
1280
+ circleArrowRadius: 8,
1281
+ wedgeArrowSmallRadius: 20,
1282
+ wedgeArrowRadius: 100,
1283
+ wedgeArrowAngle: Math.PI / 12,
1358
1284
  arrowOffset: 15,
1359
1285
  hasSourceArrow: !1,
1360
1286
  hasTargetArrow: !1,
@@ -1368,96 +1294,155 @@ const Et = (r, t) => {
1368
1294
  curvature: 90,
1369
1295
  interactiveWidth: 10,
1370
1296
  preOffset: 0
1371
- }), at = (r, t, e) => ({ x: t * Math.cos(r), y: e * Math.sin(r) });
1372
- class F {
1373
- constructor(t) {
1374
- o(this, "svg");
1375
- o(this, "group", xt());
1376
- o(this, "line");
1377
- o(this, "sourceArrow", null);
1378
- o(this, "targetArrow", null);
1379
- o(this, "onAfterRender");
1380
- o(this, "afterRenderEmitter");
1381
- this.params = t, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = At(t.color), this.svg.appendChild(this.group), this.line = St(t.width), this.group.appendChild(this.line), t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
1382
- }
1383
- render(t) {
1384
- const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
1385
- t.from,
1386
- t.to
1297
+ }), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1298
+ class W {
1299
+ constructor(e) {
1300
+ s(this, "svg");
1301
+ s(this, "group", xe());
1302
+ s(this, "line");
1303
+ s(this, "sourceArrow", null);
1304
+ s(this, "targetArrow", null);
1305
+ s(this, "onAfterRender");
1306
+ s(this, "afterRenderEmitter");
1307
+ s(this, "arrowRenderer");
1308
+ this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ee(e.color), this.svg.appendChild(this.group), this.line = Ae(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
1309
+ }
1310
+ render(e) {
1311
+ const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
1312
+ e.from,
1313
+ e.to
1387
1314
  );
1388
- Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1389
- const d = at(
1390
- t.from.direction,
1315
+ Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1316
+ const d = ae(
1317
+ e.from.direction,
1391
1318
  a,
1392
1319
  h
1393
- ), c = at(
1394
- t.to.direction,
1320
+ ), c = ae(
1321
+ e.to.direction,
1395
1322
  a,
1396
1323
  h
1397
1324
  ), l = {
1398
1325
  x: i,
1399
1326
  y: n
1400
1327
  };
1401
- let g = c, w = -this.params.arrowLength, f;
1402
- t.category === C.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : t.category === C.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
1403
- const m = f(
1328
+ let g = { x: -c.x, y: -c.y }, p;
1329
+ e.category === L.PortCycle ? (p = this.params.createCyclePath, g = d) : e.category === L.NodeCycle ? p = this.params.createDetourPath : p = this.params.createLinePath;
1330
+ const f = p(
1404
1331
  d,
1405
1332
  c,
1406
1333
  l,
1407
1334
  a,
1408
1335
  h
1409
1336
  );
1410
- this.line.setAttribute("d", m.path);
1337
+ this.line.setAttribute("d", f.path);
1338
+ let y = null;
1339
+ this.sourceArrow && (y = this.arrowRenderer({
1340
+ direction: d,
1341
+ shift: u,
1342
+ arrowLength: this.params.arrowLength
1343
+ }), this.sourceArrow.setAttribute("d", y));
1411
1344
  let v = null;
1412
- this.sourceArrow && (v = X(
1413
- d,
1414
- u,
1415
- this.params.arrowLength,
1416
- this.params.arrowWidth
1417
- ), this.sourceArrow.setAttribute("d", v));
1418
- let E = null;
1419
- this.targetArrow && (E = X(
1420
- g,
1421
- l,
1422
- w,
1423
- this.params.arrowWidth
1424
- ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
1425
- edgePath: m,
1426
- sourceArrowPath: v,
1427
- targetArrowPath: E
1345
+ this.targetArrow && (v = this.arrowRenderer({
1346
+ direction: g,
1347
+ shift: l,
1348
+ arrowLength: this.params.arrowLength
1349
+ }), this.targetArrow.setAttribute("d", v)), this.afterRenderEmitter.emit({
1350
+ edgePath: f,
1351
+ sourceArrowPath: y,
1352
+ targetArrowPath: v
1428
1353
  });
1429
1354
  }
1430
1355
  }
1431
- class _t {
1432
- constructor(t) {
1433
- o(this, "svg");
1434
- o(this, "group");
1435
- o(this, "line");
1436
- o(this, "sourceArrow");
1437
- o(this, "targetArrow");
1438
- o(this, "onAfterRender");
1439
- o(this, "arrowLength");
1440
- o(this, "arrowWidth");
1441
- o(this, "curvature");
1442
- o(this, "portCycleRadius");
1443
- o(this, "portCycleSmallRadius");
1444
- o(this, "detourDirection");
1445
- o(this, "detourDistance");
1446
- o(this, "hasSourceArrow");
1447
- o(this, "hasTargetArrow");
1448
- o(this, "pathShape");
1449
- o(this, "createCyclePath", (t) => new Kt({
1450
- sourceDirection: t,
1356
+ const _e = (r) => (e) => {
1357
+ const o = [
1358
+ u,
1359
+ { x: e.arrowLength, y: r.radius },
1360
+ { x: e.arrowLength, y: -r.radius }
1361
+ ].map(
1362
+ (h) => m(h, e.direction, u)
1363
+ ).map((h) => ({
1364
+ x: h.x + e.shift.x,
1365
+ y: h.y + e.shift.y
1366
+ })), i = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
1367
+ return `${i} ${n} ${a} Z`;
1368
+ }, qe = (r) => (e) => {
1369
+ const t = r.radius, o = e.arrowLength, i = (o * o + 2 * o * t) / (2 * t), n = i + t, a = o + t - t * (o + t) / n, h = t * i / n, c = [u, { x: a, y: -h }, { x: a, y: h }].map(
1370
+ (y) => m(y, e.direction, u)
1371
+ ).map((y) => ({
1372
+ x: y.x + e.shift.x,
1373
+ y: y.y + e.shift.y
1374
+ })), l = `M ${c[0].x} ${c[0].y}`, g = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, p = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, f = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
1375
+ return `${l} ${g} ${p} ${f}`;
1376
+ }, et = (r) => (e) => {
1377
+ const t = r.smallRadius, o = r.radius, i = m(
1378
+ {
1379
+ x: e.arrowLength,
1380
+ y: 0
1381
+ },
1382
+ {
1383
+ x: Math.cos(r.angle),
1384
+ y: Math.sin(r.angle)
1385
+ },
1386
+ {
1387
+ x: e.arrowLength + r.smallRadius,
1388
+ y: 0
1389
+ }
1390
+ ), a = [u, { x: i.x, y: -i.y }, i].map(
1391
+ (g) => m(g, e.direction, u)
1392
+ ).map((g) => ({
1393
+ x: g.x + e.shift.x,
1394
+ y: g.y + e.shift.y
1395
+ })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, l = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
1396
+ return `${h} ${d} ${c} ${l}`;
1397
+ }, $ = (r) => {
1398
+ if (typeof r == "function")
1399
+ return r;
1400
+ switch (r.type) {
1401
+ case "triangle":
1402
+ return _e({
1403
+ radius: r.radius ?? w.polygonArrowRadius
1404
+ });
1405
+ case "arc":
1406
+ return qe({
1407
+ radius: r.radius ?? w.circleArrowRadius
1408
+ });
1409
+ default:
1410
+ return et({
1411
+ smallRadius: r.smallRadius ?? w.wedgeArrowSmallRadius,
1412
+ angle: r.angle ?? w.wedgeArrowAngle,
1413
+ radius: r.radius ?? w.wedgeArrowRadius
1414
+ });
1415
+ }
1416
+ };
1417
+ class tt {
1418
+ constructor(e) {
1419
+ s(this, "svg");
1420
+ s(this, "group");
1421
+ s(this, "line");
1422
+ s(this, "sourceArrow");
1423
+ s(this, "targetArrow");
1424
+ s(this, "onAfterRender");
1425
+ s(this, "arrowLength");
1426
+ s(this, "curvature");
1427
+ s(this, "portCycleRadius");
1428
+ s(this, "portCycleSmallRadius");
1429
+ s(this, "detourDirection");
1430
+ s(this, "detourDistance");
1431
+ s(this, "hasSourceArrow");
1432
+ s(this, "hasTargetArrow");
1433
+ s(this, "pathShape");
1434
+ s(this, "createCyclePath", (e) => new Ke({
1435
+ sourceDirection: e,
1451
1436
  radius: this.portCycleRadius,
1452
1437
  smallRadius: this.portCycleSmallRadius,
1453
1438
  arrowLength: this.arrowLength,
1454
1439
  hasSourceArrow: this.hasSourceArrow,
1455
1440
  hasTargetArrow: this.hasTargetArrow
1456
1441
  }));
1457
- o(this, "createDetourPath", (t, e, s, i, n) => new Xt({
1458
- to: s,
1459
- sourceDirection: t,
1460
- targetDirection: e,
1442
+ s(this, "createDetourPath", (e, t, o, i, n) => new Xe({
1443
+ to: o,
1444
+ sourceDirection: e,
1445
+ targetDirection: t,
1461
1446
  flipX: i,
1462
1447
  flipY: n,
1463
1448
  arrowLength: this.arrowLength,
@@ -1467,20 +1452,20 @@ class _t {
1467
1452
  hasSourceArrow: this.hasSourceArrow,
1468
1453
  hasTargetArrow: this.hasTargetArrow
1469
1454
  }));
1470
- o(this, "createLinePath", (t, e, s) => new zt({
1471
- to: s,
1472
- sourceDirection: t,
1473
- targetDirection: e,
1455
+ s(this, "createLinePath", (e, t, o) => new ze({
1456
+ to: o,
1457
+ sourceDirection: e,
1458
+ targetDirection: t,
1474
1459
  arrowLength: this.arrowLength,
1475
1460
  curvature: this.curvature,
1476
1461
  hasSourceArrow: this.hasSourceArrow,
1477
1462
  hasTargetArrow: this.hasTargetArrow
1478
1463
  }));
1479
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? p.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1480
- color: (t == null ? void 0 : t.color) ?? p.color,
1481
- width: (t == null ? void 0 : t.width) ?? p.width,
1464
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? w.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? w.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? w.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? w.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
1465
+ color: (e == null ? void 0 : e.color) ?? w.color,
1466
+ width: (e == null ? void 0 : e.width) ?? w.width,
1467
+ arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
1482
1468
  arrowLength: this.arrowLength,
1483
- arrowWidth: this.arrowWidth,
1484
1469
  hasSourceArrow: this.hasSourceArrow,
1485
1470
  hasTargetArrow: this.hasTargetArrow,
1486
1471
  createCyclePath: this.createCyclePath,
@@ -1488,29 +1473,28 @@ class _t {
1488
1473
  createLinePath: this.createLinePath
1489
1474
  }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
1490
1475
  }
1491
- render(t) {
1492
- this.pathShape.render(t);
1476
+ render(e) {
1477
+ this.pathShape.render(e);
1493
1478
  }
1494
1479
  }
1495
- class qt {
1496
- constructor(t) {
1497
- o(this, "svg");
1498
- o(this, "group");
1499
- o(this, "line");
1500
- o(this, "sourceArrow");
1501
- o(this, "targetArrow");
1502
- o(this, "onAfterRender");
1503
- o(this, "arrowLength");
1504
- o(this, "arrowWidth");
1505
- o(this, "arrowOffset");
1506
- o(this, "roundness");
1507
- o(this, "cycleSquareSide");
1508
- o(this, "detourDistance");
1509
- o(this, "hasSourceArrow");
1510
- o(this, "hasTargetArrow");
1511
- o(this, "pathShape");
1512
- o(this, "createCyclePath", (t) => new G({
1513
- sourceDirection: t,
1480
+ class rt {
1481
+ constructor(e) {
1482
+ s(this, "svg");
1483
+ s(this, "group");
1484
+ s(this, "line");
1485
+ s(this, "sourceArrow");
1486
+ s(this, "targetArrow");
1487
+ s(this, "onAfterRender");
1488
+ s(this, "arrowLength");
1489
+ s(this, "arrowOffset");
1490
+ s(this, "roundness");
1491
+ s(this, "cycleSquareSide");
1492
+ s(this, "detourDistance");
1493
+ s(this, "hasSourceArrow");
1494
+ s(this, "hasTargetArrow");
1495
+ s(this, "pathShape");
1496
+ s(this, "createCyclePath", (e) => new K({
1497
+ sourceDirection: e,
1514
1498
  arrowLength: this.arrowLength,
1515
1499
  side: this.cycleSquareSide,
1516
1500
  arrowOffset: this.arrowOffset,
@@ -1518,10 +1502,10 @@ class qt {
1518
1502
  hasSourceArrow: this.hasSourceArrow,
1519
1503
  hasTargetArrow: this.hasTargetArrow
1520
1504
  }));
1521
- o(this, "createDetourPath", (t, e, s, i, n) => new Jt({
1522
- to: s,
1523
- sourceDirection: t,
1524
- targetDirection: e,
1505
+ s(this, "createDetourPath", (e, t, o, i, n) => new Je({
1506
+ to: o,
1507
+ sourceDirection: e,
1508
+ targetDirection: t,
1525
1509
  flipX: i,
1526
1510
  flipY: n,
1527
1511
  arrowLength: this.arrowLength,
@@ -1531,10 +1515,10 @@ class qt {
1531
1515
  hasSourceArrow: this.hasSourceArrow,
1532
1516
  hasTargetArrow: this.hasTargetArrow
1533
1517
  }));
1534
- o(this, "createLinePath", (t, e, s, i) => new Yt({
1535
- to: s,
1536
- sourceDirection: t,
1537
- targetDirection: e,
1518
+ s(this, "createLinePath", (e, t, o, i) => new Ye({
1519
+ to: o,
1520
+ sourceDirection: e,
1521
+ targetDirection: t,
1538
1522
  flipX: i,
1539
1523
  arrowLength: this.arrowLength,
1540
1524
  arrowOffset: this.arrowOffset,
@@ -1542,17 +1526,17 @@ class qt {
1542
1526
  hasSourceArrow: this.hasSourceArrow,
1543
1527
  hasTargetArrow: this.hasTargetArrow
1544
1528
  }));
1545
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
1546
- const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
1529
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
1530
+ const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
1547
1531
  this.roundness = Math.min(
1548
- e,
1532
+ t,
1549
1533
  this.arrowOffset,
1550
1534
  this.cycleSquareSide / 2
1551
- ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1552
- color: (t == null ? void 0 : t.color) ?? p.color,
1553
- width: (t == null ? void 0 : t.width) ?? p.width,
1535
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
1536
+ color: (e == null ? void 0 : e.color) ?? w.color,
1537
+ width: (e == null ? void 0 : e.width) ?? w.width,
1538
+ arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
1554
1539
  arrowLength: this.arrowLength,
1555
- arrowWidth: this.arrowWidth,
1556
1540
  hasSourceArrow: this.hasSourceArrow,
1557
1541
  hasTargetArrow: this.hasTargetArrow,
1558
1542
  createCyclePath: this.createCyclePath,
@@ -1560,30 +1544,29 @@ class qt {
1560
1544
  createLinePath: this.createLinePath
1561
1545
  }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
1562
1546
  }
1563
- render(t) {
1564
- this.pathShape.render(t);
1547
+ render(e) {
1548
+ this.pathShape.render(e);
1565
1549
  }
1566
1550
  }
1567
- class te {
1568
- constructor(t) {
1569
- o(this, "svg");
1570
- o(this, "group");
1571
- o(this, "line");
1572
- o(this, "sourceArrow");
1573
- o(this, "targetArrow");
1574
- o(this, "onAfterRender");
1575
- o(this, "arrowLength");
1576
- o(this, "arrowWidth");
1577
- o(this, "arrowOffset");
1578
- o(this, "roundness");
1579
- o(this, "cycleSquareSide");
1580
- o(this, "detourDirection");
1581
- o(this, "detourDistance");
1582
- o(this, "hasSourceArrow");
1583
- o(this, "hasTargetArrow");
1584
- o(this, "pathShape");
1585
- o(this, "createCyclePath", (t) => new G({
1586
- sourceDirection: t,
1551
+ class ot {
1552
+ constructor(e) {
1553
+ s(this, "svg");
1554
+ s(this, "group");
1555
+ s(this, "line");
1556
+ s(this, "sourceArrow");
1557
+ s(this, "targetArrow");
1558
+ s(this, "onAfterRender");
1559
+ s(this, "arrowLength");
1560
+ s(this, "arrowOffset");
1561
+ s(this, "roundness");
1562
+ s(this, "cycleSquareSide");
1563
+ s(this, "detourDirection");
1564
+ s(this, "detourDistance");
1565
+ s(this, "hasSourceArrow");
1566
+ s(this, "hasTargetArrow");
1567
+ s(this, "pathShape");
1568
+ s(this, "createCyclePath", (e) => new K({
1569
+ sourceDirection: e,
1587
1570
  arrowLength: this.arrowLength,
1588
1571
  side: this.cycleSquareSide,
1589
1572
  arrowOffset: this.arrowOffset,
@@ -1591,10 +1574,10 @@ class te {
1591
1574
  hasSourceArrow: this.hasSourceArrow,
1592
1575
  hasTargetArrow: this.hasTargetArrow
1593
1576
  }));
1594
- o(this, "createDetourPath", (t, e, s, i, n) => new Ht({
1595
- to: s,
1596
- sourceDirection: t,
1597
- targetDirection: e,
1577
+ s(this, "createDetourPath", (e, t, o, i, n) => new He({
1578
+ to: o,
1579
+ sourceDirection: e,
1580
+ targetDirection: t,
1598
1581
  flipX: i,
1599
1582
  flipY: n,
1600
1583
  arrowLength: this.arrowLength,
@@ -1605,27 +1588,27 @@ class te {
1605
1588
  hasSourceArrow: this.hasSourceArrow,
1606
1589
  hasTargetArrow: this.hasTargetArrow
1607
1590
  }));
1608
- o(this, "createLinePath", (t, e, s) => new jt({
1609
- to: s,
1610
- sourceDirection: t,
1611
- targetDirection: e,
1591
+ s(this, "createLinePath", (e, t, o) => new je({
1592
+ to: o,
1593
+ sourceDirection: e,
1594
+ targetDirection: t,
1612
1595
  arrowLength: this.arrowLength,
1613
1596
  arrowOffset: this.arrowOffset,
1614
1597
  roundness: this.roundness,
1615
1598
  hasSourceArrow: this.hasSourceArrow,
1616
1599
  hasTargetArrow: this.hasTargetArrow
1617
1600
  }));
1618
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
1619
- const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
1601
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
1602
+ const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
1620
1603
  this.roundness = Math.min(
1621
- e,
1604
+ t,
1622
1605
  this.arrowOffset,
1623
1606
  this.cycleSquareSide / 2
1624
- ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1625
- color: (t == null ? void 0 : t.color) ?? p.color,
1626
- width: (t == null ? void 0 : t.width) ?? p.width,
1607
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? w.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
1608
+ color: (e == null ? void 0 : e.color) ?? w.color,
1609
+ width: (e == null ? void 0 : e.width) ?? w.width,
1610
+ arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
1627
1611
  arrowLength: this.arrowLength,
1628
- arrowWidth: this.arrowWidth,
1629
1612
  hasSourceArrow: this.hasSourceArrow,
1630
1613
  hasTargetArrow: this.hasTargetArrow,
1631
1614
  createCyclePath: this.createCyclePath,
@@ -1633,29 +1616,28 @@ class te {
1633
1616
  createLinePath: this.createLinePath
1634
1617
  }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
1635
1618
  }
1636
- render(t) {
1637
- this.pathShape.render(t);
1619
+ render(e) {
1620
+ this.pathShape.render(e);
1638
1621
  }
1639
1622
  }
1640
- class ee {
1641
- constructor(t) {
1642
- o(this, "svg");
1643
- o(this, "group");
1644
- o(this, "line");
1645
- o(this, "sourceArrow");
1646
- o(this, "targetArrow");
1647
- o(this, "onAfterRender");
1648
- o(this, "arrowLength");
1649
- o(this, "arrowWidth");
1650
- o(this, "arrowOffset");
1651
- o(this, "roundness");
1652
- o(this, "cycleSquareSide");
1653
- o(this, "detourDistance");
1654
- o(this, "hasSourceArrow");
1655
- o(this, "hasTargetArrow");
1656
- o(this, "pathShape");
1657
- o(this, "createCyclePath", (t) => new G({
1658
- sourceDirection: t,
1623
+ class st {
1624
+ constructor(e) {
1625
+ s(this, "svg");
1626
+ s(this, "group");
1627
+ s(this, "line");
1628
+ s(this, "sourceArrow");
1629
+ s(this, "targetArrow");
1630
+ s(this, "onAfterRender");
1631
+ s(this, "arrowLength");
1632
+ s(this, "arrowOffset");
1633
+ s(this, "roundness");
1634
+ s(this, "cycleSquareSide");
1635
+ s(this, "detourDistance");
1636
+ s(this, "hasSourceArrow");
1637
+ s(this, "hasTargetArrow");
1638
+ s(this, "pathShape");
1639
+ s(this, "createCyclePath", (e) => new K({
1640
+ sourceDirection: e,
1659
1641
  arrowLength: this.arrowLength,
1660
1642
  side: this.cycleSquareSide,
1661
1643
  arrowOffset: this.arrowOffset,
@@ -1663,10 +1645,10 @@ class ee {
1663
1645
  hasSourceArrow: this.hasSourceArrow,
1664
1646
  hasTargetArrow: this.hasTargetArrow
1665
1647
  }));
1666
- o(this, "createDetourPath", (t, e, s, i, n) => new Qt({
1667
- to: s,
1668
- sourceDirection: t,
1669
- targetDirection: e,
1648
+ s(this, "createDetourPath", (e, t, o, i, n) => new Qe({
1649
+ to: o,
1650
+ sourceDirection: e,
1651
+ targetDirection: t,
1670
1652
  flipX: i,
1671
1653
  flipY: n,
1672
1654
  arrowLength: this.arrowLength,
@@ -1676,10 +1658,10 @@ class ee {
1676
1658
  hasSourceArrow: this.hasSourceArrow,
1677
1659
  hasTargetArrow: this.hasTargetArrow
1678
1660
  }));
1679
- o(this, "createLinePath", (t, e, s, i, n) => new Gt({
1680
- to: s,
1681
- sourceDirection: t,
1682
- targetDirection: e,
1661
+ s(this, "createLinePath", (e, t, o, i, n) => new Ge({
1662
+ to: o,
1663
+ sourceDirection: e,
1664
+ targetDirection: t,
1683
1665
  flipY: n,
1684
1666
  arrowLength: this.arrowLength,
1685
1667
  arrowOffset: this.arrowOffset,
@@ -1687,17 +1669,17 @@ class ee {
1687
1669
  hasSourceArrow: this.hasSourceArrow,
1688
1670
  hasTargetArrow: this.hasTargetArrow
1689
1671
  }));
1690
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
1691
- const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
1672
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
1673
+ const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
1692
1674
  this.roundness = Math.min(
1693
- e,
1675
+ t,
1694
1676
  this.arrowOffset,
1695
1677
  this.cycleSquareSide / 2
1696
- ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
1697
- color: (t == null ? void 0 : t.color) ?? p.color,
1698
- width: (t == null ? void 0 : t.width) ?? p.width,
1678
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
1679
+ color: (e == null ? void 0 : e.color) ?? w.color,
1680
+ width: (e == null ? void 0 : e.width) ?? w.width,
1681
+ arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
1699
1682
  arrowLength: this.arrowLength,
1700
- arrowWidth: this.arrowWidth,
1701
1683
  hasSourceArrow: this.hasSourceArrow,
1702
1684
  hasTargetArrow: this.hasTargetArrow,
1703
1685
  createCyclePath: this.createCyclePath,
@@ -1705,51 +1687,34 @@ class ee {
1705
1687
  createLinePath: this.createLinePath
1706
1688
  }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
1707
1689
  }
1708
- render(t) {
1709
- this.pathShape.render(t);
1690
+ render(e) {
1691
+ this.pathShape.render(e);
1710
1692
  }
1711
1693
  }
1712
- const ht = (r) => {
1713
- if (r.diagonalDistance === 0)
1714
- return "";
1715
- const t = r.offset / r.diagonalDistance, e = r.flip * r.to.x, s = r.flip * r.to.y, i = {
1716
- x: e * t + r.shift.x,
1717
- y: s * t + r.shift.y
1718
- }, n = {
1719
- x: e / r.diagonalDistance,
1720
- y: s / r.diagonalDistance
1721
- };
1722
- return X(
1723
- n,
1724
- i,
1725
- r.arrowLength,
1726
- r.arrowWidth
1727
- );
1728
- };
1729
- class bt {
1730
- constructor(t) {
1731
- o(this, "svg");
1732
- o(this, "group", xt());
1733
- o(this, "line");
1734
- o(this, "sourceArrow", null);
1735
- o(this, "targetArrow", null);
1736
- o(this, "color");
1737
- o(this, "width");
1738
- o(this, "arrowLength");
1739
- o(this, "arrowWidth");
1740
- o(this, "sourceOffset");
1741
- o(this, "targetOffset");
1742
- o(this, "onAfterRender");
1743
- o(this, "afterRenderEmitter");
1744
- [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (t == null ? void 0 : t.color) ?? p.color, this.width = (t == null ? void 0 : t.width) ?? p.width, this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (t == null ? void 0 : t.sourceOffset) ?? p.preOffset, this.targetOffset = (t == null ? void 0 : t.targetOffset) ?? p.preOffset, this.svg = At(this.color), this.svg.appendChild(this.group), this.line = St(this.width), this.group.appendChild(this.line), t != null && t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t != null && t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
1745
- }
1746
- render(t) {
1747
- const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
1748
- t.from,
1749
- t.to
1694
+ class Pe {
1695
+ constructor(e) {
1696
+ s(this, "svg");
1697
+ s(this, "group", xe());
1698
+ s(this, "line");
1699
+ s(this, "sourceArrow", null);
1700
+ s(this, "targetArrow", null);
1701
+ s(this, "color");
1702
+ s(this, "width");
1703
+ s(this, "arrowLength");
1704
+ s(this, "sourceOffset");
1705
+ s(this, "targetOffset");
1706
+ s(this, "onAfterRender");
1707
+ s(this, "afterRenderEmitter");
1708
+ s(this, "arrowRenderer");
1709
+ [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? w.color, this.width = (e == null ? void 0 : e.width) ?? w.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowRenderer = $((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? w.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? w.preOffset, this.svg = Ee(this.color), this.svg.appendChild(this.group), this.line = Ae(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
1710
+ }
1711
+ render(e) {
1712
+ const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
1713
+ e.from,
1714
+ e.to
1750
1715
  );
1751
- Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1752
- const d = { x: i, y: n }, c = new Zt({
1716
+ Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1717
+ const d = { x: i, y: n }, c = new Ze({
1753
1718
  to: d,
1754
1719
  sourceOffset: this.sourceOffset,
1755
1720
  targetOffset: this.targetOffset,
@@ -1758,152 +1723,280 @@ class bt {
1758
1723
  arrowLength: this.arrowLength
1759
1724
  });
1760
1725
  this.line.setAttribute("d", c.path);
1761
- let l = null;
1762
- this.sourceArrow && (l = ht({
1763
- diagonalDistance: c.diagonalDistance,
1764
- to: d,
1765
- offset: this.sourceOffset,
1766
- flip: 1,
1767
- shift: u,
1768
- arrowWidth: this.arrowWidth,
1769
- arrowLength: this.arrowLength
1770
- }), this.sourceArrow.setAttribute("d", l));
1771
- let g = null;
1772
- this.targetArrow && (g = ht({
1773
- diagonalDistance: c.diagonalDistance,
1774
- to: d,
1775
- offset: this.targetOffset,
1776
- flip: -1,
1777
- shift: d,
1778
- arrowWidth: this.arrowWidth,
1779
- arrowLength: this.arrowLength
1780
- }), this.targetArrow.setAttribute("d", g)), this.afterRenderEmitter.emit({
1726
+ let l = null, g = null;
1727
+ const p = c.diagonalDistance;
1728
+ if (p === 0)
1729
+ this.sourceArrow !== null && (l = "", this.sourceArrow.setAttribute("d", l)), this.targetArrow !== null && (g = "", this.targetArrow.setAttribute("d", g));
1730
+ else {
1731
+ const f = {
1732
+ x: d.x / p,
1733
+ y: d.y / p
1734
+ };
1735
+ if (this.sourceArrow) {
1736
+ const y = {
1737
+ x: f.x * this.sourceOffset,
1738
+ y: f.y * this.sourceOffset
1739
+ };
1740
+ l = this.arrowRenderer({
1741
+ direction: f,
1742
+ shift: y,
1743
+ arrowLength: this.arrowLength
1744
+ }), this.sourceArrow.setAttribute("d", l);
1745
+ }
1746
+ if (this.targetArrow) {
1747
+ const y = {
1748
+ x: f.x * this.targetOffset,
1749
+ y: f.y * this.targetOffset
1750
+ };
1751
+ g = this.arrowRenderer({
1752
+ direction: { x: -f.x, y: -f.y },
1753
+ shift: {
1754
+ x: d.x - y.x,
1755
+ y: d.y - y.y
1756
+ },
1757
+ arrowLength: this.arrowLength
1758
+ }), this.targetArrow.setAttribute("d", g);
1759
+ }
1760
+ }
1761
+ this.afterRenderEmitter.emit({
1781
1762
  edgePath: c,
1782
1763
  sourceArrowPath: l,
1783
1764
  targetArrowPath: g
1784
1765
  });
1785
1766
  }
1786
1767
  }
1787
- const re = () => {
1768
+ const it = () => {
1788
1769
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1789
1770
  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
1790
- }, oe = (r) => {
1791
- const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
1792
- return t.setAttribute("stroke", "transparent"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t.setAttribute("stroke-linecap", "round"), t;
1793
- }, dt = (r) => {
1794
- const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
1795
- return t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "transparent"), t.setAttribute("stroke", "transparent"), t;
1771
+ }, nt = (r) => {
1772
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1773
+ return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
1774
+ }, he = (r) => {
1775
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1776
+ return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
1796
1777
  };
1797
- class se extends Error {
1798
- constructor(t) {
1799
- super(t), this.name = "InteractiveEdgeError";
1778
+ class at extends Error {
1779
+ constructor(e) {
1780
+ super(e), this.name = "InteractiveEdgeError";
1800
1781
  }
1801
1782
  }
1802
- class Tt {
1803
- constructor(t, e) {
1804
- o(this, "svg");
1805
- o(this, "group");
1806
- o(this, "line");
1807
- o(this, "sourceArrow");
1808
- o(this, "targetArrow");
1809
- o(this, "handle", re());
1810
- o(this, "onAfterRender");
1811
- o(this, "interactiveLine");
1812
- o(this, "interactiveSourceArrow", null);
1813
- o(this, "interactiveTargetArrow", null);
1814
- if (this.baseEdge = t, t instanceof Tt)
1815
- throw new se(
1783
+ class be {
1784
+ constructor(e, t) {
1785
+ s(this, "svg");
1786
+ s(this, "group");
1787
+ s(this, "line");
1788
+ s(this, "sourceArrow");
1789
+ s(this, "targetArrow");
1790
+ s(this, "handle", it());
1791
+ s(this, "onAfterRender");
1792
+ s(this, "interactiveLine");
1793
+ s(this, "interactiveSourceArrow", null);
1794
+ s(this, "interactiveTargetArrow", null);
1795
+ if (this.baseEdge = e, e instanceof be)
1796
+ throw new at(
1816
1797
  "interactive edge can be configured only once"
1817
1798
  );
1818
1799
  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;
1819
- const s = (e == null ? void 0 : e.distance) ?? p.interactiveWidth;
1820
- this.interactiveLine = oe(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = dt(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = dt(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
1800
+ const o = (t == null ? void 0 : t.distance) ?? w.interactiveWidth;
1801
+ this.interactiveLine = nt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = he(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = he(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
1821
1802
  this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
1822
1803
  });
1823
1804
  }
1824
- render(t) {
1825
- this.baseEdge.render(t);
1805
+ render(e) {
1806
+ this.baseEdge.render(e);
1826
1807
  }
1827
1808
  }
1828
- class Ne {
1829
- constructor(t, e) {
1830
- o(this, "group");
1831
- o(this, "line");
1832
- o(this, "sourceArrow");
1833
- o(this, "targetArrow");
1834
- o(this, "onAfterRender");
1835
- o(this, "svg");
1836
- this.baseShape = t, this.midpointElement = e, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
1837
- const i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
1809
+ class Lt {
1810
+ constructor(e, t) {
1811
+ s(this, "group");
1812
+ s(this, "line");
1813
+ s(this, "sourceArrow");
1814
+ s(this, "targetArrow");
1815
+ s(this, "onAfterRender");
1816
+ s(this, "svg");
1817
+ this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((o) => {
1818
+ const i = o.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
1838
1819
  this.midpointElement.style.setProperty("transform", n);
1839
1820
  });
1840
1821
  }
1841
- render(t) {
1842
- this.baseShape.render(t);
1822
+ render(e) {
1823
+ this.baseShape.render(e);
1824
+ }
1825
+ }
1826
+ class Te {
1827
+ constructor(e) {
1828
+ s(this, "onAfterNodeAdded");
1829
+ s(this, "onAfterNodeUpdated");
1830
+ s(this, "onAfterNodePriorityUpdated");
1831
+ s(this, "onBeforeNodeRemoved");
1832
+ s(this, "onAfterPortMarked");
1833
+ s(this, "onAfterPortUpdated");
1834
+ s(this, "onBeforePortUnmarked");
1835
+ s(this, "onAfterEdgeAdded");
1836
+ s(this, "onAfterEdgeShapeUpdated");
1837
+ s(this, "onAfterEdgeUpdated");
1838
+ s(this, "onAfterEdgePriorityUpdated");
1839
+ s(this, "onBeforeEdgeRemoved");
1840
+ s(this, "onBeforeClear");
1841
+ this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
1842
+ }
1843
+ getNode(e) {
1844
+ const t = this.graphStore.getNode(e);
1845
+ if (t === void 0)
1846
+ return null;
1847
+ const o = t.payload;
1848
+ return {
1849
+ element: t.element,
1850
+ x: o.x,
1851
+ y: o.y,
1852
+ centerFn: o.centerFn,
1853
+ priority: o.priority
1854
+ };
1855
+ }
1856
+ getElementNodeId(e) {
1857
+ return this.graphStore.getElementNodeId(e) ?? null;
1858
+ }
1859
+ getAllNodeIds() {
1860
+ return this.graphStore.getAllNodeIds();
1861
+ }
1862
+ getPort(e) {
1863
+ const t = this.graphStore.getPort(e);
1864
+ return t === void 0 ? null : {
1865
+ element: t.element,
1866
+ direction: t.payload.direction,
1867
+ nodeId: t.nodeId
1868
+ };
1869
+ }
1870
+ getAllPortIds() {
1871
+ return this.graphStore.getAllPortIds();
1872
+ }
1873
+ getNodePortIds(e) {
1874
+ return this.graphStore.getNodePortIds(e) ?? null;
1875
+ }
1876
+ getElementPortIds(e) {
1877
+ return [...this.graphStore.getElementPortIds(e)];
1878
+ }
1879
+ getAllEdgeIds() {
1880
+ return this.graphStore.getAllEdgeIds();
1881
+ }
1882
+ getEdge(e) {
1883
+ const t = this.graphStore.getEdge(e);
1884
+ if (t === void 0)
1885
+ return null;
1886
+ const o = t.payload;
1887
+ return {
1888
+ from: t.from,
1889
+ to: t.to,
1890
+ priority: o.priority,
1891
+ shape: o.shape
1892
+ };
1893
+ }
1894
+ getPortIncomingEdgeIds(e) {
1895
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
1896
+ }
1897
+ getPortOutgoingEdgeIds(e) {
1898
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
1899
+ }
1900
+ getPortCycleEdgeIds(e) {
1901
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
1902
+ }
1903
+ getPortAdjacentEdgeIds(e) {
1904
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
1905
+ }
1906
+ getNodeIncomingEdgeIds(e) {
1907
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
1908
+ }
1909
+ getNodeOutgoingEdgeIds(e) {
1910
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
1911
+ }
1912
+ getNodeCycleEdgeIds(e) {
1913
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
1914
+ }
1915
+ getNodeAdjacentEdgeIds(e) {
1916
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
1843
1917
  }
1844
1918
  }
1845
- const Dt = (r, t) => {
1846
- const e = new yt(), s = new pt(e, t, r), i = {
1919
+ class De {
1920
+ constructor(e) {
1921
+ s(this, "onAfterUpdated");
1922
+ this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
1923
+ }
1924
+ getViewportMatrix() {
1925
+ return { ...this.viewportStore.getViewportMatrix() };
1926
+ }
1927
+ getContentMatrix() {
1928
+ return { ...this.viewportStore.getContentMatrix() };
1929
+ }
1930
+ }
1931
+ const Ne = (r, e) => {
1932
+ const t = new fe(), o = new Te(t), i = new De(e), n = new ue(t, e, r), a = {
1847
1933
  nodes: {
1848
- centerFn: vt,
1934
+ centerFn: me,
1849
1935
  priorityFn: () => 0
1850
1936
  },
1851
1937
  edges: {
1852
- shapeFactory: () => new bt(),
1938
+ shapeFactory: () => new Pe(),
1853
1939
  priorityFn: () => 0
1854
1940
  },
1855
1941
  ports: {
1856
1942
  direction: 0
1857
1943
  }
1858
1944
  };
1859
- return new ft(e, t, s, i);
1945
+ return new we(
1946
+ o,
1947
+ i,
1948
+ t,
1949
+ e,
1950
+ n,
1951
+ a
1952
+ );
1860
1953
  };
1861
- class O {
1862
- constructor(t, e, s, i) {
1863
- o(this, "onAfterPortMarked", (t) => {
1864
- const e = this.canvas.graph.getPort(t);
1865
- this.canvas.graph.getElementPortIds(e.element).length === 1 && this.hookPortEvents(e.element);
1866
- });
1867
- o(this, "onBeforePortUnmarked", (t) => {
1868
- const e = this.canvas.graph.getPort(t);
1869
- this.canvas.graph.getElementPortIds(e.element).length === 1 && this.unhookPortEvents(e.element);
1870
- });
1871
- o(this, "onPortMouseDown", (t) => {
1872
- if (!this.params.mouseDownEventVerifier(t))
1954
+ class k {
1955
+ constructor(e, t, o, i) {
1956
+ s(this, "onAfterPortMarked", (e) => {
1957
+ const t = this.canvas.graph.getPort(e);
1958
+ this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
1959
+ });
1960
+ s(this, "onBeforePortUnmarked", (e) => {
1961
+ const t = this.canvas.graph.getPort(e);
1962
+ this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
1963
+ });
1964
+ s(this, "onPortMouseDown", (e) => {
1965
+ if (!this.params.mouseDownEventVerifier(e))
1873
1966
  return;
1874
- const e = t.currentTarget, s = this.canvas.graph.getElementPortIds(e)[0];
1875
- this.params.onPortPointerDown(s, {
1876
- x: t.clientX,
1877
- y: t.clientY
1878
- }) && (t.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1967
+ const t = e.currentTarget, o = this.canvas.graph.getElementPortIds(t)[0];
1968
+ this.params.onPortPointerDown(o, {
1969
+ x: e.clientX,
1970
+ y: e.clientY
1971
+ }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
1879
1972
  passive: !0
1880
1973
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
1881
1974
  passive: !0
1882
1975
  }));
1883
1976
  });
1884
- o(this, "onWindowMouseMove", (t) => {
1885
- if (!R(
1977
+ s(this, "onWindowMouseMove", (e) => {
1978
+ if (!C(
1886
1979
  this.window,
1887
1980
  this.element,
1888
- t.clientX,
1889
- t.clientY
1981
+ e.clientX,
1982
+ e.clientY
1890
1983
  )) {
1891
1984
  this.stopMouseDrag();
1892
1985
  return;
1893
1986
  }
1894
- this.params.onPointerMove({ x: t.clientX, y: t.clientY });
1987
+ this.params.onPointerMove({ x: e.clientX, y: e.clientY });
1895
1988
  });
1896
- o(this, "onWindowMouseUp", (t) => {
1897
- this.params.mouseUpEventVerifier(t) && (this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopMouseDrag());
1989
+ s(this, "onWindowMouseUp", (e) => {
1990
+ this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
1898
1991
  });
1899
- o(this, "onPortTouchStart", (t) => {
1900
- if (t.touches.length !== 1)
1992
+ s(this, "onPortTouchStart", (e) => {
1993
+ if (e.touches.length !== 1)
1901
1994
  return;
1902
- const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
1995
+ const t = e.touches[0], o = e.currentTarget, i = this.canvas.graph.getElementPortIds(o)[0];
1903
1996
  this.params.onPortPointerDown(i, {
1904
- x: e.clientX,
1905
- y: e.clientY
1906
- }) && (t.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
1997
+ x: t.clientX,
1998
+ y: t.clientY
1999
+ }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
1907
2000
  passive: !0
1908
2001
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
1909
2002
  passive: !0
@@ -1911,46 +2004,46 @@ class O {
1911
2004
  passive: !0
1912
2005
  }));
1913
2006
  });
1914
- o(this, "onWindowTouchMove", (t) => {
1915
- const e = t.touches[0];
1916
- if (!R(
2007
+ s(this, "onWindowTouchMove", (e) => {
2008
+ const t = e.touches[0];
2009
+ if (!C(
1917
2010
  this.window,
1918
2011
  this.element,
1919
- e.clientX,
1920
- e.clientY
2012
+ t.clientX,
2013
+ t.clientY
1921
2014
  )) {
1922
2015
  this.stopTouchDrag();
1923
2016
  return;
1924
2017
  }
1925
- this.params.onPointerMove({ x: e.clientX, y: e.clientY });
2018
+ this.params.onPointerMove({ x: t.clientX, y: t.clientY });
1926
2019
  });
1927
- o(this, "onWindowTouchFinish", (t) => {
1928
- const e = t.changedTouches[0];
1929
- this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopTouchDrag();
2020
+ s(this, "onWindowTouchFinish", (e) => {
2021
+ const t = e.changedTouches[0];
2022
+ this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
1930
2023
  });
1931
- o(this, "onBeforeClear", () => {
1932
- this.canvas.graph.getAllPortIds().forEach((t) => {
1933
- const e = this.canvas.graph.getPort(t);
1934
- this.unhookPortEvents(e.element);
2024
+ s(this, "onBeforeClear", () => {
2025
+ this.canvas.graph.getAllPortIds().forEach((e) => {
2026
+ const t = this.canvas.graph.getPort(e);
2027
+ this.unhookPortEvents(t.element);
1935
2028
  });
1936
2029
  });
1937
- o(this, "onBeforeDestroy", () => {
2030
+ s(this, "onBeforeDestroy", () => {
1938
2031
  this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
1939
2032
  });
1940
- this.canvas = t, this.element = e, 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);
2033
+ this.canvas = e, this.element = t, this.window = o, 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);
1941
2034
  }
1942
- static configure(t, e, s, i) {
1943
- new O(t, e, s, i);
2035
+ static configure(e, t, o, i) {
2036
+ new k(e, t, o, i);
1944
2037
  }
1945
- hookPortEvents(t) {
1946
- t.addEventListener("mousedown", this.onPortMouseDown, {
2038
+ hookPortEvents(e) {
2039
+ e.addEventListener("mousedown", this.onPortMouseDown, {
1947
2040
  passive: !0
1948
- }), t.addEventListener("touchstart", this.onPortTouchStart, {
2041
+ }), e.addEventListener("touchstart", this.onPortTouchStart, {
1949
2042
  passive: !0
1950
2043
  });
1951
2044
  }
1952
- unhookPortEvents(t) {
1953
- t.removeEventListener("mousedown", this.onPortMouseDown), t.removeEventListener("touchstart", this.onPortTouchStart);
2045
+ unhookPortEvents(e) {
2046
+ e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
1954
2047
  }
1955
2048
  stopMouseDrag() {
1956
2049
  this.params.onStopDrag(), this.removeWindowMouseListeners();
@@ -1966,61 +2059,61 @@ class O {
1966
2059
  }
1967
2060
  }
1968
2061
  class Z {
1969
- constructor(t, e, s, i) {
1970
- o(this, "grabbedNode", null);
1971
- o(this, "maxNodePriority", 0);
1972
- o(this, "graph");
1973
- o(this, "onAfterNodeAdded", (t) => {
1974
- this.updateMaxNodePriority(t);
1975
- const e = this.graph.getNode(t);
1976
- e.element.addEventListener("mousedown", this.onMouseDown, {
2062
+ constructor(e, t, o, i) {
2063
+ s(this, "grabbedNode", null);
2064
+ s(this, "maxNodePriority", 0);
2065
+ s(this, "graph");
2066
+ s(this, "onAfterNodeAdded", (e) => {
2067
+ this.updateMaxNodePriority(e);
2068
+ const t = this.graph.getNode(e);
2069
+ t.element.addEventListener("mousedown", this.onMouseDown, {
1977
2070
  passive: !0
1978
- }), e.element.addEventListener("touchstart", this.onTouchStart, {
2071
+ }), t.element.addEventListener("touchstart", this.onTouchStart, {
1979
2072
  passive: !0
1980
2073
  });
1981
2074
  });
1982
- o(this, "onAfterNodeUpdated", (t) => {
1983
- this.updateMaxNodePriority(t);
2075
+ s(this, "onAfterNodeUpdated", (e) => {
2076
+ this.updateMaxNodePriority(e);
1984
2077
  });
1985
- o(this, "onBeforeNodeRemoved", (t) => {
1986
- const e = this.graph.getNode(t);
1987
- e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
2078
+ s(this, "onBeforeNodeRemoved", (e) => {
2079
+ const t = this.graph.getNode(e);
2080
+ t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
1988
2081
  });
1989
- o(this, "onBeforeDestroy", () => {
2082
+ s(this, "onBeforeDestroy", () => {
1990
2083
  this.removeMouseDragListeners(), this.removeTouchDragListeners();
1991
2084
  });
1992
- o(this, "onBeforeClear", () => {
1993
- this.canvas.graph.getAllNodeIds().forEach((t) => {
1994
- const e = this.canvas.graph.getNode(t);
1995
- e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
2085
+ s(this, "onBeforeClear", () => {
2086
+ this.canvas.graph.getAllNodeIds().forEach((e) => {
2087
+ const t = this.canvas.graph.getNode(e);
2088
+ t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
1996
2089
  }), this.maxNodePriority = 0;
1997
2090
  });
1998
- o(this, "onMouseDown", (t) => {
1999
- if (!this.params.mouseDownEventVerifier(t))
2091
+ s(this, "onMouseDown", (e) => {
2092
+ if (!this.params.mouseDownEventVerifier(e))
2000
2093
  return;
2001
- const e = t.currentTarget, s = this.graph.getElementNodeId(e), i = this.graph.getNode(s);
2002
- if (!this.params.nodeDragVerifier(s))
2094
+ const t = e.currentTarget, o = this.graph.getElementNodeId(t), i = this.graph.getNode(o);
2095
+ if (!this.params.nodeDragVerifier(o))
2003
2096
  return;
2004
- t.stopPropagation();
2097
+ e.stopPropagation();
2005
2098
  const a = this.calculateContentPoint({
2006
- x: t.clientX,
2007
- y: t.clientY
2099
+ x: e.clientX,
2100
+ y: e.clientY
2008
2101
  });
2009
2102
  this.grabbedNode = {
2010
- nodeId: s,
2103
+ nodeId: o,
2011
2104
  dx: a.x - i.x,
2012
2105
  dy: a.y - i.y
2013
- }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2106
+ }, I(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2014
2107
  passive: !0
2015
2108
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2016
2109
  passive: !0
2017
2110
  });
2018
2111
  });
2019
- o(this, "onTouchStart", (t) => {
2020
- if (t.touches.length !== 1)
2112
+ s(this, "onTouchStart", (e) => {
2113
+ if (e.touches.length !== 1)
2021
2114
  return;
2022
- t.stopPropagation();
2023
- const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
2115
+ e.stopPropagation();
2116
+ const t = e.touches[0], o = e.currentTarget, i = this.canvas.graph.getElementNodeId(o), n = this.graph.getNode(i);
2024
2117
  if (!this.params.nodeDragVerifier({
2025
2118
  nodeId: i,
2026
2119
  element: n.element,
@@ -2029,8 +2122,8 @@ class Z {
2029
2122
  }))
2030
2123
  return;
2031
2124
  const h = this.calculateContentPoint({
2032
- x: e.clientX,
2033
- y: e.clientY
2125
+ x: t.clientX,
2126
+ y: t.clientY
2034
2127
  });
2035
2128
  this.grabbedNode = {
2036
2129
  nodeId: i,
@@ -2044,87 +2137,87 @@ class Z {
2044
2137
  passive: !0
2045
2138
  });
2046
2139
  });
2047
- o(this, "onWindowMouseMove", (t) => {
2048
- if (!R(
2140
+ s(this, "onWindowMouseMove", (e) => {
2141
+ if (!C(
2049
2142
  this.window,
2050
2143
  this.element,
2051
- t.clientX,
2052
- t.clientY
2144
+ e.clientX,
2145
+ e.clientY
2053
2146
  )) {
2054
2147
  this.cancelMouseDrag();
2055
2148
  return;
2056
2149
  }
2057
2150
  this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
2058
- x: t.clientX,
2059
- y: t.clientY
2151
+ x: e.clientX,
2152
+ y: e.clientY
2060
2153
  });
2061
2154
  });
2062
- o(this, "onWindowMouseUp", (t) => {
2063
- this.params.mouseUpEventVerifier(t) && this.cancelMouseDrag();
2155
+ s(this, "onWindowMouseUp", (e) => {
2156
+ this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
2064
2157
  });
2065
- o(this, "onWindowTouchMove", (t) => {
2066
- if (t.touches.length !== 1)
2158
+ s(this, "onWindowTouchMove", (e) => {
2159
+ if (e.touches.length !== 1)
2067
2160
  return;
2068
- const e = t.touches[0];
2069
- if (!R(
2161
+ const t = e.touches[0];
2162
+ if (!C(
2070
2163
  this.window,
2071
2164
  this.element,
2072
- e.clientX,
2073
- e.clientY
2165
+ t.clientX,
2166
+ t.clientY
2074
2167
  )) {
2075
2168
  this.cancelTouchDrag();
2076
2169
  return;
2077
2170
  }
2078
2171
  this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
2079
- x: e.clientX,
2080
- y: e.clientY
2172
+ x: t.clientX,
2173
+ y: t.clientY
2081
2174
  });
2082
2175
  });
2083
- o(this, "onWindowTouchFinish", () => {
2176
+ s(this, "onWindowTouchFinish", () => {
2084
2177
  this.cancelTouchDrag();
2085
2178
  });
2086
- this.canvas = t, this.element = e, this.window = s, this.params = i, this.graph = t.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2179
+ this.canvas = e, this.element = t, this.window = o, this.params = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2087
2180
  }
2088
- static configure(t, e, s, i) {
2089
- new Z(t, e, s, i);
2181
+ static configure(e, t, o, i) {
2182
+ new Z(e, t, o, i);
2090
2183
  }
2091
- moveNode(t, e) {
2092
- if (this.graph.getNode(t.nodeId) === null)
2184
+ moveNode(e, t) {
2185
+ if (this.graph.getNode(e.nodeId) === null)
2093
2186
  return;
2094
- const i = this.calculateContentPoint(e), n = {
2095
- x: i.x - t.dx,
2096
- y: i.y - t.dy
2187
+ const i = this.calculateContentPoint(t), n = {
2188
+ x: i.x - e.dx,
2189
+ y: i.y - e.dy
2097
2190
  }, a = this.adjustNodeCoords(n);
2098
- this.canvas.updateNode(t.nodeId, {
2191
+ this.canvas.updateNode(e.nodeId, {
2099
2192
  x: a.x,
2100
2193
  y: a.y
2101
- }), this.params.onNodeDrag(t.nodeId);
2194
+ }), this.params.onNodeDrag(e.nodeId);
2102
2195
  }
2103
- moveNodeOnTop(t) {
2196
+ moveNodeOnTop(e) {
2104
2197
  if (this.params.moveOnTop) {
2105
2198
  if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
2106
- const e = this.maxNodePriority;
2107
- this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(t).forEach((i) => {
2108
- this.canvas.updateEdge(i, { priority: e });
2199
+ const t = this.maxNodePriority;
2200
+ this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
2201
+ this.canvas.updateEdge(i, { priority: t });
2109
2202
  });
2110
2203
  }
2111
- this.canvas.updateNode(t, { priority: this.maxNodePriority });
2204
+ this.canvas.updateNode(e, { priority: this.maxNodePriority });
2112
2205
  }
2113
2206
  }
2114
2207
  cancelMouseDrag() {
2115
- this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
2208
+ this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, I(this.element, null), this.removeMouseDragListeners();
2116
2209
  }
2117
2210
  removeMouseDragListeners() {
2118
2211
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
2119
2212
  }
2120
2213
  cancelTouchDrag() {
2121
2214
  if (this.grabbedNode !== null) {
2122
- const t = this.graph.getNode(this.grabbedNode.nodeId);
2123
- t !== null && this.params.onNodeDragFinished({
2215
+ const e = this.graph.getNode(this.grabbedNode.nodeId);
2216
+ e !== null && this.params.onNodeDragFinished({
2124
2217
  nodeId: this.grabbedNode.nodeId,
2125
- element: t.element,
2126
- x: t.x,
2127
- y: t.y
2218
+ element: e.element,
2219
+ x: e.x,
2220
+ y: e.y
2128
2221
  });
2129
2222
  }
2130
2223
  this.grabbedNode = null, this.removeTouchDragListeners();
@@ -2132,103 +2225,103 @@ class Z {
2132
2225
  removeTouchDragListeners() {
2133
2226
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2134
2227
  }
2135
- updateMaxNodePriority(t) {
2136
- const e = this.graph.getNode(t).priority;
2137
- this.maxNodePriority = Math.max(this.maxNodePriority, e);
2228
+ updateMaxNodePriority(e) {
2229
+ const t = this.graph.getNode(e).priority;
2230
+ this.maxNodePriority = Math.max(this.maxNodePriority, t);
2138
2231
  }
2139
- calculateContentPoint(t) {
2140
- const e = this.element.getBoundingClientRect(), s = {
2141
- x: t.x - e.x,
2142
- y: t.y - e.y
2232
+ calculateContentPoint(e) {
2233
+ const t = this.element.getBoundingClientRect(), o = {
2234
+ x: e.x - t.x,
2235
+ y: e.y - t.y
2143
2236
  }, i = this.canvas.viewport.getViewportMatrix();
2144
- return T(i, s);
2237
+ return T(i, o);
2145
2238
  }
2146
- adjustNodeCoords(t) {
2147
- const e = this.params.gridSize;
2148
- if (e !== null) {
2149
- const s = e / 2;
2239
+ adjustNodeCoords(e) {
2240
+ const t = this.params.gridSize;
2241
+ if (t !== null) {
2242
+ const o = t / 2;
2150
2243
  return {
2151
- x: Math.floor((t.x + s) / e) * e,
2152
- y: Math.floor((t.y + s) / e) * e
2244
+ x: Math.floor((e.x + o) / t) * t,
2245
+ y: Math.floor((e.y + o) / t) * t
2153
2246
  };
2154
2247
  }
2155
- return t;
2248
+ return e;
2156
2249
  }
2157
2250
  }
2158
- const ie = (r, t, e) => ({
2251
+ const ht = (r, e, t) => ({
2159
2252
  scale: r.scale,
2160
- x: r.x + r.scale * t,
2161
- y: r.y + r.scale * e
2162
- }), ne = (r, t, e, s) => ({
2163
- scale: r.scale * t,
2164
- x: r.scale * (1 - t) * e + r.x,
2165
- y: r.scale * (1 - t) * s + r.y
2166
- }), I = (r) => {
2167
- const t = [], e = r.touches.length;
2168
- for (let h = 0; h < e; h++)
2169
- t.push([r.touches[h].clientX, r.touches[h].clientY]);
2170
- const s = t.reduce(
2253
+ x: r.x + r.scale * e,
2254
+ y: r.y + r.scale * t
2255
+ }), dt = (r, e, t, o) => ({
2256
+ scale: r.scale * e,
2257
+ x: r.scale * (1 - e) * t + r.x,
2258
+ y: r.scale * (1 - e) * o + r.y
2259
+ }), U = (r) => {
2260
+ const e = [], t = r.touches.length;
2261
+ for (let h = 0; h < t; h++)
2262
+ e.push([r.touches[h].clientX, r.touches[h].clientY]);
2263
+ const o = e.reduce(
2171
2264
  (h, d) => [h[0] + d[0], h[1] + d[1]],
2172
2265
  [0, 0]
2173
- ), i = [s[0] / e, s[1] / e], a = t.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
2266
+ ), i = [o[0] / t, o[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
2174
2267
  (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
2175
2268
  0
2176
2269
  );
2177
2270
  return {
2178
2271
  x: i[0],
2179
2272
  y: i[1],
2180
- scale: a / e,
2181
- touchesCnt: e,
2182
- touches: t
2273
+ scale: a / t,
2274
+ touchesCnt: t,
2275
+ touches: e
2183
2276
  };
2184
2277
  };
2185
- class k {
2186
- constructor(t, e, s, i) {
2187
- o(this, "viewport");
2188
- o(this, "prevTouches", null);
2189
- o(this, "wheelFinishTimer", null);
2190
- o(this, "transformInProgress", !1);
2191
- o(this, "onBeforeDestroy", () => {
2278
+ class z {
2279
+ constructor(e, t, o, i) {
2280
+ s(this, "viewport");
2281
+ s(this, "prevTouches", null);
2282
+ s(this, "wheelFinishTimer", null);
2283
+ s(this, "transformInProgress", !1);
2284
+ s(this, "onBeforeDestroy", () => {
2192
2285
  this.removeMouseDragListeners(), this.removeTouchDragListeners();
2193
2286
  });
2194
- o(this, "onMouseDown", (t) => {
2195
- this.element === null || !this.params.mouseDownEventVerifier(t) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2287
+ s(this, "onMouseDown", (e) => {
2288
+ this.element === null || !this.params.mouseDownEventVerifier(e) || (I(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2196
2289
  passive: !0
2197
2290
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2198
2291
  passive: !0
2199
2292
  }), this.startRegisteredTransform());
2200
2293
  });
2201
- o(this, "onWindowMouseMove", (t) => {
2202
- const e = R(
2294
+ s(this, "onWindowMouseMove", (e) => {
2295
+ const t = C(
2203
2296
  this.window,
2204
2297
  this.element,
2205
- t.clientX,
2206
- t.clientY
2298
+ e.clientX,
2299
+ e.clientY
2207
2300
  );
2208
- if (this.element === null || !e) {
2301
+ if (this.element === null || !t) {
2209
2302
  this.stopMouseDrag();
2210
2303
  return;
2211
2304
  }
2212
- const s = -t.movementX, i = -t.movementY;
2213
- this.moveViewport(s, i);
2305
+ const o = -e.movementX, i = -e.movementY;
2306
+ this.moveViewport(o, i);
2214
2307
  });
2215
- o(this, "onWindowMouseUp", (t) => {
2216
- this.element === null || !this.params.mouseUpEventVerifier(t) || this.stopMouseDrag();
2308
+ s(this, "onWindowMouseUp", (e) => {
2309
+ this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
2217
2310
  });
2218
- o(this, "onWheelScroll", (t) => {
2219
- if (!this.params.mouseWheelEventVerifier(t))
2311
+ s(this, "onWheelScroll", (e) => {
2312
+ if (!this.params.mouseWheelEventVerifier(e))
2220
2313
  return;
2221
- const { left: e, top: s } = this.element.getBoundingClientRect(), i = t.clientX - e, n = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2314
+ const { left: t, top: o } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2222
2315
  this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2223
2316
  this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
2224
2317
  }, this.params.scaleWheelFinishTimeout);
2225
2318
  });
2226
- o(this, "onTouchStart", (t) => {
2319
+ s(this, "onTouchStart", (e) => {
2227
2320
  if (this.prevTouches !== null) {
2228
- this.prevTouches = I(t);
2321
+ this.prevTouches = U(e);
2229
2322
  return;
2230
2323
  }
2231
- this.prevTouches = I(t), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2324
+ this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2232
2325
  passive: !0
2233
2326
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2234
2327
  passive: !0
@@ -2236,62 +2329,62 @@ class k {
2236
2329
  passive: !0
2237
2330
  }), this.startRegisteredTransform();
2238
2331
  });
2239
- o(this, "onWindowTouchMove", (t) => {
2240
- const e = I(t);
2241
- if (!e.touches.every(
2242
- (i) => R(this.window, this.element, i[0], i[1])
2332
+ s(this, "onWindowTouchMove", (e) => {
2333
+ const t = U(e);
2334
+ if (!t.touches.every(
2335
+ (i) => C(this.window, this.element, i[0], i[1])
2243
2336
  )) {
2244
2337
  this.stopTouchDrag();
2245
2338
  return;
2246
2339
  }
2247
- if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
2248
- -(e.x - this.prevTouches.x),
2249
- -(e.y - this.prevTouches.y)
2250
- ), e.touchesCnt === 2) {
2251
- const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (e.scale / this.prevTouches.scale);
2340
+ if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
2341
+ -(t.x - this.prevTouches.x),
2342
+ -(t.y - this.prevTouches.y)
2343
+ ), t.touchesCnt === 2) {
2344
+ 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);
2252
2345
  this.scaleViewport(c, a, h);
2253
2346
  }
2254
- this.prevTouches = e;
2347
+ this.prevTouches = t;
2255
2348
  });
2256
- o(this, "onWindowTouchFinish", (t) => {
2257
- t.touches.length > 0 ? this.prevTouches = I(t) : this.stopTouchDrag();
2349
+ s(this, "onWindowTouchFinish", (e) => {
2350
+ e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
2258
2351
  });
2259
- o(this, "observer", new ResizeObserver(() => {
2260
- const t = this.viewport.getViewportMatrix(), { width: e, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
2261
- prevTransform: t,
2262
- nextTransform: t,
2263
- canvasWidth: e,
2264
- canvasHeight: s
2352
+ s(this, "observer", new ResizeObserver(() => {
2353
+ const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
2354
+ prevTransform: e,
2355
+ nextTransform: e,
2356
+ canvasWidth: t,
2357
+ canvasHeight: o
2265
2358
  });
2266
2359
  this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
2267
2360
  }));
2268
- o(this, "preventWheelScaleListener", (t) => {
2269
- t.preventDefault();
2361
+ s(this, "preventWheelScaleListener", (e) => {
2362
+ e.preventDefault();
2270
2363
  });
2271
- this.canvas = t, this.element = e, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
2364
+ this.canvas = e, this.element = t, this.window = o, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
2272
2365
  passive: !1
2273
- }), this.viewport = t.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
2366
+ }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
2274
2367
  passive: !0
2275
2368
  }), this.element.addEventListener("wheel", this.onWheelScroll, {
2276
2369
  passive: !0
2277
2370
  }), this.element.addEventListener("touchstart", this.onTouchStart, {
2278
2371
  passive: !0
2279
- }), t.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2372
+ }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2280
2373
  }
2281
- static configure(t, e, s, i) {
2282
- new k(t, e, s, i);
2374
+ static configure(e, t, o, i) {
2375
+ new z(e, t, o, i);
2283
2376
  }
2284
- moveViewport(t, e) {
2285
- const s = this.viewport.getViewportMatrix(), i = ie(s, t, e), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
2286
- prevTransform: s,
2377
+ moveViewport(e, t) {
2378
+ const o = this.viewport.getViewportMatrix(), i = ht(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
2379
+ prevTransform: o,
2287
2380
  nextTransform: i,
2288
2381
  canvasWidth: n,
2289
2382
  canvasHeight: a
2290
2383
  });
2291
2384
  this.performTransform(h);
2292
2385
  }
2293
- scaleViewport(t, e, s) {
2294
- const i = this.canvas.viewport.getViewportMatrix(), n = ne(i, t, e, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2386
+ scaleViewport(e, t, o) {
2387
+ const i = this.canvas.viewport.getViewportMatrix(), n = dt(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2295
2388
  prevTransform: i,
2296
2389
  nextTransform: n,
2297
2390
  canvasWidth: a,
@@ -2300,7 +2393,7 @@ class k {
2300
2393
  this.performTransform(d);
2301
2394
  }
2302
2395
  stopMouseDrag() {
2303
- U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2396
+ I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2304
2397
  }
2305
2398
  removeMouseDragListeners() {
2306
2399
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2311,8 +2404,8 @@ class k {
2311
2404
  removeTouchDragListeners() {
2312
2405
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2313
2406
  }
2314
- performTransform(t) {
2315
- this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.params.onTransformChange();
2407
+ performTransform(e) {
2408
+ this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
2316
2409
  }
2317
2410
  startRegisteredTransform() {
2318
2411
  this.transformInProgress = !0, this.params.onTransformStarted();
@@ -2322,36 +2415,36 @@ class k {
2322
2415
  }
2323
2416
  }
2324
2417
  class J {
2325
- constructor(t, e, s, i, n, a) {
2326
- o(this, "canvasResizeObserver");
2327
- o(this, "nodeHorizontal");
2328
- o(this, "nodeVertical");
2329
- o(this, "viewport");
2330
- o(this, "viewportWidth", 0);
2331
- o(this, "viewportHeight", 0);
2332
- o(this, "viewportMatrix");
2333
- o(this, "loadedArea", {
2418
+ constructor(e, t, o, i, n, a) {
2419
+ s(this, "canvasResizeObserver");
2420
+ s(this, "nodeHorizontal");
2421
+ s(this, "nodeVertical");
2422
+ s(this, "viewport");
2423
+ s(this, "viewportWidth", 0);
2424
+ s(this, "viewportHeight", 0);
2425
+ s(this, "viewportMatrix");
2426
+ s(this, "loadedArea", {
2334
2427
  xFrom: 1 / 0,
2335
2428
  xTo: 1 / 0,
2336
2429
  yFrom: 1 / 0,
2337
2430
  yTo: 1 / 0
2338
2431
  });
2339
- o(this, "updateLoadedArea", (t) => {
2432
+ s(this, "updateLoadedArea", (e) => {
2340
2433
  this.loadedArea = {
2341
- xFrom: t.x,
2342
- xTo: t.x + t.width,
2343
- yFrom: t.y,
2344
- yTo: t.y + t.height
2434
+ xFrom: e.x,
2435
+ xTo: e.x + e.width,
2436
+ yFrom: e.y,
2437
+ yTo: e.y + e.height
2345
2438
  };
2346
2439
  });
2347
- o(this, "onAfterViewportUpdated", () => {
2440
+ s(this, "onAfterViewportUpdated", () => {
2348
2441
  this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
2349
2442
  });
2350
- o(this, "userTransformInProgress", !1);
2351
- this.canvas = t, this.element = e, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
2443
+ s(this, "userTransformInProgress", !1);
2444
+ this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
2352
2445
  const c = d[0];
2353
2446
  this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
2354
- }), this.viewport = t.viewport;
2447
+ }), this.viewport = e.viewport;
2355
2448
  const h = {
2356
2449
  ...i,
2357
2450
  onResizeTransformStarted: () => {
@@ -2372,18 +2465,18 @@ class J {
2372
2465
  this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
2373
2466
  }
2374
2467
  };
2375
- k.configure(
2376
- t,
2468
+ z.configure(
2469
+ e,
2377
2470
  this.element,
2378
2471
  this.window,
2379
2472
  h
2380
2473
  ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
2381
2474
  }
2382
- static configure(t, e, s, i, n, a) {
2475
+ static configure(e, t, o, i, n, a) {
2383
2476
  new J(
2384
- t,
2385
2477
  e,
2386
- s,
2478
+ t,
2479
+ o,
2387
2480
  i,
2388
2481
  n,
2389
2482
  a
@@ -2395,21 +2488,21 @@ class J {
2395
2488
  });
2396
2489
  }
2397
2490
  scheduleEnsureViewportAreaLoaded() {
2398
- const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + t + this.nodeHorizontal, a = this.viewportMatrix.y + e + this.nodeVertical;
2399
- this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
2491
+ const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, o = 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;
2492
+ this.loadedArea.xFrom < o && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
2400
2493
  }
2401
2494
  loadAreaAroundViewport() {
2402
- const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - t - this.nodeHorizontal, i = this.viewportMatrix.y - e - this.nodeVertical, n = 3 * t + 2 * this.nodeHorizontal, a = 3 * e + 2 * this.nodeVertical;
2403
- this.trigger.emit({ x: s, y: i, width: n, height: a });
2495
+ const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, o = 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;
2496
+ this.trigger.emit({ x: o, y: i, width: n, height: a });
2404
2497
  }
2405
2498
  }
2406
- const ae = () => {
2499
+ const ct = () => {
2407
2500
  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2408
2501
  return r.style.position = "absolute", r.style.inset = "0", r;
2409
- }, he = () => {
2502
+ }, gt = () => {
2410
2503
  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
2411
2504
  return r.setAttribute("fill", "url(#pattern)"), r;
2412
- }, de = () => {
2505
+ }, lt = () => {
2413
2506
  const r = document.createElementNS(
2414
2507
  "http://www.w3.org/2000/svg",
2415
2508
  "pattern"
@@ -2417,53 +2510,53 @@ const ae = () => {
2417
2510
  return r.setAttribute("id", "pattern"), r;
2418
2511
  };
2419
2512
  class Q {
2420
- constructor(t, e, s) {
2421
- o(this, "svg", ae());
2422
- o(this, "patternRenderingRectangle", he());
2423
- o(this, "pattern", de());
2424
- o(this, "patternContent");
2425
- o(this, "tileWidth");
2426
- o(this, "tileHeight");
2427
- o(this, "halfTileWidth");
2428
- o(this, "halfTileHeight");
2429
- o(this, "maxViewportScale");
2430
- o(this, "visible", !1);
2431
- o(this, "resizeObserver", new ResizeObserver((t) => {
2432
- const e = t[0], { width: s, height: i } = e.contentRect;
2433
- this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
2434
- const n = this.tileWidth / s, a = this.tileHeight / i;
2513
+ constructor(e, t, o) {
2514
+ s(this, "svg", ct());
2515
+ s(this, "patternRenderingRectangle", gt());
2516
+ s(this, "pattern", lt());
2517
+ s(this, "patternContent");
2518
+ s(this, "tileWidth");
2519
+ s(this, "tileHeight");
2520
+ s(this, "halfTileWidth");
2521
+ s(this, "halfTileHeight");
2522
+ s(this, "maxViewportScale");
2523
+ s(this, "visible", !1);
2524
+ s(this, "resizeObserver", new ResizeObserver((e) => {
2525
+ const t = e[0], { width: o, height: i } = t.contentRect;
2526
+ this.svg.setAttribute("width", `${o}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${o}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
2527
+ const n = this.tileWidth / o, a = this.tileHeight / i;
2435
2528
  this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
2436
2529
  }));
2437
- o(this, "onAfterTransformUpdated", () => {
2438
- const t = this.canvas.viewport.getContentMatrix(), e = t.x - this.halfTileWidth * t.scale, s = t.y - this.halfTileHeight * t.scale, i = `matrix(${t.scale}, 0, 0, ${t.scale}, ${e}, ${s})`;
2530
+ s(this, "onAfterTransformUpdated", () => {
2531
+ const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, o = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${o})`;
2439
2532
  this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
2440
2533
  });
2441
- this.canvas = t, this.backgroundHost = s, this.tileWidth = e.tileWidth, this.tileHeight = e.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = e.renderer, this.maxViewportScale = e.maxViewportScale;
2534
+ this.canvas = e, this.backgroundHost = o, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
2442
2535
  const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
2443
2536
  this.patternContent.setAttribute("transform", i), this.pattern.appendChild(this.patternContent);
2444
2537
  const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
2445
2538
  n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
2446
2539
  }
2447
- static configure(t, e, s) {
2448
- new Q(t, e, s);
2540
+ static configure(e, t, o) {
2541
+ new Q(e, t, o);
2449
2542
  }
2450
2543
  updateVisibility() {
2451
- const e = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
2452
- e && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !e && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
2544
+ const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
2545
+ t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
2453
2546
  }
2454
2547
  }
2455
2548
  class _ {
2456
- constructor(t, e, s, i, n) {
2457
- o(this, "overlayCanvas");
2458
- o(this, "staticPortId", null);
2459
- o(this, "isTargetDragging", !0);
2460
- o(this, "onEdgeCreated", (t) => {
2461
- this.params.onAfterEdgeCreated(t);
2462
- });
2463
- this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
2549
+ constructor(e, t, o, i, n) {
2550
+ s(this, "overlayCanvas");
2551
+ s(this, "staticPortId", null);
2552
+ s(this, "isTargetDragging", !0);
2553
+ s(this, "onEdgeCreated", (e) => {
2554
+ this.params.onAfterEdgeCreated(e);
2555
+ });
2556
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Ne(
2464
2557
  this.overlayLayer,
2465
2558
  this.viewportStore
2466
- ), O.configure(
2559
+ ), k.configure(
2467
2560
  this.canvas,
2468
2561
  this.overlayLayer,
2469
2562
  this.window,
@@ -2486,25 +2579,25 @@ class _ {
2486
2579
  }
2487
2580
  );
2488
2581
  }
2489
- static configure(t, e, s, i, n) {
2582
+ static configure(e, t, o, i, n) {
2490
2583
  new _(
2491
- t,
2492
2584
  e,
2493
- s,
2585
+ t,
2586
+ o,
2494
2587
  i,
2495
2588
  n
2496
2589
  );
2497
2590
  }
2498
- grabPort(t, e, s) {
2499
- const i = this.canvas.graph.getPort(t);
2500
- this.staticPortId = t;
2591
+ grabPort(e, t, o) {
2592
+ const i = this.canvas.graph.getPort(e);
2593
+ this.staticPortId = e;
2501
2594
  const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
2502
2595
  x: a - d.x,
2503
2596
  y: h - d.y
2504
2597
  }), g = T(c, {
2505
- x: e.x - d.x,
2506
- y: e.y - d.y
2507
- }), w = {
2598
+ x: t.x - d.x,
2599
+ y: t.y - d.y
2600
+ }), p = {
2508
2601
  overlayId: P.Static,
2509
2602
  portCoords: l,
2510
2603
  portDirection: i.direction
@@ -2513,10 +2606,10 @@ class _ {
2513
2606
  portCoords: g,
2514
2607
  portDirection: this.params.dragPortDirection
2515
2608
  };
2516
- this.isTargetDragging = s === "direct";
2517
- const [m, v] = this.isTargetDragging ? [w, f] : [f, w];
2518
- this.overlayCanvas.addNode(W(m)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
2519
- from: m.overlayId,
2609
+ this.isTargetDragging = o === "direct";
2610
+ const [y, v] = this.isTargetDragging ? [p, f] : [f, p];
2611
+ this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addEdge({
2612
+ from: y.overlayId,
2520
2613
  to: v.overlayId,
2521
2614
  shape: this.params.edgeShapeFactory(P.Edge)
2522
2615
  });
@@ -2524,23 +2617,23 @@ class _ {
2524
2617
  resetDragState() {
2525
2618
  this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2526
2619
  }
2527
- tryCreateConnection(t) {
2528
- const e = mt(this.canvas.graph, t), s = this.staticPortId;
2529
- if (e === null) {
2620
+ tryCreateConnection(e) {
2621
+ const t = ye(this.canvas.graph, e), o = this.staticPortId;
2622
+ if (t === null) {
2530
2623
  this.params.onEdgeCreationInterrupted({
2531
- staticPortId: s,
2624
+ staticPortId: o,
2532
2625
  isDirect: this.isTargetDragging
2533
2626
  });
2534
2627
  return;
2535
2628
  }
2536
- const i = this.isTargetDragging ? s : e, n = this.isTargetDragging ? e : s, a = { from: i, to: n }, h = this.params.connectionPreprocessor(a);
2629
+ const i = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: i, to: n }, h = this.params.connectionPreprocessor(a);
2537
2630
  h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
2538
2631
  }
2539
- moveDraggingPort(t) {
2540
- const e = this.overlayLayer.getBoundingClientRect(), s = {
2541
- x: t.x - e.x,
2542
- y: t.y - e.y
2543
- }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
2632
+ moveDraggingPort(e) {
2633
+ const t = this.overlayLayer.getBoundingClientRect(), o = {
2634
+ x: e.x - t.x,
2635
+ y: e.y - t.y
2636
+ }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, o);
2544
2637
  this.overlayCanvas.updateNode(P.Dragging, {
2545
2638
  x: n.x,
2546
2639
  y: n.y
@@ -2548,18 +2641,18 @@ class _ {
2548
2641
  }
2549
2642
  }
2550
2643
  class q {
2551
- constructor(t, e, s, i, n) {
2552
- o(this, "overlayCanvas");
2553
- o(this, "staticPortId", null);
2554
- o(this, "isTargetDragging", !0);
2555
- o(this, "draggingEdgePayload", null);
2556
- o(this, "onEdgeReattached", (t) => {
2557
- this.params.onAfterEdgeReattached(t);
2558
- });
2559
- this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
2644
+ constructor(e, t, o, i, n) {
2645
+ s(this, "overlayCanvas");
2646
+ s(this, "staticPortId", null);
2647
+ s(this, "isTargetDragging", !0);
2648
+ s(this, "draggingEdgePayload", null);
2649
+ s(this, "onEdgeReattached", (e) => {
2650
+ this.params.onAfterEdgeReattached(e);
2651
+ });
2652
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Ne(
2560
2653
  this.overlayLayer,
2561
2654
  this.viewportStore
2562
- ), O.configure(
2655
+ ), k.configure(
2563
2656
  this.canvas,
2564
2657
  this.overlayLayer,
2565
2658
  this.window,
@@ -2579,55 +2672,55 @@ class q {
2579
2672
  }
2580
2673
  );
2581
2674
  }
2582
- static configure(t, e, s, i, n) {
2675
+ static configure(e, t, o, i, n) {
2583
2676
  new q(
2584
- t,
2585
2677
  e,
2586
- s,
2678
+ t,
2679
+ o,
2587
2680
  i,
2588
2681
  n
2589
2682
  );
2590
2683
  }
2591
- tryStartEdgeDragging(t, e) {
2592
- const s = this.params.draggingEdgeResolver(t);
2593
- if (s === null)
2684
+ tryStartEdgeDragging(e, t) {
2685
+ const o = this.params.draggingEdgeResolver(e);
2686
+ if (o === null)
2594
2687
  return !1;
2595
- const i = this.canvas.graph.getEdge(s);
2688
+ const i = this.canvas.graph.getEdge(o);
2596
2689
  if (i === null)
2597
2690
  return !1;
2598
- const n = t === i.from, a = t === i.to, h = n ? i.to : i.from;
2691
+ const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
2599
2692
  this.staticPortId = h, this.isTargetDragging = a;
2600
- const d = this.canvas.graph.getPort(t), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
2693
+ const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
2601
2694
  x: l.x + l.width / 2,
2602
2695
  y: l.y + l.height / 2
2603
- }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = T(w, {
2696
+ }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = T(p, {
2604
2697
  x: g.x - f.x,
2605
2698
  y: g.y - f.y
2606
- }), v = T(w, {
2607
- x: e.x - f.x,
2608
- y: e.y - f.y
2699
+ }), v = T(p, {
2700
+ x: t.x - f.x,
2701
+ y: t.y - f.y
2609
2702
  });
2610
2703
  this.draggingEdgePayload = {
2611
- id: s,
2704
+ id: o,
2612
2705
  from: i.from,
2613
2706
  to: i.to,
2614
2707
  shape: i.shape,
2615
2708
  priority: i.priority
2616
- }, this.canvas.removeEdge(s);
2617
- const E = {
2709
+ }, this.canvas.removeEdge(o);
2710
+ const x = {
2618
2711
  overlayId: P.Static,
2619
- portCoords: m,
2712
+ portCoords: y,
2620
2713
  portDirection: c.direction
2621
- }, x = {
2714
+ }, A = {
2622
2715
  overlayId: P.Dragging,
2623
2716
  portCoords: v,
2624
2717
  portDirection: d.direction
2625
- }, [L, b] = this.isTargetDragging ? [E, x] : [x, E];
2626
- this.overlayCanvas.addNode(W(L)), this.overlayCanvas.addNode(W(b));
2718
+ }, [R, b] = this.isTargetDragging ? [x, A] : [A, x];
2719
+ this.overlayCanvas.addNode(B(R)), this.overlayCanvas.addNode(B(b));
2627
2720
  const D = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
2628
2721
  return this.overlayCanvas.addEdge({
2629
2722
  id: P.Edge,
2630
- from: L.overlayId,
2723
+ from: R.overlayId,
2631
2724
  to: b.overlayId,
2632
2725
  shape: D
2633
2726
  }), !0;
@@ -2635,19 +2728,19 @@ class q {
2635
2728
  resetDragState() {
2636
2729
  this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2637
2730
  }
2638
- moveDraggingPort(t) {
2639
- const e = this.overlayLayer.getBoundingClientRect(), s = {
2640
- x: t.x - e.x,
2641
- y: t.y - e.y
2642
- }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
2731
+ moveDraggingPort(e) {
2732
+ const t = this.overlayLayer.getBoundingClientRect(), o = {
2733
+ x: e.x - t.x,
2734
+ y: e.y - t.y
2735
+ }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, o);
2643
2736
  this.overlayCanvas.updateNode(P.Dragging, {
2644
2737
  x: n.x,
2645
2738
  y: n.y
2646
2739
  });
2647
2740
  }
2648
- tryCreateConnection(t) {
2649
- const e = mt(this.canvas.graph, t);
2650
- if (this.overlayCanvas.removeEdge(P.Edge), e === null) {
2741
+ tryCreateConnection(e) {
2742
+ const t = ye(this.canvas.graph, e);
2743
+ if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
2651
2744
  const d = this.draggingEdgePayload;
2652
2745
  this.params.onEdgeReattachInterrupted({
2653
2746
  id: d.id,
@@ -2658,9 +2751,9 @@ class q {
2658
2751
  });
2659
2752
  return;
2660
2753
  }
2661
- const [s, i] = this.isTargetDragging ? [this.staticPortId, e] : [e, this.staticPortId], n = this.draggingEdgePayload, a = {
2754
+ const [o, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
2662
2755
  id: n.id,
2663
- from: s,
2756
+ from: o,
2664
2757
  to: i,
2665
2758
  shape: n.shape,
2666
2759
  priority: n.priority
@@ -2679,50 +2772,50 @@ class q {
2679
2772
  }
2680
2773
  }
2681
2774
  }
2682
- const ce = () => {
2775
+ const ut = () => {
2683
2776
  const r = document.createElement("div");
2684
2777
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
2685
2778
  }, Y = () => {
2686
2779
  const r = document.createElement("div");
2687
2780
  return r.style.position = "absolute", r.style.inset = "0", r;
2688
- }, ct = () => {
2781
+ }, de = () => {
2689
2782
  const r = Y();
2690
2783
  return r.style.pointerEvents = "none", r;
2691
2784
  };
2692
- class ge {
2693
- constructor(t) {
2694
- o(this, "background", Y());
2695
- o(this, "main", Y());
2696
- o(this, "overlayConnectablePorts", ct());
2697
- o(this, "overlayDraggableEdges", ct());
2698
- o(this, "host", ce());
2699
- this.element = t, 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);
2785
+ class pt {
2786
+ constructor(e) {
2787
+ s(this, "background", Y());
2788
+ s(this, "main", Y());
2789
+ s(this, "overlayConnectablePorts", de());
2790
+ s(this, "overlayDraggableEdges", de());
2791
+ s(this, "host", ut());
2792
+ 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);
2700
2793
  }
2701
2794
  destroy() {
2702
2795
  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);
2703
2796
  }
2704
2797
  }
2705
- const H = (r) => () => r, gt = H(0), le = () => {
2798
+ const H = (r) => () => r, ce = H(0), wt = () => {
2706
2799
  let r = 0;
2707
2800
  return () => r++;
2708
- }, ue = (r, t) => {
2709
- let e = gt, s = gt;
2710
- const i = le();
2711
- return r === "incremental" && (e = i), t === "incremental" && (s = i), typeof r == "number" && (e = H(r)), typeof t == "number" && (s = H(t)), typeof r == "function" && (e = r), typeof t == "function" && (s = t), {
2712
- nodesPriorityFn: e,
2713
- edgesPriorityFn: s
2801
+ }, ft = (r, e) => {
2802
+ let t = ce, o = ce;
2803
+ const i = wt();
2804
+ return r === "incremental" && (t = i), e === "incremental" && (o = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (o = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
2805
+ nodesPriorityFn: t,
2806
+ edgesPriorityFn: o
2714
2807
  };
2715
- }, tt = (r) => {
2808
+ }, ee = (r) => {
2716
2809
  if (typeof r == "function")
2717
2810
  return r;
2718
- switch (r == null ? void 0 : r.type) {
2811
+ switch (r.type) {
2719
2812
  case "straight":
2720
- return () => new te({
2813
+ return () => new ot({
2721
2814
  color: r.color,
2722
2815
  width: r.width,
2723
2816
  arrowLength: r.arrowLength,
2724
- arrowWidth: r.arrowWidth,
2725
2817
  arrowOffset: r.arrowOffset,
2818
+ arrowRenderer: r.arrowRenderer,
2726
2819
  hasSourceArrow: r.hasSourceArrow,
2727
2820
  hasTargetArrow: r.hasTargetArrow,
2728
2821
  cycleSquareSide: r.cycleSquareSide,
@@ -2731,12 +2824,12 @@ const H = (r) => () => r, gt = H(0), le = () => {
2731
2824
  detourDirection: r.detourDirection
2732
2825
  });
2733
2826
  case "horizontal":
2734
- return () => new qt({
2827
+ return () => new rt({
2735
2828
  color: r.color,
2736
2829
  width: r.width,
2737
2830
  arrowLength: r.arrowLength,
2738
- arrowWidth: r.arrowWidth,
2739
2831
  arrowOffset: r.arrowOffset,
2832
+ arrowRenderer: r.arrowRenderer,
2740
2833
  hasSourceArrow: r.hasSourceArrow,
2741
2834
  hasTargetArrow: r.hasTargetArrow,
2742
2835
  cycleSquareSide: r.cycleSquareSide,
@@ -2744,12 +2837,12 @@ const H = (r) => () => r, gt = H(0), le = () => {
2744
2837
  detourDistance: r.detourDistance
2745
2838
  });
2746
2839
  case "vertical":
2747
- return () => new ee({
2840
+ return () => new st({
2748
2841
  color: r.color,
2749
2842
  width: r.width,
2750
2843
  arrowLength: r.arrowLength,
2751
- arrowWidth: r.arrowWidth,
2752
2844
  arrowOffset: r.arrowOffset,
2845
+ arrowRenderer: r.arrowRenderer,
2753
2846
  hasSourceArrow: r.hasSourceArrow,
2754
2847
  hasTargetArrow: r.hasTargetArrow,
2755
2848
  cycleSquareSide: r.cycleSquareSide,
@@ -2757,22 +2850,22 @@ const H = (r) => () => r, gt = H(0), le = () => {
2757
2850
  detourDistance: r.detourDistance
2758
2851
  });
2759
2852
  case "direct":
2760
- return () => new bt({
2853
+ return () => new Pe({
2761
2854
  color: r.color,
2762
2855
  width: r.width,
2763
2856
  arrowLength: r.arrowLength,
2764
- arrowWidth: r.arrowWidth,
2857
+ arrowRenderer: r.arrowRenderer,
2765
2858
  hasSourceArrow: r.hasSourceArrow,
2766
2859
  hasTargetArrow: r.hasTargetArrow,
2767
2860
  sourceOffset: r.sourceOffset,
2768
2861
  targetOffset: r.targetOffset
2769
2862
  });
2770
2863
  default:
2771
- return () => new _t({
2864
+ return () => new tt({
2772
2865
  color: r.color,
2773
2866
  width: r.width,
2774
2867
  arrowLength: r.arrowLength,
2775
- arrowWidth: r.arrowWidth,
2868
+ arrowRenderer: r.arrowRenderer,
2776
2869
  hasSourceArrow: r.hasSourceArrow,
2777
2870
  hasTargetArrow: r.hasTargetArrow,
2778
2871
  cycleRadius: r.cycleRadius,
@@ -2782,30 +2875,30 @@ const H = (r) => () => r, gt = H(0), le = () => {
2782
2875
  detourDirection: r.detourDirection
2783
2876
  });
2784
2877
  }
2785
- }, pe = (r) => {
2786
- var e, s, i, n, a;
2787
- const t = ue(
2788
- (e = r.nodes) == null ? void 0 : e.priority,
2789
- (s = r.edges) == null ? void 0 : s.priority
2878
+ }, yt = (r) => {
2879
+ var t, o, i, n, a;
2880
+ const e = ft(
2881
+ (t = r.nodes) == null ? void 0 : t.priority,
2882
+ (o = r.edges) == null ? void 0 : o.priority
2790
2883
  );
2791
2884
  return {
2792
2885
  nodes: {
2793
- centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? vt,
2794
- priorityFn: t.nodesPriorityFn
2886
+ centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
2887
+ priorityFn: e.nodesPriorityFn
2795
2888
  },
2796
2889
  ports: {
2797
2890
  direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
2798
2891
  },
2799
2892
  edges: {
2800
- shapeFactory: tt(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
2801
- priorityFn: t.edgesPriorityFn
2893
+ shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
2894
+ priorityFn: e.edgesPriorityFn
2802
2895
  }
2803
2896
  };
2804
- }, we = (r) => {
2805
- var w, f, m, v, E;
2806
- const t = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
2807
- }), e = r.nodeDragVerifier ?? (() => !0), s = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
2808
- }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (m = r.mouse) == null ? void 0 : m.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (x) => x.button === 0, l = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, g = l !== void 0 ? l : (x) => x.button === 0;
2897
+ }, mt = (r) => {
2898
+ var p, f, y, v, x;
2899
+ const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
2900
+ }), t = r.nodeDragVerifier ?? (() => !0), o = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
2901
+ }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (A) => A.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (A) => A.button === 0;
2809
2902
  return {
2810
2903
  moveOnTop: i,
2811
2904
  moveEdgesOnTop: n,
@@ -2813,22 +2906,22 @@ const H = (r) => () => r, gt = H(0), le = () => {
2813
2906
  gridSize: r.gridSize ?? null,
2814
2907
  mouseDownEventVerifier: c,
2815
2908
  mouseUpEventVerifier: g,
2816
- onNodeDrag: t,
2817
- nodeDragVerifier: e,
2818
- onNodeDragFinished: s
2909
+ onNodeDrag: e,
2910
+ nodeDragVerifier: t,
2911
+ onNodeDragFinished: o
2819
2912
  };
2820
- }, fe = (r) => {
2821
- const t = r.minX !== null ? r.minX : -1 / 0, e = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
2913
+ }, vt = (r) => {
2914
+ const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
2822
2915
  return (n) => {
2823
2916
  let a = n.nextTransform.x, h = n.nextTransform.y;
2824
- a < t && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, t));
2825
- const d = n.canvasWidth * n.prevTransform.scale, c = e - d;
2826
- 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));
2917
+ a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
2918
+ const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
2919
+ a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
2827
2920
  const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
2828
2921
  return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
2829
2922
  };
2830
- }, ye = (r) => {
2831
- const t = r.maxContentScale, e = r.minContentScale, s = t !== null ? 1 / t : 0, i = e !== null ? 1 / e : 1 / 0;
2923
+ }, Et = (r) => {
2924
+ const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
2832
2925
  return (n) => {
2833
2926
  const a = n.prevTransform, h = n.nextTransform;
2834
2927
  let d = h.scale, c = h.x, l = h.y;
@@ -2837,8 +2930,8 @@ const H = (r) => () => r, gt = H(0), le = () => {
2837
2930
  const g = (d - a.scale) / (h.scale - a.scale);
2838
2931
  c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2839
2932
  }
2840
- if (h.scale < s && h.scale < a.scale) {
2841
- d = Math.min(a.scale, s), c = a.x, l = a.y;
2933
+ if (h.scale < o && h.scale < a.scale) {
2934
+ d = Math.min(a.scale, o), c = a.x, l = a.y;
2842
2935
  const g = (d - a.scale) / (h.scale - a.scale);
2843
2936
  c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
2844
2937
  }
@@ -2848,48 +2941,48 @@ const H = (r) => () => r, gt = H(0), le = () => {
2848
2941
  y: l
2849
2942
  };
2850
2943
  };
2851
- }, me = (r) => (t) => r.reduce(
2852
- (e, s) => s({
2853
- prevTransform: t.prevTransform,
2854
- nextTransform: e,
2855
- canvasWidth: t.canvasWidth,
2856
- canvasHeight: t.canvasHeight
2944
+ }, At = (r) => (e) => r.reduce(
2945
+ (t, o) => o({
2946
+ prevTransform: e.prevTransform,
2947
+ nextTransform: t,
2948
+ canvasWidth: e.canvasWidth,
2949
+ canvasHeight: e.canvasHeight
2857
2950
  }),
2858
- t.nextTransform
2859
- ), lt = (r) => {
2951
+ e.nextTransform
2952
+ ), ge = (r) => {
2860
2953
  if (typeof r == "function")
2861
2954
  return r;
2862
2955
  switch (r.type) {
2863
2956
  case "scale-limit":
2864
- return ye({
2957
+ return Et({
2865
2958
  minContentScale: r.minContentScale ?? 0,
2866
2959
  maxContentScale: r.maxContentScale ?? 1 / 0
2867
2960
  });
2868
2961
  case "shift-limit":
2869
- return fe({
2962
+ return vt({
2870
2963
  minX: r.minX ?? -1 / 0,
2871
2964
  maxX: r.maxX ?? 1 / 0,
2872
2965
  minY: r.minY ?? -1 / 0,
2873
2966
  maxY: r.maxY ?? 1 / 0
2874
2967
  });
2875
2968
  }
2876
- }, ut = (r) => {
2877
- var m, v, E, x, L, b, D, V, et, rt, ot, st;
2878
- const t = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, e = t !== void 0 ? t : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
2969
+ }, le = (r) => {
2970
+ var y, v, x, A, R, b, D, V, te, re, oe, se;
2971
+ const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
2879
2972
  let i;
2880
- s !== void 0 ? Array.isArray(s) ? i = me(
2881
- s.map(
2882
- (N) => lt(N)
2973
+ o !== void 0 ? Array.isArray(o) ? i = At(
2974
+ o.map(
2975
+ (N) => ge(N)
2883
2976
  )
2884
- ) : i = lt(s) : i = (N) => N.nextTransform;
2885
- 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) ?? (() => {
2886
- }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
2887
- }), d = (L = r == null ? void 0 : r.shift) == null ? void 0 : L.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, w = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
2977
+ ) : i = ge(o) : i = (N) => N.nextTransform;
2978
+ const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
2979
+ }), h = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onTransformChange) ?? (() => {
2980
+ }), d = (R = r == null ? void 0 : r.shift) == null ? void 0 : R.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, p = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
2888
2981
  return {
2889
- wheelSensitivity: e,
2982
+ wheelSensitivity: t,
2890
2983
  onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
2891
2984
  }),
2892
- onTransformFinished: ((et = r == null ? void 0 : r.events) == null ? void 0 : et.onTransformFinished) ?? (() => {
2985
+ onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
2893
2986
  }),
2894
2987
  onBeforeTransformChange: a,
2895
2988
  onTransformChange: h,
@@ -2898,122 +2991,124 @@ const H = (r) => () => r, gt = H(0), le = () => {
2898
2991
  mouseDownEventVerifier: c,
2899
2992
  mouseUpEventVerifier: g,
2900
2993
  mouseWheelEventVerifier: f,
2901
- scaleWheelFinishTimeout: ((rt = r == null ? void 0 : r.scale) == null ? void 0 : rt.wheelFinishTimeout) ?? 500,
2902
- onResizeTransformStarted: ((ot = r == null ? void 0 : r.events) == null ? void 0 : ot.onResizeTransformStarted) ?? (() => {
2994
+ scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
2995
+ onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
2903
2996
  }),
2904
- onResizeTransformFinished: ((st = r == null ? void 0 : r.events) == null ? void 0 : st.onResizeTransformFinished) ?? (() => {
2997
+ onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
2905
2998
  })
2906
2999
  };
2907
- }, ve = (r, t) => {
2908
- const e = document.createElementNS(
3000
+ }, xt = (r, e) => {
3001
+ const t = document.createElementNS(
2909
3002
  "http://www.w3.org/2000/svg",
2910
3003
  "circle"
2911
3004
  );
2912
- return e.setAttribute("cx", "0"), e.setAttribute("cy", "0"), e.setAttribute("r", `${r}`), e.setAttribute("fill", `${t}`), e;
2913
- }, Ee = (r) => r instanceof SVGElement ? r : ve(
3005
+ return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
3006
+ }, St = (r) => r instanceof SVGElement ? r : xt(
2914
3007
  (r == null ? void 0 : r.radius) ?? 1.5,
2915
3008
  (r == null ? void 0 : r.color) ?? "#d8d8d8"
2916
- ), Ae = (r) => {
2917
- const t = r.tileDimensions, e = (t == null ? void 0 : t.width) ?? 25, s = (t == null ? void 0 : t.height) ?? 25, i = Ee(r.renderer ?? {});
3009
+ ), Pt = (r) => {
3010
+ const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, i = St(r.renderer ?? {});
2918
3011
  return {
2919
- tileWidth: e,
2920
- tileHeight: s,
3012
+ tileWidth: t,
3013
+ tileHeight: o,
2921
3014
  renderer: i,
2922
3015
  maxViewportScale: r.maxViewportScale ?? 10
2923
3016
  };
2924
- }, xe = (r, t, e) => {
3017
+ }, bt = (r, e, t) => {
2925
3018
  var c, l, g;
2926
- const s = () => "direct", i = (w) => w, n = (w) => w.button === 0, a = () => {
3019
+ const o = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
2927
3020
  }, h = () => {
2928
3021
  }, d = () => {
2929
3022
  };
2930
3023
  return {
2931
- connectionTypeResolver: r.connectionTypeResolver ?? s,
3024
+ connectionTypeResolver: r.connectionTypeResolver ?? o,
2932
3025
  connectionPreprocessor: r.connectionPreprocessor ?? i,
2933
3026
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
2934
3027
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
2935
3028
  onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
2936
3029
  onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
2937
3030
  onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
2938
- dragPortDirection: r.dragPortDirection ?? e,
2939
- edgeShapeFactory: r.edgeShape !== void 0 ? tt(r.edgeShape) : t
3031
+ dragPortDirection: r.dragPortDirection ?? t,
3032
+ edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
2940
3033
  };
2941
- }, Se = (r, t) => {
3034
+ }, Tt = (r, e) => {
2942
3035
  var c, l, g;
2943
- const e = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
2944
- const f = t.getPortAdjacentEdgeIds(w);
3036
+ const t = (p) => p, o = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
3037
+ const f = e.getPortAdjacentEdgeIds(p);
2945
3038
  return f.length > 0 ? f[f.length - 1] : null;
2946
3039
  }, a = () => {
2947
3040
  }, h = () => {
2948
3041
  }, d = () => {
2949
3042
  };
2950
3043
  return {
2951
- connectionPreprocessor: r.connectionPreprocessor ?? e,
2952
- mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
3044
+ connectionPreprocessor: r.connectionPreprocessor ?? t,
3045
+ mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
2953
3046
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
2954
3047
  draggingEdgeResolver: r.draggingEdgeResolver ?? n,
2955
- draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? tt(r.draggingEdgeShape) : null,
3048
+ draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
2956
3049
  onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
2957
3050
  onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
2958
3051
  onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
2959
3052
  };
2960
- }, Pe = (r) => ({
3053
+ }, Dt = (r) => ({
2961
3054
  nodeVerticalRadius: r.nodeContainingRadius.vertical,
2962
3055
  nodeHorizontalRadius: r.nodeContainingRadius.horizontal
2963
- }), be = (r) => {
2964
- var t, e;
3056
+ }), Nt = (r) => {
3057
+ var e, t;
2965
3058
  return {
2966
- onAfterNodeDetached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterNodeDetached) ?? (() => {
3059
+ onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
2967
3060
  }),
2968
- onBeforeNodeAttached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeNodeAttached) ?? (() => {
3061
+ onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
2969
3062
  })
2970
3063
  };
2971
3064
  };
2972
- class Te extends Error {
3065
+ class Mt extends Error {
2973
3066
  constructor() {
2974
3067
  super(...arguments);
2975
- o(this, "name", "CanvasBuilderError");
3068
+ s(this, "name", "CanvasBuilderError");
2976
3069
  }
2977
3070
  }
2978
- class Me {
2979
- constructor(t) {
2980
- o(this, "used", !1);
2981
- o(this, "canvasDefaults", {});
2982
- o(this, "dragConfig", {});
2983
- o(this, "transformConfig", {});
2984
- o(this, "backgroundConfig", {});
2985
- o(this, "connectablePortsConfig", {});
2986
- o(this, "draggableEdgesConfig", {});
2987
- o(this, "virtualScrollConfig");
2988
- o(this, "hasDraggableNode", !1);
2989
- o(this, "hasTransformableViewport", !1);
2990
- o(this, "hasNodeResizeReactiveEdges", !1);
2991
- o(this, "hasBackground", !1);
2992
- o(this, "hasUserConnectablePorts", !1);
2993
- o(this, "hasUserDraggableEdges", !1);
2994
- o(this, "boxRenderingTrigger", new wt());
2995
- o(this, "graphStore", new yt());
2996
- o(this, "viewportStore", new Bt());
2997
- o(this, "window", window);
2998
- this.element = t;
3071
+ class Ct {
3072
+ constructor(e) {
3073
+ s(this, "used", !1);
3074
+ s(this, "canvasDefaults", {});
3075
+ s(this, "dragConfig", {});
3076
+ s(this, "transformConfig", {});
3077
+ s(this, "backgroundConfig", {});
3078
+ s(this, "connectablePortsConfig", {});
3079
+ s(this, "draggableEdgesConfig", {});
3080
+ s(this, "virtualScrollConfig");
3081
+ s(this, "hasDraggableNode", !1);
3082
+ s(this, "hasTransformableViewport", !1);
3083
+ s(this, "hasNodeResizeReactiveEdges", !1);
3084
+ s(this, "hasBackground", !1);
3085
+ s(this, "hasUserConnectablePorts", !1);
3086
+ s(this, "hasUserDraggableEdges", !1);
3087
+ s(this, "boxRenderingTrigger", new pe());
3088
+ s(this, "graphStore", new fe());
3089
+ s(this, "viewportStore", new Fe());
3090
+ s(this, "graph", new Te(this.graphStore));
3091
+ s(this, "viewport", new De(this.viewportStore));
3092
+ s(this, "window", window);
3093
+ this.element = e;
2999
3094
  }
3000
3095
  /**
3001
3096
  * specifies default values for graph entities
3002
3097
  */
3003
- setDefaults(t) {
3004
- return this.canvasDefaults = t, this;
3098
+ setDefaults(e) {
3099
+ return this.canvasDefaults = e, this;
3005
3100
  }
3006
3101
  /**
3007
3102
  * enables nodes draggable by user
3008
3103
  */
3009
- enableUserDraggableNodes(t) {
3010
- return this.hasDraggableNode = !0, this.dragConfig = t ?? {}, this;
3104
+ enableUserDraggableNodes(e) {
3105
+ return this.hasDraggableNode = !0, this.dragConfig = e ?? {}, this;
3011
3106
  }
3012
3107
  /**
3013
3108
  * enables viewport transformable by user
3014
3109
  */
3015
- enableUserTransformableViewport(t) {
3016
- return this.hasTransformableViewport = !0, this.transformConfig = t ?? {}, this;
3110
+ enableUserTransformableViewport(e) {
3111
+ return this.hasTransformableViewport = !0, this.transformConfig = e ?? {}, this;
3017
3112
  }
3018
3113
  /**
3019
3114
  * enables automatic edges update on node resize
@@ -3025,80 +3120,82 @@ class Me {
3025
3120
  * enables built-in virtual scroll behavior, when only nodes and edges close
3026
3121
  * to viewport are rendered
3027
3122
  */
3028
- enableVirtualScroll(t) {
3029
- return this.virtualScrollConfig = t, this;
3123
+ enableVirtualScroll(e) {
3124
+ return this.virtualScrollConfig = e, this;
3030
3125
  }
3031
3126
  /**
3032
3127
  * enables built-in background rendering
3033
3128
  */
3034
- enableBackground(t) {
3035
- return this.hasBackground = !0, this.backgroundConfig = t ?? {}, this;
3129
+ enableBackground(e) {
3130
+ return this.hasBackground = !0, this.backgroundConfig = e ?? {}, this;
3036
3131
  }
3037
3132
  /**
3038
3133
  * enables edge creation by dragging one port to another
3039
3134
  */
3040
- enableUserConnectablePorts(t) {
3041
- return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = t ?? {}, this;
3135
+ enableUserConnectablePorts(e) {
3136
+ return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = e ?? {}, this;
3042
3137
  }
3043
- enableUserDraggableEdges(t) {
3044
- return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = t ?? {}, this;
3138
+ enableUserDraggableEdges(e) {
3139
+ return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
3045
3140
  }
3046
3141
  /**
3047
3142
  * builds final canvas
3048
3143
  */
3049
3144
  build() {
3050
3145
  if (this.used)
3051
- throw new Te("CanvasBuilder is a single use object");
3146
+ throw new Mt("CanvasBuilder is a single use object");
3052
3147
  this.used = !0;
3053
- const t = new ge(this.element);
3054
- let e = new pt(
3148
+ const e = new pt(this.element);
3149
+ let t = new ue(
3055
3150
  this.graphStore,
3056
3151
  this.viewportStore,
3057
- t.main
3152
+ e.main
3058
3153
  );
3059
- this.virtualScrollConfig !== void 0 && (e = new It(
3060
- e,
3154
+ this.virtualScrollConfig !== void 0 && (t = new Ue(
3155
+ t,
3061
3156
  this.graphStore,
3062
3157
  this.boxRenderingTrigger,
3063
- be(this.virtualScrollConfig)
3064
- ));
3065
- const s = pe(this.canvasDefaults), i = new ft(
3158
+ Nt(this.virtualScrollConfig)
3159
+ )), t = new Ie(t, this.graphStore);
3160
+ const o = yt(this.canvasDefaults), i = new we(
3161
+ this.graph,
3162
+ this.viewport,
3066
3163
  this.graphStore,
3067
3164
  this.viewportStore,
3068
- e,
3069
- s
3165
+ t,
3166
+ o
3070
3167
  );
3071
3168
  if (this.hasBackground && Q.configure(
3072
3169
  i,
3073
- Ae(this.backgroundConfig),
3074
- t.background
3170
+ Pt(this.backgroundConfig),
3171
+ e.background
3075
3172
  ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
3076
3173
  i,
3077
- t.main,
3174
+ e.main,
3078
3175
  this.window,
3079
- we(this.dragConfig)
3176
+ mt(this.dragConfig)
3080
3177
  ), this.hasUserConnectablePorts) {
3081
- const a = xe(
3178
+ const a = bt(
3082
3179
  this.connectablePortsConfig,
3083
- s.edges.shapeFactory,
3084
- s.ports.direction
3180
+ o.edges.shapeFactory,
3181
+ o.ports.direction
3085
3182
  );
3086
3183
  _.configure(
3087
3184
  i,
3088
- t.overlayConnectablePorts,
3185
+ e.overlayConnectablePorts,
3089
3186
  this.viewportStore,
3090
3187
  this.window,
3091
3188
  a
3092
3189
  );
3093
3190
  }
3094
3191
  if (this.hasUserDraggableEdges) {
3095
- const a = Se(
3192
+ const a = Tt(
3096
3193
  this.draggableEdgesConfig,
3097
3194
  i.graph
3098
3195
  );
3099
3196
  q.configure(
3100
3197
  i,
3101
- t.overlayDraggableEdges,
3198
+ e.overlayDraggableEdges,
3102
3199
  this.viewportStore,
3103
3200
  this.window,
3104
3201
  a
@@ -3106,33 +3203,33 @@ class Me {
3106
3203
  }
3107
3204
  this.virtualScrollConfig !== void 0 ? J.configure(
3108
3205
  i,
3109
- t.main,
3206
+ e.main,
3110
3207
  this.window,
3111
- ut(this.transformConfig),
3208
+ le(this.transformConfig),
3112
3209
  this.boxRenderingTrigger,
3113
- Pe(this.virtualScrollConfig)
3114
- ) : this.hasTransformableViewport && k.configure(
3210
+ Dt(this.virtualScrollConfig)
3211
+ ) : this.hasTransformableViewport && z.configure(
3115
3212
  i,
3116
- t.main,
3213
+ e.main,
3117
3214
  this.window,
3118
- ut(this.transformConfig)
3215
+ le(this.transformConfig)
3119
3216
  );
3120
3217
  const n = () => {
3121
- t.destroy(), i.onBeforeDestroy.unsubscribe(n);
3218
+ e.destroy(), i.onBeforeDestroy.unsubscribe(n);
3122
3219
  };
3123
3220
  return i.onBeforeDestroy.subscribe(n), i;
3124
3221
  }
3125
3222
  }
3126
3223
  export {
3127
- _t as BezierEdgeShape,
3128
- Me as CanvasBuilder,
3129
- Te as CanvasBuilderError,
3224
+ tt as BezierEdgeShape,
3225
+ Ct as CanvasBuilder,
3226
+ Mt as CanvasBuilderError,
3130
3227
  S as CanvasError,
3131
- bt as DirectEdgeShape,
3132
- qt as HorizontalEdgeShape,
3133
- se as InteractiveEdgeError,
3134
- Tt as InteractiveEdgeShape,
3135
- Ne as MidpointEdgeShape,
3136
- te as StraightEdgeShape,
3137
- ee as VerticalEdgeShape
3228
+ Pe as DirectEdgeShape,
3229
+ rt as HorizontalEdgeShape,
3230
+ at as InteractiveEdgeError,
3231
+ be as InteractiveEdgeShape,
3232
+ Lt as MidpointEdgeShape,
3233
+ ot as StraightEdgeShape,
3234
+ st as VerticalEdgeShape
3138
3235
  };