@html-graph/html-graph 3.5.1 → 3.7.0

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