@html-graph/html-graph 2.2.2 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html-graph.d.ts +100 -11
  2. package/dist/html-graph.js +1157 -1108
  3. package/dist/html-graph.umd.cjs +1 -1
  4. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,12 +1,50 @@
1
- var tt = Object.defineProperty;
2
- var et = (e, t, o) => t in e ? tt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
3
- var i = (e, t, o) => et(e, typeof t != "symbol" ? t + "" : t, o);
4
- class ot {
5
- constructor(t) {
6
- this.graphStore = t;
7
- }
8
- getNode(t) {
9
- const o = this.graphStore.getNode(t);
1
+ var oe = Object.defineProperty;
2
+ var re = (t, e, o) => e in t ? oe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
3
+ var i = (t, e, o) => re(t, typeof e != "symbol" ? e + "" : e, o);
4
+ class ie {
5
+ constructor(e) {
6
+ i(this, "onAfterNodeAdded");
7
+ /**
8
+ * @deprecated
9
+ * use onAfterNodeUpdated instead
10
+ */
11
+ i(this, "onAfterNodeCoordinatesUpdated");
12
+ i(this, "onAfterNodeUpdated");
13
+ i(this, "onAfterNodePriorityUpdated");
14
+ i(this, "onBeforeNodeRemoved");
15
+ i(this, "onAfterPortMarked");
16
+ /**
17
+ * @deprecated
18
+ * use onAfterPortMarked instead
19
+ */
20
+ i(this, "onAfterPortAdded");
21
+ i(this, "onAfterPortUpdated");
22
+ /**
23
+ * @deprecated
24
+ * use onAfterPortUpdated instead
25
+ */
26
+ i(this, "onAfterPortDirectionUpdated");
27
+ i(this, "onBeforePortUnmarked");
28
+ /**
29
+ * @deprecated
30
+ * use onBeforePortUnmarked instead
31
+ */
32
+ i(this, "onBeforePortRemoved");
33
+ i(this, "onAfterEdgeAdded");
34
+ i(this, "onAfterEdgeShapeUpdated");
35
+ i(this, "onAfterEdgeUpdated");
36
+ /**
37
+ * @deprecated
38
+ * use onAfterEdgeUpdated instead
39
+ */
40
+ i(this, "onAfterEdgeAdjacentPortsUpdated");
41
+ i(this, "onAfterEdgePriorityUpdated");
42
+ i(this, "onBeforeEdgeRemoved");
43
+ i(this, "onBeforeClear");
44
+ this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodeCoordinatesUpdated = this.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortAdded = this.onAfterPortMarked, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onAfterPortDirectionUpdated = this.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onBeforePortRemoved = this.onBeforePortUnmarked, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgeAdjacentPortsUpdated = this.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
45
+ }
46
+ getNode(e) {
47
+ const o = this.graphStore.getNode(e);
10
48
  return o === void 0 ? null : {
11
49
  element: o.element,
12
50
  x: o.x,
@@ -18,8 +56,8 @@ class ot {
18
56
  getAllNodeIds() {
19
57
  return this.graphStore.getAllNodeIds();
20
58
  }
21
- getPort(t) {
22
- const o = this.graphStore.getPort(t);
59
+ getPort(e) {
60
+ const o = this.graphStore.getPort(e);
23
61
  return o === void 0 ? null : {
24
62
  element: o.element,
25
63
  direction: o.direction,
@@ -29,52 +67,54 @@ class ot {
29
67
  getAllPortIds() {
30
68
  return this.graphStore.getAllPortIds();
31
69
  }
32
- getNodePortIds(t) {
33
- return this.graphStore.getNodePortIds(t) ?? null;
70
+ getNodePortIds(e) {
71
+ return this.graphStore.getNodePortIds(e) ?? null;
34
72
  }
35
73
  /**
36
74
  * @deprecated
37
75
  * use graph.getPort()?.nodeId ?? null instead
38
76
  */
39
- getPortNodeId(t) {
77
+ getPortNodeId(e) {
40
78
  var o;
41
- return ((o = this.graphStore.getPort(t)) == null ? void 0 : o.nodeId) ?? null;
79
+ return ((o = this.graphStore.getPort(e)) == null ? void 0 : o.nodeId) ?? null;
42
80
  }
43
81
  getAllEdgeIds() {
44
82
  return this.graphStore.getAllEdgeIds();
45
83
  }
46
- getEdge(t) {
47
- const o = this.graphStore.getEdge(t);
84
+ getEdge(e) {
85
+ const o = this.graphStore.getEdge(e);
48
86
  return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
49
87
  }
50
- getPortIncomingEdgeIds(t) {
51
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
88
+ getPortIncomingEdgeIds(e) {
89
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
52
90
  }
53
- getPortOutcomingEdgeIds(t) {
54
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(t);
91
+ getPortOutcomingEdgeIds(e) {
92
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(e);
55
93
  }
56
- getPortCycleEdgeIds(t) {
57
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
94
+ getPortCycleEdgeIds(e) {
95
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
58
96
  }
59
- getPortAdjacentEdgeIds(t) {
60
- return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
97
+ getPortAdjacentEdgeIds(e) {
98
+ return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
61
99
  }
62
- getNodeIncomingEdgeIds(t) {
63
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
100
+ getNodeIncomingEdgeIds(e) {
101
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
64
102
  }
65
- getNodeOutcomingEdgeIds(t) {
66
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(t);
103
+ getNodeOutcomingEdgeIds(e) {
104
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(e);
67
105
  }
68
- getNodeCycleEdgeIds(t) {
69
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
106
+ getNodeCycleEdgeIds(e) {
107
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
70
108
  }
71
- getNodeAdjacentEdgeIds(t) {
72
- return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
109
+ getNodeAdjacentEdgeIds(e) {
110
+ return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
73
111
  }
74
112
  }
75
- class rt {
76
- constructor(t) {
77
- this.transformer = t;
113
+ class se {
114
+ constructor(e) {
115
+ i(this, "onBeforeUpdated");
116
+ i(this, "onAfterUpdated");
117
+ this.transformer = e, this.onBeforeUpdated = this.transformer.onBeforeUpdated, this.onAfterUpdated = this.transformer.onAfterUpdated;
78
118
  }
79
119
  getViewportMatrix() {
80
120
  return { ...this.transformer.getViewportMatrix() };
@@ -83,120 +123,165 @@ class rt {
83
123
  return { ...this.transformer.getContentMatrix() };
84
124
  }
85
125
  }
86
- class it {
87
- constructor(t, o, r) {
126
+ class ne {
127
+ constructor(e, o, r) {
88
128
  i(this, "viewport");
89
129
  i(this, "graph");
90
- this.graphStore = t, this.viewportStore = o, this.htmlView = r, this.graph = new ot(this.graphStore), this.viewport = new rt(this.viewportStore);
130
+ i(this, "onAfterNodeAdded", (e) => {
131
+ this.htmlView.attachNode(e);
132
+ });
133
+ i(this, "onAfterNodeUpdated", (e) => {
134
+ this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((r) => {
135
+ this.htmlView.renderEdge(r);
136
+ });
137
+ });
138
+ i(this, "onAfterNodePriorityUpdated", (e) => {
139
+ this.htmlView.updateNodePriority(e);
140
+ });
141
+ i(this, "onBeforeNodeRemoved", (e) => {
142
+ this.graphStore.getNodePortIds(e).forEach((o) => {
143
+ this.unmarkPort(o);
144
+ }), this.htmlView.detachNode(e);
145
+ });
146
+ i(this, "onAfterPortUpdated", (e) => {
147
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((r) => {
148
+ this.htmlView.renderEdge(r);
149
+ });
150
+ });
151
+ i(this, "onBeforePortUnmarked", (e) => {
152
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
153
+ this.removeEdge(o);
154
+ });
155
+ });
156
+ i(this, "onAfterEdgeAdded", (e) => {
157
+ this.htmlView.attachEdge(e);
158
+ });
159
+ i(this, "onAfterEdgeShapeUpdated", (e) => {
160
+ this.htmlView.updateEdgeShape(e);
161
+ });
162
+ i(this, "onAfterEdgeUpdated", (e) => {
163
+ this.htmlView.renderEdge(e);
164
+ });
165
+ i(this, "onAfterEdgePriorityUpdated", (e) => {
166
+ this.htmlView.updateEdgePriority(e);
167
+ });
168
+ i(this, "onBeforeEdgeRemoved", (e) => {
169
+ this.htmlView.detachEdge(e);
170
+ });
171
+ i(this, "onBeforeClear", () => {
172
+ this.htmlView.clear();
173
+ });
174
+ this.graphStore = e, this.viewportStore = o, this.htmlView = r, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
175
+ this.onAfterNodePriorityUpdated
176
+ ), 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(
177
+ this.onAfterEdgeShapeUpdated
178
+ ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
179
+ this.onAfterEdgePriorityUpdated
180
+ ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), this.graph = new ie(this.graphStore), this.viewport = new se(this.viewportStore);
91
181
  }
92
- attach(t) {
93
- this.htmlView.attach(t);
182
+ attach(e) {
183
+ this.htmlView.attach(e);
94
184
  }
95
185
  detach() {
96
186
  this.htmlView.detach();
97
187
  }
98
- addNode(t) {
99
- this.graphStore.addNode(t), this.htmlView.attachNode(t.id);
188
+ addNode(e) {
189
+ this.graphStore.addNode(e);
100
190
  }
101
- updateNode(t, o) {
102
- const r = this.graphStore.getNode(t);
103
- r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, this.htmlView.updateNodeCoordinates(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((h) => {
104
- this.htmlView.renderEdge(h);
105
- }), o.priority !== void 0 && (r.priority = o.priority, this.htmlView.updateNodePriority(t));
191
+ updateNode(e, o) {
192
+ this.graphStore.updateNode(e, o);
106
193
  }
107
- removeNode(t) {
108
- this.graphStore.getNodePortIds(t).forEach((o) => {
109
- this.unmarkPort(o);
110
- }), this.graphStore.removeNode(t), this.htmlView.detachNode(t);
194
+ removeNode(e) {
195
+ this.graphStore.removeNode(e);
111
196
  }
112
- markPort(t) {
113
- this.graphStore.addPort(t);
197
+ markPort(e) {
198
+ this.graphStore.addPort(e);
114
199
  }
115
- updatePort(t, o) {
116
- const r = this.graphStore.getPort(t);
117
- r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((h) => {
118
- this.htmlView.renderEdge(h);
119
- });
200
+ updatePort(e, o) {
201
+ this.graphStore.updatePort(e, o);
120
202
  }
121
- unmarkPort(t) {
122
- this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
123
- this.removeEdge(o);
124
- }), this.graphStore.removePort(t);
203
+ unmarkPort(e) {
204
+ this.graphStore.removePort(e);
125
205
  }
126
- addEdge(t) {
127
- this.graphStore.addEdge(t), this.htmlView.attachEdge(t.id);
206
+ addEdge(e) {
207
+ this.graphStore.addEdge(e);
128
208
  }
129
- updateEdge(t, o) {
130
- const r = this.graphStore.getEdge(t);
131
- o.shape !== void 0 && (r.shape = o.shape, this.htmlView.updateEdgeShape(t)), o.from !== void 0 && this.graphStore.updateEdgeFrom(t, o.from), o.to !== void 0 && this.graphStore.updateEdgeTo(t, o.to), this.htmlView.renderEdge(t), o.priority !== void 0 && (r.priority = o.priority, this.htmlView.updateEdgePriority(t));
209
+ updateEdge(e, o) {
210
+ this.graphStore.updateEdge(e, o);
132
211
  }
133
- removeEdge(t) {
134
- this.graphStore.removeEdge(t), this.htmlView.detachEdge(t);
212
+ removeEdge(e) {
213
+ this.graphStore.removeEdge(e);
135
214
  }
136
- patchViewportMatrix(t) {
137
- this.viewportStore.patchViewportMatrix(t);
215
+ patchViewportMatrix(e) {
216
+ this.viewportStore.patchViewportMatrix(e);
138
217
  }
139
- patchContentMatrix(t) {
140
- this.viewportStore.patchContentMatrix(t);
218
+ patchContentMatrix(e) {
219
+ this.viewportStore.patchContentMatrix(e);
141
220
  }
142
221
  clear() {
143
- this.htmlView.clear(), this.graphStore.clear();
222
+ this.graphStore.clear();
144
223
  }
145
224
  destroy() {
146
- this.clear(), this.htmlView.destroy();
225
+ this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
226
+ this.onAfterNodePriorityUpdated
227
+ ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
228
+ this.onAfterEdgeShapeUpdated
229
+ ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
230
+ this.onAfterEdgePriorityUpdated
231
+ ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.clear(), this.htmlView.destroy();
147
232
  }
148
233
  }
149
- const C = (e, t, o) => {
150
- const { x: r, y: n, width: h, height: s } = e.getBoundingClientRect();
151
- return t >= r && t <= r + h && o >= n && o <= n + s;
152
- }, $ = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, W = (e, t) => {
153
- t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
154
- }, st = (e) => {
155
- var g, y, x, v, A, S;
156
- const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
157
- }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
158
- }), n = (e == null ? void 0 : e.moveOnTop) === !1, h = (v = e == null ? void 0 : e.mouse) == null ? void 0 : v.dragCursor, s = h !== void 0 ? h : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, a = (S = e == null ? void 0 : e.mouse) == null ? void 0 : S.mouseUpEventVerifier;
234
+ const U = (t, e, o) => {
235
+ const { x: r, y: n, width: h, height: s } = t.getBoundingClientRect();
236
+ return e >= r && e <= r + h && o >= n && o <= n + s;
237
+ }, $ = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, R = (t, e) => {
238
+ e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
239
+ }, he = (t) => {
240
+ var g, f, x, v, S, p;
241
+ const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
242
+ }), o = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), r = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
243
+ }), n = (t == null ? void 0 : t.moveOnTop) === !1, h = (v = t == null ? void 0 : t.mouse) == null ? void 0 : v.dragCursor, s = h !== void 0 ? h : "grab", d = (S = t == null ? void 0 : t.mouse) == null ? void 0 : S.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, a = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseUpEventVerifier;
159
244
  return {
160
245
  freezePriority: n,
161
246
  dragCursor: s,
162
- mouseDownEventVerifier: d,
163
- mouseUpEventVerifier: a !== void 0 ? a : (T) => T.button === 0,
164
- onNodeDrag: t,
247
+ mouseDownEventVerifier: c,
248
+ mouseUpEventVerifier: a !== void 0 ? a : (N) => N.button === 0,
249
+ onNodeDrag: e,
165
250
  onBeforeNodeDrag: o,
166
251
  onNodeDragFinished: r
167
252
  };
168
253
  };
169
- class nt {
170
- constructor(t, o) {
254
+ class de {
255
+ constructor(e, o) {
171
256
  i(this, "graph");
172
257
  i(this, "viewport");
173
258
  i(this, "maxNodePriority", 0);
174
259
  i(this, "nodes", /* @__PURE__ */ new Map());
175
260
  i(this, "grabbedNodeId", null);
176
261
  i(this, "element", null);
177
- i(this, "onWindowMouseMove", (t) => {
178
- if (this.element !== null && (!C(this.element, t.clientX, t.clientY) || !$(this.window, t.clientX, t.clientY))) {
262
+ i(this, "onWindowMouseMove", (e) => {
263
+ if (this.element !== null && (!U(this.element, e.clientX, e.clientY) || !$(this.window, e.clientX, e.clientY))) {
179
264
  this.cancelMouseDrag();
180
265
  return;
181
266
  }
182
- this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
267
+ this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
183
268
  });
184
- i(this, "onWindowMouseUp", (t) => {
185
- this.options.mouseUpEventVerifier(t) && this.cancelMouseDrag();
269
+ i(this, "onWindowMouseUp", (e) => {
270
+ this.options.mouseUpEventVerifier(e) && this.cancelMouseDrag();
186
271
  });
187
- i(this, "onWindowTouchMove", (t) => {
188
- if (t.touches.length !== 1)
272
+ i(this, "onWindowTouchMove", (e) => {
273
+ if (e.touches.length !== 1)
189
274
  return;
190
- const o = t.touches[0];
191
- if (this.element !== null && (!C(this.element, o.clientX, o.clientY) || !$(this.window, o.clientX, o.clientY))) {
275
+ const o = e.touches[0];
276
+ if (this.element !== null && (!U(this.element, o.clientX, o.clientY) || !$(this.window, o.clientX, o.clientY))) {
192
277
  this.cancelTouchDrag();
193
278
  return;
194
279
  }
195
280
  if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
196
281
  const r = o.clientX - this.previousTouchCoords.x, n = o.clientY - this.previousTouchCoords.y;
197
282
  this.dragNode(this.grabbedNodeId, r, n), this.previousTouchCoords = {
198
- x: t.touches[0].clientX,
199
- y: t.touches[0].clientY
283
+ x: e.touches[0].clientX,
284
+ y: e.touches[0].clientY
200
285
  };
201
286
  }
202
287
  });
@@ -206,26 +291,26 @@ class nt {
206
291
  i(this, "previousTouchCoords", null);
207
292
  i(this, "window", window);
208
293
  i(this, "options");
209
- this.canvas = t, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = st(o ?? {});
294
+ this.canvas = e, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = he(o ?? {});
210
295
  }
211
- attach(t) {
212
- this.detach(), this.element = t, this.canvas.attach(this.element);
296
+ attach(e) {
297
+ this.detach(), this.element = e, this.canvas.attach(this.element);
213
298
  }
214
299
  detach() {
215
300
  this.canvas.detach(), this.element !== null && (this.element = null);
216
301
  }
217
- addNode(t) {
218
- this.canvas.addNode(t), this.updateMaxNodePriority(t.id);
302
+ addNode(e) {
303
+ this.canvas.addNode(e), this.updateMaxNodePriority(e.id);
219
304
  const o = (n) => {
220
305
  if (this.element === null || !this.options.mouseDownEventVerifier(n))
221
306
  return;
222
- const h = this.graph.getNode(t.id);
307
+ const h = this.graph.getNode(e.id);
223
308
  this.options.onBeforeNodeDrag({
224
- nodeId: t.id,
225
- element: t.element,
309
+ nodeId: e.id,
310
+ element: e.element,
226
311
  x: h.x,
227
312
  y: h.y
228
- }) && (n.stopImmediatePropagation(), this.grabbedNodeId = t.id, W(this.element, this.options.dragCursor), this.moveNodeOnTop(t.id), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
313
+ }) && (n.stopImmediatePropagation(), this.grabbedNodeId = e.id, R(this.element, this.options.dragCursor), this.moveNodeOnTop(e.id), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
229
314
  }, r = (n) => {
230
315
  if (n.touches.length !== 1)
231
316
  return;
@@ -233,206 +318,206 @@ class nt {
233
318
  x: n.touches[0].clientX,
234
319
  y: n.touches[0].clientY
235
320
  };
236
- const h = this.graph.getNode(t.id);
321
+ const h = this.graph.getNode(e.id);
237
322
  this.options.onBeforeNodeDrag({
238
- nodeId: t.id,
239
- element: t.element,
323
+ nodeId: e.id,
324
+ element: e.element,
240
325
  x: h.x,
241
326
  y: h.y
242
- }) && (this.grabbedNodeId = t.id, this.moveNodeOnTop(t.id), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
327
+ }) && (this.grabbedNodeId = e.id, this.moveNodeOnTop(e.id), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
243
328
  };
244
- this.nodes.set(t.id, {
245
- element: t.element,
329
+ this.nodes.set(e.id, {
330
+ element: e.element,
246
331
  onMouseDown: o,
247
332
  onTouchStart: r
248
- }), t.element.addEventListener("mousedown", o), t.element.addEventListener("touchstart", r);
333
+ }), e.element.addEventListener("mousedown", o), e.element.addEventListener("touchstart", r);
249
334
  }
250
- updateNode(t, o) {
251
- this.canvas.updateNode(t, o), this.updateMaxNodePriority(t);
335
+ updateNode(e, o) {
336
+ this.canvas.updateNode(e, o), this.updateMaxNodePriority(e);
252
337
  }
253
- removeNode(t) {
254
- const o = this.nodes.get(t);
255
- o !== void 0 && (o.element.removeEventListener("mousedown", o.onMouseDown), o.element.removeEventListener("touchstart", o.onTouchStart)), this.nodes.delete(t), this.canvas.removeNode(t);
338
+ removeNode(e) {
339
+ const o = this.nodes.get(e);
340
+ o !== void 0 && (o.element.removeEventListener("mousedown", o.onMouseDown), o.element.removeEventListener("touchstart", o.onTouchStart)), this.nodes.delete(e), this.canvas.removeNode(e);
256
341
  }
257
- markPort(t) {
258
- this.canvas.markPort(t);
342
+ markPort(e) {
343
+ this.canvas.markPort(e);
259
344
  }
260
- updatePort(t, o) {
261
- this.canvas.updatePort(t, o);
345
+ updatePort(e, o) {
346
+ this.canvas.updatePort(e, o);
262
347
  }
263
- unmarkPort(t) {
264
- this.canvas.unmarkPort(t);
348
+ unmarkPort(e) {
349
+ this.canvas.unmarkPort(e);
265
350
  }
266
- addEdge(t) {
267
- this.canvas.addEdge(t);
351
+ addEdge(e) {
352
+ this.canvas.addEdge(e);
268
353
  }
269
- updateEdge(t, o) {
270
- this.canvas.updateEdge(t, o);
354
+ updateEdge(e, o) {
355
+ this.canvas.updateEdge(e, o);
271
356
  }
272
- removeEdge(t) {
273
- this.canvas.removeEdge(t);
357
+ removeEdge(e) {
358
+ this.canvas.removeEdge(e);
274
359
  }
275
- patchViewportMatrix(t) {
276
- this.canvas.patchViewportMatrix(t);
360
+ patchViewportMatrix(e) {
361
+ this.canvas.patchViewportMatrix(e);
277
362
  }
278
- patchContentMatrix(t) {
279
- this.canvas.patchContentMatrix(t);
363
+ patchContentMatrix(e) {
364
+ this.canvas.patchContentMatrix(e);
280
365
  }
281
366
  clear() {
282
- this.canvas.clear(), this.nodes.forEach((t) => {
283
- t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
367
+ this.canvas.clear(), this.nodes.forEach((e) => {
368
+ e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart);
284
369
  }), this.nodes.clear(), this.maxNodePriority = 0;
285
370
  }
286
371
  destroy() {
287
372
  this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
288
373
  }
289
- dragNode(t, o, r) {
290
- const n = this.graph.getNode(t);
374
+ dragNode(e, o, r) {
375
+ const n = this.graph.getNode(e);
291
376
  if (n === null)
292
377
  return;
293
- const h = this.canvas.viewport.getContentMatrix(), s = h.scale * n.x + h.x, c = h.scale * n.y + h.y, d = s + o, a = c + r, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * d + l.x, y = l.scale * a + l.y;
294
- this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
295
- nodeId: t,
378
+ const h = this.canvas.viewport.getContentMatrix(), s = h.scale * n.x + h.x, d = h.scale * n.y + h.y, c = s + o, a = d + r, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * c + l.x, f = l.scale * a + l.y;
379
+ this.canvas.updateNode(e, { x: g, y: f }), this.options.onNodeDrag({
380
+ nodeId: e,
296
381
  element: n.element,
297
382
  x: g,
298
- y
383
+ y: f
299
384
  });
300
385
  }
301
- updateMaxNodePriority(t) {
302
- const o = this.graph.getNode(t).priority;
386
+ updateMaxNodePriority(e) {
387
+ const o = this.graph.getNode(e).priority;
303
388
  this.maxNodePriority = Math.max(this.maxNodePriority, o);
304
389
  }
305
- moveNodeOnTop(t) {
390
+ moveNodeOnTop(e) {
306
391
  if (this.options.freezePriority)
307
392
  return;
308
- this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
393
+ this.maxNodePriority += 2, this.updateNode(e, { priority: this.maxNodePriority });
309
394
  const o = this.maxNodePriority - 1;
310
- this.graph.getNodeAdjacentEdgeIds(t).forEach((n) => {
395
+ this.graph.getNodeAdjacentEdgeIds(e).forEach((n) => {
311
396
  this.updateEdge(n, { priority: o });
312
397
  });
313
398
  }
314
399
  cancelMouseDrag() {
315
- const t = this.graph.getNode(this.grabbedNodeId);
316
- t !== null && this.options.onNodeDragFinished({
400
+ const e = this.graph.getNode(this.grabbedNodeId);
401
+ e !== null && this.options.onNodeDragFinished({
317
402
  nodeId: this.grabbedNodeId,
318
- element: t.element,
319
- x: t.x,
320
- y: t.y
321
- }), this.grabbedNodeId = null, this.element !== null && W(this.element, null), this.removeMouseDragListeners();
403
+ element: e.element,
404
+ x: e.x,
405
+ y: e.y
406
+ }), this.grabbedNodeId = null, this.element !== null && R(this.element, null), this.removeMouseDragListeners();
322
407
  }
323
408
  removeMouseDragListeners() {
324
409
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
325
410
  }
326
411
  cancelTouchDrag() {
327
412
  this.previousTouchCoords = null;
328
- const t = this.graph.getNode(this.grabbedNodeId);
329
- t !== null && this.options.onNodeDragFinished({
413
+ const e = this.graph.getNode(this.grabbedNodeId);
414
+ e !== null && this.options.onNodeDragFinished({
330
415
  nodeId: this.grabbedNodeId,
331
- element: t.element,
332
- x: t.x,
333
- y: t.y
416
+ element: e.element,
417
+ x: e.x,
418
+ y: e.y
334
419
  }), this.grabbedNodeId = null, this.removeTouchDragListeners();
335
420
  }
336
421
  removeTouchDragListeners() {
337
422
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
338
423
  }
339
424
  }
340
- const ht = (e) => {
341
- const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, n = e.maxY !== null ? e.maxY : 1 / 0;
425
+ const ce = (t) => {
426
+ const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, r = t.minY !== null ? t.minY : -1 / 0, n = t.maxY !== null ? t.maxY : 1 / 0;
342
427
  return (h) => {
343
- let s = h.nextTransform.x, c = h.nextTransform.y;
344
- s < t && s < h.prevTransform.x && (s = Math.min(h.prevTransform.x, t));
345
- const d = h.canvasWidth * h.prevTransform.scale, a = o - d;
346
- s > a && s > h.prevTransform.x && (s = Math.max(h.prevTransform.x, a)), c < r && c < h.prevTransform.y && (c = Math.min(h.prevTransform.y, r));
428
+ let s = h.nextTransform.x, d = h.nextTransform.y;
429
+ s < e && s < h.prevTransform.x && (s = Math.min(h.prevTransform.x, e));
430
+ const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
431
+ s > a && s > h.prevTransform.x && (s = Math.max(h.prevTransform.x, a)), d < r && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, r));
347
432
  const l = h.canvasHeight * h.prevTransform.scale, g = n - l;
348
- return c > g && c > h.prevTransform.y && (c = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: c };
433
+ return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: d };
349
434
  };
350
- }, ct = (e) => {
351
- const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, n = o !== null ? 1 / o : 1 / 0;
435
+ }, ae = (t) => {
436
+ const e = t.maxContentScale, o = t.minContentScale, r = e !== null ? 1 / e : 0, n = o !== null ? 1 / o : 1 / 0;
352
437
  return (h) => {
353
- const s = h.prevTransform, c = h.nextTransform;
354
- let d = c.scale, a = c.x, l = c.y;
355
- if (c.scale > n && c.scale > s.scale) {
356
- d = Math.max(s.scale, n), a = s.x, l = s.y;
357
- const g = (d - s.scale) / (c.scale - s.scale);
358
- a = s.x + (c.x - s.x) * g, l = s.y + (c.y - s.y) * g;
438
+ const s = h.prevTransform, d = h.nextTransform;
439
+ let c = d.scale, a = d.x, l = d.y;
440
+ if (d.scale > n && d.scale > s.scale) {
441
+ c = Math.max(s.scale, n), a = s.x, l = s.y;
442
+ const g = (c - s.scale) / (d.scale - s.scale);
443
+ a = s.x + (d.x - s.x) * g, l = s.y + (d.y - s.y) * g;
359
444
  }
360
- if (c.scale < r && c.scale < s.scale) {
361
- d = Math.min(s.scale, r), a = s.x, l = s.y;
362
- const g = (d - s.scale) / (c.scale - s.scale);
363
- a = s.x + (c.x - s.x) * g, l = s.y + (c.y - s.y) * g;
445
+ if (d.scale < r && d.scale < s.scale) {
446
+ c = Math.min(s.scale, r), a = s.x, l = s.y;
447
+ const g = (c - s.scale) / (d.scale - s.scale);
448
+ a = s.x + (d.x - s.x) * g, l = s.y + (d.y - s.y) * g;
364
449
  }
365
450
  return {
366
- scale: d,
451
+ scale: c,
367
452
  x: a,
368
453
  y: l
369
454
  };
370
455
  };
371
- }, dt = (e) => (t) => e.reduce(
456
+ }, le = (t) => (e) => t.reduce(
372
457
  (o, r) => r({
373
- prevTransform: t.prevTransform,
458
+ prevTransform: e.prevTransform,
374
459
  nextTransform: o,
375
- canvasWidth: t.canvasWidth,
376
- canvasHeight: t.canvasHeight
460
+ canvasWidth: e.canvasWidth,
461
+ canvasHeight: e.canvasHeight
377
462
  }),
378
- t.nextTransform
379
- ), _ = (e) => {
380
- if (typeof e == "function")
381
- return e;
382
- switch (e.type) {
463
+ e.nextTransform
464
+ ), Q = (t) => {
465
+ if (typeof t == "function")
466
+ return t;
467
+ switch (t.type) {
383
468
  case "scale-limit":
384
- return ct({
385
- minContentScale: e.minContentScale ?? 0,
386
- maxContentScale: e.maxContentScale ?? 1 / 0
469
+ return ae({
470
+ minContentScale: t.minContentScale ?? 0,
471
+ maxContentScale: t.maxContentScale ?? 1 / 0
387
472
  });
388
473
  case "shift-limit":
389
- return ht({
390
- minX: e.minX ?? -1 / 0,
391
- maxX: e.maxX ?? 1 / 0,
392
- minY: e.minY ?? -1 / 0,
393
- maxY: e.maxY ?? 1 / 0
474
+ return ce({
475
+ minX: t.minX ?? -1 / 0,
476
+ maxX: t.maxX ?? 1 / 0,
477
+ minY: t.minY ?? -1 / 0,
478
+ maxY: t.maxY ?? 1 / 0
394
479
  });
395
480
  }
396
- }, at = (e) => {
397
- var v, A, S, T, z, L, D, P, U, j, G, K;
398
- const t = (v = e == null ? void 0 : e.scale) == null ? void 0 : v.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
481
+ }, ge = (t) => {
482
+ var v, S, p, N, k, M, V, L, G, _, J, K;
483
+ const e = (v = t == null ? void 0 : t.scale) == null ? void 0 : v.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
399
484
  let n;
400
- r !== void 0 ? Array.isArray(r) ? n = dt(
485
+ r !== void 0 ? Array.isArray(r) ? n = le(
401
486
  r.map(
402
- (V) => _(V)
487
+ (b) => Q(b)
403
488
  )
404
- ) : n = _(r) : n = (V) => V.nextTransform;
405
- const h = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", s = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
406
- }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
407
- }), d = (z = e == null ? void 0 : e.shift) == null ? void 0 : z.mouseDownEventVerifier, a = d !== void 0 ? d : (V) => V.button === 0, l = (L = e == null ? void 0 : e.shift) == null ? void 0 : L.mouseUpEventVerifier, g = l !== void 0 ? l : (V) => V.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
489
+ ) : n = Q(r) : n = (b) => b.nextTransform;
490
+ const h = ((S = t == null ? void 0 : t.shift) == null ? void 0 : S.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
491
+ }), d = ((N = t == null ? void 0 : t.events) == null ? void 0 : N.onTransformChange) ?? (() => {
492
+ }), c = (k = t == null ? void 0 : t.shift) == null ? void 0 : k.mouseDownEventVerifier, a = c !== void 0 ? c : (b) => b.button === 0, l = (M = t == null ? void 0 : t.shift) == null ? void 0 : M.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0, f = (V = t == null ? void 0 : t.scale) == null ? void 0 : V.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
408
493
  return {
409
494
  wheelSensitivity: o,
410
- onTransformStarted: ((P = e == null ? void 0 : e.events) == null ? void 0 : P.onTransformStarted) ?? (() => {
495
+ onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
411
496
  }),
412
- onTransformFinished: ((U = e == null ? void 0 : e.events) == null ? void 0 : U.onTransformFinished) ?? (() => {
497
+ onTransformFinished: ((G = t == null ? void 0 : t.events) == null ? void 0 : G.onTransformFinished) ?? (() => {
413
498
  }),
414
499
  onBeforeTransformChange: s,
415
- onTransformChange: c,
500
+ onTransformChange: d,
416
501
  transformPreprocessor: n,
417
502
  shiftCursor: h,
418
503
  mouseDownEventVerifier: a,
419
504
  mouseUpEventVerifier: g,
420
505
  mouseWheelEventVerifier: x,
421
- scaleWheelFinishTimeout: ((j = e == null ? void 0 : e.scale) == null ? void 0 : j.wheelFinishTimeout) ?? 500,
422
- onResizeTransformStarted: ((G = e == null ? void 0 : e.events) == null ? void 0 : G.onResizeTransformStarted) ?? (() => {
506
+ scaleWheelFinishTimeout: ((_ = t == null ? void 0 : t.scale) == null ? void 0 : _.wheelFinishTimeout) ?? 500,
507
+ onResizeTransformStarted: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformStarted) ?? (() => {
423
508
  }),
424
- onResizeTransformFinished: ((K = e == null ? void 0 : e.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
509
+ onResizeTransformFinished: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
425
510
  })
426
511
  };
427
- }, m = (e) => {
428
- const t = [], o = e.touches.length;
429
- for (let c = 0; c < o; c++)
430
- t.push([e.touches[c].clientX, e.touches[c].clientY]);
431
- const r = t.reduce(
432
- (c, d) => [c[0] + d[0], c[1] + d[1]],
512
+ }, C = (t) => {
513
+ const e = [], o = t.touches.length;
514
+ for (let d = 0; d < o; d++)
515
+ e.push([t.touches[d].clientX, t.touches[d].clientY]);
516
+ const r = e.reduce(
517
+ (d, c) => [d[0] + c[0], d[1] + c[1]],
433
518
  [0, 0]
434
- ), n = [r[0] / o, r[1] / o], s = t.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
435
- (c, d) => c + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
519
+ ), n = [r[0] / o, r[1] / o], s = e.map((d) => [d[0] - n[0], d[1] - n[1]]).reduce(
520
+ (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
436
521
  0
437
522
  );
438
523
  return {
@@ -440,62 +525,62 @@ const ht = (e) => {
440
525
  y: n[1],
441
526
  scale: s / o,
442
527
  touchesCnt: o,
443
- touches: t
528
+ touches: e
444
529
  };
445
- }, lt = (e, t, o) => ({
446
- scale: e.scale,
447
- x: e.x + e.scale * t,
448
- y: e.y + e.scale * o
449
- }), gt = (e, t, o, r) => ({
450
- scale: e.scale * t,
451
- x: e.scale * (1 - t) * o + e.x,
452
- y: e.scale * (1 - t) * r + e.y
530
+ }, ue = (t, e, o) => ({
531
+ scale: t.scale,
532
+ x: t.x + t.scale * e,
533
+ y: t.y + t.scale * o
534
+ }), we = (t, e, o, r) => ({
535
+ scale: t.scale * e,
536
+ x: t.scale * (1 - e) * o + t.x,
537
+ y: t.scale * (1 - e) * r + t.y
453
538
  });
454
- class O {
455
- constructor(t, o) {
539
+ class ee {
540
+ constructor(e, o) {
456
541
  i(this, "graph");
457
542
  i(this, "viewport");
458
543
  i(this, "element", null);
459
544
  i(this, "prevTouches", null);
460
545
  i(this, "window", window);
461
546
  i(this, "wheelFinishTimer", null);
462
- i(this, "onMouseDown", (t) => {
463
- this.element === null || !this.options.mouseDownEventVerifier(t) || (W(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
547
+ i(this, "onMouseDown", (e) => {
548
+ this.element === null || !this.options.mouseDownEventVerifier(e) || (R(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
464
549
  });
465
- i(this, "onWindowMouseMove", (t) => {
466
- if (this.element === null || !C(this.element, t.clientX, t.clientY) || !$(this.window, t.clientX, t.clientY)) {
550
+ i(this, "onWindowMouseMove", (e) => {
551
+ if (this.element === null || !U(this.element, e.clientX, e.clientY) || !$(this.window, e.clientX, e.clientY)) {
467
552
  this.stopMouseDrag();
468
553
  return;
469
554
  }
470
- const o = -t.movementX, r = -t.movementY;
555
+ const o = -e.movementX, r = -e.movementY;
471
556
  this.moveViewport(this.element, o, r);
472
557
  });
473
- i(this, "onWindowMouseUp", (t) => {
474
- this.element === null || !this.options.mouseUpEventVerifier(t) || this.stopMouseDrag();
558
+ i(this, "onWindowMouseUp", (e) => {
559
+ this.element === null || !this.options.mouseUpEventVerifier(e) || this.stopMouseDrag();
475
560
  });
476
- i(this, "onWheelScroll", (t) => {
477
- if (!this.options.mouseWheelEventVerifier(t))
561
+ i(this, "onWheelScroll", (e) => {
562
+ if (!this.options.mouseWheelEventVerifier(e))
478
563
  return;
479
- t.preventDefault();
480
- const { left: o, top: r } = this.element.getBoundingClientRect(), n = t.clientX - o, h = t.clientY - r, c = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
481
- this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(this.element, c, n, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
564
+ e.preventDefault();
565
+ const { left: o, top: r } = this.element.getBoundingClientRect(), n = e.clientX - o, h = e.clientY - r, d = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
566
+ this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(this.element, d, n, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
482
567
  this.options.onTransformFinished(), this.wheelFinishTimer = null;
483
568
  }, this.options.scaleWheelFinishTimeout);
484
569
  });
485
- i(this, "onTouchStart", (t) => {
570
+ i(this, "onTouchStart", (e) => {
486
571
  if (this.prevTouches !== null) {
487
- this.prevTouches = m(t);
572
+ this.prevTouches = C(e);
488
573
  return;
489
574
  }
490
- this.prevTouches = m(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
575
+ this.prevTouches = C(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
491
576
  });
492
- i(this, "onWindowTouchMove", (t) => {
577
+ i(this, "onWindowTouchMove", (e) => {
493
578
  const o = this.element;
494
579
  if (o === null)
495
580
  return;
496
- const r = m(t);
581
+ const r = C(e);
497
582
  if (!r.touches.every(
498
- (h) => C(o, h[0], h[1]) && $(this.window, h[0], h[1])
583
+ (h) => U(o, h[0], h[1]) && $(this.window, h[0], h[1])
499
584
  )) {
500
585
  this.stopTouchDrag();
501
586
  return;
@@ -505,64 +590,64 @@ class O {
505
590
  -(r.x - this.prevTouches.x),
506
591
  -(r.y - this.prevTouches.y)
507
592
  ), r.touchesCnt === 2) {
508
- const { left: h, top: s } = o.getBoundingClientRect(), c = this.prevTouches.x - h, d = this.prevTouches.y - s, l = 1 / (r.scale / this.prevTouches.scale);
509
- this.scaleViewport(o, l, c, d);
593
+ const { left: h, top: s } = o.getBoundingClientRect(), d = this.prevTouches.x - h, c = this.prevTouches.y - s, l = 1 / (r.scale / this.prevTouches.scale);
594
+ this.scaleViewport(o, l, d, c);
510
595
  }
511
596
  this.prevTouches = r;
512
597
  });
513
- i(this, "onWindowTouchFinish", (t) => {
514
- t.touches.length > 0 ? this.prevTouches = m(t) : this.stopTouchDrag();
598
+ i(this, "onWindowTouchFinish", (e) => {
599
+ e.touches.length > 0 ? this.prevTouches = C(e) : this.stopTouchDrag();
515
600
  });
516
601
  i(this, "observer", new ResizeObserver(() => {
517
- const t = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
518
- prevTransform: t,
519
- nextTransform: t,
602
+ const e = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
603
+ prevTransform: e,
604
+ nextTransform: e,
520
605
  canvasWidth: o,
521
606
  canvasHeight: r
522
607
  });
523
608
  this.options.onResizeTransformStarted(), this.canvas.patchViewportMatrix(n), this.options.onResizeTransformFinished();
524
609
  }));
525
610
  i(this, "options");
526
- this.canvas = t, this.options = at(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
611
+ this.canvas = e, this.options = ge(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
527
612
  }
528
- attach(t) {
529
- this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element);
613
+ attach(e) {
614
+ this.detach(), this.element = e, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element);
530
615
  }
531
616
  detach() {
532
617
  this.canvas.detach(), this.element !== null && (this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element = null);
533
618
  }
534
- addNode(t) {
535
- this.canvas.addNode(t);
619
+ addNode(e) {
620
+ this.canvas.addNode(e);
536
621
  }
537
- updateNode(t, o) {
538
- this.canvas.updateNode(t, o);
622
+ updateNode(e, o) {
623
+ this.canvas.updateNode(e, o);
539
624
  }
540
- removeNode(t) {
541
- this.canvas.removeNode(t);
625
+ removeNode(e) {
626
+ this.canvas.removeNode(e);
542
627
  }
543
- markPort(t) {
544
- this.canvas.markPort(t);
628
+ markPort(e) {
629
+ this.canvas.markPort(e);
545
630
  }
546
- updatePort(t, o) {
547
- this.canvas.updatePort(t, o);
631
+ updatePort(e, o) {
632
+ this.canvas.updatePort(e, o);
548
633
  }
549
- unmarkPort(t) {
550
- this.canvas.unmarkPort(t);
634
+ unmarkPort(e) {
635
+ this.canvas.unmarkPort(e);
551
636
  }
552
- addEdge(t) {
553
- this.canvas.addEdge(t);
637
+ addEdge(e) {
638
+ this.canvas.addEdge(e);
554
639
  }
555
- updateEdge(t, o) {
556
- this.canvas.updateEdge(t, o);
640
+ updateEdge(e, o) {
641
+ this.canvas.updateEdge(e, o);
557
642
  }
558
- removeEdge(t) {
559
- this.canvas.removeEdge(t);
643
+ removeEdge(e) {
644
+ this.canvas.removeEdge(e);
560
645
  }
561
- patchViewportMatrix(t) {
562
- this.canvas.patchViewportMatrix(t);
646
+ patchViewportMatrix(e) {
647
+ this.canvas.patchViewportMatrix(e);
563
648
  }
564
- patchContentMatrix(t) {
565
- this.canvas.patchContentMatrix(t);
649
+ patchContentMatrix(e) {
650
+ this.canvas.patchContentMatrix(e);
566
651
  }
567
652
  clear() {
568
653
  this.canvas.clear();
@@ -570,26 +655,26 @@ class O {
570
655
  destroy() {
571
656
  this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
572
657
  }
573
- moveViewport(t, o, r) {
574
- const n = this.viewport.getViewportMatrix(), h = lt(n, o, r), { width: s, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
658
+ moveViewport(e, o, r) {
659
+ const n = this.viewport.getViewportMatrix(), h = ue(n, o, r), { width: s, height: d } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
575
660
  prevTransform: n,
576
661
  nextTransform: h,
577
662
  canvasWidth: s,
578
- canvasHeight: c
663
+ canvasHeight: d
579
664
  });
580
- this.performTransform(d);
665
+ this.performTransform(c);
581
666
  }
582
- scaleViewport(t, o, r, n) {
583
- const h = this.canvas.viewport.getViewportMatrix(), s = gt(h, o, r, n), { width: c, height: d } = t.getBoundingClientRect(), a = this.options.transformPreprocessor({
667
+ scaleViewport(e, o, r, n) {
668
+ const h = this.canvas.viewport.getViewportMatrix(), s = we(h, o, r, n), { width: d, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
584
669
  prevTransform: h,
585
670
  nextTransform: s,
586
- canvasWidth: c,
587
- canvasHeight: d
671
+ canvasWidth: d,
672
+ canvasHeight: c
588
673
  });
589
674
  this.performTransform(a);
590
675
  }
591
676
  stopMouseDrag() {
592
- this.element !== null && W(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
677
+ this.element !== null && R(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
593
678
  }
594
679
  removeMouseDragListeners() {
595
680
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -600,117 +685,12 @@ class O {
600
685
  removeTouchDragListeners() {
601
686
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
602
687
  }
603
- performTransform(t) {
604
- this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.options.onTransformChange();
605
- }
606
- }
607
- class ut {
608
- constructor() {
609
- i(this, "keyMap", /* @__PURE__ */ new Map());
610
- i(this, "valueMap", /* @__PURE__ */ new Map());
611
- }
612
- set(t, o) {
613
- this.keyMap.set(t, o), this.valueMap.set(o, t);
614
- }
615
- hasKey(t) {
616
- return this.keyMap.has(t);
617
- }
618
- hasValue(t) {
619
- return this.valueMap.has(t);
620
- }
621
- getByKey(t) {
622
- return this.keyMap.get(t);
623
- }
624
- getByValue(t) {
625
- return this.valueMap.get(t);
626
- }
627
- deleteByKey(t) {
628
- const o = this.keyMap.get(t);
629
- o !== void 0 && this.valueMap.delete(o), this.keyMap.delete(t);
630
- }
631
- deleteByValue(t) {
632
- const o = this.valueMap.get(t);
633
- o !== void 0 && this.keyMap.delete(o), this.valueMap.delete(t);
634
- }
635
- forEach(t) {
636
- this.keyMap.forEach((o, r) => {
637
- t(o, r);
638
- });
639
- }
640
- clear() {
641
- this.keyMap.clear(), this.valueMap.clear();
688
+ performTransform(e) {
689
+ this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.options.onTransformChange();
642
690
  }
643
691
  }
644
- class wt {
645
- constructor(t) {
646
- i(this, "viewport");
647
- i(this, "graph");
648
- i(this, "nodes", new ut());
649
- i(this, "nodesResizeObserver");
650
- i(this, "window", window);
651
- this.canvas = t, this.nodesResizeObserver = new this.window.ResizeObserver((o) => {
652
- o.forEach((r) => {
653
- const n = r.target;
654
- this.handleNodeResize(n);
655
- });
656
- }), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
657
- }
658
- attach(t) {
659
- this.canvas.attach(t);
660
- }
661
- detach() {
662
- this.canvas.detach();
663
- }
664
- addNode(t) {
665
- this.canvas.addNode(t), this.nodes.set(t.id, t.element), this.nodesResizeObserver.observe(t.element);
666
- }
667
- updateNode(t, o) {
668
- this.canvas.updateNode(t, o);
669
- }
670
- removeNode(t) {
671
- this.canvas.removeNode(t);
672
- const o = this.nodes.getByKey(t);
673
- this.nodes.deleteByKey(t), this.nodesResizeObserver.unobserve(o);
674
- }
675
- markPort(t) {
676
- this.canvas.markPort(t);
677
- }
678
- updatePort(t, o) {
679
- this.canvas.updatePort(t, o);
680
- }
681
- unmarkPort(t) {
682
- this.canvas.unmarkPort(t);
683
- }
684
- addEdge(t) {
685
- this.canvas.addEdge(t);
686
- }
687
- updateEdge(t, o) {
688
- this.canvas.updateEdge(t, o);
689
- }
690
- removeEdge(t) {
691
- this.canvas.removeEdge(t);
692
- }
693
- patchViewportMatrix(t) {
694
- this.canvas.patchViewportMatrix(t);
695
- }
696
- patchContentMatrix(t) {
697
- this.canvas.patchContentMatrix(t);
698
- }
699
- clear() {
700
- this.canvas.clear(), this.nodesResizeObserver.disconnect(), this.nodes.clear();
701
- }
702
- destroy() {
703
- this.clear(), this.canvas.destroy();
704
- }
705
- handleNodeResize(t) {
706
- const o = this.nodes.getByValue(t);
707
- this.canvas.updateNode(o, {}), this.graph.getNodeAdjacentEdgeIds(o).forEach((n) => {
708
- this.canvas.updateEdge(n, {});
709
- });
710
- }
711
- }
712
- class yt {
713
- constructor(t, o, r, n) {
692
+ class fe {
693
+ constructor(e, o, r, n) {
714
694
  i(this, "graph");
715
695
  i(this, "viewport");
716
696
  i(this, "canvas");
@@ -728,22 +708,22 @@ class yt {
728
708
  yFrom: 1 / 0,
729
709
  yTo: 1 / 0
730
710
  });
731
- i(this, "updateLoadedArea", (t) => {
711
+ i(this, "updateLoadedArea", (e) => {
732
712
  this.loadedArea = {
733
- xFrom: t.x,
734
- xTo: t.x + t.width,
735
- yFrom: t.y,
736
- yTo: t.y + t.height
713
+ xFrom: e.x,
714
+ xTo: e.x + e.width,
715
+ yFrom: e.y,
716
+ yTo: e.y + e.height
737
717
  };
738
718
  });
739
- var d, a;
719
+ var c, a;
740
720
  this.trigger = o, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new this.window.ResizeObserver((l) => {
741
721
  const g = l[0];
742
722
  this.viewportWidth = g.contentRect.width, this.viewportHeight = g.contentRect.height, this.scheduleLoadAreaAroundViewport();
743
723
  });
744
- const h = ((d = r == null ? void 0 : r.events) == null ? void 0 : d.onTransformFinished) ?? (() => {
724
+ const h = ((c = r == null ? void 0 : r.events) == null ? void 0 : c.onTransformFinished) ?? (() => {
745
725
  }), s = ((a = r == null ? void 0 : r.events) == null ? void 0 : a.onTransformChange) ?? (() => {
746
- }), c = {
726
+ }), d = {
747
727
  ...r,
748
728
  events: {
749
729
  ...r == null ? void 0 : r.events,
@@ -756,49 +736,49 @@ class yt {
756
736
  }
757
737
  }
758
738
  };
759
- this.canvas = new O(
760
- t,
761
- c
739
+ this.canvas = new ee(
740
+ e,
741
+ d
762
742
  ), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.trigger.subscribe(this.updateLoadedArea);
763
743
  }
764
- attach(t) {
765
- this.detach(), this.element = t, this.canvasResizeObserver.observe(this.element), this.canvas.attach(t);
744
+ attach(e) {
745
+ this.detach(), this.element = e, this.canvasResizeObserver.observe(this.element), this.canvas.attach(e);
766
746
  }
767
747
  detach() {
768
748
  this.element !== null && (this.canvasResizeObserver.unobserve(this.element), this.element = null, this.viewportWidth = 0, this.viewportHeight = 0), this.canvas.detach();
769
749
  }
770
- addNode(t) {
771
- this.canvas.addNode(t);
750
+ addNode(e) {
751
+ this.canvas.addNode(e);
772
752
  }
773
- updateNode(t, o) {
774
- this.canvas.updateNode(t, o);
753
+ updateNode(e, o) {
754
+ this.canvas.updateNode(e, o);
775
755
  }
776
- removeNode(t) {
777
- this.canvas.removeNode(t);
756
+ removeNode(e) {
757
+ this.canvas.removeNode(e);
778
758
  }
779
- markPort(t) {
780
- this.canvas.markPort(t);
759
+ markPort(e) {
760
+ this.canvas.markPort(e);
781
761
  }
782
- updatePort(t, o) {
783
- this.canvas.updatePort(t, o);
762
+ updatePort(e, o) {
763
+ this.canvas.updatePort(e, o);
784
764
  }
785
- unmarkPort(t) {
786
- this.canvas.unmarkPort(t);
765
+ unmarkPort(e) {
766
+ this.canvas.unmarkPort(e);
787
767
  }
788
- addEdge(t) {
789
- this.canvas.addEdge(t);
768
+ addEdge(e) {
769
+ this.canvas.addEdge(e);
790
770
  }
791
- updateEdge(t, o) {
792
- this.canvas.updateEdge(t, o);
771
+ updateEdge(e, o) {
772
+ this.canvas.updateEdge(e, o);
793
773
  }
794
- removeEdge(t) {
795
- this.canvas.removeEdge(t);
774
+ removeEdge(e) {
775
+ this.canvas.removeEdge(e);
796
776
  }
797
- patchViewportMatrix(t) {
798
- this.canvas.patchViewportMatrix(t), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
777
+ patchViewportMatrix(e) {
778
+ this.canvas.patchViewportMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
799
779
  }
800
- patchContentMatrix(t) {
801
- this.canvas.patchContentMatrix(t), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
780
+ patchContentMatrix(e) {
781
+ this.canvas.patchContentMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
802
782
  }
803
783
  clear() {
804
784
  this.canvas.clear();
@@ -812,153 +792,153 @@ class yt {
812
792
  });
813
793
  }
814
794
  scheduleEnsureViewportAreaLoaded() {
815
- const t = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, n = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + t + this.nodeHorizontal, s = this.viewportMatrix.y + o + this.nodeVertical;
795
+ const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, n = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + e + this.nodeHorizontal, s = this.viewportMatrix.y + o + this.nodeVertical;
816
796
  this.loadedArea.xFrom < r && this.loadedArea.xTo > h && this.loadedArea.yFrom < n && this.loadedArea.yTo > s || this.scheduleLoadAreaAroundViewport();
817
797
  }
818
798
  loadAreaAroundViewport() {
819
- const t = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - t - this.nodeHorizontal, n = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * t + 2 * this.nodeHorizontal, s = 3 * o + 2 * this.nodeVertical;
799
+ const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - e - this.nodeHorizontal, n = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * e + 2 * this.nodeHorizontal, s = 3 * o + 2 * this.nodeVertical;
820
800
  this.trigger.emit({ x: r, y: n, width: h, height: s });
821
801
  }
822
802
  }
823
- const vt = () => {
824
- const e = document.createElement("div");
825
- return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
826
- }, ft = () => {
827
- const e = document.createElement("div");
828
- return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
829
- }, xt = () => {
830
- const e = document.createElement("div");
831
- return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.visibility = "hidden", e;
803
+ const ve = () => {
804
+ const t = document.createElement("div");
805
+ return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
806
+ }, ye = () => {
807
+ const t = document.createElement("div");
808
+ return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
809
+ }, xe = () => {
810
+ const t = document.createElement("div");
811
+ return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
832
812
  };
833
- class Et {
834
- constructor(t, o) {
813
+ class Ae {
814
+ constructor(e, o) {
835
815
  i(this, "canvasWrapper", null);
836
- i(this, "host", vt());
837
- i(this, "container", ft());
816
+ i(this, "host", ve());
817
+ i(this, "container", ye());
838
818
  i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
839
819
  i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
840
820
  i(this, "applyTransform", () => {
841
- const t = this.viewportStore.getContentMatrix();
842
- this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
821
+ const e = this.viewportStore.getContentMatrix();
822
+ this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
843
823
  });
844
- this.graphStore = t, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdate.subscribe(this.applyTransform);
824
+ this.graphStore = e, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
845
825
  }
846
- attach(t) {
847
- this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host), this.graphStore.getAllEdgeIds().forEach((o) => {
826
+ attach(e) {
827
+ this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host), this.graphStore.getAllEdgeIds().forEach((o) => {
848
828
  this.renderEdge(o);
849
829
  });
850
830
  }
851
831
  detach() {
852
832
  this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
853
833
  }
854
- attachNode(t) {
855
- const o = this.graphStore.getNode(t), r = xt();
856
- r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(t, r), this.updateNodeCoordinates(t), this.updateNodePriority(t), r.style.visibility = "visible";
834
+ attachNode(e) {
835
+ const o = this.graphStore.getNode(e), r = xe();
836
+ r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodePosition(e), this.updateNodePriority(e), r.style.visibility = "visible";
857
837
  }
858
- detachNode(t) {
859
- const o = this.nodeIdToWrapperElementMap.get(t);
860
- o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(t);
838
+ detachNode(e) {
839
+ const o = this.nodeIdToWrapperElementMap.get(e);
840
+ o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(e);
861
841
  }
862
- attachEdge(t) {
863
- const o = this.graphStore.getEdge(t).shape.svg;
864
- this.edgeIdToElementMap.set(t, o), this.container.appendChild(o), this.renderEdge(t), this.updateEdgePriority(t);
842
+ attachEdge(e) {
843
+ const o = this.graphStore.getEdge(e).shape.svg;
844
+ this.edgeIdToElementMap.set(e, o), this.container.appendChild(o), this.renderEdge(e), this.updateEdgePriority(e);
865
845
  }
866
- detachEdge(t) {
867
- const o = this.edgeIdToElementMap.get(t);
868
- this.container.removeChild(o), this.edgeIdToElementMap.delete(t);
846
+ detachEdge(e) {
847
+ const o = this.edgeIdToElementMap.get(e);
848
+ this.container.removeChild(o), this.edgeIdToElementMap.delete(e);
869
849
  }
870
850
  clear() {
871
- this.edgeIdToElementMap.forEach((t, o) => {
851
+ this.edgeIdToElementMap.forEach((e, o) => {
872
852
  this.detachEdge(o);
873
- }), this.nodeIdToWrapperElementMap.forEach((t, o) => {
853
+ }), this.nodeIdToWrapperElementMap.forEach((e, o) => {
874
854
  this.detachNode(o);
875
855
  });
876
856
  }
877
857
  destroy() {
878
- this.viewportStore.onAfterUpdate.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
858
+ this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
879
859
  }
880
- updateNodeCoordinates(t) {
881
- const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, c = r.centerFn(n, h), d = r.x - s * c.x, a = r.y - s * c.y;
882
- o.style.transform = `translate(${d}px, ${a}px)`;
860
+ updateNodePosition(e) {
861
+ const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, d = r.centerFn(n, h), c = r.x - s * d.x, a = r.y - s * d.y;
862
+ o.style.transform = `translate(${c}px, ${a}px)`;
883
863
  }
884
- updateNodePriority(t) {
885
- const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
864
+ updateNodePriority(e) {
865
+ const o = this.graphStore.getNode(e), r = this.nodeIdToWrapperElementMap.get(e);
886
866
  r.style.zIndex = `${o.priority}`;
887
867
  }
888
- updateEdgeShape(t) {
889
- const o = this.edgeIdToElementMap.get(t);
868
+ updateEdgeShape(e) {
869
+ const o = this.edgeIdToElementMap.get(e);
890
870
  this.container.removeChild(o);
891
- const r = this.graphStore.getEdge(t);
892
- this.edgeIdToElementMap.set(t, r.shape.svg), this.container.appendChild(r.shape.svg);
871
+ const r = this.graphStore.getEdge(e);
872
+ this.edgeIdToElementMap.set(e, r.shape.svg), this.container.appendChild(r.shape.svg);
893
873
  }
894
- renderEdge(t) {
895
- const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), a = {
896
- x: d.scale * (h.left - c.left) + d.x,
897
- y: d.scale * (h.top - c.top) + d.y
874
+ renderEdge(e) {
875
+ const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = {
876
+ x: c.scale * (h.left - d.left) + c.x,
877
+ y: c.scale * (h.top - d.top) + c.y
898
878
  }, l = {
899
- x: d.scale * (s.left - c.left) + d.x,
900
- y: d.scale * (s.top - c.top) + d.y
879
+ x: c.scale * (s.left - d.left) + c.x,
880
+ y: c.scale * (s.top - d.top) + c.y
901
881
  }, g = {
902
882
  x: a.x,
903
883
  y: a.y,
904
- width: h.width * d.scale,
905
- height: h.height * d.scale,
884
+ width: h.width * c.scale,
885
+ height: h.height * c.scale,
906
886
  direction: r.direction,
907
887
  portId: o.from,
908
888
  nodeId: r.nodeId
909
- }, y = {
889
+ }, f = {
910
890
  x: l.x,
911
891
  y: l.y,
912
- width: s.width * d.scale,
913
- height: s.height * d.scale,
892
+ width: s.width * c.scale,
893
+ height: s.height * c.scale,
914
894
  direction: n.direction,
915
895
  portId: o.to,
916
896
  nodeId: n.nodeId
917
897
  };
918
898
  o.shape.render({
919
899
  from: g,
920
- to: y
900
+ to: f
921
901
  });
922
902
  }
923
- updateEdgePriority(t) {
924
- const o = this.graphStore.getEdge(t);
903
+ updateEdgePriority(e) {
904
+ const o = this.graphStore.getEdge(e);
925
905
  o.shape.svg.style.zIndex = `${o.priority}`;
926
906
  }
927
907
  }
928
- class St {
929
- constructor(t) {
908
+ class Ee {
909
+ constructor(e) {
930
910
  i(this, "xFrom", 1 / 0);
931
911
  i(this, "yFrom", 1 / 0);
932
912
  i(this, "xTo", 1 / 0);
933
913
  i(this, "yTo", 1 / 0);
934
- this.graphStore = t;
914
+ this.graphStore = e;
935
915
  }
936
- setRenderingBox(t) {
937
- this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
916
+ setRenderingBox(e) {
917
+ this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
938
918
  }
939
- hasNode(t) {
940
- const o = this.graphStore.getNode(t);
919
+ hasNode(e) {
920
+ const o = this.graphStore.getNode(e);
941
921
  return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
942
922
  }
943
- hasEdge(t) {
944
- const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), c = Math.min(h.x, s.x), d = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
945
- return c <= this.xTo && d >= this.xFrom && a <= this.yTo && l >= this.yFrom;
923
+ hasEdge(e) {
924
+ const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), d = Math.min(h.x, s.x), c = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
925
+ return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
946
926
  }
947
927
  }
948
- class At {
949
- constructor(t, o, r) {
928
+ class pe {
929
+ constructor(e, o, r) {
950
930
  i(this, "attachedNodes", /* @__PURE__ */ new Set());
951
931
  i(this, "attachedEdges", /* @__PURE__ */ new Set());
952
932
  i(this, "renderingBox");
953
- i(this, "updateViewport", (t) => {
954
- this.renderingBox.setRenderingBox(t);
933
+ i(this, "updateViewport", (e) => {
934
+ this.renderingBox.setRenderingBox(e);
955
935
  const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
956
936
  this.graphStore.getAllNodeIds().forEach((s) => {
957
- const c = this.renderingBox.hasNode(s), d = this.attachedNodes.has(s);
958
- c && !d ? o.add(s) : !c && d && r.add(s);
937
+ const d = this.renderingBox.hasNode(s), c = this.attachedNodes.has(s);
938
+ d && !c ? o.add(s) : !d && c && r.add(s);
959
939
  }), this.graphStore.getAllEdgeIds().forEach((s) => {
960
- const c = this.renderingBox.hasEdge(s), d = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
961
- c && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), c && !d ? n.add(s) : !c && d && h.add(s);
940
+ const d = this.renderingBox.hasEdge(s), c = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
941
+ d && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), d && !c ? n.add(s) : !d && c && h.add(s);
962
942
  }), h.forEach((s) => {
963
943
  this.handleDetachEdge(s);
964
944
  }), r.forEach((s) => {
@@ -969,42 +949,42 @@ class At {
969
949
  this.handleAttachEdge(s);
970
950
  });
971
951
  });
972
- this.htmlView = t, this.graphStore = o, this.trigger = r, this.renderingBox = new St(this.graphStore), this.trigger.subscribe(this.updateViewport);
952
+ this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new Ee(this.graphStore), this.trigger.subscribe(this.updateViewport);
973
953
  }
974
- attach(t) {
975
- this.htmlView.attach(t);
954
+ attach(e) {
955
+ this.htmlView.attach(e);
976
956
  }
977
957
  detach() {
978
958
  this.htmlView.detach();
979
959
  }
980
- attachNode(t) {
981
- this.renderingBox.hasNode(t) && this.handleAttachNode(t);
960
+ attachNode(e) {
961
+ this.renderingBox.hasNode(e) && this.handleAttachNode(e);
982
962
  }
983
- detachNode(t) {
984
- this.attachedNodes.has(t) && this.handleDetachNode(t);
963
+ detachNode(e) {
964
+ this.attachedNodes.has(e) && this.handleDetachNode(e);
985
965
  }
986
- attachEdge(t) {
987
- this.renderingBox.hasEdge(t) && this.attachEdgeEntities(t);
966
+ attachEdge(e) {
967
+ this.renderingBox.hasEdge(e) && this.attachEdgeEntities(e);
988
968
  }
989
- detachEdge(t) {
990
- this.attachedEdges.has(t) && this.handleDetachEdge(t);
969
+ detachEdge(e) {
970
+ this.attachedEdges.has(e) && this.handleDetachEdge(e);
991
971
  }
992
- updateNodeCoordinates(t) {
993
- this.attachedNodes.has(t) ? this.htmlView.updateNodeCoordinates(t) : this.renderingBox.hasNode(t) && (this.handleAttachNode(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((o) => {
972
+ updateNodePosition(e) {
973
+ this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
994
974
  this.attachEdgeEntities(o);
995
975
  }));
996
976
  }
997
- updateNodePriority(t) {
998
- this.attachedNodes.has(t) && this.htmlView.updateNodePriority(t);
977
+ updateNodePriority(e) {
978
+ this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
999
979
  }
1000
- updateEdgeShape(t) {
1001
- this.attachedEdges.has(t) && this.htmlView.updateEdgeShape(t);
980
+ updateEdgeShape(e) {
981
+ this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
1002
982
  }
1003
- renderEdge(t) {
1004
- this.attachedEdges.has(t) && this.htmlView.renderEdge(t);
983
+ renderEdge(e) {
984
+ this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
1005
985
  }
1006
- updateEdgePriority(t) {
1007
- this.attachedEdges.has(t) && this.htmlView.updateEdgePriority(t);
986
+ updateEdgePriority(e) {
987
+ this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
1008
988
  }
1009
989
  clear() {
1010
990
  this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
@@ -1012,51 +992,51 @@ class At {
1012
992
  destroy() {
1013
993
  this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
1014
994
  }
1015
- attachEdgeEntities(t) {
1016
- const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId;
1017
- this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(t);
995
+ attachEdgeEntities(e) {
996
+ const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId;
997
+ this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(e);
1018
998
  }
1019
- handleAttachNode(t) {
1020
- this.attachedNodes.add(t), this.htmlView.attachNode(t);
999
+ handleAttachNode(e) {
1000
+ this.attachedNodes.add(e), this.htmlView.attachNode(e);
1021
1001
  }
1022
- handleDetachNode(t) {
1023
- this.htmlView.detachNode(t), this.attachedNodes.delete(t);
1002
+ handleDetachNode(e) {
1003
+ this.htmlView.detachNode(e), this.attachedNodes.delete(e);
1024
1004
  }
1025
- handleAttachEdge(t) {
1026
- this.attachedEdges.add(t), this.htmlView.attachEdge(t);
1005
+ handleAttachEdge(e) {
1006
+ this.attachedEdges.add(e), this.htmlView.attachEdge(e);
1027
1007
  }
1028
- handleDetachEdge(t) {
1029
- this.htmlView.detachEdge(t), this.attachedEdges.delete(t);
1008
+ handleDetachEdge(e) {
1009
+ this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
1030
1010
  }
1031
1011
  }
1032
- class q {
1012
+ class te {
1033
1013
  constructor() {
1034
1014
  i(this, "callbacks", /* @__PURE__ */ new Set());
1035
1015
  }
1036
- subscribe(t) {
1037
- this.callbacks.add(t);
1016
+ subscribe(e) {
1017
+ this.callbacks.add(e);
1038
1018
  }
1039
- unsubscribe(t) {
1040
- this.callbacks.delete(t);
1019
+ unsubscribe(e) {
1020
+ this.callbacks.delete(e);
1041
1021
  }
1042
- emit(t) {
1022
+ emit(e) {
1043
1023
  this.callbacks.forEach((o) => {
1044
- o(t);
1024
+ o(e);
1045
1025
  });
1046
1026
  }
1047
1027
  }
1048
- const Tt = () => {
1049
- const e = new q();
1050
- return [e, e];
1028
+ const A = () => {
1029
+ const t = new te();
1030
+ return [t, t];
1051
1031
  };
1052
- class Y {
1053
- constructor(t) {
1032
+ class z {
1033
+ constructor(e) {
1054
1034
  i(this, "counter", 0);
1055
- this.checkExists = t;
1035
+ this.checkExists = e;
1056
1036
  }
1057
- create(t) {
1058
- if (t !== void 0)
1059
- return t;
1037
+ create(e) {
1038
+ if (e !== void 0)
1039
+ return e;
1060
1040
  for (; this.checkExists(this.counter); )
1061
1041
  this.counter++;
1062
1042
  return this.counter;
@@ -1071,244 +1051,244 @@ class E extends Error {
1071
1051
  i(this, "name", "HtmlGraphError");
1072
1052
  }
1073
1053
  }
1074
- const pt = (e, t) => ({
1075
- x: e / 2,
1076
- y: t / 2
1077
- }), X = (e) => () => e, J = X(0), Mt = () => {
1078
- let e = 0;
1079
- return () => e++;
1080
- }, Nt = (e, t) => {
1081
- let o = J, r = J;
1082
- const n = Mt();
1083
- return e === "incremental" && (o = n), t === "incremental" && (r = n), typeof e == "number" && (o = X(e)), typeof t == "number" && (r = X(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
1054
+ const Se = (t, e) => ({
1055
+ x: t / 2,
1056
+ y: e / 2
1057
+ }), Y = (t) => () => t, Z = Y(0), Ne = () => {
1058
+ let t = 0;
1059
+ return () => t++;
1060
+ }, Te = (t, e) => {
1061
+ let o = Z, r = Z;
1062
+ const n = Ne();
1063
+ return t === "incremental" && (o = n), e === "incremental" && (r = n), typeof t == "number" && (o = Y(t)), typeof e == "number" && (r = Y(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
1084
1064
  nodesPriorityFn: o,
1085
1065
  edgesPriorityFn: r
1086
1066
  };
1087
- }, f = (e, t, o) => ({
1088
- x: t.x * e.x - t.y * e.y + ((1 - t.x) * o.x + t.y * o.y),
1089
- y: t.y * e.x + t.x * e.y + ((1 - t.x) * o.y - t.y * o.x)
1090
- }), p = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), w = {
1067
+ }, y = (t, e, o) => ({
1068
+ x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
1069
+ y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
1070
+ }), T = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
1091
1071
  x: 0,
1092
1072
  y: 0
1093
- }, M = (e, t, o, r) => {
1073
+ }, m = (t, e, o, r) => {
1094
1074
  const h = [
1095
1075
  w,
1096
1076
  { x: o, y: r },
1097
1077
  { x: o, y: -r }
1098
- ].map((a) => f(a, e, w)).map((a) => ({ x: a.x + t.x, y: a.y + t.y })), s = `M ${h[0].x} ${h[0].y}`, c = `L ${h[1].x} ${h[1].y}`, d = `L ${h[2].x} ${h[2].y}`;
1099
- return `${s} ${c} ${d}`;
1100
- }, b = (e, t) => {
1078
+ ].map((a) => y(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
1079
+ return `${s} ${d} ${c}`;
1080
+ }, D = (t, e) => {
1101
1081
  const o = [];
1102
- if (e.length > 0 && o.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && o.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
1103
- const r = e.length - 1;
1082
+ if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
1083
+ const r = t.length - 1;
1104
1084
  let n = 0, h = 0, s = 0;
1105
- e.forEach((c, d) => {
1085
+ t.forEach((d, c) => {
1106
1086
  let a = 0, l = 0, g = 0;
1107
- const y = d > 0, x = d < r, v = y && x;
1108
- if (y && (a = -n, l = -h, g = s), x) {
1109
- const P = e[d + 1];
1110
- n = P.x - c.x, h = P.y - c.y, s = Math.sqrt(n * n + h * h);
1087
+ const f = c > 0, x = c < r, v = f && x;
1088
+ if (f && (a = -n, l = -h, g = s), x) {
1089
+ const L = t[c + 1];
1090
+ n = L.x - d.x, h = L.y - d.y, s = Math.sqrt(n * n + h * h);
1111
1091
  }
1112
- const S = s !== 0 ? Math.min((v ? t : 0) / s, d < r - 1 ? 0.5 : 1) : 0, T = v ? { x: c.x + n * S, y: c.y + h * S } : c, L = g !== 0 ? Math.min((v ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = v ? { x: c.x + a * L, y: c.y + l * L } : c;
1113
- d > 0 && o.push(`L ${D.x} ${D.y}`), v && o.push(
1114
- `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
1092
+ const p = s !== 0 ? Math.min((v ? e : 0) / s, c < r - 1 ? 0.5 : 1) : 0, N = v ? { x: d.x + n * p, y: d.y + h * p } : d, M = g !== 0 ? Math.min((v ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, V = v ? { x: d.x + a * M, y: d.y + l * M } : d;
1093
+ c > 0 && o.push(`L ${V.x} ${V.y}`), v && o.push(
1094
+ `C ${d.x} ${d.y} ${d.x} ${d.y} ${N.x} ${N.y}`
1115
1095
  );
1116
1096
  });
1117
1097
  }
1118
1098
  return o.join(" ");
1119
1099
  }, I = () => {
1120
- const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1121
- return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e;
1122
- }, F = () => {
1123
- const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
1124
- return e.style.transformOrigin = "50% 50%", e;
1125
- }, R = (e, t) => {
1100
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1101
+ return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
1102
+ }, W = () => {
1103
+ const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
1104
+ return t.style.transformOrigin = "50% 50%", t;
1105
+ }, F = (t, e) => {
1126
1106
  const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
1127
- return o.setAttribute("stroke", e), o.setAttribute("stroke-width", `${t}`), o.setAttribute("fill", "none"), o;
1128
- }, N = (e) => {
1129
- const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
1130
- return t.setAttribute("fill", e), t;
1131
- }, k = (e, t) => {
1107
+ return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
1108
+ }, P = (t) => {
1109
+ const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1110
+ return e.setAttribute("fill", t), e;
1111
+ }, B = (t, e) => {
1132
1112
  const o = {
1133
- x: e.x + e.width / 2,
1134
- y: e.y + e.height / 2
1135
- }, r = {
1136
1113
  x: t.x + t.width / 2,
1137
1114
  y: t.y + t.height / 2
1138
- }, n = Math.min(o.x, r.x), h = Math.min(o.y, r.y), s = Math.abs(r.x - o.x), c = Math.abs(r.y - o.y), d = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
1115
+ }, r = {
1116
+ x: e.x + e.width / 2,
1117
+ y: e.y + e.height / 2
1118
+ }, n = Math.min(o.x, r.x), h = Math.min(o.y, r.y), s = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
1139
1119
  return {
1140
1120
  x: n,
1141
1121
  y: h,
1142
1122
  width: s,
1143
- height: c,
1144
- flipX: d,
1123
+ height: d,
1124
+ flipX: c,
1145
1125
  flipY: a
1146
1126
  };
1147
- }, Vt = (e) => {
1148
- const t = f(
1149
- { x: e.arrowLength, y: w.y },
1150
- e.fromVect,
1127
+ }, me = (t) => {
1128
+ const e = y(
1129
+ { x: t.arrowLength, y: w.y },
1130
+ t.fromVect,
1151
1131
  w
1152
- ), o = f(
1153
- { x: e.to.x - e.arrowLength, y: e.to.y },
1154
- e.toVect,
1155
- e.to
1132
+ ), o = y(
1133
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1134
+ t.toVect,
1135
+ t.to
1156
1136
  ), r = {
1157
- x: t.x + e.fromVect.x * e.curvature,
1158
- y: t.y + e.fromVect.y * e.curvature
1137
+ x: e.x + t.fromVect.x * t.curvature,
1138
+ y: e.y + t.fromVect.y * t.curvature
1159
1139
  }, n = {
1160
- x: o.x - e.toVect.x * e.curvature,
1161
- y: o.y - e.toVect.y * e.curvature
1162
- }, h = `M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, s = e.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${t.x} ${t.y} `, c = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
1163
- return `${s}${h}${c}`;
1164
- }, Lt = (e) => {
1165
- const t = e.hasSourceArrow ? f(
1166
- { x: e.arrowLength, y: w.y },
1167
- e.fromVect,
1140
+ x: o.x - t.toVect.x * t.curvature,
1141
+ y: o.y - t.toVect.y * t.curvature
1142
+ }, h = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, s = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
1143
+ return `${s}${h}${d}`;
1144
+ }, Pe = (t) => {
1145
+ const e = t.hasSourceArrow ? y(
1146
+ { x: t.arrowLength, y: w.y },
1147
+ t.fromVect,
1168
1148
  w
1169
- ) : w, o = e.hasTargetArrow ? f(
1170
- { x: e.to.x - e.arrowLength, y: e.to.y },
1171
- e.toVect,
1172
- e.to
1173
- ) : e.to, r = e.arrowLength, n = Math.cos(e.detourDirection) * e.detourDistance, h = Math.sin(e.detourDirection) * e.detourDistance, s = n * e.flipX, c = h * e.flipY, d = f(
1149
+ ) : w, o = t.hasTargetArrow ? y(
1150
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1151
+ t.toVect,
1152
+ t.to
1153
+ ) : t.to, r = t.arrowLength, n = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, s = n * t.flipX, d = h * t.flipY, c = y(
1174
1154
  { x: r, y: w.y },
1175
- e.fromVect,
1155
+ t.fromVect,
1176
1156
  w
1177
1157
  ), a = {
1178
- x: d.x + s,
1179
- y: d.y + c
1180
- }, l = f(
1181
- { x: e.to.x - r, y: e.to.y },
1182
- e.toVect,
1183
- e.to
1158
+ x: c.x + s,
1159
+ y: c.y + d
1160
+ }, l = y(
1161
+ { x: t.to.x - r, y: t.to.y },
1162
+ t.toVect,
1163
+ t.to
1184
1164
  ), g = {
1185
1165
  x: l.x + s,
1186
- y: l.y + c
1187
- }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
1188
- x: d.x + e.curvature * e.fromVect.x,
1189
- y: d.y + e.curvature * e.fromVect.y
1166
+ y: l.y + d
1167
+ }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
1168
+ x: c.x + t.curvature * t.fromVect.x,
1169
+ y: c.y + t.curvature * t.fromVect.y
1190
1170
  }, v = {
1191
- x: l.x - e.curvature * e.toVect.x,
1192
- y: l.y - e.curvature * e.toVect.y
1193
- }, A = {
1194
- x: d.x + s,
1195
- y: d.y + c
1171
+ x: l.x - t.curvature * t.toVect.x,
1172
+ y: l.y - t.curvature * t.toVect.y
1196
1173
  }, S = {
1174
+ x: c.x + s,
1175
+ y: c.y + d
1176
+ }, p = {
1197
1177
  x: l.x + s,
1198
- y: l.y + c
1178
+ y: l.y + d
1199
1179
  };
1200
1180
  return [
1201
- `M ${t.x} ${t.y}`,
1202
- `L ${d.x} ${d.y}`,
1203
- `C ${x.x} ${x.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
1204
- `C ${S.x} ${S.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
1181
+ `M ${e.x} ${e.y}`,
1182
+ `L ${c.x} ${c.y}`,
1183
+ `C ${x.x} ${x.y} ${S.x} ${S.y} ${f.x} ${f.y}`,
1184
+ `C ${p.x} ${p.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
1205
1185
  `L ${o.x} ${o.y}`
1206
1186
  ].join(" ");
1207
- }, Dt = (e) => {
1208
- const t = e.hasSourceArrow ? f(
1209
- { x: e.arrowLength, y: w.y },
1210
- e.fromVect,
1187
+ }, be = (t) => {
1188
+ const e = t.hasSourceArrow ? y(
1189
+ { x: t.arrowLength, y: w.y },
1190
+ t.fromVect,
1211
1191
  w
1212
- ) : w, o = e.hasTargetArrow ? f(
1213
- { x: e.to.x - e.arrowLength, y: e.to.y },
1214
- e.toVect,
1215
- e.to
1216
- ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, h = f({ x: n, y: w.y }, e.fromVect, w), s = f(
1217
- { x: e.to.x - n, y: e.to.y },
1218
- e.toVect,
1219
- e.to
1220
- ), c = Math.max((h.x + s.x) / 2, r), d = e.to.y / 2, a = { x: e.flipX > 0 ? c : -r, y: h.y }, l = { x: a.x, y: d }, g = {
1221
- x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
1192
+ ) : w, o = t.hasTargetArrow ? y(
1193
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1194
+ t.toVect,
1195
+ t.to
1196
+ ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = y({ x: n, y: w.y }, t.fromVect, w), s = y(
1197
+ { x: t.to.x - n, y: t.to.y },
1198
+ t.toVect,
1199
+ t.to
1200
+ ), d = Math.max((h.x + s.x) / 2, r), c = t.to.y / 2, a = { x: t.flipX > 0 ? d : -r, y: h.y }, l = { x: a.x, y: c }, g = {
1201
+ x: t.flipX > 0 ? t.to.x - d : t.to.x + r,
1222
1202
  y: s.y
1223
- }, y = { x: g.x, y: d };
1224
- return b(
1225
- [t, h, a, l, y, g, s, o],
1226
- e.roundness
1203
+ }, f = { x: g.x, y: c };
1204
+ return D(
1205
+ [e, h, a, l, f, g, s, o],
1206
+ t.roundness
1227
1207
  );
1228
- }, B = (e) => {
1229
- const t = e.hasSourceArrow ? f(
1230
- { x: e.arrowLength, y: w.y },
1231
- e.fromVect,
1208
+ }, X = (t) => {
1209
+ const e = t.hasSourceArrow ? y(
1210
+ { x: t.arrowLength, y: w.y },
1211
+ t.fromVect,
1232
1212
  w
1233
- ) : w, o = e.hasTargetArrow ? f(
1234
- { x: e.to.x - e.arrowLength, y: e.to.y },
1235
- e.toVect,
1236
- e.to
1237
- ) : e.to, r = e.arrowLength + e.arrowOffset, n = f(
1213
+ ) : w, o = t.hasTargetArrow ? y(
1214
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1215
+ t.toVect,
1216
+ t.to
1217
+ ) : t.to, r = t.arrowLength + t.arrowOffset, n = y(
1238
1218
  { x: r, y: w.y },
1239
- e.fromVect,
1219
+ t.fromVect,
1240
1220
  w
1241
- ), h = Math.cos(e.detourDirection) * e.detourDistance, s = Math.sin(e.detourDirection) * e.detourDistance, c = h * e.flipX, d = s * e.flipY, a = { x: n.x + c, y: n.y + d }, l = f(
1242
- { x: e.to.x - r, y: e.to.y },
1243
- e.toVect,
1244
- e.to
1245
- ), g = { x: l.x + c, y: l.y + d };
1246
- return b(
1247
- [t, n, a, g, l, o],
1248
- e.roundness
1221
+ ), h = Math.cos(t.detourDirection) * t.detourDistance, s = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = s * t.flipY, a = { x: n.x + d, y: n.y + c }, l = y(
1222
+ { x: t.to.x - r, y: t.to.y },
1223
+ t.toVect,
1224
+ t.to
1225
+ ), g = { x: l.x + d, y: l.y + c };
1226
+ return D(
1227
+ [e, n, a, g, l, o],
1228
+ t.roundness
1249
1229
  );
1250
- }, Pt = (e) => {
1251
- const t = e.hasSourceArrow ? f(
1252
- { x: e.arrowLength, y: w.y },
1253
- e.fromVect,
1230
+ }, Me = (t) => {
1231
+ const e = t.hasSourceArrow ? y(
1232
+ { x: t.arrowLength, y: w.y },
1233
+ t.fromVect,
1254
1234
  w
1255
- ) : w, o = e.hasTargetArrow ? f(
1256
- { x: e.to.x - e.arrowLength, y: e.to.y },
1257
- e.toVect,
1258
- e.to
1259
- ) : e.to, r = e.arrowLength + e.arrowOffset, n = f({ x: r, y: w.y }, e.fromVect, w), h = f(
1260
- { x: e.to.x - r, y: e.to.y },
1261
- e.toVect,
1262
- e.to
1235
+ ) : w, o = t.hasTargetArrow ? y(
1236
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1237
+ t.toVect,
1238
+ t.to
1239
+ ) : t.to, r = t.arrowLength + t.arrowOffset, n = y({ x: r, y: w.y }, t.fromVect, w), h = y(
1240
+ { x: t.to.x - r, y: t.to.y },
1241
+ t.toVect,
1242
+ t.to
1263
1243
  );
1264
- return b([t, n, h, o], e.roundness);
1265
- }, bt = (e) => {
1266
- const t = e.hasSourceArrow ? f(
1267
- { x: e.arrowLength, y: w.y },
1268
- e.fromVect,
1244
+ return D([e, n, h, o], t.roundness);
1245
+ }, Ve = (t) => {
1246
+ const e = t.hasSourceArrow ? y(
1247
+ { x: t.arrowLength, y: w.y },
1248
+ t.fromVect,
1269
1249
  w
1270
- ) : w, o = e.hasTargetArrow ? f(
1271
- { x: e.to.x - e.arrowLength, y: e.to.y },
1272
- e.toVect,
1273
- e.to
1274
- ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, h = f({ x: n, y: w.y }, e.fromVect, w), s = f(
1275
- { x: e.to.x - n, y: e.to.y },
1276
- e.toVect,
1277
- e.to
1278
- ), c = Math.max((h.y + s.y) / 2, r), d = e.to.x / 2, a = { x: h.x, y: e.flipY > 0 ? c : -r }, l = { x: d, y: a.y }, g = {
1250
+ ) : w, o = t.hasTargetArrow ? y(
1251
+ { x: t.to.x - t.arrowLength, y: t.to.y },
1252
+ t.toVect,
1253
+ t.to
1254
+ ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = y({ x: n, y: w.y }, t.fromVect, w), s = y(
1255
+ { x: t.to.x - n, y: t.to.y },
1256
+ t.toVect,
1257
+ t.to
1258
+ ), d = Math.max((h.y + s.y) / 2, r), c = t.to.x / 2, a = { x: h.x, y: t.flipY > 0 ? d : -r }, l = { x: c, y: a.y }, g = {
1279
1259
  x: s.x,
1280
- y: e.flipY > 0 ? e.to.y - c : e.to.y + r
1281
- }, y = { x: d, y: g.y };
1282
- return b(
1283
- [t, h, a, l, y, g, s, o],
1284
- e.roundness
1260
+ y: t.flipY > 0 ? t.to.y - d : t.to.y + r
1261
+ }, f = { x: c, y: g.y };
1262
+ return D(
1263
+ [e, h, a, l, f, g, s, o],
1264
+ t.roundness
1285
1265
  );
1286
- }, H = (e) => {
1287
- const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, n = r + 2 * o, s = [
1288
- { x: e.arrowLength, y: w.y },
1266
+ }, H = (t) => {
1267
+ const e = t.arrowOffset, o = t.side, r = t.arrowLength + e, n = r + 2 * o, s = [
1268
+ { x: t.arrowLength, y: w.y },
1289
1269
  { x: r, y: w.y },
1290
- { x: r, y: e.side },
1291
- { x: n, y: e.side },
1292
- { x: n, y: -e.side },
1293
- { x: r, y: -e.side },
1270
+ { x: r, y: t.side },
1271
+ { x: n, y: t.side },
1272
+ { x: n, y: -t.side },
1273
+ { x: r, y: -t.side },
1294
1274
  { x: r, y: w.y },
1295
- { x: e.arrowLength, y: w.y }
1275
+ { x: t.arrowLength, y: w.y }
1296
1276
  ].map(
1297
- (d) => f(d, e.fromVect, w)
1298
- ), c = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
1299
- return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${b(s, e.roundness)}`;
1300
- }, mt = (e) => {
1301
- const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), n = t + o, h = e.arrowLength + r * (1 - o / n), s = t * o / n, d = [
1302
- { x: e.arrowLength, y: w.y },
1277
+ (c) => y(c, t.fromVect, w)
1278
+ ), d = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
1279
+ return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${D(s, t.roundness)}`;
1280
+ }, Le = (t) => {
1281
+ const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), n = e + o, h = t.arrowLength + r * (1 - o / n), s = e * o / n, c = [
1282
+ { x: t.arrowLength, y: w.y },
1303
1283
  { x: h, y: s },
1304
1284
  { x: h, y: -s }
1305
- ].map((g) => f(g, e.fromVect, w)), a = [
1306
- `M ${d[0].x} ${d[0].y}`,
1307
- `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
1308
- `A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,
1309
- `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
1310
- ].join(" "), l = `M 0 0 L ${d[0].x} ${d[0].y} `;
1311
- return `${e.hasSourceArrow || e.hasTargetArrow ? "" : l}${a}`;
1285
+ ].map((g) => y(g, t.fromVect, w)), a = [
1286
+ `M ${c[0].x} ${c[0].y}`,
1287
+ `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
1288
+ `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
1289
+ `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
1290
+ ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
1291
+ return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
1312
1292
  }, u = Object.freeze({
1313
1293
  color: "#777777",
1314
1294
  width: 1,
@@ -1326,10 +1306,10 @@ const pt = (e, t) => ({
1326
1306
  smallCycleRadius: 15,
1327
1307
  curvature: 90
1328
1308
  });
1329
- class Ct {
1330
- constructor(t) {
1309
+ class De {
1310
+ constructor(e) {
1331
1311
  i(this, "svg", I());
1332
- i(this, "group", F());
1312
+ i(this, "group", W());
1333
1313
  i(this, "line");
1334
1314
  i(this, "sourceArrow", null);
1335
1315
  i(this, "targetArrow", null);
@@ -1342,55 +1322,55 @@ class Ct {
1342
1322
  i(this, "detourDistance");
1343
1323
  i(this, "hasSourceArrow");
1344
1324
  i(this, "hasTargetArrow");
1345
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? u.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
1346
- const o = (t == null ? void 0 : t.color) ?? u.color, r = (t == null ? void 0 : t.width) ?? u.width;
1347
- this.svg.appendChild(this.group), this.line = R(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(o), this.group.appendChild(this.targetArrow));
1348
- }
1349
- render(t) {
1350
- const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
1351
- t.from,
1352
- t.to
1325
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
1326
+ const o = (e == null ? void 0 : e.color) ?? u.color, r = (e == null ? void 0 : e.width) ?? u.width;
1327
+ this.svg.appendChild(this.group), this.line = F(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(o), this.group.appendChild(this.targetArrow));
1328
+ }
1329
+ render(e) {
1330
+ const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
1331
+ e.from,
1332
+ e.to
1353
1333
  );
1354
- this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
1355
- const d = p(
1356
- t.from.direction,
1334
+ this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
1335
+ const c = T(
1336
+ e.from.direction,
1357
1337
  s,
1358
- c
1359
- ), a = p(t.to.direction, s, c), l = {
1338
+ d
1339
+ ), a = T(e.to.direction, s, d), l = {
1360
1340
  x: n,
1361
1341
  y: h
1362
1342
  };
1363
- let g, y = a, x = -this.arrowLength;
1364
- if (t.from.portId === t.to.portId ? (g = mt({
1365
- fromVect: d,
1343
+ let g, f = a, x = -this.arrowLength;
1344
+ if (e.from.portId === e.to.portId ? (g = Le({
1345
+ fromVect: c,
1366
1346
  radius: this.portCycleRadius,
1367
1347
  smallRadius: this.portCycleSmallRadius,
1368
1348
  arrowLength: this.arrowLength,
1369
1349
  hasSourceArrow: this.hasSourceArrow,
1370
1350
  hasTargetArrow: this.hasTargetArrow
1371
- }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = Lt({
1351
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = Pe({
1372
1352
  to: l,
1373
- fromVect: d,
1353
+ fromVect: c,
1374
1354
  toVect: a,
1375
1355
  flipX: s,
1376
- flipY: c,
1356
+ flipY: d,
1377
1357
  arrowLength: this.arrowLength,
1378
1358
  detourDirection: this.detourDirection,
1379
1359
  detourDistance: this.detourDistance,
1380
1360
  curvature: this.curvature,
1381
1361
  hasSourceArrow: this.hasSourceArrow,
1382
1362
  hasTargetArrow: this.hasTargetArrow
1383
- }) : g = Vt({
1363
+ }) : g = me({
1384
1364
  to: l,
1385
- fromVect: d,
1365
+ fromVect: c,
1386
1366
  toVect: a,
1387
1367
  arrowLength: this.arrowLength,
1388
1368
  curvature: this.curvature,
1389
1369
  hasSourceArrow: this.hasSourceArrow,
1390
1370
  hasTargetArrow: this.hasTargetArrow
1391
1371
  }), this.line.setAttribute("d", g), this.sourceArrow) {
1392
- const v = M(
1393
- d,
1372
+ const v = m(
1373
+ c,
1394
1374
  w,
1395
1375
  this.arrowLength,
1396
1376
  this.arrowWidth
@@ -1398,8 +1378,8 @@ class Ct {
1398
1378
  this.sourceArrow.setAttribute("d", v);
1399
1379
  }
1400
1380
  if (this.targetArrow) {
1401
- const v = M(
1402
- y,
1381
+ const v = m(
1382
+ f,
1403
1383
  l,
1404
1384
  x,
1405
1385
  this.arrowWidth
@@ -1408,10 +1388,10 @@ class Ct {
1408
1388
  }
1409
1389
  }
1410
1390
  }
1411
- class $t {
1412
- constructor(t) {
1391
+ class Ce {
1392
+ constructor(e) {
1413
1393
  i(this, "svg", I());
1414
- i(this, "group", F());
1394
+ i(this, "group", W());
1415
1395
  i(this, "line");
1416
1396
  i(this, "sourceArrow", null);
1417
1397
  i(this, "targetArrow", null);
@@ -1424,45 +1404,45 @@ class $t {
1424
1404
  i(this, "detourDistance");
1425
1405
  i(this, "hasSourceArrow");
1426
1406
  i(this, "hasTargetArrow");
1427
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
1428
- const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
1407
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1408
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
1429
1409
  this.roundness = Math.min(
1430
1410
  o,
1431
1411
  this.arrowOffset,
1432
1412
  this.cycleSquareSide / 2
1433
- ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
1434
- const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
1435
- this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
1436
- }
1437
- render(t) {
1438
- const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
1439
- t.from,
1440
- t.to
1413
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
1414
+ const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
1415
+ this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
1416
+ }
1417
+ render(e) {
1418
+ const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
1419
+ e.from,
1420
+ e.to
1441
1421
  );
1442
- this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
1443
- const d = p(
1444
- t.from.direction,
1422
+ this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
1423
+ const c = T(
1424
+ e.from.direction,
1445
1425
  s,
1446
- c
1447
- ), a = p(t.to.direction, s, c), l = {
1426
+ d
1427
+ ), a = T(e.to.direction, s, d), l = {
1448
1428
  x: n,
1449
1429
  y: h
1450
1430
  };
1451
- let g, y = a, x = -this.arrowLength;
1452
- if (t.from.portId === t.to.portId ? (g = H({
1453
- fromVect: d,
1431
+ let g, f = a, x = -this.arrowLength;
1432
+ if (e.from.portId === e.to.portId ? (g = H({
1433
+ fromVect: c,
1454
1434
  arrowLength: this.arrowLength,
1455
1435
  side: this.cycleSquareSide,
1456
1436
  arrowOffset: this.arrowOffset,
1457
1437
  roundness: this.roundness,
1458
1438
  hasSourceArrow: this.hasSourceArrow,
1459
1439
  hasTargetArrow: this.hasTargetArrow
1460
- }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
1440
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
1461
1441
  to: l,
1462
- fromVect: d,
1442
+ fromVect: c,
1463
1443
  toVect: a,
1464
1444
  flipX: s,
1465
- flipY: c,
1445
+ flipY: d,
1466
1446
  arrowLength: this.arrowLength,
1467
1447
  arrowOffset: this.arrowOffset,
1468
1448
  roundness: this.roundness,
@@ -1470,9 +1450,9 @@ class $t {
1470
1450
  detourDistance: this.detourDistance,
1471
1451
  hasSourceArrow: this.hasSourceArrow,
1472
1452
  hasTargetArrow: this.hasTargetArrow
1473
- }) : g = Dt({
1453
+ }) : g = be({
1474
1454
  to: l,
1475
- fromVect: d,
1455
+ fromVect: c,
1476
1456
  toVect: a,
1477
1457
  flipX: s,
1478
1458
  arrowLength: this.arrowLength,
@@ -1481,8 +1461,8 @@ class $t {
1481
1461
  hasSourceArrow: this.hasSourceArrow,
1482
1462
  hasTargetArrow: this.hasTargetArrow
1483
1463
  }), this.line.setAttribute("d", g), this.sourceArrow) {
1484
- const v = M(
1485
- d,
1464
+ const v = m(
1465
+ c,
1486
1466
  w,
1487
1467
  this.arrowLength,
1488
1468
  this.arrowWidth
@@ -1490,8 +1470,8 @@ class $t {
1490
1470
  this.sourceArrow.setAttribute("d", v);
1491
1471
  }
1492
1472
  if (this.targetArrow) {
1493
- const v = M(
1494
- y,
1473
+ const v = m(
1474
+ f,
1495
1475
  l,
1496
1476
  x,
1497
1477
  this.arrowWidth
@@ -1500,10 +1480,10 @@ class $t {
1500
1480
  }
1501
1481
  }
1502
1482
  }
1503
- class Wt {
1504
- constructor(t) {
1483
+ class Ue {
1484
+ constructor(e) {
1505
1485
  i(this, "svg", I());
1506
- i(this, "group", F());
1486
+ i(this, "group", W());
1507
1487
  i(this, "line");
1508
1488
  i(this, "sourceArrow", null);
1509
1489
  i(this, "targetArrow", null);
@@ -1516,45 +1496,45 @@ class Wt {
1516
1496
  i(this, "detourDistance");
1517
1497
  i(this, "hasSourceArrow");
1518
1498
  i(this, "hasTargetArrow");
1519
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
1520
- const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
1499
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1500
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
1521
1501
  this.roundness = Math.min(
1522
1502
  o,
1523
1503
  this.arrowOffset,
1524
1504
  this.cycleSquareSide / 2
1525
- ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
1526
- const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
1527
- this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
1528
- }
1529
- render(t) {
1530
- const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
1531
- t.from,
1532
- t.to
1505
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
1506
+ const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
1507
+ this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
1508
+ }
1509
+ render(e) {
1510
+ const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
1511
+ e.from,
1512
+ e.to
1533
1513
  );
1534
- this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
1535
- const d = p(
1536
- t.from.direction,
1514
+ this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
1515
+ const c = T(
1516
+ e.from.direction,
1537
1517
  s,
1538
- c
1539
- ), a = p(t.to.direction, s, c), l = {
1518
+ d
1519
+ ), a = T(e.to.direction, s, d), l = {
1540
1520
  x: n,
1541
1521
  y: h
1542
1522
  };
1543
- let g, y = a, x = -this.arrowLength;
1544
- if (t.from.portId === t.to.portId ? (g = H({
1545
- fromVect: d,
1523
+ let g, f = a, x = -this.arrowLength;
1524
+ if (e.from.portId === e.to.portId ? (g = H({
1525
+ fromVect: c,
1546
1526
  arrowLength: this.arrowLength,
1547
1527
  side: this.cycleSquareSide,
1548
1528
  arrowOffset: this.arrowOffset,
1549
1529
  roundness: this.roundness,
1550
1530
  hasSourceArrow: this.hasSourceArrow,
1551
1531
  hasTargetArrow: this.hasTargetArrow
1552
- }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
1532
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
1553
1533
  to: l,
1554
- fromVect: d,
1534
+ fromVect: c,
1555
1535
  toVect: a,
1556
1536
  flipX: s,
1557
- flipY: c,
1537
+ flipY: d,
1558
1538
  arrowLength: this.arrowLength,
1559
1539
  arrowOffset: this.arrowOffset,
1560
1540
  roundness: this.roundness,
@@ -1562,9 +1542,9 @@ class Wt {
1562
1542
  detourDistance: this.detourDistance,
1563
1543
  hasSourceArrow: this.hasSourceArrow,
1564
1544
  hasTargetArrow: this.hasTargetArrow
1565
- }) : g = Pt({
1545
+ }) : g = Me({
1566
1546
  to: l,
1567
- fromVect: d,
1547
+ fromVect: c,
1568
1548
  toVect: a,
1569
1549
  arrowLength: this.arrowLength,
1570
1550
  arrowOffset: this.arrowOffset,
@@ -1572,8 +1552,8 @@ class Wt {
1572
1552
  hasSourceArrow: this.hasSourceArrow,
1573
1553
  hasTargetArrow: this.hasTargetArrow
1574
1554
  }), this.line.setAttribute("d", g), this.sourceArrow) {
1575
- const v = M(
1576
- d,
1555
+ const v = m(
1556
+ c,
1577
1557
  w,
1578
1558
  this.arrowLength,
1579
1559
  this.arrowWidth
@@ -1581,8 +1561,8 @@ class Wt {
1581
1561
  this.sourceArrow.setAttribute("d", v);
1582
1562
  }
1583
1563
  if (this.targetArrow) {
1584
- const v = M(
1585
- y,
1564
+ const v = m(
1565
+ f,
1586
1566
  l,
1587
1567
  x,
1588
1568
  this.arrowWidth
@@ -1591,10 +1571,10 @@ class Wt {
1591
1571
  }
1592
1572
  }
1593
1573
  }
1594
- class It {
1595
- constructor(t) {
1574
+ class $e {
1575
+ constructor(e) {
1596
1576
  i(this, "svg", I());
1597
- i(this, "group", F());
1577
+ i(this, "group", W());
1598
1578
  i(this, "line");
1599
1579
  i(this, "sourceArrow", null);
1600
1580
  i(this, "targetArrow", null);
@@ -1607,45 +1587,45 @@ class It {
1607
1587
  i(this, "detourDistance");
1608
1588
  i(this, "hasSourceArrow");
1609
1589
  i(this, "hasTargetArrow");
1610
- this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
1611
- const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
1590
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
1591
+ const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
1612
1592
  this.roundness = Math.min(
1613
1593
  o,
1614
1594
  this.arrowOffset,
1615
1595
  this.cycleSquareSide / 2
1616
- ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
1617
- const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
1618
- this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
1619
- }
1620
- render(t) {
1621
- const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
1622
- t.from,
1623
- t.to
1596
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
1597
+ const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
1598
+ this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
1599
+ }
1600
+ render(e) {
1601
+ const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
1602
+ e.from,
1603
+ e.to
1624
1604
  );
1625
- this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
1626
- const d = p(
1627
- t.from.direction,
1605
+ this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
1606
+ const c = T(
1607
+ e.from.direction,
1628
1608
  s,
1629
- c
1630
- ), a = p(t.to.direction, s, c), l = {
1609
+ d
1610
+ ), a = T(e.to.direction, s, d), l = {
1631
1611
  x: n,
1632
1612
  y: h
1633
1613
  };
1634
- let g, y = a, x = -this.arrowLength;
1635
- if (t.from.portId === t.to.portId ? (g = H({
1636
- fromVect: d,
1614
+ let g, f = a, x = -this.arrowLength;
1615
+ if (e.from.portId === e.to.portId ? (g = H({
1616
+ fromVect: c,
1637
1617
  arrowLength: this.arrowLength,
1638
1618
  side: this.cycleSquareSide,
1639
1619
  arrowOffset: this.arrowOffset,
1640
1620
  roundness: this.roundness,
1641
1621
  hasSourceArrow: this.hasSourceArrow,
1642
1622
  hasTargetArrow: this.hasTargetArrow
1643
- }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
1623
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
1644
1624
  to: l,
1645
- fromVect: d,
1625
+ fromVect: c,
1646
1626
  toVect: a,
1647
1627
  flipX: s,
1648
- flipY: c,
1628
+ flipY: d,
1649
1629
  arrowLength: this.arrowLength,
1650
1630
  arrowOffset: this.arrowOffset,
1651
1631
  roundness: this.roundness,
@@ -1653,19 +1633,19 @@ class It {
1653
1633
  detourDistance: this.detourDistance,
1654
1634
  hasSourceArrow: this.hasSourceArrow,
1655
1635
  hasTargetArrow: this.hasTargetArrow
1656
- }) : g = bt({
1636
+ }) : g = Ve({
1657
1637
  to: l,
1658
- fromVect: d,
1638
+ fromVect: c,
1659
1639
  toVect: a,
1660
- flipY: c,
1640
+ flipY: d,
1661
1641
  arrowLength: this.arrowLength,
1662
1642
  arrowOffset: this.arrowOffset,
1663
1643
  roundness: this.roundness,
1664
1644
  hasSourceArrow: this.hasSourceArrow,
1665
1645
  hasTargetArrow: this.hasTargetArrow
1666
1646
  }), this.line.setAttribute("d", g), this.sourceArrow) {
1667
- const v = M(
1668
- d,
1647
+ const v = m(
1648
+ c,
1669
1649
  w,
1670
1650
  this.arrowLength,
1671
1651
  this.arrowWidth
@@ -1673,8 +1653,8 @@ class It {
1673
1653
  this.sourceArrow.setAttribute("d", v);
1674
1654
  }
1675
1655
  if (this.targetArrow) {
1676
- const v = M(
1677
- y,
1656
+ const v = m(
1657
+ f,
1678
1658
  l,
1679
1659
  x,
1680
1660
  this.arrowWidth
@@ -1683,97 +1663,97 @@ class It {
1683
1663
  }
1684
1664
  }
1685
1665
  }
1686
- const Ft = (e) => {
1687
- if (typeof e == "function")
1688
- return e;
1689
- switch (e == null ? void 0 : e.type) {
1666
+ const Re = (t) => {
1667
+ if (typeof t == "function")
1668
+ return t;
1669
+ switch (t == null ? void 0 : t.type) {
1690
1670
  case "straight":
1691
- return () => new Wt({
1692
- color: e.color,
1693
- width: e.width,
1694
- arrowLength: e.arrowLength,
1695
- arrowWidth: e.arrowWidth,
1696
- arrowOffset: e.arrowOffset,
1697
- hasSourceArrow: e.hasSourceArrow,
1698
- hasTargetArrow: e.hasTargetArrow,
1699
- cycleSquareSide: e.cycleSquareSide,
1700
- roundness: e.roundness,
1701
- detourDistance: e.detourDistance,
1702
- detourDirection: e.detourDirection
1671
+ return () => new Ue({
1672
+ color: t.color,
1673
+ width: t.width,
1674
+ arrowLength: t.arrowLength,
1675
+ arrowWidth: t.arrowWidth,
1676
+ arrowOffset: t.arrowOffset,
1677
+ hasSourceArrow: t.hasSourceArrow,
1678
+ hasTargetArrow: t.hasTargetArrow,
1679
+ cycleSquareSide: t.cycleSquareSide,
1680
+ roundness: t.roundness,
1681
+ detourDistance: t.detourDistance,
1682
+ detourDirection: t.detourDirection
1703
1683
  });
1704
1684
  case "horizontal":
1705
- return () => new $t({
1706
- color: e.color,
1707
- width: e.width,
1708
- arrowLength: e.arrowLength,
1709
- arrowWidth: e.arrowWidth,
1710
- arrowOffset: e.arrowOffset,
1711
- hasSourceArrow: e.hasSourceArrow,
1712
- hasTargetArrow: e.hasTargetArrow,
1713
- cycleSquareSide: e.cycleSquareSide,
1714
- roundness: e.roundness,
1715
- detourDistance: e.detourDistance,
1716
- detourDirection: e.detourDirection
1685
+ return () => new Ce({
1686
+ color: t.color,
1687
+ width: t.width,
1688
+ arrowLength: t.arrowLength,
1689
+ arrowWidth: t.arrowWidth,
1690
+ arrowOffset: t.arrowOffset,
1691
+ hasSourceArrow: t.hasSourceArrow,
1692
+ hasTargetArrow: t.hasTargetArrow,
1693
+ cycleSquareSide: t.cycleSquareSide,
1694
+ roundness: t.roundness,
1695
+ detourDistance: t.detourDistance,
1696
+ detourDirection: t.detourDirection
1717
1697
  });
1718
1698
  case "vertical":
1719
- return () => new It({
1720
- color: e.color,
1721
- width: e.width,
1722
- arrowLength: e.arrowLength,
1723
- arrowWidth: e.arrowWidth,
1724
- arrowOffset: e.arrowOffset,
1725
- hasSourceArrow: e.hasSourceArrow,
1726
- hasTargetArrow: e.hasTargetArrow,
1727
- cycleSquareSide: e.cycleSquareSide,
1728
- roundness: e.roundness,
1729
- detourDistance: e.detourDistance,
1730
- detourDirection: e.detourDirection
1699
+ return () => new $e({
1700
+ color: t.color,
1701
+ width: t.width,
1702
+ arrowLength: t.arrowLength,
1703
+ arrowWidth: t.arrowWidth,
1704
+ arrowOffset: t.arrowOffset,
1705
+ hasSourceArrow: t.hasSourceArrow,
1706
+ hasTargetArrow: t.hasTargetArrow,
1707
+ cycleSquareSide: t.cycleSquareSide,
1708
+ roundness: t.roundness,
1709
+ detourDistance: t.detourDistance,
1710
+ detourDirection: t.detourDirection
1731
1711
  });
1732
1712
  default:
1733
- return () => new Ct({
1734
- color: e.color,
1735
- width: e.width,
1736
- arrowLength: e.arrowLength,
1737
- arrowWidth: e.arrowWidth,
1738
- hasSourceArrow: e.hasSourceArrow,
1739
- hasTargetArrow: e.hasTargetArrow,
1740
- cycleRadius: e.cycleRadius,
1741
- smallCycleRadius: e.smallCycleRadius,
1742
- curvature: e.curvature,
1743
- detourDistance: e.detourDistance,
1744
- detourDirection: e.detourDirection
1713
+ return () => new De({
1714
+ color: t.color,
1715
+ width: t.width,
1716
+ arrowLength: t.arrowLength,
1717
+ arrowWidth: t.arrowWidth,
1718
+ hasSourceArrow: t.hasSourceArrow,
1719
+ hasTargetArrow: t.hasTargetArrow,
1720
+ cycleRadius: t.cycleRadius,
1721
+ smallCycleRadius: t.smallCycleRadius,
1722
+ curvature: t.curvature,
1723
+ detourDistance: t.detourDistance,
1724
+ detourDirection: t.detourDirection
1745
1725
  });
1746
1726
  }
1747
- }, Rt = (e) => {
1727
+ }, Ie = (t) => {
1748
1728
  var o, r, n, h, s;
1749
- const t = Nt(
1750
- (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
1751
- (r = e == null ? void 0 : e.edges) == null ? void 0 : r.priority
1729
+ const e = Te(
1730
+ (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
1731
+ (r = t == null ? void 0 : t.edges) == null ? void 0 : r.priority
1752
1732
  );
1753
1733
  return {
1754
1734
  nodes: {
1755
- centerFn: ((n = e == null ? void 0 : e.nodes) == null ? void 0 : n.centerFn) ?? pt,
1756
- priorityFn: t.nodesPriorityFn
1735
+ centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Se,
1736
+ priorityFn: e.nodesPriorityFn
1757
1737
  },
1758
1738
  ports: {
1759
- direction: ((h = e == null ? void 0 : e.ports) == null ? void 0 : h.direction) ?? 0
1739
+ direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
1760
1740
  },
1761
1741
  edges: {
1762
- shapeFactory: Ft(((s = e == null ? void 0 : e.edges) == null ? void 0 : s.shape) ?? {}),
1763
- priorityFn: t.edgesPriorityFn
1742
+ shapeFactory: Re(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
1743
+ priorityFn: e.edgesPriorityFn
1764
1744
  }
1765
1745
  };
1766
1746
  };
1767
- class kt {
1768
- constructor(t, o) {
1769
- i(this, "nodeIdGenerator", new Y(
1770
- (t) => this.graph.getNode(t) !== null
1747
+ class We {
1748
+ constructor(e, o) {
1749
+ i(this, "nodeIdGenerator", new z(
1750
+ (e) => this.graph.getNode(e) !== null
1771
1751
  ));
1772
- i(this, "portIdGenerator", new Y(
1773
- (t) => this.graph.getPort(t) !== null
1752
+ i(this, "portIdGenerator", new z(
1753
+ (e) => this.graph.getPort(e) !== null
1774
1754
  ));
1775
- i(this, "edgeIdGenerator", new Y(
1776
- (t) => this.graph.getEdge(t) !== null
1755
+ i(this, "edgeIdGenerator", new z(
1756
+ (e) => this.graph.getEdge(e) !== null
1777
1757
  ));
1778
1758
  i(this, "defaults");
1779
1759
  /**
@@ -1784,14 +1764,14 @@ class kt {
1784
1764
  * provides api for accessing viewport state
1785
1765
  */
1786
1766
  i(this, "viewport");
1787
- this.controller = t, this.defaults = Rt(o), this.graph = t.graph, this.viewport = t.viewport;
1767
+ this.controller = e, this.defaults = Ie(o), this.graph = e.graph, this.viewport = e.viewport;
1788
1768
  }
1789
1769
  /**
1790
1770
  * attaches canvas to given element
1791
1771
  * detaches element first when canvas is attached
1792
1772
  */
1793
- attach(t) {
1794
- return this.controller.attach(t), this;
1773
+ attach(e) {
1774
+ return this.controller.attach(e), this;
1795
1775
  }
1796
1776
  /**
1797
1777
  * detaches canvas from element when attached
@@ -1802,19 +1782,19 @@ class kt {
1802
1782
  /**
1803
1783
  * adds node to graph
1804
1784
  */
1805
- addNode(t) {
1806
- const o = this.nodeIdGenerator.create(t.id);
1785
+ addNode(e) {
1786
+ const o = this.nodeIdGenerator.create(e.id);
1807
1787
  if (this.graph.getNode(o) !== null)
1808
1788
  throw new E("failed to add node with existing id");
1809
1789
  if (this.controller.addNode({
1810
1790
  id: o,
1811
- element: t.element,
1812
- x: t.x,
1813
- y: t.y,
1814
- centerFn: t.centerFn ?? this.defaults.nodes.centerFn,
1815
- priority: t.priority ?? this.defaults.nodes.priorityFn()
1816
- }), t.ports !== void 0)
1817
- for (const r of t.ports)
1791
+ element: e.element,
1792
+ x: e.x,
1793
+ y: e.y,
1794
+ centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
1795
+ priority: e.priority ?? this.defaults.nodes.priorityFn()
1796
+ }), e.ports !== void 0)
1797
+ for (const r of e.ports)
1818
1798
  this.markPort({
1819
1799
  id: r.id,
1820
1800
  element: r.element,
@@ -1826,100 +1806,100 @@ class kt {
1826
1806
  /**
1827
1807
  * updates node parameters
1828
1808
  */
1829
- updateNode(t, o) {
1830
- if (this.graph.getNode(t) === null)
1809
+ updateNode(e, o) {
1810
+ if (this.graph.getNode(e) === null)
1831
1811
  throw new E("failed to update nonexisting node");
1832
- return this.controller.updateNode(t, o ?? {}), this;
1812
+ return this.controller.updateNode(e, o ?? {}), this;
1833
1813
  }
1834
1814
  /**
1835
1815
  * removes node from graph
1836
1816
  * all the ports of node get unmarked
1837
1817
  * all the edges adjacent to node get removed
1838
1818
  */
1839
- removeNode(t) {
1840
- if (this.graph.getNode(t) === null)
1819
+ removeNode(e) {
1820
+ if (this.graph.getNode(e) === null)
1841
1821
  throw new E("failed to remove nonexisting node");
1842
- return this.controller.removeNode(t), this;
1822
+ return this.controller.removeNode(e), this;
1843
1823
  }
1844
1824
  /**
1845
1825
  * marks element as port of node
1846
1826
  */
1847
- markPort(t) {
1848
- const o = this.portIdGenerator.create(t.id);
1827
+ markPort(e) {
1828
+ const o = this.portIdGenerator.create(e.id);
1849
1829
  if (this.graph.getPort(o) !== null)
1850
1830
  throw new E("failed to add port with existing id");
1851
- if (this.graph.getNode(t.nodeId) === null)
1831
+ if (this.graph.getNode(e.nodeId) === null)
1852
1832
  throw new E("failed to set port on nonexisting node");
1853
1833
  return this.controller.markPort({
1854
1834
  id: o,
1855
- element: t.element,
1856
- nodeId: t.nodeId,
1857
- direction: t.direction ?? this.defaults.ports.direction
1835
+ element: e.element,
1836
+ nodeId: e.nodeId,
1837
+ direction: e.direction ?? this.defaults.ports.direction
1858
1838
  }), this;
1859
1839
  }
1860
1840
  /**
1861
1841
  * updates port and attached edges
1862
1842
  */
1863
- updatePort(t, o) {
1864
- if (this.graph.getPort(t) === null)
1843
+ updatePort(e, o) {
1844
+ if (this.graph.getPort(e) === null)
1865
1845
  throw new E("failed to unset nonexisting port");
1866
- return this.controller.updatePort(t, o ?? {}), this;
1846
+ return this.controller.updatePort(e, o ?? {}), this;
1867
1847
  }
1868
1848
  /**
1869
1849
  * ummarks element as port of node
1870
1850
  * all the edges adjacent to port get removed
1871
1851
  */
1872
- unmarkPort(t) {
1873
- if (this.graph.getPort(t) === null)
1852
+ unmarkPort(e) {
1853
+ if (this.graph.getPort(e) === null)
1874
1854
  throw new E("failed to unset nonexisting port");
1875
- return this.controller.unmarkPort(t), this;
1855
+ return this.controller.unmarkPort(e), this;
1876
1856
  }
1877
1857
  /**
1878
1858
  * adds edge to graph
1879
1859
  */
1880
- addEdge(t) {
1881
- const o = this.edgeIdGenerator.create(t.id);
1860
+ addEdge(e) {
1861
+ const o = this.edgeIdGenerator.create(e.id);
1882
1862
  if (this.graph.getEdge(o) !== null)
1883
1863
  throw new E("failed to add edge with existing id");
1884
- if (this.graph.getPort(t.from) === null)
1864
+ if (this.graph.getPort(e.from) === null)
1885
1865
  throw new E("failed to add edge from nonexisting port");
1886
- if (this.graph.getPort(t.to) === null)
1866
+ if (this.graph.getPort(e.to) === null)
1887
1867
  throw new E("failed to add edge to nonexisting port");
1888
1868
  return this.controller.addEdge({
1889
1869
  id: o,
1890
- from: t.from,
1891
- to: t.to,
1892
- shape: t.shape ?? this.defaults.edges.shapeFactory(),
1893
- priority: t.priority ?? this.defaults.edges.priorityFn()
1870
+ from: e.from,
1871
+ to: e.to,
1872
+ shape: e.shape ?? this.defaults.edges.shapeFactory(),
1873
+ priority: e.priority ?? this.defaults.edges.priorityFn()
1894
1874
  }), this;
1895
1875
  }
1896
1876
  /**
1897
1877
  * updates edge
1898
1878
  */
1899
- updateEdge(t, o) {
1900
- if (this.graph.getEdge(t) === null)
1879
+ updateEdge(e, o) {
1880
+ if (this.graph.getEdge(e) === null)
1901
1881
  throw new E("failed to update nonexisting edge");
1902
- return this.controller.updateEdge(t, o ?? {}), this;
1882
+ return this.controller.updateEdge(e, o ?? {}), this;
1903
1883
  }
1904
1884
  /**
1905
1885
  * removes edge from graph
1906
1886
  */
1907
- removeEdge(t) {
1908
- if (this.graph.getEdge(t) === null)
1887
+ removeEdge(e) {
1888
+ if (this.graph.getEdge(e) === null)
1909
1889
  throw new E("failed to remove nonexisting edge");
1910
- return this.controller.removeEdge(t), this;
1890
+ return this.controller.removeEdge(e), this;
1911
1891
  }
1912
1892
  /**
1913
1893
  * applies transformation for viewport
1914
1894
  */
1915
- patchViewportMatrix(t) {
1916
- return this.controller.patchViewportMatrix(t), this;
1895
+ patchViewportMatrix(e) {
1896
+ return this.controller.patchViewportMatrix(e), this;
1917
1897
  }
1918
1898
  /**
1919
1899
  * applies transformation for content
1920
1900
  */
1921
- patchContentMatrix(t) {
1922
- return this.controller.patchContentMatrix(t), this;
1901
+ patchContentMatrix(e) {
1902
+ return this.controller.patchContentMatrix(e), this;
1923
1903
  }
1924
1904
  /**
1925
1905
  * clears canvas from nodes and edges
@@ -1936,7 +1916,7 @@ class kt {
1936
1916
  this.controller.destroy();
1937
1917
  }
1938
1918
  }
1939
- class zt {
1919
+ class Fe {
1940
1920
  constructor() {
1941
1921
  i(this, "nodes", /* @__PURE__ */ new Map());
1942
1922
  i(this, "ports", /* @__PURE__ */ new Map());
@@ -1944,151 +1924,188 @@ class zt {
1944
1924
  i(this, "incommingEdges", /* @__PURE__ */ new Map());
1945
1925
  i(this, "outcommingEdges", /* @__PURE__ */ new Map());
1946
1926
  i(this, "cycleEdges", /* @__PURE__ */ new Map());
1947
- }
1948
- addNode(t) {
1927
+ i(this, "afterNodeAddedEmitter");
1928
+ i(this, "onAfterNodeAdded");
1929
+ i(this, "afterNodeUpdatedEmitter");
1930
+ i(this, "onAfterNodeUpdated");
1931
+ i(this, "afterNodePriorityUpdatedEmitter");
1932
+ i(this, "onAfterNodePriorityUpdated");
1933
+ i(this, "beforeNodeRemovedEmitter");
1934
+ i(this, "onBeforeNodeRemoved");
1935
+ i(this, "afterPortAddedEmitter");
1936
+ i(this, "onAfterPortAdded");
1937
+ i(this, "afterPortUpdatedEmitter");
1938
+ i(this, "onAfterPortUpdated");
1939
+ i(this, "beforePortRemovedEmitter");
1940
+ i(this, "onBeforePortRemoved");
1941
+ i(this, "afterEdgeAddedEmitter");
1942
+ i(this, "onAfterEdgeAdded");
1943
+ i(this, "afterEdgeShapeUpdatedEmitter");
1944
+ i(this, "onAfterEdgeShapeUpdated");
1945
+ i(this, "afterEdgeUpdatedEmitter");
1946
+ i(this, "onAfterEdgeUpdated");
1947
+ i(this, "afterEdgePriorityUpdatedEmitter");
1948
+ i(this, "onAfterEdgePriorityUpdated");
1949
+ i(this, "beforeEdgeRemovedEmitter");
1950
+ i(this, "onBeforeEdgeRemoved");
1951
+ i(this, "beforeClearEmitter");
1952
+ i(this, "onBeforeClear");
1953
+ [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();
1954
+ }
1955
+ addNode(e) {
1949
1956
  const o = /* @__PURE__ */ new Map(), r = {
1950
- element: t.element,
1951
- x: t.x,
1952
- y: t.y,
1953
- centerFn: t.centerFn,
1954
- priority: t.priority,
1957
+ element: e.element,
1958
+ x: e.x,
1959
+ y: e.y,
1960
+ centerFn: e.centerFn,
1961
+ priority: e.priority,
1955
1962
  ports: o
1956
1963
  };
1957
- this.nodes.set(t.id, r);
1964
+ this.nodes.set(e.id, r), this.afterNodeAddedEmitter.emit(e.id);
1958
1965
  }
1959
1966
  getAllNodeIds() {
1960
1967
  return Array.from(this.nodes.keys());
1961
1968
  }
1962
- getNode(t) {
1963
- return this.nodes.get(t);
1969
+ getNode(e) {
1970
+ return this.nodes.get(e);
1971
+ }
1972
+ updateNode(e, o) {
1973
+ const r = this.nodes.get(e);
1974
+ r.x = o.x ?? r.x, r.y = o.y ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, o.priority !== void 0 && (r.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
1964
1975
  }
1965
- removeNode(t) {
1966
- this.nodes.delete(t);
1976
+ removeNode(e) {
1977
+ this.beforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
1967
1978
  }
1968
- addPort(t) {
1969
- this.ports.set(t.id, {
1970
- element: t.element,
1971
- direction: t.direction,
1972
- nodeId: t.nodeId
1973
- }), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element);
1979
+ addPort(e) {
1980
+ this.ports.set(e.id, {
1981
+ element: e.element,
1982
+ direction: e.direction,
1983
+ nodeId: e.nodeId
1984
+ }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
1974
1985
  }
1975
- getPort(t) {
1976
- return this.ports.get(t);
1986
+ getPort(e) {
1987
+ return this.ports.get(e);
1988
+ }
1989
+ updatePort(e, o) {
1990
+ const r = this.ports.get(e);
1991
+ r.direction = o.direction ?? r.direction, this.afterPortUpdatedEmitter.emit(e);
1977
1992
  }
1978
1993
  getAllPortIds() {
1979
1994
  return Array.from(this.ports.keys());
1980
1995
  }
1981
- getNodePortIds(t) {
1982
- const o = this.nodes.get(t);
1996
+ getNodePortIds(e) {
1997
+ const o = this.nodes.get(e);
1983
1998
  if (o !== void 0)
1984
1999
  return Array.from(o.ports.keys());
1985
2000
  }
1986
- removePort(t) {
1987
- const o = this.ports.get(t).nodeId;
1988
- this.nodes.get(o).ports.delete(t), this.ports.delete(t);
1989
- }
1990
- addEdge(t) {
1991
- this.edges.set(t.id, {
1992
- from: t.from,
1993
- to: t.to,
1994
- shape: t.shape,
1995
- priority: t.priority
1996
- }), t.from !== t.to ? (this.outcommingEdges.get(t.from).add(t.id), this.incommingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
1997
- }
1998
- updateEdgeFrom(t, o) {
1999
- const r = this.edges.get(t);
2000
- this.removeEdge(t), this.addEdge({
2001
- id: t,
2002
- from: o,
2003
- to: r.to,
2004
- shape: r.shape,
2005
- priority: r.priority
2006
- });
2007
- }
2008
- updateEdgeTo(t, o) {
2009
- const r = this.edges.get(t);
2010
- this.removeEdge(t), this.addEdge({
2011
- id: t,
2012
- from: r.from,
2013
- to: o,
2014
- shape: r.shape,
2015
- priority: r.priority
2016
- });
2001
+ removePort(e) {
2002
+ const o = this.ports.get(e).nodeId;
2003
+ this.beforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e);
2004
+ }
2005
+ addEdge(e) {
2006
+ this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
2007
+ }
2008
+ updateEdge(e, o) {
2009
+ if (o.from !== void 0 || o.to !== void 0) {
2010
+ const n = this.edges.get(e);
2011
+ this.removeEdgeInternal(e), this.addEdgeInternal({
2012
+ id: e,
2013
+ from: o.from ?? n.from,
2014
+ to: o.to ?? n.to,
2015
+ shape: n.shape,
2016
+ priority: n.priority
2017
+ });
2018
+ }
2019
+ const r = this.edges.get(e);
2020
+ o.shape !== void 0 && (r.shape = o.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), o.priority !== void 0 && (r.priority = o.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
2017
2021
  }
2018
2022
  getAllEdgeIds() {
2019
2023
  return Array.from(this.edges.keys());
2020
2024
  }
2021
- getEdge(t) {
2022
- return this.edges.get(t);
2025
+ getEdge(e) {
2026
+ return this.edges.get(e);
2023
2027
  }
2024
- removeEdge(t) {
2025
- const o = this.edges.get(t), r = o.from, n = o.to;
2026
- this.cycleEdges.get(r).delete(t), this.cycleEdges.get(n).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(n).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(n).delete(t), this.edges.delete(t);
2028
+ removeEdge(e) {
2029
+ this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
2027
2030
  }
2028
2031
  clear() {
2029
- this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
2032
+ this.beforeClearEmitter.emit(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
2030
2033
  }
2031
- getPortIncomingEdgeIds(t) {
2032
- return Array.from(this.incommingEdges.get(t));
2034
+ getPortIncomingEdgeIds(e) {
2035
+ return Array.from(this.incommingEdges.get(e));
2033
2036
  }
2034
- getPortOutcomingEdgeIds(t) {
2035
- return Array.from(this.outcommingEdges.get(t));
2037
+ getPortOutcomingEdgeIds(e) {
2038
+ return Array.from(this.outcommingEdges.get(e));
2036
2039
  }
2037
- getPortCycleEdgeIds(t) {
2038
- return Array.from(this.cycleEdges.get(t));
2040
+ getPortCycleEdgeIds(e) {
2041
+ return Array.from(this.cycleEdges.get(e));
2039
2042
  }
2040
- getPortAdjacentEdgeIds(t) {
2043
+ getPortAdjacentEdgeIds(e) {
2041
2044
  return [
2042
- ...this.getPortIncomingEdgeIds(t),
2043
- ...this.getPortOutcomingEdgeIds(t),
2044
- ...this.getPortCycleEdgeIds(t)
2045
+ ...this.getPortIncomingEdgeIds(e),
2046
+ ...this.getPortOutcomingEdgeIds(e),
2047
+ ...this.getPortCycleEdgeIds(e)
2045
2048
  ];
2046
2049
  }
2047
- getNodeIncomingEdgeIds(t) {
2048
- const o = Array.from(this.nodes.get(t).ports.keys());
2050
+ getNodeIncomingEdgeIds(e) {
2051
+ const o = Array.from(this.nodes.get(e).ports.keys());
2049
2052
  let r = [];
2050
2053
  return o.forEach((n) => {
2051
2054
  r = [...r, ...this.getPortIncomingEdgeIds(n)];
2052
2055
  }), r;
2053
2056
  }
2054
- getNodeOutcomingEdgeIds(t) {
2055
- const o = Array.from(this.nodes.get(t).ports.keys());
2057
+ getNodeOutcomingEdgeIds(e) {
2058
+ const o = Array.from(this.nodes.get(e).ports.keys());
2056
2059
  let r = [];
2057
2060
  return o.forEach((n) => {
2058
2061
  r = [...r, ...this.getPortOutcomingEdgeIds(n)];
2059
2062
  }), r;
2060
2063
  }
2061
- getNodeCycleEdgeIds(t) {
2062
- const o = Array.from(this.nodes.get(t).ports.keys());
2064
+ getNodeCycleEdgeIds(e) {
2065
+ const o = Array.from(this.nodes.get(e).ports.keys());
2063
2066
  let r = [];
2064
2067
  return o.forEach((n) => {
2065
2068
  r = [...r, ...this.getPortCycleEdgeIds(n)];
2066
2069
  }), r;
2067
2070
  }
2068
- getNodeAdjacentEdgeIds(t) {
2071
+ getNodeAdjacentEdgeIds(e) {
2069
2072
  return [
2070
- ...this.getNodeIncomingEdgeIds(t),
2071
- ...this.getNodeOutcomingEdgeIds(t),
2072
- ...this.getNodeCycleEdgeIds(t)
2073
+ ...this.getNodeIncomingEdgeIds(e),
2074
+ ...this.getNodeOutcomingEdgeIds(e),
2075
+ ...this.getNodeCycleEdgeIds(e)
2073
2076
  ];
2074
2077
  }
2078
+ addEdgeInternal(e) {
2079
+ this.edges.set(e.id, {
2080
+ from: e.from,
2081
+ to: e.to,
2082
+ shape: e.shape,
2083
+ priority: e.priority
2084
+ }), e.from !== e.to ? (this.outcommingEdges.get(e.from).add(e.id), this.incommingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
2085
+ }
2086
+ removeEdgeInternal(e) {
2087
+ const o = this.edges.get(e), r = o.from, n = o.to;
2088
+ this.cycleEdges.get(r).delete(e), this.cycleEdges.get(n).delete(e), this.incommingEdges.get(r).delete(e), this.incommingEdges.get(n).delete(e), this.outcommingEdges.get(r).delete(e), this.outcommingEdges.get(n).delete(e), this.edges.delete(e);
2089
+ }
2075
2090
  }
2076
- const Q = (e) => ({
2077
- scale: 1 / e.scale,
2078
- x: -e.x / e.scale,
2079
- y: -e.y / e.scale
2080
- }), Z = {
2091
+ const O = (t) => ({
2092
+ scale: 1 / t.scale,
2093
+ x: -t.x / t.scale,
2094
+ y: -t.y / t.scale
2095
+ }), q = {
2081
2096
  scale: 1,
2082
2097
  x: 0,
2083
2098
  y: 0
2084
2099
  };
2085
- class Yt {
2100
+ class Be {
2086
2101
  constructor() {
2087
- i(this, "viewportMatrix", Z);
2088
- i(this, "contentMatrix", Z);
2089
- i(this, "emitter");
2090
- i(this, "onAfterUpdate");
2091
- [this.emitter, this.onAfterUpdate] = Tt();
2102
+ i(this, "viewportMatrix", q);
2103
+ i(this, "contentMatrix", q);
2104
+ i(this, "afterUpdateEmitter");
2105
+ i(this, "onAfterUpdated");
2106
+ i(this, "beforeUpdateEmitter");
2107
+ i(this, "onBeforeUpdated");
2108
+ [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
2092
2109
  }
2093
2110
  getViewportMatrix() {
2094
2111
  return this.viewportMatrix;
@@ -2096,22 +2113,54 @@ class Yt {
2096
2113
  getContentMatrix() {
2097
2114
  return this.contentMatrix;
2098
2115
  }
2099
- patchViewportMatrix(t) {
2100
- this.viewportMatrix = {
2101
- scale: t.scale ?? this.viewportMatrix.scale,
2102
- x: t.x ?? this.viewportMatrix.x,
2103
- y: t.y ?? this.viewportMatrix.y
2104
- }, this.contentMatrix = Q(this.viewportMatrix), this.emitter.emit();
2116
+ patchViewportMatrix(e) {
2117
+ this.beforeUpdateEmitter.emit(), this.viewportMatrix = {
2118
+ scale: e.scale ?? this.viewportMatrix.scale,
2119
+ x: e.x ?? this.viewportMatrix.x,
2120
+ y: e.y ?? this.viewportMatrix.y
2121
+ }, this.contentMatrix = O(this.viewportMatrix), this.afterUpdateEmitter.emit();
2122
+ }
2123
+ patchContentMatrix(e) {
2124
+ this.beforeUpdateEmitter.emit(), this.contentMatrix = {
2125
+ scale: e.scale ?? this.contentMatrix.scale,
2126
+ x: e.x ?? this.contentMatrix.x,
2127
+ y: e.y ?? this.contentMatrix.y
2128
+ }, this.viewportMatrix = O(this.contentMatrix), this.afterUpdateEmitter.emit();
2105
2129
  }
2106
- patchContentMatrix(t) {
2107
- this.contentMatrix = {
2108
- scale: t.scale ?? this.contentMatrix.scale,
2109
- x: t.x ?? this.contentMatrix.x,
2110
- y: t.y ?? this.contentMatrix.y
2111
- }, this.viewportMatrix = Q(this.contentMatrix), this.emitter.emit();
2130
+ }
2131
+ class j {
2132
+ constructor(e) {
2133
+ i(this, "elementToNodeId", /* @__PURE__ */ new Map());
2134
+ i(this, "nodesResizeObserver");
2135
+ i(this, "onAfterNodeAdded", (e) => {
2136
+ const o = this.canvas.graph.getNode(e);
2137
+ this.elementToNodeId.set(o.element, e), this.nodesResizeObserver.observe(o.element);
2138
+ });
2139
+ i(this, "onBeforeNodeRemoved", (e) => {
2140
+ const o = this.canvas.graph.getNode(e);
2141
+ this.elementToNodeId.delete(o.element), this.nodesResizeObserver.unobserve(o.element);
2142
+ });
2143
+ i(this, "onBeforeClear", () => {
2144
+ this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
2145
+ });
2146
+ this.canvas = e, this.nodesResizeObserver = new ResizeObserver((o) => {
2147
+ o.forEach((r) => {
2148
+ const n = r.target;
2149
+ this.handleNodeResize(n);
2150
+ });
2151
+ }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
2152
+ }
2153
+ static configure(e) {
2154
+ new j(e);
2155
+ }
2156
+ handleNodeResize(e) {
2157
+ const o = this.elementToNodeId.get(e);
2158
+ this.canvas.updateNode(o), this.canvas.graph.getNodeAdjacentEdgeIds(o).forEach((n) => {
2159
+ this.canvas.updateEdge(n);
2160
+ });
2112
2161
  }
2113
2162
  }
2114
- class Bt {
2163
+ class ze {
2115
2164
  constructor() {
2116
2165
  i(this, "canvasDefaults", {});
2117
2166
  i(this, "dragOptions");
@@ -2125,27 +2174,27 @@ class Bt {
2125
2174
  /**
2126
2175
  * specifies default values for graph entities
2127
2176
  */
2128
- setDefaults(t) {
2129
- return this.canvasDefaults = t, this;
2177
+ setDefaults(e) {
2178
+ return this.canvasDefaults = e, this;
2130
2179
  }
2131
2180
  /**
2132
2181
  * @deprecated
2133
2182
  * use setDefaults instead
2134
2183
  */
2135
- setOptions(t) {
2136
- return this.setDefaults(t), this;
2184
+ setOptions(e) {
2185
+ return this.setDefaults(e), this;
2137
2186
  }
2138
2187
  /**
2139
2188
  * enables nodes draggable by user
2140
2189
  */
2141
- enableUserDraggableNodes(t) {
2142
- return this.hasDraggableNode = !0, this.dragOptions = t, this;
2190
+ enableUserDraggableNodes(e) {
2191
+ return this.hasDraggableNode = !0, this.dragOptions = e, this;
2143
2192
  }
2144
2193
  /**
2145
2194
  * enables viewport transformable by user
2146
2195
  */
2147
- enableUserTransformableViewport(t) {
2148
- return this.hasTransformableViewport = !0, this.transformOptions = t, this;
2196
+ enableUserTransformableViewport(e) {
2197
+ return this.hasTransformableViewport = !0, this.transformOptions = e, this;
2149
2198
  }
2150
2199
  /**
2151
2200
  * enables automatic edges update on node resize
@@ -2156,51 +2205,51 @@ class Bt {
2156
2205
  /**
2157
2206
  * sets emitter for rendering graph inside bounded area
2158
2207
  */
2159
- enableBoxAreaRendering(t) {
2160
- return this.boxRenderingTrigger = t, this;
2208
+ enableBoxAreaRendering(e) {
2209
+ return this.boxRenderingTrigger = e, this;
2161
2210
  }
2162
- enableVirtualScroll(t) {
2163
- return this.virtualScrollOptions = t, this;
2211
+ enableVirtualScroll(e) {
2212
+ return this.virtualScrollOptions = e, this;
2164
2213
  }
2165
2214
  /**
2166
2215
  * builds final canvas
2167
2216
  */
2168
2217
  build() {
2169
- let t = this.boxRenderingTrigger;
2170
- this.virtualScrollOptions !== void 0 && t === void 0 && (t = new q());
2171
- const o = new zt(), r = new Yt();
2172
- let n = new Et(o, r);
2173
- t !== void 0 && (n = new At(n, o, t));
2174
- let h = new it(
2218
+ let e = this.boxRenderingTrigger;
2219
+ this.virtualScrollOptions !== void 0 && e === void 0 && (e = new te());
2220
+ const o = new Fe(), r = new Be();
2221
+ let n = new Ae(o, r);
2222
+ e !== void 0 && (n = new pe(n, o, e));
2223
+ let h = new ne(
2175
2224
  o,
2176
2225
  r,
2177
2226
  n
2178
2227
  );
2179
- this.hasResizeReactiveNodes && (h = new wt(h)), this.hasDraggableNode && (h = new nt(
2228
+ this.hasDraggableNode && (h = new de(
2180
2229
  h,
2181
2230
  this.dragOptions
2182
- )), this.virtualScrollOptions !== void 0 ? h = new yt(
2231
+ )), this.virtualScrollOptions !== void 0 ? h = new fe(
2183
2232
  h,
2184
- t,
2233
+ e,
2185
2234
  this.transformOptions,
2186
2235
  this.virtualScrollOptions
2187
- ) : this.hasTransformableViewport && (h = new O(
2236
+ ) : this.hasTransformableViewport && (h = new ee(
2188
2237
  h,
2189
2238
  this.transformOptions
2190
2239
  ));
2191
- const s = new kt(h, this.canvasDefaults);
2192
- return this.reset(), s;
2240
+ const s = new We(h, this.canvasDefaults);
2241
+ return this.hasResizeReactiveNodes && j.configure(s), this.reset(), s;
2193
2242
  }
2194
2243
  reset() {
2195
2244
  this.canvasDefaults = {}, this.dragOptions = void 0, this.transformOptions = void 0, this.virtualScrollOptions = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasResizeReactiveNodes = !1, this.boxRenderingTrigger = void 0;
2196
2245
  }
2197
2246
  }
2198
2247
  export {
2199
- Ct as BezierEdgeShape,
2200
- Bt as CanvasBuilder,
2201
- q as EventSubject,
2202
- $t as HorizontalEdgeShape,
2248
+ De as BezierEdgeShape,
2249
+ ze as CanvasBuilder,
2250
+ te as EventSubject,
2251
+ Ce as HorizontalEdgeShape,
2203
2252
  E as HtmlGraphError,
2204
- Wt as StraightEdgeShape,
2205
- It as VerticalEdgeShape
2253
+ Ue as StraightEdgeShape,
2254
+ $e as VerticalEdgeShape
2206
2255
  };