@html-graph/html-graph 3.11.0 → 3.11.1

package/dist/html-graph.js

@@ -1,13 +1,13 @@
-var fe = Object.defineProperty;
-var ve = (r, e, t) => e in r ? fe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => ve(r, typeof e != "symbol" ? e + "" : e, t);
-const ye = () => {
+var ve = Object.defineProperty;
+var ye = (r, e, t) => e in r ? ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => ye(r, typeof e != "symbol" ? e + "" : e, t);
+const me = () => {
   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;
-}, me = () => {
+}, Ae = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ae = (r) => {
+}, Ee = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 }, D = (r, e) => ({
   x: r.scale * e.x + r.x,
@@ -15,8 +15,8 @@ const ye = () => {
 });
 class ne {
   constructor(e, t, s) {
-    o(this, "host", me());
-    o(this, "container", ye());
+    o(this, "host", Ae());
+    o(this, "container", me());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +26,7 @@ class ne {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ae(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ee(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);
@@ -100,7 +100,7 @@ class ne {
     };
   }
 }
-class Ee {
+class xe {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -120,7 +120,7 @@ class Ee {
     return a <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class xe {
+class Se {
   constructor(e, t, s) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -144,7 +144,7 @@ class xe {
         this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ee(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -218,7 +218,7 @@ const E = () => {
   const r = new he();
   return [r, r];
 };
-class Se {
+class be {
   constructor(e) {
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
@@ -231,7 +231,7 @@ class Se {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class be {
+class Te {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -342,7 +342,7 @@ class $ {
     this.counter = 0;
   }
 }
-class x extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
     o(this, "name", "HtmlGraphError");
@@ -416,7 +416,7 @@ class ae {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.defaults = n, this.graph = new be(this.graphStore), this.viewport = new Se(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.defaults = n, this.graph = new Te(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.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
@@ -430,9 +430,9 @@ class ae {
   addNode(e) {
     const t = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(t) !== null)
-      throw new x("failed to add node with existing id");
+      throw new S("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(e.element) !== void 0)
-      throw new x(
+      throw new S(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
@@ -457,7 +457,7 @@ class ae {
    */
   updateNode(e, t) {
     if (this.graph.getNode(e) === null)
-      throw new x("failed to update non existing node");
+      throw new S("failed to update non existing node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
@@ -467,7 +467,7 @@ class ae {
    */
   removeNode(e) {
     if (this.graph.getNode(e) === null)
-      throw new x("failed to remove non existing node");
+      throw new S("failed to remove non existing node");
     return this.graphStore.removeNode(e), this;
   }
   /**
@@ -476,9 +476,9 @@ class ae {
   markPort(e) {
     const t = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(t) !== null)
-      throw new x("failed to add port with existing id");
+      throw new S("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
-      throw new x("failed to mark port for nonexistent node");
+      throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: t,
       element: e.element,
@@ -491,7 +491,7 @@ class ae {
    */
   updatePort(e, t) {
     if (this.graph.getPort(e) === null)
-      throw new x("failed to update nonexistent port");
+      throw new S("failed to update nonexistent port");
     return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
@@ -500,7 +500,7 @@ class ae {
    */
   unmarkPort(e) {
     if (this.graph.getPort(e) === null)
-      throw new x("failed to unmark non existing port");
+      throw new S("failed to unmark non existing port");
     return this.graphStore.removePort(e), this;
   }
   /**
@@ -509,11 +509,11 @@ class ae {
   addEdge(e) {
     const t = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(t) !== null)
-      throw new x("failed to add edge with existing id");
+      throw new S("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
-      throw new x("failed to add edge from nonexistent port");
+      throw new S("failed to add edge from nonexistent port");
     if (this.graph.getPort(e.to) === null)
-      throw new x("failed to add edge to nonexistent port");
+      throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: t,
       from: e.from,
@@ -527,7 +527,7 @@ class ae {
    */
   updateEdge(e, t) {
     if (this.graph.getEdge(e) === null)
-      throw new x("failed to update nonexistent edge");
+      throw new S("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
@@ -535,7 +535,7 @@ class ae {
    */
   removeEdge(e) {
     if (this.graph.getEdge(e) === null)
-      throw new x("failed to remove nonexistent edge");
+      throw new S("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
   /**
@@ -571,7 +571,7 @@ class ae {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class Te {
+class Pe {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -620,7 +620,7 @@ class de {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new Te());
+    o(this, "elementPorts", new Pe());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -802,7 +802,7 @@ const q = (r) => ({
   x: 0,
   y: 0
 };
-class Pe {
+class De {
   constructor() {
     o(this, "viewportMatrix", ee);
     o(this, "contentMatrix", ee);
@@ -866,11 +866,11 @@ class k {
     this.canvas.updateNode(t);
   }
 }
-const De = (r) => {
-  var v, p, f, A, m, S;
+const Ne = (r) => {
+  var v, p, f, A, m, x;
   const e = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDrag) ?? (() => {
   }), t = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onBeforeNodeDrag) ?? (() => !0), s = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (A = r == null ? void 0 : r.mouse) == null ? void 0 : A.dragCursor, a = h !== void 0 ? h : "grab", d = (m = r == null ? void 0 : r.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, g = (S = r == null ? void 0 : r.mouse) == null ? void 0 : S.mouseUpEventVerifier;
+  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (A = r == null ? void 0 : r.mouse) == null ? void 0 : A.dragCursor, a = h !== void 0 ? h : "grab", d = (m = r == null ? void 0 : r.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, g = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -881,10 +881,10 @@ const De = (r) => {
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
   };
-}, Ne = (r, e, t) => {
+}, Me = (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;
-}, Me = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, N = (r, e, t, s) => Ne(e, t, s) && Me(r, t, s), B = (r, e) => {
+}, Le = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, N = (r, e, t, s) => Me(e, t, s) && Le(r, t, s), B = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 };
 class z {
@@ -994,7 +994,7 @@ class z {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
     o(this, "config");
-    this.canvas = e, this.element = t, this.window = s, this.config = De(i), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = s, this.config = Ne(i), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
     new z(e, t, s, i);
@@ -1058,7 +1058,7 @@ class z {
     this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
 }
-const Le = (r) => {
+const Re = (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;
@@ -1068,7 +1068,7 @@ const Le = (r) => {
     const g = n.canvasHeight * n.prevTransform.scale, l = i - g;
     return a > l && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: h, y: a };
   };
-}, Re = (r) => {
+}, Ie = (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;
@@ -1089,7 +1089,7 @@ const Le = (r) => {
       y: g
     };
   };
-}, Ie = (r) => (e) => r.reduce(
+}, Be = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -1102,29 +1102,29 @@ const Le = (r) => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Re({
+      return Ie({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Le({
+      return Re({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, Be = (r) => {
-  var f, A, m, S, b, T, M, L, J, K, Q, _;
+}, Ve = (r) => {
+  var f, A, m, x, b, T, M, L, J, K, Q, _;
   const e = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = Ie(
+  s !== void 0 ? Array.isArray(s) ? i = Be(
     s.map(
       (P) => te(P)
     )
   ) : i = te(s) : i = (P) => P.nextTransform;
   const n = ((A = r == null ? void 0 : r.shift) == null ? void 0 : A.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((m = r == null ? void 0 : r.events) == null ? void 0 : m.onBeforeTransformChange) ?? (() => {
-  }), a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
+  }), 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 : (P) => P.button === 0, g = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, l = g !== void 0 ? g : (P) => P.button === 0, v = (M = r == null ? void 0 : r.scale) == null ? void 0 : M.mouseWheelEventVerifier, p = v !== void 0 ? v : () => !0;
   return {
     wheelSensitivity: t,
@@ -1145,7 +1145,7 @@ const Le = (r) => {
     onResizeTransformFinished: ((_ = r == null ? void 0 : r.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Ve = (r, e, t) => ({
+}, Ce = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
@@ -1172,7 +1172,7 @@ const Le = (r) => {
     touches: e
   };
 };
-class U {
+class C {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
@@ -1261,7 +1261,7 @@ class U {
     });
     this.canvas = e, this.element = t, this.window = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Be(i), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Ve(i), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
@@ -1270,7 +1270,7 @@ class U {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new U(
+    new C(
       e,
       t,
       s,
@@ -1278,7 +1278,7 @@ class U {
     );
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = Ve(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.config.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = Ce(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.config.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -1349,7 +1349,7 @@ class X {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    var p, f, A, m, S;
+    var p, f, A, m, x;
     this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.virtualScrollOptions = h, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((b) => {
       const T = b[0];
       this.viewportWidth = T.contentRect.width, this.viewportHeight = T.contentRect.height, this.scheduleLoadAreaAroundViewport();
@@ -1358,7 +1358,7 @@ class X {
     }), d = ((f = i == null ? void 0 : i.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
     }), c = ((A = i == null ? void 0 : i.events) == null ? void 0 : A.onTransformChange) ?? (() => {
     }), g = ((m = i == null ? void 0 : i.events) == null ? void 0 : m.onBeforeTransformChange) ?? (() => {
-    }), l = ((S = i == null ? void 0 : i.events) == null ? void 0 : S.onTransformFinished) ?? (() => {
+    }), l = ((x = i == null ? void 0 : i.events) == null ? void 0 : x.onTransformFinished) ?? (() => {
     }), v = {
       ...i,
       events: {
@@ -1382,7 +1382,7 @@ class X {
         }
       }
     };
-    U.configure(
+    C.configure(
       e,
       this.element,
       this.window,
@@ -1413,29 +1413,29 @@ class X {
     this.trigger.emit({ x: s, y: i, width: n, height: h });
   }
 }
-const Ce = () => {
+const $e = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, $e = () => {
+}, We = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, We = () => {
+}, Fe = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
-}, Fe = (r, e) => {
+}, Oe = (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;
-}, Oe = (r) => r instanceof SVGElement ? r : Fe(
+}, ke = (r) => r instanceof SVGElement ? r : Oe(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), ke = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Oe(r.renderer ?? {});
+), ze = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = ke(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
@@ -1445,9 +1445,9 @@ const Ce = () => {
 };
 class Y {
   constructor(e, t, s) {
-    o(this, "svg", Ce());
-    o(this, "patternRenderingRectangle", $e());
-    o(this, "pattern", We());
+    o(this, "svg", $e());
+    o(this, "patternRenderingRectangle", We());
+    o(this, "pattern", Fe());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -1471,7 +1471,7 @@ class Y {
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     this.canvas = e, this.host = s;
-    const i = ke(t);
+    const i = ze(t);
     this.tileWidth = i.tileWidth, this.tileHeight = i.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = i.renderer, this.maxViewportScale = i.maxViewportScale;
     const n = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", n), this.pattern.appendChild(this.patternContent);
@@ -1486,7 +1486,7 @@ class Y {
     t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const ze = (r) => {
+const Xe = (r) => {
   var a, d, c;
   const e = () => "direct", t = (g) => g, s = (g) => g.button === 0, i = () => {
   }, n = () => {
@@ -1587,7 +1587,7 @@ class H {
     o(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.config = ze(h);
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.config = Xe(h);
     const a = new de(), d = new ne(
       a,
       this.viewportStore,
@@ -1716,34 +1716,34 @@ class H {
     return this.config.connectionTypeResolver(t) !== null;
   }
 }
-const Xe = () => {
+const Ye = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, W = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 };
-class Ye {
+class He {
   constructor(e) {
     o(this, "background", W());
     o(this, "main", W());
     o(this, "overlay", W());
-    o(this, "host", Xe());
+    o(this, "host", Ye());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
   }
 }
-const He = (r, e) => ({
+const je = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), F = (r) => () => r, re = F(0), je = () => {
+}), F = (r) => () => r, re = F(0), Ge = () => {
   let r = 0;
   return () => r++;
-}, Ge = (r, e) => {
+}, Ze = (r, e) => {
   let t = re, s = re;
-  const i = je();
+  const i = Ge();
   return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = F(r)), typeof e == "number" && (s = F(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
@@ -1755,7 +1755,7 @@ const He = (r, e) => ({
   x: 0,
   y: 0
 };
-class Ze {
+class Je {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -1780,7 +1780,11 @@ class Ze {
     this.path = `${d}${a}${c}`;
   }
 }
-class Je {
+const ce = (r, e, t, s) => ({
+  x: e * r.x + (1 - e) / 2 * s.x,
+  y: t * r.y + (1 - t) / 2 * s.y
+});
+class Ke {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -1810,28 +1814,29 @@ class Je {
     ), v = {
       x: l.x + a,
       y: l.y + d
-    };
-    this.median = { x: (g.x + v.x) / 2, y: (g.y + v.y) / 2 };
-    const p = {
+    }, p = {
+      x: (g.x + v.x) / 2,
+      y: (g.y + v.y) / 2
+    }, f = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
-    }, f = {
+    }, A = {
       x: l.x - this.params.curvature * this.params.targetDirection.x,
       y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, A = {
+    }, m = {
       x: c.x + a,
       y: c.y + d
-    }, m = {
+    }, x = {
       x: l.x + a,
       y: l.y + d
     };
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${p.x} ${p.y} ${A.x} ${A.y} ${this.median.x} ${this.median.y}`,
-      `C ${m.x} ${m.y} ${f.x} ${f.y} ${l.x} ${l.y}`,
+      `C ${f.x} ${f.y} ${m.x} ${m.y} ${p.x} ${p.y}`,
+      `C ${x.x} ${x.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" ");
+    ].join(" "), this.median = ce(p, e.flipX, e.flipY, e.to);
   }
 }
 const R = (r, e) => {
@@ -1846,15 +1851,15 @@ const R = (r, e) => {
         const L = r[d + 1];
         i = L.x - a.x, n = L.y - a.y, h = Math.sqrt(i * i + n * n);
       }
-      const m = h !== 0 ? Math.min((f ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, S = f ? { x: a.x + i * m, y: a.y + n * m } : a, T = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, M = f ? { x: a.x + c * T, y: a.y + g * T } : a;
+      const m = h !== 0 ? Math.min((f ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = f ? { x: a.x + i * m, y: a.y + n * m } : a, T = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, M = f ? { x: a.x + c * T, y: a.y + g * T } : a;
       d > 0 && t.push(`L ${M.x} ${M.y}`), f && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${S.x} ${S.y}`
+        `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
       );
     });
   }
   return t.join(" ");
 };
-class Ke {
+class Qe {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -1917,14 +1922,14 @@ class j {
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), v = { x: l.x + d, y: l.y + c };
-    this.median = { x: (g.x + v.x) / 2, y: (g.y + v.y) / 2 }, this.path = R(
+    ), v = { x: l.x + d, y: l.y + c }, p = { x: (g.x + v.x) / 2, y: (g.y + v.y) / 2 };
+    this.median = ce(p, e.flipX, e.flipY, e.to), this.path = R(
       [t, n, g, v, l, s],
       this.params.roundness
     );
   }
 }
-class Qe {
+class _e {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -1954,7 +1959,7 @@ class Qe {
     this.path = R([s, h, a, i], this.params.roundness);
   }
 }
-class _e {
+class qe {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -2013,7 +2018,7 @@ class G {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${R(a, this.params.roundness)}`, this.median = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
   }
 }
-class qe {
+class et {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -2034,7 +2039,7 @@ class qe {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : p}${v}`, this.median = l[3];
   }
 }
-class et {
+class tt {
   constructor(e) {
     o(this, "path");
     o(this, "median");
@@ -2070,23 +2075,23 @@ class et {
     };
   }
 }
-const ce = (r, e) => {
+const le = (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`;
 }, Z = Object.freeze({
   edgeColor: "--edge-color"
-}), le = (r) => {
+}), ge = (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(Z.edgeColor, r), e;
 }, V = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, ge = () => {
+}, ue = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, ue = (r) => {
+}, we = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, we = (r, e) => {
+}, pe = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -2128,23 +2133,23 @@ const ce = (r, e) => {
   interactiveWidth: 10,
   preOffset: 0
 }), oe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class C {
+class U {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", ge());
+    o(this, "group", ue());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.svg = le(e.color), this.svg.appendChild(this.group), this.line = ue(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.svg = ge(e.color), this.svg.appendChild(this.group), this.line = we(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = we(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
       e.from,
       e.to
     );
-    ce(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
     const d = oe(
       e.from.direction,
       h,
@@ -2187,7 +2192,7 @@ class C {
     });
   }
 }
-class tt {
+class rt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2205,7 +2210,7 @@ class tt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new qe({
+    o(this, "createCyclePath", (e) => new et({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -2213,7 +2218,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Je({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Ke({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2226,7 +2231,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Ze({
+    o(this, "createLinePath", (e, t, s) => new Je({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2235,7 +2240,7 @@ class tt {
       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 C({
+    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 U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2251,7 +2256,7 @@ class tt {
     this.pathShape.render(e);
   }
 }
-class rt {
+class ot {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2292,7 +2297,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new Ke({
+    o(this, "createLinePath", (e, t, s, i) => new Qe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2309,7 +2314,7 @@ class rt {
       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 C({
+    ), 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 U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2325,7 +2330,7 @@ class rt {
     this.pathShape.render(e);
   }
 }
-class ot {
+class st {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2366,7 +2371,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Qe({
+    o(this, "createLinePath", (e, t, s) => new _e({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2382,7 +2387,7 @@ class ot {
       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 C({
+    ), 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 U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2398,7 +2403,7 @@ class ot {
     this.pathShape.render(e);
   }
 }
-class st {
+class it {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2439,7 +2444,7 @@ class st {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new _e({
+    o(this, "createLinePath", (e, t, s, i, n) => new qe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2456,7 +2461,7 @@ class st {
       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 C({
+    ), 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 U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2489,10 +2494,10 @@ const se = (r) => {
     r.arrowWidth
   );
 };
-class it {
+class nt {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", ge());
+    o(this, "group", ue());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -2504,15 +2509,15 @@ class it {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = E(), 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 = le(this.color), this.svg.appendChild(this.group), this.line = ue(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = E(), 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 = ge(this.color), this.svg.appendChild(this.group), this.line = we(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = we(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
       e.from,
       e.to
     );
-    ce(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = { x: i, y: n }, c = new et({
+    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = { x: i, y: n }, c = new tt({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -2547,40 +2552,40 @@ class it {
     });
   }
 }
-const nt = () => {
+const ht = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, ht = (r) => {
+}, at = (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;
 }, ie = (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 at extends Error {
+class dt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class pe {
+class fe {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", nt());
+    o(this, "handle", ht());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof pe)
-      throw new at(
+    if (this.baseEdge = e, e instanceof fe)
+      throw new dt(
         "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 = ht(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ie(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ie(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = at(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ie(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ie(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);
     });
   }
@@ -2588,7 +2593,7 @@ class pe {
     this.baseEdge.render(e);
   }
 }
-class gt {
+class ut {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -2605,12 +2610,12 @@ class gt {
     this.baseShape.render(e);
   }
 }
-const dt = (r) => {
+const ct = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new ot({
+      return () => new st({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2624,7 +2629,7 @@ const dt = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new rt({
+      return () => new ot({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2638,7 +2643,7 @@ const dt = (r) => {
         detourDirection: r.detourDirection
       });
     case "vertical":
-      return () => new st({
+      return () => new it({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2652,7 +2657,7 @@ const dt = (r) => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new it({
+      return () => new nt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2663,7 +2668,7 @@ const dt = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new tt({
+      return () => new rt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2677,27 +2682,27 @@ const dt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, ct = (r) => {
+}, lt = (r) => {
   var t, s, i, n, h;
-  const e = Ge(
+  const e = Ze(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? He,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? je,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: dt(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: ct(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class ut {
+class wt {
   constructor(e) {
     o(this, "element", null);
     o(this, "canvasDefaults", {});
@@ -2776,19 +2781,19 @@ class ut {
    */
   build() {
     if (this.element === null)
-      throw new x(
+      throw new S(
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
     this.virtualScrollConfig !== void 0 && e === void 0 && (e = new he());
-    const t = new de(), s = new Pe(), i = new Ye(this.element);
+    const t = new de(), s = new De(), i = new He(this.element);
     let n = new ne(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new xe(n, t, e));
-    const h = ct(this.canvasDefaults), a = new ae(
+    e !== void 0 && (n = new Se(n, t, e));
+    const h = lt(this.canvasDefaults), a = new ae(
       this.element,
       t,
       s,
@@ -2820,7 +2825,7 @@ class ut {
       this.transformConfig,
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && U.configure(
+    ) : this.hasTransformableViewport && C.configure(
       a,
       i.main,
       this.window,
@@ -2836,16 +2841,16 @@ class ut {
   }
 }
 export {
-  tt as BezierEdgeShape,
-  ut as CanvasBuilder,
-  it as DirectEdgeShape,
+  rt as BezierEdgeShape,
+  wt as CanvasBuilder,
+  nt as DirectEdgeShape,
   he as EventSubject,
-  rt as HorizontalEdgeShape,
-  x as HtmlGraphError,
-  at as InteractiveEdgeError,
-  pe as InteractiveEdgeShape,
-  C as LineEdgeShape,
-  gt as MedianEdgeShape,
-  ot as StraightEdgeShape,
-  st as VerticalEdgeShape
+  ot as HorizontalEdgeShape,
+  S as HtmlGraphError,
+  dt as InteractiveEdgeError,
+  fe as InteractiveEdgeShape,
+  U as LineEdgeShape,
+  ut as MedianEdgeShape,
+  st as StraightEdgeShape,
+  it as VerticalEdgeShape
 };