@html-graph/html-graph 3.9.0 → 3.10.0

package/dist/html-graph.js

@@ -1,22 +1,22 @@
-var ve = Object.defineProperty;
-var ye = (t, e, o) => e in t ? ve(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var r = (t, e, o) => ye(t, typeof e != "symbol" ? e + "" : e, o);
-const Ae = () => {
+var ye = Object.defineProperty;
+var Ae = (t, e, o) => e in t ? ye(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var r = (t, e, o) => Ae(t, typeof e != "symbol" ? e + "" : e, o);
+const pe = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
 }, Ee = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-}, pe = (t) => {
+}, xe = (t) => {
   t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden";
 }, N = (t, e) => ({
   x: t.scale * e.x + t.x,
   y: t.scale * e.y + t.y
 });
-class ne {
+class he {
   constructor(e, o, i) {
     r(this, "host", Ee());
-    r(this, "container", Ae());
+    r(this, "container", pe());
     r(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     r(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +26,7 @@ class ne {
   }
   attachNode(e) {
     const o = this.graphStore.getNode(e);
-    pe(o.element), this.container.appendChild(o.element), this.updateNodePosition(e), this.updateNodePriority(e), o.element.style.visibility = "visible";
+    xe(o.element), this.container.appendChild(o.element), this.updateNodePosition(e), this.updateNodePriority(e), o.element.style.visibility = "visible";
   }
   detachNode(e) {
     const o = this.graphStore.getNode(e);
@@ -100,7 +100,7 @@ class ne {
     };
   }
 }
-class xe {
+class Se {
   constructor(e) {
     r(this, "xFrom", 1 / 0);
     r(this, "yFrom", 1 / 0);
@@ -120,7 +120,7 @@ class xe {
     return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class Se {
+class be {
   constructor(e, o, i) {
     r(this, "attachedNodes", /* @__PURE__ */ new Set());
     r(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -144,7 +144,7 @@ class Se {
         this.handleAttachEdge(n);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new Se(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -198,7 +198,7 @@ class Se {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class he {
+class de {
   constructor() {
     r(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -215,10 +215,10 @@ class he {
   }
 }
 const x = () => {
-  const t = new he();
+  const t = new de();
   return [t, t];
 };
-class be {
+class Te {
   constructor(e) {
     r(this, "onBeforeUpdated");
     r(this, "onAfterUpdated");
@@ -231,7 +231,7 @@ class be {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Te {
+class Pe {
   constructor(e) {
     r(this, "onAfterNodeAdded");
     r(this, "onAfterNodeUpdated");
@@ -348,7 +348,7 @@ class S extends Error {
     r(this, "name", "HtmlGraphError");
   }
 }
-class de {
+class ce {
   constructor(e, o, i, s, h) {
     /**
      * provides api for accessing model of rendered graph
@@ -416,7 +416,7 @@ class de {
      * emits event just before destruction of canvas
      */
     r(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = h, 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.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = h, this.graph = new Pe(this.graphStore), this.viewport = new Te(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
@@ -571,7 +571,7 @@ class de {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class Pe {
+class De {
   constructor() {
     r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -611,7 +611,7 @@ class Pe {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class ce {
+class ae {
   constructor() {
     r(this, "nodes", /* @__PURE__ */ new Map());
     r(this, "ports", /* @__PURE__ */ new Map());
@@ -620,7 +620,7 @@ class ce {
     r(this, "incomingEdges", /* @__PURE__ */ new Map());
     r(this, "outcomingEdges", /* @__PURE__ */ new Map());
     r(this, "cycleEdges", /* @__PURE__ */ new Map());
-    r(this, "elementPorts", new Pe());
+    r(this, "elementPorts", new De());
     r(this, "afterNodeAddedEmitter");
     r(this, "onAfterNodeAdded");
     r(this, "afterNodeUpdatedEmitter");
@@ -793,19 +793,19 @@ class ce {
     this.cycleEdges.get(i).delete(e), this.cycleEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.edges.delete(e);
   }
 }
-const _ = (t) => ({
+const q = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), q = {
+}), ee = {
   scale: 1,
   x: 0,
   y: 0
 };
-class me {
+class Ne {
   constructor() {
-    r(this, "viewportMatrix", q);
-    r(this, "contentMatrix", q);
+    r(this, "viewportMatrix", ee);
+    r(this, "contentMatrix", ee);
     r(this, "afterUpdateEmitter");
     r(this, "onAfterUpdated");
     r(this, "beforeUpdateEmitter");
@@ -823,14 +823,14 @@ class me {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = _(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = q(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.beforeUpdateEmitter.emit(), this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = _(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = q(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
 class k {
@@ -866,11 +866,11 @@ class k {
     this.canvas.updateNode(o);
   }
 }
-const Ne = (t) => {
-  var v, A, y, E, p, b;
+const me = (t) => {
+  var v, A, y, p, E, b;
   const e = ((v = t == null ? void 0 : t.events) == null ? void 0 : v.onNodeDrag) ?? (() => {
   }), o = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onBeforeNodeDrag) ?? (() => !0), i = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) !== !1, h = (t == null ? void 0 : t.moveEdgesOnTop) !== !1 && s, n = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.dragCursor, d = n !== void 0 ? n : "grab", c = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseDownEventVerifier, a = c !== void 0 ? c : (T) => T.button === 0, l = (b = t == null ? void 0 : t.mouse) == null ? void 0 : b.mouseUpEventVerifier;
+  }), s = (t == null ? void 0 : t.moveOnTop) !== !1, h = (t == null ? void 0 : t.moveEdgesOnTop) !== !1 && s, n = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.dragCursor, d = n !== void 0 ? n : "grab", c = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseDownEventVerifier, a = c !== void 0 ? c : (T) => T.button === 0, l = (b = t == null ? void 0 : t.mouse) == null ? void 0 : b.mouseUpEventVerifier;
   return {
     moveOnTop: s,
     moveEdgesOnTop: h,
@@ -881,10 +881,10 @@ const Ne = (t) => {
     onBeforeNodeDrag: o,
     onNodeDragFinished: i
   };
-}, De = (t, e, o) => {
+}, Me = (t, e, o) => {
   const { x: i, y: s, width: h, height: n } = t.getBoundingClientRect();
   return e >= i && e <= i + h && o >= s && o <= s + n;
-}, Me = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, D = (t, e, o, i) => De(e, o, i) && Me(t, o, i), I = (t, e) => {
+}, Le = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, m = (t, e, o, i) => Me(e, o, i) && Le(t, o, i), B = (t, e) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
 };
 class z {
@@ -927,7 +927,7 @@ class z {
         element: s.element,
         x: s.x,
         y: s.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, I(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, B(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
@@ -955,7 +955,7 @@ class z {
       }));
     });
     r(this, "onWindowMouseMove", (e) => {
-      if (!D(
+      if (!m(
         this.window,
         this.element,
         e.clientX,
@@ -973,7 +973,7 @@ class z {
       if (e.touches.length !== 1)
         return;
       const o = e.touches[0];
-      if (!D(
+      if (!m(
         this.window,
         this.element,
         o.clientX,
@@ -994,7 +994,7 @@ class z {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
     r(this, "config");
-    this.canvas = e, this.element = o, this.window = i, this.config = Ne(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = o, this.window = i, this.config = me(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s) {
     new z(e, o, i, s);
@@ -1035,7 +1035,7 @@ class z {
       element: e.element,
       x: e.x,
       y: e.y
-    }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, B(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1058,7 +1058,7 @@ class z {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
 }
-const Le = (t) => {
+const Re = (t) => {
   const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, i = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
   return (h) => {
     let n = h.nextTransform.x, d = h.nextTransform.y;
@@ -1068,7 +1068,7 @@ const Le = (t) => {
     const l = h.canvasHeight * h.prevTransform.scale, w = s - l;
     return d > w && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, w)), { scale: h.nextTransform.scale, x: n, y: d };
   };
-}, Ve = (t) => {
+}, Ie = (t) => {
   const e = t.maxContentScale, o = t.minContentScale, i = e !== null ? 1 / e : 0, s = o !== null ? 1 / o : 1 / 0;
   return (h) => {
     const n = h.prevTransform, d = h.nextTransform;
@@ -1089,7 +1089,7 @@ const Le = (t) => {
       y: l
     };
   };
-}, Re = (t) => (e) => t.reduce(
+}, Be = (t) => (e) => t.reduce(
   (o, i) => i({
     prevTransform: e.prevTransform,
     nextTransform: o,
@@ -1097,40 +1097,40 @@ const Le = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ee = (t) => {
+), te = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return Ve({
+      return Ie({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Le({
+      return Re({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Ie = (t) => {
-  var y, E, p, b, T, P, M, L, Z, J, K, Q;
+}, Ve = (t) => {
+  var y, p, E, b, T, P, M, L, J, K, Q, _;
   const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
   let s;
-  i !== void 0 ? Array.isArray(i) ? s = Re(
+  i !== void 0 ? Array.isArray(i) ? s = Be(
     i.map(
-      (m) => ee(m)
+      (D) => te(D)
     )
-  ) : s = ee(i) : s = (m) => m.nextTransform;
-  const h = ((E = t == null ? void 0 : t.shift) == null ? void 0 : E.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
+  ) : s = te(i) : s = (D) => D.nextTransform;
+  const h = ((p = t == null ? void 0 : t.shift) == null ? void 0 : p.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), d = ((b = t == null ? void 0 : t.events) == null ? void 0 : b.onTransformChange) ?? (() => {
-  }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (m) => m.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, w = l !== void 0 ? l : (m) => m.button === 0, v = (M = t == null ? void 0 : t.scale) == null ? void 0 : M.mouseWheelEventVerifier, A = v !== void 0 ? v : () => !0;
+  }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (D) => D.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, w = l !== void 0 ? l : (D) => D.button === 0, v = (M = t == null ? void 0 : t.scale) == null ? void 0 : M.mouseWheelEventVerifier, A = v !== void 0 ? v : () => !0;
   return {
     wheelSensitivity: o,
     onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onTransformFinished) ?? (() => {
+    onTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: n,
     onTransformChange: d,
@@ -1139,21 +1139,21 @@ const Le = (t) => {
     mouseDownEventVerifier: a,
     mouseUpEventVerifier: w,
     mouseWheelEventVerifier: A,
-    scaleWheelFinishTimeout: ((J = t == null ? void 0 : t.scale) == null ? void 0 : J.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((K = t == null ? void 0 : t.scale) == null ? void 0 : K.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Be = (t, e, o) => ({
+}, Ue = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), Ue = (t, e, o, i) => ({
+}), Ce = (t, e, o, i) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
   y: t.scale * (1 - e) * i + t.y
-}), R = (t) => {
+}), I = (t) => {
   const e = [], o = t.touches.length;
   for (let d = 0; d < o; d++)
     e.push([t.touches[d].clientX, t.touches[d].clientY]);
@@ -1182,14 +1182,14 @@ class U {
       this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("wheel", this.preventWheelScaleListener), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     r(this, "onMouseDown", (e) => {
-      this.element === null || !this.config.mouseDownEventVerifier(e) || (I(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.config.mouseDownEventVerifier(e) || (B(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
     r(this, "onWindowMouseMove", (e) => {
-      const o = D(
+      const o = m(
         this.window,
         this.element,
         e.clientX,
@@ -1215,10 +1215,10 @@ class U {
     });
     r(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = R(e);
+        this.prevTouches = I(e);
         return;
       }
-      this.prevTouches = R(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -1227,9 +1227,9 @@ class U {
       }), this.startRegisteredTransform();
     });
     r(this, "onWindowTouchMove", (e) => {
-      const o = R(e);
+      const o = I(e);
       if (!o.touches.every(
-        (s) => D(this.window, this.element, s[0], s[1])
+        (s) => m(this.window, this.element, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1244,7 +1244,7 @@ class U {
       this.prevTouches = o;
     });
     r(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = R(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
     });
     r(this, "observer", new ResizeObserver(() => {
       const e = this.viewport.getViewportMatrix(), { width: o, height: i } = this.element.getBoundingClientRect(), s = this.config.transformPreprocessor({
@@ -1261,7 +1261,7 @@ class U {
     });
     this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Ie(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Ve(s), 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
@@ -1278,7 +1278,7 @@ class U {
     );
   }
   moveViewport(e, o) {
-    const i = this.viewport.getViewportMatrix(), s = Be(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+    const i = this.viewport.getViewportMatrix(), s = Ue(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
@@ -1287,7 +1287,7 @@ class U {
     this.performTransform(d);
   }
   scaleViewport(e, o, i) {
-    const s = this.canvas.viewport.getViewportMatrix(), h = Ue(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), h = Ce(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: n,
@@ -1296,7 +1296,7 @@ class U {
     this.performTransform(c);
   }
   stopMouseDrag() {
-    I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1349,15 +1349,15 @@ class X {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     r(this, "userTransformInProgress", !1);
-    var A, y, E, p, b;
+    var A, y, p, E, b;
     this.canvas = e, this.element = o, this.window = i, this.trigger = h, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((T) => {
       const P = T[0];
       this.viewportWidth = P.contentRect.width, this.viewportHeight = P.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
     const d = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onResizeTransformStarted) ?? (() => {
     }), c = ((y = s == null ? void 0 : s.events) == null ? void 0 : y.onResizeTransformFinished) ?? (() => {
-    }), a = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onTransformChange) ?? (() => {
-    }), l = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
+    }), a = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onTransformChange) ?? (() => {
+    }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
     }), w = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
     }), v = {
       ...s,
@@ -1413,29 +1413,29 @@ class X {
     this.trigger.emit({ x: i, y: s, width: h, height: n });
   }
 }
-const Ce = () => {
+const We = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.position = "absolute", t.style.inset = "0", t;
-}, We = () => {
+}, $e = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return t.setAttribute("fill", "url(#pattern)"), t;
-}, $e = () => {
+}, Fe = () => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return t.setAttribute("id", "pattern"), t;
-}, Fe = (t, e) => {
+}, Oe = (t, e) => {
   const o = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return o.setAttribute("cx", "0"), o.setAttribute("cy", "0"), o.setAttribute("r", `${t}`), o.setAttribute("fill", `${e}`), o;
-}, Oe = (t) => t instanceof SVGElement ? t : Fe(
+}, ke = (t) => t instanceof SVGElement ? t : Oe(
   (t == null ? void 0 : t.radius) ?? 1.5,
   (t == null ? void 0 : t.color) ?? "#d8d8d8"
-), ke = (t) => {
-  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = Oe(t.renderer ?? {});
+), ze = (t) => {
+  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = ke(t.renderer ?? {});
   return {
     tileWidth: o,
     tileHeight: i,
@@ -1445,9 +1445,9 @@ const Ce = () => {
 };
 class Y {
   constructor(e, o, i) {
-    r(this, "svg", Ce());
-    r(this, "patternRenderingRectangle", We());
-    r(this, "pattern", $e());
+    r(this, "svg", We());
+    r(this, "patternRenderingRectangle", $e());
+    r(this, "pattern", Fe());
     r(this, "patternContent");
     r(this, "tileWidth");
     r(this, "tileHeight");
@@ -1471,7 +1471,7 @@ class Y {
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     this.canvas = e, this.host = i;
-    const s = ke(o);
+    const s = ze(o);
     this.tileWidth = s.tileWidth, this.tileHeight = s.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = s.renderer, this.maxViewportScale = s.maxViewportScale;
     const h = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", h), this.pattern.appendChild(this.patternContent);
@@ -1486,7 +1486,7 @@ class Y {
     o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const ze = (t) => {
+const Xe = (t) => {
   var d, c, a;
   const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
   }, h = () => {
@@ -1528,7 +1528,7 @@ class H {
       }));
     });
     r(this, "onWindowMouseMove", (e) => {
-      if (!D(
+      if (!m(
         this.window,
         this.overlayLayer,
         e.clientX,
@@ -1558,7 +1558,7 @@ class H {
     });
     r(this, "onWindowTouchMove", (e) => {
       const o = e.touches[0];
-      if (!D(
+      if (!m(
         this.window,
         this.overlayLayer,
         o.clientX,
@@ -1587,13 +1587,13 @@ class H {
     r(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = ze(n);
-    const d = new ce(), c = new ne(
+    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = Xe(n);
+    const d = new ae(), c = new he(
       d,
       this.viewportStore,
       this.overlayLayer
     );
-    this.overlayCanvas = new de(
+    this.overlayCanvas = new ce(
       this.overlayLayer,
       d,
       this.viewportStore,
@@ -1630,8 +1630,8 @@ class H {
       portDirection: this.config.dragPortDirection
     };
     this.isDirect = h === "direct";
-    const E = this.isDirect ? A : y, p = this.isDirect ? y : A;
-    this.createOverlayGraph(E, p);
+    const p = this.isDirect ? A : y, E = this.isDirect ? y : A;
+    this.createOverlayGraph(p, E);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1716,34 +1716,34 @@ class H {
     return this.config.connectionTypeResolver(o) !== null;
   }
 }
-const Xe = () => {
+const Ye = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
 }, $ = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.inset = "0", t;
 };
-class Ye {
+class He {
   constructor(e) {
     r(this, "background", $());
     r(this, "main", $());
     r(this, "overlay", $());
-    r(this, "host", Xe());
+    r(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 = (t, e) => ({
+const je = (t, e) => ({
   x: t / 2,
   y: e / 2
-}), F = (t) => () => t, te = F(0), je = () => {
+}), F = (t) => () => t, oe = F(0), Ge = () => {
   let t = 0;
   return () => t++;
-}, Ge = (t, e) => {
-  let o = te, i = te;
-  const s = je();
+}, Ze = (t, e) => {
+  let o = oe, i = oe;
+  const s = Ge();
   return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = F(t)), typeof e == "number" && (i = F(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
     nodesPriorityFn: o,
     edgesPriorityFn: i
@@ -1754,67 +1754,67 @@ const He = (t, e) => ({
 }), g = {
   x: 0,
   y: 0
-}, Ze = (t) => {
+}, Je = (t) => {
   const e = f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), o = f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ), i = {
-    x: e.x + t.fromVector.x * t.curvature,
-    y: e.y + t.fromVector.y * t.curvature
+    x: e.x + t.sourceDirection.x * t.curvature,
+    y: e.y + t.sourceDirection.y * t.curvature
   }, s = {
-    x: o.x - t.toVector.x * t.curvature,
-    y: o.y - t.toVector.y * t.curvature
+    x: o.x - t.targetDirection.x * t.curvature,
+    y: o.y - t.targetDirection.y * t.curvature
   }, h = `M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${g.x} ${g.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
   return `${n}${h}${d}`;
-}, Je = (t) => {
+}, Ke = (t) => {
   const e = t.hasSourceArrow ? f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = f(
     { x: i, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), a = {
     x: c.x + n,
     y: c.y + d
   }, l = f(
     { x: t.to.x - i, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ), w = {
     x: l.x + n,
     y: l.y + d
   }, v = { x: (a.x + w.x) / 2, y: (a.y + w.y) / 2 }, A = {
-    x: c.x + t.curvature * t.fromVector.x,
-    y: c.y + t.curvature * t.fromVector.y
+    x: c.x + t.curvature * t.sourceDirection.x,
+    y: c.y + t.curvature * t.sourceDirection.y
   }, y = {
-    x: l.x - t.curvature * t.toVector.x,
-    y: l.y - t.curvature * t.toVector.y
-  }, E = {
+    x: l.x - t.curvature * t.targetDirection.x,
+    y: l.y - t.curvature * t.targetDirection.y
+  }, p = {
     x: c.x + n,
     y: c.y + d
-  }, p = {
+  }, E = {
     x: l.x + n,
     y: l.y + d
   };
   return [
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
-    `C ${A.x} ${A.y} ${E.x} ${E.y} ${v.x} ${v.y}`,
-    `C ${p.x} ${p.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
+    `C ${A.x} ${A.y} ${p.x} ${p.y} ${v.x} ${v.y}`,
+    `C ${E.x} ${E.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, V = (t, e) => {
+}, R = (t, e) => {
   const o = [];
   if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
     const i = t.length - 1;
@@ -1826,29 +1826,29 @@ const He = (t, e) => ({
         const L = t[c + 1];
         s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
       }
-      const p = n !== 0 ? Math.min((y ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = y ? { x: d.x + s * p, y: d.y + h * p } : d, P = w !== 0 ? Math.min((y ? e : 0) / w, c > 1 ? 0.5 : 1) : 0, M = y ? { x: d.x + a * P, y: d.y + l * P } : d;
+      const E = n !== 0 ? Math.min((y ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = y ? { x: d.x + s * E, y: d.y + h * E } : d, P = w !== 0 ? Math.min((y ? e : 0) / w, c > 1 ? 0.5 : 1) : 0, M = y ? { x: d.x + a * P, y: d.y + l * P } : d;
       c > 0 && o.push(`L ${M.x} ${M.y}`), y && o.push(
         `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
       );
     });
   }
   return o.join(" ");
-}, Ke = (t) => {
+}, Qe = (t) => {
   const e = t.hasSourceArrow ? f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
     { x: s, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), n = f(
     { x: t.to.x - s, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
     x: t.flipX > 0 ? d : -i,
@@ -1857,67 +1857,67 @@ const He = (t, e) => ({
     x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
     y: n.y
   }, v = { x: w.x, y: c };
-  return V(
+  return R(
     [e, h, a, l, v, w, n, o],
     t.roundness
   );
 }, j = (t) => {
   const e = t.hasSourceArrow ? f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
     { x: i, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = f(
     { x: t.to.x - i, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ), w = { x: l.x + d, y: l.y + c };
-  return V(
+  return R(
     [e, s, a, w, l, o],
     t.roundness
   );
-}, Qe = (t) => {
+}, _e = (t) => {
   const e = t.hasSourceArrow ? f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
     { x: i, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), h = f(
     { x: t.to.x - i, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   );
-  return V([e, s, h, o], t.roundness);
-}, _e = (t) => {
+  return R([e, s, h, o], t.roundness);
+}, qe = (t) => {
   const e = t.hasSourceArrow ? f(
     { x: t.arrowLength, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
     { x: s, y: g.y },
-    t.fromVector,
+    t.sourceDirection,
     g
   ), n = f(
     { x: t.to.x - s, y: t.to.y },
-    t.toVector,
+    t.targetDirection,
     t.to
   ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
     x: h.x,
@@ -1926,7 +1926,7 @@ const He = (t, e) => ({
     x: n.x,
     y: t.flipY > 0 ? t.to.y - d : t.to.y + i
   }, v = { x: c, y: w.y };
-  return V(
+  return R(
     [e, h, a, l, v, w, n, o],
     t.roundness
   );
@@ -1941,16 +1941,16 @@ const He = (t, e) => ({
     { x: i, y: g.y },
     { x: t.arrowLength, y: g.y }
   ].map(
-    (c) => f(c, t.fromVector, g)
+    (c) => f(c, t.sourceDirection, g)
   ), d = `M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${V(n, t.roundness)}`;
-}, qe = (t) => {
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${R(n, t.roundness)}`;
+}, et = (t) => {
   const e = t.smallRadius, o = t.radius, i = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + i * (1 - o / s), n = e * o / s, c = [
     { x: t.arrowLength, y: g.y },
     { x: h, y: n },
     { x: h, y: -n }
   ].map(
-    (w) => f(w, t.fromVector, g)
+    (w) => f(w, t.sourceDirection, g)
   ), a = [
     `M ${c[0].x} ${c[0].y}`,
     `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
@@ -1958,8 +1958,45 @@ const He = (t, e) => ({
     `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
   ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
   return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
-}, ae = (t, e) => {
+}, le = (t, e) => {
   t.style.transform = `translate(${e.x}px, ${e.y}px)`, t.style.width = `${Math.max(e.width, 1)}px`, t.style.height = `${Math.max(e.height, 1)}px`;
+}, Z = Object.freeze({
+  edgeColor: "--edge-color"
+}), ue = (t) => {
+  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, t), e;
+}, V = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return t.setAttribute("fill", `var(${Z.edgeColor})`), t;
+}, ge = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return t.style.transformOrigin = "50% 50%", t;
+}, we = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e;
+}, fe = (t, e) => {
+  const o = {
+    x: t.x + t.width / 2,
+    y: t.y + t.height / 2
+  }, i = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
+  return {
+    x: s,
+    y: h,
+    width: n,
+    height: d,
+    flipX: c,
+    flipY: a
+  };
+}, O = (t, e, o, i) => {
+  const h = [
+    g,
+    { x: o, y: i },
+    { x: o, y: -i }
+  ].map((a) => f(a, t, g)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
+  return `${n} ${d} ${c} Z`;
 }, u = Object.freeze({
   color: "#777777",
   width: 1,
@@ -1978,62 +2015,27 @@ const He = (t, e) => ({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), O = (t, e, o, i) => {
-  const h = [
-    g,
-    { x: o, y: i },
-    { x: o, y: -i }
-  ].map((a) => f(a, t, g)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
-  return `${n} ${d} ${c} Z`;
-}, B = (t) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("fill", t), e;
-}, le = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return t.style.transformOrigin = "50% 50%", t;
-}, ue = (t, e) => {
-  const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
-}, ge = (t, e) => {
-  const o = {
-    x: t.x + t.width / 2,
-    y: t.y + t.height / 2
-  }, i = {
-    x: e.x + e.width / 2,
-    y: e.y + e.height / 2
-  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
-  return {
-    x: s,
-    y: h,
-    width: n,
-    height: d,
-    flipX: c,
-    flipY: a
-  };
-}, we = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
-}, oe = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
+}), re = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
 class C {
   constructor(e) {
-    r(this, "svg", we());
-    r(this, "group", le());
+    r(this, "svg");
+    r(this, "group", ge());
     r(this, "line");
     r(this, "sourceArrow", null);
     r(this, "targetArrow", null);
-    this.params = e, this.svg.appendChild(this.group), this.line = ue(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(e.color), this.group.appendChild(this.targetArrow));
+    this.params = e, this.svg = ue(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: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = fe(
       e.from,
       e.to
     );
-    ae(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
-    const c = oe(
+    le(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
+    const c = re(
       e.from.direction,
       n,
       d
-    ), a = oe(
+    ), a = re(
       e.to.direction,
       n,
       d
@@ -2051,26 +2053,26 @@ class C {
       d
     );
     if (this.line.setAttribute("d", y), this.sourceArrow) {
-      const E = O(
+      const p = O(
         c,
         g,
         this.params.arrowLength,
         this.params.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", E);
+      this.sourceArrow.setAttribute("d", p);
     }
     if (this.targetArrow) {
-      const E = O(
+      const p = O(
         w,
         l,
         v,
         this.params.arrowWidth
       );
-      this.targetArrow.setAttribute("d", E);
+      this.targetArrow.setAttribute("d", p);
     }
   }
 }
-class et {
+class tt {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2087,18 +2089,18 @@ class et {
     r(this, "hasSourceArrow");
     r(this, "hasTargetArrow");
     r(this, "lineShape");
-    r(this, "createCyclePath", (e) => qe({
-      fromVector: e,
+    r(this, "createCyclePath", (e) => et({
+      sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Je({
+    r(this, "createDetourPath", (e, o, i, s, h) => Ke({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipX: s,
       flipY: h,
       arrowLength: this.arrowLength,
@@ -2108,10 +2110,10 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => Ze({
+    r(this, "createLinePath", (e, o, i) => Je({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
@@ -2133,7 +2135,7 @@ class et {
     this.lineShape.render(e);
   }
 }
-class tt {
+class ot {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2151,7 +2153,7 @@ class tt {
     r(this, "hasTargetArrow");
     r(this, "lineShape");
     r(this, "createCyclePath", (e) => G({
-      fromVector: e,
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -2161,8 +2163,8 @@ class tt {
     }));
     r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipX: s,
       flipY: h,
       arrowLength: this.arrowLength,
@@ -2173,10 +2175,10 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s) => Ke({
+    r(this, "createLinePath", (e, o, i, s) => Qe({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipX: s,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -2206,7 +2208,7 @@ class tt {
     this.lineShape.render(e);
   }
 }
-class ot {
+class rt {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2224,7 +2226,7 @@ class ot {
     r(this, "hasTargetArrow");
     r(this, "lineShape");
     r(this, "createCyclePath", (e) => G({
-      fromVector: e,
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -2234,8 +2236,8 @@ class ot {
     }));
     r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipX: s,
       flipY: h,
       arrowLength: this.arrowLength,
@@ -2246,10 +2248,10 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => Qe({
+    r(this, "createLinePath", (e, o, i) => _e({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2278,7 +2280,7 @@ class ot {
     this.lineShape.render(e);
   }
 }
-class rt {
+class it {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2296,7 +2298,7 @@ class rt {
     r(this, "hasTargetArrow");
     r(this, "lineShape");
     r(this, "createCyclePath", (e) => G({
-      fromVector: e,
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -2306,8 +2308,8 @@ class rt {
     }));
     r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipX: s,
       flipY: h,
       arrowLength: this.arrowLength,
@@ -2318,10 +2320,10 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s, h) => _e({
+    r(this, "createLinePath", (e, o, i, s, h) => qe({
       to: i,
-      fromVector: e,
-      toVector: o,
+      sourceDirection: e,
+      targetDirection: o,
       flipY: h,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -2351,7 +2353,7 @@ class rt {
     this.lineShape.render(e);
   }
 }
-const re = (t) => {
+const ie = (t) => {
   if (t.diagonalDistance === 0)
     return "";
   const e = t.offset / t.diagonalDistance, o = t.flip * t.to.x, i = t.flip * t.to.y, s = {
@@ -2367,14 +2369,14 @@ const re = (t) => {
     t.arrowLength,
     t.arrowWidth
   );
-}, ie = (t) => {
+}, se = (t) => {
   const e = t.hasArrow ? t.arrowLength : 0, o = t.offset + e, i = t.flip * o / t.diagonalDistance;
   return {
     x: t.to.x * i + t.shift.x,
     y: t.to.y * i + t.shift.y
   };
-}, it = (t) => {
-  const e = ie({
+}, st = (t) => {
+  const e = se({
     diagonalDistance: t.diagonalDistance,
     to: t.to,
     offset: t.sourceOffset,
@@ -2382,7 +2384,7 @@ const re = (t) => {
     flip: 1,
     shift: g,
     arrowLength: t.arrowLength
-  }), o = ie({
+  }), o = se({
     diagonalDistance: t.diagonalDistance,
     to: t.to,
     offset: t.targetOffset,
@@ -2393,10 +2395,10 @@ const re = (t) => {
   });
   return `M ${e.x} ${e.y} L ${o.x} ${o.y}`;
 };
-class st {
+class nt {
   constructor(e) {
-    r(this, "svg", we());
-    r(this, "group", le());
+    r(this, "svg");
+    r(this, "group", ge());
     r(this, "line");
     r(this, "sourceArrow", null);
     r(this, "targetArrow", null);
@@ -2406,17 +2408,17 @@ class st {
     r(this, "arrowWidth");
     r(this, "sourceOffset");
     r(this, "targetOffset");
-    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.appendChild(this.group), this.line = ue(this.color, this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(this.color), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(this.color), this.group.appendChild(this.targetArrow));
+    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 = ue(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: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = fe(
       e.from,
       e.to
     );
-    ae(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
+    le(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
     const c = Math.sqrt(s * s + h * h), a = { x: s, y: h };
     if (c > 0) {
-      const l = it({
+      const l = st({
         diagonalDistance: c,
         to: a,
         sourceOffset: this.sourceOffset,
@@ -2429,7 +2431,7 @@ class st {
     } else
       this.line.setAttribute("d", "");
     if (this.sourceArrow) {
-      const l = re({
+      const l = ie({
         diagonalDistance: c,
         to: a,
         offset: this.sourceOffset,
@@ -2441,7 +2443,7 @@ class st {
       this.sourceArrow.setAttribute("d", l);
     }
     if (this.targetArrow) {
-      const l = re({
+      const l = ie({
         diagonalDistance: c,
         to: a,
         offset: this.targetOffset,
@@ -2454,39 +2456,39 @@ class st {
     }
   }
 }
-const nt = () => {
+const ht = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
-}, ht = (t) => {
+}, dt = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, se = (t) => {
+}, ne = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class dt extends Error {
+class ct extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class fe {
+class ve {
   constructor(e, o) {
     r(this, "svg");
     r(this, "group");
     r(this, "line");
     r(this, "sourceArrow");
     r(this, "targetArrow");
-    r(this, "handle", nt());
+    r(this, "handle", ht());
     r(this, "interactiveLine");
     r(this, "interactiveSourceArrow", null);
     r(this, "interactiveTargetArrow", null);
-    if (this.structuredEdge = e, e instanceof fe)
-      throw new dt(
+    if (this.structuredEdge = e, e instanceof ve)
+      throw new ct(
         "interactive edge can be configured only once"
       );
     this.svg = this.structuredEdge.svg, this.group = this.structuredEdge.group, this.line = this.structuredEdge.line, this.sourceArrow = this.structuredEdge.sourceArrow, this.targetArrow = this.structuredEdge.targetArrow;
     const i = (o == null ? void 0 : o.width) ?? u.interactiveWidth;
-    this.interactiveLine = ht(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = se(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = se(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
+    this.interactiveLine = dt(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ne(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ne(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
   }
   render(e) {
     this.structuredEdge.render(e);
@@ -2501,12 +2503,12 @@ class fe {
     }
   }
 }
-const ct = (t) => {
+const at = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new ot({
+      return () => new rt({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2520,7 +2522,7 @@ const ct = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new tt({
+      return () => new ot({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2534,7 +2536,7 @@ const ct = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new rt({
+      return () => new it({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2548,7 +2550,7 @@ const ct = (t) => {
         detourDirection: t.detourDirection
       });
     case "direct":
-      return () => new st({
+      return () => new nt({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2559,7 +2561,7 @@ const ct = (t) => {
         targetOffset: t.targetOffset
       });
     default:
-      return () => new et({
+      return () => new tt({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2573,27 +2575,27 @@ const ct = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, at = (t) => {
+}, lt = (t) => {
   var o, i, s, h, n;
-  const e = Ge(
+  const e = Ze(
     (o = t.nodes) == null ? void 0 : o.priority,
     (i = t.edges) == null ? void 0 : i.priority
   );
   return {
     nodes: {
-      centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? He,
+      centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? je,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((h = t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: ct(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: at(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class ut {
+class gt {
   constructor(e) {
     r(this, "element", null);
     r(this, "canvasDefaults", {});
@@ -2676,15 +2678,15 @@ class ut {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new he());
-    const o = new ce(), i = new me(), s = new Ye(this.element);
-    let h = new ne(
+    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new de());
+    const o = new ae(), i = new Ne(), s = new He(this.element);
+    let h = new he(
       o,
       i,
       s.main
     );
-    e !== void 0 && (h = new Se(h, o, e));
-    const n = at(this.canvasDefaults), d = new de(
+    e !== void 0 && (h = new be(h, o, e));
+    const n = lt(this.canvasDefaults), d = new ce(
       this.element,
       o,
       i,
@@ -2732,15 +2734,15 @@ class ut {
   }
 }
 export {
-  et as BezierEdgeShape,
-  ut as CanvasBuilder,
-  st as DirectEdgeShape,
-  he as EventSubject,
-  tt as HorizontalEdgeShape,
+  tt as BezierEdgeShape,
+  gt as CanvasBuilder,
+  nt as DirectEdgeShape,
+  de as EventSubject,
+  ot as HorizontalEdgeShape,
   S as HtmlGraphError,
-  dt as InteractiveEdgeError,
-  fe as InteractiveEdgeShape,
+  ct as InteractiveEdgeError,
+  ve as InteractiveEdgeShape,
   C as LineEdgeShape,
-  ot as StraightEdgeShape,
-  rt as VerticalEdgeShape
+  rt as StraightEdgeShape,
+  it as VerticalEdgeShape
 };