npm - @html-graph/html-graph - Versions diffs - 3.8.0 → 3.9.0 - Mend

@html-graph/html-graph 3.8.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/html-graph.js CHANGED Viewed

@@ -1,21 +1,22 @@
-var ae = Object.defineProperty;
-var le = (t, e, o) => e in t ? ae(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var r = (t, e, o) => le(t, typeof e != "symbol" ? e + "" : e, o);
-const ue = () => {
+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 = () => {
   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;
-}, ge = () => {
-  const t = document.createElement("div");
-  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
-}, we = () => {
+}, Ee = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-};
-class ie {
+}, pe = (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 {
   constructor(e, o, i) {
-    r(this, "host", we());
-    r(this, "container", ue());
-    r(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    r(this, "host", Ee());
+    r(this, "container", Ae());
     r(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     r(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -24,12 +25,12 @@ class ie {
     this.graphStore = e, this.viewportStore = o, this.element = i, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attachNode(e) {
-    const o = this.graphStore.getNode(e), i = ge();
-    i.appendChild(o.element), this.container.appendChild(i), this.nodeIdToWrapperElementMap.set(e, i), this.updateNodePosition(e), this.updateNodePriority(e), i.style.visibility = "visible";
+    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";
   }
   detachNode(e) {
-    const o = this.nodeIdToWrapperElementMap.get(e);
-    o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(e);
+    const o = this.graphStore.getNode(e);
+    this.container.removeChild(o.element);
   }
   attachEdge(e) {
     const o = this.graphStore.getEdge(e).shape.svg;
@@ -42,20 +43,20 @@ class ie {
   clear() {
     this.edgeIdToElementMap.forEach((e, o) => {
       this.detachEdge(o);
-    }), this.nodeIdToWrapperElementMap.forEach((e, o) => {
-      this.detachNode(o);
+    }), this.graphStore.getAllNodeIds().forEach((e) => {
+      this.detachNode(e);
     });
   }
   destroy() {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const o = this.nodeIdToWrapperElementMap.get(e), i = this.graphStore.getNode(e), { width: s, height: h } = i.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, d = i.centerFn(s, h), c = i.x - n * d.x, a = i.y - n * d.y;
-    o.style.transform = `translate(${c}px, ${a}px)`;
+    const o = this.graphStore.getNode(e), { width: i, height: s } = o.element.getBoundingClientRect(), h = this.viewportStore.getViewportMatrix().scale, n = o.centerFn(i, s), d = o.x - h * n.x, c = o.y - h * n.y;
+    o.element.style.transform = `translate(${d}px, ${c}px)`;
   }
   updateNodePriority(e) {
-    const o = this.graphStore.getNode(e), i = this.nodeIdToWrapperElementMap.get(e);
-    i.style.zIndex = `${o.priority}`;
+    const o = this.graphStore.getNode(e);
+    o.element.style.zIndex = `${o.priority}`;
   }
   updateEdgeShape(e) {
     const o = this.edgeIdToElementMap.get(e);
@@ -64,37 +65,42 @@ class ie {
     this.edgeIdToElementMap.set(e, i.shape.svg), this.container.appendChild(i.shape.svg);
   }
   renderEdge(e) {
-    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = h.left - d.left, l = h.top - d.top, g = n.left - d.left, y = n.top - d.top, p = {
-      x: c.scale * a + c.x,
-      y: c.scale * l + c.y
-    }, f = {
-      x: c.scale * g + c.x,
-      y: c.scale * y + c.y
-    }, A = {
-      x: p.x,
-      y: p.y,
-      width: h.width * c.scale,
-      height: h.height * c.scale,
-      direction: i.direction,
-      portId: o.from,
-      nodeId: i.nodeId
-    }, E = {
-      x: f.x,
-      y: f.y,
-      width: n.width * c.scale,
-      height: n.height * c.scale,
-      direction: s.direction,
-      portId: o.to,
-      nodeId: s.nodeId
-    };
-    o.shape.render({ from: A, to: E });
+    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = this.createEdgeRenderPort(
+      o.from,
+      i,
+      h,
+      d,
+      c
+    ), l = this.createEdgeRenderPort(
+      o.to,
+      s,
+      n,
+      d,
+      c
+    );
+    o.shape.render({ from: a, to: l });
   }
   updateEdgePriority(e) {
     const o = this.graphStore.getEdge(e);
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
+  createEdgeRenderPort(e, o, i, s, h) {
+    const n = {
+      x: i.left - s.left,
+      y: i.top - s.top
+    }, d = N(h, n);
+    return {
+      x: d.x,
+      y: d.y,
+      width: i.width * h.scale,
+      height: i.height * h.scale,
+      direction: o.direction,
+      portId: e,
+      nodeId: o.nodeId
+    };
+  }
 }
-class fe {
+class xe {
   constructor(e) {
     r(this, "xFrom", 1 / 0);
     r(this, "yFrom", 1 / 0);
@@ -114,7 +120,7 @@ class fe {
     return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class ve {
+class Se {
   constructor(e, o, i) {
     r(this, "attachedNodes", /* @__PURE__ */ new Set());
     r(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -126,8 +132,8 @@ class ve {
         const d = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
         d && !c ? o.add(n) : !d && c && i.add(n);
       }), this.graphStore.getAllEdgeIds().forEach((n) => {
-        const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
-        d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), i.delete(g))), d && !c ? s.add(n) : !d && c && h.add(n);
+        const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, w = this.graphStore.getPort(a.to).nodeId;
+        d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(w) || (o.add(w), i.delete(w))), d && !c ? s.add(n) : !d && c && h.add(n);
       }), h.forEach((n) => {
         this.handleDetachEdge(n);
       }), i.forEach((n) => {
@@ -138,7 +144,7 @@ class ve {
         this.handleAttachEdge(n);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new fe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -192,7 +198,7 @@ class ve {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class se {
+class he {
   constructor() {
     r(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -209,10 +215,10 @@ class se {
   }
 }
 const x = () => {
-  const t = new se();
+  const t = new he();
   return [t, t];
 };
-class ye {
+class be {
   constructor(e) {
     r(this, "onBeforeUpdated");
     r(this, "onAfterUpdated");
@@ -225,7 +231,7 @@ class ye {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class pe {
+class Te {
   constructor(e) {
     r(this, "onAfterNodeAdded");
     r(this, "onAfterNodeUpdated");
@@ -320,7 +326,7 @@ class pe {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class C {
+class W {
   constructor(e) {
     r(this, "counter", 0);
     this.checkExists = e;
@@ -342,7 +348,7 @@ class S extends Error {
     r(this, "name", "HtmlGraphError");
   }
 }
-class ne {
+class de {
   constructor(e, o, i, s, h) {
     /**
      * provides api for accessing model of rendered graph
@@ -352,13 +358,13 @@ class ne {
      * provides api for accessing viewport state
      */
     r(this, "viewport");
-    r(this, "nodeIdGenerator", new C(
+    r(this, "nodeIdGenerator", new W(
       (e) => this.graph.getNode(e) !== null
     ));
-    r(this, "portIdGenerator", new C(
+    r(this, "portIdGenerator", new W(
       (e) => this.graph.getPort(e) !== null
     ));
-    r(this, "edgeIdGenerator", new C(
+    r(this, "edgeIdGenerator", new W(
       (e) => this.graph.getEdge(e) !== null
     ));
     r(this, "onAfterNodeAdded", (e) => {
@@ -410,7 +416,7 @@ class ne {
      * 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 pe(this.graphStore), this.viewport = new ye(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 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
@@ -425,6 +431,10 @@ class ne {
     const o = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(o) !== null)
       throw new S("failed to add node with existing id");
+    if (this.graphStore.getElementNodeId(e.element) !== void 0)
+      throw new S(
+        "failed to add node with html element already in use by another node"
+      );
     if (this.graphStore.addNode({
       id: o,
       element: e.element,
@@ -561,7 +571,7 @@ class ne {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class he {
+class Pe {
   constructor() {
     r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -601,7 +611,7 @@ class he {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class de {
+class ce {
   constructor() {
     r(this, "nodes", /* @__PURE__ */ new Map());
     r(this, "ports", /* @__PURE__ */ new Map());
@@ -610,7 +620,7 @@ class de {
     r(this, "incomingEdges", /* @__PURE__ */ new Map());
     r(this, "outcomingEdges", /* @__PURE__ */ new Map());
     r(this, "cycleEdges", /* @__PURE__ */ new Map());
-    r(this, "elementPorts", new he());
+    r(this, "elementPorts", new Pe());
     r(this, "afterNodeAddedEmitter");
     r(this, "onAfterNodeAdded");
     r(this, "afterNodeUpdatedEmitter");
@@ -783,19 +793,19 @@ class de {
     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 K = (t) => ({
+const _ = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), Q = {
+}), q = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Ae {
+class me {
   constructor() {
-    r(this, "viewportMatrix", Q);
-    r(this, "contentMatrix", Q);
+    r(this, "viewportMatrix", q);
+    r(this, "contentMatrix", q);
     r(this, "afterUpdateEmitter");
     r(this, "onAfterUpdated");
     r(this, "beforeUpdateEmitter");
@@ -813,17 +823,17 @@ class Ae {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = K(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = _(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 = K(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = _(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class F {
+class k {
   constructor(e) {
     r(this, "elementToNodeId", /* @__PURE__ */ new Map());
     r(this, "nodesResizeObserver");
@@ -849,47 +859,44 @@ class F {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e) {
-    new F(e);
+    new k(e);
   }
   handleNodeResize(e) {
     const o = this.elementToNodeId.get(e);
     this.canvas.updateNode(o);
   }
 }
-const Ee = (t) => {
-  var g, y, p, f, A, E;
-  const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
-  }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), i = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (m) => m.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
+const Ne = (t) => {
+  var v, A, y, E, p, 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;
   return {
-    freezePriority: s,
-    dragCursor: n,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (m) => m.button === 0,
+    moveOnTop: s,
+    moveEdgesOnTop: h,
+    dragCursor: d,
+    mouseDownEventVerifier: a,
+    mouseUpEventVerifier: l !== void 0 ? l : (T) => T.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: o,
     onNodeDragFinished: i
   };
-}, xe = (t, e, o) => {
+}, De = (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;
-}, Se = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, M = (t, e, o, i) => xe(e, o, i) && Se(t, o, i), B = (t, e) => {
+}, 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) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
-}, N = (t, e) => ({
-  x: t.scale * e.x + t.x,
-  y: t.scale * e.y + t.y
-});
-class k {
+};
+class z {
   constructor(e, o, i, s) {
     r(this, "grabbedNodeId", null);
     r(this, "maxNodePriority", 0);
     r(this, "previousTouchCoordinates", null);
-    r(this, "nodeIds", /* @__PURE__ */ new Map());
     r(this, "graph");
     r(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
       const o = this.graph.getNode(e);
-      this.nodeIds.set(o.element, e), o.element.addEventListener("mousedown", this.onMouseDown, {
+      o.element.addEventListener("mousedown", this.onMouseDown, {
         passive: !0
       }), o.element.addEventListener("touchstart", this.onTouchStart, {
         passive: !0
@@ -900,26 +907,27 @@ class k {
     });
     r(this, "onBeforeNodeRemoved", (e) => {
       const o = this.graph.getNode(e);
-      this.nodeIds.delete(o.element), o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
+      o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
     });
     r(this, "onBeforeDestroy", () => {
       this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy), this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     r(this, "onBeforeClear", () => {
-      this.nodeIds.forEach((e, o) => {
-        o.removeEventListener("mousedown", this.onMouseDown), o.removeEventListener("touchstart", this.onTouchStart);
-      }), this.nodeIds.clear(), this.maxNodePriority = 0;
+      this.canvas.graph.getAllNodeIds().forEach((e) => {
+        const o = this.canvas.graph.getNode(e);
+        o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
+      }), this.maxNodePriority = 0;
     });
     r(this, "onMouseDown", (e) => {
       if (!this.config.mouseDownEventVerifier(e))
         return;
-      const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
+      const o = e.currentTarget, i = this.graph.getElementNodeId(o), s = this.graph.getNode(i);
       this.config.onBeforeNodeDrag({
         nodeId: i,
         element: s.element,
         x: s.x,
         y: s.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, B(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, I(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
@@ -932,7 +940,7 @@ class k {
         x: e.touches[0].clientX,
         y: e.touches[0].clientY
       };
-      const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
+      const o = e.currentTarget, i = this.canvas.graph.getElementNodeId(o), s = this.graph.getNode(i);
       this.config.onBeforeNodeDrag({
         nodeId: i,
         element: s.element,
@@ -947,7 +955,7 @@ class k {
       }));
     });
     r(this, "onWindowMouseMove", (e) => {
-      if (!M(
+      if (!D(
         this.window,
         this.element,
         e.clientX,
@@ -965,7 +973,7 @@ class k {
       if (e.touches.length !== 1)
         return;
       const o = e.touches[0];
-      if (!M(
+      if (!D(
         this.window,
         this.element,
         o.clientX,
@@ -986,10 +994,10 @@ class k {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
     r(this, "config");
-    this.canvas = e, this.element = o, this.window = i, this.config = Ee(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 = 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);
   }
   static configure(e, o, i, s) {
-    new k(e, o, i, s);
+    new z(e, o, i, s);
   }
   dragNode(e, o, i) {
     const s = this.graph.getNode(e);
@@ -1010,13 +1018,15 @@ class k {
     });
   }
   moveNodeOnTop(e) {
-    if (this.config.freezePriority)
-      return;
-    this.maxNodePriority += 2, this.canvas.updateNode(e, { priority: this.maxNodePriority });
-    const o = this.maxNodePriority - 1;
-    this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
-      this.canvas.updateEdge(s, { priority: o });
-    });
+    if (this.config.moveOnTop) {
+      if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
+        const o = this.maxNodePriority;
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
+          this.canvas.updateEdge(s, { priority: o });
+        });
+      }
+      this.canvas.updateNode(e, { priority: this.maxNodePriority });
+    }
   }
   cancelMouseDrag() {
     const e = this.graph.getNode(this.grabbedNodeId);
@@ -1025,7 +1035,7 @@ class k {
       element: e.element,
       x: e.x,
       y: e.y
-    }), this.grabbedNodeId = null, B(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1048,30 +1058,30 @@ class k {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
 }
-const me = (t) => {
+const Le = (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;
     n < e && n < h.prevTransform.x && (n = Math.min(h.prevTransform.x, e));
     const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
     n > a && n > h.prevTransform.x && (n = Math.max(h.prevTransform.x, a)), d < i && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, i));
-    const l = h.canvasHeight * h.prevTransform.scale, g = s - l;
-    return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: n, y: d };
+    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 };
   };
-}, be = (t) => {
+}, Ve = (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;
     let c = d.scale, a = d.x, l = d.y;
     if (d.scale > s && d.scale > n.scale) {
       c = Math.max(n.scale, s), a = n.x, l = n.y;
-      const g = (c - n.scale) / (d.scale - n.scale);
-      a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
+      const w = (c - n.scale) / (d.scale - n.scale);
+      a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
     }
     if (d.scale < i && d.scale < n.scale) {
       c = Math.min(n.scale, i), a = n.x, l = n.y;
-      const g = (c - n.scale) / (d.scale - n.scale);
-      a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
+      const w = (c - n.scale) / (d.scale - n.scale);
+      a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
     }
     return {
       scale: c,
@@ -1079,7 +1089,7 @@ const me = (t) => {
       y: l
     };
   };
-}, Te = (t) => (e) => t.reduce(
+}, Re = (t) => (e) => t.reduce(
   (o, i) => i({
     prevTransform: e.prevTransform,
     nextTransform: o,
@@ -1087,59 +1097,59 @@ const me = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), _ = (t) => {
+), ee = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return be({
+      return Ve({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return me({
+      return Le({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Pe = (t) => {
-  var f, A, E, m, T, b, D, L, j, G, Z, J;
-  const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
+}, Ie = (t) => {
+  var y, E, p, b, T, P, M, L, Z, 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 = Te(
+  i !== void 0 ? Array.isArray(i) ? s = Re(
     i.map(
-      (P) => _(P)
+      (m) => ee(m)
     )
-  ) : s = _(i) : s = (P) => P.nextTransform;
-  const h = ((A = t == null ? void 0 : t.shift) == null ? void 0 : A.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), d = ((m = t == null ? void 0 : t.events) == null ? void 0 : m.onTransformChange) ?? (() => {
-  }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (b = t == null ? void 0 : t.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, y = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, p = y !== void 0 ? y : () => !0;
+  ) : 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) ?? (() => {
+  }), 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;
   return {
     wheelSensitivity: o,
     onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((j = t == null ? void 0 : t.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
+    onTransformFinished: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: n,
     onTransformChange: d,
     transformPreprocessor: s,
     shiftCursor: h,
     mouseDownEventVerifier: a,
-    mouseUpEventVerifier: g,
-    mouseWheelEventVerifier: p,
-    scaleWheelFinishTimeout: ((G = t == null ? void 0 : t.scale) == null ? void 0 : G.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onResizeTransformStarted) ?? (() => {
+    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) ?? (() => {
     }),
-    onResizeTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Ne = (t, e, o) => ({
+}, Be = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), Me = (t, e, o, i) => ({
+}), Ue = (t, e, o, i) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
   y: t.scale * (1 - e) * i + t.y
@@ -1162,7 +1172,7 @@ const me = (t) => {
     touches: e
   };
 };
-class I {
+class U {
   constructor(e, o, i, s) {
     r(this, "viewport");
     r(this, "prevTouches", null);
@@ -1172,14 +1182,14 @@ class I {
       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) || (B(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.config.mouseDownEventVerifier(e) || (I(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 = M(
+      const o = D(
         this.window,
         this.element,
         e.clientX,
@@ -1219,7 +1229,7 @@ class I {
     r(this, "onWindowTouchMove", (e) => {
       const o = R(e);
       if (!o.touches.every(
-        (s) => M(this.window, this.element, s[0], s[1])
+        (s) => D(this.window, this.element, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1251,7 +1261,7 @@ class I {
     });
     this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Pe(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Ie(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
@@ -1260,7 +1270,7 @@ class I {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s) {
-    new I(
+    new U(
       e,
       o,
       i,
@@ -1268,7 +1278,7 @@ class I {
     );
   }
   moveViewport(e, o) {
-    const i = this.viewport.getViewportMatrix(), s = Ne(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+    const i = this.viewport.getViewportMatrix(), s = Be(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
@@ -1277,7 +1287,7 @@ class I {
     this.performTransform(d);
   }
   scaleViewport(e, o, i) {
-    const s = this.canvas.viewport.getViewportMatrix(), h = Me(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), h = Ue(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: n,
@@ -1286,7 +1296,7 @@ class I {
     this.performTransform(c);
   }
   stopMouseDrag() {
-    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1307,7 +1317,7 @@ class I {
     this.transformInProgress = !1, this.config.onTransformFinished();
   }
 }
-class z {
+class X {
   constructor(e, o, i, s, h, n) {
     r(this, "canvasResizeObserver");
     r(this, "nodeHorizontal");
@@ -1339,17 +1349,17 @@ class z {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     r(this, "userTransformInProgress", !1);
-    var p, f, A, E, m;
+    var A, y, E, p, 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 b = T[0];
-      this.viewportWidth = b.contentRect.width, this.viewportHeight = b.contentRect.height, this.scheduleLoadAreaAroundViewport();
+      const P = T[0];
+      this.viewportWidth = P.contentRect.width, this.viewportHeight = P.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
-    const d = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onResizeTransformStarted) ?? (() => {
-    }), c = ((f = s == null ? void 0 : s.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
-    }), a = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onTransformChange) ?? (() => {
-    }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-    }), g = ((m = s == null ? void 0 : s.events) == null ? void 0 : m.onTransformFinished) ?? (() => {
-    }), y = {
+    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) ?? (() => {
+    }), w = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
+    }), v = {
       ...s,
       events: {
         ...s == null ? void 0 : s.events,
@@ -1368,19 +1378,19 @@ class z {
           this.viewportMatrix = this.viewport.getViewportMatrix(), T.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
         },
         onTransformFinished: () => {
-          this.scheduleLoadAreaAroundViewport(), g();
+          this.scheduleLoadAreaAroundViewport(), w();
         }
       }
     };
-    I.configure(
+    U.configure(
       e,
       this.element,
       this.window,
-      y
+      v
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s, h, n) {
-    new z(
+    new X(
       e,
       o,
       i,
@@ -1403,29 +1413,29 @@ class z {
     this.trigger.emit({ x: i, y: s, width: h, height: n });
   }
 }
-const De = () => {
+const Ce = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.position = "absolute", t.style.inset = "0", t;
-}, Le = () => {
+}, We = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return t.setAttribute("fill", "url(#pattern)"), t;
-}, Ve = () => {
+}, $e = () => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return t.setAttribute("id", "pattern"), t;
-}, Re = (t, e) => {
+}, Fe = (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;
-}, Be = (t) => t instanceof SVGElement ? t : Re(
+}, Oe = (t) => t instanceof SVGElement ? t : Fe(
   (t == null ? void 0 : t.radius) ?? 1.5,
   (t == null ? void 0 : t.color) ?? "#d8d8d8"
-), Ie = (t) => {
-  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = Be(t.renderer ?? {});
+), 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 ?? {});
   return {
     tileWidth: o,
     tileHeight: i,
@@ -1433,11 +1443,11 @@ const De = () => {
     maxViewportScale: t.maxViewportScale ?? 10
   };
 };
-class O {
+class Y {
   constructor(e, o, i) {
-    r(this, "svg", De());
-    r(this, "patternRenderingRectangle", Le());
-    r(this, "pattern", Ve());
+    r(this, "svg", Ce());
+    r(this, "patternRenderingRectangle", We());
+    r(this, "pattern", $e());
     r(this, "patternContent");
     r(this, "tileWidth");
     r(this, "tileHeight");
@@ -1461,7 +1471,7 @@ class O {
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     this.canvas = e, this.host = i;
-    const s = Ie(o);
+    const s = ke(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);
@@ -1469,14 +1479,14 @@ class O {
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.host), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated(), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i) {
-    new O(e, o, i);
+    new Y(e, o, i);
   }
   updateVisibility() {
     const o = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
     o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const Ue = (t) => {
+const ze = (t) => {
   var d, c, a;
   const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
   }, h = () => {
@@ -1493,22 +1503,21 @@ const Ue = (t) => {
     dragPortDirection: t.dragPortDirection ?? void 0
   };
 };
-class X {
+class H {
   constructor(e, o, i, s, h, n) {
     r(this, "config");
     r(this, "overlayCanvas");
-    r(this, "ports", new he());
     r(this, "staticOverlayPortId", "static");
     r(this, "draggingOverlayPortId", "dragging");
     r(this, "staticPortId", null);
     r(this, "isDirect", !0);
     r(this, "onAfterPortMarked", (e) => {
       const o = this.canvas.graph.getPort(e);
-      this.ports.hasSingle(o.element) || this.hookPortEvents(o.element), this.ports.addRecord(o.element, e);
+      this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.hookPortEvents(o.element);
     });
     r(this, "onBeforePortUnmarked", (e) => {
       const o = this.canvas.graph.getPort(e);
-      this.ports.removeByMulti(e), this.ports.hasSingle(o.element) || this.unhookPortEvents(o.element);
+      this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.unhookPortEvents(o.element);
     });
     r(this, "onPortMouseDown", (e) => {
       const o = e.currentTarget;
@@ -1519,7 +1528,7 @@ class X {
       }));
     });
     r(this, "onWindowMouseMove", (e) => {
-      if (!M(
+      if (!D(
         this.window,
         this.overlayLayer,
         e.clientX,
@@ -1549,7 +1558,7 @@ class X {
     });
     r(this, "onWindowTouchMove", (e) => {
       const o = e.touches[0];
-      if (!M(
+      if (!D(
         this.window,
         this.overlayLayer,
         o.clientX,
@@ -1565,9 +1574,10 @@ class X {
       this.tryCreateConnection({ x: o.clientX, y: o.clientY }), this.stopTouchDrag();
     });
     r(this, "onBeforeClear", () => {
-      this.ports.forEachSingle((e) => {
-        this.unhookPortEvents(e);
-      }), this.ports.clear();
+      this.canvas.graph.getAllPortIds().forEach((e) => {
+        const o = this.canvas.graph.getPort(e);
+        this.unhookPortEvents(o.element);
+      });
     });
     r(this, "onBeforeDestroy", () => {
       this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
@@ -1577,13 +1587,13 @@ class X {
     r(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = Ue(n);
-    const d = new de(), c = new ie(
+    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = ze(n);
+    const d = new ce(), c = new ne(
       d,
       this.viewportStore,
       this.overlayLayer
     );
-    this.overlayCanvas = new ne(
+    this.overlayCanvas = new de(
       this.overlayLayer,
       d,
       this.viewportStore,
@@ -1592,7 +1602,7 @@ class X {
     ), this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s, h, n) {
-    new X(
+    new H(
       e,
       o,
       i,
@@ -1602,26 +1612,26 @@ class X {
     );
   }
   grabPort(e, o) {
-    const i = this.ports.getMultiBySingle(e)[0], s = this.canvas.graph.getPort(i);
+    const i = this.canvas.graph.getElementPortsIds(e)[0], s = this.canvas.graph.getPort(i);
     this.staticPortId = i;
-    const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), g = N(l, {
+    const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), w = N(l, {
       x: d - a.x,
       y: c - a.y
-    }), y = N(l, {
+    }), v = N(l, {
       x: o.x - a.x,
       y: o.y - a.y
-    }), p = {
+    }), A = {
       overlayId: this.staticOverlayPortId,
-      portCoords: g,
+      portCoords: w,
       portDirection: s.direction
-    }, f = {
+    }, y = {
       overlayId: this.draggingOverlayPortId,
-      portCoords: y,
+      portCoords: v,
       portDirection: this.config.dragPortDirection
     };
     this.isDirect = h === "direct";
-    const A = this.isDirect ? p : f, E = this.isDirect ? f : p;
-    this.createOverlayGraph(A, E);
+    const E = this.isDirect ? A : y, p = this.isDirect ? y : A;
+    this.createOverlayGraph(E, p);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1697,59 +1707,59 @@ class X {
   }
   findPortAtElement(e) {
     let o = e, i = null;
-    for (; o !== null && (i = this.ports.getMultiBySingle(o)[0] ?? null, i === null); )
+    for (; o !== null && (i = this.canvas.graph.getElementPortsIds(o)[0] ?? null, i === null); )
       o = o.parentElement;
     return i;
   }
   isPortConnectionAllowed(e) {
-    const o = this.ports.getMultiBySingle(e)[0];
+    const o = this.canvas.graph.getElementPortsIds(e)[0];
     return this.config.connectionTypeResolver(o) !== null;
   }
 }
-const Ce = () => {
+const Xe = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
-}, W = () => {
+}, $ = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.inset = "0", t;
 };
-class We {
+class Ye {
   constructor(e) {
-    r(this, "background", W());
-    r(this, "main", W());
-    r(this, "overlay", W());
-    r(this, "host", Ce());
+    r(this, "background", $());
+    r(this, "main", $());
+    r(this, "overlay", $());
+    r(this, "host", Xe());
     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 $e = (t, e) => ({
+const He = (t, e) => ({
   x: t / 2,
   y: e / 2
-}), $ = (t) => () => t, q = $(0), Fe = () => {
+}), F = (t) => () => t, te = F(0), je = () => {
   let t = 0;
   return () => t++;
-}, ke = (t, e) => {
-  let o = q, i = q;
-  const s = Fe();
-  return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = $(t)), typeof e == "number" && (i = $(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
+}, Ge = (t, e) => {
+  let o = te, i = te;
+  const s = je();
+  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
   };
-}, v = (t, e, o) => ({
+}, f = (t, e, o) => ({
   x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
   y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
-}), w = {
+}), g = {
   x: 0,
   y: 0
-}, ze = (t) => {
-  const e = v(
-    { x: t.arrowLength, y: w.y },
+}, Ze = (t) => {
+  const e = f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ), o = v(
+    g
+  ), o = f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
@@ -1759,49 +1769,49 @@ const $e = (t, e) => ({
   }, s = {
     x: o.x - t.toVector.x * t.curvature,
     y: o.y - t.toVector.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 ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
+  }, 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}`;
-}, Oe = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
+}, Je = (t) => {
+  const e = t.hasSourceArrow ? f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
+    g
+  ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     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 = v(
-    { x: i, y: w.y },
+  ) : 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,
-    w
+    g
   ), a = {
     x: c.x + n,
     y: c.y + d
-  }, l = v(
+  }, l = f(
     { x: t.to.x - i, y: t.to.y },
     t.toVector,
     t.to
-  ), g = {
+  ), w = {
     x: l.x + n,
     y: l.y + d
-  }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, p = {
+  }, 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
-  }, f = {
+  }, y = {
     x: l.x - t.curvature * t.toVector.x,
     y: l.y - t.curvature * t.toVector.y
-  }, A = {
+  }, E = {
     x: c.x + n,
     y: c.y + d
-  }, E = {
+  }, p = {
     x: l.x + n,
     y: l.y + d
   };
   return [
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
-    `C ${p.x} ${p.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
-    `C ${E.x} ${E.y} ${f.x} ${f.y} ${l.x} ${l.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}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
 }, V = (t, e) => {
@@ -1810,137 +1820,137 @@ const $e = (t, e) => ({
     const i = t.length - 1;
     let s = 0, h = 0, n = 0;
     t.forEach((d, c) => {
-      let a = 0, l = 0, g = 0;
-      const y = c > 0, p = c < i, f = y && p;
-      if (y && (a = -s, l = -h, g = n), p) {
+      let a = 0, l = 0, w = 0;
+      const v = c > 0, A = c < i, y = v && A;
+      if (v && (a = -s, l = -h, w = n), A) {
         const L = t[c + 1];
         s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
       }
-      const E = n !== 0 ? Math.min((f ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, m = f ? { x: d.x + s * E, y: d.y + h * E } : d, b = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = f ? { x: d.x + a * b, y: d.y + l * b } : d;
-      c > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
-        `C ${d.x} ${d.y} ${d.x} ${d.y} ${m.x} ${m.y}`
+      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;
+      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(" ");
-}, Xe = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
+}, Ke = (t) => {
+  const e = t.hasSourceArrow ? f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
+    g
+  ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
-    { x: s, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
+    { x: s, y: g.y },
     t.fromVector,
-    w
-  ), n = v(
+    g
+  ), n = f(
     { x: t.to.x - s, y: t.to.y },
     t.toVector,
     t.to
   ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
     x: t.flipX > 0 ? d : -i,
     y: h.y
-  }, l = { x: a.x, y: c }, g = {
+  }, l = { x: a.x, y: c }, w = {
     x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
     y: n.y
-  }, y = { x: g.x, y: c };
+  }, v = { x: w.x, y: c };
   return V(
-    [e, h, a, l, y, g, n, o],
+    [e, h, a, l, v, w, n, o],
     t.roundness
   );
-}, Y = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
+}, j = (t) => {
+  const e = t.hasSourceArrow ? f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
+    g
+  ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
-    { x: i, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
+    { x: i, y: g.y },
     t.fromVector,
-    w
-  ), 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 = v(
+    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.to
-  ), g = { x: l.x + d, y: l.y + c };
+  ), w = { x: l.x + d, y: l.y + c };
   return V(
-    [e, s, a, g, l, o],
+    [e, s, a, w, l, o],
     t.roundness
   );
-}, Ye = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
+}, Qe = (t) => {
+  const e = t.hasSourceArrow ? f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
+    g
+  ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
-    { x: i, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
+    { x: i, y: g.y },
     t.fromVector,
-    w
-  ), h = v(
+    g
+  ), h = f(
     { x: t.to.x - i, y: t.to.y },
     t.toVector,
     t.to
   );
   return V([e, s, h, o], t.roundness);
-}, He = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
+}, _e = (t) => {
+  const e = t.hasSourceArrow ? f(
+    { x: t.arrowLength, y: g.y },
     t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
+    g
+  ) : g, o = t.hasTargetArrow ? f(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
-    { x: s, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
+    { x: s, y: g.y },
     t.fromVector,
-    w
-  ), n = v(
+    g
+  ), n = f(
     { x: t.to.x - s, y: t.to.y },
     t.toVector,
     t.to
   ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
     x: h.x,
     y: t.flipY > 0 ? d : -i
-  }, l = { x: c, y: a.y }, g = {
+  }, l = { x: c, y: a.y }, w = {
     x: n.x,
     y: t.flipY > 0 ? t.to.y - d : t.to.y + i
-  }, y = { x: c, y: g.y };
+  }, v = { x: c, y: w.y };
   return V(
-    [e, h, a, l, y, g, n, o],
+    [e, h, a, l, v, w, n, o],
     t.roundness
   );
-}, H = (t) => {
+}, G = (t) => {
   const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
-    { x: t.arrowLength, y: w.y },
-    { x: i, y: w.y },
+    { x: t.arrowLength, y: g.y },
+    { x: i, y: g.y },
     { x: i, y: t.side },
     { x: s, y: t.side },
     { x: s, y: -t.side },
     { x: i, y: -t.side },
-    { x: i, y: w.y },
-    { x: t.arrowLength, y: w.y }
+    { x: i, y: g.y },
+    { x: t.arrowLength, y: g.y }
   ].map(
-    (c) => v(c, t.fromVector, w)
-  ), d = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
+    (c) => f(c, t.fromVector, g)
+  ), d = `M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;
   return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${V(n, t.roundness)}`;
-}, je = (t) => {
+}, qe = (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: w.y },
+    { x: t.arrowLength, y: g.y },
     { x: h, y: n },
     { x: h, y: -n }
   ].map(
-    (g) => v(g, t.fromVector, w)
+    (w) => f(w, t.fromVector, g)
   ), a = [
     `M ${c[0].x} ${c[0].y}`,
     `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
@@ -1948,6 +1958,8 @@ const $e = (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) => {
+  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`;
 }, u = Object.freeze({
   color: "#777777",
   width: 1,
@@ -1964,24 +1976,25 @@ const $e = (t, e) => ({
   detourDirectionVertical: 0,
   smallCycleRadius: 15,
   curvature: 90,
-  interactiveWidth: 10
-}), ee = (t, e, o, i) => {
+  interactiveWidth: 10,
+  preOffset: 0
+}), O = (t, e, o, i) => {
   const h = [
-    w,
+    g,
     { x: o, y: i },
     { x: o, y: -i }
-  ].map((a) => v(a, t, w)).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}`;
+  ].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`;
-}, te = (t) => {
+}, B = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", t), e;
-}, Ge = () => {
+}, le = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.transformOrigin = "50% 50%", t;
-}, Ze = (t, e) => {
+}, 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;
-}, Je = (t, e) => {
+}, ge = (t, e) => {
   const o = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
@@ -1997,25 +2010,25 @@ const $e = (t, e) => ({
     flipX: c,
     flipY: a
   };
-}, Ke = () => {
+}, 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) });
-class U {
+class C {
   constructor(e) {
-    r(this, "svg", Ke());
-    r(this, "group", Ge());
+    r(this, "svg", we());
+    r(this, "group", le());
     r(this, "line");
     r(this, "sourceArrow", null);
     r(this, "targetArrow", null);
-    this.params = e, this.svg.appendChild(this.group), this.line = Ze(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = te(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = te(e.color), this.group.appendChild(this.targetArrow));
+    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));
   }
   render(e) {
-    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = Je(
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${i}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    ae(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
     const c = oe(
       e.from.direction,
       n,
@@ -2028,36 +2041,36 @@ class U {
       x: s,
       y: h
     };
-    let g = a, y = -this.params.arrowLength, p;
-    e.from.portId === e.to.portId ? (p = this.params.createCyclePath, g = c, y = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? p = this.params.createDetourPath : p = this.params.createLinePath;
-    const f = p(
+    let w = a, v = -this.params.arrowLength, A;
+    e.from.portId === e.to.portId ? (A = this.params.createCyclePath, w = c, v = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? A = this.params.createDetourPath : A = this.params.createLinePath;
+    const y = A(
       c,
       a,
       l,
       n,
       d
     );
-    if (this.line.setAttribute("d", f), this.sourceArrow) {
-      const A = ee(
+    if (this.line.setAttribute("d", y), this.sourceArrow) {
+      const E = O(
         c,
-        w,
+        g,
         this.params.arrowLength,
         this.params.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", A);
+      this.sourceArrow.setAttribute("d", E);
     }
     if (this.targetArrow) {
-      const A = ee(
-        g,
+      const E = O(
+        w,
         l,
-        y,
+        v,
         this.params.arrowWidth
       );
-      this.targetArrow.setAttribute("d", A);
+      this.targetArrow.setAttribute("d", E);
     }
   }
 }
-class Qe {
+class et {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2074,7 +2087,7 @@ class Qe {
     r(this, "hasSourceArrow");
     r(this, "hasTargetArrow");
     r(this, "lineShape");
-    r(this, "createCyclePath", (e) => je({
+    r(this, "createCyclePath", (e) => qe({
       fromVector: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -2082,7 +2095,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Oe({
+    r(this, "createDetourPath", (e, o, i, s, h) => Je({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2095,7 +2108,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => ze({
+    r(this, "createLinePath", (e, o, i) => Ze({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2104,7 +2117,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.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.lineShape = new U({
+    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.lineShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2120,7 +2133,7 @@ class Qe {
     this.lineShape.render(e);
   }
 }
-class _e {
+class tt {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2137,7 +2150,7 @@ class _e {
     r(this, "hasSourceArrow");
     r(this, "hasTargetArrow");
     r(this, "lineShape");
-    r(this, "createCyclePath", (e) => H({
+    r(this, "createCyclePath", (e) => G({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2146,7 +2159,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+    r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2160,7 +2173,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s) => Xe({
+    r(this, "createLinePath", (e, o, i, s) => Ke({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2177,7 +2190,7 @@ class _e {
       o,
       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.lineShape = new U({
+    ), 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.lineShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2193,7 +2206,7 @@ class _e {
     this.lineShape.render(e);
   }
 }
-class qe {
+class ot {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2210,7 +2223,7 @@ class qe {
     r(this, "hasSourceArrow");
     r(this, "hasTargetArrow");
     r(this, "lineShape");
-    r(this, "createCyclePath", (e) => H({
+    r(this, "createCyclePath", (e) => G({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2219,7 +2232,7 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+    r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2233,7 +2246,7 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => Ye({
+    r(this, "createLinePath", (e, o, i) => Qe({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2249,7 +2262,7 @@ class qe {
       o,
       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.lineShape = new U({
+    ), 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.lineShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2265,7 +2278,7 @@ class qe {
     this.lineShape.render(e);
   }
 }
-class et {
+class rt {
   constructor(e) {
     r(this, "svg");
     r(this, "group");
@@ -2282,7 +2295,7 @@ class et {
     r(this, "hasSourceArrow");
     r(this, "hasTargetArrow");
     r(this, "lineShape");
-    r(this, "createCyclePath", (e) => H({
+    r(this, "createCyclePath", (e) => G({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2291,7 +2304,7 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+    r(this, "createDetourPath", (e, o, i, s, h) => j({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2305,7 +2318,7 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s, h) => He({
+    r(this, "createLinePath", (e, o, i, s, h) => _e({
       to: i,
       fromVector: e,
       toVector: o,
@@ -2322,7 +2335,7 @@ class et {
       o,
       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.lineShape = new U({
+    ), 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.lineShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2338,39 +2351,142 @@ class et {
     this.lineShape.render(e);
   }
 }
-const tt = () => {
+const re = (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 = {
+    x: o * e + t.shift.x,
+    y: i * e + t.shift.y
+  }, h = {
+    x: o / t.diagonalDistance,
+    y: i / t.diagonalDistance
+  };
+  return O(
+    h,
+    s,
+    t.arrowLength,
+    t.arrowWidth
+  );
+}, ie = (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({
+    diagonalDistance: t.diagonalDistance,
+    to: t.to,
+    offset: t.sourceOffset,
+    hasArrow: t.hasSourceArrow,
+    flip: 1,
+    shift: g,
+    arrowLength: t.arrowLength
+  }), o = ie({
+    diagonalDistance: t.diagonalDistance,
+    to: t.to,
+    offset: t.targetOffset,
+    hasArrow: t.hasTargetArrow,
+    flip: -1,
+    shift: t.to,
+    arrowLength: t.arrowLength
+  });
+  return `M ${e.x} ${e.y} L ${o.x} ${o.y}`;
+};
+class st {
+  constructor(e) {
+    r(this, "svg", we());
+    r(this, "group", le());
+    r(this, "line");
+    r(this, "sourceArrow", null);
+    r(this, "targetArrow", null);
+    r(this, "color");
+    r(this, "width");
+    r(this, "arrowLength");
+    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));
+  }
+  render(e) {
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = ge(
+      e.from,
+      e.to
+    );
+    ae(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({
+        diagonalDistance: c,
+        to: a,
+        sourceOffset: this.sourceOffset,
+        targetOffset: this.targetOffset,
+        hasSourceArrow: this.sourceArrow !== null,
+        hasTargetArrow: this.targetArrow !== null,
+        arrowLength: this.arrowLength
+      });
+      this.line.setAttribute("d", l);
+    } else
+      this.line.setAttribute("d", "");
+    if (this.sourceArrow) {
+      const l = re({
+        diagonalDistance: c,
+        to: a,
+        offset: this.sourceOffset,
+        flip: 1,
+        shift: g,
+        arrowWidth: this.arrowWidth,
+        arrowLength: this.arrowLength
+      });
+      this.sourceArrow.setAttribute("d", l);
+    }
+    if (this.targetArrow) {
+      const l = re({
+        diagonalDistance: c,
+        to: a,
+        offset: this.targetOffset,
+        flip: -1,
+        shift: a,
+        arrowWidth: this.arrowWidth,
+        arrowLength: this.arrowLength
+      });
+      this.targetArrow.setAttribute("d", l);
+    }
+  }
+}
+const nt = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
-}, ot = (t) => {
+}, ht = (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;
-}, re = (t) => {
+}, se = (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 rt extends Error {
+class dt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class ce {
+class fe {
   constructor(e, o) {
     r(this, "svg");
     r(this, "group");
     r(this, "line");
     r(this, "sourceArrow");
     r(this, "targetArrow");
-    r(this, "handle", tt());
+    r(this, "handle", nt());
     r(this, "interactiveLine");
     r(this, "interactiveSourceArrow", null);
     r(this, "interactiveTargetArrow", null);
-    if (this.structuredEdge = e, e instanceof ce)
-      throw new rt(
+    if (this.structuredEdge = e, e instanceof fe)
+      throw new dt(
         "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 = ot(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = re(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = re(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
+    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);
   }
   render(e) {
     this.structuredEdge.render(e);
@@ -2385,12 +2501,12 @@ class ce {
     }
   }
 }
-const it = (t) => {
+const ct = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new qe({
+      return () => new ot({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2404,7 +2520,7 @@ const it = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new _e({
+      return () => new tt({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2418,7 +2534,7 @@ const it = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new et({
+      return () => new rt({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2431,8 +2547,19 @@ const it = (t) => {
         detourDistance: t.detourDistance,
         detourDirection: t.detourDirection
       });
+    case "direct":
+      return () => new st({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        sourceOffset: t.sourceOffset,
+        targetOffset: t.targetOffset
+      });
     default:
-      return () => new Qe({
+      return () => new et({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -2446,27 +2573,27 @@ const it = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, st = (t) => {
+}, at = (t) => {
   var o, i, s, h, n;
-  const e = ke(
+  const e = Ge(
     (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) ?? $e,
+      centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? He,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((h = t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: it(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: ct(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class ht {
+class ut {
   constructor(e) {
     r(this, "element", null);
     r(this, "canvasDefaults", {});
@@ -2549,15 +2676,15 @@ class ht {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new se());
-    const o = new de(), i = new Ae(), s = new We(this.element);
-    let h = new ie(
+    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(
       o,
       i,
       s.main
     );
-    e !== void 0 && (h = new ve(h, o, e));
-    const n = st(this.canvasDefaults), d = new ne(
+    e !== void 0 && (h = new Se(h, o, e));
+    const n = at(this.canvasDefaults), d = new de(
       this.element,
       o,
       i,
@@ -2566,30 +2693,30 @@ class ht {
     ), c = () => {
       s.destroy(), d.onBeforeDestroy.unsubscribe(c);
     };
-    return d.onBeforeDestroy.subscribe(c), this.hasBackground && O.configure(
+    return d.onBeforeDestroy.subscribe(c), this.hasBackground && Y.configure(
       d,
       this.backgroundConfig,
       s.background
-    ), this.hasResizeReactiveNodes && F.configure(d), this.hasDraggableNode && k.configure(
+    ), this.hasResizeReactiveNodes && k.configure(d), this.hasDraggableNode && z.configure(
       d,
       s.main,
       this.window,
       this.dragConfig
-    ), this.hasUserConnectablePorts && X.configure(
+    ), this.hasUserConnectablePorts && H.configure(
       d,
       s.overlay,
       i,
       this.window,
       n,
       this.connectablePortsConfig
-    ), this.virtualScrollConfig !== void 0 ? z.configure(
+    ), this.virtualScrollConfig !== void 0 ? X.configure(
       d,
       s.main,
       this.window,
       this.transformConfig,
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && I.configure(
+    ) : this.hasTransformableViewport && U.configure(
       d,
       s.main,
       this.window,
@@ -2605,14 +2732,15 @@ class ht {
   }
 }
 export {
-  Qe as BezierEdgeShape,
-  ht as CanvasBuilder,
-  se as EventSubject,
-  _e as HorizontalEdgeShape,
+  et as BezierEdgeShape,
+  ut as CanvasBuilder,
+  st as DirectEdgeShape,
+  he as EventSubject,
+  tt as HorizontalEdgeShape,
   S as HtmlGraphError,
-  rt as InteractiveEdgeError,
-  ce as InteractiveEdgeShape,
-  U as LineEdgeShape,
-  qe as StraightEdgeShape,
-  et as VerticalEdgeShape
+  dt as InteractiveEdgeError,
+  fe as InteractiveEdgeShape,
+  C as LineEdgeShape,
+  ot as StraightEdgeShape,
+  rt as VerticalEdgeShape
 };