@html-graph/html-graph 7.4.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 +22 -1
  2. package/dist/html-graph.js +834 -790
  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
- var ke = Object.defineProperty;
2
- var ze = (r, e, t) => e in r ? ke(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
- var i = (r, e, t) => ze(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 || {});
1
+ var ze = Object.defineProperty;
2
+ var ke = (r, e, t) => e in r ? ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
+ var i = (r, e, t) => ke(r, typeof e != "symbol" ? e + "" : e, t);
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);
@@ -198,7 +189,7 @@ class je {
198
189
  this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
199
190
  }
200
191
  }
201
- class Ke {
192
+ class qe {
202
193
  constructor(e, t) {
203
194
  i(this, "deferredNodes", /* @__PURE__ */ new Set());
204
195
  i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -245,14 +236,14 @@ class Ke {
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
  }
@@ -507,40 +498,40 @@ class ve {
507
498
  this.onAfterEdgeShapeUpdated
508
499
  ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
509
500
  this.onAfterEdgePriorityUpdated
510
- ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
501
+ ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.viewportStore.destroy(), this.destroyed = !0);
511
502
  }
512
503
  }
513
- class Qe {
504
+ class Ke {
514
505
  constructor() {
515
506
  i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
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) {
@@ -550,7 +541,7 @@ class Qe {
550
541
  return this.multiToSingleMap.get(e) !== void 0;
551
542
  }
552
543
  }
553
- class xe {
544
+ class Ae {
554
545
  constructor() {
555
546
  i(this, "nodes", /* @__PURE__ */ new Map());
556
547
  i(this, "ports", /* @__PURE__ */ new Map());
@@ -559,7 +550,7 @@ class xe {
559
550
  i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
560
551
  i(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
561
552
  i(this, "portCycleEdges", /* @__PURE__ */ new Map());
562
- i(this, "elementPorts", new Qe());
553
+ i(this, "elementPorts", new Ke());
563
554
  i(this, "afterNodeAddedEmitter");
564
555
  i(this, "onAfterNodeAdded");
565
556
  i(this, "afterNodeUpdatedEmitter");
@@ -589,7 +580,7 @@ class xe {
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 xe {
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 xe {
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 xe {
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 xe {
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 xe {
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,26 +744,36 @@ class xe {
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
- };
769
- class Ze {
770
- constructor() {
771
- i(this, "viewportMatrix", le);
772
- i(this, "contentMatrix", le);
759
+ }, le = (r, e) => ({
760
+ x: r.scale * e.x + r.x,
761
+ y: r.scale * e.y + r.y
762
+ });
763
+ class Qe {
764
+ constructor(e) {
765
+ i(this, "viewportMatrix", ce);
766
+ i(this, "contentMatrix", ce);
767
+ i(this, "beforeUpdateEmitter");
768
+ i(this, "onBeforeUpdated");
773
769
  i(this, "afterUpdateEmitter");
774
770
  i(this, "onAfterUpdated");
775
- [this.afterUpdateEmitter, this.onAfterUpdated] = E();
771
+ i(this, "afterResizeEmitter");
772
+ i(this, "onAfterResize");
773
+ i(this, "observer", new ResizeObserver(() => {
774
+ this.afterResizeEmitter.emit();
775
+ }));
776
+ this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] = E(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = E(), [this.afterResizeEmitter, this.onAfterResize] = E(), this.observer.observe(this.host);
776
777
  }
777
778
  getViewportMatrix() {
778
779
  return this.viewportMatrix;
@@ -785,17 +786,30 @@ class Ze {
785
786
  scale: e.scale ?? this.viewportMatrix.scale,
786
787
  x: e.x ?? this.viewportMatrix.x,
787
788
  y: e.y ?? this.viewportMatrix.y
788
- }, this.contentMatrix = ce(this.viewportMatrix), this.afterUpdateEmitter.emit();
789
+ }, this.beforeUpdateEmitter.emit(), this.contentMatrix = de(this.viewportMatrix), this.afterUpdateEmitter.emit();
789
790
  }
790
791
  patchContentMatrix(e) {
791
792
  this.contentMatrix = {
792
793
  scale: e.scale ?? this.contentMatrix.scale,
793
794
  x: e.x ?? this.contentMatrix.x,
794
795
  y: e.y ?? this.contentMatrix.y
795
- }, this.viewportMatrix = ce(this.contentMatrix), this.afterUpdateEmitter.emit();
796
+ }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = de(this.contentMatrix), this.afterUpdateEmitter.emit();
797
+ }
798
+ getDimensions() {
799
+ const { width: e, height: t } = this.host.getBoundingClientRect();
800
+ return { width: e, height: t };
801
+ }
802
+ createContentCoords(e) {
803
+ return le(this.viewportMatrix, e);
804
+ }
805
+ createViewportCoords(e) {
806
+ return le(this.contentMatrix, e);
807
+ }
808
+ destroy() {
809
+ this.observer.disconnect();
796
810
  }
797
811
  }
798
- class K {
812
+ class j {
799
813
  constructor(e) {
800
814
  i(this, "elementToNodeId", /* @__PURE__ */ new Map());
801
815
  i(this, "nodesResizeObserver");
@@ -811,35 +825,35 @@ class K {
811
825
  this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
812
826
  });
813
827
  this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
814
- t.forEach((s) => {
815
- const o = s.target;
816
- this.handleNodeResize(o);
828
+ t.forEach((o) => {
829
+ const s = o.target;
830
+ this.handleNodeResize(s);
817
831
  });
818
832
  }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
819
833
  }
820
834
  static configure(e) {
821
- new K(e);
835
+ new j(e);
822
836
  }
823
837
  handleNodeResize(e) {
824
838
  const t = this.elementToNodeId.get(e);
825
839
  this.canvas.updateNode(t);
826
840
  }
827
841
  }
828
- const qe = (r, e, t) => {
829
- const { x: s, y: o, width: n, height: a } = r.getBoundingClientRect();
830
- return e >= s && e <= s + n && t >= o && t <= o + a;
831
- }, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => qe(e, t, s) && Je(r, t, s), U = (r, e) => {
842
+ const Ze = (r, e, t) => {
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) => {
832
846
  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
833
- }, B = (r) => {
847
+ }, U = (r) => {
834
848
  const e = document.createElement("div");
835
849
  return {
836
- id: r.overlayId,
850
+ id: r.overlayNodeId,
837
851
  element: e,
838
852
  x: r.portCoords.x,
839
853
  y: r.portCoords.y,
840
854
  ports: [
841
855
  {
842
- id: r.overlayId,
856
+ id: r.overlayNodeId,
843
857
  element: e,
844
858
  direction: r.portDirection
845
859
  }
@@ -848,11 +862,11 @@ const qe = (r, e, t) => {
848
862
  }, _e = (r, e) => {
849
863
  let t = e;
850
864
  for (; t !== null; ) {
851
- const s = r.getElementPortIds(t)[0] ?? null;
852
- if (s !== null)
865
+ const o = r.getElementPortIds(t)[0] ?? null;
866
+ if (o !== null)
853
867
  return {
854
868
  status: "portFound",
855
- portId: s
869
+ portId: o
856
870
  };
857
871
  if (r.getElementNodeId(t) !== null)
858
872
  return {
@@ -864,29 +878,29 @@ const qe = (r, e, t) => {
864
878
  status: "notFound"
865
879
  };
866
880
  };
867
- function* Ae(r, e) {
881
+ function* Ee(r, e) {
868
882
  const t = r.elementsFromPoint(e.x, e.y);
869
- for (const s of t) {
870
- if (s.shadowRoot !== null) {
871
- const o = Ae(s.shadowRoot, e);
872
- 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)
873
887
  yield n;
874
888
  }
875
- yield s;
889
+ yield o;
876
890
  }
877
891
  }
878
- const Ee = (r, e) => {
879
- const t = Ae(document, e);
880
- for (const s of t) {
881
- const o = _e(r, s);
882
- if (o.status === "portFound")
883
- return o.portId;
884
- if (o.status === "nodeEncountered")
892
+ const xe = (r, e) => {
893
+ const t = Ee(document, e);
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")
885
899
  return null;
886
900
  }
887
901
  return null;
888
902
  };
889
- 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 || {});
890
904
  const Se = (r, e) => ({
891
905
  x: r / 2,
892
906
  y: e / 2
@@ -900,21 +914,21 @@ const Se = (r, e) => ({
900
914
  const t = {
901
915
  x: r.x + r.width / 2,
902
916
  y: r.y + r.height / 2
903
- }, s = {
917
+ }, o = {
904
918
  x: e.x + e.width / 2,
905
919
  y: e.y + e.height / 2
906
- }, 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;
907
921
  return {
908
- x: o,
922
+ x: s,
909
923
  y: n,
910
924
  width: a,
911
925
  height: h,
912
926
  flipX: d,
913
927
  flipY: c
914
928
  };
915
- }, W = (r, e, t, s) => ({
916
- x: e * r.x + (1 - e) / 2 * s.x,
917
- 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
918
932
  });
919
933
  class et {
920
934
  constructor(e) {
@@ -923,21 +937,21 @@ class et {
923
937
  this.params = e;
924
938
  const t = this.params.to;
925
939
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
926
- const s = m(
940
+ const o = m(
927
941
  { x: this.params.arrowLength, y: p.y },
928
942
  this.params.sourceDirection,
929
943
  p
930
- ), o = m(
944
+ ), s = m(
931
945
  { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
932
946
  this.params.targetDirection,
933
947
  this.params.to
934
948
  ), n = {
935
- x: s.x + this.params.sourceDirection.x * this.params.curvature,
936
- 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
937
951
  }, a = {
938
- x: o.x - this.params.targetDirection.x * this.params.curvature,
939
- y: o.y - this.params.targetDirection.y * this.params.curvature
940
- }, 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}`;
941
955
  this.path = `${d}${h}${c}`;
942
956
  }
943
957
  }
@@ -950,22 +964,22 @@ class tt {
950
964
  { x: this.params.arrowLength, y: p.y },
951
965
  this.params.sourceDirection,
952
966
  p
953
- ) : p, s = this.params.hasTargetArrow ? m(
967
+ ) : p, o = this.params.hasTargetArrow ? m(
954
968
  {
955
969
  x: this.params.to.x - this.params.arrowLength,
956
970
  y: this.params.to.y
957
971
  },
958
972
  this.params.targetDirection,
959
973
  this.params.to
960
- ) : 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(
961
- { 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 },
962
976
  this.params.sourceDirection,
963
977
  p
964
978
  ), g = {
965
979
  x: c.x + h,
966
980
  y: c.y + d
967
981
  }, l = m(
968
- { x: this.params.to.x - o, y: this.params.to.y },
982
+ { x: this.params.to.x - s, y: this.params.to.y },
969
983
  this.params.targetDirection,
970
984
  this.params.to
971
985
  ), u = {
@@ -977,10 +991,10 @@ class tt {
977
991
  }, y = {
978
992
  x: c.x + this.params.curvature * this.params.sourceDirection.x,
979
993
  y: c.y + this.params.curvature * this.params.sourceDirection.y
980
- }, x = {
994
+ }, A = {
981
995
  x: l.x - this.params.curvature * this.params.targetDirection.x,
982
996
  y: l.y - this.params.curvature * this.params.targetDirection.y
983
- }, A = {
997
+ }, x = {
984
998
  x: c.x + h,
985
999
  y: c.y + d
986
1000
  }, S = {
@@ -990,42 +1004,42 @@ class tt {
990
1004
  this.path = [
991
1005
  `M ${t.x} ${t.y}`,
992
1006
  `L ${c.x} ${c.y}`,
993
- `C ${y.x} ${y.y} ${A.x} ${A.y} ${w.x} ${w.y}`,
994
- `C ${S.x} ${S.y} ${x.x} ${x.y} ${l.x} ${l.y}`,
995
- `L ${s.x} ${s.y}`
996
- ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
1007
+ `C ${y.x} ${y.y} ${x.x} ${x.y} ${w.x} ${w.y}`,
1008
+ `C ${S.x} ${S.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
1009
+ `L ${o.x} ${o.y}`
1010
+ ].join(" "), this.midpoint = O(w, e.flipX, e.flipY, e.to);
997
1011
  }
998
1012
  }
999
- const Q = Object.freeze({
1013
+ const q = Object.freeze({
1000
1014
  edgeColor: "--edge-color"
1001
1015
  }), Pe = (r) => {
1002
1016
  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
1003
- 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;
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;
1004
1018
  }, Te = (r) => {
1005
1019
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
1006
- return e.setAttribute("stroke", `var(${Q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1007
- }, O = () => {
1020
+ return e.setAttribute("stroke", `var(${q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
1021
+ }, B = () => {
1008
1022
  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
1009
- return r.setAttribute("fill", `var(${Q.edgeColor})`), r;
1010
- }, De = () => {
1023
+ return r.setAttribute("fill", `var(${q.edgeColor})`), r;
1024
+ }, Ce = () => {
1011
1025
  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
1012
1026
  return r.style.transformOrigin = "50% 50%", r;
1013
- }, Ce = (r, e) => {
1027
+ }, De = (r, e) => {
1014
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`;
1015
- }, L = (r, e) => {
1029
+ }, N = (r, e) => {
1016
1030
  const t = [];
1017
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) {
1018
- const s = r.length - 1;
1019
- let o = 0, n = 0, a = 0;
1032
+ const o = r.length - 1;
1033
+ let s = 0, n = 0, a = 0;
1020
1034
  r.forEach((h, d) => {
1021
1035
  let c = 0, g = 0, l = 0;
1022
- const u = d > 0, w = d < s, y = u && w;
1023
- if (u && (c = -o, g = -n, l = a), w) {
1024
- const F = r[d + 1];
1025
- 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);
1026
1040
  }
1027
- const A = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * A, y: h.y + n * A } : 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;
1028
- 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(
1029
1043
  `C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`
1030
1044
  );
1031
1045
  });
@@ -1039,11 +1053,11 @@ class rt {
1039
1053
  this.params = e;
1040
1054
  const t = this.params.to;
1041
1055
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1042
- const s = this.params.hasSourceArrow ? m(
1056
+ const o = this.params.hasSourceArrow ? m(
1043
1057
  { x: this.params.arrowLength, y: p.y },
1044
1058
  this.params.sourceDirection,
1045
1059
  p
1046
- ) : p, o = this.params.hasTargetArrow ? m(
1060
+ ) : p, s = this.params.hasTargetArrow ? m(
1047
1061
  {
1048
1062
  x: this.params.to.x - this.params.arrowLength,
1049
1063
  y: this.params.to.y
@@ -1065,13 +1079,13 @@ class rt {
1065
1079
  x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
1066
1080
  y: d.y
1067
1081
  }, y = { x: w.x, y: g };
1068
- this.path = L(
1069
- [s, h, l, u, y, w, d, o],
1082
+ this.path = N(
1083
+ [o, h, l, u, y, w, d, s],
1070
1084
  this.params.roundness
1071
1085
  );
1072
1086
  }
1073
1087
  }
1074
- class st {
1088
+ class ot {
1075
1089
  constructor(e) {
1076
1090
  i(this, "path");
1077
1091
  i(this, "midpoint");
@@ -1080,40 +1094,40 @@ class st {
1080
1094
  { x: this.params.arrowLength, y: p.y },
1081
1095
  this.params.sourceDirection,
1082
1096
  p
1083
- ) : p, s = this.params.hasTargetArrow ? m(
1097
+ ) : p, o = this.params.hasTargetArrow ? m(
1084
1098
  {
1085
1099
  x: this.params.to.x - this.params.arrowLength,
1086
1100
  y: this.params.to.y
1087
1101
  },
1088
1102
  this.params.targetDirection,
1089
1103
  this.params.to
1090
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1091
- { x: o, y: p.y },
1104
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1105
+ { x: s, y: p.y },
1092
1106
  this.params.sourceDirection,
1093
1107
  p
1094
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(
1095
- { x: this.params.to.x - o, y: this.params.to.y },
1109
+ { x: this.params.to.x - s, y: this.params.to.y },
1096
1110
  this.params.targetDirection,
1097
1111
  this.params.to
1098
1112
  ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
1099
- this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = L(
1100
- [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],
1101
1115
  this.params.roundness
1102
1116
  );
1103
1117
  }
1104
1118
  }
1105
- class ot {
1119
+ class st {
1106
1120
  constructor(e) {
1107
1121
  i(this, "path");
1108
1122
  i(this, "midpoint");
1109
1123
  this.params = e;
1110
1124
  const t = this.params.to;
1111
1125
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1112
- const s = this.params.hasSourceArrow ? m(
1126
+ const o = this.params.hasSourceArrow ? m(
1113
1127
  { x: this.params.arrowLength, y: p.y },
1114
1128
  this.params.sourceDirection,
1115
1129
  p
1116
- ) : p, o = this.params.hasTargetArrow ? m(
1130
+ ) : p, s = this.params.hasTargetArrow ? m(
1117
1131
  {
1118
1132
  x: this.params.to.x - this.params.arrowLength,
1119
1133
  y: this.params.to.y
@@ -1129,7 +1143,7 @@ class ot {
1129
1143
  this.params.targetDirection,
1130
1144
  this.params.to
1131
1145
  );
1132
- this.path = L([s, a, h, o], this.params.roundness);
1146
+ this.path = N([o, a, h, s], this.params.roundness);
1133
1147
  }
1134
1148
  }
1135
1149
  class it {
@@ -1139,11 +1153,11 @@ class it {
1139
1153
  this.params = e;
1140
1154
  const t = this.params.to;
1141
1155
  this.midpoint = { x: t.x / 2, y: t.y / 2 };
1142
- const s = this.params.hasSourceArrow ? m(
1156
+ const o = this.params.hasSourceArrow ? m(
1143
1157
  { x: this.params.arrowLength, y: p.y },
1144
1158
  this.params.sourceDirection,
1145
1159
  p
1146
- ) : p, o = this.params.hasTargetArrow ? m(
1160
+ ) : p, s = this.params.hasTargetArrow ? m(
1147
1161
  {
1148
1162
  x: this.params.to.x - this.params.arrowLength,
1149
1163
  y: this.params.to.y
@@ -1165,30 +1179,30 @@ class it {
1165
1179
  x: d.x,
1166
1180
  y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
1167
1181
  }, y = { x: g, y: w.y };
1168
- this.path = L(
1169
- [s, h, l, u, y, w, d, o],
1182
+ this.path = N(
1183
+ [o, h, l, u, y, w, d, s],
1170
1184
  this.params.roundness
1171
1185
  );
1172
1186
  }
1173
1187
  }
1174
- class Z {
1188
+ class K {
1175
1189
  constructor(e) {
1176
1190
  i(this, "path");
1177
1191
  i(this, "midpoint");
1178
1192
  this.params = e;
1179
- 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 = [
1180
1194
  { x: this.params.arrowLength, y: p.y },
1181
- { x: o, y: p.y },
1182
- { x: o, y: this.params.side },
1195
+ { x: s, y: p.y },
1196
+ { x: s, y: this.params.side },
1183
1197
  { x: n, y: this.params.side },
1184
1198
  { x: n, y: -this.params.side },
1185
- { x: o, y: -this.params.side },
1186
- { x: o, y: p.y },
1199
+ { x: s, y: -this.params.side },
1200
+ { x: s, y: p.y },
1187
1201
  { x: this.params.arrowLength, y: p.y }
1188
1202
  ].map(
1189
1203
  (c) => m(c, this.params.sourceDirection, p)
1190
1204
  ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
1191
- 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 };
1192
1206
  }
1193
1207
  }
1194
1208
  class nt {
@@ -1196,7 +1210,7 @@ class nt {
1196
1210
  i(this, "path");
1197
1211
  i(this, "midpoint");
1198
1212
  this.params = e;
1199
- 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 = [
1200
1214
  { x: this.params.arrowLength, y: p.y },
1201
1215
  { x: c, y: n },
1202
1216
  { x: c, y: -n },
@@ -1206,7 +1220,7 @@ class nt {
1206
1220
  ), u = [
1207
1221
  `M ${l[0].x} ${l[0].y}`,
1208
1222
  `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
1209
- `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}`,
1210
1224
  `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
1211
1225
  ].join(" "), w = `M 0 0 L ${l[0].x} ${l[0].y} `;
1212
1226
  this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
@@ -1227,7 +1241,7 @@ class at {
1227
1241
  this.path = "";
1228
1242
  return;
1229
1243
  }
1230
- const o = this.createDirectLinePoint({
1244
+ const s = this.createDirectLinePoint({
1231
1245
  offset: this.params.sourceOffset,
1232
1246
  hasArrow: this.params.hasSourceArrow,
1233
1247
  flip: 1,
@@ -1238,13 +1252,13 @@ class at {
1238
1252
  flip: -1,
1239
1253
  shift: this.params.to
1240
1254
  });
1241
- 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}`;
1242
1256
  }
1243
1257
  createDirectLinePoint(e) {
1244
- 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;
1245
1259
  return {
1246
- x: this.params.to.x * o + e.shift.x,
1247
- 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
1248
1262
  };
1249
1263
  }
1250
1264
  }
@@ -1257,33 +1271,33 @@ class ht {
1257
1271
  { x: this.params.arrowLength, y: p.y },
1258
1272
  this.params.sourceDirection,
1259
1273
  p
1260
- ) : p, s = this.params.hasTargetArrow ? m(
1274
+ ) : p, o = this.params.hasTargetArrow ? m(
1261
1275
  {
1262
1276
  x: this.params.to.x - this.params.arrowLength,
1263
1277
  y: this.params.to.y
1264
1278
  },
1265
1279
  this.params.targetDirection,
1266
1280
  this.params.to
1267
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1268
- { x: o, y: p.y },
1281
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1282
+ { x: s, y: p.y },
1269
1283
  this.params.sourceDirection,
1270
1284
  p
1271
1285
  ), a = m(
1272
- { x: this.params.to.x - o, y: this.params.to.y },
1286
+ { x: this.params.to.x - s, y: this.params.to.y },
1273
1287
  this.params.targetDirection,
1274
1288
  this.params.to
1275
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 = {
1276
1290
  x: (n.x + a.x) / 2,
1277
1291
  y: g
1278
1292
  };
1279
- 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(
1280
1294
  [
1281
1295
  t,
1282
1296
  n,
1283
1297
  { x: n.x, y: g },
1284
1298
  { x: a.x, y: g },
1285
1299
  a,
1286
- s
1300
+ o
1287
1301
  ],
1288
1302
  this.params.roundness
1289
1303
  );
@@ -1298,33 +1312,33 @@ class dt {
1298
1312
  { x: this.params.arrowLength, y: p.y },
1299
1313
  this.params.sourceDirection,
1300
1314
  p
1301
- ) : p, s = this.params.hasTargetArrow ? m(
1315
+ ) : p, o = this.params.hasTargetArrow ? m(
1302
1316
  {
1303
1317
  x: this.params.to.x - this.params.arrowLength,
1304
1318
  y: this.params.to.y
1305
1319
  },
1306
1320
  this.params.targetDirection,
1307
1321
  this.params.to
1308
- ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
1309
- { x: o, y: p.y },
1322
+ ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
1323
+ { x: s, y: p.y },
1310
1324
  this.params.sourceDirection,
1311
1325
  p
1312
1326
  ), a = m(
1313
- { x: this.params.to.x - o, y: this.params.to.y },
1327
+ { x: this.params.to.x - s, y: this.params.to.y },
1314
1328
  this.params.targetDirection,
1315
1329
  this.params.to
1316
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 = {
1317
1331
  x: g,
1318
1332
  y: (n.y + a.y) / 2
1319
1333
  };
1320
- 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(
1321
1335
  [
1322
1336
  t,
1323
1337
  n,
1324
1338
  { x: g, y: n.y },
1325
1339
  { x: g, y: a.y },
1326
1340
  a,
1327
- s
1341
+ o
1328
1342
  ],
1329
1343
  this.params.roundness
1330
1344
  );
@@ -1353,24 +1367,24 @@ const f = Object.freeze({
1353
1367
  interactiveWidth: 10,
1354
1368
  preOffset: 0
1355
1369
  }), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
1356
- class k {
1370
+ class W {
1357
1371
  constructor(e) {
1358
1372
  i(this, "svg");
1359
- i(this, "group", De());
1373
+ i(this, "group", Ce());
1360
1374
  i(this, "line");
1361
1375
  i(this, "sourceArrow", null);
1362
1376
  i(this, "targetArrow", null);
1363
1377
  i(this, "onAfterRender");
1364
1378
  i(this, "afterRenderEmitter");
1365
1379
  i(this, "arrowRenderer");
1366
- 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));
1367
1381
  }
1368
1382
  render(e) {
1369
- 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(
1370
1384
  e.from,
1371
1385
  e.to
1372
1386
  );
1373
- 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})`;
1374
1388
  const d = ge(
1375
1389
  e.from.direction,
1376
1390
  a,
@@ -1380,11 +1394,11 @@ class k {
1380
1394
  a,
1381
1395
  h
1382
1396
  ), g = {
1383
- x: o,
1397
+ x: s,
1384
1398
  y: n
1385
1399
  };
1386
1400
  let l = { x: -c.x, y: -c.y }, u;
1387
- 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;
1388
1402
  const w = u(
1389
1403
  d,
1390
1404
  c,
@@ -1399,20 +1413,20 @@ class k {
1399
1413
  shift: p,
1400
1414
  arrowLength: this.params.arrowLength
1401
1415
  }), this.sourceArrow.setAttribute("d", y));
1402
- let x = null;
1403
- this.targetArrow && (x = this.arrowRenderer({
1416
+ let A = null;
1417
+ this.targetArrow && (A = this.arrowRenderer({
1404
1418
  direction: l,
1405
1419
  shift: g,
1406
1420
  arrowLength: this.params.arrowLength
1407
- }), this.targetArrow.setAttribute("d", x)), this.afterRenderEmitter.emit({
1421
+ }), this.targetArrow.setAttribute("d", A)), this.afterRenderEmitter.emit({
1408
1422
  edgePath: w,
1409
1423
  sourceArrowPath: y,
1410
- targetArrowPath: x
1424
+ targetArrowPath: A
1411
1425
  });
1412
1426
  }
1413
1427
  }
1414
1428
  const ct = (r) => (e) => {
1415
- const s = [
1429
+ const o = [
1416
1430
  p,
1417
1431
  { x: e.arrowLength, y: r.radius },
1418
1432
  { x: e.arrowLength, y: -r.radius }
@@ -1421,18 +1435,18 @@ const ct = (r) => (e) => {
1421
1435
  ).map((h) => ({
1422
1436
  x: h.x + e.shift.x,
1423
1437
  y: h.y + e.shift.y
1424
- })), o = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
1425
- 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`;
1426
1440
  }, lt = (r) => (e) => {
1427
- 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(
1428
1442
  (y) => m(y, e.direction, p)
1429
1443
  ).map((y) => ({
1430
1444
  x: y.x + e.shift.x,
1431
1445
  y: y.y + e.shift.y
1432
- })), 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}`;
1433
1447
  return `${g} ${l} ${u} ${w}`;
1434
1448
  }, gt = (r) => (e) => {
1435
- const t = r.smallRadius, s = r.radius, o = m(
1449
+ const t = r.smallRadius, o = r.radius, s = m(
1436
1450
  {
1437
1451
  x: e.arrowLength,
1438
1452
  y: 0
@@ -1445,14 +1459,14 @@ const ct = (r) => (e) => {
1445
1459
  x: e.arrowLength + r.smallRadius,
1446
1460
  y: 0
1447
1461
  }
1448
- ), a = [p, { x: o.x, y: -o.y }, o].map(
1462
+ ), a = [p, { x: s.x, y: -s.y }, s].map(
1449
1463
  (l) => m(l, e.direction, p)
1450
1464
  ).map((l) => ({
1451
1465
  x: l.x + e.shift.x,
1452
1466
  y: l.y + e.shift.y
1453
- })), 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}`;
1454
1468
  return `${h} ${d} ${c} ${g}`;
1455
- }, I = (r) => {
1469
+ }, F = (r) => {
1456
1470
  if (typeof r == "function")
1457
1471
  return r;
1458
1472
  switch (r.type) {
@@ -1497,11 +1511,11 @@ class ut {
1497
1511
  hasSourceArrow: this.hasSourceArrow,
1498
1512
  hasTargetArrow: this.hasTargetArrow
1499
1513
  }));
1500
- i(this, "createDetourPath", (e, t, s, o, n) => new tt({
1501
- to: s,
1514
+ i(this, "createDetourPath", (e, t, o, s, n) => new tt({
1515
+ to: o,
1502
1516
  sourceDirection: e,
1503
1517
  targetDirection: t,
1504
- flipX: o,
1518
+ flipX: s,
1505
1519
  flipY: n,
1506
1520
  arrowLength: this.arrowLength,
1507
1521
  detourDirection: this.detourDirection,
@@ -1510,8 +1524,8 @@ class ut {
1510
1524
  hasSourceArrow: this.hasSourceArrow,
1511
1525
  hasTargetArrow: this.hasTargetArrow
1512
1526
  }));
1513
- i(this, "createLinePath", (e, t, s) => new et({
1514
- to: s,
1527
+ i(this, "createLinePath", (e, t, o) => new et({
1528
+ to: o,
1515
1529
  sourceDirection: e,
1516
1530
  targetDirection: t,
1517
1531
  arrowLength: this.arrowLength,
@@ -1519,10 +1533,10 @@ class ut {
1519
1533
  hasSourceArrow: this.hasSourceArrow,
1520
1534
  hasTargetArrow: this.hasTargetArrow
1521
1535
  }));
1522
- 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 k({
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({
1523
1537
  color: (e == null ? void 0 : e.color) ?? f.color,
1524
1538
  width: (e == null ? void 0 : e.width) ?? f.width,
1525
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1539
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1526
1540
  arrowLength: this.arrowLength,
1527
1541
  hasSourceArrow: this.hasSourceArrow,
1528
1542
  hasTargetArrow: this.hasTargetArrow,
@@ -1551,7 +1565,7 @@ class pt {
1551
1565
  i(this, "hasSourceArrow");
1552
1566
  i(this, "hasTargetArrow");
1553
1567
  i(this, "pathShape");
1554
- i(this, "createCyclePath", (e) => new Z({
1568
+ i(this, "createCyclePath", (e) => new K({
1555
1569
  sourceDirection: e,
1556
1570
  arrowLength: this.arrowLength,
1557
1571
  side: this.cycleSquareSide,
@@ -1560,11 +1574,11 @@ class pt {
1560
1574
  hasSourceArrow: this.hasSourceArrow,
1561
1575
  hasTargetArrow: this.hasTargetArrow
1562
1576
  }));
1563
- i(this, "createDetourPath", (e, t, s, o, n) => new ht({
1564
- to: s,
1577
+ i(this, "createDetourPath", (e, t, o, s, n) => new ht({
1578
+ to: o,
1565
1579
  sourceDirection: e,
1566
1580
  targetDirection: t,
1567
- flipX: o,
1581
+ flipX: s,
1568
1582
  flipY: n,
1569
1583
  arrowLength: this.arrowLength,
1570
1584
  arrowOffset: this.arrowOffset,
@@ -1573,11 +1587,11 @@ class pt {
1573
1587
  hasSourceArrow: this.hasSourceArrow,
1574
1588
  hasTargetArrow: this.hasTargetArrow
1575
1589
  }));
1576
- i(this, "createLinePath", (e, t, s, o) => new rt({
1577
- to: s,
1590
+ i(this, "createLinePath", (e, t, o, s) => new rt({
1591
+ to: o,
1578
1592
  sourceDirection: e,
1579
1593
  targetDirection: t,
1580
- flipX: o,
1594
+ flipX: s,
1581
1595
  arrowLength: this.arrowLength,
1582
1596
  arrowOffset: this.arrowOffset,
1583
1597
  roundness: this.roundness,
@@ -1590,10 +1604,10 @@ class pt {
1590
1604
  t,
1591
1605
  this.arrowOffset,
1592
1606
  this.cycleSquareSide / 2
1593
- ), 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 k({
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({
1594
1608
  color: (e == null ? void 0 : e.color) ?? f.color,
1595
1609
  width: (e == null ? void 0 : e.width) ?? f.width,
1596
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1610
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1597
1611
  arrowLength: this.arrowLength,
1598
1612
  hasSourceArrow: this.hasSourceArrow,
1599
1613
  hasTargetArrow: this.hasTargetArrow,
@@ -1623,7 +1637,7 @@ class wt {
1623
1637
  i(this, "hasSourceArrow");
1624
1638
  i(this, "hasTargetArrow");
1625
1639
  i(this, "pathShape");
1626
- i(this, "createCyclePath", (e) => new Z({
1640
+ i(this, "createCyclePath", (e) => new K({
1627
1641
  sourceDirection: e,
1628
1642
  arrowLength: this.arrowLength,
1629
1643
  side: this.cycleSquareSide,
@@ -1632,11 +1646,11 @@ class wt {
1632
1646
  hasSourceArrow: this.hasSourceArrow,
1633
1647
  hasTargetArrow: this.hasTargetArrow
1634
1648
  }));
1635
- i(this, "createDetourPath", (e, t, s, o, n) => new st({
1636
- to: s,
1649
+ i(this, "createDetourPath", (e, t, o, s, n) => new ot({
1650
+ to: o,
1637
1651
  sourceDirection: e,
1638
1652
  targetDirection: t,
1639
- flipX: o,
1653
+ flipX: s,
1640
1654
  flipY: n,
1641
1655
  arrowLength: this.arrowLength,
1642
1656
  arrowOffset: this.arrowOffset,
@@ -1646,8 +1660,8 @@ class wt {
1646
1660
  hasSourceArrow: this.hasSourceArrow,
1647
1661
  hasTargetArrow: this.hasTargetArrow
1648
1662
  }));
1649
- i(this, "createLinePath", (e, t, s) => new ot({
1650
- to: s,
1663
+ i(this, "createLinePath", (e, t, o) => new st({
1664
+ to: o,
1651
1665
  sourceDirection: e,
1652
1666
  targetDirection: t,
1653
1667
  arrowLength: this.arrowLength,
@@ -1662,10 +1676,10 @@ class wt {
1662
1676
  t,
1663
1677
  this.arrowOffset,
1664
1678
  this.cycleSquareSide / 2
1665
- ), 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 k({
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({
1666
1680
  color: (e == null ? void 0 : e.color) ?? f.color,
1667
1681
  width: (e == null ? void 0 : e.width) ?? f.width,
1668
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1682
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1669
1683
  arrowLength: this.arrowLength,
1670
1684
  hasSourceArrow: this.hasSourceArrow,
1671
1685
  hasTargetArrow: this.hasTargetArrow,
@@ -1694,7 +1708,7 @@ class ft {
1694
1708
  i(this, "hasSourceArrow");
1695
1709
  i(this, "hasTargetArrow");
1696
1710
  i(this, "pathShape");
1697
- i(this, "createCyclePath", (e) => new Z({
1711
+ i(this, "createCyclePath", (e) => new K({
1698
1712
  sourceDirection: e,
1699
1713
  arrowLength: this.arrowLength,
1700
1714
  side: this.cycleSquareSide,
@@ -1703,11 +1717,11 @@ class ft {
1703
1717
  hasSourceArrow: this.hasSourceArrow,
1704
1718
  hasTargetArrow: this.hasTargetArrow
1705
1719
  }));
1706
- i(this, "createDetourPath", (e, t, s, o, n) => new dt({
1707
- to: s,
1720
+ i(this, "createDetourPath", (e, t, o, s, n) => new dt({
1721
+ to: o,
1708
1722
  sourceDirection: e,
1709
1723
  targetDirection: t,
1710
- flipX: o,
1724
+ flipX: s,
1711
1725
  flipY: n,
1712
1726
  arrowLength: this.arrowLength,
1713
1727
  arrowOffset: this.arrowOffset,
@@ -1716,8 +1730,8 @@ class ft {
1716
1730
  hasSourceArrow: this.hasSourceArrow,
1717
1731
  hasTargetArrow: this.hasTargetArrow
1718
1732
  }));
1719
- i(this, "createLinePath", (e, t, s, o, n) => new it({
1720
- to: s,
1733
+ i(this, "createLinePath", (e, t, o, s, n) => new it({
1734
+ to: o,
1721
1735
  sourceDirection: e,
1722
1736
  targetDirection: t,
1723
1737
  flipY: n,
@@ -1733,10 +1747,10 @@ class ft {
1733
1747
  t,
1734
1748
  this.arrowOffset,
1735
1749
  this.cycleSquareSide / 2
1736
- ), 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 k({
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({
1737
1751
  color: (e == null ? void 0 : e.color) ?? f.color,
1738
1752
  width: (e == null ? void 0 : e.width) ?? f.width,
1739
- arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
1753
+ arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
1740
1754
  arrowLength: this.arrowLength,
1741
1755
  hasSourceArrow: this.hasSourceArrow,
1742
1756
  hasTargetArrow: this.hasTargetArrow,
@@ -1752,7 +1766,7 @@ class ft {
1752
1766
  class Ne {
1753
1767
  constructor(e) {
1754
1768
  i(this, "svg");
1755
- i(this, "group", De());
1769
+ i(this, "group", Ce());
1756
1770
  i(this, "line");
1757
1771
  i(this, "sourceArrow", null);
1758
1772
  i(this, "targetArrow", null);
@@ -1764,15 +1778,15 @@ class Ne {
1764
1778
  i(this, "onAfterRender");
1765
1779
  i(this, "afterRenderEmitter");
1766
1780
  i(this, "arrowRenderer");
1767
- [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));
1768
1782
  }
1769
1783
  render(e) {
1770
- 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(
1771
1785
  e.from,
1772
1786
  e.to
1773
1787
  );
1774
- Ce(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
1775
- 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({
1776
1790
  to: d,
1777
1791
  sourceOffset: this.sourceOffset,
1778
1792
  targetOffset: this.targetOffset,
@@ -1855,16 +1869,16 @@ class Me {
1855
1869
  "interactive edge can be configured only once"
1856
1870
  );
1857
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;
1858
- const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
1859
- 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) => {
1860
- 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);
1861
1875
  });
1862
1876
  }
1863
1877
  render(e) {
1864
1878
  this.baseEdge.render(e);
1865
1879
  }
1866
1880
  }
1867
- class sr {
1881
+ class or {
1868
1882
  constructor(e, t) {
1869
1883
  i(this, "group");
1870
1884
  i(this, "line");
@@ -1872,8 +1886,8 @@ class sr {
1872
1886
  i(this, "targetArrow");
1873
1887
  i(this, "onAfterRender");
1874
1888
  i(this, "svg");
1875
- 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) => {
1876
- 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)`;
1877
1891
  this.midpointElement.style.setProperty("transform", n);
1878
1892
  });
1879
1893
  }
@@ -1902,13 +1916,13 @@ class Le {
1902
1916
  const t = this.graphStore.getNode(e);
1903
1917
  if (t === void 0)
1904
1918
  return null;
1905
- const s = t.payload;
1919
+ const o = t.payload;
1906
1920
  return {
1907
1921
  element: t.element,
1908
- x: s.x,
1909
- y: s.y,
1910
- centerFn: s.centerFn,
1911
- priority: s.priority
1922
+ x: o.x,
1923
+ y: o.y,
1924
+ centerFn: o.centerFn,
1925
+ priority: o.priority
1912
1926
  };
1913
1927
  }
1914
1928
  getElementNodeId(e) {
@@ -1941,12 +1955,12 @@ class Le {
1941
1955
  const t = this.graphStore.getEdge(e);
1942
1956
  if (t === void 0)
1943
1957
  return null;
1944
- const s = t.payload;
1958
+ const o = t.payload;
1945
1959
  return {
1946
1960
  from: t.from,
1947
1961
  to: t.to,
1948
- priority: s.priority,
1949
- shape: s.shape
1962
+ priority: o.priority,
1963
+ shape: o.shape
1950
1964
  };
1951
1965
  }
1952
1966
  getPortIncomingEdgeIds(e) {
@@ -1976,8 +1990,10 @@ class Le {
1976
1990
  }
1977
1991
  class Re {
1978
1992
  constructor(e) {
1993
+ i(this, "onBeforeUpdated");
1979
1994
  i(this, "onAfterUpdated");
1980
- this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
1995
+ i(this, "onAfterResize");
1996
+ this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated, this.onAfterResize = this.viewportStore.onAfterResize;
1981
1997
  }
1982
1998
  getViewportMatrix() {
1983
1999
  return { ...this.viewportStore.getViewportMatrix() };
@@ -1985,9 +2001,18 @@ class Re {
1985
2001
  getContentMatrix() {
1986
2002
  return { ...this.viewportStore.getContentMatrix() };
1987
2003
  }
2004
+ getDimensions() {
2005
+ return this.viewportStore.getDimensions();
2006
+ }
2007
+ createContentCoords(e) {
2008
+ return this.viewportStore.createContentCoords(e);
2009
+ }
2010
+ createViewportCoords(e) {
2011
+ return this.viewportStore.createViewportCoords(e);
2012
+ }
1988
2013
  }
1989
2014
  const Ve = (r, e) => {
1990
- const t = new xe(), 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 = {
1991
2016
  nodes: {
1992
2017
  centerFn: Se,
1993
2018
  priorityFn: () => 0
@@ -2001,8 +2026,8 @@ const Ve = (r, e) => {
2001
2026
  }
2002
2027
  };
2003
2028
  return new ve(
2004
- s,
2005
2029
  o,
2030
+ s,
2006
2031
  t,
2007
2032
  e,
2008
2033
  n,
@@ -2010,7 +2035,7 @@ const Ve = (r, e) => {
2010
2035
  );
2011
2036
  };
2012
2037
  class z {
2013
- constructor(e, t, s, o) {
2038
+ constructor(e, t, o, s) {
2014
2039
  i(this, "onAfterPortMarked", (e) => {
2015
2040
  const t = this.canvas.graph.getPort(e);
2016
2041
  this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
@@ -2022,8 +2047,8 @@ class z {
2022
2047
  i(this, "onPortMouseDown", (e) => {
2023
2048
  if (!this.params.mouseDownEventVerifier(e))
2024
2049
  return;
2025
- const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
2026
- this.params.onPortPointerDown(s, {
2050
+ const t = e.currentTarget, o = this.canvas.graph.getElementPortIds(t)[0];
2051
+ this.params.onPortPointerDown(o, {
2027
2052
  x: e.clientX,
2028
2053
  y: e.clientY
2029
2054
  }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
@@ -2033,7 +2058,7 @@ class z {
2033
2058
  }));
2034
2059
  });
2035
2060
  i(this, "onWindowMouseMove", (e) => {
2036
- if (!V(
2061
+ if (!L(
2037
2062
  this.window,
2038
2063
  this.element,
2039
2064
  e.clientX,
@@ -2050,8 +2075,8 @@ class z {
2050
2075
  i(this, "onPortTouchStart", (e) => {
2051
2076
  if (e.touches.length !== 1)
2052
2077
  return;
2053
- const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementPortIds(s)[0];
2054
- 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, {
2055
2080
  x: t.clientX,
2056
2081
  y: t.clientY
2057
2082
  }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2064,7 +2089,7 @@ class z {
2064
2089
  });
2065
2090
  i(this, "onWindowTouchMove", (e) => {
2066
2091
  const t = e.touches[0];
2067
- if (!V(
2092
+ if (!L(
2068
2093
  this.window,
2069
2094
  this.element,
2070
2095
  t.clientX,
@@ -2088,10 +2113,10 @@ class z {
2088
2113
  i(this, "onBeforeDestroy", () => {
2089
2114
  this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
2090
2115
  });
2091
- 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);
2092
2117
  }
2093
- static configure(e, t, s, o) {
2094
- new z(e, t, s, o);
2118
+ static configure(e, t, o, s) {
2119
+ new z(e, t, o, s);
2095
2120
  }
2096
2121
  hookPortEvents(e) {
2097
2122
  e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2116,8 +2141,8 @@ class z {
2116
2141
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2117
2142
  }
2118
2143
  }
2119
- class q {
2120
- constructor(e, t, s, o) {
2144
+ class Q {
2145
+ constructor(e, t, o, s) {
2121
2146
  i(this, "grabbedNode", null);
2122
2147
  i(this, "maxNodePriority", 0);
2123
2148
  i(this, "graph");
@@ -2149,19 +2174,19 @@ class q {
2149
2174
  i(this, "onMouseDown", (e) => {
2150
2175
  if (!this.params.mouseDownEventVerifier(e))
2151
2176
  return;
2152
- const t = e.currentTarget, s = this.graph.getElementNodeId(t), o = this.graph.getNode(s);
2153
- 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))
2154
2179
  return;
2155
- this.params.onNodeDragStarted(s), e.stopPropagation();
2180
+ this.params.onNodeDragStarted(o), e.stopPropagation();
2156
2181
  const a = this.calculateContentPoint({
2157
2182
  x: e.clientX,
2158
2183
  y: e.clientY
2159
2184
  });
2160
2185
  this.grabbedNode = {
2161
- nodeId: s,
2162
- dx: a.x - o.x,
2163
- dy: a.y - o.y
2164
- }, 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, {
2165
2190
  passive: !0
2166
2191
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2167
2192
  passive: !0
@@ -2171,9 +2196,9 @@ class q {
2171
2196
  if (e.touches.length !== 1)
2172
2197
  return;
2173
2198
  e.stopPropagation();
2174
- 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);
2175
2200
  if (!this.params.nodeDragVerifier({
2176
- nodeId: o,
2201
+ nodeId: s,
2177
2202
  element: n.element,
2178
2203
  x: n.x,
2179
2204
  y: n.y
@@ -2184,10 +2209,10 @@ class q {
2184
2209
  y: t.clientY
2185
2210
  });
2186
2211
  this.grabbedNode = {
2187
- nodeId: o,
2212
+ nodeId: s,
2188
2213
  dx: h.x - n.x,
2189
2214
  dy: h.y - n.y
2190
- }, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2215
+ }, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2191
2216
  passive: !0
2192
2217
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2193
2218
  passive: !0
@@ -2196,7 +2221,7 @@ class q {
2196
2221
  });
2197
2222
  });
2198
2223
  i(this, "onWindowMouseMove", (e) => {
2199
- if (!V(
2224
+ if (!L(
2200
2225
  this.window,
2201
2226
  this.element,
2202
2227
  e.clientX,
@@ -2217,7 +2242,7 @@ class q {
2217
2242
  if (e.touches.length !== 1)
2218
2243
  return;
2219
2244
  const t = e.touches[0];
2220
- if (!V(
2245
+ if (!L(
2221
2246
  this.window,
2222
2247
  this.element,
2223
2248
  t.clientX,
@@ -2234,17 +2259,17 @@ class q {
2234
2259
  i(this, "onWindowTouchFinish", () => {
2235
2260
  this.cancelTouchDrag();
2236
2261
  });
2237
- 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);
2238
2263
  }
2239
- static configure(e, t, s, o) {
2240
- new q(e, t, s, o);
2264
+ static configure(e, t, o, s) {
2265
+ new Q(e, t, o, s);
2241
2266
  }
2242
2267
  moveNode(e, t) {
2243
2268
  if (this.graph.getNode(e.nodeId) === null)
2244
2269
  return;
2245
- const o = this.calculateContentPoint(t), n = {
2246
- x: o.x - e.dx,
2247
- y: o.y - e.dy
2270
+ const s = this.calculateContentPoint(t), n = {
2271
+ x: s.x - e.dx,
2272
+ y: s.y - e.dy
2248
2273
  }, a = this.adjustNodeCoords(n);
2249
2274
  this.canvas.updateNode(e.nodeId, {
2250
2275
  x: a.x,
@@ -2255,15 +2280,15 @@ class q {
2255
2280
  if (this.params.moveOnTop) {
2256
2281
  if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
2257
2282
  const t = this.maxNodePriority;
2258
- this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((o) => {
2259
- this.canvas.updateEdge(o, { priority: t });
2283
+ this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
2284
+ this.canvas.updateEdge(s, { priority: t });
2260
2285
  });
2261
2286
  }
2262
2287
  this.canvas.updateNode(e, { priority: this.maxNodePriority });
2263
2288
  }
2264
2289
  }
2265
2290
  cancelMouseDrag() {
2266
- 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();
2267
2292
  }
2268
2293
  removeMouseDragListeners() {
2269
2294
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2288,53 +2313,53 @@ class q {
2288
2313
  this.maxNodePriority = Math.max(this.maxNodePriority, t);
2289
2314
  }
2290
2315
  calculateContentPoint(e) {
2291
- const t = this.element.getBoundingClientRect(), s = {
2316
+ const t = this.element.getBoundingClientRect();
2317
+ return this.canvas.viewport.createContentCoords({
2292
2318
  x: e.x - t.x,
2293
2319
  y: e.y - t.y
2294
- }, o = this.canvas.viewport.getViewportMatrix();
2295
- return C(o, s);
2320
+ });
2296
2321
  }
2297
2322
  adjustNodeCoords(e) {
2298
2323
  const t = this.params.gridSize;
2299
2324
  if (t !== null) {
2300
- const s = t / 2;
2325
+ const o = t / 2;
2301
2326
  return {
2302
- x: Math.floor((e.x + s) / t) * t,
2303
- 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
2304
2329
  };
2305
2330
  }
2306
2331
  return e;
2307
2332
  }
2308
2333
  }
2309
- const xt = (r, e, t) => ({
2334
+ const At = (r, e, t) => ({
2310
2335
  scale: r.scale,
2311
2336
  x: r.x + r.scale * e,
2312
2337
  y: r.y + r.scale * t
2313
- }), At = (r, e, t, s) => ({
2338
+ }), Et = (r, e, t, o) => ({
2314
2339
  scale: r.scale * e,
2315
2340
  x: r.scale * (1 - e) * t + r.x,
2316
- y: r.scale * (1 - e) * s + r.y
2317
- }), $ = (r) => {
2341
+ y: r.scale * (1 - e) * o + r.y
2342
+ }), I = (r) => {
2318
2343
  const e = [], t = r.touches.length;
2319
2344
  for (let h = 0; h < t; h++)
2320
2345
  e.push([r.touches[h].clientX, r.touches[h].clientY]);
2321
- const s = e.reduce(
2346
+ const o = e.reduce(
2322
2347
  (h, d) => [h[0] + d[0], h[1] + d[1]],
2323
2348
  [0, 0]
2324
- ), 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(
2325
2350
  (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
2326
2351
  0
2327
2352
  );
2328
2353
  return {
2329
- x: o[0],
2330
- y: o[1],
2354
+ x: s[0],
2355
+ y: s[1],
2331
2356
  scale: a / t,
2332
2357
  touchesCnt: t,
2333
2358
  touches: e
2334
2359
  };
2335
2360
  };
2336
- class H {
2337
- constructor(e, t, s, o) {
2361
+ class k {
2362
+ constructor(e, t, o, s) {
2338
2363
  i(this, "viewport");
2339
2364
  i(this, "prevTouches", null);
2340
2365
  i(this, "wheelFinishTimer", null);
@@ -2343,14 +2368,14 @@ class H {
2343
2368
  this.removeMouseDragListeners(), this.removeTouchDragListeners();
2344
2369
  });
2345
2370
  i(this, "onMouseDown", (e) => {
2346
- 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, {
2347
2372
  passive: !0
2348
2373
  }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
2349
2374
  passive: !0
2350
2375
  }), this.startRegisteredTransform());
2351
2376
  });
2352
2377
  i(this, "onWindowMouseMove", (e) => {
2353
- const t = V(
2378
+ const t = L(
2354
2379
  this.window,
2355
2380
  this.element,
2356
2381
  e.clientX,
@@ -2360,26 +2385,26 @@ class H {
2360
2385
  this.stopMouseDrag();
2361
2386
  return;
2362
2387
  }
2363
- const s = -e.movementX, o = -e.movementY;
2364
- this.moveViewport(s, o);
2388
+ const o = -e.movementX, s = -e.movementY;
2389
+ this.moveViewport(o, s);
2365
2390
  });
2366
2391
  i(this, "onWindowMouseUp", (e) => {
2367
- this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
2392
+ this.params.mouseUpEventVerifier(e) && this.stopMouseDrag();
2368
2393
  });
2369
2394
  i(this, "onWheelScroll", (e) => {
2370
2395
  if (!this.params.mouseWheelEventVerifier(e))
2371
2396
  return;
2372
- 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);
2373
- 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(() => {
2374
2399
  this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
2375
2400
  }, this.params.scaleWheelFinishTimeout);
2376
2401
  });
2377
2402
  i(this, "onTouchStart", (e) => {
2378
2403
  if (this.prevTouches !== null) {
2379
- this.prevTouches = $(e);
2404
+ this.prevTouches = I(e);
2380
2405
  return;
2381
2406
  }
2382
- this.prevTouches = $(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2407
+ this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
2383
2408
  passive: !0
2384
2409
  }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
2385
2410
  passive: !0
@@ -2388,9 +2413,9 @@ class H {
2388
2413
  }), this.startRegisteredTransform();
2389
2414
  });
2390
2415
  i(this, "onWindowTouchMove", (e) => {
2391
- const t = $(e);
2416
+ const t = I(e);
2392
2417
  if (!t.touches.every(
2393
- (o) => V(this.window, this.element, o[0], o[1])
2418
+ (s) => L(this.window, this.element, s[0], s[1])
2394
2419
  )) {
2395
2420
  this.stopTouchDrag();
2396
2421
  return;
@@ -2399,29 +2424,22 @@ class H {
2399
2424
  -(t.x - this.prevTouches.x),
2400
2425
  -(t.y - this.prevTouches.y)
2401
2426
  ), t.touchesCnt === 2) {
2402
- 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);
2403
2428
  this.scaleViewport(c, a, h);
2404
2429
  }
2405
2430
  this.prevTouches = t;
2406
2431
  });
2407
2432
  i(this, "onWindowTouchFinish", (e) => {
2408
- e.touches.length > 0 ? this.prevTouches = $(e) : this.stopTouchDrag();
2433
+ e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
2409
2434
  });
2410
- i(this, "observer", new ResizeObserver(() => {
2411
- const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), o = this.params.transformPreprocessor({
2412
- prevTransform: e,
2413
- nextTransform: e,
2414
- canvasWidth: t,
2415
- canvasHeight: s
2416
- });
2417
- this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
2418
- }));
2419
2435
  i(this, "preventWheelScaleListener", (e) => {
2420
2436
  e.preventDefault();
2421
2437
  });
2422
- 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, {
2423
2439
  passive: !1
2424
- }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
2440
+ }), this.viewport = e.viewport, this.handleResize(), this.viewport.onAfterResize.subscribe(() => {
2441
+ this.handleResize();
2442
+ }), this.element.addEventListener("mousedown", this.onMouseDown, {
2425
2443
  passive: !0
2426
2444
  }), this.element.addEventListener("wheel", this.onWheelScroll, {
2427
2445
  passive: !0
@@ -2429,21 +2447,21 @@ class H {
2429
2447
  passive: !0
2430
2448
  }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
2431
2449
  }
2432
- static configure(e, t, s, o) {
2433
- new H(e, t, s, o);
2450
+ static configure(e, t, o, s) {
2451
+ new k(e, t, o, s);
2434
2452
  }
2435
2453
  moveViewport(e, t) {
2436
- const s = this.viewport.getViewportMatrix(), o = xt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
2437
- prevTransform: s,
2438
- 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,
2439
2457
  canvasWidth: n,
2440
2458
  canvasHeight: a
2441
2459
  });
2442
2460
  this.performTransform(h);
2443
2461
  }
2444
- scaleViewport(e, t, s) {
2445
- const o = this.canvas.viewport.getViewportMatrix(), n = At(o, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
2446
- 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,
2447
2465
  nextTransform: n,
2448
2466
  canvasWidth: a,
2449
2467
  canvasHeight: h
@@ -2451,7 +2469,7 @@ class H {
2451
2469
  this.performTransform(d);
2452
2470
  }
2453
2471
  stopMouseDrag() {
2454
- U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2472
+ $(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
2455
2473
  }
2456
2474
  removeMouseDragListeners() {
2457
2475
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2471,16 +2489,22 @@ class H {
2471
2489
  finishRegisteredTransform() {
2472
2490
  this.transformInProgress = !1, this.params.onTransformFinished();
2473
2491
  }
2492
+ handleResize() {
2493
+ const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
2494
+ prevTransform: e,
2495
+ nextTransform: e,
2496
+ canvasWidth: t,
2497
+ canvasHeight: o
2498
+ });
2499
+ this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
2500
+ }
2474
2501
  }
2475
- class J {
2476
- constructor(e, t, s, o, n, a) {
2477
- i(this, "canvasResizeObserver");
2502
+ class Z {
2503
+ constructor(e, t, o, s, n, a) {
2478
2504
  i(this, "nodeHorizontal");
2479
2505
  i(this, "nodeVertical");
2480
2506
  i(this, "viewport");
2481
- i(this, "viewportWidth", 0);
2482
- i(this, "viewportHeight", 0);
2483
- i(this, "viewportMatrix");
2507
+ i(this, "currentScale");
2484
2508
  i(this, "loadedArea", {
2485
2509
  xFrom: 1 / 0,
2486
2510
  xTo: 1 / 0,
@@ -2496,46 +2520,45 @@ class J {
2496
2520
  };
2497
2521
  });
2498
2522
  i(this, "onAfterViewportUpdated", () => {
2499
- this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
2523
+ this.userTransformInProgress || this.loadAreaAroundViewport();
2500
2524
  });
2501
2525
  i(this, "userTransformInProgress", !1);
2502
- this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
2503
- const c = d[0];
2504
- this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
2505
- }), this.viewport = e.viewport;
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(() => {
2527
+ this.scheduleLoadAreaAroundViewport();
2528
+ });
2506
2529
  const h = {
2507
- ...o,
2530
+ ...s,
2508
2531
  onResizeTransformStarted: () => {
2509
- this.userTransformInProgress = !0, o.onResizeTransformStarted();
2532
+ this.userTransformInProgress = !0, s.onResizeTransformStarted();
2510
2533
  },
2511
2534
  onResizeTransformFinished: () => {
2512
- this.userTransformInProgress = !1, o.onResizeTransformFinished();
2535
+ this.userTransformInProgress = !1, s.onResizeTransformFinished();
2513
2536
  },
2514
2537
  onBeforeTransformChange: () => {
2515
- this.userTransformInProgress = !0, o.onBeforeTransformChange();
2538
+ this.userTransformInProgress = !0, s.onBeforeTransformChange();
2516
2539
  },
2517
2540
  onTransformChange: () => {
2518
2541
  this.userTransformInProgress = !1;
2519
- const d = this.viewportMatrix;
2520
- this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
2542
+ const d = this.currentScale;
2543
+ this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), s.onTransformChange();
2521
2544
  },
2522
2545
  onTransformFinished: () => {
2523
- this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
2546
+ this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
2524
2547
  }
2525
2548
  };
2526
- H.configure(
2549
+ k.configure(
2527
2550
  e,
2528
2551
  this.element,
2529
2552
  this.window,
2530
2553
  h
2531
- ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
2554
+ ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
2532
2555
  }
2533
- static configure(e, t, s, o, n, a) {
2534
- new J(
2556
+ static configure(e, t, o, s, n, a) {
2557
+ new Z(
2535
2558
  e,
2536
2559
  t,
2537
- s,
2538
2560
  o,
2561
+ s,
2539
2562
  n,
2540
2563
  a
2541
2564
  );
@@ -2546,15 +2569,22 @@ class J {
2546
2569
  });
2547
2570
  }
2548
2571
  scheduleEnsureViewportAreaLoaded() {
2549
- const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, o = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
2550
- this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < o && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
2572
+ setTimeout(() => {
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;
2574
+ this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > l || this.loadAreaAroundViewport();
2575
+ });
2551
2576
  }
2552
2577
  loadAreaAroundViewport() {
2553
- const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, o = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
2554
- this.trigger.emit({ x: s, y: o, width: n, height: a });
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;
2579
+ this.trigger.emit({
2580
+ x: d,
2581
+ y: c,
2582
+ width: g,
2583
+ height: l
2584
+ });
2555
2585
  }
2556
2586
  }
2557
- const Et = () => {
2587
+ const xt = () => {
2558
2588
  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2559
2589
  return r.style.position = "absolute", r.style.inset = "0", r;
2560
2590
  }, St = () => {
@@ -2567,9 +2597,9 @@ const Et = () => {
2567
2597
  );
2568
2598
  return r.setAttribute("id", "pattern"), r;
2569
2599
  };
2570
- class _ {
2571
- constructor(e, t, s) {
2572
- i(this, "svg", Et());
2600
+ class J {
2601
+ constructor(e, t, o) {
2602
+ i(this, "svg", xt());
2573
2603
  i(this, "patternRenderingRectangle", St());
2574
2604
  i(this, "pattern", bt());
2575
2605
  i(this, "patternContent");
@@ -2579,39 +2609,41 @@ class _ {
2579
2609
  i(this, "halfTileHeight");
2580
2610
  i(this, "maxViewportScale");
2581
2611
  i(this, "visible", !1);
2582
- i(this, "resizeObserver", new ResizeObserver((e) => {
2583
- const t = e[0], { width: s, height: o } = t.contentRect;
2584
- this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${o}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${o}`);
2585
- const n = this.tileWidth / s, a = this.tileHeight / o;
2586
- this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
2587
- }));
2588
2612
  i(this, "onAfterTransformUpdated", () => {
2589
- 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})`;
2590
- 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();
2591
2615
  });
2592
- 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;
2593
- const o = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
2594
- 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);
2595
2619
  const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
2596
- n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
2620
+ n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
2621
+ this.updateDimensions();
2622
+ }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
2597
2623
  }
2598
- static configure(e, t, s) {
2599
- new _(e, t, s);
2624
+ static configure(e, t, o) {
2625
+ new J(e, t, o);
2600
2626
  }
2601
2627
  updateVisibility() {
2602
2628
  const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
2603
2629
  t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
2604
2630
  }
2631
+ updateDimensions() {
2632
+ const { width: e, height: t } = this.canvas.viewport.getDimensions();
2633
+ this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`);
2634
+ const o = this.tileWidth / e, s = this.tileHeight / t;
2635
+ this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
2636
+ }
2605
2637
  }
2606
- class ee {
2607
- constructor(e, t, s, o, n) {
2638
+ class _ {
2639
+ constructor(e, t, o, s, n) {
2608
2640
  i(this, "overlayCanvas");
2609
2641
  i(this, "staticPortId", null);
2610
2642
  i(this, "isTargetDragging", !0);
2611
2643
  i(this, "onEdgeCreated", (e) => {
2612
2644
  this.params.onAfterEdgeCreated(e);
2613
2645
  });
2614
- 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(
2615
2647
  this.overlayLayer,
2616
2648
  this.viewportStore
2617
2649
  ), z.configure(
@@ -2637,69 +2669,69 @@ class ee {
2637
2669
  }
2638
2670
  );
2639
2671
  }
2640
- static configure(e, t, s, o, n) {
2641
- new ee(
2672
+ static configure(e, t, o, s, n) {
2673
+ new _(
2642
2674
  e,
2643
2675
  t,
2644
- s,
2645
2676
  o,
2677
+ s,
2646
2678
  n
2647
2679
  );
2648
2680
  }
2649
- grabPort(e, t, s) {
2650
- const o = this.canvas.graph.getPort(e);
2681
+ grabPort(e, t, o) {
2682
+ const s = this.canvas.graph.getPort(e);
2651
2683
  this.staticPortId = e;
2652
- 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({
2653
2685
  x: a - d.x,
2654
2686
  y: h - d.y
2655
- }), l = C(c, {
2687
+ }), g = this.canvas.viewport.createContentCoords({
2656
2688
  x: t.x - d.x,
2657
2689
  y: t.y - d.y
2658
- }), u = {
2659
- overlayId: T.Static,
2690
+ }), l = {
2691
+ overlayNodeId: T.StaticNodeId,
2692
+ portCoords: c,
2693
+ portDirection: s.direction
2694
+ }, u = {
2695
+ overlayNodeId: T.DraggingNodeId,
2660
2696
  portCoords: g,
2661
- portDirection: o.direction
2662
- }, w = {
2663
- overlayId: T.Dragging,
2664
- portCoords: l,
2665
2697
  portDirection: this.params.dragPortDirection
2666
2698
  };
2667
- this.isTargetDragging = s === "direct";
2668
- const [y, x] = this.isTargetDragging ? [u, w] : [w, u];
2669
- this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(x)), this.overlayCanvas.addEdge({
2670
- from: y.overlayId,
2671
- to: x.overlayId,
2672
- 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)
2673
2705
  });
2674
2706
  }
2675
2707
  resetDragState() {
2676
2708
  this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2677
2709
  }
2678
2710
  tryCreateConnection(e) {
2679
- const t = Ee(this.canvas.graph, e), s = this.staticPortId;
2711
+ const t = xe(this.canvas.graph, e), o = this.staticPortId;
2680
2712
  if (t === null) {
2681
2713
  this.params.onEdgeCreationInterrupted({
2682
- staticPortId: s,
2714
+ staticPortId: o,
2683
2715
  isDirect: this.isTargetDragging
2684
2716
  });
2685
2717
  return;
2686
2718
  }
2687
- 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);
2688
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);
2689
2721
  }
2690
2722
  moveDraggingPort(e) {
2691
- const t = this.overlayLayer.getBoundingClientRect(), s = {
2723
+ const t = this.overlayLayer.getBoundingClientRect(), o = this.canvas.viewport.createContentCoords({
2692
2724
  x: e.x - t.x,
2693
2725
  y: e.y - t.y
2694
- }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
2695
- this.overlayCanvas.updateNode(T.Dragging, {
2696
- x: n.x,
2697
- y: n.y
2726
+ });
2727
+ this.overlayCanvas.updateNode(T.DraggingNodeId, {
2728
+ x: o.x,
2729
+ y: o.y
2698
2730
  });
2699
2731
  }
2700
2732
  }
2701
- class te {
2702
- constructor(e, t, s, o, n) {
2733
+ class ee {
2734
+ constructor(e, t, o, s, n) {
2703
2735
  i(this, "overlayCanvas");
2704
2736
  i(this, "staticPortId", null);
2705
2737
  i(this, "isTargetDragging", !0);
@@ -2707,7 +2739,7 @@ class te {
2707
2739
  i(this, "onEdgeReattached", (e) => {
2708
2740
  this.params.onAfterEdgeReattached(e);
2709
2741
  });
2710
- 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(
2711
2743
  this.overlayLayer,
2712
2744
  this.viewportStore
2713
2745
  ), z.configure(
@@ -2730,75 +2762,75 @@ class te {
2730
2762
  }
2731
2763
  );
2732
2764
  }
2733
- static configure(e, t, s, o, n) {
2734
- new te(
2765
+ static configure(e, t, o, s, n) {
2766
+ new ee(
2735
2767
  e,
2736
2768
  t,
2737
- s,
2738
2769
  o,
2770
+ s,
2739
2771
  n
2740
2772
  );
2741
2773
  }
2742
2774
  tryStartEdgeDragging(e, t) {
2743
- const s = this.params.draggingEdgeResolver(e);
2744
- if (s === null)
2745
- return !1;
2746
- const o = this.canvas.graph.getEdge(s);
2775
+ const o = this.params.draggingEdgeResolver(e);
2747
2776
  if (o === null)
2748
2777
  return !1;
2749
- 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;
2750
2782
  this.staticPortId = h, this.isTargetDragging = a;
2751
2783
  const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
2752
2784
  x: g.x + g.width / 2,
2753
2785
  y: g.y + g.height / 2
2754
- }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = C(u, {
2755
- x: l.x - w.x,
2756
- y: l.y - w.y
2757
- }), x = C(u, {
2758
- x: t.x - w.x,
2759
- 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
2760
2792
  });
2761
2793
  this.draggingEdgePayload = {
2762
- id: s,
2763
- from: o.from,
2764
- to: o.to,
2765
- shape: o.shape,
2766
- priority: o.priority
2767
- }, this.canvas.removeEdge(s);
2794
+ id: o,
2795
+ from: s.from,
2796
+ to: s.to,
2797
+ shape: s.shape,
2798
+ priority: s.priority
2799
+ }, this.canvas.removeEdge(o);
2768
2800
  const A = {
2769
- overlayId: T.Static,
2770
- portCoords: y,
2801
+ overlayNodeId: T.StaticNodeId,
2802
+ portCoords: w,
2771
2803
  portDirection: c.direction
2772
- }, S = {
2773
- overlayId: T.Dragging,
2774
- portCoords: x,
2804
+ }, x = {
2805
+ overlayNodeId: T.DraggingNodeId,
2806
+ portCoords: y,
2775
2807
  portDirection: d.direction
2776
- }, [D, P] = this.isTargetDragging ? [A, S] : [S, A];
2777
- this.overlayCanvas.addNode(B(D)), this.overlayCanvas.addNode(B(P));
2778
- 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;
2779
2811
  return this.overlayCanvas.addEdge({
2780
- id: T.Edge,
2781
- from: D.overlayId,
2782
- to: P.overlayId,
2783
- shape: N
2812
+ id: T.EdgeId,
2813
+ from: S.overlayNodeId,
2814
+ to: C.overlayNodeId,
2815
+ shape: P
2784
2816
  }), !0;
2785
2817
  }
2786
2818
  resetDragState() {
2787
2819
  this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
2788
2820
  }
2789
2821
  moveDraggingPort(e) {
2790
- const t = this.overlayLayer.getBoundingClientRect(), s = {
2822
+ const t = this.overlayLayer.getBoundingClientRect(), o = {
2791
2823
  x: e.x - t.x,
2792
2824
  y: e.y - t.y
2793
- }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
2794
- this.overlayCanvas.updateNode(T.Dragging, {
2795
- x: n.x,
2796
- y: n.y
2825
+ }, s = this.canvas.viewport.createContentCoords(o);
2826
+ this.overlayCanvas.updateNode(T.DraggingNodeId, {
2827
+ x: s.x,
2828
+ y: s.y
2797
2829
  });
2798
2830
  }
2799
2831
  tryCreateConnection(e) {
2800
- const t = Ee(this.canvas.graph, e);
2801
- if (this.overlayCanvas.removeEdge(T.Edge), t === null) {
2832
+ const t = xe(this.canvas.graph, e);
2833
+ if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
2802
2834
  const d = this.draggingEdgePayload;
2803
2835
  this.params.onEdgeReattachInterrupted({
2804
2836
  id: d.id,
@@ -2809,10 +2841,10 @@ class te {
2809
2841
  });
2810
2842
  return;
2811
2843
  }
2812
- 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 = {
2813
2845
  id: n.id,
2814
- from: s,
2815
- to: o,
2846
+ from: o,
2847
+ to: s,
2816
2848
  shape: n.shape,
2817
2849
  priority: n.priority
2818
2850
  }, h = this.params.connectionPreprocessor(a);
@@ -2830,26 +2862,26 @@ class te {
2830
2862
  }
2831
2863
  }
2832
2864
  }
2833
- class re {
2834
- constructor(e, t, s) {
2835
- 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(() => {
2836
2868
  this.applyLayout();
2837
2869
  });
2838
2870
  }
2839
- static configure(e, t, s) {
2840
- new re(
2871
+ static configure(e, t, o) {
2872
+ new te(
2841
2873
  e,
2842
2874
  t,
2843
- s
2875
+ o
2844
2876
  );
2845
2877
  }
2846
2878
  applyLayout() {
2847
- this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, s) => {
2848
- this.canvas.updateNode(s, t);
2879
+ this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
2880
+ this.canvas.updateNode(o, t);
2849
2881
  });
2850
2882
  }
2851
2883
  }
2852
- class se {
2884
+ class re {
2853
2885
  constructor(e, t) {
2854
2886
  i(this, "applyScheduled", !1);
2855
2887
  this.canvas = e, this.layoutAlgorithm = t, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
@@ -2863,7 +2895,7 @@ class se {
2863
2895
  });
2864
2896
  }
2865
2897
  static configure(e, t) {
2866
- new se(
2898
+ new re(
2867
2899
  e,
2868
2900
  t
2869
2901
  );
@@ -2874,25 +2906,25 @@ class se {
2874
2906
  }));
2875
2907
  }
2876
2908
  applyLayout() {
2877
- this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, s) => {
2878
- this.canvas.updateNode(s, t);
2909
+ this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
2910
+ this.canvas.updateNode(o, t);
2879
2911
  });
2880
2912
  }
2881
2913
  }
2882
2914
  class Pt {
2883
2915
  static configure(e, t) {
2884
- const s = t.applyOn;
2885
- switch (s.type) {
2916
+ const o = t.applyOn;
2917
+ switch (o.type) {
2886
2918
  case "manual": {
2887
- re.configure(
2919
+ te.configure(
2888
2920
  e,
2889
2921
  t.algorithm,
2890
- s.trigger
2922
+ o.trigger
2891
2923
  );
2892
2924
  break;
2893
2925
  }
2894
2926
  case "topologyChangeTimeout": {
2895
- se.configure(
2927
+ re.configure(
2896
2928
  e,
2897
2929
  t.algorithm
2898
2930
  );
@@ -2917,55 +2949,55 @@ class Tt {
2917
2949
  }
2918
2950
  }
2919
2951
  class oe {
2920
- constructor(e, t, s, o) {
2952
+ constructor(e, t, o, s) {
2921
2953
  i(this, "step", (e) => {
2922
2954
  this.algorithm.calculateNextCoordinates(
2923
2955
  this.canvas.graph,
2924
2956
  e
2925
- ).forEach((s, o) => {
2926
- 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 });
2927
2959
  });
2928
2960
  });
2929
- 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);
2930
2962
  }
2931
- static configure(e, t, s, o) {
2932
- new oe(e, t, s, o);
2963
+ static configure(e, t, o, s) {
2964
+ new oe(e, t, o, s);
2933
2965
  }
2934
2966
  }
2935
- const Dt = () => {
2967
+ const Ct = () => {
2936
2968
  const r = document.createElement("div");
2937
2969
  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
2938
- }, Y = () => {
2970
+ }, X = () => {
2939
2971
  const r = document.createElement("div");
2940
2972
  return r.style.position = "absolute", r.style.inset = "0", r;
2941
2973
  }, pe = () => {
2942
- const r = Y();
2974
+ const r = X();
2943
2975
  return r.style.pointerEvents = "none", r;
2944
2976
  };
2945
- class Ct {
2977
+ class Dt {
2946
2978
  constructor(e) {
2947
- i(this, "background", Y());
2948
- i(this, "main", Y());
2979
+ i(this, "background", X());
2980
+ i(this, "main", X());
2949
2981
  i(this, "overlayConnectablePorts", pe());
2950
2982
  i(this, "overlayDraggableEdges", pe());
2951
- i(this, "host", Dt());
2983
+ i(this, "host", Ct());
2952
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);
2953
2985
  }
2954
2986
  destroy() {
2955
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);
2956
2988
  }
2957
2989
  }
2958
- const G = (r) => () => r, we = G(0), Nt = () => {
2990
+ const Y = (r) => () => r, we = Y(0), Nt = () => {
2959
2991
  let r = 0;
2960
2992
  return () => r++;
2961
2993
  }, Mt = (r, e) => {
2962
- let t = we, s = we;
2963
- const o = Nt();
2964
- 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), {
2965
2997
  nodesPriorityFn: t,
2966
- edgesPriorityFn: s
2998
+ edgesPriorityFn: o
2967
2999
  };
2968
- }, ie = (r) => {
3000
+ }, se = (r) => {
2969
3001
  if (typeof r == "function")
2970
3002
  return r;
2971
3003
  switch (r.type) {
@@ -3036,30 +3068,30 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3036
3068
  });
3037
3069
  }
3038
3070
  }, Lt = (r) => {
3039
- var t, s, o, n, a;
3071
+ var t, o, s, n, a;
3040
3072
  const e = Mt(
3041
3073
  (t = r.nodes) == null ? void 0 : t.priority,
3042
- (s = r.edges) == null ? void 0 : s.priority
3074
+ (o = r.edges) == null ? void 0 : o.priority
3043
3075
  );
3044
3076
  return {
3045
3077
  nodes: {
3046
- centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Se,
3078
+ centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Se,
3047
3079
  priorityFn: e.nodesPriorityFn
3048
3080
  },
3049
3081
  ports: {
3050
3082
  direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
3051
3083
  },
3052
3084
  edges: {
3053
- shapeFactory: ie(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
3085
+ shapeFactory: se(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
3054
3086
  priorityFn: e.edgesPriorityFn
3055
3087
  }
3056
3088
  };
3057
3089
  }, Rt = (r) => {
3058
- var w, y, x, A, S, D;
3090
+ var w, y, A, x, S, C;
3059
3091
  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
3060
3092
  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
3061
- }), s = r.nodeDragVerifier ?? (() => !0), o = ((x = r.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
3062
- }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (A = r.mouse) == null ? void 0 : A.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;
3063
3095
  return {
3064
3096
  moveOnTop: n,
3065
3097
  moveEdgesOnTop: a,
@@ -3069,31 +3101,31 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3069
3101
  mouseUpEventVerifier: u,
3070
3102
  onNodeDragStarted: e,
3071
3103
  onNodeDrag: t,
3072
- nodeDragVerifier: s,
3073
- onNodeDragFinished: o
3104
+ nodeDragVerifier: o,
3105
+ onNodeDragFinished: s
3074
3106
  };
3075
3107
  }, Vt = (r) => {
3076
- 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;
3077
3109
  return (n) => {
3078
3110
  let a = n.nextTransform.x, h = n.nextTransform.y;
3079
3111
  a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
3080
3112
  const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
3081
- 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));
3082
- 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;
3083
3115
  return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
3084
3116
  };
3085
3117
  }, Ft = (r) => {
3086
- 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;
3087
3119
  return (n) => {
3088
3120
  const a = n.prevTransform, h = n.nextTransform;
3089
3121
  let d = h.scale, c = h.x, g = h.y;
3090
- if (h.scale > o && h.scale > a.scale) {
3091
- 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;
3092
3124
  const l = (d - a.scale) / (h.scale - a.scale);
3093
3125
  c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
3094
3126
  }
3095
- if (h.scale < s && h.scale < a.scale) {
3096
- 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;
3097
3129
  const l = (d - a.scale) / (h.scale - a.scale);
3098
3130
  c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
3099
3131
  }
@@ -3104,7 +3136,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3104
3136
  };
3105
3137
  };
3106
3138
  }, It = (r) => (e) => r.reduce(
3107
- (t, s) => s({
3139
+ (t, o) => o({
3108
3140
  prevTransform: e.prevTransform,
3109
3141
  nextTransform: t,
3110
3142
  canvasWidth: e.canvasWidth,
@@ -3129,34 +3161,34 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3129
3161
  });
3130
3162
  }
3131
3163
  }, ye = (r) => {
3132
- var y, x, A, S, D, P, N, F, ne, ae, he, de;
3133
- 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;
3134
- let o;
3135
- s !== void 0 ? Array.isArray(s) ? o = It(
3136
- s.map(
3137
- (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)
3138
3170
  )
3139
- ) : o = fe(s) : o = (M) => M.nextTransform;
3140
- const n = ((x = r == null ? void 0 : r.shift) == null ? void 0 : x.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
3171
+ ) : s = fe(o) : s = (D) => D.nextTransform;
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) ?? (() => {
3141
3173
  }), h = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
3142
- }), 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;
3143
3175
  return {
3144
3176
  wheelSensitivity: t,
3145
- 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) ?? (() => {
3146
3178
  }),
3147
- 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) ?? (() => {
3148
3180
  }),
3149
3181
  onBeforeTransformChange: a,
3150
3182
  onTransformChange: h,
3151
- transformPreprocessor: o,
3183
+ transformPreprocessor: s,
3152
3184
  shiftCursor: n,
3153
3185
  mouseDownEventVerifier: c,
3154
3186
  mouseUpEventVerifier: l,
3155
3187
  mouseWheelEventVerifier: w,
3156
- scaleWheelFinishTimeout: ((ae = r == null ? void 0 : r.scale) == null ? void 0 : ae.wheelFinishTimeout) ?? 500,
3157
- 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) ?? (() => {
3158
3190
  }),
3159
- 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) ?? (() => {
3160
3192
  })
3161
3193
  };
3162
3194
  }, $t = (r, e) => {
@@ -3169,33 +3201,33 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3169
3201
  (r == null ? void 0 : r.radius) ?? 1.5,
3170
3202
  (r == null ? void 0 : r.color) ?? "#d8d8d8"
3171
3203
  ), Bt = (r) => {
3172
- 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 ?? {});
3173
3205
  return {
3174
3206
  tileWidth: t,
3175
- tileHeight: s,
3176
- renderer: o,
3207
+ tileHeight: o,
3208
+ renderer: s,
3177
3209
  maxViewportScale: r.maxViewportScale ?? 10
3178
3210
  };
3179
3211
  }, Ot = (r, e, t) => {
3180
3212
  var c, g, l;
3181
- 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 = () => {
3182
3214
  }, h = () => {
3183
3215
  }, d = () => {
3184
3216
  };
3185
3217
  return {
3186
- connectionTypeResolver: r.connectionTypeResolver ?? s,
3187
- connectionPreprocessor: r.connectionPreprocessor ?? o,
3218
+ connectionTypeResolver: r.connectionTypeResolver ?? o,
3219
+ connectionPreprocessor: r.connectionPreprocessor ?? s,
3188
3220
  mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
3189
3221
  mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
3190
3222
  onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
3191
3223
  onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
3192
3224
  onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? h,
3193
3225
  dragPortDirection: r.dragPortDirection ?? t,
3194
- edgeShapeFactory: r.edgeShape !== void 0 ? ie(r.edgeShape) : e
3226
+ edgeShapeFactory: r.edgeShape !== void 0 ? se(r.edgeShape) : e
3195
3227
  };
3196
3228
  }, Wt = (r, e) => {
3197
3229
  var c, g, l;
3198
- 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) => {
3199
3231
  const w = e.getPortAdjacentEdgeIds(u);
3200
3232
  return w.length > 0 ? w[w.length - 1] : null;
3201
3233
  }, a = () => {
@@ -3204,18 +3236,18 @@ const G = (r) => () => r, we = G(0), Nt = () => {
3204
3236
  };
3205
3237
  return {
3206
3238
  connectionPreprocessor: r.connectionPreprocessor ?? t,
3207
- mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
3208
- mouseUpEventVerifier: r.mouseUpEventVerifier ?? o,
3239
+ mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
3240
+ mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
3209
3241
  draggingEdgeResolver: r.draggingEdgeResolver ?? n,
3210
- draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ie(r.draggingEdgeShape) : null,
3242
+ draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? se(r.draggingEdgeShape) : null,
3211
3243
  onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
3212
3244
  onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
3213
3245
  onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
3214
3246
  };
3215
- }, kt = (r) => ({
3247
+ }, zt = (r) => ({
3216
3248
  nodeVerticalRadius: r.nodeContainingRadius.vertical,
3217
3249
  nodeHorizontalRadius: r.nodeContainingRadius.horizontal
3218
- }), zt = (r) => {
3250
+ }), kt = (r) => {
3219
3251
  var e, t;
3220
3252
  return {
3221
3253
  onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3231,22 +3263,22 @@ class Ht extends Error {
3231
3263
  }
3232
3264
  }
3233
3265
  class Fe {
3234
- constructor(e, t, s) {
3266
+ constructor(e, t, o) {
3235
3267
  i(this, "dt");
3236
3268
  i(this, "nodeMass");
3237
3269
  i(this, "edgeEquilibriumLength");
3238
3270
  i(this, "edgeStiffness");
3239
3271
  i(this, "nodeForcesApplicationStrategy");
3240
3272
  i(this, "distanceVectorGenerator");
3241
- 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;
3242
3274
  }
3243
3275
  apply() {
3244
3276
  let e = 0, t = 0;
3245
- const s = /* @__PURE__ */ new Map();
3277
+ const o = /* @__PURE__ */ new Map();
3246
3278
  return this.graph.getAllNodeIds().forEach((n) => {
3247
- s.set(n, { x: 0, y: 0 });
3248
- }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, s), this.applyEdgeForces(s), this.currentCoords.forEach((n, a) => {
3249
- 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 = {
3250
3282
  x: h.x / this.nodeMass * this.dt,
3251
3283
  y: h.y / this.nodeMass * this.dt
3252
3284
  };
@@ -3260,31 +3292,21 @@ class Fe {
3260
3292
  }
3261
3293
  applyEdgeForces(e) {
3262
3294
  this.graph.getAllEdgeIds().forEach((t) => {
3263
- 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(
3264
3296
  a,
3265
3297
  h
3266
- ), 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);
3267
3299
  w.x += l, w.y += u, y.x -= l, y.y -= u;
3268
3300
  });
3269
3301
  }
3270
3302
  }
3271
- const Ie = (r, e, t) => {
3272
- const s = /* @__PURE__ */ new Map(), o = r.getAllNodeIds(), n = Math.sqrt(o.length) * t;
3273
- return o.forEach((a) => {
3274
- const h = r.getNode(a);
3275
- s.set(a, {
3276
- x: h.x ?? n * e(),
3277
- y: h.y ?? n * e()
3278
- });
3279
- }), s;
3280
- };
3281
- class $e {
3303
+ class Ie {
3282
3304
  constructor(e) {
3283
3305
  i(this, "PI2", 2 * Math.PI);
3284
3306
  this.rand = e;
3285
3307
  }
3286
3308
  create(e, t) {
3287
- 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;
3288
3310
  if (n === 0) {
3289
3311
  const c = this.PI2 * this.rand();
3290
3312
  return {
@@ -3293,11 +3315,11 @@ class $e {
3293
3315
  d: 0
3294
3316
  };
3295
3317
  }
3296
- const a = Math.sqrt(n), h = s / a, d = o / a;
3318
+ const a = Math.sqrt(n), h = o / a, d = s / a;
3297
3319
  return { ex: h, ey: d, d: a };
3298
3320
  }
3299
3321
  }
3300
- const Ue = (r) => {
3322
+ const $e = (r) => {
3301
3323
  if (r.distance === 0)
3302
3324
  return r.maxForce;
3303
3325
  const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
@@ -3312,24 +3334,24 @@ class Xt {
3312
3334
  this.effectiveDistance = e.effectiveDistance, this.nodeCharge = e.nodeCharge, this.distanceVectorGenerator = e.distanceVectorGenerator, this.maxForce = e.maxForce;
3313
3335
  }
3314
3336
  apply(e, t) {
3315
- const s = Array.from(t.keys()), o = s.length;
3316
- for (let n = 0; n < o; n++) {
3317
- const a = s[n];
3318
- for (let h = n + 1; h < o; h++) {
3319
- 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(
3320
3342
  c,
3321
3343
  g
3322
3344
  );
3323
3345
  if (l.d > this.effectiveDistance)
3324
3346
  continue;
3325
- const u = Ue({
3347
+ const u = $e({
3326
3348
  coefficient: 1,
3327
3349
  sourceCharge: this.nodeCharge,
3328
3350
  targetCharge: this.nodeCharge,
3329
3351
  distance: l.d,
3330
3352
  maxForce: this.maxForce
3331
- }), w = u * l.ex, y = u * l.ey, x = t.get(a), A = t.get(d);
3332
- x.x -= w, x.y -= y, A.x += w, A.y += y;
3353
+ }), w = u * l.ex, y = u * l.ey, A = t.get(a), x = t.get(d);
3354
+ A.x -= w, A.y -= y, x.x += w, x.y += y;
3333
3355
  }
3334
3356
  }
3335
3357
  }
@@ -3341,14 +3363,14 @@ const Yt = (r) => {
3341
3363
  centerY: 0,
3342
3364
  radius: 0
3343
3365
  };
3344
- 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;
3345
3367
  r.forEach((d) => {
3346
- 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);
3347
3369
  });
3348
- 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);
3349
3371
  return {
3350
3372
  centerX: (e + t) / 2,
3351
- centerY: (s + o) / 2,
3373
+ centerY: (o + s) / 2,
3352
3374
  radius: h / 2
3353
3375
  };
3354
3376
  };
@@ -3378,18 +3400,18 @@ class Gt {
3378
3400
  };
3379
3401
  let t = [this.root];
3380
3402
  for (; t.length > 0; ) {
3381
- const s = [];
3403
+ const o = [];
3382
3404
  for (; t.length > 0; ) {
3383
- const o = t.pop();
3384
- this.processNode(o).forEach((a) => {
3385
- s.push(a);
3405
+ const s = t.pop();
3406
+ this.processNode(s).forEach((a) => {
3407
+ o.push(a);
3386
3408
  });
3387
3409
  }
3388
- t = s;
3410
+ t = o;
3389
3411
  }
3390
- this.sortedParentNodes.reverse().forEach((s) => {
3391
- let o = 0, n = 0, a = 0, h = 0;
3392
- 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;
3393
3415
  });
3394
3416
  }
3395
3417
  getRoot() {
@@ -3401,14 +3423,14 @@ class Gt {
3401
3423
  processNode(e) {
3402
3424
  if (e.nodeIds.size < 2)
3403
3425
  return this.setLeaf(e), [];
3404
- const { centerX: t, centerY: s, radius: o } = e.box;
3405
- if (o < this.areaRadiusThreshold)
3426
+ const { centerX: t, centerY: o, radius: s } = e.box;
3427
+ if (s < this.areaRadiusThreshold)
3406
3428
  return this.setLeaf(e), [];
3407
3429
  this.sortedParentNodes.push(e);
3408
- 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;
3409
3431
  e.nodeIds.forEach((u) => {
3410
3432
  const { x: w, y } = this.coords.get(u);
3411
- 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);
3412
3434
  });
3413
3435
  const g = {
3414
3436
  parent: e,
@@ -3428,7 +3450,7 @@ class Gt {
3428
3450
  },
3429
3451
  box: {
3430
3452
  centerX: t + c,
3431
- centerY: s + c,
3453
+ centerY: o + c,
3432
3454
  radius: c
3433
3455
  },
3434
3456
  ...g
@@ -3446,7 +3468,7 @@ class Gt {
3446
3468
  },
3447
3469
  box: {
3448
3470
  centerX: t + c,
3449
- centerY: s - c,
3471
+ centerY: o - c,
3450
3472
  radius: c
3451
3473
  },
3452
3474
  ...g
@@ -3464,7 +3486,7 @@ class Gt {
3464
3486
  },
3465
3487
  box: {
3466
3488
  centerX: t - c,
3467
- centerY: s + c,
3489
+ centerY: o + c,
3468
3490
  radius: c
3469
3491
  },
3470
3492
  ...g
@@ -3482,7 +3504,7 @@ class Gt {
3482
3504
  },
3483
3505
  box: {
3484
3506
  centerX: t - c,
3485
- centerY: s - c,
3507
+ centerY: o - c,
3486
3508
  radius: c
3487
3509
  },
3488
3510
  ...g
@@ -3502,11 +3524,11 @@ class Gt {
3502
3524
  x: 0,
3503
3525
  y: 0
3504
3526
  };
3505
- let t = 0, s = 0;
3506
- return e.forEach((o) => {
3507
- const n = this.coords.get(o);
3508
- t += n.x, s += n.y;
3509
- }), { 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 };
3510
3532
  }
3511
3533
  }
3512
3534
  class jt {
@@ -3521,8 +3543,8 @@ class jt {
3521
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;
3522
3544
  }
3523
3545
  apply(e, t) {
3524
- const s = Yt(e), o = new Gt({
3525
- box: s,
3546
+ const o = Yt(e), s = new Gt({
3547
+ box: o,
3526
3548
  coords: e,
3527
3549
  areaRadiusThreshold: this.areaRadiusThreshold,
3528
3550
  nodeMass: this.nodeMass,
@@ -3530,22 +3552,22 @@ class jt {
3530
3552
  });
3531
3553
  e.forEach((n, a) => {
3532
3554
  const h = this.calculateForceForNode(
3533
- o.getLeaf(a),
3555
+ s.getLeaf(a),
3534
3556
  a,
3535
3557
  e
3536
3558
  ), d = t.get(a);
3537
3559
  this.applyForce(d, h);
3538
3560
  });
3539
3561
  }
3540
- calculateForceForNode(e, t, s) {
3541
- 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 };
3542
3564
  e.nodeIds.forEach((h) => {
3543
3565
  if (h !== t) {
3544
- const d = s.get(h), c = this.calculateNodeRepulsiveForce({
3566
+ const d = o.get(h), c = this.calculateNodeRepulsiveForce({
3545
3567
  sourceCharge: this.nodeCharge,
3546
3568
  targetCharge: this.nodeCharge,
3547
3569
  sourceCoords: d,
3548
- targetCoords: o
3570
+ targetCoords: s
3549
3571
  });
3550
3572
  this.applyForce(n, c);
3551
3573
  }
@@ -3556,73 +3578,73 @@ class jt {
3556
3578
  if (h !== null) {
3557
3579
  const d = this.distanceVectorGenerator.create(
3558
3580
  h.chargeCenter,
3559
- o
3581
+ s
3560
3582
  );
3561
3583
  h.box.radius * 2 < d.d * this.theta ? (this.tryApplyFarForce({
3562
3584
  totalForce: n,
3563
- targetCoords: o,
3585
+ targetCoords: s,
3564
3586
  target: h.lb,
3565
3587
  current: a
3566
3588
  }), this.tryApplyFarForce({
3567
3589
  totalForce: n,
3568
- targetCoords: o,
3590
+ targetCoords: s,
3569
3591
  target: h.rb,
3570
3592
  current: a
3571
3593
  }), this.tryApplyFarForce({
3572
3594
  totalForce: n,
3573
- targetCoords: o,
3595
+ targetCoords: s,
3574
3596
  target: h.rt,
3575
3597
  current: a
3576
3598
  }), this.tryApplyFarForce({
3577
3599
  totalForce: n,
3578
- targetCoords: o,
3600
+ targetCoords: s,
3579
3601
  target: h.lt,
3580
3602
  current: a
3581
3603
  })) : (this.tryApplyNearForce({
3582
3604
  totalForce: n,
3583
- targetCoords: o,
3605
+ targetCoords: s,
3584
3606
  target: h.lb,
3585
3607
  current: a,
3586
- nodesCoords: s
3608
+ nodesCoords: o
3587
3609
  }), this.tryApplyNearForce({
3588
3610
  totalForce: n,
3589
- targetCoords: o,
3611
+ targetCoords: s,
3590
3612
  target: h.rb,
3591
3613
  current: a,
3592
- nodesCoords: s
3614
+ nodesCoords: o
3593
3615
  }), this.tryApplyNearForce({
3594
3616
  totalForce: n,
3595
- targetCoords: o,
3617
+ targetCoords: s,
3596
3618
  target: h.rt,
3597
3619
  current: a,
3598
- nodesCoords: s
3620
+ nodesCoords: o
3599
3621
  }), this.tryApplyNearForce({
3600
3622
  totalForce: n,
3601
- targetCoords: o,
3623
+ targetCoords: s,
3602
3624
  target: h.lt,
3603
3625
  current: a,
3604
- nodesCoords: s
3626
+ nodesCoords: o
3605
3627
  }));
3606
3628
  }
3607
3629
  a = a.parent;
3608
3630
  }
3609
3631
  return n;
3610
3632
  }
3611
- calculateExactForce(e, t, s) {
3612
- const o = { x: 0, y: 0 }, n = [e];
3633
+ calculateExactForce(e, t, o) {
3634
+ const s = { x: 0, y: 0 }, n = [e];
3613
3635
  for (; n.length > 0; ) {
3614
3636
  const a = n.pop();
3615
3637
  a.nodeIds.forEach((h) => {
3616
- const d = s.get(h), c = this.calculateNodeRepulsiveForce({
3638
+ const d = o.get(h), c = this.calculateNodeRepulsiveForce({
3617
3639
  sourceCharge: this.nodeCharge,
3618
3640
  targetCharge: this.nodeCharge,
3619
3641
  sourceCoords: d,
3620
3642
  targetCoords: t
3621
3643
  });
3622
- this.applyForce(o, c);
3644
+ this.applyForce(s, c);
3623
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);
3624
3646
  }
3625
- return o;
3647
+ return s;
3626
3648
  }
3627
3649
  calculateApproximateForce(e, t) {
3628
3650
  return this.calculateNodeRepulsiveForce({
@@ -3636,7 +3658,7 @@ class jt {
3636
3658
  const t = this.distanceVectorGenerator.create(
3637
3659
  e.sourceCoords,
3638
3660
  e.targetCoords
3639
- ), s = Ue({
3661
+ ), o = $e({
3640
3662
  coefficient: this.nodeForceCoefficient,
3641
3663
  sourceCharge: e.sourceCharge,
3642
3664
  targetCharge: e.targetCharge,
@@ -3644,8 +3666,8 @@ class jt {
3644
3666
  maxForce: this.maxForce
3645
3667
  });
3646
3668
  return {
3647
- x: s * t.ex,
3648
- y: s * t.ey
3669
+ x: o * t.ex,
3670
+ y: o * t.ey
3649
3671
  };
3650
3672
  }
3651
3673
  applyForce(e, t) {
@@ -3671,7 +3693,7 @@ class jt {
3671
3693
  }
3672
3694
  }
3673
3695
  }
3674
- const Be = (r) => r.theta !== 0 ? new jt({
3696
+ const Ue = (r) => r.theta !== 0 ? new jt({
3675
3697
  nodeCharge: r.nodeCharge,
3676
3698
  nodeForceCoefficient: r.nodeForceCoefficient,
3677
3699
  distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3686,49 +3708,71 @@ const Be = (r) => r.theta !== 0 ? new jt({
3686
3708
  effectiveDistance: r.effectiveDistance,
3687
3709
  maxForce: r.maxForce
3688
3710
  });
3689
- class Kt {
3711
+ class Be {
3712
+ constructor(e) {
3713
+ i(this, "rand");
3714
+ i(this, "sparsity");
3715
+ this.rand = e.rand, this.sparsity = e.sparsity;
3716
+ }
3717
+ calculateCoordinates(e) {
3718
+ const t = /* @__PURE__ */ new Map(), o = e.getAllNodeIds(), s = Math.sqrt(o.length) * this.sparsity;
3719
+ return o.forEach((n) => {
3720
+ const a = e.getNode(n);
3721
+ t.set(n, {
3722
+ x: a.x ?? s * this.rand(),
3723
+ y: a.y ?? s * this.rand()
3724
+ });
3725
+ }), t;
3726
+ }
3727
+ }
3728
+ class qt {
3690
3729
  constructor(e) {
3691
3730
  i(this, "distanceVectorGenerator");
3692
3731
  i(this, "nodeForcesApplicationStrategy");
3693
- this.params = e, this.distanceVectorGenerator = new $e(
3694
- this.params.rand
3695
- ), this.nodeForcesApplicationStrategy = Be({
3732
+ i(this, "fillerLayoutAlgorithm");
3733
+ i(this, "maxIterations");
3734
+ i(this, "dtSec");
3735
+ i(this, "nodeMass");
3736
+ i(this, "edgeEquilibriumLength");
3737
+ i(this, "edgeStiffness");
3738
+ i(this, "convergenceDelta");
3739
+ i(this, "convergenceVelocity");
3740
+ this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
3696
3741
  distanceVectorGenerator: this.distanceVectorGenerator,
3697
- nodeCharge: this.params.nodeCharge,
3698
- effectiveDistance: this.params.effectiveDistance,
3699
- maxForce: this.params.maxForce,
3700
- nodeForceCoefficient: this.params.nodeForceCoefficient,
3701
- theta: this.params.barnesHutTheta,
3702
- areaRadiusThreshold: this.params.barnesHutAreaRadiusThreshold,
3703
- nodeMass: this.params.nodeMass
3742
+ nodeCharge: e.nodeCharge,
3743
+ effectiveDistance: e.effectiveDistance,
3744
+ maxForce: e.maxForce,
3745
+ nodeForceCoefficient: e.nodeForceCoefficient,
3746
+ theta: e.barnesHutTheta,
3747
+ areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
3748
+ nodeMass: e.nodeMass
3749
+ }), this.fillerLayoutAlgorithm = new Be({
3750
+ rand: e.rand,
3751
+ sparsity: e.edgeEquilibriumLength
3704
3752
  });
3705
3753
  }
3706
3754
  calculateCoordinates(e) {
3707
- const t = Ie(
3708
- e,
3709
- this.params.rand,
3710
- this.params.edgeEquilibriumLength
3711
- );
3712
- for (let s = 0; s < this.params.maxIterations; s++) {
3713
- const o = new Fe(
3755
+ const t = this.fillerLayoutAlgorithm.calculateCoordinates(e);
3756
+ for (let o = 0; o < this.maxIterations; o++) {
3757
+ const s = new Fe(
3714
3758
  e,
3715
3759
  t,
3716
3760
  {
3717
3761
  distanceVectorGenerator: this.distanceVectorGenerator,
3718
3762
  nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
3719
- dtSec: this.params.dtSec,
3720
- nodeMass: this.params.nodeMass,
3721
- edgeEquilibriumLength: this.params.edgeEquilibriumLength,
3722
- edgeStiffness: this.params.edgeStiffness
3763
+ dtSec: this.dtSec,
3764
+ nodeMass: this.nodeMass,
3765
+ edgeEquilibriumLength: this.edgeEquilibriumLength,
3766
+ edgeStiffness: this.edgeStiffness
3723
3767
  }
3724
- ), [n, a] = o.apply();
3725
- if (n < this.params.convergenceDelta || a < this.params.convergenceVelocity)
3768
+ ), [n, a] = s.apply();
3769
+ if (n < this.convergenceDelta || a < this.convergenceVelocity)
3726
3770
  break;
3727
3771
  }
3728
3772
  return t;
3729
3773
  }
3730
3774
  }
3731
- class Qt {
3775
+ class Kt {
3732
3776
  constructor(e) {
3733
3777
  i(this, "distanceVectorGenerator");
3734
3778
  i(this, "nodeForcesApplicationStrategy");
@@ -3738,8 +3782,8 @@ class Qt {
3738
3782
  i(this, "nodeMass");
3739
3783
  i(this, "edgeEquilibriumLength");
3740
3784
  i(this, "edgeStiffness");
3741
- i(this, "rand");
3742
- this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.rand = e.rand, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Be({
3785
+ i(this, "fillerLayoutAlgorithm");
3786
+ this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
3743
3787
  distanceVectorGenerator: this.distanceVectorGenerator,
3744
3788
  nodeCharge: e.nodeCharge,
3745
3789
  effectiveDistance: e.effectiveDistance,
@@ -3748,16 +3792,15 @@ class Qt {
3748
3792
  theta: e.barnesHutTheta,
3749
3793
  areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
3750
3794
  nodeMass: e.nodeMass
3795
+ }), this.fillerLayoutAlgorithm = new Be({
3796
+ rand: e.rand,
3797
+ sparsity: e.edgeEquilibriumLength
3751
3798
  });
3752
3799
  }
3753
3800
  calculateNextCoordinates(e, t) {
3754
- const s = Ie(
3801
+ const o = this.fillerLayoutAlgorithm.calculateCoordinates(e), s = new Fe(
3755
3802
  e,
3756
- this.rand,
3757
- this.edgeEquilibriumLength
3758
- ), o = new Fe(
3759
- e,
3760
- s,
3803
+ o,
3761
3804
  {
3762
3805
  distanceVectorGenerator: this.distanceVectorGenerator,
3763
3806
  nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3766,22 +3809,22 @@ class Qt {
3766
3809
  edgeEquilibriumLength: this.edgeEquilibriumLength,
3767
3810
  edgeStiffness: this.edgeStiffness
3768
3811
  }
3769
- ), [n, a] = o.apply();
3812
+ ), [n, a] = s.apply();
3770
3813
  return (n < this.convergenceDelta || a < this.convergenceVelocity) && !e.getAllNodeIds().some((d) => {
3771
3814
  const c = e.getNode(d);
3772
3815
  return c.x === null || c.y === null;
3773
- }) ? /* @__PURE__ */ new Map() : s;
3816
+ }) ? /* @__PURE__ */ new Map() : o;
3774
3817
  }
3775
3818
  }
3776
3819
  const Oe = (r) => {
3777
- let e = 1779033703, t = 3144134277, s = 1013904242, o = 2773480762;
3820
+ let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
3778
3821
  for (let n = 0, a; n < r.length; n++)
3779
- 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);
3780
- 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];
3781
- }, We = (r, e, t, s) => function() {
3782
- r |= 0, e |= 0, t |= 0, s |= 0;
3783
- const o = (r + e | 0) + s | 0;
3784
- 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;
3785
3828
  }, v = Object.freeze({
3786
3829
  seed: "HTMLGraph is awesome",
3787
3830
  maxTimeDeltaSec: 0.01,
@@ -3798,31 +3841,31 @@ const Oe = (r) => {
3798
3841
  nodeForceCoefficient: 1,
3799
3842
  barnesHutAreaRadiusThreshold: 0.01,
3800
3843
  barnesHutTheta: 1
3801
- }), Zt = (r) => {
3802
- var e, t, s;
3844
+ }), Qt = (r) => {
3845
+ var e, t, o;
3803
3846
  switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
3804
3847
  case "custom":
3805
3848
  return r.algorithm.instance;
3806
3849
  default: {
3807
- 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]);
3808
- return new Qt({
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]);
3851
+ return new Kt({
3809
3852
  rand: a,
3810
- maxTimeDeltaSec: (o == null ? void 0 : o.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
3811
- nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
3812
- nodeMass: (o == null ? void 0 : o.nodeMass) ?? v.nodeMass,
3813
- 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,
3814
3857
  effectiveDistance: v.effectiveDistance,
3815
- edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
3816
- convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
3817
- convergenceVelocity: (o == null ? void 0 : o.convergenceVelocity) ?? v.convergenceVelocity,
3818
- maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
3819
- nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
3820
- barnesHutTheta: ((t = o == null ? void 0 : o.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
3821
- 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
3822
3865
  });
3823
3866
  }
3824
3867
  }
3825
- }, qt = (r) => r instanceof j ? {
3868
+ }, Zt = (r) => r instanceof G ? {
3826
3869
  type: "manual",
3827
3870
  trigger: r
3828
3871
  } : {
@@ -3833,11 +3876,11 @@ const Oe = (r) => {
3833
3876
  case "custom":
3834
3877
  return r.instance;
3835
3878
  default: {
3836
- const s = Oe((r == null ? void 0 : r.seed) ?? v.seed), o = We(s[0], s[1], s[2], s[3]);
3837
- return new Kt({
3879
+ const o = Oe((r == null ? void 0 : r.seed) ?? v.seed), s = We(o[0], o[1], o[2], o[3]);
3880
+ return new qt({
3838
3881
  dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
3839
3882
  maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
3840
- rand: o,
3883
+ rand: s,
3841
3884
  nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
3842
3885
  nodeMass: (r == null ? void 0 : r.nodeMass) ?? v.nodeMass,
3843
3886
  edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
@@ -3854,7 +3897,7 @@ const Oe = (r) => {
3854
3897
  }
3855
3898
  }, _t = (r) => ({
3856
3899
  algorithm: Jt(r == null ? void 0 : r.algorithm),
3857
- applyOn: qt(r == null ? void 0 : r.applyOn)
3900
+ applyOn: Zt(r == null ? void 0 : r.applyOn)
3858
3901
  }), er = (r, e) => ({
3859
3902
  ...r,
3860
3903
  onNodeDragStarted: (t) => {
@@ -3870,7 +3913,7 @@ const Oe = (r) => {
3870
3913
  e.clear();
3871
3914
  });
3872
3915
  };
3873
- class or {
3916
+ class sr {
3874
3917
  constructor(e) {
3875
3918
  i(this, "used", !1);
3876
3919
  i(this, "canvasDefaults", {});
@@ -3890,14 +3933,14 @@ class or {
3890
3933
  i(this, "hasUserDraggableEdges", !1);
3891
3934
  i(this, "hasAnimatedLayout", !1);
3892
3935
  i(this, "hasLayout", !1);
3893
- i(this, "boxRenderingTrigger", new j());
3894
- i(this, "graphStore", new xe());
3895
- i(this, "viewportStore", new Ze());
3896
- i(this, "graph", new Le(this.graphStore));
3897
- i(this, "viewport", new Re(this.viewportStore));
3936
+ i(this, "boxRenderingTrigger", new G());
3937
+ i(this, "graphStore");
3938
+ i(this, "viewportStore");
3939
+ i(this, "graph");
3940
+ i(this, "viewport");
3898
3941
  i(this, "window", window);
3899
3942
  i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
3900
- this.element = e;
3943
+ this.element = e, this.viewportStore = new Qe(this.element), this.viewport = new Re(this.viewportStore), this.graphStore = new Ae(), this.graph = new Le(this.graphStore);
3901
3944
  }
3902
3945
  /**
3903
3946
  * specifies default values for graph entities
@@ -3967,37 +4010,25 @@ class or {
3967
4010
  if (this.used)
3968
4011
  throw new Ht("CanvasBuilder is a single use object");
3969
4012
  this.used = !0;
3970
- const e = new Ct(this.element);
3971
- let t = new me(
3972
- this.graphStore,
3973
- this.viewportStore,
3974
- e.main
3975
- );
3976
- this.virtualScrollConfig !== void 0 && (t = new je(
3977
- t,
3978
- this.graphStore,
3979
- this.boxRenderingTrigger,
3980
- zt(this.virtualScrollConfig)
3981
- )), t = new Ke(t, this.graphStore);
3982
- const 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(
3983
4014
  this.graph,
3984
4015
  this.viewport,
3985
4016
  this.graphStore,
3986
4017
  this.viewportStore,
3987
4018
  t,
3988
- s
4019
+ o
3989
4020
  );
3990
- if (this.hasBackground && _.configure(
3991
- o,
4021
+ if (this.hasBackground && J.configure(
4022
+ s,
3992
4023
  Bt(this.backgroundConfig),
3993
4024
  e.background
3994
- ), this.hasNodeResizeReactiveEdges && K.configure(o), this.hasDraggableNodes) {
4025
+ ), this.hasNodeResizeReactiveEdges && j.configure(s), this.hasDraggableNodes) {
3995
4026
  let a = Rt(this.dragConfig);
3996
4027
  this.hasAnimatedLayout && (a = er(
3997
4028
  a,
3998
4029
  this.animationStaticNodes
3999
- )), q.configure(
4000
- o,
4030
+ )), Q.configure(
4031
+ s,
4001
4032
  e.main,
4002
4033
  this.window,
4003
4034
  a
@@ -4006,11 +4037,11 @@ class or {
4006
4037
  if (this.hasUserConnectablePorts) {
4007
4038
  const a = Ot(
4008
4039
  this.connectablePortsConfig,
4009
- s.edges.shapeFactory,
4010
- s.ports.direction
4040
+ o.edges.shapeFactory,
4041
+ o.ports.direction
4011
4042
  );
4012
- ee.configure(
4013
- o,
4043
+ _.configure(
4044
+ s,
4014
4045
  e.overlayConnectablePorts,
4015
4046
  this.viewportStore,
4016
4047
  this.window,
@@ -4020,58 +4051,71 @@ class or {
4020
4051
  if (this.hasUserDraggableEdges) {
4021
4052
  const a = Wt(
4022
4053
  this.draggableEdgesConfig,
4023
- o.graph
4054
+ s.graph
4024
4055
  );
4025
- te.configure(
4026
- o,
4056
+ ee.configure(
4057
+ s,
4027
4058
  e.overlayDraggableEdges,
4028
4059
  this.viewportStore,
4029
4060
  this.window,
4030
4061
  a
4031
4062
  );
4032
4063
  }
4033
- this.virtualScrollConfig !== void 0 ? J.configure(
4034
- o,
4064
+ this.virtualScrollConfig !== void 0 ? Z.configure(
4065
+ s,
4035
4066
  e.main,
4036
4067
  this.window,
4037
4068
  ye(this.transformConfig),
4038
4069
  this.boxRenderingTrigger,
4039
- kt(this.virtualScrollConfig)
4040
- ) : this.hasTransformableViewport && H.configure(
4041
- o,
4070
+ zt(this.virtualScrollConfig)
4071
+ ) : this.hasTransformableViewport && k.configure(
4072
+ s,
4042
4073
  e.main,
4043
4074
  this.window,
4044
4075
  ye(this.transformConfig)
4045
4076
  ), this.hasLayout && Pt.configure(
4046
- o,
4077
+ s,
4047
4078
  _t(this.layoutConfig)
4048
4079
  ), this.hasAnimatedLayout && (tr(
4049
- o.graph,
4080
+ s.graph,
4050
4081
  this.animationStaticNodes
4051
4082
  ), oe.configure(
4052
- o,
4053
- Zt(this.animatedLayoutConfig),
4083
+ s,
4084
+ Qt(this.animatedLayoutConfig),
4054
4085
  this.animationStaticNodes,
4055
4086
  this.window
4056
4087
  ));
4057
4088
  const n = () => {
4058
- e.destroy(), o.onBeforeDestroy.unsubscribe(n);
4089
+ e.destroy(), s.onBeforeDestroy.unsubscribe(n);
4059
4090
  };
4060
- return o.onBeforeDestroy.subscribe(n), o;
4091
+ return s.onBeforeDestroy.subscribe(n), s;
4092
+ }
4093
+ createHtmlView(e) {
4094
+ let t = new me(
4095
+ this.graphStore,
4096
+ this.viewportStore,
4097
+ e
4098
+ );
4099
+ return this.virtualScrollConfig !== void 0 && (t = new je(
4100
+ t,
4101
+ this.graphStore,
4102
+ this.boxRenderingTrigger,
4103
+ kt(this.virtualScrollConfig)
4104
+ )), new qe(t, this.graphStore);
4061
4105
  }
4062
4106
  }
4063
4107
  export {
4064
4108
  ut as BezierEdgeShape,
4065
- or as CanvasBuilder,
4109
+ sr as CanvasBuilder,
4066
4110
  Ht as CanvasBuilderError,
4067
4111
  b as CanvasError,
4068
- R as ConnectionCategory,
4112
+ M as ConnectionCategory,
4069
4113
  Ne as DirectEdgeShape,
4070
- j as EventSubject,
4114
+ G as EventSubject,
4071
4115
  pt as HorizontalEdgeShape,
4072
4116
  vt as InteractiveEdgeError,
4073
4117
  Me as InteractiveEdgeShape,
4074
- sr as MidpointEdgeShape,
4118
+ or as MidpointEdgeShape,
4075
4119
  wt as StraightEdgeShape,
4076
4120
  ft as VerticalEdgeShape
4077
4121
  };