@html-graph/html-graph 7.5.0 → 7.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html-graph.d.ts +4 -0
  2. package/dist/html-graph.js +681 -675
  3. package/dist/html-graph.umd.cjs +1 -1
  4. package/package.json +1 -1
package/dist/html-graph.js CHANGED
@@ -1,11 +1,7 @@
1
1
  var ze = Object.defineProperty;
2
2
  var ke = (r, e, t) => e in r ? ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
3
  var i = (r, e, t) => ke(r, typeof e != "symbol" ? e + "" : e, t);
4
- const C = (r, e) => ({
5
- x: r.scale * e.x + r.x,
6
- y: r.scale * e.y + r.y
7
- });
8
- var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
4
+ var M = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(M || {});
9
5
  const He = () => {
10
6
  const r = document.createElement("div");
11
7
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
@@ -16,7 +12,7 @@ const He = () => {
16
12
  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
17
13
  };
18
14
  class me {
19
- constructor(e, t, s) {
15
+ constructor(e, t, o) {
20
16
  i(this, "host", He());
21
17
  i(this, "container", Xe());
22
18
  i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
@@ -25,7 +21,7 @@ class me {
25
21
  const e = this.viewportStore.getContentMatrix();
26
22
  this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
27
23
  });
28
- this.graphStore = e, this.viewportStore = t, this.element = s, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
24
+ this.graphStore = e, this.viewportStore = t, this.element = o, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
29
25
  }
30
26
  attachNode(e) {
31
27
  const t = this.graphStore.getNode(e);
@@ -54,7 +50,7 @@ class me {
54
50
  this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
55
51
  }
56
52
  updateNodePosition(e) {
57
- const t = this.graphStore.getNode(e), { width: s, height: o } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(s, o), d = a.x - n * h.x, c = a.y - n * h.y;
53
+ const t = this.graphStore.getNode(e), { width: o, height: s } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(o, s), d = a.x - n * h.x, c = a.y - n * h.y;
58
54
  t.element.style.transform = `translate(${d}px, ${c}px)`;
59
55
  }
60
56
  updateNodePriority(e) {
@@ -64,38 +60,33 @@ class me {
64
60
  updateEdgeShape(e) {
65
61
  const t = this.edgeIdToElementMap.get(e);
66
62
  this.container.removeChild(t);
67
- const o = this.graphStore.getEdge(e).payload.shape.svg;
68
- this.edgeIdToElementMap.set(e, o), this.container.appendChild(o);
63
+ const s = this.graphStore.getEdge(e).payload.shape.svg;
64
+ this.edgeIdToElementMap.set(e, s), this.container.appendChild(s);
69
65
  }
70
66
  renderEdge(e) {
71
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
72
- s,
73
- n,
74
- h,
75
- d
76
- ), g = this.createEdgeRenderPort(
67
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to), n = o.element.getBoundingClientRect(), a = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix().scale, c = this.createEdgeRenderPort(
77
68
  o,
78
- a,
69
+ n,
79
70
  h,
80
71
  d
81
- );
82
- let l = R.Line;
83
- s.element === o.element ? l = R.PortCycle : s.nodeId === o.nodeId && (l = R.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
72
+ ), g = this.createEdgeRenderPort(s, a, h, d);
73
+ let l = M.Line;
74
+ o.element === s.element ? l = M.PortCycle : o.nodeId === s.nodeId && (l = M.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
84
75
  }
85
76
  updateEdgePriority(e) {
86
77
  const t = this.graphStore.getEdge(e);
87
78
  t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
88
79
  }
89
- createEdgeRenderPort(e, t, s, o) {
90
- const n = {
91
- x: t.left - s.left,
92
- y: t.top - s.top
93
- }, a = C(o, n);
80
+ createEdgeRenderPort(e, t, o, s) {
81
+ const n = this.viewportStore.createContentCoords({
82
+ x: t.left - o.left,
83
+ y: t.top - o.top
84
+ });
94
85
  return {
95
- x: a.x,
96
- y: a.y,
97
- width: t.width * o.scale,
98
- height: t.height * o.scale,
86
+ x: n.x,
87
+ y: n.y,
88
+ width: t.width * s,
89
+ height: t.height * s,
99
90
  direction: e.payload.direction
100
91
  };
101
92
  }
@@ -112,39 +103,39 @@ class Ge {
112
103
  this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
113
104
  }
114
105
  hasNode(e) {
115
- const t = this.graphStore.getNode(e).payload, { x: s, y: o } = t;
116
- return s >= this.xFrom && s <= this.xTo && o >= this.yFrom && o <= this.yTo;
106
+ const t = this.graphStore.getNode(e).payload, { x: o, y: s } = t;
107
+ return o >= this.xFrom && o <= this.xTo && s >= this.yFrom && s <= this.yTo;
117
108
  }
118
109
  hasEdge(e) {
119
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(o).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
110
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
120
111
  return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
121
112
  }
122
113
  }
123
114
  class je {
124
- constructor(e, t, s, o) {
115
+ constructor(e, t, o, s) {
125
116
  i(this, "attachedNodes", /* @__PURE__ */ new Set());
126
117
  i(this, "attachedEdges", /* @__PURE__ */ new Set());
127
118
  i(this, "renderingBox");
128
119
  i(this, "updateViewport", (e) => {
129
120
  this.renderingBox.setRenderingBox(e);
130
- const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
121
+ const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
131
122
  this.graphStore.getAllNodeIds().forEach((a) => {
132
123
  const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
133
- h && !d ? t.add(a) : !h && d && s.add(a);
124
+ h && !d ? t.add(a) : !h && d && o.add(a);
134
125
  }), this.graphStore.getAllEdgeIds().forEach((a) => {
135
126
  const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), g = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
136
- h && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), h && !d ? o.add(a) : !h && d && n.add(a);
127
+ h && (this.renderingBox.hasNode(g) || (t.add(g), o.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), o.delete(l))), h && !d ? s.add(a) : !h && d && n.add(a);
137
128
  }), n.forEach((a) => {
138
129
  this.handleDetachEdge(a);
139
- }), s.forEach((a) => {
130
+ }), o.forEach((a) => {
140
131
  this.handleDetachNode(a);
141
132
  }), t.forEach((a) => {
142
133
  this.attachedNodes.has(a) || this.handleAttachNode(a);
143
- }), o.forEach((a) => {
134
+ }), s.forEach((a) => {
144
135
  this.handleAttachEdge(a);
145
136
  });
146
137
  });
147
- this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
138
+ this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
148
139
  }
149
140
  attachNode(e) {
150
141
  this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -182,8 +173,8 @@ class je {
182
173
  this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
183
174
  }
184
175
  attachEdgeEntities(e) {
185
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId;
186
- this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(o) || this.handleAttachNode(o), this.handleAttachEdge(e);
176
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId;
177
+ this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(s) || this.handleAttachNode(s), this.handleAttachEdge(e);
187
178
  }
188
179
  handleAttachNode(e) {
189
180
  this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
@@ -245,14 +236,14 @@ class qe {
245
236
  this.isNodeValid(e) && (this.deferredNodes.delete(e), this.htmlView.attachNode(e));
246
237
  }
247
238
  isEdgeValid(e) {
248
- const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to);
249
- return !(this.deferredNodes.has(s.nodeId) || this.deferredNodes.has(o.nodeId));
239
+ const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to);
240
+ return !(this.deferredNodes.has(o.nodeId) || this.deferredNodes.has(s.nodeId));
250
241
  }
251
242
  tryAttachEdge(e) {
252
243
  this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
253
244
  }
254
245
  }
255
- class j {
246
+ class G {
256
247
  constructor() {
257
248
  i(this, "callbacks", /* @__PURE__ */ new Set());
258
249
  }
@@ -269,10 +260,10 @@ class j {
269
260
  }
270
261
  }
271
262
  const E = () => {
272
- const r = new j();
263
+ const r = new G();
273
264
  return [r, r];
274
265
  };
275
- class X {
266
+ class H {
276
267
  constructor(e) {
277
268
  i(this, "counter", 0);
278
269
  this.checkExists = e;
@@ -295,22 +286,22 @@ class b extends Error {
295
286
  }
296
287
  }
297
288
  class ve {
298
- constructor(e, t, s, o, n, a) {
299
- i(this, "nodeIdGenerator", new X(
289
+ constructor(e, t, o, s, n, a) {
290
+ i(this, "nodeIdGenerator", new H(
300
291
  (e) => this.graphStore.getNode(e) !== void 0
301
292
  ));
302
- i(this, "portIdGenerator", new X(
293
+ i(this, "portIdGenerator", new H(
303
294
  (e) => this.graphStore.getPort(e) !== void 0
304
295
  ));
305
- i(this, "edgeIdGenerator", new X(
296
+ i(this, "edgeIdGenerator", new H(
306
297
  (e) => this.graphStore.getEdge(e) !== void 0
307
298
  ));
308
299
  i(this, "onAfterNodeAdded", (e) => {
309
300
  this.htmlView.attachNode(e);
310
301
  });
311
302
  i(this, "onAfterNodeUpdated", (e) => {
312
- this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((s) => {
313
- this.htmlView.renderEdge(s);
303
+ this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
304
+ this.htmlView.renderEdge(o);
314
305
  });
315
306
  });
316
307
  i(this, "onAfterNodePriorityUpdated", (e) => {
@@ -322,8 +313,8 @@ class ve {
322
313
  }), this.htmlView.detachNode(e);
323
314
  });
324
315
  i(this, "onAfterPortUpdated", (e) => {
325
- this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
326
- this.htmlView.renderEdge(s);
316
+ this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
317
+ this.htmlView.renderEdge(o);
327
318
  });
328
319
  });
329
320
  i(this, "onBeforePortUnmarked", (e) => {
@@ -355,7 +346,7 @@ class ve {
355
346
  * emits event just before destruction of canvas
356
347
  */
357
348
  i(this, "onBeforeDestroy");
358
- this.graph = e, this.viewport = t, this.graphStore = s, this.viewportStore = o, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
349
+ this.graph = e, this.viewport = t, this.graphStore = o, this.viewportStore = s, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
359
350
  this.onAfterNodePriorityUpdated
360
351
  ), 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(
361
352
  this.onAfterEdgeShapeUpdated
@@ -382,12 +373,12 @@ class ve {
382
373
  centerFn: e.centerFn ?? this.params.nodes.centerFn,
383
374
  priority: e.priority ?? this.params.nodes.priorityFn()
384
375
  }), e.ports !== void 0)
385
- for (const s of e.ports)
376
+ for (const o of e.ports)
386
377
  this.markPort({
387
- id: s.id,
388
- element: s.element,
378
+ id: o.id,
379
+ element: o.element,
389
380
  nodeId: t,
390
- direction: s.direction
381
+ direction: o.direction
391
382
  });
392
383
  return this;
393
384
  }
@@ -516,31 +507,31 @@ class Ke {
516
507
  i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
517
508
  }
518
509
  addRecord(e, t) {
519
- const s = this.singleToMultiMap.get(e);
520
- s === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : s.add(t), this.multiToSingleMap.set(t, e);
510
+ const o = this.singleToMultiMap.get(e);
511
+ o === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : o.add(t), this.multiToSingleMap.set(t, e);
521
512
  }
522
513
  getMultiBySingle(e) {
523
514
  const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
524
515
  return Array.from(t.values());
525
516
  }
526
517
  removeByMulti(e) {
527
- const t = this.multiToSingleMap.get(e), s = this.singleToMultiMap.get(t);
528
- s.delete(e), s.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
518
+ const t = this.multiToSingleMap.get(e), o = this.singleToMultiMap.get(t);
519
+ o.delete(e), o.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
529
520
  }
530
521
  getByMulti(e) {
531
522
  return this.multiToSingleMap.get(e);
532
523
  }
533
524
  removeBySingle(e) {
534
- this.singleToMultiMap.get(e).forEach((s) => {
535
- this.multiToSingleMap.delete(s);
525
+ this.singleToMultiMap.get(e).forEach((o) => {
526
+ this.multiToSingleMap.delete(o);
536
527
  }), this.singleToMultiMap.delete(e);
537
528
  }
538
529
  clear() {
539
530
  this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
540
531
  }
541
532
  forEachSingle(e) {
542
- this.singleToMultiMap.forEach((t, s) => {
543
- e(s);
533
+ this.singleToMultiMap.forEach((t, o) => {
534
+ e(o);
544
535
  });
545
536
  }
546
537
  hasSingle(e) {
@@ -589,7 +580,7 @@ class Ae {
589
580
  [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();
590
581
  }
591
582
  addNode(e) {
592
- const t = /* @__PURE__ */ new Map(), s = {
583
+ const t = /* @__PURE__ */ new Map(), o = {
593
584
  element: e.element,
594
585
  payload: {
595
586
  x: e.x,
@@ -599,7 +590,7 @@ class Ae {
599
590
  },
600
591
  ports: t
601
592
  };
602
- this.nodes.set(e.id, s), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
593
+ this.nodes.set(e.id, o), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
603
594
  }
604
595
  getAllNodeIds() {
605
596
  return Array.from(this.nodes.keys());
@@ -611,8 +602,8 @@ class Ae {
611
602
  return this.nodesElementsMap.get(e);
612
603
  }
613
604
  updateNode(e, t) {
614
- const s = this.nodes.get(e).payload;
615
- s.x = t.x ?? s.x, s.y = t.y ?? s.y, s.centerFn = t.centerFn ?? s.centerFn, t.priority !== void 0 && (s.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
605
+ const o = this.nodes.get(e).payload;
606
+ o.x = t.x ?? o.x, o.y = t.y ?? o.y, o.centerFn = t.centerFn ?? o.centerFn, t.priority !== void 0 && (o.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
616
607
  }
617
608
  removeNode(e) {
618
609
  this.beforeNodeRemovedEmitter.emit(e);
@@ -632,8 +623,8 @@ class Ae {
632
623
  return this.ports.get(e);
633
624
  }
634
625
  updatePort(e, t) {
635
- const s = this.ports.get(e).payload;
636
- s.direction = t.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(e);
626
+ const o = this.ports.get(e).payload;
627
+ o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
637
628
  }
638
629
  getAllPortIds() {
639
630
  return Array.from(this.ports.keys());
@@ -655,17 +646,17 @@ class Ae {
655
646
  }
656
647
  updateEdge(e, t) {
657
648
  if (t.from !== void 0 || t.to !== void 0) {
658
- const o = this.edges.get(e), n = o.payload;
649
+ const s = this.edges.get(e), n = s.payload;
659
650
  this.removeEdgeInternal(e), this.addEdgeInternal({
660
651
  id: e,
661
- from: t.from ?? o.from,
662
- to: t.to ?? o.to,
652
+ from: t.from ?? s.from,
653
+ to: t.to ?? s.to,
663
654
  shape: n.shape,
664
655
  priority: n.priority
665
656
  });
666
657
  }
667
- const s = this.edges.get(e);
668
- t.shape !== void 0 && (s.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (s.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
658
+ const o = this.edges.get(e);
659
+ t.shape !== void 0 && (o.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (o.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
669
660
  }
670
661
  getAllEdgeIds() {
671
662
  return Array.from(this.edges.keys());
@@ -696,51 +687,51 @@ class Ae {
696
687
  ];
697
688
  }
698
689
  getNodeIncomingEdgeIds(e) {
699
- const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
700
- return t.forEach((o) => {
701
- this.getPortIncomingEdgeIds(o).filter((n) => {
690
+ const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
691
+ return t.forEach((s) => {
692
+ this.getPortIncomingEdgeIds(s).filter((n) => {
702
693
  const a = this.getEdge(n);
703
694
  return this.getPort(a.from).nodeId !== e;
704
695
  }).forEach((n) => {
705
- s.push(n);
696
+ o.push(n);
706
697
  });
707
- }), s;
698
+ }), o;
708
699
  }
709
700
  getNodeOutgoingEdgeIds(e) {
710
- const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
711
- return t.forEach((o) => {
712
- this.getPortOutgoingEdgeIds(o).filter((n) => {
701
+ const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
702
+ return t.forEach((s) => {
703
+ this.getPortOutgoingEdgeIds(s).filter((n) => {
713
704
  const a = this.getEdge(n);
714
705
  return this.getPort(a.to).nodeId !== e;
715
706
  }).forEach((n) => {
716
- s.push(n);
707
+ o.push(n);
717
708
  });
718
- }), s;
709
+ }), o;
719
710
  }
720
711
  getNodeCycleEdgeIds(e) {
721
- const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
722
- return t.forEach((o) => {
723
- this.getPortCycleEdgeIds(o).forEach((n) => {
724
- s.push(n);
725
- }), this.getPortIncomingEdgeIds(o).filter((n) => {
712
+ const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
713
+ return t.forEach((s) => {
714
+ this.getPortCycleEdgeIds(s).forEach((n) => {
715
+ o.push(n);
716
+ }), this.getPortIncomingEdgeIds(s).filter((n) => {
726
717
  const a = this.getEdge(n);
727
718
  return this.getPort(a.to).nodeId === e;
728
719
  }).forEach((n) => {
729
- s.push(n);
720
+ o.push(n);
730
721
  });
731
- }), s;
722
+ }), o;
732
723
  }
733
724
  getNodeAdjacentEdgeIds(e) {
734
- const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
735
- return t.forEach((o) => {
736
- this.getPortIncomingEdgeIds(o).forEach((n) => {
737
- s.push(n);
738
- }), this.getPortOutgoingEdgeIds(o).forEach((n) => {
739
- s.push(n);
740
- }), this.getPortCycleEdgeIds(o).forEach((n) => {
741
- s.push(n);
725
+ const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
726
+ return t.forEach((s) => {
727
+ this.getPortIncomingEdgeIds(s).forEach((n) => {
728
+ o.push(n);
729
+ }), this.getPortOutgoingEdgeIds(s).forEach((n) => {
730
+ o.push(n);
731
+ }), this.getPortCycleEdgeIds(s).forEach((n) => {
732
+ o.push(n);
742
733
  });
743
- }), s;
734
+ }), o;
744
735
  }
745
736
  addEdgeInternal(e) {
746
737
  this.edges.set(e.id, {
@@ -753,23 +744,26 @@ class Ae {
753
744
  }), e.from !== e.to ? (this.portOutcomingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id)) : this.portCycleEdges.get(e.from).add(e.id);
754
745
  }
755
746
  removeEdgeInternal(e) {
756
- const t = this.edges.get(e), s = t.from, o = t.to;
757
- this.portCycleEdges.get(s).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(s).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutcomingEdges.get(s).delete(e), this.portOutcomingEdges.get(o).delete(e), this.edges.delete(e);
747
+ const t = this.edges.get(e), o = t.from, s = t.to;
748
+ this.portCycleEdges.get(o).delete(e), this.portCycleEdges.get(s).delete(e), this.portIncomingEdges.get(o).delete(e), this.portIncomingEdges.get(s).delete(e), this.portOutcomingEdges.get(o).delete(e), this.portOutcomingEdges.get(s).delete(e), this.edges.delete(e);
758
749
  }
759
750
  }
760
- const ce = (r) => ({
751
+ const de = (r) => ({
761
752
  scale: 1 / r.scale,
762
753
  x: -r.x / r.scale,
763
754
  y: -r.y / r.scale
764
- }), le = {
755
+ }), ce = {
765
756
  scale: 1,
766
757
  x: 0,
767
758
  y: 0
768
- };
759
+ }, le = (r, e) => ({
760
+ x: r.scale * e.x + r.x,
761
+ y: r.scale * e.y + r.y
762
+ });
769
763
  class Qe {
770
764
  constructor(e) {
771
- i(this, "viewportMatrix", le);
772
- i(this, "contentMatrix", le);
765
+ i(this, "viewportMatrix", ce);
766
+ i(this, "contentMatrix", ce);
773
767
  i(this, "beforeUpdateEmitter");
774
768
  i(this, "onBeforeUpdated");
775
769
  i(this, "afterUpdateEmitter");
@@ -792,24 +786,30 @@ class Qe {
792
786
  scale: e.scale ?? this.viewportMatrix.scale,
793
787
  x: e.x ?? this.viewportMatrix.x,
794
788
  y: e.y ?? this.viewportMatrix.y
795
- }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ce(this.viewportMatrix), this.afterUpdateEmitter.emit();
789
+ }, this.beforeUpdateEmitter.emit(), this.contentMatrix = de(this.viewportMatrix), this.afterUpdateEmitter.emit();
796
790
  }
797
791
  patchContentMatrix(e) {
798
792
  this.contentMatrix = {
799
793
  scale: e.scale ?? this.contentMatrix.scale,
800
794
  x: e.x ?? this.contentMatrix.x,
801
795
  y: e.y ?? this.contentMatrix.y
802
- }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = ce(this.contentMatrix), this.afterUpdateEmitter.emit();
796
+ }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = de(this.contentMatrix), this.afterUpdateEmitter.emit();
803
797
  }
804
798
  getDimensions() {
805
799
  const { width: e, height: t } = this.host.getBoundingClientRect();
806
800
  return { width: e, height: t };
807
801
  }
802
+ createContentCoords(e) {
803
+ return le(this.viewportMatrix, e);
804
+ }
805
+ createViewportCoords(e) {
806
+ return le(this.contentMatrix, e);
807
+ }
808
808
  destroy() {
809
809
  this.observer.disconnect();
810
810
  }
811
811
  }
812
- class q {
812
+ class j {
813
813
  constructor(e) {
814
814
  i(this, "elementToNodeId", /* @__PURE__ */ new Map());
815
815
  i(this, "nodesResizeObserver");
@@ -825,14 +825,14 @@ class q {
825
825
  this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
826
826
  });
827
827
  this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
828
- t.forEach((s) => {
829
- const o = s.target;
830
- this.handleNodeResize(o);
828
+ t.forEach((o) => {
829
+ const s = o.target;
830
+ this.handleNodeResize(s);
831
831
  });
832
832
  }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
833
833
  }
834
834
  static configure(e) {
835
- new q(e);
835
+ new j(e);
836
836
  }
837
837
  handleNodeResize(e) {
838
838
  const t = this.elementToNodeId.get(e);
@@ -840,20 +840,20 @@ class q {
840
840
  }
841
841
  }
842
842
  const Ze = (r, e, t) => {
843
- const { x: s, y: o, width: n, height: a } = r.getBoundingClientRect();
844
- return e >= s && e <= s + n && t >= o && t <= o + a;
845
- }, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => Ze(e, t, s) && Je(r, t, s), U = (r, e) => {
843
+ const { x: o, y: s, width: n, height: a } = r.getBoundingClientRect();
844
+ return e >= o && e <= o + n && t >= s && t <= s + a;
845
+ }, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, o) => Ze(e, t, o) && Je(r, t, o), $ = (r, e) => {
846
846
  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
847
- }, B = (r) => {
847
+ }, U = (r) => {
848
848
  const e = document.createElement("div");
849
849
  return {
850
- id: r.overlayId,
850
+ id: r.overlayNodeId,
851
851
  element: e,
852
852
  x: r.portCoords.x,
853
853
  y: r.portCoords.y,
854
854
  ports: [
855
855
  {
856
- id: r.overlayId,
856
+ id: r.overlayNodeId,
857
857
  element: e,
858
858
  direction: r.portDirection
859
859
  }
@@ -862,11 +862,11 @@ const Ze = (r, e, t) => {
862
862
  }, _e = (r, e) => {
863
863
  let t = e;
864
864
  for (; t !== null; ) {
865
- const s = r.getElementPortIds(t)[0] ?? null;
866
- if (s !== null)
865
+ const o = r.getElementPortIds(t)[0] ?? null;
866
+ if (o !== null)
867
867
  return {
868
868
  status: "portFound",
869
- portId: s
869
+ portId: o
870
870
  };
871
871
  if (r.getElementNodeId(t) !== null)
872
872
  return {
@@ -880,27 +880,27 @@ const Ze = (r, e, t) => {
880
880
  };
881
881
  function* Ee(r, e) {
882
882
  const t = r.elementsFromPoint(e.x, e.y);
883
- for (const s of t) {
884
- if (s.shadowRoot !== null) {
885
- const o = Ee(s.shadowRoot, e);
886
- for (const n of o)
883
+ for (const o of t) {
884
+ if (o.shadowRoot !== null) {
885
+ const s = Ee(o.shadowRoot, e);
886
+ for (const n of s)
887
887
  yield n;
888
888
  }
889
- yield s;
889
+ yield o;
890
890
  }
891
891
  }
892
892
  const xe = (r, e) => {
893
893
  const t = Ee(document, e);
894
- for (const s of t) {
895
- const o = _e(r, s);
896
- if (o.status === "portFound")
897
- return o.portId;
898
- if (o.status === "nodeEncountered")
894
+ for (const o of t) {
895
+ const s = _e(r, o);
896
+ if (s.status === "portFound")
897
+ return s.portId;
898
+ if (s.status === "nodeEncountered")
899
899
  return null;
900
900
  }
901
901
  return null;
902
902
  };
903
- var T = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(T || {});
903
+ var T = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(T || {});
904
904
  const Se = (r, e) => ({
905
905
  x: r / 2,
906
906
  y: e / 2
@@ -914,21 +914,21 @@ const Se = (r, e) => ({
914
914
  const t = {
915
915
  x: r.x + r.width / 2,
916
916
  y: r.y + r.height / 2
917
- }, s = {
917
+ }, o = {
918
918
  x: e.x + e.width / 2,
919
919
  y: e.y + e.height / 2
920
- }, o = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
920
+ }, s = Math.min(t.x, o.x), n = Math.min(t.y, o.y), a = Math.abs(o.x - t.x), h = Math.abs(o.y - t.y), d = t.x <= o.x ? 1 : -1, c = t.y <= o.y ? 1 : -1;
921
921
  return {
922
- x: o,
922
+ x: s,
923
923
  y: n,
924
924
  width: a,
925
925
  height: h,
926
926
  flipX: d,
927
927
  flipY: c
928
928
  };
929
- }, W = (r, e, t, s) => ({
930
- x: e * r.x + (1 - e) / 2 * s.x,
931
- y: t * r.y + (1 - t) / 2 * s.y
929
+ }, O = (r, e, t, o) => ({
930
+ x: e * r.x + (1 - e) / 2 * o.x,
931
+ y: t * r.y + (1 - t) / 2 * o.y
932
932
  });
933
933
  class et {
934
934
  constructor(e) {
@@ -937,21 +937,21 @@ class et {
937
937
  this.params = e;
938
938
  const t = this.params.to;
939
939
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
940
- const s = m(
940
+ const o = m(
941
941
  { x: this.params.arrowLength, y: p.y },
942
942
  this.params.sourceDirection,
943
943
  p
944
- ), o = m(
944
+ ), s = m(
945
945
  { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
946
946
  this.params.targetDirection,
947
947
  this.params.to
948
948
  ), n = {
949
- x: s.x + this.params.sourceDirection.x * this.params.curvature,
950
- y: s.y + this.params.sourceDirection.y * this.params.curvature
949
+ x: o.x + this.params.sourceDirection.x * this.params.curvature,
950
+ y: o.y + this.params.sourceDirection.y * this.params.curvature
951
951
  }, a = {
952
- x: o.x - this.params.targetDirection.x * this.params.curvature,
953
- y: o.y - this.params.targetDirection.y * this.params.curvature
954
- }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${o.x} ${o.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${this.params.to.x} ${this.params.to.y}`;
952
+ x: s.x - this.params.targetDirection.x * this.params.curvature,
953
+ y: s.y - this.params.targetDirection.y * this.params.curvature
954
+ }, h = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${s.x} ${s.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${o.x} ${o.y} `, c = this.params.hasTargetArrow ? "" : ` M ${s.x} ${s.y} L ${this.params.to.x} ${this.params.to.y}`;
955
955
  this.path = `${d}${h}${c}`;
956
956
  }
957
957
  }
@@ -964,22 +964,22 @@ class tt {
964
964
  { x: this.params.arrowLength, y: p.y },
965
965
  this.params.sourceDirection,
966
966
  p
967
- ) : p, s = this.params.hasTargetArrow ? m(
967
+ ) : p, o = this.params.hasTargetArrow ? m(
968
968
  {
969
969
  x: this.params.to.x - this.params.arrowLength,
970
970
  y: this.params.to.y
971
971
  },
972
972
  this.params.targetDirection,
973
973
  this.params.to
974
- ) : this.params.to, o = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
975
- { x: o, y: p.y },
974
+ ) : this.params.to, s = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
975
+ { x: s, y: p.y },
976
976
  this.params.sourceDirection,
977
977
  p
978
978
  ), g = {
979
979
  x: c.x + h,
980
980
  y: c.y + d
981
981
  }, l = m(
982
- { x: this.params.to.x - o, y: this.params.to.y },
982
+ { x: this.params.to.x - s, y: this.params.to.y },
983
983
  this.params.targetDirection,
984
984
  this.params.to
985
985
  ), u = {
@@ -1006,40 +1006,40 @@ class tt {
1006
1006
  `L ${c.x} ${c.y}`,
1007
1007
  `C ${y.x} ${y.y} ${x.x} ${x.y} ${w.x} ${w.y}`,
1008
1008
  `C ${S.x} ${S.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
1009
- `L ${s.x} ${s.y}`
1010
- ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
1009
+ `L ${o.x} ${o.y}`
1010
+ ].join(" "), this.midpoint = O(w, e.flipX, e.flipY, e.to);
1011
1011
  }
1012
1012
  }
1013
- const K = Object.freeze({
1013
+ const q = Object.freeze({
1014
1014
  edgeColor: "--edge-color"
1015
1015
  }), Pe = (r) => {
1016
1016
  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1017
- return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
1017
+ return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(q.edgeColor, r), e;
1018
1018
  }, Te = (r) => {
1019
1019
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1020
- return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1021
- }, O = () => {
1020
+ return e.setAttribute("stroke", `var(${q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1021
+ }, B = () => {
1022
1022
  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
1023
- return r.setAttribute("fill", `var(${K.edgeColor})`), r;
1024
- }, De = () => {
1023
+ return r.setAttribute("fill", `var(${q.edgeColor})`), r;
1024
+ }, Ce = () => {
1025
1025
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1026
1026
  return r.style.transformOrigin = "50% 50%", r;
1027
- }, Ce = (r, e) => {
1027
+ }, De = (r, e) => {
1028
1028
  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
1029
- }, L = (r, e) => {
1029
+ }, N = (r, e) => {
1030
1030
  const t = [];
1031
1031
  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
1032
- const s = r.length - 1;
1033
- let o = 0, n = 0, a = 0;
1032
+ const o = r.length - 1;
1033
+ let s = 0, n = 0, a = 0;
1034
1034
  r.forEach((h, d) => {
1035
1035
  let c = 0, g = 0, l = 0;
1036
- const u = d > 0, w = d < s, y = u && w;
1037
- if (u && (c = -o, g = -n, l = a), w) {
1038
- const F = r[d + 1];
1039
- o = F.x - h.x, n = F.y - h.y, a = Math.sqrt(o * o + n * n);
1036
+ const u = d > 0, w = d < o, y = u && w;
1037
+ if (u && (c = -s, g = -n, l = a), w) {
1038
+ const V = r[d + 1];
1039
+ s = V.x - h.x, n = V.y - h.y, a = Math.sqrt(s * s + n * n);
1040
1040
  }
1041
- const x = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * x, y: h.y + n * x } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * P, y: h.y + g * P } : h;
1042
- d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
1041
+ const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + s * x, y: h.y + n * x } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, R = y ? { x: h.x + c * P, y: h.y + g * P } : h;
1042
+ d > 0 && t.push(`L ${R.x} ${R.y}`), y && t.push(
1043
1043
  `C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`
1044
1044
  );
1045
1045
  });
@@ -1053,11 +1053,11 @@ class rt {
1053
1053
  this.params = e;
1054
1054
  const t = this.params.to;
1055
1055
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1056
- const s = this.params.hasSourceArrow ? m(
1056
+ const o = this.params.hasSourceArrow ? m(
1057
1057
  { x: this.params.arrowLength, y: p.y },
1058
1058
  this.params.sourceDirection,
1059
1059
  p
1060
- ) : p, o = this.params.hasTargetArrow ? m(
1060
+ ) : p, s = this.params.hasTargetArrow ? m(
1061
1061
  {
1062
1062
  x: this.params.to.x - this.params.arrowLength,
1063
1063
  y: this.params.to.y
@@ -1079,13 +1079,13 @@ class rt {
1079
1079
  x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
1080
1080
  y: d.y
1081
1081
  }, y = { x: w.x, y: g };
1082
- this.path = L(
1083
- [s, h, l, u, y, w, d, o],
1082
+ this.path = N(
1083
+ [o, h, l, u, y, w, d, s],
1084
1084
  this.params.roundness
1085
1085
  );
1086
1086
  }
1087
1087
  }
1088
- class st {
1088
+ class ot {
1089
1089
  constructor(e) {
1090
1090
  i(this, "path");
1091
1091
  i(this, "midpoint");
@@ -1094,40 +1094,40 @@ class st {
1094
1094
  { x: this.params.arrowLength, y: p.y },
1095
1095
  this.params.sourceDirection,
1096
1096
  p
1097
- ) : p, s = this.params.hasTargetArrow ? m(
1097
+ ) : p, o = this.params.hasTargetArrow ? m(
1098
1098
  {
1099
1099
  x: this.params.to.x - this.params.arrowLength,
1100
1100
  y: this.params.to.y
1101
1101
  },
1102
1102
  this.params.targetDirection,
1103
1103
  this.params.to
1104
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1105
- { x: o, y: p.y },
1104
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1105
+ { x: s, y: p.y },
1106
1106
  this.params.sourceDirection,
1107
1107
  p
1108
1108
  ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
1109
- { x: this.params.to.x - o, y: this.params.to.y },
1109
+ { x: this.params.to.x - s, y: this.params.to.y },
1110
1110
  this.params.targetDirection,
1111
1111
  this.params.to
1112
1112
  ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
1113
- this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = L(
1114
- [t, n, g, u, l, s],
1113
+ this.midpoint = O(w, e.flipX, e.flipY, e.to), this.path = N(
1114
+ [t, n, g, u, l, o],
1115
1115
  this.params.roundness
1116
1116
  );
1117
1117
  }
1118
1118
  }
1119
- class ot {
1119
+ class st {
1120
1120
  constructor(e) {
1121
1121
  i(this, "path");
1122
1122
  i(this, "midpoint");
1123
1123
  this.params = e;
1124
1124
  const t = this.params.to;
1125
1125
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1126
- const s = this.params.hasSourceArrow ? m(
1126
+ const o = this.params.hasSourceArrow ? m(
1127
1127
  { x: this.params.arrowLength, y: p.y },
1128
1128
  this.params.sourceDirection,
1129
1129
  p
1130
- ) : p, o = this.params.hasTargetArrow ? m(
1130
+ ) : p, s = this.params.hasTargetArrow ? m(
1131
1131
  {
1132
1132
  x: this.params.to.x - this.params.arrowLength,
1133
1133
  y: this.params.to.y
@@ -1143,7 +1143,7 @@ class ot {
1143
1143
  this.params.targetDirection,
1144
1144
  this.params.to
1145
1145
  );
1146
- this.path = L([s, a, h, o], this.params.roundness);
1146
+ this.path = N([o, a, h, s], this.params.roundness);
1147
1147
  }
1148
1148
  }
1149
1149
  class it {
@@ -1153,11 +1153,11 @@ class it {
1153
1153
  this.params = e;
1154
1154
  const t = this.params.to;
1155
1155
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1156
- const s = this.params.hasSourceArrow ? m(
1156
+ const o = this.params.hasSourceArrow ? m(
1157
1157
  { x: this.params.arrowLength, y: p.y },
1158
1158
  this.params.sourceDirection,
1159
1159
  p
1160
- ) : p, o = this.params.hasTargetArrow ? m(
1160
+ ) : p, s = this.params.hasTargetArrow ? m(
1161
1161
  {
1162
1162
  x: this.params.to.x - this.params.arrowLength,
1163
1163
  y: this.params.to.y
@@ -1179,30 +1179,30 @@ class it {
1179
1179
  x: d.x,
1180
1180
  y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
1181
1181
  }, y = { x: g, y: w.y };
1182
- this.path = L(
1183
- [s, h, l, u, y, w, d, o],
1182
+ this.path = N(
1183
+ [o, h, l, u, y, w, d, s],
1184
1184
  this.params.roundness
1185
1185
  );
1186
1186
  }
1187
1187
  }
1188
- class Q {
1188
+ class K {
1189
1189
  constructor(e) {
1190
1190
  i(this, "path");
1191
1191
  i(this, "midpoint");
1192
1192
  this.params = e;
1193
- const t = this.params.arrowOffset, s = this.params.side, o = this.params.arrowLength + t, n = o + 2 * s, h = [
1193
+ const t = this.params.arrowOffset, o = this.params.side, s = this.params.arrowLength + t, n = s + 2 * o, h = [
1194
1194
  { x: this.params.arrowLength, y: p.y },
1195
- { x: o, y: p.y },
1196
- { x: o, y: this.params.side },
1195
+ { x: s, y: p.y },
1196
+ { x: s, y: this.params.side },
1197
1197
  { x: n, y: this.params.side },
1198
1198
  { x: n, y: -this.params.side },
1199
- { x: o, y: -this.params.side },
1200
- { x: o, y: p.y },
1199
+ { x: s, y: -this.params.side },
1200
+ { x: s, y: p.y },
1201
1201
  { x: this.params.arrowLength, y: p.y }
1202
1202
  ].map(
1203
1203
  (c) => m(c, this.params.sourceDirection, p)
1204
1204
  ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
1205
- this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
1205
+ this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${N(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
1206
1206
  }
1207
1207
  }
1208
1208
  class nt {
@@ -1210,7 +1210,7 @@ class nt {
1210
1210
  i(this, "path");
1211
1211
  i(this, "midpoint");
1212
1212
  this.params = e;
1213
- const t = this.params.smallRadius, s = this.params.radius, o = t + s, n = t * s / o, a = Math.sqrt(o * o - t * t), h = a * t / o, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
1213
+ const t = this.params.smallRadius, o = this.params.radius, s = t + o, n = t * o / s, a = Math.sqrt(s * s - t * t), h = a * t / s, d = a + o + this.params.arrowLength, c = this.params.arrowLength + h, l = [
1214
1214
  { x: this.params.arrowLength, y: p.y },
1215
1215
  { x: c, y: n },
1216
1216
  { x: c, y: -n },
@@ -1220,7 +1220,7 @@ class nt {
1220
1220
  ), u = [
1221
1221
  `M ${l[0].x} ${l[0].y}`,
1222
1222
  `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
1223
- `A ${s} ${s} 0 1 0 ${l[2].x} ${l[2].y}`,
1223
+ `A ${o} ${o} 0 1 0 ${l[2].x} ${l[2].y}`,
1224
1224
  `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
1225
1225
  ].join(" "), w = `M 0 0 L ${l[0].x} ${l[0].y} `;
1226
1226
  this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
@@ -1241,7 +1241,7 @@ class at {
1241
1241
  this.path = "";
1242
1242
  return;
1243
1243
  }
1244
- const o = this.createDirectLinePoint({
1244
+ const s = this.createDirectLinePoint({
1245
1245
  offset: this.params.sourceOffset,
1246
1246
  hasArrow: this.params.hasSourceArrow,
1247
1247
  flip: 1,
@@ -1252,13 +1252,13 @@ class at {
1252
1252
  flip: -1,
1253
1253
  shift: this.params.to
1254
1254
  });
1255
- this.path = `M ${o.x} ${o.y} L ${n.x} ${n.y}`;
1255
+ this.path = `M ${s.x} ${s.y} L ${n.x} ${n.y}`;
1256
1256
  }
1257
1257
  createDirectLinePoint(e) {
1258
- const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, o = e.flip * s / this.diagonalDistance;
1258
+ const t = e.hasArrow ? this.params.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance;
1259
1259
  return {
1260
- x: this.params.to.x * o + e.shift.x,
1261
- y: this.params.to.y * o + e.shift.y
1260
+ x: this.params.to.x * s + e.shift.x,
1261
+ y: this.params.to.y * s + e.shift.y
1262
1262
  };
1263
1263
  }
1264
1264
  }
@@ -1271,33 +1271,33 @@ class ht {
1271
1271
  { x: this.params.arrowLength, y: p.y },
1272
1272
  this.params.sourceDirection,
1273
1273
  p
1274
- ) : p, s = this.params.hasTargetArrow ? m(
1274
+ ) : p, o = this.params.hasTargetArrow ? m(
1275
1275
  {
1276
1276
  x: this.params.to.x - this.params.arrowLength,
1277
1277
  y: this.params.to.y
1278
1278
  },
1279
1279
  this.params.targetDirection,
1280
1280
  this.params.to
1281
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1282
- { x: o, y: p.y },
1281
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1282
+ { x: s, y: p.y },
1283
1283
  this.params.sourceDirection,
1284
1284
  p
1285
1285
  ), a = m(
1286
- { x: this.params.to.x - o, y: this.params.to.y },
1286
+ { x: this.params.to.x - s, y: this.params.to.y },
1287
1287
  this.params.targetDirection,
1288
1288
  this.params.to
1289
1289
  ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.y / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipY * h, l = {
1290
1290
  x: (n.x + a.x) / 2,
1291
1291
  y: g
1292
1292
  };
1293
- this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = L(
1293
+ this.midpoint = O(l, e.flipX, e.flipY, e.to), this.path = N(
1294
1294
  [
1295
1295
  t,
1296
1296
  n,
1297
1297
  { x: n.x, y: g },
1298
1298
  { x: a.x, y: g },
1299
1299
  a,
1300
- s
1300
+ o
1301
1301
  ],
1302
1302
  this.params.roundness
1303
1303
  );
@@ -1312,33 +1312,33 @@ class dt {
1312
1312
  { x: this.params.arrowLength, y: p.y },
1313
1313
  this.params.sourceDirection,
1314
1314
  p
1315
- ) : p, s = this.params.hasTargetArrow ? m(
1315
+ ) : p, o = this.params.hasTargetArrow ? m(
1316
1316
  {
1317
1317
  x: this.params.to.x - this.params.arrowLength,
1318
1318
  y: this.params.to.y
1319
1319
  },
1320
1320
  this.params.targetDirection,
1321
1321
  this.params.to
1322
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1323
- { x: o, y: p.y },
1322
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1323
+ { x: s, y: p.y },
1324
1324
  this.params.sourceDirection,
1325
1325
  p
1326
1326
  ), a = m(
1327
- { x: this.params.to.x - o, y: this.params.to.y },
1327
+ { x: this.params.to.x - s, y: this.params.to.y },
1328
1328
  this.params.targetDirection,
1329
1329
  this.params.to
1330
1330
  ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.x / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipX * h, l = {
1331
1331
  x: g,
1332
1332
  y: (n.y + a.y) / 2
1333
1333
  };
1334
- this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = L(
1334
+ this.midpoint = O(l, e.flipX, e.flipY, e.to), this.path = N(
1335
1335
  [
1336
1336
  t,
1337
1337
  n,
1338
1338
  { x: g, y: n.y },
1339
1339
  { x: g, y: a.y },
1340
1340
  a,
1341
- s
1341
+ o
1342
1342
  ],
1343
1343
  this.params.roundness
1344
1344
  );
@@ -1367,24 +1367,24 @@ const f = Object.freeze({
1367
1367
  interactiveWidth: 10,
1368
1368
  preOffset: 0
1369
1369
  }), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1370
- class z {
1370
+ class W {
1371
1371
  constructor(e) {
1372
1372
  i(this, "svg");
1373
- i(this, "group", De());
1373
+ i(this, "group", Ce());
1374
1374
  i(this, "line");
1375
1375
  i(this, "sourceArrow", null);
1376
1376
  i(this, "targetArrow", null);
1377
1377
  i(this, "onAfterRender");
1378
1378
  i(this, "afterRenderEmitter");
1379
1379
  i(this, "arrowRenderer");
1380
- this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
1380
+ this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
1381
1381
  }
1382
1382
  render(e) {
1383
- const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
1383
+ const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
1384
1384
  e.from,
1385
1385
  e.to
1386
1386
  );
1387
- Ce(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1387
+ De(this.svg, { x: t, y: o, width: s, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1388
1388
  const d = ge(
1389
1389
  e.from.direction,
1390
1390
  a,
@@ -1394,11 +1394,11 @@ class z {
1394
1394
  a,
1395
1395
  h
1396
1396
  ), g = {
1397
- x: o,
1397
+ x: s,
1398
1398
  y: n
1399
1399
  };
1400
1400
  let l = { x: -c.x, y: -c.y }, u;
1401
- e.category === R.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === R.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
1401
+ e.category === M.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === M.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
1402
1402
  const w = u(
1403
1403
  d,
1404
1404
  c,
@@ -1426,7 +1426,7 @@ class z {
1426
1426
  }
1427
1427
  }
1428
1428
  const ct = (r) => (e) => {
1429
- const s = [
1429
+ const o = [
1430
1430
  p,
1431
1431
  { x: e.arrowLength, y: r.radius },
1432
1432
  { x: e.arrowLength, y: -r.radius }
@@ -1435,18 +1435,18 @@ const ct = (r) => (e) => {
1435
1435
  ).map((h) => ({
1436
1436
  x: h.x + e.shift.x,
1437
1437
  y: h.y + e.shift.y
1438
- })), o = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
1439
- return `${o} ${n} ${a} Z`;
1438
+ })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
1439
+ return `${s} ${n} ${a} Z`;
1440
1440
  }, lt = (r) => (e) => {
1441
- const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
1441
+ const t = r.radius, o = e.arrowLength, s = (o * o + 2 * o * t) / (2 * t), n = s + t, a = o + t - t * (o + t) / n, h = t * s / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
1442
1442
  (y) => m(y, e.direction, p)
1443
1443
  ).map((y) => ({
1444
1444
  x: y.x + e.shift.x,
1445
1445
  y: y.y + e.shift.y
1446
- })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
1446
+ })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
1447
1447
  return `${g} ${l} ${u} ${w}`;
1448
1448
  }, gt = (r) => (e) => {
1449
- const t = r.smallRadius, s = r.radius, o = m(
1449
+ const t = r.smallRadius, o = r.radius, s = m(
1450
1450
  {
1451
1451
  x: e.arrowLength,
1452
1452
  y: 0
@@ -1459,14 +1459,14 @@ const ct = (r) => (e) => {
1459
1459
  x: e.arrowLength + r.smallRadius,
1460
1460
  y: 0
1461
1461
  }
1462
- ), a = [p, { x: o.x, y: -o.y }, o].map(
1462
+ ), a = [p, { x: s.x, y: -s.y }, s].map(
1463
1463
  (l) => m(l, e.direction, p)
1464
1464
  ).map((l) => ({
1465
1465
  x: l.x + e.shift.x,
1466
1466
  y: l.y + e.shift.y
1467
- })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${s} ${s} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${s} ${s} 0 0 1 ${a[0].x} ${a[0].y}`;
1467
+ })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
1468
1468
  return `${h} ${d} ${c} ${g}`;
1469
- }, I = (r) => {
1469
+ }, F = (r) => {
1470
1470
  if (typeof r == "function")
1471
1471
  return r;
1472
1472
  switch (r.type) {
@@ -1511,11 +1511,11 @@ class ut {
1511
1511
  hasSourceArrow: this.hasSourceArrow,
1512
1512
  hasTargetArrow: this.hasTargetArrow
1513
1513
  }));
1514
- i(this, "createDetourPath", (e, t, s, o, n) => new tt({
1515
- to: s,
1514
+ i(this, "createDetourPath", (e, t, o, s, n) => new tt({
1515
+ to: o,
1516
1516
  sourceDirection: e,
1517
1517
  targetDirection: t,
1518
- flipX: o,
1518
+ flipX: s,
1519
1519
  flipY: n,
1520
1520
  arrowLength: this.arrowLength,
1521
1521
  detourDirection: this.detourDirection,
@@ -1524,8 +1524,8 @@ class ut {
1524
1524
  hasSourceArrow: this.hasSourceArrow,
1525
1525
  hasTargetArrow: this.hasTargetArrow
1526
1526
  }));
1527
- i(this, "createLinePath", (e, t, s) => new et({
1528
- to: s,
1527
+ i(this, "createLinePath", (e, t, o) => new et({
1528
+ to: o,
1529
1529
  sourceDirection: e,
1530
1530
  targetDirection: t,
1531
1531
  arrowLength: this.arrowLength,
@@ -1533,10 +1533,10 @@ class ut {
1533
1533
  hasSourceArrow: this.hasSourceArrow,
1534
1534
  hasTargetArrow: this.hasTargetArrow
1535
1535
  }));
1536
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
1536
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new W({
1537
1537
  color: (e == null ? void 0 : e.color) ?? f.color,
1538
1538
  width: (e == null ? void 0 : e.width) ?? f.width,
1539
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1539
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1540
1540
  arrowLength: this.arrowLength,
1541
1541
  hasSourceArrow: this.hasSourceArrow,
1542
1542
  hasTargetArrow: this.hasTargetArrow,
@@ -1565,7 +1565,7 @@ class pt {
1565
1565
  i(this, "hasSourceArrow");
1566
1566
  i(this, "hasTargetArrow");
1567
1567
  i(this, "pathShape");
1568
- i(this, "createCyclePath", (e) => new Q({
1568
+ i(this, "createCyclePath", (e) => new K({
1569
1569
  sourceDirection: e,
1570
1570
  arrowLength: this.arrowLength,
1571
1571
  side: this.cycleSquareSide,
@@ -1574,11 +1574,11 @@ class pt {
1574
1574
  hasSourceArrow: this.hasSourceArrow,
1575
1575
  hasTargetArrow: this.hasTargetArrow
1576
1576
  }));
1577
- i(this, "createDetourPath", (e, t, s, o, n) => new ht({
1578
- to: s,
1577
+ i(this, "createDetourPath", (e, t, o, s, n) => new ht({
1578
+ to: o,
1579
1579
  sourceDirection: e,
1580
1580
  targetDirection: t,
1581
- flipX: o,
1581
+ flipX: s,
1582
1582
  flipY: n,
1583
1583
  arrowLength: this.arrowLength,
1584
1584
  arrowOffset: this.arrowOffset,
@@ -1587,11 +1587,11 @@ class pt {
1587
1587
  hasSourceArrow: this.hasSourceArrow,
1588
1588
  hasTargetArrow: this.hasTargetArrow
1589
1589
  }));
1590
- i(this, "createLinePath", (e, t, s, o) => new rt({
1591
- to: s,
1590
+ i(this, "createLinePath", (e, t, o, s) => new rt({
1591
+ to: o,
1592
1592
  sourceDirection: e,
1593
1593
  targetDirection: t,
1594
- flipX: o,
1594
+ flipX: s,
1595
1595
  arrowLength: this.arrowLength,
1596
1596
  arrowOffset: this.arrowOffset,
1597
1597
  roundness: this.roundness,
@@ -1604,10 +1604,10 @@ class pt {
1604
1604
  t,
1605
1605
  this.arrowOffset,
1606
1606
  this.cycleSquareSide / 2
1607
- ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
1607
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new W({
1608
1608
  color: (e == null ? void 0 : e.color) ?? f.color,
1609
1609
  width: (e == null ? void 0 : e.width) ?? f.width,
1610
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1610
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1611
1611
  arrowLength: this.arrowLength,
1612
1612
  hasSourceArrow: this.hasSourceArrow,
1613
1613
  hasTargetArrow: this.hasTargetArrow,
@@ -1637,7 +1637,7 @@ class wt {
1637
1637
  i(this, "hasSourceArrow");
1638
1638
  i(this, "hasTargetArrow");
1639
1639
  i(this, "pathShape");
1640
- i(this, "createCyclePath", (e) => new Q({
1640
+ i(this, "createCyclePath", (e) => new K({
1641
1641
  sourceDirection: e,
1642
1642
  arrowLength: this.arrowLength,
1643
1643
  side: this.cycleSquareSide,
@@ -1646,11 +1646,11 @@ class wt {
1646
1646
  hasSourceArrow: this.hasSourceArrow,
1647
1647
  hasTargetArrow: this.hasTargetArrow
1648
1648
  }));
1649
- i(this, "createDetourPath", (e, t, s, o, n) => new st({
1650
- to: s,
1649
+ i(this, "createDetourPath", (e, t, o, s, n) => new ot({
1650
+ to: o,
1651
1651
  sourceDirection: e,
1652
1652
  targetDirection: t,
1653
- flipX: o,
1653
+ flipX: s,
1654
1654
  flipY: n,
1655
1655
  arrowLength: this.arrowLength,
1656
1656
  arrowOffset: this.arrowOffset,
@@ -1660,8 +1660,8 @@ class wt {
1660
1660
  hasSourceArrow: this.hasSourceArrow,
1661
1661
  hasTargetArrow: this.hasTargetArrow
1662
1662
  }));
1663
- i(this, "createLinePath", (e, t, s) => new ot({
1664
- to: s,
1663
+ i(this, "createLinePath", (e, t, o) => new st({
1664
+ to: o,
1665
1665
  sourceDirection: e,
1666
1666
  targetDirection: t,
1667
1667
  arrowLength: this.arrowLength,
@@ -1676,10 +1676,10 @@ class wt {
1676
1676
  t,
1677
1677
  this.arrowOffset,
1678
1678
  this.cycleSquareSide / 2
1679
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
1679
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new W({
1680
1680
  color: (e == null ? void 0 : e.color) ?? f.color,
1681
1681
  width: (e == null ? void 0 : e.width) ?? f.width,
1682
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1682
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1683
1683
  arrowLength: this.arrowLength,
1684
1684
  hasSourceArrow: this.hasSourceArrow,
1685
1685
  hasTargetArrow: this.hasTargetArrow,
@@ -1708,7 +1708,7 @@ class ft {
1708
1708
  i(this, "hasSourceArrow");
1709
1709
  i(this, "hasTargetArrow");
1710
1710
  i(this, "pathShape");
1711
- i(this, "createCyclePath", (e) => new Q({
1711
+ i(this, "createCyclePath", (e) => new K({
1712
1712
  sourceDirection: e,
1713
1713
  arrowLength: this.arrowLength,
1714
1714
  side: this.cycleSquareSide,
@@ -1717,11 +1717,11 @@ class ft {
1717
1717
  hasSourceArrow: this.hasSourceArrow,
1718
1718
  hasTargetArrow: this.hasTargetArrow
1719
1719
  }));
1720
- i(this, "createDetourPath", (e, t, s, o, n) => new dt({
1721
- to: s,
1720
+ i(this, "createDetourPath", (e, t, o, s, n) => new dt({
1721
+ to: o,
1722
1722
  sourceDirection: e,
1723
1723
  targetDirection: t,
1724
- flipX: o,
1724
+ flipX: s,
1725
1725
  flipY: n,
1726
1726
  arrowLength: this.arrowLength,
1727
1727
  arrowOffset: this.arrowOffset,
@@ -1730,8 +1730,8 @@ class ft {
1730
1730
  hasSourceArrow: this.hasSourceArrow,
1731
1731
  hasTargetArrow: this.hasTargetArrow
1732
1732
  }));
1733
- i(this, "createLinePath", (e, t, s, o, n) => new it({
1734
- to: s,
1733
+ i(this, "createLinePath", (e, t, o, s, n) => new it({
1734
+ to: o,
1735
1735
  sourceDirection: e,
1736
1736
  targetDirection: t,
1737
1737
  flipY: n,
@@ -1747,10 +1747,10 @@ class ft {
1747
1747
  t,
1748
1748
  this.arrowOffset,
1749
1749
  this.cycleSquareSide / 2
1750
- ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
1750
+ ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new W({
1751
1751
  color: (e == null ? void 0 : e.color) ?? f.color,
1752
1752
  width: (e == null ? void 0 : e.width) ?? f.width,
1753
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1753
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1754
1754
  arrowLength: this.arrowLength,
1755
1755
  hasSourceArrow: this.hasSourceArrow,
1756
1756
  hasTargetArrow: this.hasTargetArrow,
@@ -1766,7 +1766,7 @@ class ft {
1766
1766
  class Ne {
1767
1767
  constructor(e) {
1768
1768
  i(this, "svg");
1769
- i(this, "group", De());
1769
+ i(this, "group", Ce());
1770
1770
  i(this, "line");
1771
1771
  i(this, "sourceArrow", null);
1772
1772
  i(this, "targetArrow", null);
@@ -1778,15 +1778,15 @@ class Ne {
1778
1778
  i(this, "onAfterRender");
1779
1779
  i(this, "afterRenderEmitter");
1780
1780
  i(this, "arrowRenderer");
1781
- [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
1781
+ [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
1782
1782
  }
1783
1783
  render(e) {
1784
- const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
1784
+ const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
1785
1785
  e.from,
1786
1786
  e.to
1787
1787
  );
1788
- Ce(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1789
- const d = { x: o, y: n }, c = new at({
1788
+ De(this.svg, { x: t, y: o, width: s, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1789
+ const d = { x: s, y: n }, c = new at({
1790
1790
  to: d,
1791
1791
  sourceOffset: this.sourceOffset,
1792
1792
  targetOffset: this.targetOffset,
@@ -1869,16 +1869,16 @@ class Me {
1869
1869
  "interactive edge can be configured only once"
1870
1870
  );
1871
1871
  this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
1872
- const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
1873
- this.interactiveLine = mt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
1874
- this.interactiveLine.setAttribute("d", o.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", o.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", o.targetArrowPath);
1872
+ const o = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
1873
+ this.interactiveLine = mt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
1874
+ this.interactiveLine.setAttribute("d", s.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", s.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", s.targetArrowPath);
1875
1875
  });
1876
1876
  }
1877
1877
  render(e) {
1878
1878
  this.baseEdge.render(e);
1879
1879
  }
1880
1880
  }
1881
- class sr {
1881
+ class or {
1882
1882
  constructor(e, t) {
1883
1883
  i(this, "group");
1884
1884
  i(this, "line");
@@ -1886,8 +1886,8 @@ class sr {
1886
1886
  i(this, "targetArrow");
1887
1887
  i(this, "onAfterRender");
1888
1888
  i(this, "svg");
1889
- this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
1890
- const o = s.edgePath.midpoint, n = `translate(${o.x}px, ${o.y}px)`;
1889
+ this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((o) => {
1890
+ const s = o.edgePath.midpoint, n = `translate(${s.x}px, ${s.y}px)`;
1891
1891
  this.midpointElement.style.setProperty("transform", n);
1892
1892
  });
1893
1893
  }
@@ -1916,13 +1916,13 @@ class Le {
1916
1916
  const t = this.graphStore.getNode(e);
1917
1917
  if (t === void 0)
1918
1918
  return null;
1919
- const s = t.payload;
1919
+ const o = t.payload;
1920
1920
  return {
1921
1921
  element: t.element,
1922
- x: s.x,
1923
- y: s.y,
1924
- centerFn: s.centerFn,
1925
- priority: s.priority
1922
+ x: o.x,
1923
+ y: o.y,
1924
+ centerFn: o.centerFn,
1925
+ priority: o.priority
1926
1926
  };
1927
1927
  }
1928
1928
  getElementNodeId(e) {
@@ -1955,12 +1955,12 @@ class Le {
1955
1955
  const t = this.graphStore.getEdge(e);
1956
1956
  if (t === void 0)
1957
1957
  return null;
1958
- const s = t.payload;
1958
+ const o = t.payload;
1959
1959
  return {
1960
1960
  from: t.from,
1961
1961
  to: t.to,
1962
- priority: s.priority,
1963
- shape: s.shape
1962
+ priority: o.priority,
1963
+ shape: o.shape
1964
1964
  };
1965
1965
  }
1966
1966
  getPortIncomingEdgeIds(e) {
@@ -2004,9 +2004,15 @@ class Re {
2004
2004
  getDimensions() {
2005
2005
  return this.viewportStore.getDimensions();
2006
2006
  }
2007
+ createContentCoords(e) {
2008
+ return this.viewportStore.createContentCoords(e);
2009
+ }
2010
+ createViewportCoords(e) {
2011
+ return this.viewportStore.createViewportCoords(e);
2012
+ }
2007
2013
  }
2008
2014
  const Ve = (r, e) => {
2009
- const t = new Ae(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
2015
+ const t = new Ae(), o = new Le(t), s = new Re(e), n = new me(t, e, r), a = {
2010
2016
  nodes: {
2011
2017
  centerFn: Se,
2012
2018
  priorityFn: () => 0
@@ -2020,16 +2026,16 @@ const Ve = (r, e) => {
2020
2026
  }
2021
2027
  };
2022
2028
  return new ve(
2023
- s,
2024
2029
  o,
2030
+ s,
2025
2031
  t,
2026
2032
  e,
2027
2033
  n,
2028
2034
  a
2029
2035
  );
2030
2036
  };
2031
- class k {
2032
- constructor(e, t, s, o) {
2037
+ class z {
2038
+ constructor(e, t, o, s) {
2033
2039
  i(this, "onAfterPortMarked", (e) => {
2034
2040
  const t = this.canvas.graph.getPort(e);
2035
2041
  this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
@@ -2041,8 +2047,8 @@ class k {
2041
2047
  i(this, "onPortMouseDown", (e) => {
2042
2048
  if (!this.params.mouseDownEventVerifier(e))
2043
2049
  return;
2044
- const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
2045
- this.params.onPortPointerDown(s, {
2050
+ const t = e.currentTarget, o = this.canvas.graph.getElementPortIds(t)[0];
2051
+ this.params.onPortPointerDown(o, {
2046
2052
  x: e.clientX,
2047
2053
  y: e.clientY
2048
2054
  }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
@@ -2052,7 +2058,7 @@ class k {
2052
2058
  }));
2053
2059
  });
2054
2060
  i(this, "onWindowMouseMove", (e) => {
2055
- if (!V(
2061
+ if (!L(
2056
2062
  this.window,
2057
2063
  this.element,
2058
2064
  e.clientX,
@@ -2069,8 +2075,8 @@ class k {
2069
2075
  i(this, "onPortTouchStart", (e) => {
2070
2076
  if (e.touches.length !== 1)
2071
2077
  return;
2072
- const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementPortIds(s)[0];
2073
- this.params.onPortPointerDown(o, {
2078
+ const t = e.touches[0], o = e.currentTarget, s = this.canvas.graph.getElementPortIds(o)[0];
2079
+ this.params.onPortPointerDown(s, {
2074
2080
  x: t.clientX,
2075
2081
  y: t.clientY
2076
2082
  }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2083,7 +2089,7 @@ class k {
2083
2089
  });
2084
2090
  i(this, "onWindowTouchMove", (e) => {
2085
2091
  const t = e.touches[0];
2086
- if (!V(
2092
+ if (!L(
2087
2093
  this.window,
2088
2094
  this.element,
2089
2095
  t.clientX,
@@ -2107,10 +2113,10 @@ class k {
2107
2113
  i(this, "onBeforeDestroy", () => {
2108
2114
  this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
2109
2115
  });
2110
- this.canvas = e, this.element = t, this.window = s, this.params = o, 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);
2116
+ this.canvas = e, this.element = t, this.window = o, this.params = s, 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);
2111
2117
  }
2112
- static configure(e, t, s, o) {
2113
- new k(e, t, s, o);
2118
+ static configure(e, t, o, s) {
2119
+ new z(e, t, o, s);
2114
2120
  }
2115
2121
  hookPortEvents(e) {
2116
2122
  e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2135,8 +2141,8 @@ class k {
2135
2141
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2136
2142
  }
2137
2143
  }
2138
- class Z {
2139
- constructor(e, t, s, o) {
2144
+ class Q {
2145
+ constructor(e, t, o, s) {
2140
2146
  i(this, "grabbedNode", null);
2141
2147
  i(this, "maxNodePriority", 0);
2142
2148
  i(this, "graph");
@@ -2168,19 +2174,19 @@ class Z {
2168
2174
  i(this, "onMouseDown", (e) => {
2169
2175
  if (!this.params.mouseDownEventVerifier(e))
2170
2176
  return;
2171
- const t = e.currentTarget, s = this.graph.getElementNodeId(t), o = this.graph.getNode(s);
2172
- if (!this.params.nodeDragVerifier(s))
2177
+ const t = e.currentTarget, o = this.graph.getElementNodeId(t), s = this.graph.getNode(o);
2178
+ if (!this.params.nodeDragVerifier(o))
2173
2179
  return;
2174
- this.params.onNodeDragStarted(s), e.stopPropagation();
2180
+ this.params.onNodeDragStarted(o), e.stopPropagation();
2175
2181
  const a = this.calculateContentPoint({
2176
2182
  x: e.clientX,
2177
2183
  y: e.clientY
2178
2184
  });
2179
2185
  this.grabbedNode = {
2180
- nodeId: s,
2181
- dx: a.x - o.x,
2182
- dy: a.y - o.y
2183
- }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2186
+ nodeId: o,
2187
+ dx: a.x - s.x,
2188
+ dy: a.y - s.y
2189
+ }, $(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2184
2190
  passive: !0
2185
2191
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2186
2192
  passive: !0
@@ -2190,9 +2196,9 @@ class Z {
2190
2196
  if (e.touches.length !== 1)
2191
2197
  return;
2192
2198
  e.stopPropagation();
2193
- const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(o);
2199
+ const t = e.touches[0], o = e.currentTarget, s = this.canvas.graph.getElementNodeId(o), n = this.graph.getNode(s);
2194
2200
  if (!this.params.nodeDragVerifier({
2195
- nodeId: o,
2201
+ nodeId: s,
2196
2202
  element: n.element,
2197
2203
  x: n.x,
2198
2204
  y: n.y
@@ -2203,10 +2209,10 @@ class Z {
2203
2209
  y: t.clientY
2204
2210
  });
2205
2211
  this.grabbedNode = {
2206
- nodeId: o,
2212
+ nodeId: s,
2207
2213
  dx: h.x - n.x,
2208
2214
  dy: h.y - n.y
2209
- }, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2215
+ }, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2210
2216
  passive: !0
2211
2217
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2212
2218
  passive: !0
@@ -2215,7 +2221,7 @@ class Z {
2215
2221
  });
2216
2222
  });
2217
2223
  i(this, "onWindowMouseMove", (e) => {
2218
- if (!V(
2224
+ if (!L(
2219
2225
  this.window,
2220
2226
  this.element,
2221
2227
  e.clientX,
@@ -2236,7 +2242,7 @@ class Z {
2236
2242
  if (e.touches.length !== 1)
2237
2243
  return;
2238
2244
  const t = e.touches[0];
2239
- if (!V(
2245
+ if (!L(
2240
2246
  this.window,
2241
2247
  this.element,
2242
2248
  t.clientX,
@@ -2253,17 +2259,17 @@ class Z {
2253
2259
  i(this, "onWindowTouchFinish", () => {
2254
2260
  this.cancelTouchDrag();
2255
2261
  });
2256
- this.canvas = e, this.element = t, this.window = s, this.params = o, 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);
2262
+ this.canvas = e, this.element = t, this.window = o, this.params = 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);
2257
2263
  }
2258
- static configure(e, t, s, o) {
2259
- new Z(e, t, s, o);
2264
+ static configure(e, t, o, s) {
2265
+ new Q(e, t, o, s);
2260
2266
  }
2261
2267
  moveNode(e, t) {
2262
2268
  if (this.graph.getNode(e.nodeId) === null)
2263
2269
  return;
2264
- const o = this.calculateContentPoint(t), n = {
2265
- x: o.x - e.dx,
2266
- y: o.y - e.dy
2270
+ const s = this.calculateContentPoint(t), n = {
2271
+ x: s.x - e.dx,
2272
+ y: s.y - e.dy
2267
2273
  }, a = this.adjustNodeCoords(n);
2268
2274
  this.canvas.updateNode(e.nodeId, {
2269
2275
  x: a.x,
@@ -2274,15 +2280,15 @@ class Z {
2274
2280
  if (this.params.moveOnTop) {
2275
2281
  if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
2276
2282
  const t = this.maxNodePriority;
2277
- this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((o) => {
2278
- this.canvas.updateEdge(o, { priority: t });
2283
+ this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
2284
+ this.canvas.updateEdge(s, { priority: t });
2279
2285
  });
2280
2286
  }
2281
2287
  this.canvas.updateNode(e, { priority: this.maxNodePriority });
2282
2288
  }
2283
2289
  }
2284
2290
  cancelMouseDrag() {
2285
- this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
2291
+ this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, $(this.element, null), this.removeMouseDragListeners();
2286
2292
  }
2287
2293
  removeMouseDragListeners() {
2288
2294
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2307,19 +2313,19 @@ class Z {
2307
2313
  this.maxNodePriority = Math.max(this.maxNodePriority, t);
2308
2314
  }
2309
2315
  calculateContentPoint(e) {
2310
- const t = this.element.getBoundingClientRect(), s = {
2316
+ const t = this.element.getBoundingClientRect();
2317
+ return this.canvas.viewport.createContentCoords({
2311
2318
  x: e.x - t.x,
2312
2319
  y: e.y - t.y
2313
- }, o = this.canvas.viewport.getViewportMatrix();
2314
- return C(o, s);
2320
+ });
2315
2321
  }
2316
2322
  adjustNodeCoords(e) {
2317
2323
  const t = this.params.gridSize;
2318
2324
  if (t !== null) {
2319
- const s = t / 2;
2325
+ const o = t / 2;
2320
2326
  return {
2321
- x: Math.floor((e.x + s) / t) * t,
2322
- y: Math.floor((e.y + s) / t) * t
2327
+ x: Math.floor((e.x + o) / t) * t,
2328
+ y: Math.floor((e.y + o) / t) * t
2323
2329
  };
2324
2330
  }
2325
2331
  return e;
@@ -2329,31 +2335,31 @@ const At = (r, e, t) => ({
2329
2335
  scale: r.scale,
2330
2336
  x: r.x + r.scale * e,
2331
2337
  y: r.y + r.scale * t
2332
- }), Et = (r, e, t, s) => ({
2338
+ }), Et = (r, e, t, o) => ({
2333
2339
  scale: r.scale * e,
2334
2340
  x: r.scale * (1 - e) * t + r.x,
2335
- y: r.scale * (1 - e) * s + r.y
2336
- }), $ = (r) => {
2341
+ y: r.scale * (1 - e) * o + r.y
2342
+ }), I = (r) => {
2337
2343
  const e = [], t = r.touches.length;
2338
2344
  for (let h = 0; h < t; h++)
2339
2345
  e.push([r.touches[h].clientX, r.touches[h].clientY]);
2340
- const s = e.reduce(
2346
+ const o = e.reduce(
2341
2347
  (h, d) => [h[0] + d[0], h[1] + d[1]],
2342
2348
  [0, 0]
2343
- ), o = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - o[0], h[1] - o[1]]).reduce(
2349
+ ), s = [o[0] / t, o[1] / t], a = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
2344
2350
  (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
2345
2351
  0
2346
2352
  );
2347
2353
  return {
2348
- x: o[0],
2349
- y: o[1],
2354
+ x: s[0],
2355
+ y: s[1],
2350
2356
  scale: a / t,
2351
2357
  touchesCnt: t,
2352
2358
  touches: e
2353
2359
  };
2354
2360
  };
2355
- class H {
2356
- constructor(e, t, s, o) {
2361
+ class k {
2362
+ constructor(e, t, o, s) {
2357
2363
  i(this, "viewport");
2358
2364
  i(this, "prevTouches", null);
2359
2365
  i(this, "wheelFinishTimer", null);
@@ -2362,14 +2368,14 @@ class H {
2362
2368
  this.removeMouseDragListeners(), this.removeTouchDragListeners();
2363
2369
  });
2364
2370
  i(this, "onMouseDown", (e) => {
2365
- this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2371
+ this.element === null || !this.params.mouseDownEventVerifier(e) || ($(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
2366
2372
  passive: !0
2367
2373
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2368
2374
  passive: !0
2369
2375
  }), this.startRegisteredTransform());
2370
2376
  });
2371
2377
  i(this, "onWindowMouseMove", (e) => {
2372
- const t = V(
2378
+ const t = L(
2373
2379
  this.window,
2374
2380
  this.element,
2375
2381
  e.clientX,
@@ -2379,8 +2385,8 @@ class H {
2379
2385
  this.stopMouseDrag();
2380
2386
  return;
2381
2387
  }
2382
- const s = -e.movementX, o = -e.movementY;
2383
- this.moveViewport(s, o);
2388
+ const o = -e.movementX, s = -e.movementY;
2389
+ this.moveViewport(o, s);
2384
2390
  });
2385
2391
  i(this, "onWindowMouseUp", (e) => {
2386
2392
  this.params.mouseUpEventVerifier(e) && this.stopMouseDrag();
@@ -2388,17 +2394,17 @@ class H {
2388
2394
  i(this, "onWheelScroll", (e) => {
2389
2395
  if (!this.params.mouseWheelEventVerifier(e))
2390
2396
  return;
2391
- const { left: t, top: s } = this.element.getBoundingClientRect(), o = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2392
- this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, o, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2397
+ const { left: t, top: o } = this.element.getBoundingClientRect(), s = e.clientX - t, n = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
2398
+ this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, s, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2393
2399
  this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
2394
2400
  }, this.params.scaleWheelFinishTimeout);
2395
2401
  });
2396
2402
  i(this, "onTouchStart", (e) => {
2397
2403
  if (this.prevTouches !== null) {
2398
- this.prevTouches = $(e);
2404
+ this.prevTouches = I(e);
2399
2405
  return;
2400
2406
  }
2401
- this.prevTouches = $(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2407
+ this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2402
2408
  passive: !0
2403
2409
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2404
2410
  passive: !0
@@ -2407,9 +2413,9 @@ class H {
2407
2413
  }), this.startRegisteredTransform();
2408
2414
  });
2409
2415
  i(this, "onWindowTouchMove", (e) => {
2410
- const t = $(e);
2416
+ const t = I(e);
2411
2417
  if (!t.touches.every(
2412
- (o) => V(this.window, this.element, o[0], o[1])
2418
+ (s) => L(this.window, this.element, s[0], s[1])
2413
2419
  )) {
2414
2420
  this.stopTouchDrag();
2415
2421
  return;
@@ -2418,18 +2424,18 @@ class H {
2418
2424
  -(t.x - this.prevTouches.x),
2419
2425
  -(t.y - this.prevTouches.y)
2420
2426
  ), t.touchesCnt === 2) {
2421
- const { left: o, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - o, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
2427
+ const { left: s, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
2422
2428
  this.scaleViewport(c, a, h);
2423
2429
  }
2424
2430
  this.prevTouches = t;
2425
2431
  });
2426
2432
  i(this, "onWindowTouchFinish", (e) => {
2427
- e.touches.length > 0 ? this.prevTouches = $(e) : this.stopTouchDrag();
2433
+ e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
2428
2434
  });
2429
2435
  i(this, "preventWheelScaleListener", (e) => {
2430
2436
  e.preventDefault();
2431
2437
  });
2432
- this.canvas = e, this.element = t, this.window = s, this.params = o, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
2438
+ this.canvas = e, this.element = t, this.window = o, this.params = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
2433
2439
  passive: !1
2434
2440
  }), this.viewport = e.viewport, this.handleResize(), this.viewport.onAfterResize.subscribe(() => {
2435
2441
  this.handleResize();
@@ -2441,21 +2447,21 @@ class H {
2441
2447
  passive: !0
2442
2448
  }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2443
2449
  }
2444
- static configure(e, t, s, o) {
2445
- new H(e, t, s, o);
2450
+ static configure(e, t, o, s) {
2451
+ new k(e, t, o, s);
2446
2452
  }
2447
2453
  moveViewport(e, t) {
2448
- const s = this.viewport.getViewportMatrix(), o = At(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
2449
- prevTransform: s,
2450
- nextTransform: o,
2454
+ const o = this.viewport.getViewportMatrix(), s = At(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
2455
+ prevTransform: o,
2456
+ nextTransform: s,
2451
2457
  canvasWidth: n,
2452
2458
  canvasHeight: a
2453
2459
  });
2454
2460
  this.performTransform(h);
2455
2461
  }
2456
- scaleViewport(e, t, s) {
2457
- const o = this.canvas.viewport.getViewportMatrix(), n = Et(o, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
2458
- prevTransform: o,
2462
+ scaleViewport(e, t, o) {
2463
+ const s = this.canvas.viewport.getViewportMatrix(), n = Et(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
2464
+ prevTransform: s,
2459
2465
  nextTransform: n,
2460
2466
  canvasWidth: a,
2461
2467
  canvasHeight: h
@@ -2463,7 +2469,7 @@ class H {
2463
2469
  this.performTransform(d);
2464
2470
  }
2465
2471
  stopMouseDrag() {
2466
- U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2472
+ $(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2467
2473
  }
2468
2474
  removeMouseDragListeners() {
2469
2475
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2484,17 +2490,17 @@ class H {
2484
2490
  this.transformInProgress = !1, this.params.onTransformFinished();
2485
2491
  }
2486
2492
  handleResize() {
2487
- const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
2493
+ const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
2488
2494
  prevTransform: e,
2489
2495
  nextTransform: e,
2490
2496
  canvasWidth: t,
2491
- canvasHeight: s
2497
+ canvasHeight: o
2492
2498
  });
2493
- this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
2499
+ this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
2494
2500
  }
2495
2501
  }
2496
- class J {
2497
- constructor(e, t, s, o, n, a) {
2502
+ class Z {
2503
+ constructor(e, t, o, s, n, a) {
2498
2504
  i(this, "nodeHorizontal");
2499
2505
  i(this, "nodeVertical");
2500
2506
  i(this, "viewport");
@@ -2517,42 +2523,42 @@ class J {
2517
2523
  this.userTransformInProgress || this.loadAreaAroundViewport();
2518
2524
  });
2519
2525
  i(this, "userTransformInProgress", !1);
2520
- this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
2526
+ this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
2521
2527
  this.scheduleLoadAreaAroundViewport();
2522
2528
  });
2523
2529
  const h = {
2524
- ...o,
2530
+ ...s,
2525
2531
  onResizeTransformStarted: () => {
2526
- this.userTransformInProgress = !0, o.onResizeTransformStarted();
2532
+ this.userTransformInProgress = !0, s.onResizeTransformStarted();
2527
2533
  },
2528
2534
  onResizeTransformFinished: () => {
2529
- this.userTransformInProgress = !1, o.onResizeTransformFinished();
2535
+ this.userTransformInProgress = !1, s.onResizeTransformFinished();
2530
2536
  },
2531
2537
  onBeforeTransformChange: () => {
2532
- this.userTransformInProgress = !0, o.onBeforeTransformChange();
2538
+ this.userTransformInProgress = !0, s.onBeforeTransformChange();
2533
2539
  },
2534
2540
  onTransformChange: () => {
2535
2541
  this.userTransformInProgress = !1;
2536
2542
  const d = this.currentScale;
2537
- this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
2543
+ this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), s.onTransformChange();
2538
2544
  },
2539
2545
  onTransformFinished: () => {
2540
- this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
2546
+ this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
2541
2547
  }
2542
2548
  };
2543
- H.configure(
2549
+ k.configure(
2544
2550
  e,
2545
2551
  this.element,
2546
2552
  this.window,
2547
2553
  h
2548
2554
  ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
2549
2555
  }
2550
- static configure(e, t, s, o, n, a) {
2551
- new J(
2556
+ static configure(e, t, o, s, n, a) {
2557
+ new Z(
2552
2558
  e,
2553
2559
  t,
2554
- s,
2555
2560
  o,
2561
+ s,
2556
2562
  n,
2557
2563
  a
2558
2564
  );
@@ -2564,12 +2570,12 @@ class J {
2564
2570
  }
2565
2571
  scheduleEnsureViewportAreaLoaded() {
2566
2572
  setTimeout(() => {
2567
- const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - this.nodeHorizontal, c = n - this.nodeVertical, g = o + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
2573
+ const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, g = s + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
2568
2574
  this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > l || this.loadAreaAroundViewport();
2569
2575
  });
2570
2576
  }
2571
2577
  loadAreaAroundViewport() {
2572
- const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
2578
+ const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
2573
2579
  this.trigger.emit({
2574
2580
  x: d,
2575
2581
  y: c,
@@ -2591,8 +2597,8 @@ const xt = () => {
2591
2597
  );
2592
2598
  return r.setAttribute("id", "pattern"), r;
2593
2599
  };
2594
- class _ {
2595
- constructor(e, t, s) {
2600
+ class J {
2601
+ constructor(e, t, o) {
2596
2602
  i(this, "svg", xt());
2597
2603
  i(this, "patternRenderingRectangle", St());
2598
2604
  i(this, "pattern", bt());
@@ -2604,19 +2610,19 @@ class _ {
2604
2610
  i(this, "maxViewportScale");
2605
2611
  i(this, "visible", !1);
2606
2612
  i(this, "onAfterTransformUpdated", () => {
2607
- const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, o = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
2608
- this.pattern.setAttribute("patternTransform", o), this.updateVisibility();
2613
+ const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, o = e.y - this.halfTileHeight * e.scale, s = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${o})`;
2614
+ this.pattern.setAttribute("patternTransform", s), this.updateVisibility();
2609
2615
  });
2610
- this.canvas = e, this.backgroundHost = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
2611
- const o = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
2612
- this.patternContent.setAttribute("transform", o), this.pattern.appendChild(this.patternContent);
2616
+ this.canvas = e, this.backgroundHost = o, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
2617
+ const s = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
2618
+ this.patternContent.setAttribute("transform", s), this.pattern.appendChild(this.patternContent);
2613
2619
  const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
2614
2620
  n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
2615
2621
  this.updateDimensions();
2616
2622
  }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
2617
2623
  }
2618
- static configure(e, t, s) {
2619
- new _(e, t, s);
2624
+ static configure(e, t, o) {
2625
+ new J(e, t, o);
2620
2626
  }
2621
2627
  updateVisibility() {
2622
2628
  const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
@@ -2625,22 +2631,22 @@ class _ {
2625
2631
  updateDimensions() {
2626
2632
  const { width: e, height: t } = this.canvas.viewport.getDimensions();
2627
2633
  this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`);
2628
- const s = this.tileWidth / e, o = this.tileHeight / t;
2629
- this.pattern.setAttribute("width", `${s}`), this.pattern.setAttribute("height", `${o}`);
2634
+ const o = this.tileWidth / e, s = this.tileHeight / t;
2635
+ this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
2630
2636
  }
2631
2637
  }
2632
- class ee {
2633
- constructor(e, t, s, o, n) {
2638
+ class _ {
2639
+ constructor(e, t, o, s, n) {
2634
2640
  i(this, "overlayCanvas");
2635
2641
  i(this, "staticPortId", null);
2636
2642
  i(this, "isTargetDragging", !0);
2637
2643
  i(this, "onEdgeCreated", (e) => {
2638
2644
  this.params.onAfterEdgeCreated(e);
2639
2645
  });
2640
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
2646
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ve(
2641
2647
  this.overlayLayer,
2642
2648
  this.viewportStore
2643
- ), k.configure(
2649
+ ), z.configure(
2644
2650
  this.canvas,
2645
2651
  this.overlayLayer,
2646
2652
  this.window,
@@ -2663,69 +2669,69 @@ class ee {
2663
2669
  }
2664
2670
  );
2665
2671
  }
2666
- static configure(e, t, s, o, n) {
2667
- new ee(
2672
+ static configure(e, t, o, s, n) {
2673
+ new _(
2668
2674
  e,
2669
2675
  t,
2670
- s,
2671
2676
  o,
2677
+ s,
2672
2678
  n
2673
2679
  );
2674
2680
  }
2675
- grabPort(e, t, s) {
2676
- const o = this.canvas.graph.getPort(e);
2681
+ grabPort(e, t, o) {
2682
+ const s = this.canvas.graph.getPort(e);
2677
2683
  this.staticPortId = e;
2678
- const n = o.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = C(c, {
2684
+ const n = s.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
2679
2685
  x: a - d.x,
2680
2686
  y: h - d.y
2681
- }), l = C(c, {
2687
+ }), g = this.canvas.viewport.createContentCoords({
2682
2688
  x: t.x - d.x,
2683
2689
  y: t.y - d.y
2684
- }), u = {
2685
- overlayId: T.Static,
2690
+ }), l = {
2691
+ overlayNodeId: T.StaticNodeId,
2692
+ portCoords: c,
2693
+ portDirection: s.direction
2694
+ }, u = {
2695
+ overlayNodeId: T.DraggingNodeId,
2686
2696
  portCoords: g,
2687
- portDirection: o.direction
2688
- }, w = {
2689
- overlayId: T.Dragging,
2690
- portCoords: l,
2691
2697
  portDirection: this.params.dragPortDirection
2692
2698
  };
2693
- this.isTargetDragging = s === "direct";
2694
- const [y, A] = this.isTargetDragging ? [u, w] : [w, u];
2695
- this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(A)), this.overlayCanvas.addEdge({
2696
- from: y.overlayId,
2697
- to: A.overlayId,
2698
- shape: this.params.edgeShapeFactory(T.Edge)
2699
+ this.isTargetDragging = o === "direct";
2700
+ const [w, y] = this.isTargetDragging ? [l, u] : [u, l];
2701
+ this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(y)), this.overlayCanvas.addEdge({
2702
+ from: w.overlayNodeId,
2703
+ to: y.overlayNodeId,
2704
+ shape: this.params.edgeShapeFactory(T.EdgeId)
2699
2705
  });
2700
2706
  }
2701
2707
  resetDragState() {
2702
2708
  this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2703
2709
  }
2704
2710
  tryCreateConnection(e) {
2705
- const t = xe(this.canvas.graph, e), s = this.staticPortId;
2711
+ const t = xe(this.canvas.graph, e), o = this.staticPortId;
2706
2712
  if (t === null) {
2707
2713
  this.params.onEdgeCreationInterrupted({
2708
- staticPortId: s,
2714
+ staticPortId: o,
2709
2715
  isDirect: this.isTargetDragging
2710
2716
  });
2711
2717
  return;
2712
2718
  }
2713
- const o = this.isTargetDragging ? s : t, n = this.isTargetDragging ? t : s, a = { from: o, to: n }, h = this.params.connectionPreprocessor(a);
2719
+ const s = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: s, to: n }, h = this.params.connectionPreprocessor(a);
2714
2720
  h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
2715
2721
  }
2716
2722
  moveDraggingPort(e) {
2717
- const t = this.overlayLayer.getBoundingClientRect(), s = {
2723
+ const t = this.overlayLayer.getBoundingClientRect(), o = this.canvas.viewport.createContentCoords({
2718
2724
  x: e.x - t.x,
2719
2725
  y: e.y - t.y
2720
- }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
2721
- this.overlayCanvas.updateNode(T.Dragging, {
2722
- x: n.x,
2723
- y: n.y
2726
+ });
2727
+ this.overlayCanvas.updateNode(T.DraggingNodeId, {
2728
+ x: o.x,
2729
+ y: o.y
2724
2730
  });
2725
2731
  }
2726
2732
  }
2727
- class te {
2728
- constructor(e, t, s, o, n) {
2733
+ class ee {
2734
+ constructor(e, t, o, s, n) {
2729
2735
  i(this, "overlayCanvas");
2730
2736
  i(this, "staticPortId", null);
2731
2737
  i(this, "isTargetDragging", !0);
@@ -2733,10 +2739,10 @@ class te {
2733
2739
  i(this, "onEdgeReattached", (e) => {
2734
2740
  this.params.onAfterEdgeReattached(e);
2735
2741
  });
2736
- this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
2742
+ this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ve(
2737
2743
  this.overlayLayer,
2738
2744
  this.viewportStore
2739
- ), k.configure(
2745
+ ), z.configure(
2740
2746
  this.canvas,
2741
2747
  this.overlayLayer,
2742
2748
  this.window,
@@ -2756,75 +2762,75 @@ class te {
2756
2762
  }
2757
2763
  );
2758
2764
  }
2759
- static configure(e, t, s, o, n) {
2760
- new te(
2765
+ static configure(e, t, o, s, n) {
2766
+ new ee(
2761
2767
  e,
2762
2768
  t,
2763
- s,
2764
2769
  o,
2770
+ s,
2765
2771
  n
2766
2772
  );
2767
2773
  }
2768
2774
  tryStartEdgeDragging(e, t) {
2769
- const s = this.params.draggingEdgeResolver(e);
2770
- if (s === null)
2771
- return !1;
2772
- const o = this.canvas.graph.getEdge(s);
2775
+ const o = this.params.draggingEdgeResolver(e);
2773
2776
  if (o === null)
2774
2777
  return !1;
2775
- const n = e === o.from, a = e === o.to, h = n ? o.to : o.from;
2778
+ const s = this.canvas.graph.getEdge(o);
2779
+ if (s === null)
2780
+ return !1;
2781
+ const n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
2776
2782
  this.staticPortId = h, this.isTargetDragging = a;
2777
2783
  const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
2778
2784
  x: g.x + g.width / 2,
2779
2785
  y: g.y + g.height / 2
2780
- }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = C(u, {
2781
- x: l.x - w.x,
2782
- y: l.y - w.y
2783
- }), A = C(u, {
2784
- x: t.x - w.x,
2785
- y: t.y - w.y
2786
+ }, u = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
2787
+ x: l.x - u.x,
2788
+ y: l.y - u.y
2789
+ }), y = this.canvas.viewport.createContentCoords({
2790
+ x: t.x - u.x,
2791
+ y: t.y - u.y
2786
2792
  });
2787
2793
  this.draggingEdgePayload = {
2788
- id: s,
2789
- from: o.from,
2790
- to: o.to,
2791
- shape: o.shape,
2792
- priority: o.priority
2793
- }, this.canvas.removeEdge(s);
2794
- const x = {
2795
- overlayId: T.Static,
2796
- portCoords: y,
2794
+ id: o,
2795
+ from: s.from,
2796
+ to: s.to,
2797
+ shape: s.shape,
2798
+ priority: s.priority
2799
+ }, this.canvas.removeEdge(o);
2800
+ const A = {
2801
+ overlayNodeId: T.StaticNodeId,
2802
+ portCoords: w,
2797
2803
  portDirection: c.direction
2798
- }, S = {
2799
- overlayId: T.Dragging,
2800
- portCoords: A,
2804
+ }, x = {
2805
+ overlayNodeId: T.DraggingNodeId,
2806
+ portCoords: y,
2801
2807
  portDirection: d.direction
2802
- }, [D, P] = this.isTargetDragging ? [x, S] : [S, x];
2803
- this.overlayCanvas.addNode(B(D)), this.overlayCanvas.addNode(B(P));
2804
- const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.Edge) : o.shape;
2808
+ }, [S, C] = this.isTargetDragging ? [A, x] : [x, A];
2809
+ this.overlayCanvas.addNode(U(S)), this.overlayCanvas.addNode(U(C));
2810
+ const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.EdgeId) : s.shape;
2805
2811
  return this.overlayCanvas.addEdge({
2806
- id: T.Edge,
2807
- from: D.overlayId,
2808
- to: P.overlayId,
2809
- shape: N
2812
+ id: T.EdgeId,
2813
+ from: S.overlayNodeId,
2814
+ to: C.overlayNodeId,
2815
+ shape: P
2810
2816
  }), !0;
2811
2817
  }
2812
2818
  resetDragState() {
2813
2819
  this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2814
2820
  }
2815
2821
  moveDraggingPort(e) {
2816
- const t = this.overlayLayer.getBoundingClientRect(), s = {
2822
+ const t = this.overlayLayer.getBoundingClientRect(), o = {
2817
2823
  x: e.x - t.x,
2818
2824
  y: e.y - t.y
2819
- }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
2820
- this.overlayCanvas.updateNode(T.Dragging, {
2821
- x: n.x,
2822
- y: n.y
2825
+ }, s = this.canvas.viewport.createContentCoords(o);
2826
+ this.overlayCanvas.updateNode(T.DraggingNodeId, {
2827
+ x: s.x,
2828
+ y: s.y
2823
2829
  });
2824
2830
  }
2825
2831
  tryCreateConnection(e) {
2826
2832
  const t = xe(this.canvas.graph, e);
2827
- if (this.overlayCanvas.removeEdge(T.Edge), t === null) {
2833
+ if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
2828
2834
  const d = this.draggingEdgePayload;
2829
2835
  this.params.onEdgeReattachInterrupted({
2830
2836
  id: d.id,
@@ -2835,10 +2841,10 @@ class te {
2835
2841
  });
2836
2842
  return;
2837
2843
  }
2838
- const [s, o] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
2844
+ const [o, s] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
2839
2845
  id: n.id,
2840
- from: s,
2841
- to: o,
2846
+ from: o,
2847
+ to: s,
2842
2848
  shape: n.shape,
2843
2849
  priority: n.priority
2844
2850
  }, h = this.params.connectionPreprocessor(a);
@@ -2856,26 +2862,26 @@ class te {
2856
2862
  }
2857
2863
  }
2858
2864
  }
2859
- class re {
2860
- constructor(e, t, s) {
2861
- this.canvas = e, this.layoutAlgorithm = t, this.trigger = s, this.trigger.subscribe(() => {
2865
+ class te {
2866
+ constructor(e, t, o) {
2867
+ this.canvas = e, this.layoutAlgorithm = t, this.trigger = o, this.trigger.subscribe(() => {
2862
2868
  this.applyLayout();
2863
2869
  });
2864
2870
  }
2865
- static configure(e, t, s) {
2866
- new re(
2871
+ static configure(e, t, o) {
2872
+ new te(
2867
2873
  e,
2868
2874
  t,
2869
- s
2875
+ o
2870
2876
  );
2871
2877
  }
2872
2878
  applyLayout() {
2873
- this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, s) => {
2874
- this.canvas.updateNode(s, t);
2879
+ this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
2880
+ this.canvas.updateNode(o, t);
2875
2881
  });
2876
2882
  }
2877
2883
  }
2878
- class se {
2884
+ class re {
2879
2885
  constructor(e, t) {
2880
2886
  i(this, "applyScheduled", !1);
2881
2887
  this.canvas = e, this.layoutAlgorithm = t, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
@@ -2889,7 +2895,7 @@ class se {
2889
2895
  });
2890
2896
  }
2891
2897
  static configure(e, t) {
2892
- new se(
2898
+ new re(
2893
2899
  e,
2894
2900
  t
2895
2901
  );
@@ -2900,25 +2906,25 @@ class se {
2900
2906
  }));
2901
2907
  }
2902
2908
  applyLayout() {
2903
- this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, s) => {
2904
- this.canvas.updateNode(s, t);
2909
+ this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
2910
+ this.canvas.updateNode(o, t);
2905
2911
  });
2906
2912
  }
2907
2913
  }
2908
2914
  class Pt {
2909
2915
  static configure(e, t) {
2910
- const s = t.applyOn;
2911
- switch (s.type) {
2916
+ const o = t.applyOn;
2917
+ switch (o.type) {
2912
2918
  case "manual": {
2913
- re.configure(
2919
+ te.configure(
2914
2920
  e,
2915
2921
  t.algorithm,
2916
- s.trigger
2922
+ o.trigger
2917
2923
  );
2918
2924
  break;
2919
2925
  }
2920
2926
  case "topologyChangeTimeout": {
2921
- se.configure(
2927
+ re.configure(
2922
2928
  e,
2923
2929
  t.algorithm
2924
2930
  );
@@ -2943,55 +2949,55 @@ class Tt {
2943
2949
  }
2944
2950
  }
2945
2951
  class oe {
2946
- constructor(e, t, s, o) {
2952
+ constructor(e, t, o, s) {
2947
2953
  i(this, "step", (e) => {
2948
2954
  this.algorithm.calculateNextCoordinates(
2949
2955
  this.canvas.graph,
2950
2956
  e
2951
- ).forEach((s, o) => {
2952
- this.staticNodes.has(o) || this.canvas.updateNode(o, { x: s.x, y: s.y });
2957
+ ).forEach((o, s) => {
2958
+ this.staticNodes.has(s) || this.canvas.updateNode(s, { x: o.x, y: o.y });
2953
2959
  });
2954
2960
  });
2955
- this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = o, new Tt(this.win, this.step);
2961
+ this.canvas = e, this.algorithm = t, this.staticNodes = o, this.win = s, new Tt(this.win, this.step);
2956
2962
  }
2957
- static configure(e, t, s, o) {
2958
- new oe(e, t, s, o);
2963
+ static configure(e, t, o, s) {
2964
+ new oe(e, t, o, s);
2959
2965
  }
2960
2966
  }
2961
- const Dt = () => {
2967
+ const Ct = () => {
2962
2968
  const r = document.createElement("div");
2963
2969
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
2964
- }, Y = () => {
2970
+ }, X = () => {
2965
2971
  const r = document.createElement("div");
2966
2972
  return r.style.position = "absolute", r.style.inset = "0", r;
2967
2973
  }, pe = () => {
2968
- const r = Y();
2974
+ const r = X();
2969
2975
  return r.style.pointerEvents = "none", r;
2970
2976
  };
2971
- class Ct {
2977
+ class Dt {
2972
2978
  constructor(e) {
2973
- i(this, "background", Y());
2974
- i(this, "main", Y());
2979
+ i(this, "background", X());
2980
+ i(this, "main", X());
2975
2981
  i(this, "overlayConnectablePorts", pe());
2976
2982
  i(this, "overlayDraggableEdges", pe());
2977
- i(this, "host", Dt());
2983
+ i(this, "host", Ct());
2978
2984
  this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
2979
2985
  }
2980
2986
  destroy() {
2981
2987
  this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
2982
2988
  }
2983
2989
  }
2984
- const G = (r) => () => r, we = G(0), Nt = () => {
2990
+ const Y = (r) => () => r, we = Y(0), Nt = () => {
2985
2991
  let r = 0;
2986
2992
  return () => r++;
2987
2993
  }, Mt = (r, e) => {
2988
- let t = we, s = we;
2989
- const o = Nt();
2990
- return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = G(r)), typeof e == "number" && (s = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
2994
+ let t = we, o = we;
2995
+ const s = Nt();
2996
+ return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = Y(r)), typeof e == "number" && (o = Y(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
2991
2997
  nodesPriorityFn: t,
2992
- edgesPriorityFn: s
2998
+ edgesPriorityFn: o
2993
2999
  };
2994
- }, ie = (r) => {
3000
+ }, se = (r) => {
2995
3001
  if (typeof r == "function")
2996
3002
  return r;
2997
3003
  switch (r.type) {
@@ -3062,30 +3068,30 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3062
3068
  });
3063
3069
  }
3064
3070
  }, Lt = (r) => {
3065
- var t, s, o, n, a;
3071
+ var t, o, s, n, a;
3066
3072
  const e = Mt(
3067
3073
  (t = r.nodes) == null ? void 0 : t.priority,
3068
- (s = r.edges) == null ? void 0 : s.priority
3074
+ (o = r.edges) == null ? void 0 : o.priority
3069
3075
  );
3070
3076
  return {
3071
3077
  nodes: {
3072
- centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Se,
3078
+ centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Se,
3073
3079
  priorityFn: e.nodesPriorityFn
3074
3080
  },
3075
3081
  ports: {
3076
3082
  direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
3077
3083
  },
3078
3084
  edges: {
3079
- shapeFactory: ie(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
3085
+ shapeFactory: se(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
3080
3086
  priorityFn: e.edgesPriorityFn
3081
3087
  }
3082
3088
  };
3083
3089
  }, Rt = (r) => {
3084
- var w, y, A, x, S, D;
3090
+ var w, y, A, x, S, C;
3085
3091
  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
3086
3092
  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
3087
- }), s = r.nodeDragVerifier ?? (() => !0), o = ((A = r.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
3088
- }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (x = r.mouse) == null ? void 0 : x.dragCursor, d = h !== void 0 ? h : "grab", c = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (D = r.mouse) == null ? void 0 : D.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
3093
+ }), o = r.nodeDragVerifier ?? (() => !0), s = ((A = r.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
3094
+ }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (x = r.mouse) == null ? void 0 : x.dragCursor, d = h !== void 0 ? h : "grab", c = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (C = r.mouse) == null ? void 0 : C.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
3089
3095
  return {
3090
3096
  moveOnTop: n,
3091
3097
  moveEdgesOnTop: a,
@@ -3095,31 +3101,31 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3095
3101
  mouseUpEventVerifier: u,
3096
3102
  onNodeDragStarted: e,
3097
3103
  onNodeDrag: t,
3098
- nodeDragVerifier: s,
3099
- onNodeDragFinished: o
3104
+ nodeDragVerifier: o,
3105
+ onNodeDragFinished: s
3100
3106
  };
3101
3107
  }, Vt = (r) => {
3102
- const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, o = r.maxY !== null ? r.maxY : 1 / 0;
3108
+ const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, s = r.maxY !== null ? r.maxY : 1 / 0;
3103
3109
  return (n) => {
3104
3110
  let a = n.nextTransform.x, h = n.nextTransform.y;
3105
3111
  a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
3106
3112
  const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
3107
- a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
3108
- const g = n.canvasHeight * n.prevTransform.scale, l = o - g;
3113
+ a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
3114
+ const g = n.canvasHeight * n.prevTransform.scale, l = s - g;
3109
3115
  return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
3110
3116
  };
3111
3117
  }, Ft = (r) => {
3112
- const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, o = t !== null ? 1 / t : 1 / 0;
3118
+ const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, s = t !== null ? 1 / t : 1 / 0;
3113
3119
  return (n) => {
3114
3120
  const a = n.prevTransform, h = n.nextTransform;
3115
3121
  let d = h.scale, c = h.x, g = h.y;
3116
- if (h.scale > o && h.scale > a.scale) {
3117
- d = Math.max(a.scale, o), c = a.x, g = a.y;
3122
+ if (h.scale > s && h.scale > a.scale) {
3123
+ d = Math.max(a.scale, s), c = a.x, g = a.y;
3118
3124
  const l = (d - a.scale) / (h.scale - a.scale);
3119
3125
  c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
3120
3126
  }
3121
- if (h.scale < s && h.scale < a.scale) {
3122
- d = Math.min(a.scale, s), c = a.x, g = a.y;
3127
+ if (h.scale < o && h.scale < a.scale) {
3128
+ d = Math.min(a.scale, o), c = a.x, g = a.y;
3123
3129
  const l = (d - a.scale) / (h.scale - a.scale);
3124
3130
  c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
3125
3131
  }
@@ -3130,7 +3136,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3130
3136
  };
3131
3137
  };
3132
3138
  }, It = (r) => (e) => r.reduce(
3133
- (t, s) => s({
3139
+ (t, o) => o({
3134
3140
  prevTransform: e.prevTransform,
3135
3141
  nextTransform: t,
3136
3142
  canvasWidth: e.canvasWidth,
@@ -3155,34 +3161,34 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3155
3161
  });
3156
3162
  }
3157
3163
  }, ye = (r) => {
3158
- var y, A, x, S, D, P, N, F, ne, ae, he, de;
3159
- const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
3160
- let o;
3161
- s !== void 0 ? Array.isArray(s) ? o = It(
3162
- s.map(
3163
- (M) => fe(M)
3164
+ var y, A, x, S, C, P, R, V, ie, ne, ae, he;
3165
+ const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
3166
+ let s;
3167
+ o !== void 0 ? Array.isArray(o) ? s = It(
3168
+ o.map(
3169
+ (D) => fe(D)
3164
3170
  )
3165
- ) : o = fe(s) : o = (M) => M.nextTransform;
3171
+ ) : s = fe(o) : s = (D) => D.nextTransform;
3166
3172
  const n = ((A = r == null ? void 0 : r.shift) == null ? void 0 : A.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
3167
3173
  }), h = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
3168
- }), d = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (M) => M.button === 0, u = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
3174
+ }), d = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (D) => D.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
3169
3175
  return {
3170
3176
  wheelSensitivity: t,
3171
- onTransformStarted: ((F = r == null ? void 0 : r.events) == null ? void 0 : F.onTransformStarted) ?? (() => {
3177
+ onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
3172
3178
  }),
3173
- onTransformFinished: ((ne = r == null ? void 0 : r.events) == null ? void 0 : ne.onTransformFinished) ?? (() => {
3179
+ onTransformFinished: ((ie = r == null ? void 0 : r.events) == null ? void 0 : ie.onTransformFinished) ?? (() => {
3174
3180
  }),
3175
3181
  onBeforeTransformChange: a,
3176
3182
  onTransformChange: h,
3177
- transformPreprocessor: o,
3183
+ transformPreprocessor: s,
3178
3184
  shiftCursor: n,
3179
3185
  mouseDownEventVerifier: c,
3180
3186
  mouseUpEventVerifier: l,
3181
3187
  mouseWheelEventVerifier: w,
3182
- scaleWheelFinishTimeout: ((ae = r == null ? void 0 : r.scale) == null ? void 0 : ae.wheelFinishTimeout) ?? 500,
3183
- onResizeTransformStarted: ((he = r == null ? void 0 : r.events) == null ? void 0 : he.onResizeTransformStarted) ?? (() => {
3188
+ scaleWheelFinishTimeout: ((ne = r == null ? void 0 : r.scale) == null ? void 0 : ne.wheelFinishTimeout) ?? 500,
3189
+ onResizeTransformStarted: ((ae = r == null ? void 0 : r.events) == null ? void 0 : ae.onResizeTransformStarted) ?? (() => {
3184
3190
  }),
3185
- onResizeTransformFinished: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onResizeTransformFinished) ?? (() => {
3191
+ onResizeTransformFinished: ((he = r == null ? void 0 : r.events) == null ? void 0 : he.onResizeTransformFinished) ?? (() => {
3186
3192
  })
3187
3193
  };
3188
3194
  }, $t = (r, e) => {
@@ -3195,33 +3201,33 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3195
3201
  (r == null ? void 0 : r.radius) ?? 1.5,
3196
3202
  (r == null ? void 0 : r.color) ?? "#d8d8d8"
3197
3203
  ), Bt = (r) => {
3198
- const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Ut(r.renderer ?? {});
3204
+ const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = Ut(r.renderer ?? {});
3199
3205
  return {
3200
3206
  tileWidth: t,
3201
- tileHeight: s,
3202
- renderer: o,
3207
+ tileHeight: o,
3208
+ renderer: s,
3203
3209
  maxViewportScale: r.maxViewportScale ?? 10
3204
3210
  };
3205
3211
  }, Ot = (r, e, t) => {
3206
3212
  var c, g, l;
3207
- const s = () => "direct", o = (u) => u, n = (u) => u.button === 0, a = () => {
3213
+ const o = () => "direct", s = (u) => u, n = (u) => u.button === 0, a = () => {
3208
3214
  }, h = () => {
3209
3215
  }, d = () => {
3210
3216
  };
3211
3217
  return {
3212
- connectionTypeResolver: r.connectionTypeResolver ?? s,
3213
- connectionPreprocessor: r.connectionPreprocessor ?? o,
3218
+ connectionTypeResolver: r.connectionTypeResolver ?? o,
3219
+ connectionPreprocessor: r.connectionPreprocessor ?? s,
3214
3220
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
3215
3221
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
3216
3222
  onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
3217
3223
  onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
3218
3224
  onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? h,
3219
3225
  dragPortDirection: r.dragPortDirection ?? t,
3220
- edgeShapeFactory: r.edgeShape !== void 0 ? ie(r.edgeShape) : e
3226
+ edgeShapeFactory: r.edgeShape !== void 0 ? se(r.edgeShape) : e
3221
3227
  };
3222
3228
  }, Wt = (r, e) => {
3223
3229
  var c, g, l;
3224
- const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, o = (u) => u.button === 0, n = (u) => {
3230
+ const t = (u) => u, o = (u) => u.button === 0 && u.ctrlKey, s = (u) => u.button === 0, n = (u) => {
3225
3231
  const w = e.getPortAdjacentEdgeIds(u);
3226
3232
  return w.length > 0 ? w[w.length - 1] : null;
3227
3233
  }, a = () => {
@@ -3230,10 +3236,10 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3230
3236
  };
3231
3237
  return {
3232
3238
  connectionPreprocessor: r.connectionPreprocessor ?? t,
3233
- mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
3234
- mouseUpEventVerifier: r.mouseUpEventVerifier ?? o,
3239
+ mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
3240
+ mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
3235
3241
  draggingEdgeResolver: r.draggingEdgeResolver ?? n,
3236
- draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ie(r.draggingEdgeShape) : null,
3242
+ draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? se(r.draggingEdgeShape) : null,
3237
3243
  onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
3238
3244
  onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
3239
3245
  onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
@@ -3257,22 +3263,22 @@ class Ht extends Error {
3257
3263
  }
3258
3264
  }
3259
3265
  class Fe {
3260
- constructor(e, t, s) {
3266
+ constructor(e, t, o) {
3261
3267
  i(this, "dt");
3262
3268
  i(this, "nodeMass");
3263
3269
  i(this, "edgeEquilibriumLength");
3264
3270
  i(this, "edgeStiffness");
3265
3271
  i(this, "nodeForcesApplicationStrategy");
3266
3272
  i(this, "distanceVectorGenerator");
3267
- this.graph = e, this.currentCoords = t, this.dt = s.dtSec, this.nodeMass = s.nodeMass, this.edgeEquilibriumLength = s.edgeEquilibriumLength, this.edgeStiffness = s.edgeStiffness, this.distanceVectorGenerator = s.distanceVectorGenerator, this.nodeForcesApplicationStrategy = s.nodeForcesApplicationStrategy;
3273
+ this.graph = e, this.currentCoords = t, this.dt = o.dtSec, this.nodeMass = o.nodeMass, this.edgeEquilibriumLength = o.edgeEquilibriumLength, this.edgeStiffness = o.edgeStiffness, this.distanceVectorGenerator = o.distanceVectorGenerator, this.nodeForcesApplicationStrategy = o.nodeForcesApplicationStrategy;
3268
3274
  }
3269
3275
  apply() {
3270
3276
  let e = 0, t = 0;
3271
- const s = /* @__PURE__ */ new Map();
3277
+ const o = /* @__PURE__ */ new Map();
3272
3278
  return this.graph.getAllNodeIds().forEach((n) => {
3273
- s.set(n, { x: 0, y: 0 });
3274
- }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, s), this.applyEdgeForces(s), this.currentCoords.forEach((n, a) => {
3275
- const h = s.get(a), d = {
3279
+ o.set(n, { x: 0, y: 0 });
3280
+ }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, o), this.applyEdgeForces(o), this.currentCoords.forEach((n, a) => {
3281
+ const h = o.get(a), d = {
3276
3282
  x: h.x / this.nodeMass * this.dt,
3277
3283
  y: h.y / this.nodeMass * this.dt
3278
3284
  };
@@ -3286,10 +3292,10 @@ class Fe {
3286
3292
  }
3287
3293
  applyEdgeForces(e) {
3288
3294
  this.graph.getAllEdgeIds().forEach((t) => {
3289
- const s = this.graph.getEdge(t), o = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(o.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
3295
+ const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
3290
3296
  a,
3291
3297
  h
3292
- ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId), y = e.get(n.nodeId);
3298
+ ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(s.nodeId), y = e.get(n.nodeId);
3293
3299
  w.x += l, w.y += u, y.x -= l, y.y -= u;
3294
3300
  });
3295
3301
  }
@@ -3300,7 +3306,7 @@ class Ie {
3300
3306
  this.rand = e;
3301
3307
  }
3302
3308
  create(e, t) {
3303
- const s = t.x - e.x, o = t.y - e.y, n = s * s + o * o;
3309
+ const o = t.x - e.x, s = t.y - e.y, n = o * o + s * s;
3304
3310
  if (n === 0) {
3305
3311
  const c = this.PI2 * this.rand();
3306
3312
  return {
@@ -3309,7 +3315,7 @@ class Ie {
3309
3315
  d: 0
3310
3316
  };
3311
3317
  }
3312
- const a = Math.sqrt(n), h = s / a, d = o / a;
3318
+ const a = Math.sqrt(n), h = o / a, d = s / a;
3313
3319
  return { ex: h, ey: d, d: a };
3314
3320
  }
3315
3321
  }
@@ -3328,11 +3334,11 @@ class Xt {
3328
3334
  this.effectiveDistance = e.effectiveDistance, this.nodeCharge = e.nodeCharge, this.distanceVectorGenerator = e.distanceVectorGenerator, this.maxForce = e.maxForce;
3329
3335
  }
3330
3336
  apply(e, t) {
3331
- const s = Array.from(t.keys()), o = s.length;
3332
- for (let n = 0; n < o; n++) {
3333
- const a = s[n];
3334
- for (let h = n + 1; h < o; h++) {
3335
- const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
3337
+ const o = Array.from(t.keys()), s = o.length;
3338
+ for (let n = 0; n < s; n++) {
3339
+ const a = o[n];
3340
+ for (let h = n + 1; h < s; h++) {
3341
+ const d = o[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
3336
3342
  c,
3337
3343
  g
3338
3344
  );
@@ -3357,14 +3363,14 @@ const Yt = (r) => {
3357
3363
  centerY: 0,
3358
3364
  radius: 0
3359
3365
  };
3360
- let e = 1 / 0, t = -1 / 0, s = 1 / 0, o = -1 / 0;
3366
+ let e = 1 / 0, t = -1 / 0, o = 1 / 0, s = -1 / 0;
3361
3367
  r.forEach((d) => {
3362
- e = Math.min(e, d.x), t = Math.max(t, d.x), s = Math.min(s, d.y), o = Math.max(o, d.y);
3368
+ e = Math.min(e, d.x), t = Math.max(t, d.x), o = Math.min(o, d.y), s = Math.max(s, d.y);
3363
3369
  });
3364
- const n = t - e, a = o - s, h = Math.max(n, a);
3370
+ const n = t - e, a = s - o, h = Math.max(n, a);
3365
3371
  return {
3366
3372
  centerX: (e + t) / 2,
3367
- centerY: (s + o) / 2,
3373
+ centerY: (o + s) / 2,
3368
3374
  radius: h / 2
3369
3375
  };
3370
3376
  };
@@ -3394,18 +3400,18 @@ class Gt {
3394
3400
  };
3395
3401
  let t = [this.root];
3396
3402
  for (; t.length > 0; ) {
3397
- const s = [];
3403
+ const o = [];
3398
3404
  for (; t.length > 0; ) {
3399
- const o = t.pop();
3400
- this.processNode(o).forEach((a) => {
3401
- s.push(a);
3405
+ const s = t.pop();
3406
+ this.processNode(s).forEach((a) => {
3407
+ o.push(a);
3402
3408
  });
3403
3409
  }
3404
- t = s;
3410
+ t = o;
3405
3411
  }
3406
- this.sortedParentNodes.reverse().forEach((s) => {
3407
- let o = 0, n = 0, a = 0, h = 0;
3408
- s.lb !== null && (a += s.lb.totalMass, h += s.lb.totalCharge, o += s.lb.chargeCenter.x * s.lb.totalCharge, n += s.lb.chargeCenter.y * s.lb.totalCharge), s.lt !== null && (a += s.lt.totalMass, h += s.lt.totalCharge, o += s.lt.chargeCenter.x * s.lt.totalCharge, n += s.lt.chargeCenter.y * s.lt.totalCharge), s.rb !== null && (a += s.rb.totalMass, h += s.rb.totalCharge, o += s.rb.chargeCenter.x * s.rb.totalCharge, n += s.rb.chargeCenter.y * s.rb.totalCharge), s.rt !== null && (a += s.rt.totalMass, h += s.rt.totalCharge, o += s.rt.chargeCenter.x * s.rt.totalCharge, n += s.rt.chargeCenter.y * s.rt.totalCharge), s.totalMass = a, s.totalCharge = h, s.chargeCenter.x = o / h, s.chargeCenter.y = n / h;
3412
+ this.sortedParentNodes.reverse().forEach((o) => {
3413
+ let s = 0, n = 0, a = 0, h = 0;
3414
+ o.lb !== null && (a += o.lb.totalMass, h += o.lb.totalCharge, s += o.lb.chargeCenter.x * o.lb.totalCharge, n += o.lb.chargeCenter.y * o.lb.totalCharge), o.lt !== null && (a += o.lt.totalMass, h += o.lt.totalCharge, s += o.lt.chargeCenter.x * o.lt.totalCharge, n += o.lt.chargeCenter.y * o.lt.totalCharge), o.rb !== null && (a += o.rb.totalMass, h += o.rb.totalCharge, s += o.rb.chargeCenter.x * o.rb.totalCharge, n += o.rb.chargeCenter.y * o.rb.totalCharge), o.rt !== null && (a += o.rt.totalMass, h += o.rt.totalCharge, s += o.rt.chargeCenter.x * o.rt.totalCharge, n += o.rt.chargeCenter.y * o.rt.totalCharge), o.totalMass = a, o.totalCharge = h, o.chargeCenter.x = s / h, o.chargeCenter.y = n / h;
3409
3415
  });
3410
3416
  }
3411
3417
  getRoot() {
@@ -3417,14 +3423,14 @@ class Gt {
3417
3423
  processNode(e) {
3418
3424
  if (e.nodeIds.size < 2)
3419
3425
  return this.setLeaf(e), [];
3420
- const { centerX: t, centerY: s, radius: o } = e.box;
3421
- if (o < this.areaRadiusThreshold)
3426
+ const { centerX: t, centerY: o, radius: s } = e.box;
3427
+ if (s < this.areaRadiusThreshold)
3422
3428
  return this.setLeaf(e), [];
3423
3429
  this.sortedParentNodes.push(e);
3424
- const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = o / 2;
3430
+ const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
3425
3431
  e.nodeIds.forEach((u) => {
3426
3432
  const { x: w, y } = this.coords.get(u);
3427
- w < t ? y < s ? d.add(u) : h.add(u) : y < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
3433
+ w < t ? y < o ? d.add(u) : h.add(u) : y < o ? a.add(u) : n.add(u), e.nodeIds.delete(u);
3428
3434
  });
3429
3435
  const g = {
3430
3436
  parent: e,
@@ -3444,7 +3450,7 @@ class Gt {
3444
3450
  },
3445
3451
  box: {
3446
3452
  centerX: t + c,
3447
- centerY: s + c,
3453
+ centerY: o + c,
3448
3454
  radius: c
3449
3455
  },
3450
3456
  ...g
@@ -3462,7 +3468,7 @@ class Gt {
3462
3468
  },
3463
3469
  box: {
3464
3470
  centerX: t + c,
3465
- centerY: s - c,
3471
+ centerY: o - c,
3466
3472
  radius: c
3467
3473
  },
3468
3474
  ...g
@@ -3480,7 +3486,7 @@ class Gt {
3480
3486
  },
3481
3487
  box: {
3482
3488
  centerX: t - c,
3483
- centerY: s + c,
3489
+ centerY: o + c,
3484
3490
  radius: c
3485
3491
  },
3486
3492
  ...g
@@ -3498,7 +3504,7 @@ class Gt {
3498
3504
  },
3499
3505
  box: {
3500
3506
  centerX: t - c,
3501
- centerY: s - c,
3507
+ centerY: o - c,
3502
3508
  radius: c
3503
3509
  },
3504
3510
  ...g
@@ -3518,11 +3524,11 @@ class Gt {
3518
3524
  x: 0,
3519
3525
  y: 0
3520
3526
  };
3521
- let t = 0, s = 0;
3522
- return e.forEach((o) => {
3523
- const n = this.coords.get(o);
3524
- t += n.x, s += n.y;
3525
- }), { x: t / e.size, y: s / e.size };
3527
+ let t = 0, o = 0;
3528
+ return e.forEach((s) => {
3529
+ const n = this.coords.get(s);
3530
+ t += n.x, o += n.y;
3531
+ }), { x: t / e.size, y: o / e.size };
3526
3532
  }
3527
3533
  }
3528
3534
  class jt {
@@ -3537,8 +3543,8 @@ class jt {
3537
3543
  this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
3538
3544
  }
3539
3545
  apply(e, t) {
3540
- const s = Yt(e), o = new Gt({
3541
- box: s,
3546
+ const o = Yt(e), s = new Gt({
3547
+ box: o,
3542
3548
  coords: e,
3543
3549
  areaRadiusThreshold: this.areaRadiusThreshold,
3544
3550
  nodeMass: this.nodeMass,
@@ -3546,22 +3552,22 @@ class jt {
3546
3552
  });
3547
3553
  e.forEach((n, a) => {
3548
3554
  const h = this.calculateForceForNode(
3549
- o.getLeaf(a),
3555
+ s.getLeaf(a),
3550
3556
  a,
3551
3557
  e
3552
3558
  ), d = t.get(a);
3553
3559
  this.applyForce(d, h);
3554
3560
  });
3555
3561
  }
3556
- calculateForceForNode(e, t, s) {
3557
- const o = s.get(t), n = { x: 0, y: 0 };
3562
+ calculateForceForNode(e, t, o) {
3563
+ const s = o.get(t), n = { x: 0, y: 0 };
3558
3564
  e.nodeIds.forEach((h) => {
3559
3565
  if (h !== t) {
3560
- const d = s.get(h), c = this.calculateNodeRepulsiveForce({
3566
+ const d = o.get(h), c = this.calculateNodeRepulsiveForce({
3561
3567
  sourceCharge: this.nodeCharge,
3562
3568
  targetCharge: this.nodeCharge,
3563
3569
  sourceCoords: d,
3564
- targetCoords: o
3570
+ targetCoords: s
3565
3571
  });
3566
3572
  this.applyForce(n, c);
3567
3573
  }
@@ -3572,73 +3578,73 @@ class jt {
3572
3578
  if (h !== null) {
3573
3579
  const d = this.distanceVectorGenerator.create(
3574
3580
  h.chargeCenter,
3575
- o
3581
+ s
3576
3582
  );
3577
3583
  h.box.radius * 2 < d.d * this.theta ? (this.tryApplyFarForce({
3578
3584
  totalForce: n,
3579
- targetCoords: o,
3585
+ targetCoords: s,
3580
3586
  target: h.lb,
3581
3587
  current: a
3582
3588
  }), this.tryApplyFarForce({
3583
3589
  totalForce: n,
3584
- targetCoords: o,
3590
+ targetCoords: s,
3585
3591
  target: h.rb,
3586
3592
  current: a
3587
3593
  }), this.tryApplyFarForce({
3588
3594
  totalForce: n,
3589
- targetCoords: o,
3595
+ targetCoords: s,
3590
3596
  target: h.rt,
3591
3597
  current: a
3592
3598
  }), this.tryApplyFarForce({
3593
3599
  totalForce: n,
3594
- targetCoords: o,
3600
+ targetCoords: s,
3595
3601
  target: h.lt,
3596
3602
  current: a
3597
3603
  })) : (this.tryApplyNearForce({
3598
3604
  totalForce: n,
3599
- targetCoords: o,
3605
+ targetCoords: s,
3600
3606
  target: h.lb,
3601
3607
  current: a,
3602
- nodesCoords: s
3608
+ nodesCoords: o
3603
3609
  }), this.tryApplyNearForce({
3604
3610
  totalForce: n,
3605
- targetCoords: o,
3611
+ targetCoords: s,
3606
3612
  target: h.rb,
3607
3613
  current: a,
3608
- nodesCoords: s
3614
+ nodesCoords: o
3609
3615
  }), this.tryApplyNearForce({
3610
3616
  totalForce: n,
3611
- targetCoords: o,
3617
+ targetCoords: s,
3612
3618
  target: h.rt,
3613
3619
  current: a,
3614
- nodesCoords: s
3620
+ nodesCoords: o
3615
3621
  }), this.tryApplyNearForce({
3616
3622
  totalForce: n,
3617
- targetCoords: o,
3623
+ targetCoords: s,
3618
3624
  target: h.lt,
3619
3625
  current: a,
3620
- nodesCoords: s
3626
+ nodesCoords: o
3621
3627
  }));
3622
3628
  }
3623
3629
  a = a.parent;
3624
3630
  }
3625
3631
  return n;
3626
3632
  }
3627
- calculateExactForce(e, t, s) {
3628
- const o = { x: 0, y: 0 }, n = [e];
3633
+ calculateExactForce(e, t, o) {
3634
+ const s = { x: 0, y: 0 }, n = [e];
3629
3635
  for (; n.length > 0; ) {
3630
3636
  const a = n.pop();
3631
3637
  a.nodeIds.forEach((h) => {
3632
- const d = s.get(h), c = this.calculateNodeRepulsiveForce({
3638
+ const d = o.get(h), c = this.calculateNodeRepulsiveForce({
3633
3639
  sourceCharge: this.nodeCharge,
3634
3640
  targetCharge: this.nodeCharge,
3635
3641
  sourceCoords: d,
3636
3642
  targetCoords: t
3637
3643
  });
3638
- this.applyForce(o, c);
3644
+ this.applyForce(s, c);
3639
3645
  }), a.lb !== null && n.push(a.lb), a.rb !== null && n.push(a.rb), a.lt !== null && n.push(a.lt), a.rt !== null && n.push(a.rt);
3640
3646
  }
3641
- return o;
3647
+ return s;
3642
3648
  }
3643
3649
  calculateApproximateForce(e, t) {
3644
3650
  return this.calculateNodeRepulsiveForce({
@@ -3652,7 +3658,7 @@ class jt {
3652
3658
  const t = this.distanceVectorGenerator.create(
3653
3659
  e.sourceCoords,
3654
3660
  e.targetCoords
3655
- ), s = $e({
3661
+ ), o = $e({
3656
3662
  coefficient: this.nodeForceCoefficient,
3657
3663
  sourceCharge: e.sourceCharge,
3658
3664
  targetCharge: e.targetCharge,
@@ -3660,8 +3666,8 @@ class jt {
3660
3666
  maxForce: this.maxForce
3661
3667
  });
3662
3668
  return {
3663
- x: s * t.ex,
3664
- y: s * t.ey
3669
+ x: o * t.ex,
3670
+ y: o * t.ey
3665
3671
  };
3666
3672
  }
3667
3673
  applyForce(e, t) {
@@ -3709,12 +3715,12 @@ class Be {
3709
3715
  this.rand = e.rand, this.sparsity = e.sparsity;
3710
3716
  }
3711
3717
  calculateCoordinates(e) {
3712
- const t = /* @__PURE__ */ new Map(), s = e.getAllNodeIds(), o = Math.sqrt(s.length) * this.sparsity;
3713
- return s.forEach((n) => {
3718
+ const t = /* @__PURE__ */ new Map(), o = e.getAllNodeIds(), s = Math.sqrt(o.length) * this.sparsity;
3719
+ return o.forEach((n) => {
3714
3720
  const a = e.getNode(n);
3715
3721
  t.set(n, {
3716
- x: a.x ?? o * this.rand(),
3717
- y: a.y ?? o * this.rand()
3722
+ x: a.x ?? s * this.rand(),
3723
+ y: a.y ?? s * this.rand()
3718
3724
  });
3719
3725
  }), t;
3720
3726
  }
@@ -3747,8 +3753,8 @@ class qt {
3747
3753
  }
3748
3754
  calculateCoordinates(e) {
3749
3755
  const t = this.fillerLayoutAlgorithm.calculateCoordinates(e);
3750
- for (let s = 0; s < this.maxIterations; s++) {
3751
- const o = new Fe(
3756
+ for (let o = 0; o < this.maxIterations; o++) {
3757
+ const s = new Fe(
3752
3758
  e,
3753
3759
  t,
3754
3760
  {
@@ -3759,7 +3765,7 @@ class qt {
3759
3765
  edgeEquilibriumLength: this.edgeEquilibriumLength,
3760
3766
  edgeStiffness: this.edgeStiffness
3761
3767
  }
3762
- ), [n, a] = o.apply();
3768
+ ), [n, a] = s.apply();
3763
3769
  if (n < this.convergenceDelta || a < this.convergenceVelocity)
3764
3770
  break;
3765
3771
  }
@@ -3792,9 +3798,9 @@ class Kt {
3792
3798
  });
3793
3799
  }
3794
3800
  calculateNextCoordinates(e, t) {
3795
- const s = this.fillerLayoutAlgorithm.calculateCoordinates(e), o = new Fe(
3801
+ const o = this.fillerLayoutAlgorithm.calculateCoordinates(e), s = new Fe(
3796
3802
  e,
3797
- s,
3803
+ o,
3798
3804
  {
3799
3805
  distanceVectorGenerator: this.distanceVectorGenerator,
3800
3806
  nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3803,22 +3809,22 @@ class Kt {
3803
3809
  edgeEquilibriumLength: this.edgeEquilibriumLength,
3804
3810
  edgeStiffness: this.edgeStiffness
3805
3811
  }
3806
- ), [n, a] = o.apply();
3812
+ ), [n, a] = s.apply();
3807
3813
  return (n < this.convergenceDelta || a < this.convergenceVelocity) && !e.getAllNodeIds().some((d) => {
3808
3814
  const c = e.getNode(d);
3809
3815
  return c.x === null || c.y === null;
3810
- }) ? /* @__PURE__ */ new Map() : s;
3816
+ }) ? /* @__PURE__ */ new Map() : o;
3811
3817
  }
3812
3818
  }
3813
3819
  const Oe = (r) => {
3814
- let e = 1779033703, t = 3144134277, s = 1013904242, o = 2773480762;
3820
+ let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
3815
3821
  for (let n = 0, a; n < r.length; n++)
3816
- a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = s ^ Math.imul(t ^ a, 2869860233), s = o ^ Math.imul(s ^ a, 951274213), o = e ^ Math.imul(o ^ a, 2716044179);
3817
- return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(o ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), o = Math.imul(t ^ o >>> 19, 2716044179), e ^= t ^ s ^ o, t ^= e, s ^= e, o ^= e, [e >>> 0, t >>> 0, s >>> 0, o >>> 0];
3818
- }, We = (r, e, t, s) => function() {
3819
- r |= 0, e |= 0, t |= 0, s |= 0;
3820
- const o = (r + e | 0) + s | 0;
3821
- return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + o | 0, (o >>> 0) / 4294967296;
3822
+ a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = o ^ Math.imul(t ^ a, 2869860233), o = s ^ Math.imul(o ^ a, 951274213), s = e ^ Math.imul(s ^ a, 2716044179);
3823
+ return e = Math.imul(o ^ e >>> 18, 597399067), t = Math.imul(s ^ t >>> 22, 2869860233), o = Math.imul(e ^ o >>> 17, 951274213), s = Math.imul(t ^ s >>> 19, 2716044179), e ^= t ^ o ^ s, t ^= e, o ^= e, s ^= e, [e >>> 0, t >>> 0, o >>> 0, s >>> 0];
3824
+ }, We = (r, e, t, o) => function() {
3825
+ r |= 0, e |= 0, t |= 0, o |= 0;
3826
+ const s = (r + e | 0) + o | 0;
3827
+ return o = o + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + s | 0, (s >>> 0) / 4294967296;
3822
3828
  }, v = Object.freeze({
3823
3829
  seed: "HTMLGraph is awesome",
3824
3830
  maxTimeDeltaSec: 0.01,
@@ -3836,30 +3842,30 @@ const Oe = (r) => {
3836
3842
  barnesHutAreaRadiusThreshold: 0.01,
3837
3843
  barnesHutTheta: 1
3838
3844
  }), Qt = (r) => {
3839
- var e, t, s;
3845
+ var e, t, o;
3840
3846
  switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
3841
3847
  case "custom":
3842
3848
  return r.algorithm.instance;
3843
3849
  default: {
3844
- const o = r == null ? void 0 : r.algorithm, n = Oe((o == null ? void 0 : o.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
3850
+ const s = r == null ? void 0 : r.algorithm, n = Oe((s == null ? void 0 : s.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
3845
3851
  return new Kt({
3846
3852
  rand: a,
3847
- maxTimeDeltaSec: (o == null ? void 0 : o.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
3848
- nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
3849
- nodeMass: (o == null ? void 0 : o.nodeMass) ?? v.nodeMass,
3850
- edgeEquilibriumLength: (o == null ? void 0 : o.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
3853
+ maxTimeDeltaSec: (s == null ? void 0 : s.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
3854
+ nodeCharge: (s == null ? void 0 : s.nodeCharge) ?? v.nodeCharge,
3855
+ nodeMass: (s == null ? void 0 : s.nodeMass) ?? v.nodeMass,
3856
+ edgeEquilibriumLength: (s == null ? void 0 : s.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
3851
3857
  effectiveDistance: v.effectiveDistance,
3852
- edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
3853
- convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
3854
- convergenceVelocity: (o == null ? void 0 : o.convergenceVelocity) ?? v.convergenceVelocity,
3855
- maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
3856
- nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
3857
- barnesHutTheta: ((t = o == null ? void 0 : o.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
3858
- barnesHutAreaRadiusThreshold: ((s = o == null ? void 0 : o.barnesHut) == null ? void 0 : s.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
3858
+ edgeStiffness: (s == null ? void 0 : s.edgeStiffness) ?? v.edgeStiffness,
3859
+ convergenceDelta: (s == null ? void 0 : s.convergenceDelta) ?? v.convergenceDelta,
3860
+ convergenceVelocity: (s == null ? void 0 : s.convergenceVelocity) ?? v.convergenceVelocity,
3861
+ maxForce: (s == null ? void 0 : s.maxForce) ?? v.maxForce,
3862
+ nodeForceCoefficient: (s == null ? void 0 : s.nodeForceCoefficient) ?? v.nodeForceCoefficient,
3863
+ barnesHutTheta: ((t = s == null ? void 0 : s.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
3864
+ barnesHutAreaRadiusThreshold: ((o = s == null ? void 0 : s.barnesHut) == null ? void 0 : o.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
3859
3865
  });
3860
3866
  }
3861
3867
  }
3862
- }, Zt = (r) => r instanceof j ? {
3868
+ }, Zt = (r) => r instanceof G ? {
3863
3869
  type: "manual",
3864
3870
  trigger: r
3865
3871
  } : {
@@ -3870,11 +3876,11 @@ const Oe = (r) => {
3870
3876
  case "custom":
3871
3877
  return r.instance;
3872
3878
  default: {
3873
- const s = Oe((r == null ? void 0 : r.seed) ?? v.seed), o = We(s[0], s[1], s[2], s[3]);
3879
+ const o = Oe((r == null ? void 0 : r.seed) ?? v.seed), s = We(o[0], o[1], o[2], o[3]);
3874
3880
  return new qt({
3875
3881
  dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
3876
3882
  maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
3877
- rand: o,
3883
+ rand: s,
3878
3884
  nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
3879
3885
  nodeMass: (r == null ? void 0 : r.nodeMass) ?? v.nodeMass,
3880
3886
  edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
@@ -3907,7 +3913,7 @@ const Oe = (r) => {
3907
3913
  e.clear();
3908
3914
  });
3909
3915
  };
3910
- class or {
3916
+ class sr {
3911
3917
  constructor(e) {
3912
3918
  i(this, "used", !1);
3913
3919
  i(this, "canvasDefaults", {});
@@ -3927,7 +3933,7 @@ class or {
3927
3933
  i(this, "hasUserDraggableEdges", !1);
3928
3934
  i(this, "hasAnimatedLayout", !1);
3929
3935
  i(this, "hasLayout", !1);
3930
- i(this, "boxRenderingTrigger", new j());
3936
+ i(this, "boxRenderingTrigger", new G());
3931
3937
  i(this, "graphStore");
3932
3938
  i(this, "viewportStore");
3933
3939
  i(this, "graph");
@@ -4004,25 +4010,25 @@ class or {
4004
4010
  if (this.used)
4005
4011
  throw new Ht("CanvasBuilder is a single use object");
4006
4012
  this.used = !0;
4007
- const e = new Ct(this.element), t = this.createHtmlView(e.main), s = Lt(this.canvasDefaults), o = new ve(
4013
+ const e = new Dt(this.element), t = this.createHtmlView(e.main), o = Lt(this.canvasDefaults), s = new ve(
4008
4014
  this.graph,
4009
4015
  this.viewport,
4010
4016
  this.graphStore,
4011
4017
  this.viewportStore,
4012
4018
  t,
4013
- s
4019
+ o
4014
4020
  );
4015
- if (this.hasBackground && _.configure(
4016
- o,
4021
+ if (this.hasBackground && J.configure(
4022
+ s,
4017
4023
  Bt(this.backgroundConfig),
4018
4024
  e.background
4019
- ), this.hasNodeResizeReactiveEdges && q.configure(o), this.hasDraggableNodes) {
4025
+ ), this.hasNodeResizeReactiveEdges && j.configure(s), this.hasDraggableNodes) {
4020
4026
  let a = Rt(this.dragConfig);
4021
4027
  this.hasAnimatedLayout && (a = er(
4022
4028
  a,
4023
4029
  this.animationStaticNodes
4024
- )), Z.configure(
4025
- o,
4030
+ )), Q.configure(
4031
+ s,
4026
4032
  e.main,
4027
4033
  this.window,
4028
4034
  a
@@ -4031,11 +4037,11 @@ class or {
4031
4037
  if (this.hasUserConnectablePorts) {
4032
4038
  const a = Ot(
4033
4039
  this.connectablePortsConfig,
4034
- s.edges.shapeFactory,
4035
- s.ports.direction
4040
+ o.edges.shapeFactory,
4041
+ o.ports.direction
4036
4042
  );
4037
- ee.configure(
4038
- o,
4043
+ _.configure(
4044
+ s,
4039
4045
  e.overlayConnectablePorts,
4040
4046
  this.viewportStore,
4041
4047
  this.window,
@@ -4045,44 +4051,44 @@ class or {
4045
4051
  if (this.hasUserDraggableEdges) {
4046
4052
  const a = Wt(
4047
4053
  this.draggableEdgesConfig,
4048
- o.graph
4054
+ s.graph
4049
4055
  );
4050
- te.configure(
4051
- o,
4056
+ ee.configure(
4057
+ s,
4052
4058
  e.overlayDraggableEdges,
4053
4059
  this.viewportStore,
4054
4060
  this.window,
4055
4061
  a
4056
4062
  );
4057
4063
  }
4058
- this.virtualScrollConfig !== void 0 ? J.configure(
4059
- o,
4064
+ this.virtualScrollConfig !== void 0 ? Z.configure(
4065
+ s,
4060
4066
  e.main,
4061
4067
  this.window,
4062
4068
  ye(this.transformConfig),
4063
4069
  this.boxRenderingTrigger,
4064
4070
  zt(this.virtualScrollConfig)
4065
- ) : this.hasTransformableViewport && H.configure(
4066
- o,
4071
+ ) : this.hasTransformableViewport && k.configure(
4072
+ s,
4067
4073
  e.main,
4068
4074
  this.window,
4069
4075
  ye(this.transformConfig)
4070
4076
  ), this.hasLayout && Pt.configure(
4071
- o,
4077
+ s,
4072
4078
  _t(this.layoutConfig)
4073
4079
  ), this.hasAnimatedLayout && (tr(
4074
- o.graph,
4080
+ s.graph,
4075
4081
  this.animationStaticNodes
4076
4082
  ), oe.configure(
4077
- o,
4083
+ s,
4078
4084
  Qt(this.animatedLayoutConfig),
4079
4085
  this.animationStaticNodes,
4080
4086
  this.window
4081
4087
  ));
4082
4088
  const n = () => {
4083
- e.destroy(), o.onBeforeDestroy.unsubscribe(n);
4089
+ e.destroy(), s.onBeforeDestroy.unsubscribe(n);
4084
4090
  };
4085
- return o.onBeforeDestroy.subscribe(n), o;
4091
+ return s.onBeforeDestroy.subscribe(n), s;
4086
4092
  }
4087
4093
  createHtmlView(e) {
4088
4094
  let t = new me(
@@ -4100,16 +4106,16 @@ class or {
4100
4106
  }
4101
4107
  export {
4102
4108
  ut as BezierEdgeShape,
4103
- or as CanvasBuilder,
4109
+ sr as CanvasBuilder,
4104
4110
  Ht as CanvasBuilderError,
4105
4111
  b as CanvasError,
4106
- R as ConnectionCategory,
4112
+ M as ConnectionCategory,
4107
4113
  Ne as DirectEdgeShape,
4108
- j as EventSubject,
4114
+ G as EventSubject,
4109
4115
  pt as HorizontalEdgeShape,
4110
4116
  vt as InteractiveEdgeError,
4111
4117
  Me as InteractiveEdgeShape,
4112
- sr as MidpointEdgeShape,
4118
+ or as MidpointEdgeShape,
4113
4119
  wt as StraightEdgeShape,
4114
4120
  ft as VerticalEdgeShape
4115
4121
  };