npm - @html-graph/html-graph - Versions diffs - 3.19.0 → 3.20.0 - Mend

@html-graph/html-graph 3.19.0 → 3.20.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

package/dist/html-graph.js CHANGED Viewed

@@ -1,24 +1,24 @@
-var Me = Object.defineProperty;
-var Le = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Le(r, typeof e != "symbol" ? e + "" : e, t);
+var Ne = Object.defineProperty;
+var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
 const D = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
-const Re = () => {
+var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
+const Le = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ce = () => {
+}, Re = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Ve = (r) => {
+}, Ce = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
 class pe {
   constructor(e, t, s) {
-    o(this, "host", Re());
-    o(this, "container", Ce());
+    o(this, "host", Le());
+    o(this, "container", Re());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -28,7 +28,7 @@ class pe {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ve(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -53,8 +53,8 @@ class pe {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = t.centerFn(s, i), a = t.x - n * h.x, d = t.y - n * h.y;
-    t.element.style.transform = `translate(${a}px, ${d}px)`;
+    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.centerFn(s, i), h = t.x - n * a.x, d = t.y - n * a.y;
+    t.element.style.transform = `translate(${h}px, ${d}px)`;
   }
   updateNodePriority(e) {
     const t = this.graphStore.getNode(e);
@@ -67,34 +67,34 @@ class pe {
     this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
       t.from,
       s,
       n,
-      a,
+      h,
       d
     ), l = this.createEdgeRenderPort(
       t.to,
       i,
-      h,
       a,
+      h,
       d
     );
-    let g = L.Line;
-    s.element === i.element ? g = L.PortCycle : s.nodeId === i.nodeId && (g = L.NodeCycle), t.shape.render({ from: c, to: l, category: g });
+    let g = R.Line;
+    s.element === i.element ? g = R.PortCycle : s.nodeId === i.nodeId && (g = R.NodeCycle), t.shape.render({ from: c, to: l, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
     t.shape.svg.style.zIndex = `${t.priority}`;
   }
   createEdgeRenderPort(e, t, s, i, n) {
-    const h = {
+    const a = {
       x: s.left - i.left,
       y: s.top - i.top
-    }, a = D(n, h);
+    }, h = D(n, a);
     return {
-      x: a.x,
-      y: a.y,
+      x: h.x,
+      y: h.y,
       width: s.width * n.scale,
       height: s.height * n.scale,
       direction: t.direction,
@@ -103,7 +103,7 @@ class pe {
     };
   }
 }
-class Ie {
+class Ve {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -119,11 +119,11 @@ class Ie {
     return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), h = this.graphStore.getNode(i), a = Math.min(n.x, h.x), d = Math.max(n.x, h.x), c = Math.min(n.y, h.y), l = Math.max(n.y, h.y);
-    return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ue {
+class Ie {
   constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -131,23 +131,23 @@ class Ue {
     o(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
       const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
-      this.graphStore.getAllNodeIds().forEach((h) => {
-        const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
-        a && !d ? t.add(h) : !a && d && s.add(h);
-      }), this.graphStore.getAllEdgeIds().forEach((h) => {
-        const a = this.renderingBox.hasEdge(h), d = this.attachedEdges.has(h), c = this.graphStore.getEdge(h), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
-        a && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), a && !d ? i.add(h) : !a && d && n.add(h);
-      }), n.forEach((h) => {
-        this.handleDetachEdge(h);
-      }), s.forEach((h) => {
-        this.handleDetachNode(h);
-      }), t.forEach((h) => {
-        this.attachedNodes.has(h) || this.handleAttachNode(h);
-      }), i.forEach((h) => {
-        this.handleAttachEdge(h);
+      this.graphStore.getAllNodeIds().forEach((a) => {
+        const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
+        h && !d ? t.add(a) : !h && d && s.add(a);
+      }), this.graphStore.getAllEdgeIds().forEach((a) => {
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
+      }), n.forEach((a) => {
+        this.handleDetachEdge(a);
+      }), s.forEach((a) => {
+        this.handleDetachNode(a);
+      }), t.forEach((a) => {
+        this.attachedNodes.has(a) || this.handleAttachNode(a);
+      }), i.forEach((a) => {
+        this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ve(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -189,10 +189,10 @@ class Ue {
     this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
-    this.attachedNodes.add(e), this.params.onBeforeNodeAttached(e), this.htmlView.attachNode(e);
+    this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
   }
   handleDetachNode(e) {
-    this.htmlView.detachNode(e), this.params.onAfterNodeDetached(e), this.attachedNodes.delete(e);
+    this.htmlView.detachNode(e), this.attachedNodes.delete(e), this.params.onAfterNodeDetached(e);
   }
   handleAttachEdge(e) {
     this.attachedEdges.add(e), this.htmlView.attachEdge(e);
@@ -221,7 +221,7 @@ const A = () => {
   const r = new we();
   return [r, r];
 };
-class Be {
+class Ue {
   constructor(e) {
     /**
      * @deprecated
@@ -346,7 +346,7 @@ class We {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class k {
+class z {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -378,13 +378,13 @@ class fe {
      * provides api for accessing viewport state
      */
     o(this, "viewport");
-    o(this, "nodeIdGenerator", new k(
+    o(this, "nodeIdGenerator", new z(
       (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new k(
+    o(this, "portIdGenerator", new z(
       (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new k(
+    o(this, "edgeIdGenerator", new z(
       (e) => this.graph.getEdge(e) !== null
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -437,7 +437,7 @@ class fe {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Be(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Ue(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), 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(
       this.onAfterEdgeShapeUpdated
@@ -592,7 +592,7 @@ class fe {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class $e {
+class Be {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -641,7 +641,7 @@ class me {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new $e());
+    o(this, "elementPorts", new Be());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -823,7 +823,7 @@ const ie = (r) => ({
   x: 0,
   y: 0
 };
-class Fe {
+class $e {
   constructor() {
     o(this, "viewportMatrix", ne);
     o(this, "contentMatrix", ne);
@@ -858,7 +858,7 @@ class Fe {
     }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class Y {
+class j {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -881,19 +881,19 @@ class Y {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
   static configure(e) {
-    new Y(e);
+    new j(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const Oe = (r, e, t) => {
-  const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
-  return e >= s && e <= s + n && t >= i && t <= i + h;
-}, ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => Oe(e, t, s) && ke(r, t, s), U = (r, e) => {
+const Fe = (r, e, t) => {
+  const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
+  return e >= s && e <= s + n && t >= i && t <= i + a;
+}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, B = (r) => {
+}, W = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayId,
@@ -908,7 +908,7 @@ const Oe = (r, e, t) => {
       }
     ]
   };
-}, ze = (r, e) => {
+}, ke = (r, e) => {
   let t = e, s = null;
   for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
     t = t.parentElement;
@@ -916,7 +916,7 @@ const Oe = (r, e, t) => {
 }, ye = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const s of t) {
-    const i = ze(r, s);
+    const i = ke(r, s);
     if (i !== null)
       return i;
   }
@@ -926,39 +926,39 @@ var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r
 const ve = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), y = (r, e, t) => ({
+}), m = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
-}), w = {
+}), u = {
   x: 0,
   y: 0
 };
-class He {
+class ze {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = y(
-      { x: this.params.arrowLength, y: w.y },
+    const s = m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ), i = y(
+      u
+    ), i = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), n = {
       x: s.x + this.params.sourceDirection.x * this.params.curvature,
       y: s.y + this.params.sourceDirection.y * this.params.curvature
-    }, h = {
+    }, a = {
       x: i.x - this.params.targetDirection.x * this.params.curvature,
       y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, a = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
-    this.path = `${d}${a}${c}`;
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    this.path = `${d}${h}${c}`;
   }
 }
-const Ee = (r, e, t, s) => ({
+const $ = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
@@ -967,71 +967,71 @@ class Xe {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
-      { x: this.params.arrowLength, y: w.y },
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? y(
+      u
+    ) : u, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = y(
-      { x: i, y: w.y },
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      w
+      u
     ), l = {
-      x: c.x + a,
+      x: c.x + h,
       y: c.y + d
-    }, g = y(
+    }, g = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), p = {
-      x: g.x + a,
+    ), w = {
+      x: g.x + h,
       y: g.y + d
     }, f = {
-      x: (l.x + p.x) / 2,
-      y: (l.y + p.y) / 2
-    }, m = {
+      x: (l.x + w.x) / 2,
+      y: (l.y + w.y) / 2
+    }, y = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
       x: g.x - this.params.curvature * this.params.targetDirection.x,
       y: g.y - this.params.curvature * this.params.targetDirection.y
     }, E = {
-      x: c.x + a,
+      x: c.x + h,
       y: c.y + d
     }, x = {
-      x: g.x + a,
+      x: g.x + h,
       y: g.y + d
     };
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
+      `C ${y.x} ${y.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
       `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = $(f, e.flipX, e.flipY, e.to);
   }
 }
-const V = (r, e) => {
+const L = (r, e) => {
   const t = [];
   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) {
     const s = r.length - 1;
-    let i = 0, n = 0, h = 0;
-    r.forEach((a, d) => {
+    let i = 0, n = 0, a = 0;
+    r.forEach((h, d) => {
       let c = 0, l = 0, g = 0;
-      const p = d > 0, f = d < s, m = p && f;
-      if (p && (c = -i, l = -n, g = h), f) {
-        const C = r[d + 1];
-        i = C.x - a.x, n = C.y - a.y, h = Math.sqrt(i * i + n * n);
+      const w = d > 0, f = d < s, y = w && f;
+      if (w && (c = -i, l = -n, g = a), f) {
+        const V = r[d + 1];
+        i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = h !== 0 ? Math.min((m ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: a.x + i * E, y: a.y + n * E } : a, T = g !== 0 ? Math.min((m ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = m ? { x: a.x + c * T, y: a.y + l * T } : a;
-      d > 0 && t.push(`L ${N.x} ${N.y}`), m && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
+      const E = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = y ? { x: h.x + i * E, y: h.y + n * E } : h, T = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * T, y: h.y + l * T } : h;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
   }
@@ -1044,65 +1044,65 @@ class Ye {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
-      { x: this.params.arrowLength, y: w.y },
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? y(
+      u
+    ) : u, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
-      { x: h, y: w.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: u.y },
       this.params.sourceDirection,
-      w
-    ), d = y(
-      { x: this.params.to.x - h, y: this.params.to.y },
+      u
+    ), d = m(
+      { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), c = Math.max((a.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
+    ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
       x: this.params.flipX > 0 ? c : -n,
-      y: a.y
-    }, p = { x: g.x, y: l }, f = {
+      y: h.y
+    }, w = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, m = { x: f.x, y: l };
-    this.path = V(
-      [s, a, g, p, m, f, d, i],
+    }, y = { x: f.x, y: l };
+    this.path = L(
+      [s, h, g, w, y, f, d, i],
       this.params.roundness
     );
   }
 }
-class j {
+class He {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
-      { x: this.params.arrowLength, y: w.y },
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? y(
+      u
+    ) : u, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
-      { x: i, y: w.y },
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      w
-    ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = y(
+      u
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
-    this.midpoint = Ee(f, e.flipX, e.flipY, e.to), this.path = V(
-      [t, n, l, p, g, s],
+    ), w = { x: g.x + d, y: g.y + c }, f = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 };
+    this.midpoint = $(f, e.flipX, e.flipY, e.to), this.path = L(
+      [t, n, l, w, g, s],
       this.params.roundness
     );
   }
@@ -1114,27 +1114,27 @@ class je {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
-      { x: this.params.arrowLength, y: w.y },
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? y(
+      u
+    ) : u, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = y(
-      { x: n, y: w.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
+      { x: n, y: u.y },
       this.params.sourceDirection,
-      w
-    ), a = y(
+      u
+    ), h = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     );
-    this.path = V([s, h, a, i], this.params.roundness);
+    this.path = L([s, a, h, i], this.params.roundness);
   }
 }
 class Ge {
@@ -1144,34 +1144,34 @@ class Ge {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
-      { x: this.params.arrowLength, y: w.y },
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? y(
+      u
+    ) : u, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
-      { x: h, y: w.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: u.y },
       this.params.sourceDirection,
-      w
-    ), d = y(
-      { x: this.params.to.x - h, y: this.params.to.y },
+      u
+    ), d = m(
+      { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), c = Math.max((a.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
-      x: a.x,
+    ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
+      x: h.x,
       y: this.params.flipY > 0 ? c : -n
-    }, p = { x: l, y: g.y }, f = {
+    }, w = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, m = { x: l, y: f.y };
-    this.path = V(
-      [s, a, g, p, m, f, d, i],
+    }, y = { x: l, y: f.y };
+    this.path = L(
+      [s, h, g, w, y, f, d, i],
       this.params.roundness
     );
   }
@@ -1181,19 +1181,19 @@ class G {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
-      { x: this.params.arrowLength, y: w.y },
-      { x: i, y: w.y },
+    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
+      { x: this.params.arrowLength, y: u.y },
+      { x: i, y: u.y },
       { x: i, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
       { x: i, y: -this.params.side },
-      { x: i, y: w.y },
-      { x: this.params.arrowLength, y: w.y }
+      { x: i, y: u.y },
+      { x: this.params.arrowLength, y: u.y }
     ].map(
-      (c) => y(c, this.params.sourceDirection, w)
-    ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${V(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+      (c) => m(c, this.params.sourceDirection, u)
+    ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
+    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 };
   }
 }
 class Ke {
@@ -1201,20 +1201,20 @@ class Ke {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, h = Math.sqrt(i * i - t * t), a = h * t / i, d = h + s + this.params.arrowLength, c = this.params.arrowLength + a, g = [
-      { x: this.params.arrowLength, y: w.y },
+    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
+      { x: this.params.arrowLength, y: u.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (m) => y(m, this.params.sourceDirection, w)
-    ), p = [
+      (y) => m(y, this.params.sourceDirection, u)
+    ), w = [
       `M ${g[0].x} ${g[0].y}`,
       `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
       `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
       `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
     ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${w}`, this.midpoint = g[3];
   }
 }
 class Ze {
@@ -1236,7 +1236,7 @@ class Ze {
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
-      shift: w
+      shift: u
     }), n = this.createDirectLinePoint({
       offset: this.params.targetOffset,
       hasArrow: this.params.hasTargetArrow,
@@ -1253,46 +1253,128 @@ class Ze {
     };
   }
 }
-const Ae = (r, e) => {
+class Je {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
+      this.params.sourceDirection,
+      u
+    ) : u, s = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: i, y: u.y },
+      this.params.sourceDirection,
+      u
+    ), a = m(
+      { x: this.params.to.x - i, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.y / 2, c = d + Math.abs(this.params.detourDistance), l = d + c * this.params.flipY * h, g = {
+      x: (n.x + a.x) / 2,
+      y: l
+    };
+    this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
+      [
+        t,
+        n,
+        { x: n.x, y: l },
+        { x: a.x, y: l },
+        a,
+        s
+      ],
+      this.params.roundness
+    );
+  }
+}
+class Qe {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: u.y },
+      this.params.sourceDirection,
+      u
+    ) : u, s = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: i, y: u.y },
+      this.params.sourceDirection,
+      u
+    ), a = m(
+      { x: this.params.to.x - i, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.x / 2, c = d + Math.abs(this.params.detourDistance), l = d + c * this.params.flipX * h, g = {
+      x: l,
+      y: (n.y + a.y) / 2
+    };
+    this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
+      [
+        t,
+        n,
+        { x: l, y: n.y },
+        { x: l, y: a.y },
+        a,
+        s
+      ],
+      this.params.roundness
+    );
+  }
+}
+const Ee = (r, e) => {
   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`;
 }, K = Object.freeze({
   edgeColor: "--edge-color"
-}), xe = (r) => {
+}), Ae = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
-}, W = () => {
+}, B = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${K.edgeColor})`), r;
-}, Se = () => {
+}, xe = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Pe = (r) => {
+}, Se = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, be = (r, e) => {
+}, Pe = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
   }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), h = Math.abs(s.x - t.x), a = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
+  }, i = 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;
   return {
     x: i,
     y: n,
-    width: h,
-    height: a,
+    width: a,
+    height: h,
     flipX: d,
     flipY: c
   };
-}, z = (r, e, t, s) => {
+}, X = (r, e, t, s) => {
   const n = [
-    w,
+    u,
     { x: t, y: s },
     { x: t, y: -s }
-  ].map((c) => y(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
-  return `${h} ${a} ${d} Z`;
-}, u = Object.freeze({
+  ].map((c) => m(c, r, u)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  return `${a} ${h} ${d} Z`;
+}, p = Object.freeze({
   color: "#777777",
   width: 1,
   arrowLength: 15,
@@ -1310,67 +1392,67 @@ const Ae = (r, e) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), he = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class $ {
+}), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class F {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Se());
+    o(this, "group", xe());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = xe(e.color), this.svg.appendChild(this.group), this.line = Pe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(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));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
       e.from,
       e.to
     );
-    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = he(
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = ae(
       e.from.direction,
-      h,
-      a
-    ), c = he(
+      a,
+      h
+    ), c = ae(
       e.to.direction,
-      h,
-      a
+      a,
+      h
     ), l = {
       x: i,
       y: n
     };
-    let g = c, p = -this.params.arrowLength, f;
-    e.category === L.PortCycle ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.category === L.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const m = f(
+    let g = c, w = -this.params.arrowLength, f;
+    e.category === R.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : e.category === R.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
+    const y = f(
       d,
       c,
       l,
-      h,
-      a
+      a,
+      h
     );
-    this.line.setAttribute("d", m.path);
+    this.line.setAttribute("d", y.path);
     let v = null;
-    this.sourceArrow && (v = z(
+    this.sourceArrow && (v = X(
       d,
-      w,
+      u,
       this.params.arrowLength,
       this.params.arrowWidth
     ), this.sourceArrow.setAttribute("d", v));
     let E = null;
-    this.targetArrow && (E = z(
+    this.targetArrow && (E = X(
       g,
       l,
-      p,
+      w,
       this.params.arrowWidth
     ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: m,
+      edgePath: y,
       sourceArrowPath: v,
       targetArrowPath: E
     });
   }
 }
-class Je {
+class _e {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1409,7 +1491,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new He({
+    o(this, "createLinePath", (e, t, s) => new ze({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1418,9 +1500,9 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? p.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (e == null ? void 0 : e.color) ?? p.color,
+      width: (e == null ? void 0 : e.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1434,7 +1516,7 @@ class Je {
     this.pathShape.render(e);
   }
 }
-class Qe {
+class qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1447,7 +1529,6 @@ class Qe {
     o(this, "arrowOffset");
     o(this, "roundness");
     o(this, "cycleSquareSide");
-    o(this, "detourDirection");
     o(this, "detourDistance");
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
@@ -1461,7 +1542,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Je({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1470,7 +1551,6 @@ class Qe {
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
-      detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
@@ -1486,15 +1566,15 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (e == null ? void 0 : e.color) ?? p.color,
+      width: (e == null ? void 0 : e.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1508,7 +1588,7 @@ class Qe {
     this.pathShape.render(e);
   }
 }
-class _e {
+class et {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1535,7 +1615,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+    o(this, "createDetourPath", (e, t, s, i, n) => new He({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1559,15 +1639,15 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (e == null ? void 0 : e.color) ?? p.color,
+      width: (e == null ? void 0 : e.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1581,7 +1661,7 @@ class _e {
     this.pathShape.render(e);
   }
 }
-class qe {
+class tt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1594,7 +1674,6 @@ class qe {
     o(this, "arrowOffset");
     o(this, "roundness");
     o(this, "cycleSquareSide");
-    o(this, "detourDirection");
     o(this, "detourDistance");
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
@@ -1608,7 +1687,7 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Qe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1617,7 +1696,6 @@ class qe {
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
-      detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
@@ -1633,15 +1711,15 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (e == null ? void 0 : e.color) ?? p.color,
+      width: (e == null ? void 0 : e.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1655,7 +1733,7 @@ class qe {
     this.pathShape.render(e);
   }
 }
-const ae = (r) => {
+const he = (r) => {
   if (r.diagonalDistance === 0)
     return "";
   const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
@@ -1665,17 +1743,17 @@ const ae = (r) => {
     x: t / r.diagonalDistance,
     y: s / r.diagonalDistance
   };
-  return z(
+  return X(
     n,
     i,
     r.arrowLength,
     r.arrowWidth
   );
 };
-class Te {
+class be {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Se());
+    o(this, "group", xe());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1687,14 +1765,14 @@ class Te {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = xe(this.color), this.svg.appendChild(this.group), this.line = Pe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? p.color, this.width = (e == null ? void 0 : e.width) ?? p.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? p.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? p.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(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));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
       e.from,
       e.to
     );
-    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = { x: i, y: n }, c = new Ze({
       to: d,
       sourceOffset: this.sourceOffset,
@@ -1705,17 +1783,17 @@ class Te {
     });
     this.line.setAttribute("d", c.path);
     let l = null;
-    this.sourceArrow && (l = ae({
+    this.sourceArrow && (l = he({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.sourceOffset,
       flip: 1,
-      shift: w,
+      shift: u,
       arrowWidth: this.arrowWidth,
       arrowLength: this.arrowLength
     }), this.sourceArrow.setAttribute("d", l));
     let g = null;
-    this.targetArrow && (g = ae({
+    this.targetArrow && (g = he({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.targetOffset,
@@ -1730,40 +1808,40 @@ class Te {
     });
   }
 }
-const et = () => {
+const rt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, tt = (r) => {
+}, ot = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
 }, de = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class rt extends Error {
+class st extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class De {
+class Te {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", et());
+    o(this, "handle", rt());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof De)
-      throw new rt(
+    if (this.baseEdge = e, e instanceof Te)
+      throw new st(
         "interactive edge can be configured only once"
       );
     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;
-    const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
-    this.interactiveLine = tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    const s = (t == null ? void 0 : t.width) ?? p.interactiveWidth;
+    this.interactiveLine = ot(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1771,7 +1849,7 @@ class De {
     this.baseEdge.render(e);
   }
 }
-class bt {
+class Dt {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -1793,14 +1871,14 @@ class bt {
     this.baseShape.render(e);
   }
 }
-const Ne = (r, e) => {
+const De = (r, e) => {
   const t = new me(), s = new pe(t, e, r), i = {
     nodes: {
       centerFn: ve,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Te(),
+      shapeFactory: () => new be(),
       priorityFn: () => 0
     },
     ports: {
@@ -1815,7 +1893,7 @@ const Ne = (r, e) => {
     i
   );
 };
-class F {
+class O {
   constructor(e, t, s, i) {
     o(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -1839,7 +1917,7 @@ class F {
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!R(
+      if (!C(
         this.window,
         this.element,
         e.clientX,
@@ -1870,7 +1948,7 @@ class F {
     });
     o(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!R(
+      if (!C(
         this.window,
         this.element,
         t.clientX,
@@ -1897,7 +1975,7 @@ class F {
     this.canvas = e, this.element = t, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new F(e, t, s, i);
+    new O(e, t, s, i);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1964,14 +2042,14 @@ class Z {
       }))
         return;
       e.stopPropagation();
-      const h = this.calculateContentPoint({
+      const a = this.calculateContentPoint({
         x: e.clientX,
         y: e.clientY
       });
       this.grabbedNode = {
         nodeId: s,
-        dx: h.x - i.x,
-        dy: h.y - i.y
+        dx: a.x - i.x,
+        dy: a.y - i.y
       }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
@@ -1990,14 +2068,14 @@ class Z {
         y: n.y
       }))
         return;
-      const a = this.calculateContentPoint({
+      const h = this.calculateContentPoint({
         x: t.clientX,
         y: t.clientY
       });
       this.grabbedNode = {
         nodeId: i,
-        dx: a.x - n.x,
-        dy: a.y - n.y
+        dx: h.x - n.x,
+        dy: h.y - n.y
       }, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
@@ -2007,7 +2085,7 @@ class Z {
       });
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!R(
+      if (!C(
         this.window,
         this.element,
         e.clientX,
@@ -2028,7 +2106,7 @@ class Z {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!R(
+      if (!C(
         this.window,
         this.element,
         t.clientX,
@@ -2057,15 +2135,15 @@ class Z {
     const i = this.calculateContentPoint(t), n = {
       x: i.x - e.dx,
       y: i.y - e.dy
-    }, h = this.adjustNodeCoords(n);
+    }, a = this.adjustNodeCoords(n);
     this.canvas.updateNode(e.nodeId, {
-      x: h.x,
-      y: h.y
+      x: a.x,
+      y: a.y
     }), this.params.onNodeDrag({
       nodeId: e.nodeId,
       element: s.element,
-      x: h.x,
-      y: h.y
+      x: a.x,
+      y: a.y
     });
   }
   moveNodeOnTop(e) {
@@ -2132,34 +2210,34 @@ class Z {
     return e;
   }
 }
-const ot = (r, e, t) => ({
+const it = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), st = (r, e, t, s) => ({
+}), nt = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
 }), I = (r) => {
   const e = [], t = r.touches.length;
-  for (let a = 0; a < t; a++)
-    e.push([r.touches[a].clientX, r.touches[a].clientY]);
+  for (let h = 0; h < t; h++)
+    e.push([r.touches[h].clientX, r.touches[h].clientY]);
   const s = e.reduce(
-    (a, d) => [a[0] + d[0], a[1] + d[1]],
+    (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
-    (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+  ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+    (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
     x: i[0],
     y: i[1],
-    scale: h / t,
+    scale: a / t,
     touchesCnt: t,
     touches: e
   };
 };
-class O {
+class k {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
@@ -2176,7 +2254,7 @@ class O {
       }), this.startRegisteredTransform());
     });
     o(this, "onWindowMouseMove", (e) => {
-      const t = R(
+      const t = C(
         this.window,
         this.element,
         e.clientX,
@@ -2195,8 +2273,8 @@ class O {
     o(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, a = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
@@ -2216,7 +2294,7 @@ class O {
     o(this, "onWindowTouchMove", (e) => {
       const t = I(e);
       if (!t.touches.every(
-        (i) => R(this.window, this.element, i[0], i[1])
+        (i) => C(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2225,8 +2303,8 @@ class O {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), h = this.prevTouches.x - i, a = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(c, h, a);
+        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        this.scaleViewport(c, a, h);
       }
       this.prevTouches = t;
     });
@@ -2256,23 +2334,23 @@ class O {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new O(e, t, s, i);
+    new k(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = it(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
-      canvasHeight: h
+      canvasHeight: a
     });
-    this.performTransform(a);
+    this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = st(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = nt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
-      canvasWidth: h,
-      canvasHeight: a
+      canvasWidth: a,
+      canvasHeight: h
     });
     this.performTransform(d);
   }
@@ -2299,7 +2377,7 @@ class O {
   }
 }
 class J {
-  constructor(e, t, s, i, n, h) {
+  constructor(e, t, s, i, n, a) {
     o(this, "canvasResizeObserver");
     o(this, "nodeHorizontal");
     o(this, "nodeVertical");
@@ -2325,11 +2403,11 @@ class J {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
+    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) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
-    const a = {
+    const h = {
       ...i,
       onResizeTransformStarted: () => {
         this.userTransformInProgress = !0, i.onResizeTransformStarted();
@@ -2349,21 +2427,21 @@ class J {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    O.configure(
+    k.configure(
       e,
       this.element,
       this.window,
-      a
+      h
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, s, i, n, h) {
+  static configure(e, t, s, i, n, a) {
     new J(
       e,
       t,
       s,
       i,
       n,
-      h
+      a
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -2372,21 +2450,21 @@ class J {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, h = this.viewportMatrix.y + t + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, h = 3 * t + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: i, width: n, height: h });
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: s, y: i, width: n, height: a });
   }
 }
-const it = () => {
+const at = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, nt = () => {
+}, ht = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, ht = () => {
+}, dt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2395,9 +2473,9 @@ const it = () => {
 };
 class Q {
   constructor(e, t, s) {
-    o(this, "svg", it());
-    o(this, "patternRenderingRectangle", nt());
-    o(this, "pattern", ht());
+    o(this, "svg", at());
+    o(this, "patternRenderingRectangle", ht());
+    o(this, "pattern", dt());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2408,8 +2486,8 @@ class Q {
     o(this, "resizeObserver", new ResizeObserver((e) => {
       const t = e[0], { width: s, height: i } = t.contentRect;
       this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
-      const n = this.tileWidth / s, h = this.tileHeight / i;
-      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
+      const n = this.tileWidth / s, a = this.tileHeight / i;
+      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
     o(this, "onAfterTransformUpdated", () => {
       const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
@@ -2437,10 +2515,10 @@ class _ {
     o(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
       this.overlayLayer,
       this.viewportStore
-    ), F.configure(
+    ), O.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2450,15 +2528,15 @@ class _ {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (h, a) => {
-          const d = this.params.connectionTypeResolver(h);
-          return d === null ? !1 : (this.grabPort(h, a, d), !0);
+        onPortPointerDown: (a, h) => {
+          const d = this.params.connectionTypeResolver(a);
+          return d === null ? !1 : (this.grabPort(a, h, d), !0);
         },
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
@@ -2475,13 +2553,13 @@ class _ {
   grabPort(e, t, s) {
     const i = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), h = n.x + n.width / 2, a = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = D(c, {
-      x: h - d.x,
-      y: a - d.y
+    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = D(c, {
+      x: a - d.x,
+      y: h - d.y
     }), g = D(c, {
       x: t.x - d.x,
       y: t.y - d.y
-    }), p = {
+    }), w = {
       overlayId: P.Static,
       portCoords: l,
       portDirection: i.direction
@@ -2491,9 +2569,9 @@ class _ {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [m, v] = this.isTargetDragging ? [p, f] : [f, p];
-    this.overlayCanvas.addNode(B(m)), this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addEdge({
-      from: m.overlayId,
+    const [y, v] = this.isTargetDragging ? [w, f] : [f, w];
+    this.overlayCanvas.addNode(W(y)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
+      from: y.overlayId,
       to: v.overlayId,
       shape: this.params.edgeShapeFactory(P.Edge)
     });
@@ -2510,8 +2588,8 @@ class _ {
       );
       return;
     }
-    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, h = this.params.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
+    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
@@ -2533,10 +2611,10 @@ class q {
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
       this.overlayLayer,
       this.viewportStore
-    ), F.configure(
+    ), O.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2546,12 +2624,12 @@ class q {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (h, a) => this.tryStartEdgeDragging(h, a),
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
+        onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
@@ -2572,15 +2650,15 @@ class q {
     const i = this.canvas.graph.getEdge(s);
     if (i === null)
       return !1;
-    const n = e === i.from, h = e === i.to, a = n ? i.to : i.from;
-    this.staticPortId = a, this.isTargetDragging = h;
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(a), l = c.element.getBoundingClientRect(), g = {
+    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
+    this.staticPortId = h, this.isTargetDragging = a;
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
-    }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = D(p, {
+    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = D(w, {
       x: g.x - f.x,
       y: g.y - f.y
-    }), v = D(p, {
+    }), v = D(w, {
       x: t.x - f.x,
       y: t.y - f.y
     });
@@ -2593,14 +2671,14 @@ class q {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayId: P.Static,
-      portCoords: m,
+      portCoords: y,
       portDirection: c.direction
     }, x = {
       overlayId: P.Dragging,
       portCoords: v,
       portDirection: d.direction
     }, [b, T] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(T));
+    this.overlayCanvas.addNode(W(b)), this.overlayCanvas.addNode(W(T));
     const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
       id: P.Edge,
@@ -2635,15 +2713,15 @@ class q {
       });
       return;
     }
-    const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, h = {
+    const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
       id: n.id,
       from: s,
       to: i,
       shape: n.shape,
       priority: n.priority
-    }, a = this.params.connectionPreprocessor(h);
-    if (a !== null)
-      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
+    }, h = this.params.connectionPreprocessor(a);
+    if (h !== null)
+      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
     else {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachPrevented({
@@ -2656,36 +2734,36 @@ class q {
     }
   }
 }
-const at = () => {
+const ct = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, H = () => {
+}, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 }, ce = () => {
-  const r = H();
+  const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class dt {
+class gt {
   constructor(e) {
-    o(this, "background", H());
-    o(this, "main", H());
+    o(this, "background", Y());
+    o(this, "main", Y());
     o(this, "overlayConnectablePorts", ce());
     o(this, "overlayDraggableEdges", ce());
-    o(this, "host", at());
+    o(this, "host", ct());
     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);
   }
   destroy() {
     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);
   }
 }
-const X = (r) => () => r, ge = X(0), ct = () => {
+const H = (r) => () => r, ge = H(0), lt = () => {
   let r = 0;
   return () => r++;
-}, gt = (r, e) => {
+}, ut = (r, e) => {
   let t = ge, s = ge;
-  const i = ct();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = X(r)), typeof e == "number" && (s = X(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+  const i = lt();
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (s = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
@@ -2694,7 +2772,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new _e({
+      return () => new et({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2708,7 +2786,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Qe({
+      return () => new qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2722,7 +2800,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
         detourDirection: r.detourDirection
       });
     case "vertical":
-      return () => new qe({
+      return () => new tt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2736,7 +2814,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new Te({
+      return () => new be({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2747,7 +2825,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Je({
+      return () => new _e({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2761,9 +2839,9 @@ const X = (r) => () => r, ge = X(0), ct = () => {
         detourDirection: r.detourDirection
       });
   }
-}, lt = (r) => {
-  var t, s, i, n, h;
-  const e = gt(
+}, pt = (r) => {
+  var t, s, i, n, a;
+  const e = ut(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
@@ -2776,19 +2854,19 @@ const X = (r) => () => r, ge = X(0), ct = () => {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ee(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, ut = (r) => {
-  var p, f, m, v, E, x;
-  const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
-  }), t = ((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((m = r.events) == null ? void 0 : m.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, h = (v = r.mouse) == null ? void 0 : v.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
+}, wt = (r) => {
+  var w, f, y, v, E, x;
+  const e = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
+  }), t = ((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (v = r.mouse) == null ? void 0 : v.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
-    dragCursor: a,
+    dragCursor: h,
     gridSize: r.gridSize ?? null,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
@@ -2796,30 +2874,30 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
   };
-}, pt = (r) => {
+}, ft = (r) => {
   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, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
-    let h = n.nextTransform.x, a = n.nextTransform.y;
-    h < e && h < n.prevTransform.x && (h = Math.min(n.prevTransform.x, e));
+    let a = n.nextTransform.x, h = n.nextTransform.y;
+    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
-    h > c && h > n.prevTransform.x && (h = Math.max(n.prevTransform.x, c)), a < s && a < n.prevTransform.y && (a = Math.min(n.prevTransform.y, s));
+    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));
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
-    return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
+    return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, wt = (r) => {
+}, mt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
-    const h = n.prevTransform, a = n.nextTransform;
-    let d = a.scale, c = a.x, l = a.y;
-    if (a.scale > i && a.scale > h.scale) {
-      d = Math.max(h.scale, i), c = h.x, l = h.y;
-      const g = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
+    const a = n.prevTransform, h = n.nextTransform;
+    let d = h.scale, c = h.x, l = h.y;
+    if (h.scale > i && h.scale > a.scale) {
+      d = Math.max(a.scale, i), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
-    if (a.scale < s && a.scale < h.scale) {
-      d = Math.min(h.scale, s), c = h.x, l = h.y;
-      const g = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
+    if (h.scale < s && h.scale < a.scale) {
+      d = Math.min(a.scale, s), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
     return {
       scale: d,
@@ -2827,7 +2905,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
       y: l
     };
   };
-}, ft = (r) => (e) => r.reduce(
+}, yt = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -2840,12 +2918,12 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return wt({
+      return mt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return pt({
+      return ft({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
@@ -2853,25 +2931,25 @@ const X = (r) => () => r, ge = X(0), ct = () => {
       });
   }
 }, ue = (r) => {
-  var m, v, E, x, b, T, N, C, te, re, oe, se;
-  const e = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  var y, v, E, x, b, T, N, V, te, re, oe, se;
+  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;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = ft(
+  s !== void 0 ? Array.isArray(s) ? i = yt(
     s.map(
       (M) => le(M)
     )
   ) : i = le(s) : i = (M) => M.nextTransform;
-  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
+  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
+  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, w = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
+    onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: h,
-    onTransformChange: a,
+    onBeforeTransformChange: a,
+    onTransformChange: h,
     transformPreprocessor: i,
     shiftCursor: n,
     mouseDownEventVerifier: c,
@@ -2883,27 +2961,27 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, mt = (r, e) => {
+}, vt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, yt = (r) => r instanceof SVGElement ? r : mt(
+}, Et = (r) => r instanceof SVGElement ? r : vt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), vt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = yt(r.renderer ?? {});
+), At = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Et(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, Et = (r, e, t) => {
+}, xt = (r, e, t) => {
   var c, l, g;
-  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
-  }, a = () => {
+  const s = () => "direct", i = (w) => w, n = (w) => w.button === 0, a = () => {
+  }, h = () => {
   }, d = () => {
   };
   return {
@@ -2911,19 +2989,19 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     connectionPreprocessor: r.connectionPreprocessor ?? i,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
-    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? h,
+    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
+    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
   };
-}, At = (r, e) => {
+}, St = (r, e) => {
   var c, l, g;
-  const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
-    const f = e.getPortAdjacentEdgeIds(p);
+  const t = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
+    const f = e.getPortAdjacentEdgeIds(w);
     return f.length > 0 ? f[f.length - 1] : null;
-  }, h = () => {
   }, a = () => {
+  }, h = () => {
   }, d = () => {
   };
   return {
@@ -2932,14 +3010,14 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
     draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
+    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
-    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
+    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, xt = (r) => ({
+}, Pt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), St = (r) => {
+}), bt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -2948,7 +3026,7 @@ const X = (r) => () => r, ge = X(0), ct = () => {
     })
   };
 };
-class Tt {
+class Nt {
   constructor(e) {
     o(this, "element", null);
     o(this, "canvasDefaults", {});
@@ -3046,42 +3124,42 @@ class Tt {
       );
     let e = this.boxRenderingTrigger;
     this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
-    const t = new me(), s = new Fe(), i = new dt(this.element);
+    const t = new me(), s = new $e(), i = new gt(this.element);
     let n = new pe(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new Ue(
+    e !== void 0 && (n = new Ie(
       n,
       t,
       e,
-      St(this.virtualScrollConfig)
+      bt(this.virtualScrollConfig)
     ));
-    const h = lt(this.canvasDefaults), a = new fe(
+    const a = pt(this.canvasDefaults), h = new fe(
       this.element,
       t,
       s,
       n,
-      h
+      a
     );
     if (this.hasBackground && Q.configure(
-      a,
-      vt(this.backgroundConfig),
+      h,
+      At(this.backgroundConfig),
       i.background
-    ), this.hasNodeResizeReactiveEdges && Y.configure(a), this.hasDraggableNode && Z.configure(
-      a,
+    ), this.hasNodeResizeReactiveEdges && j.configure(h), this.hasDraggableNode && Z.configure(
+      h,
       i.main,
       this.window,
-      ut(this.dragConfig)
+      wt(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = Et(
+      const c = xt(
         this.connectablePortsConfig,
-        h.edges.shapeFactory,
-        h.ports.direction
+        a.edges.shapeFactory,
+        a.ports.direction
       );
       _.configure(
-        a,
+        h,
         i.overlayConnectablePorts,
         s,
         this.window,
@@ -3089,12 +3167,12 @@ class Tt {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = At(
+      const c = St(
         this.draggableEdgesConfig,
-        a.graph
+        h.graph
       );
       q.configure(
-        a,
+        h,
         i.overlayDraggableEdges,
         s,
         this.window,
@@ -3102,22 +3180,22 @@ class Tt {
       );
     }
     this.virtualScrollConfig !== void 0 ? J.configure(
-      a,
+      h,
       i.main,
       this.window,
       ue(this.transformConfig),
       e,
-      xt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && O.configure(
-      a,
+      Pt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && k.configure(
+      h,
       i.main,
       this.window,
       ue(this.transformConfig)
     ), this.reset();
     const d = () => {
-      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
+      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
     };
-    return a.onBeforeDestroy.subscribe(d), a;
+    return h.onBeforeDestroy.subscribe(d), h;
   }
   /**
    * @deprecated
@@ -3128,17 +3206,17 @@ class Tt {
   }
 }
 export {
-  Je as BezierEdgeShape,
-  Tt as CanvasBuilder,
-  Te as DirectEdgeShape,
+  _e as BezierEdgeShape,
+  Nt as CanvasBuilder,
+  be as DirectEdgeShape,
   we as EventSubject,
-  Qe as HorizontalEdgeShape,
+  qe as HorizontalEdgeShape,
   S as HtmlGraphError,
-  rt as InteractiveEdgeError,
-  De as InteractiveEdgeShape,
-  $ as LineEdgeShape,
-  bt as MedianEdgeShape,
-  bt as MidpointEdgeShape,
-  _e as StraightEdgeShape,
-  qe as VerticalEdgeShape
+  st as InteractiveEdgeError,
+  Te as InteractiveEdgeShape,
+  F as LineEdgeShape,
+  Dt as MedianEdgeShape,
+  Dt as MidpointEdgeShape,
+  et as StraightEdgeShape,
+  tt as VerticalEdgeShape
 };