@html-graph/html-graph 3.13.0 → 3.15.0

package/dist/html-graph.js

@@ -1,22 +1,22 @@
-var Ae = Object.defineProperty;
-var Ee = (r, e, t) => e in r ? Ae(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Ee(r, typeof e != "symbol" ? e + "" : e, t);
-const xe = () => {
+var Ne = Object.defineProperty;
+var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
+const Le = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Se = () => {
+}, Re = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, be = (r) => {
+}, Ce = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 }, T = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class he {
+class ue {
   constructor(e, t, s) {
-    o(this, "host", Se());
-    o(this, "container", xe());
+    o(this, "host", Re());
+    o(this, "container", Le());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +26,7 @@ class he {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    be(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -51,8 +51,8 @@ class he {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = t.centerFn(s, i), a = t.x - n * h.x, d = t.y - n * h.y;
-    t.element.style.transform = `translate(${a}px, ${d}px)`;
+    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.centerFn(s, i), h = t.x - n * a.x, d = t.y - n * a.y;
+    t.element.style.transform = `translate(${h}px, ${d}px)`;
   }
   updateNodePriority(e) {
     const t = this.graphStore.getNode(e);
@@ -65,33 +65,33 @@ class he {
     this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
       t.from,
       s,
       n,
-      a,
+      h,
       d
-    ), g = this.createEdgeRenderPort(
+    ), l = this.createEdgeRenderPort(
       t.to,
       i,
-      h,
       a,
+      h,
       d
     );
-    t.shape.render({ from: c, to: g });
+    t.shape.render({ from: c, to: l });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
     t.shape.svg.style.zIndex = `${t.priority}`;
   }
   createEdgeRenderPort(e, t, s, i, n) {
-    const h = {
+    const a = {
       x: s.left - i.left,
       y: s.top - i.top
-    }, a = T(n, h);
+    }, h = T(n, a);
     return {
-      x: a.x,
-      y: a.y,
+      x: h.x,
+      y: h.y,
       width: s.width * n.scale,
       height: s.height * n.scale,
       direction: t.direction,
@@ -100,7 +100,7 @@ class he {
     };
   }
 }
-class Pe {
+class Ie {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -116,11 +116,11 @@ class Pe {
     return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), h = this.graphStore.getNode(i), a = Math.min(n.x, h.x), d = Math.max(n.x, h.x), c = Math.min(n.y, h.y), g = Math.max(n.y, h.y);
-    return a <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Te {
+class Ue {
   constructor(e, t, s) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -128,23 +128,23 @@ class Te {
     o(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
       const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
-      this.graphStore.getAllNodeIds().forEach((h) => {
-        const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
-        a && !d ? t.add(h) : !a && d && s.add(h);
-      }), this.graphStore.getAllEdgeIds().forEach((h) => {
-        const a = this.renderingBox.hasEdge(h), d = this.attachedEdges.has(h), c = this.graphStore.getEdge(h), g = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
-        a && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), a && !d ? i.add(h) : !a && d && n.add(h);
-      }), n.forEach((h) => {
-        this.handleDetachEdge(h);
-      }), s.forEach((h) => {
-        this.handleDetachNode(h);
-      }), t.forEach((h) => {
-        this.attachedNodes.has(h) || this.handleAttachNode(h);
-      }), i.forEach((h) => {
-        this.handleAttachEdge(h);
+      this.graphStore.getAllNodeIds().forEach((a) => {
+        const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
+        h && !d ? t.add(a) : !h && d && s.add(a);
+      }), this.graphStore.getAllEdgeIds().forEach((a) => {
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
+      }), n.forEach((a) => {
+        this.handleDetachEdge(a);
+      }), s.forEach((a) => {
+        this.handleDetachNode(a);
+      }), t.forEach((a) => {
+        this.attachedNodes.has(a) || this.handleAttachNode(a);
+      }), i.forEach((a) => {
+        this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Pe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -198,7 +198,7 @@ class Te {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class ae {
+class pe {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -214,11 +214,11 @@ class ae {
     });
   }
 }
-const y = () => {
-  const r = new ae();
+const A = () => {
+  const r = new pe();
   return [r, r];
 };
-class De {
+class Ve {
   constructor(e) {
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
@@ -231,7 +231,7 @@ class De {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Ne {
+class Be {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -261,7 +261,6 @@ class Ne {
   getElementNodeId(e) {
     return this.graphStore.getElementNodeId(e) ?? null;
   }
-  // TODO: use Set in v4
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
@@ -273,60 +272,74 @@ class Ne {
       nodeId: t.nodeId
     };
   }
-  // TODO: use Set in v4
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
-  // TODO: use Set in v4
   getNodePortIds(e) {
     return this.graphStore.getNodePortIds(e) ?? null;
   }
-  // TODO: use Set in v4
+  getElementPortIds(e) {
+    return [...this.graphStore.getElementPortIds(e)];
+  }
+  /**
+   * @deprecated
+   * use getElementPortIds instead
+   */
   getElementPortsIds(e) {
-    return [...this.graphStore.getElementPortsIds(e)];
+    return this.getElementPortIds(e);
   }
-  // TODO: use Set in v4
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
   getEdge(e) {
     const t = this.graphStore.getEdge(e);
-    return t === void 0 ? null : { from: t.from, to: t.to, priority: t.priority };
+    return t === void 0 ? null : {
+      from: t.from,
+      to: t.to,
+      priority: t.priority,
+      shape: t.shape
+    };
   }
-  // TODO: use Set in v4
   getPortIncomingEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
   }
-  // TODO: use Set in v4
+  getPortOutgoingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
+  }
+  /**
+   * @deprecated
+   * use getPortOutgoingEdgeIds instead
+   */
   getPortOutcomingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(e);
+    return this.getPortOutgoingEdgeIds(e);
   }
-  // TODO: use Set in v4
   getPortCycleEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
   }
-  // TODO: use Set in v4
   getPortAdjacentEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
   }
-  // TODO: use Set in v4
   getNodeIncomingEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
   }
-  // TODO: use Set in v4
+  getNodeOutgoingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
+  }
+  /**
+   * @deprecated
+   * use getNodeOutgoingEdgeIds instead
+   */
   getNodeOutcomingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(e);
+    return this.getNodeOutgoingEdgeIds(e);
   }
-  // TODO: use Set in v4
   getNodeCycleEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
   }
-  // TODO: use Set in v4
   getNodeAdjacentEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class W {
+class O {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -342,13 +355,13 @@ class W {
     this.counter = 0;
   }
 }
-class x extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
     o(this, "name", "HtmlGraphError");
   }
 }
-class de {
+class we {
   constructor(e, t, s, i, n) {
     /**
      * provides api for accessing model of rendered graph
@@ -358,13 +371,13 @@ class de {
      * provides api for accessing viewport state
      */
     o(this, "viewport");
-    o(this, "nodeIdGenerator", new W(
+    o(this, "nodeIdGenerator", new O(
       (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new W(
+    o(this, "portIdGenerator", new O(
       (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new W(
+    o(this, "edgeIdGenerator", new O(
       (e) => this.graph.getEdge(e) !== null
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -416,13 +429,13 @@ class de {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new Ne(this.graphStore), this.viewport = new De(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new Be(this.graphStore), this.viewport = new Ve(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
     ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = y();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = A();
   }
   /**
    * adds new node
@@ -430,9 +443,9 @@ class de {
   addNode(e) {
     const t = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(t) !== null)
-      throw new x("failed to add node with existing id");
+      throw new S("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(e.element) !== void 0)
-      throw new x(
+      throw new S(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
@@ -457,7 +470,7 @@ class de {
    */
   updateNode(e, t) {
     if (this.graph.getNode(e) === null)
-      throw new x("failed to update non existing node");
+      throw new S("failed to update non existing node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
@@ -467,7 +480,7 @@ class de {
    */
   removeNode(e) {
     if (this.graph.getNode(e) === null)
-      throw new x("failed to remove non existing node");
+      throw new S("failed to remove non existing node");
     return this.graphStore.removeNode(e), this;
   }
   /**
@@ -476,9 +489,9 @@ class de {
   markPort(e) {
     const t = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(t) !== null)
-      throw new x("failed to add port with existing id");
+      throw new S("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
-      throw new x("failed to mark port for nonexistent node");
+      throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: t,
       element: e.element,
@@ -491,7 +504,7 @@ class de {
    */
   updatePort(e, t) {
     if (this.graph.getPort(e) === null)
-      throw new x("failed to update nonexistent port");
+      throw new S("failed to update nonexistent port");
     return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
@@ -500,7 +513,7 @@ class de {
    */
   unmarkPort(e) {
     if (this.graph.getPort(e) === null)
-      throw new x("failed to unmark non existing port");
+      throw new S("failed to unmark non existing port");
     return this.graphStore.removePort(e), this;
   }
   /**
@@ -509,11 +522,11 @@ class de {
   addEdge(e) {
     const t = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(t) !== null)
-      throw new x("failed to add edge with existing id");
+      throw new S("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
-      throw new x("failed to add edge from nonexistent port");
+      throw new S("failed to add edge from nonexistent port");
     if (this.graph.getPort(e.to) === null)
-      throw new x("failed to add edge to nonexistent port");
+      throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: t,
       from: e.from,
@@ -527,7 +540,7 @@ class de {
    */
   updateEdge(e, t) {
     if (this.graph.getEdge(e) === null)
-      throw new x("failed to update nonexistent edge");
+      throw new S("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
@@ -535,7 +548,7 @@ class de {
    */
   removeEdge(e) {
     if (this.graph.getEdge(e) === null)
-      throw new x("failed to remove nonexistent edge");
+      throw new S("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
   /**
@@ -571,7 +584,7 @@ class de {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class Me {
+class We {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -611,7 +624,7 @@ class Me {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class ce {
+class fe {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -620,7 +633,7 @@ class ce {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new Me());
+    o(this, "elementPorts", new We());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -647,7 +660,7 @@ class ce {
     o(this, "onBeforeEdgeRemoved");
     o(this, "beforeClearEmitter");
     o(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = y(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = y(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = y(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = y(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = y(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = y(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = y(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = y(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = y(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = y(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = y(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = y(), [this.beforeClearEmitter, this.onBeforeClear] = y();
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
   }
   addNode(e) {
     const t = /* @__PURE__ */ new Map(), s = {
@@ -695,7 +708,7 @@ class ce {
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getElementPortsIds(e) {
+  getElementPortIds(e) {
     return this.elementPorts.getMultiBySingle(e);
   }
   getNodePortIds(e) {
@@ -739,7 +752,7 @@ class ce {
   getPortIncomingEdgeIds(e) {
     return Array.from(this.incomingEdges.get(e));
   }
-  getPortOutcomingEdgeIds(e) {
+  getPortOutgoingEdgeIds(e) {
     return Array.from(this.outcomingEdges.get(e));
   }
   getPortCycleEdgeIds(e) {
@@ -748,7 +761,7 @@ class ce {
   getPortAdjacentEdgeIds(e) {
     return [
       ...this.getPortIncomingEdgeIds(e),
-      ...this.getPortOutcomingEdgeIds(e),
+      ...this.getPortOutgoingEdgeIds(e),
       ...this.getPortCycleEdgeIds(e)
     ];
   }
@@ -759,11 +772,11 @@ class ce {
       s = [...s, ...this.getPortIncomingEdgeIds(i)];
     }), s;
   }
-  getNodeOutcomingEdgeIds(e) {
+  getNodeOutgoingEdgeIds(e) {
     const t = Array.from(this.nodes.get(e).ports.keys());
     let s = [];
     return t.forEach((i) => {
-      s = [...s, ...this.getPortOutcomingEdgeIds(i)];
+      s = [...s, ...this.getPortOutgoingEdgeIds(i)];
     }), s;
   }
   getNodeCycleEdgeIds(e) {
@@ -776,7 +789,7 @@ class ce {
   getNodeAdjacentEdgeIds(e) {
     return [
       ...this.getNodeIncomingEdgeIds(e),
-      ...this.getNodeOutcomingEdgeIds(e),
+      ...this.getNodeOutgoingEdgeIds(e),
       ...this.getNodeCycleEdgeIds(e)
     ];
   }
@@ -793,24 +806,24 @@ class ce {
     this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const q = (r) => ({
+const se = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ee = {
+}), ie = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Le {
+class $e {
   constructor() {
-    o(this, "viewportMatrix", ee);
-    o(this, "contentMatrix", ee);
+    o(this, "viewportMatrix", ie);
+    o(this, "contentMatrix", ie);
     o(this, "afterUpdateEmitter");
     o(this, "onAfterUpdated");
     o(this, "beforeUpdateEmitter");
     o(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = y(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = y();
+    [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -823,17 +836,17 @@ class Le {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = q(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = se(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 = q(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = se(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class k {
+class Y {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -859,1620 +872,1780 @@ class k {
     }), 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 k(e);
+    new Y(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const Re = (r, e, t) => {
-  const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
-  return e >= s && e <= s + n && t >= i && t <= i + h;
-}, Ie = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, D = (r, e, t, s) => Re(e, t, s) && Ie(r, t, s), B = (r, e) => {
+const Fe = (r, e, t) => {
+  const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
+  return e >= s && e <= s + n && t >= i && t <= i + a;
+}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-};
-class z {
-  constructor(e, t, s, i) {
-    o(this, "grabbedNodeId", null);
-    o(this, "maxNodePriority", 0);
-    o(this, "previousTouchCoordinates", null);
-    o(this, "graph");
-    o(this, "onAfterNodeAdded", (e) => {
-      this.updateMaxNodePriority(e);
-      const t = this.graph.getNode(e);
-      t.element.addEventListener("mousedown", this.onMouseDown, {
-        passive: !0
-      }), t.element.addEventListener("touchstart", this.onTouchStart, {
-        passive: !0
-      });
-    });
-    o(this, "onAfterNodeUpdated", (e) => {
-      this.updateMaxNodePriority(e);
-    });
-    o(this, "onBeforeNodeRemoved", (e) => {
-      const t = this.graph.getNode(e);
-      t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
-    });
-    o(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();
-    });
-    o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllNodeIds().forEach((e) => {
-        const t = this.canvas.graph.getNode(e);
-        t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
-      }), this.maxNodePriority = 0;
-    });
-    o(this, "onMouseDown", (e) => {
-      if (!this.config.mouseDownEventVerifier(e))
-        return;
-      const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
-      this.config.onBeforeNodeDrag({
-        nodeId: s,
-        element: i.element,
-        x: i.x,
-        y: i.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, B(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
-        passive: !0
-      }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
-        passive: !0
-      }));
-    });
-    o(this, "onTouchStart", (e) => {
-      if (e.touches.length !== 1)
-        return;
-      e.stopImmediatePropagation(), this.previousTouchCoordinates = {
-        x: e.touches[0].clientX,
-        y: e.touches[0].clientY
-      };
-      const t = e.currentTarget, s = this.canvas.graph.getElementNodeId(t), i = this.graph.getNode(s);
-      this.config.onBeforeNodeDrag({
-        nodeId: s,
-        element: i.element,
-        x: i.x,
-        y: i.y
-      }) && (this.grabbedNodeId = s, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-        passive: !0
-      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
-        passive: !0
-      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
-        passive: !0
-      }));
-    });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!D(
-        this.window,
-        this.element,
-        e.clientX,
-        e.clientY
-      )) {
-        this.cancelMouseDrag();
-        return;
-      }
-      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
-    });
-    o(this, "onWindowMouseUp", (e) => {
-      this.config.mouseUpEventVerifier(e) && this.cancelMouseDrag();
-    });
-    o(this, "onWindowTouchMove", (e) => {
-      if (e.touches.length !== 1)
-        return;
-      const t = e.touches[0];
-      if (!D(
-        this.window,
-        this.element,
-        t.clientX,
-        t.clientY
-      )) {
-        this.cancelTouchDrag();
-        return;
-      }
-      if (this.grabbedNodeId !== null && this.previousTouchCoordinates !== null) {
-        const i = t.clientX - this.previousTouchCoordinates.x, n = t.clientY - this.previousTouchCoordinates.y;
-        this.dragNode(this.grabbedNodeId, i, n), this.previousTouchCoordinates = {
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY
-        };
+}, V = (r) => {
+  const e = document.createElement("div");
+  return {
+    id: r.overlayId,
+    element: e,
+    x: r.portCoords.x,
+    y: r.portCoords.y,
+    ports: [
+      {
+        id: r.overlayId,
+        element: e,
+        direction: r.portDirection
       }
-    });
-    o(this, "onWindowTouchFinish", () => {
-      this.previousTouchCoordinates = null, this.cancelTouchDrag();
-    });
-    this.canvas = e, this.element = t, this.window = s, this.config = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    ]
+  };
+}, ke = (r, e) => {
+  let t = e, s = null;
+  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
+    t = t.parentElement;
+  return s;
+}, ve = (r, e) => {
+  const t = document.elementsFromPoint(e.x, e.y);
+  for (const s of t) {
+    const i = ke(r, s);
+    if (i !== null)
+      return i;
   }
-  static configure(e, t, s, i) {
-    new z(e, t, s, i);
+  return null;
+};
+var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
+const me = (r, e) => ({
+  x: r / 2,
+  y: e / 2
+}), m = (r, e, t) => ({
+  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
+  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
+}), w = {
+  x: 0,
+  y: 0
+};
+class ze {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const s = m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), i = m(
+      { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), n = {
+      x: s.x + this.params.sourceDirection.x * this.params.curvature,
+      y: s.y + this.params.sourceDirection.y * this.params.curvature
+    }, a = {
+      x: i.x - this.params.targetDirection.x * this.params.curvature,
+      y: i.y - this.params.targetDirection.y * this.params.curvature
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    this.path = `${d}${h}${c}`;
   }
-  dragNode(e, t, s) {
-    const i = this.graph.getNode(e);
-    if (i === null)
-      return;
-    const n = this.canvas.viewport.getContentMatrix(), h = T(n, {
-      x: i.x,
-      y: i.y
-    }), a = T(
-      { scale: 1, x: t, y: s },
-      h
-    ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, a);
-    this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
-      nodeId: e,
-      element: i.element,
-      x: c.x,
-      y: c.y
-    });
+}
+const ye = (r, e, t, s) => ({
+  x: e * r.x + (1 - e) / 2 * s.x,
+  y: t * r.y + (1 - t) / 2 * s.y
+});
+class Xe {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
+      { x: i, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), l = {
+      x: c.x + h,
+      y: c.y + d
+    }, g = m(
+      { x: this.params.to.x - i, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), p = {
+      x: g.x + h,
+      y: g.y + d
+    }, f = {
+      x: (l.x + p.x) / 2,
+      y: (l.y + p.y) / 2
+    }, v = {
+      x: c.x + this.params.curvature * this.params.sourceDirection.x,
+      y: c.y + this.params.curvature * this.params.sourceDirection.y
+    }, y = {
+      x: g.x - this.params.curvature * this.params.targetDirection.x,
+      y: g.y - this.params.curvature * this.params.targetDirection.y
+    }, E = {
+      x: c.x + h,
+      y: c.y + d
+    }, x = {
+      x: g.x + h,
+      y: g.y + d
+    };
+    this.path = [
+      `M ${t.x} ${t.y}`,
+      `L ${c.x} ${c.y}`,
+      `C ${v.x} ${v.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
+      `C ${x.x} ${x.y} ${y.x} ${y.y} ${g.x} ${g.y}`,
+      `L ${s.x} ${s.y}`
+    ].join(" "), this.midpoint = ye(f, e.flipX, e.flipY, e.to);
   }
-  moveNodeOnTop(e) {
-    if (this.config.moveOnTop) {
-      if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
-        const t = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
-          this.canvas.updateEdge(i, { priority: t });
-        });
+}
+const C = (r, e) => {
+  const t = [];
+  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
+    const s = r.length - 1;
+    let i = 0, n = 0, a = 0;
+    r.forEach((h, d) => {
+      let c = 0, l = 0, g = 0;
+      const p = d > 0, f = d < s, v = p && f;
+      if (p && (c = -i, l = -n, g = a), f) {
+        const R = r[d + 1];
+        i = R.x - h.x, n = R.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      this.canvas.updateNode(e, { priority: this.maxNodePriority });
-    }
-  }
-  cancelMouseDrag() {
-    const e = this.graph.getNode(this.grabbedNodeId);
-    e !== null && this.config.onNodeDragFinished({
-      nodeId: this.grabbedNodeId,
-      element: e.element,
-      x: e.x,
-      y: e.y
-    }), this.grabbedNodeId = null, B(this.element, null), this.removeMouseDragListeners();
-  }
-  removeMouseDragListeners() {
-    this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-  }
-  cancelTouchDrag() {
-    this.previousTouchCoordinates = null;
-    const e = this.graph.getNode(this.grabbedNodeId);
-    e !== null && this.config.onNodeDragFinished({
-      nodeId: this.grabbedNodeId,
-      element: e.element,
-      x: e.x,
-      y: e.y
-    }), this.grabbedNodeId = null, this.removeTouchDragListeners();
+      const E = a !== 0 ? Math.min((v ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: h.x + i * E, y: h.y + n * E } : h, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: h.x + c * D, y: h.y + l * D } : h;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), v && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
+      );
+    });
   }
-  removeTouchDragListeners() {
-    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+  return t.join(" ");
+};
+class Ye {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), d = m(
+      { x: this.params.to.x - a, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
+      x: this.params.flipX > 0 ? c : -n,
+      y: h.y
+    }, p = { x: g.x, y: l }, f = {
+      x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
+      y: d.y
+    }, v = { x: f.x, y: l };
+    this.path = C(
+      [s, h, g, p, v, f, d, i],
+      this.params.roundness
+    );
+  }
+}
+class H {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: i, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
+      { x: this.params.to.x - i, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
+    this.midpoint = ye(f, e.flipX, e.flipY, e.to), this.path = C(
+      [t, n, l, p, g, s],
+      this.params.roundness
+    );
+  }
+}
+class He {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
+      { x: n, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), h = m(
+      { x: this.params.to.x - n, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    );
+    this.path = C([s, a, h, i], this.params.roundness);
+  }
+}
+class je {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? m(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
+      {
+        x: this.params.to.x - this.params.arrowLength,
+        y: this.params.to.y
+      },
+      this.params.targetDirection,
+      this.params.to
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), d = m(
+      { x: this.params.to.x - a, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
+      x: h.x,
+      y: this.params.flipY > 0 ? c : -n
+    }, p = { x: l, y: g.y }, f = {
+      x: d.x,
+      y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
+    }, v = { x: l, y: f.y };
+    this.path = C(
+      [s, h, g, p, v, f, d, i],
+      this.params.roundness
+    );
+  }
+}
+class j {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
+      { x: this.params.arrowLength, y: w.y },
+      { x: i, y: w.y },
+      { x: i, y: this.params.side },
+      { x: n, y: this.params.side },
+      { x: n, y: -this.params.side },
+      { x: i, y: -this.params.side },
+      { x: i, y: w.y },
+      { x: this.params.arrowLength, y: w.y }
+    ].map(
+      (c) => m(c, this.params.sourceDirection, w)
+    ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${C(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
+  }
+}
+class Ge {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    this.params = e;
+    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
+      { x: this.params.arrowLength, y: w.y },
+      { x: c, y: n },
+      { x: c, y: -n },
+      { x: d, y: 0 }
+    ].map(
+      (v) => m(v, this.params.sourceDirection, w)
+    ), p = [
+      `M ${g[0].x} ${g[0].y}`,
+      `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
+      `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
+      `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
+    ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
+  }
+}
+class Ke {
+  constructor(e) {
+    o(this, "path");
+    o(this, "midpoint");
+    o(this, "diagonalDistance");
+    this.params = e;
+    const t = this.params.to;
+    if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
+      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
+    ), Math.sqrt(
+      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
+    ) === 0) {
+      this.path = "";
+      return;
+    }
+    const i = this.createDirectLinePoint({
+      offset: this.params.sourceOffset,
+      hasArrow: this.params.hasSourceArrow,
+      flip: 1,
+      shift: w
+    }), n = this.createDirectLinePoint({
+      offset: this.params.targetOffset,
+      hasArrow: this.params.hasTargetArrow,
+      flip: -1,
+      shift: this.params.to
+    });
+    this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
+  }
+  createDirectLinePoint(e) {
+    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, i = e.flip * s / this.diagonalDistance;
+    return {
+      x: this.params.to.x * i + e.shift.x,
+      y: this.params.to.y * i + e.shift.y
+    };
+  }
+}
+const Ee = (r, e) => {
+  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
+}, G = Object.freeze({
+  edgeColor: "--edge-color"
+}), Ae = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
+}, B = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return r.setAttribute("fill", `var(${G.edgeColor})`), r;
+}, xe = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.transformOrigin = "50% 50%", r;
+}, Se = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, be = (r, e) => {
+  const t = {
+    x: r.x + r.width / 2,
+    y: r.y + r.height / 2
+  }, s = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
+  return {
+    x: i,
+    y: n,
+    width: a,
+    height: h,
+    flipX: d,
+    flipY: c
+  };
+}, k = (r, e, t, s) => {
+  const n = [
+    w,
+    { x: t, y: s },
+    { x: t, y: -s }
+  ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  return `${a} ${h} ${d} Z`;
+}, u = Object.freeze({
+  color: "#777777",
+  width: 1,
+  arrowLength: 15,
+  arrowWidth: 4,
+  arrowOffset: 15,
+  hasSourceArrow: !1,
+  hasTargetArrow: !1,
+  cycleRadius: 30,
+  cycleSquareSide: 30,
+  roundness: 10,
+  detourDistance: 100,
+  detourDirection: -Math.PI / 2,
+  detourDirectionVertical: 0,
+  smallCycleRadius: 15,
+  curvature: 90,
+  interactiveWidth: 10,
+  preOffset: 0
+}), ne = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class W {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group", xe());
+    o(this, "line");
+    o(this, "sourceArrow", null);
+    o(this, "targetArrow", null);
+    o(this, "onAfterRender");
+    o(this, "afterRenderEmitter");
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
+      e.from,
+      e.to
+    );
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = ne(
+      e.from.direction,
+      a,
+      h
+    ), c = ne(
+      e.to.direction,
+      a,
+      h
+    ), l = {
+      x: i,
+      y: n
+    };
+    let g = c, p = -this.params.arrowLength, f;
+    e.from.portId === e.to.portId ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? f = this.params.createDetourPath : f = this.params.createLinePath;
+    const v = f(
+      d,
+      c,
+      l,
+      a,
+      h
+    );
+    this.line.setAttribute("d", v.path);
+    let y = null;
+    this.sourceArrow && (y = k(
+      d,
+      w,
+      this.params.arrowLength,
+      this.params.arrowWidth
+    ), this.sourceArrow.setAttribute("d", y));
+    let E = null;
+    this.targetArrow && (E = k(
+      g,
+      l,
+      p,
+      this.params.arrowWidth
+    ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
+      edgePath: v,
+      sourceArrowPath: y,
+      targetArrowPath: E
+    });
+  }
+}
+class Ze {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "curvature");
+    o(this, "portCycleRadius");
+    o(this, "portCycleSmallRadius");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new Ge({
+      sourceDirection: e,
+      radius: this.portCycleRadius,
+      smallRadius: this.portCycleSmallRadius,
+      arrowLength: this.arrowLength,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
+      arrowLength: this.arrowLength,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createLinePath", (e, t, s) => new ze({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      arrowLength: this.arrowLength,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+  }
+  render(e) {
+    this.pathShape.render(e);
+  }
+}
+class Je {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new j({
+      sourceDirection: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createLinePath", (e, t, s, i) => new Ye({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipX: i,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      t,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+  }
+  render(e) {
+    this.pathShape.render(e);
+  }
+}
+class Qe {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new j({
+      sourceDirection: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createLinePath", (e, t, s) => new He({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      t,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  updateMaxNodePriority(e) {
-    const t = this.graph.getNode(e).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, t);
+  render(e) {
+    this.pathShape.render(e);
   }
 }
-const Be = (r, e, t) => ({
-  scale: r.scale,
-  x: r.x + r.scale * e,
-  y: r.y + r.scale * t
-}), Ve = (r, e, t, s) => ({
-  scale: r.scale * e,
-  x: r.scale * (1 - e) * t + r.x,
-  y: r.scale * (1 - e) * s + r.y
-}), I = (r) => {
-  const e = [], t = r.touches.length;
-  for (let a = 0; a < t; a++)
-    e.push([r.touches[a].clientX, r.touches[a].clientY]);
-  const s = e.reduce(
-    (a, d) => [a[0] + d[0], a[1] + d[1]],
-    [0, 0]
-  ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
-    (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
-    0
-  );
-  return {
-    x: i[0],
-    y: i[1],
-    scale: h / t,
-    touchesCnt: t,
-    touches: e
-  };
-};
-class U {
-  constructor(e, t, s, i) {
-    o(this, "viewport");
-    o(this, "prevTouches", null);
-    o(this, "wheelFinishTimer", null);
-    o(this, "transformInProgress", !1);
-    o(this, "onBeforeDestroy", () => {
-      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);
-    });
-    o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (B(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
-        passive: !0
-      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
-        passive: !0
-      }), this.startRegisteredTransform());
-    });
-    o(this, "onWindowMouseMove", (e) => {
-      const t = D(
-        this.window,
-        this.element,
-        e.clientX,
-        e.clientY
-      );
-      if (this.element === null || !t) {
-        this.stopMouseDrag();
-        return;
-      }
-      const s = -e.movementX, i = -e.movementY;
-      this.moveViewport(s, i);
-    });
-    o(this, "onWindowMouseUp", (e) => {
-      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
-    });
-    o(this, "onWheelScroll", (e) => {
-      if (!this.params.mouseWheelEventVerifier(e))
-        return;
-      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, a = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
-        this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
-      }, this.params.scaleWheelFinishTimeout);
-    });
-    o(this, "onTouchStart", (e) => {
-      if (this.prevTouches !== null) {
-        this.prevTouches = I(e);
-        return;
-      }
-      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-        passive: !0
-      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
-        passive: !0
-      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
-        passive: !0
-      }), this.startRegisteredTransform();
-    });
-    o(this, "onWindowTouchMove", (e) => {
-      const t = I(e);
-      if (!t.touches.every(
-        (i) => D(this.window, this.element, i[0], i[1])
-      )) {
-        this.stopTouchDrag();
-        return;
-      }
-      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
-        -(t.x - this.prevTouches.x),
-        -(t.y - this.prevTouches.y)
-      ), t.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), h = this.prevTouches.x - i, a = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(c, h, a);
-      }
-      this.prevTouches = t;
-    });
-    o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
-    });
-    o(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
-        prevTransform: e,
-        nextTransform: e,
-        canvasWidth: t,
-        canvasHeight: s
-      });
-      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
+class _e {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new j({
+      sourceDirection: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "preventWheelScaleListener", (e) => {
-      e.preventDefault();
-    });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
-      passive: !1
-    }), 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
-    }), this.element.addEventListener("touchstart", this.onTouchStart, {
-      passive: !0
-    }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    o(this, "createLinePath", (e, t, s, i, n) => new je({
+      to: s,
+      sourceDirection: e,
+      targetDirection: t,
+      flipY: n,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      t,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  static configure(e, t, s, i) {
-    new U(e, t, s, i);
+  render(e) {
+    this.pathShape.render(e);
   }
-  moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = Be(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
-      prevTransform: s,
-      nextTransform: i,
-      canvasWidth: n,
-      canvasHeight: h
-    });
-    this.performTransform(a);
+}
+const he = (r) => {
+  if (r.diagonalDistance === 0)
+    return "";
+  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
+    x: t * e + r.shift.x,
+    y: s * e + r.shift.y
+  }, n = {
+    x: t / r.diagonalDistance,
+    y: s / r.diagonalDistance
+  };
+  return k(
+    n,
+    i,
+    r.arrowLength,
+    r.arrowWidth
+  );
+};
+class Pe {
+  constructor(e) {
+    o(this, "svg");
+    o(this, "group", xe());
+    o(this, "line");
+    o(this, "sourceArrow", null);
+    o(this, "targetArrow", null);
+    o(this, "color");
+    o(this, "width");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "sourceOffset");
+    o(this, "targetOffset");
+    o(this, "onAfterRender");
+    o(this, "afterRenderEmitter");
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
-  scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = Ve(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
-      prevTransform: i,
-      nextTransform: n,
-      canvasWidth: h,
-      canvasHeight: a
+  render(e) {
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
+      e.from,
+      e.to
+    );
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: i, y: n }, c = new Ke({
+      to: d,
+      sourceOffset: this.sourceOffset,
+      targetOffset: this.targetOffset,
+      hasSourceArrow: this.sourceArrow !== null,
+      hasTargetArrow: this.targetArrow !== null,
+      arrowLength: this.arrowLength
+    });
+    this.line.setAttribute("d", c.path);
+    let l = null;
+    this.sourceArrow && (l = he({
+      diagonalDistance: c.diagonalDistance,
+      to: d,
+      offset: this.sourceOffset,
+      flip: 1,
+      shift: w,
+      arrowWidth: this.arrowWidth,
+      arrowLength: this.arrowLength
+    }), this.sourceArrow.setAttribute("d", l));
+    let g = null;
+    this.targetArrow && (g = he({
+      diagonalDistance: c.diagonalDistance,
+      to: d,
+      offset: this.targetOffset,
+      flip: -1,
+      shift: d,
+      arrowWidth: this.arrowWidth,
+      arrowLength: this.arrowLength
+    }), this.targetArrow.setAttribute("d", g)), this.afterRenderEmitter.emit({
+      edgePath: c,
+      sourceArrowPath: l,
+      targetArrowPath: g
     });
-    this.performTransform(d);
-  }
-  stopMouseDrag() {
-    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
-  }
-  removeMouseDragListeners() {
-    this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
-  }
-  stopTouchDrag() {
-    this.prevTouches = null, this.removeTouchDragListeners(), this.finishRegisteredTransform();
-  }
-  removeTouchDragListeners() {
-    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
-  }
-  performTransform(e) {
-    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
-  }
-  startRegisteredTransform() {
-    this.transformInProgress = !0, this.params.onTransformStarted();
   }
-  finishRegisteredTransform() {
-    this.transformInProgress = !1, this.params.onTransformFinished();
+}
+const qe = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
+}, et = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
+}, ae = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
+};
+class tt extends Error {
+  constructor(e) {
+    super(e), this.name = "InteractiveEdgeError";
   }
 }
-class X {
-  constructor(e, t, s, i, n, h) {
-    o(this, "canvasResizeObserver");
-    o(this, "nodeHorizontal");
-    o(this, "nodeVertical");
-    o(this, "viewport");
-    o(this, "viewportWidth", 0);
-    o(this, "viewportHeight", 0);
-    o(this, "viewportMatrix");
-    o(this, "loadedArea", {
-      xFrom: 1 / 0,
-      xTo: 1 / 0,
-      yFrom: 1 / 0,
-      yTo: 1 / 0
-    });
-    o(this, "updateLoadedArea", (e) => {
-      this.loadedArea = {
-        xFrom: e.x,
-        xTo: e.x + e.width,
-        yFrom: e.y,
-        yTo: e.y + e.height
-      };
-    });
-    o(this, "onBeforeDestroy", () => {
-      this.trigger.unsubscribe(this.updateLoadedArea), this.canvasResizeObserver.unobserve(this.element), this.canvas.viewport.onAfterUpdated.unsubscribe(
-        this.onAfterViewportUpdated
-      ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
-    });
-    o(this, "onAfterViewportUpdated", () => {
-      this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
+class Te {
+  constructor(e, t) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "handle", qe());
+    o(this, "onAfterRender");
+    o(this, "interactiveLine");
+    o(this, "interactiveSourceArrow", null);
+    o(this, "interactiveTargetArrow", null);
+    if (this.baseEdge = e, e instanceof Te)
+      throw new tt(
+        "interactive edge can be configured only once"
+      );
+    this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
+    const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
+    this.interactiveLine = et(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ae(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ae(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+      this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
-    o(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
-      const c = d[0];
-      this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
-    }), this.viewport = e.viewport;
-    const a = {
-      ...i,
-      onResizeTransformStarted: () => {
-        this.userTransformInProgress = !0, i.onResizeTransformStarted();
-      },
-      onResizeTransformFinished: () => {
-        this.userTransformInProgress = !1, i.onResizeTransformFinished();
-      },
-      onBeforeTransformChange: () => {
-        this.userTransformInProgress = !0, i.onBeforeTransformChange();
-      },
-      onTransformChange: () => {
-        this.userTransformInProgress = !1;
-        const d = this.viewportMatrix;
-        this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), i.onTransformChange();
-      },
-      onTransformFinished: () => {
-        this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
-      }
-    };
-    U.configure(
-      e,
-      this.element,
-      this.window,
-      a
-    ), 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, t, s, i, n, h) {
-    new X(
-      e,
-      t,
-      s,
-      i,
-      n,
-      h
-    );
+  render(e) {
+    this.baseEdge.render(e);
   }
-  scheduleLoadAreaAroundViewport() {
-    setTimeout(() => {
-      this.loadAreaAroundViewport();
+}
+class xt {
+  constructor(e, t) {
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "svg");
+    /**
+     * @deprecated
+     * use midpointElement instead
+     */
+    o(this, "medianElement");
+    this.baseShape = e, this.midpointElement = t, this.medianElement = this.midpointElement, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
+      const i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
+      this.midpointElement.style.setProperty("transform", n);
     });
   }
-  scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, h = this.viewportMatrix.y + t + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
-  }
-  loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, h = 3 * t + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: i, width: n, height: h });
+  render(e) {
+    this.baseShape.render(e);
   }
 }
-const Ue = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return r.style.position = "absolute", r.style.inset = "0", r;
-}, Ce = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  return r.setAttribute("fill", "url(#pattern)"), r;
-}, We = () => {
-  const r = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "pattern"
+const De = (r, e) => {
+  const t = new fe(), s = new ue(t, e, r), i = {
+    nodes: {
+      centerFn: me,
+      priorityFn: () => 0
+    },
+    edges: {
+      shapeFactory: () => new Pe(),
+      priorityFn: () => 0
+    },
+    ports: {
+      direction: 0
+    }
+  };
+  return new we(
+    r,
+    t,
+    e,
+    s,
+    i
   );
-  return r.setAttribute("id", "pattern"), r;
 };
-class Y {
-  constructor(e, t, s) {
-    o(this, "svg", Ue());
-    o(this, "patternRenderingRectangle", Ce());
-    o(this, "pattern", We());
-    o(this, "patternContent");
-    o(this, "tileWidth");
-    o(this, "tileHeight");
-    o(this, "halfTileWidth");
-    o(this, "halfTileHeight");
-    o(this, "maxViewportScale");
-    o(this, "visible", !1);
-    o(this, "resizeObserver", new ResizeObserver((e) => {
-      const t = e[0], { width: s, height: i } = t.contentRect;
-      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
-      const n = this.tileWidth / s, h = this.tileHeight / i;
-      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
-    }));
-    o(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
-      this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
+class K {
+  constructor(e, t, s, i) {
+    o(this, "grabbedNodeId", null);
+    o(this, "maxNodePriority", 0);
+    o(this, "previousTouchCoordinates", null);
+    o(this, "graph");
+    o(this, "onAfterNodeAdded", (e) => {
+      this.updateMaxNodePriority(e);
+      const t = this.graph.getNode(e);
+      t.element.addEventListener("mousedown", this.onMouseDown, {
+        passive: !0
+      }), t.element.addEventListener("touchstart", this.onTouchStart, {
+        passive: !0
+      });
+    });
+    o(this, "onAfterNodeUpdated", (e) => {
+      this.updateMaxNodePriority(e);
+    });
+    o(this, "onBeforeNodeRemoved", (e) => {
+      const t = this.graph.getNode(e);
+      t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
     });
     o(this, "onBeforeDestroy", () => {
-      this.resizeObserver.unobserve(this.host), this.host.removeChild(this.svg), this.canvas.viewport.onAfterUpdated.unsubscribe(
-        this.onAfterTransformUpdated
-      ), this.canvas.onBeforeDestroy.unsubscribe(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();
     });
-    this.canvas = e, this.host = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
-    const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
-    this.patternContent.setAttribute("transform", i), this.pattern.appendChild(this.patternContent);
-    const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    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, t, s) {
-    new Y(e, t, s);
-  }
-  updateVisibility() {
-    const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
-    t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
-  }
-}
-const le = (r, e) => ({
-  x: r / 2,
-  y: e / 2
-});
-class H {
-  constructor(e, t, s, i, n) {
-    o(this, "overlayCanvas");
-    o(this, "staticOverlayPortId", "static");
-    o(this, "draggingOverlayPortId", "dragging");
-    o(this, "staticPortId", null);
-    o(this, "isDirect", !0);
-    o(this, "onAfterPortMarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortsIds(t.element).length === 1 && this.hookPortEvents(t.element);
+    o(this, "onBeforeClear", () => {
+      this.canvas.graph.getAllNodeIds().forEach((e) => {
+        const t = this.canvas.graph.getNode(e);
+        t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
+      }), this.maxNodePriority = 0;
     });
-    o(this, "onBeforePortUnmarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortsIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    o(this, "onMouseDown", (e) => {
+      if (!this.config.mouseDownEventVerifier(e))
+        return;
+      const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
+      this.config.onBeforeNodeDrag({
+        nodeId: s,
+        element: i.element,
+        x: i.x,
+        y: i.y
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, U(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }));
     });
-    o(this, "onPortMouseDown", (e) => {
-      const t = e.currentTarget;
-      this.params.mouseDownEventVerifier(e) && this.isPortConnectionAllowed(t) && (e.stopPropagation(), this.grabPort(t, { x: e.clientX, y: e.clientY }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+    o(this, "onTouchStart", (e) => {
+      if (e.touches.length !== 1)
+        return;
+      e.stopImmediatePropagation(), this.previousTouchCoordinates = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY
+      };
+      const t = e.currentTarget, s = this.canvas.graph.getElementNodeId(t), i = this.graph.getNode(s);
+      this.config.onBeforeNodeDrag({
+        nodeId: s,
+        element: i.element,
+        x: i.x,
+        y: i.y
+      }) && (this.grabbedNodeId = s, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
-      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
         passive: !0
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!D(
+      if (!L(
         this.window,
-        this.overlayLayer,
+        this.element,
         e.clientX,
         e.clientY
       )) {
-        this.stopMouseDrag();
+        this.cancelMouseDrag();
         return;
       }
-      this.moveDraggingNode({ x: e.clientX, y: e.clientY });
+      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
     o(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && (this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
-    });
-    o(this, "onPortTouchStart", (e) => {
-      const t = e.currentTarget;
-      if (!(e.touches.length === 1 && this.isPortConnectionAllowed(t)))
-        return;
-      e.stopPropagation();
-      const i = e.touches[0];
-      this.grabPort(t, { x: i.clientX, y: i.clientY }), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-        passive: !0
-      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
-        passive: !0
-      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
-        passive: !0
-      });
+      this.config.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
     o(this, "onWindowTouchMove", (e) => {
+      if (e.touches.length !== 1)
+        return;
       const t = e.touches[0];
-      if (!D(
+      if (!L(
         this.window,
-        this.overlayLayer,
+        this.element,
         t.clientX,
         t.clientY
       )) {
-        this.stopTouchDrag();
+        this.cancelTouchDrag();
         return;
       }
-      this.moveDraggingNode({ x: t.clientX, y: t.clientY });
-    });
-    o(this, "onWindowTouchFinish", (e) => {
-      const t = e.changedTouches[0];
-      this.tryCreateConnection({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
-    });
-    o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllPortIds().forEach((e) => {
-        const t = this.canvas.graph.getPort(e);
-        this.unhookPortEvents(t.element);
-      });
-    });
-    o(this, "onBeforeDestroy", () => {
-      this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
-        this.onBeforePortUnmarked
-      ), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
-    });
-    o(this, "onEdgeCreated", (e) => {
-      this.params.onAfterEdgeCreated(e);
-    });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n;
-    const h = new ce(), a = new he(
-      h,
-      this.viewportStore,
-      this.overlayLayer
-    ), d = {
-      nodes: {
-        centerFn: le,
-        priorityFn: () => 0
-      },
-      edges: {
-        shapeFactory: this.params.edgeShapeFactory,
-        priorityFn: () => 0
-      },
-      ports: {
-        direction: 0
+      if (this.grabbedNodeId !== null && this.previousTouchCoordinates !== null) {
+        const i = t.clientX - this.previousTouchCoordinates.x, n = t.clientY - this.previousTouchCoordinates.y;
+        this.dragNode(this.grabbedNodeId, i, n), this.previousTouchCoordinates = {
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY
+        };
       }
-    };
-    this.overlayCanvas = new de(
-      this.overlayLayer,
-      h,
-      this.viewportStore,
-      a,
-      d
-    ), this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
-  }
-  static configure(e, t, s, i, n) {
-    new H(
-      e,
-      t,
-      s,
-      i,
-      n
-    );
-  }
-  grabPort(e, t) {
-    const s = this.canvas.graph.getElementPortsIds(e)[0], i = this.canvas.graph.getPort(s);
-    this.staticPortId = s;
-    const n = this.params.connectionTypeResolver(this.staticPortId), h = e.getBoundingClientRect(), a = h.x + h.width / 2, d = h.y + h.height / 2, c = this.overlayLayer.getBoundingClientRect(), g = this.canvas.viewport.getViewportMatrix(), l = T(g, {
-      x: a - c.x,
-      y: d - c.y
-    }), p = T(g, {
-      x: t.x - c.x,
-      y: t.y - c.y
-    }), f = {
-      overlayId: this.staticOverlayPortId,
-      portCoords: l,
-      portDirection: i.direction
-    }, v = {
-      overlayId: this.draggingOverlayPortId,
-      portCoords: p,
-      portDirection: this.params.dragPortDirection
-    };
-    this.isDirect = n === "direct";
-    const E = this.isDirect ? f : v, A = this.isDirect ? v : f;
-    this.createOverlayGraph(E, A);
-  }
-  hookPortEvents(e) {
-    e.addEventListener("mousedown", this.onPortMouseDown, {
-      passive: !0
-    }), e.addEventListener("touchstart", this.onPortTouchStart, {
-      passive: !0
     });
-  }
-  unhookPortEvents(e) {
-    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
-  }
-  stopMouseDrag() {
-    this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-  }
-  stopTouchDrag() {
-    this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
-  }
-  resetDragState() {
-    this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
-  }
-  createOverlayGraph(e, t) {
-    const s = this.createAddNodeRequest(e);
-    this.overlayCanvas.addNode(s);
-    const i = this.createAddNodeRequest(t);
-    this.overlayCanvas.addNode(i), this.overlayCanvas.addEdge({
-      from: e.overlayId,
-      to: t.overlayId
+    o(this, "onWindowTouchFinish", () => {
+      this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
+    this.canvas = e, this.element = t, this.window = s, this.config = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  createAddNodeRequest(e) {
-    const t = document.createElement("div");
-    return {
-      id: e.overlayId,
-      element: t,
-      x: e.portCoords.x,
-      y: e.portCoords.y,
-      ports: [
-        {
-          id: e.overlayId,
-          element: t,
-          direction: e.portDirection
-        }
-      ]
-    };
+  static configure(e, t, s, i) {
+    new K(e, t, s, i);
   }
-  tryCreateConnection(e) {
-    const t = this.findPortAtPoint(e);
-    if (t === null) {
-      this.params.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
+  dragNode(e, t, s) {
+    const i = this.graph.getNode(e);
+    if (i === null)
       return;
-    }
-    const s = this.isDirect ? this.staticPortId : t, i = this.isDirect ? t : this.staticPortId, n = { from: s, to: i }, h = this.params.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
-  }
-  moveDraggingNode(e) {
-    const t = this.overlayLayer.getBoundingClientRect(), s = {
-      x: e.x - t.x,
-      y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
-    this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
-      x: n.x,
-      y: n.y
+    const n = this.canvas.viewport.getContentMatrix(), a = T(n, {
+      x: i.x,
+      y: i.y
+    }), h = T(
+      { scale: 1, x: t, y: s },
+      a
+    ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, h);
+    this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
+      nodeId: e,
+      element: i.element,
+      x: c.x,
+      y: c.y
     });
   }
-  findPortAtPoint(e) {
-    const t = document.elementsFromPoint(e.x, e.y);
-    for (const s of t) {
-      const i = this.findPortAtElement(s);
-      if (i !== null)
-        return i;
+  moveNodeOnTop(e) {
+    if (this.config.moveOnTop) {
+      if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
+        const t = this.maxNodePriority;
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
+          this.canvas.updateEdge(i, { priority: t });
+        });
+      }
+      this.canvas.updateNode(e, { priority: this.maxNodePriority });
     }
-    return null;
-  }
-  findPortAtElement(e) {
-    let t = e, s = null;
-    for (; t !== null && (s = this.canvas.graph.getElementPortsIds(t)[0] ?? null, s === null); )
-      t = t.parentElement;
-    return s;
-  }
-  isPortConnectionAllowed(e) {
-    const t = this.canvas.graph.getElementPortsIds(e)[0];
-    return this.params.connectionTypeResolver(t) !== null;
-  }
-}
-const $e = () => {
-  const r = document.createElement("div");
-  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, $ = () => {
-  const r = document.createElement("div");
-  return r.style.position = "absolute", r.style.inset = "0", r;
-};
-class Oe {
-  constructor(e) {
-    o(this, "background", $());
-    o(this, "main", $());
-    o(this, "overlay", $());
-    o(this, "host", $e());
-    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 O = (r) => () => r, te = O(0), Fe = () => {
-  let r = 0;
-  return () => r++;
-}, ke = (r, e) => {
-  let t = te, s = te;
-  const i = Fe();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = O(r)), typeof e == "number" && (s = O(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
-    nodesPriorityFn: t,
-    edgesPriorityFn: s
-  };
-}, m = (r, e, t) => ({
-  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
-  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
-}), w = {
-  x: 0,
-  y: 0
-};
-class ze {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), i = m(
-      { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    ), n = {
-      x: s.x + this.params.sourceDirection.x * this.params.curvature,
-      y: s.y + this.params.sourceDirection.y * this.params.curvature
-    }, h = {
-      x: i.x - this.params.targetDirection.x * this.params.curvature,
-      y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, a = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
-    this.path = `${d}${a}${c}`;
   }
-}
-const ge = (r, e, t, s) => ({
-  x: e * r.x + (1 - e) / 2 * s.x,
-  y: t * r.y + (1 - t) / 2 * s.y
-});
-class Xe {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
-      {
-        x: this.params.to.x - this.params.arrowLength,
-        y: this.params.to.y
-      },
-      this.params.targetDirection,
-      this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = m(
-      { x: i, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), g = {
-      x: c.x + a,
-      y: c.y + d
-    }, l = m(
-      { x: this.params.to.x - i, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    ), p = {
-      x: l.x + a,
-      y: l.y + d
-    }, f = {
-      x: (g.x + p.x) / 2,
-      y: (g.y + p.y) / 2
-    }, v = {
-      x: c.x + this.params.curvature * this.params.sourceDirection.x,
-      y: c.y + this.params.curvature * this.params.sourceDirection.y
-    }, E = {
-      x: l.x - this.params.curvature * this.params.targetDirection.x,
-      y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, A = {
-      x: c.x + a,
-      y: c.y + d
-    }, S = {
-      x: l.x + a,
-      y: l.y + d
-    };
-    this.path = [
-      `M ${t.x} ${t.y}`,
-      `L ${c.x} ${c.y}`,
-      `C ${v.x} ${v.y} ${A.x} ${A.y} ${f.x} ${f.y}`,
-      `C ${S.x} ${S.y} ${E.x} ${E.y} ${l.x} ${l.y}`,
-      `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = ge(f, e.flipX, e.flipY, e.to);
+  cancelMouseDrag() {
+    const e = this.graph.getNode(this.grabbedNodeId);
+    e !== null && this.config.onNodeDragFinished({
+      nodeId: this.grabbedNodeId,
+      element: e.element,
+      x: e.x,
+      y: e.y
+    }), this.grabbedNodeId = null, U(this.element, null), this.removeMouseDragListeners();
   }
-}
-const R = (r, e) => {
-  const t = [];
-  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
-    const s = r.length - 1;
-    let i = 0, n = 0, h = 0;
-    r.forEach((a, d) => {
-      let c = 0, g = 0, l = 0;
-      const p = d > 0, f = d < s, v = p && f;
-      if (p && (c = -i, g = -n, l = h), f) {
-        const L = r[d + 1];
-        i = L.x - a.x, n = L.y - a.y, h = Math.sqrt(i * i + n * n);
-      }
-      const A = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, S = v ? { x: a.x + i * A, y: a.y + n * A } : a, N = l !== 0 ? Math.min((v ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, M = v ? { x: a.x + c * N, y: a.y + g * N } : a;
-      d > 0 && t.push(`L ${M.x} ${M.y}`), v && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${S.x} ${S.y}`
-      );
-    });
+  removeMouseDragListeners() {
+    this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
-  return t.join(" ");
-};
-class Ye {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? m(
-      {
-        x: this.params.to.x - this.params.arrowLength,
-        y: this.params.to.y
-      },
-      this.params.targetDirection,
-      this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
-      { x: h, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), d = m(
-      { x: this.params.to.x - h, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    ), c = Math.max((a.x + d.x) / 2, n), g = this.params.to.y / 2, l = {
-      x: this.params.flipX > 0 ? c : -n,
-      y: a.y
-    }, p = { x: l.x, y: g }, f = {
-      x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
-      y: d.y
-    }, v = { x: f.x, y: g };
-    this.path = R(
-      [s, a, l, p, v, f, d, i],
-      this.params.roundness
-    );
+  cancelTouchDrag() {
+    this.previousTouchCoordinates = null;
+    const e = this.graph.getNode(this.grabbedNodeId);
+    e !== null && this.config.onNodeDragFinished({
+      nodeId: this.grabbedNodeId,
+      element: e.element,
+      x: e.x,
+      y: e.y
+    }), this.grabbedNodeId = null, this.removeTouchDragListeners();
   }
-}
-class j {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
-      {
-        x: this.params.to.x - this.params.arrowLength,
-        y: this.params.to.y
-      },
-      this.params.targetDirection,
-      this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
-      { x: this.params.to.x - i, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    ), p = { x: l.x + d, y: l.y + c }, f = { x: (g.x + p.x) / 2, y: (g.y + p.y) / 2 };
-    this.midpoint = ge(f, e.flipX, e.flipY, e.to), this.path = R(
-      [t, n, g, p, l, s],
-      this.params.roundness
-    );
+  removeTouchDragListeners() {
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-}
-class He {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? m(
-      {
-        x: this.params.to.x - this.params.arrowLength,
-        y: this.params.to.y
-      },
-      this.params.targetDirection,
-      this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = m(
-      { x: n, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), a = m(
-      { x: this.params.to.x - n, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    );
-    this.path = R([s, h, a, i], this.params.roundness);
+  updateMaxNodePriority(e) {
+    const t = this.graph.getNode(e).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
 }
-class je {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
-      this.params.sourceDirection,
-      w
-    ) : w, i = this.params.hasTargetArrow ? m(
-      {
-        x: this.params.to.x - this.params.arrowLength,
-        y: this.params.to.y
-      },
-      this.params.targetDirection,
-      this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
-      { x: h, y: w.y },
-      this.params.sourceDirection,
-      w
-    ), d = m(
-      { x: this.params.to.x - h, y: this.params.to.y },
-      this.params.targetDirection,
-      this.params.to
-    ), c = Math.max((a.y + d.y) / 2, n), g = this.params.to.x / 2, l = {
-      x: a.x,
-      y: this.params.flipY > 0 ? c : -n
-    }, p = { x: g, y: l.y }, f = {
-      x: d.x,
-      y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, v = { x: g, y: f.y };
-    this.path = R(
-      [s, a, l, p, v, f, d, i],
-      this.params.roundness
-    );
+const rt = (r, e, t) => ({
+  scale: r.scale,
+  x: r.x + r.scale * e,
+  y: r.y + r.scale * t
+}), ot = (r, e, t, s) => ({
+  scale: r.scale * e,
+  x: r.scale * (1 - e) * t + r.x,
+  y: r.scale * (1 - e) * s + r.y
+}), I = (r) => {
+  const e = [], t = r.touches.length;
+  for (let h = 0; h < t; h++)
+    e.push([r.touches[h].clientX, r.touches[h].clientY]);
+  const s = e.reduce(
+    (h, d) => [h[0] + d[0], h[1] + d[1]],
+    [0, 0]
+  ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+    (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+    0
+  );
+  return {
+    x: i[0],
+    y: i[1],
+    scale: a / t,
+    touchesCnt: t,
+    touches: e
+  };
+};
+class $ {
+  constructor(e, t, s, i) {
+    o(this, "viewport");
+    o(this, "prevTouches", null);
+    o(this, "wheelFinishTimer", null);
+    o(this, "transformInProgress", !1);
+    o(this, "onBeforeDestroy", () => {
+      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);
+    });
+    o(this, "onMouseDown", (e) => {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      }), this.startRegisteredTransform());
+    });
+    o(this, "onWindowMouseMove", (e) => {
+      const t = L(
+        this.window,
+        this.element,
+        e.clientX,
+        e.clientY
+      );
+      if (this.element === null || !t) {
+        this.stopMouseDrag();
+        return;
+      }
+      const s = -e.movementX, i = -e.movementY;
+      this.moveViewport(s, i);
+    });
+    o(this, "onWindowMouseUp", (e) => {
+      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
+    });
+    o(this, "onWheelScroll", (e) => {
+      if (!this.params.mouseWheelEventVerifier(e))
+        return;
+      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+        this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
+      }, this.params.scaleWheelFinishTimeout);
+    });
+    o(this, "onTouchStart", (e) => {
+      if (this.prevTouches !== null) {
+        this.prevTouches = I(e);
+        return;
+      }
+      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        passive: !0
+      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
+        passive: !0
+      }), this.startRegisteredTransform();
+    });
+    o(this, "onWindowTouchMove", (e) => {
+      const t = I(e);
+      if (!t.touches.every(
+        (i) => L(this.window, this.element, i[0], i[1])
+      )) {
+        this.stopTouchDrag();
+        return;
+      }
+      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
+        -(t.x - this.prevTouches.x),
+        -(t.y - this.prevTouches.y)
+      ), t.touchesCnt === 2) {
+        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        this.scaleViewport(c, a, h);
+      }
+      this.prevTouches = t;
+    });
+    o(this, "onWindowTouchFinish", (e) => {
+      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
+    });
+    o(this, "observer", new ResizeObserver(() => {
+      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
+        prevTransform: e,
+        nextTransform: e,
+        canvasWidth: t,
+        canvasHeight: s
+      });
+      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
+    }));
+    o(this, "preventWheelScaleListener", (e) => {
+      e.preventDefault();
+    });
+    this.canvas = e, this.element = t, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+      passive: !1
+    }), 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
+    }), this.element.addEventListener("touchstart", this.onTouchStart, {
+      passive: !0
+    }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-}
-class G {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
-      { x: this.params.arrowLength, y: w.y },
-      { x: i, y: w.y },
-      { x: i, y: this.params.side },
-      { x: n, y: this.params.side },
-      { x: n, y: -this.params.side },
-      { x: i, y: -this.params.side },
-      { x: i, y: w.y },
-      { x: this.params.arrowLength, y: w.y }
-    ].map(
-      (c) => m(c, this.params.sourceDirection, w)
-    ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${R(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+  static configure(e, t, s, i) {
+    new $(e, t, s, i);
   }
-}
-class Ge {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = e;
-    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, h = Math.sqrt(i * i - t * t), a = h * t / i, d = h + s + this.params.arrowLength, c = this.params.arrowLength + a, l = [
-      { x: this.params.arrowLength, y: w.y },
-      { x: c, y: n },
-      { x: c, y: -n },
-      { x: d, y: 0 }
-    ].map(
-      (v) => m(v, this.params.sourceDirection, w)
-    ), p = [
-      `M ${l[0].x} ${l[0].y}`,
-      `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
-      `A ${s} ${s} 0 1 0 ${l[2].x} ${l[2].y}`,
-      `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
-    ].join(" "), f = `M 0 0 L ${l[0].x} ${l[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = l[3];
+  moveViewport(e, t) {
+    const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+      prevTransform: s,
+      nextTransform: i,
+      canvasWidth: n,
+      canvasHeight: a
+    });
+    this.performTransform(h);
   }
-}
-class Ze {
-  constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    o(this, "diagonalDistance");
-    this.params = e;
-    const t = this.params.to;
-    if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
-      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
-    ), Math.sqrt(
-      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
-    ) === 0) {
-      this.path = "";
-      return;
-    }
-    const i = this.createDirectLinePoint({
-      offset: this.params.sourceOffset,
-      hasArrow: this.params.hasSourceArrow,
-      flip: 1,
-      shift: w
-    }), n = this.createDirectLinePoint({
-      offset: this.params.targetOffset,
-      hasArrow: this.params.hasTargetArrow,
-      flip: -1,
-      shift: this.params.to
+  scaleViewport(e, t, s) {
+    const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+      prevTransform: i,
+      nextTransform: n,
+      canvasWidth: a,
+      canvasHeight: h
     });
-    this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
+    this.performTransform(d);
   }
-  createDirectLinePoint(e) {
-    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, i = e.flip * s / this.diagonalDistance;
-    return {
-      x: this.params.to.x * i + e.shift.x,
-      y: this.params.to.y * i + e.shift.y
-    };
+  stopMouseDrag() {
+    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
-}
-const ue = (r, e) => {
-  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, Z = Object.freeze({
-  edgeColor: "--edge-color"
-}), we = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Z.edgeColor, r), e;
-}, V = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, pe = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return r.style.transformOrigin = "50% 50%", r;
-}, fe = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, ve = (r, e) => {
-  const t = {
-    x: r.x + r.width / 2,
-    y: r.y + r.height / 2
-  }, s = {
-    x: e.x + e.width / 2,
-    y: e.y + e.height / 2
-  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), h = Math.abs(s.x - t.x), a = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
-  return {
-    x: i,
-    y: n,
-    width: h,
-    height: a,
-    flipX: d,
-    flipY: c
-  };
-}, F = (r, e, t, s) => {
-  const n = [
-    w,
-    { x: t, y: s },
-    { x: t, y: -s }
-  ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
-  return `${h} ${a} ${d} Z`;
-}, u = Object.freeze({
-  color: "#777777",
-  width: 1,
-  arrowLength: 15,
-  arrowWidth: 4,
-  arrowOffset: 15,
-  hasSourceArrow: !1,
-  hasTargetArrow: !1,
-  cycleRadius: 30,
-  cycleSquareSide: 30,
-  roundness: 10,
-  detourDistance: 100,
-  detourDirection: -Math.PI / 2,
-  detourDirectionVertical: 0,
-  smallCycleRadius: 15,
-  curvature: 90,
-  interactiveWidth: 10,
-  preOffset: 0
-}), re = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class C {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group", pe());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = y(), this.svg = we(e.color), this.svg.appendChild(this.group), this.line = fe(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));
+  removeMouseDragListeners() {
+    this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
   }
-  render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = ve(
-      e.from,
-      e.to
-    );
-    ue(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = re(
-      e.from.direction,
-      h,
-      a
-    ), c = re(
-      e.to.direction,
-      h,
-      a
-    ), g = {
-      x: i,
-      y: n
-    };
-    let l = c, p = -this.params.arrowLength, f;
-    e.from.portId === e.to.portId ? (f = this.params.createCyclePath, l = d, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const v = f(
-      d,
-      c,
-      g,
-      h,
-      a
-    );
-    this.line.setAttribute("d", v.path);
-    let E = null;
-    this.sourceArrow && (E = F(
-      d,
-      w,
-      this.params.arrowLength,
-      this.params.arrowWidth
-    ), this.sourceArrow.setAttribute("d", E));
-    let A = null;
-    this.targetArrow && (A = F(
-      l,
-      g,
-      p,
-      this.params.arrowWidth
-    ), this.targetArrow.setAttribute("d", A)), this.afterRenderEmitter.emit({
-      edgePath: v,
-      sourceArrowPath: E,
-      targetArrowPath: A
-    });
+  stopTouchDrag() {
+    this.prevTouches = null, this.removeTouchDragListeners(), this.finishRegisteredTransform();
   }
-}
-class Je {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "curvature");
-    o(this, "portCycleRadius");
-    o(this, "portCycleSmallRadius");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Ge({
-      sourceDirection: e,
-      radius: this.portCycleRadius,
-      smallRadius: this.portCycleSmallRadius,
-      arrowLength: this.arrowLength,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipX: i,
-      flipY: n,
-      arrowLength: this.arrowLength,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      curvature: this.curvature,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createLinePath", (e, t, s) => new ze({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      arrowLength: this.arrowLength,
-      curvature: this.curvature,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+  removeTouchDragListeners() {
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  render(e) {
-    this.pathShape.render(e);
+  performTransform(e) {
+    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
+  }
+  startRegisteredTransform() {
+    this.transformInProgress = !0, this.params.onTransformStarted();
+  }
+  finishRegisteredTransform() {
+    this.transformInProgress = !1, this.params.onTransformFinished();
   }
 }
-class Ke {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipX: i,
-      flipY: n,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createLinePath", (e, t, s, i) => new Ye({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipX: i,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
+class Z {
+  constructor(e, t, s, i, n, a) {
+    o(this, "canvasResizeObserver");
+    o(this, "nodeHorizontal");
+    o(this, "nodeVertical");
+    o(this, "viewport");
+    o(this, "viewportWidth", 0);
+    o(this, "viewportHeight", 0);
+    o(this, "viewportMatrix");
+    o(this, "loadedArea", {
+      xFrom: 1 / 0,
+      xTo: 1 / 0,
+      yFrom: 1 / 0,
+      yTo: 1 / 0
+    });
+    o(this, "updateLoadedArea", (e) => {
+      this.loadedArea = {
+        xFrom: e.x,
+        xTo: e.x + e.width,
+        yFrom: e.y,
+        yTo: e.y + e.height
+      };
+    });
+    o(this, "onBeforeDestroy", () => {
+      this.trigger.unsubscribe(this.updateLoadedArea), this.canvasResizeObserver.unobserve(this.element), this.canvas.viewport.onAfterUpdated.unsubscribe(
+        this.onAfterViewportUpdated
+      ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+    });
+    o(this, "onAfterViewportUpdated", () => {
+      this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
+    });
+    o(this, "userTransformInProgress", !1);
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
+      const c = d[0];
+      this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
+    }), this.viewport = e.viewport;
+    const h = {
+      ...i,
+      onResizeTransformStarted: () => {
+        this.userTransformInProgress = !0, i.onResizeTransformStarted();
+      },
+      onResizeTransformFinished: () => {
+        this.userTransformInProgress = !1, i.onResizeTransformFinished();
+      },
+      onBeforeTransformChange: () => {
+        this.userTransformInProgress = !0, i.onBeforeTransformChange();
+      },
+      onTransformChange: () => {
+        this.userTransformInProgress = !1;
+        const d = this.viewportMatrix;
+        this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), i.onTransformChange();
+      },
+      onTransformFinished: () => {
+        this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
+      }
+    };
+    $.configure(
+      e,
+      this.element,
+      this.window,
+      h
+    ), 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, t, s, i, n, a) {
+    new Z(
+      e,
       t,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+      s,
+      i,
+      n,
+      a
+    );
   }
-  render(e) {
-    this.pathShape.render(e);
+  scheduleLoadAreaAroundViewport() {
+    setTimeout(() => {
+      this.loadAreaAroundViewport();
+    });
+  }
+  scheduleEnsureViewportAreaLoaded() {
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
+  }
+  loadAreaAroundViewport() {
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: s, y: i, width: n, height: a });
   }
 }
-class Qe {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipX: i,
-      flipY: n,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createLinePath", (e, t, s) => new He({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
+const st = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return r.style.position = "absolute", r.style.inset = "0", r;
+}, it = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  return r.setAttribute("fill", "url(#pattern)"), r;
+}, nt = () => {
+  const r = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "pattern"
+  );
+  return r.setAttribute("id", "pattern"), r;
+};
+class J {
+  constructor(e, t, s) {
+    o(this, "svg", st());
+    o(this, "patternRenderingRectangle", it());
+    o(this, "pattern", nt());
+    o(this, "patternContent");
+    o(this, "tileWidth");
+    o(this, "tileHeight");
+    o(this, "halfTileWidth");
+    o(this, "halfTileHeight");
+    o(this, "maxViewportScale");
+    o(this, "visible", !1);
+    o(this, "resizeObserver", new ResizeObserver((e) => {
+      const t = e[0], { width: s, height: i } = t.contentRect;
+      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
+      const n = this.tileWidth / s, a = this.tileHeight / i;
+      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
-      t,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+    o(this, "onAfterTransformUpdated", () => {
+      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
+      this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
+    });
+    o(this, "onBeforeDestroy", () => {
+      this.resizeObserver.unobserve(this.host), this.host.removeChild(this.svg), this.canvas.viewport.onAfterUpdated.unsubscribe(
+        this.onAfterTransformUpdated
+      ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+    });
+    this.canvas = e, this.host = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
+    const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
+    this.patternContent.setAttribute("transform", i), this.pattern.appendChild(this.patternContent);
+    const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    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);
   }
-  render(e) {
-    this.pathShape.render(e);
+  static configure(e, t, s) {
+    new J(e, t, s);
+  }
+  updateVisibility() {
+    const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
+    t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-class _e {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new j({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipX: i,
-      flipY: n,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    o(this, "createLinePath", (e, t, s, i, n) => new je({
-      to: s,
-      sourceDirection: e,
-      targetDirection: t,
-      flipY: n,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
-      t,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+class F {
+  constructor(e, t, s, i) {
+    o(this, "onAfterPortMarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
+    });
+    o(this, "onBeforePortUnmarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    });
+    o(this, "onPortMouseDown", (e) => {
+      if (!this.params.mouseDownEventVerifier(e))
+        return;
+      const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
+      this.params.onPortPointerDown(s, {
+        x: e.clientX,
+        y: e.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      }));
+    });
+    o(this, "onWindowMouseMove", (e) => {
+      if (!L(
+        this.window,
+        this.element,
+        e.clientX,
+        e.clientY
+      )) {
+        this.stopMouseDrag();
+        return;
+      }
+      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
+    });
+    o(this, "onWindowMouseUp", (e) => {
+      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
+    });
+    o(this, "onPortTouchStart", (e) => {
+      if (e.touches.length !== 1)
+        return;
+      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
+      this.params.onPortPointerDown(i, {
+        x: t.clientX,
+        y: t.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        passive: !0
+      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
+        passive: !0
+      }));
+    });
+    o(this, "onWindowTouchMove", (e) => {
+      const t = e.touches[0];
+      if (!L(
+        this.window,
+        this.element,
+        t.clientX,
+        t.clientY
+      )) {
+        this.stopTouchDrag();
+        return;
+      }
+      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
+    });
+    o(this, "onWindowTouchFinish", (e) => {
+      const t = e.changedTouches[0];
+      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
+    });
+    o(this, "onBeforeClear", () => {
+      this.canvas.graph.getAllPortIds().forEach((e) => {
+        const t = this.canvas.graph.getPort(e);
+        this.unhookPortEvents(t.element);
+      });
+    });
+    o(this, "onBeforeDestroy", () => {
+      this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
+        this.onBeforePortUnmarked
+      ), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+    });
+    this.canvas = e, this.element = t, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  render(e) {
-    this.pathShape.render(e);
+  static configure(e, t, s, i) {
+    new F(e, t, s, i);
+  }
+  hookPortEvents(e) {
+    e.addEventListener("mousedown", this.onPortMouseDown, {
+      passive: !0
+    }), e.addEventListener("touchstart", this.onPortTouchStart, {
+      passive: !0
+    });
+  }
+  unhookPortEvents(e) {
+    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
+  }
+  stopMouseDrag() {
+    this.params.onStopDrag(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
+  }
+  stopTouchDrag() {
+    this.params.onStopDrag(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const oe = (r) => {
-  if (r.diagonalDistance === 0)
-    return "";
-  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
-    x: t * e + r.shift.x,
-    y: s * e + r.shift.y
-  }, n = {
-    x: t / r.diagonalDistance,
-    y: s / r.diagonalDistance
-  };
-  return F(
-    n,
-    i,
-    r.arrowLength,
-    r.arrowWidth
-  );
-};
-class qe {
-  constructor(e) {
-    o(this, "svg");
-    o(this, "group", pe());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "color");
-    o(this, "width");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "sourceOffset");
-    o(this, "targetOffset");
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = y(), 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 = we(this.color), this.svg.appendChild(this.group), this.line = fe(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));
+class Q {
+  constructor(e, t, s, i, n) {
+    o(this, "overlayCanvas");
+    o(this, "staticPortId", null);
+    o(this, "isTargetDragging", !0);
+    o(this, "onEdgeCreated", (e) => {
+      this.params.onAfterEdgeCreated(e);
+    });
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+      this.overlayLayer,
+      this.viewportStore
+    ), F.configure(
+      this.canvas,
+      this.overlayLayer,
+      this.window,
+      {
+        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+        onStopDrag: () => {
+          this.resetDragState();
+        },
+        onPortPointerDown: (a, h) => {
+          const d = this.params.connectionTypeResolver(a);
+          return d === null ? !1 : (this.grabPort(a, h, d), !0);
+        },
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
+        },
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
+        }
+      }
+    );
   }
-  render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = ve(
-      e.from,
-      e.to
+  static configure(e, t, s, i, n) {
+    new Q(
+      e,
+      t,
+      s,
+      i,
+      n
     );
-    ue(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = { x: i, y: n }, c = new Ze({
-      to: d,
-      sourceOffset: this.sourceOffset,
-      targetOffset: this.targetOffset,
-      hasSourceArrow: this.sourceArrow !== null,
-      hasTargetArrow: this.targetArrow !== null,
-      arrowLength: this.arrowLength
+  }
+  grabPort(e, t, s) {
+    const i = this.canvas.graph.getPort(e);
+    this.staticPortId = e;
+    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
+      x: a - d.x,
+      y: h - d.y
+    }), g = T(c, {
+      x: t.x - d.x,
+      y: t.y - d.y
+    }), p = {
+      overlayId: b.Static,
+      portCoords: l,
+      portDirection: i.direction
+    }, f = {
+      overlayId: b.Dragging,
+      portCoords: g,
+      portDirection: this.params.dragPortDirection
+    };
+    this.isTargetDragging = s === "direct";
+    const [v, y] = this.isTargetDragging ? [p, f] : [f, p];
+    this.overlayCanvas.addNode(V(v)), this.overlayCanvas.addNode(V(y)), this.overlayCanvas.addEdge({
+      from: v.overlayId,
+      to: y.overlayId,
+      shape: this.params.edgeShapeFactory(b.Edge)
     });
-    this.line.setAttribute("d", c.path);
-    let g = null;
-    this.sourceArrow && (g = oe({
-      diagonalDistance: c.diagonalDistance,
-      to: d,
-      offset: this.sourceOffset,
-      flip: 1,
-      shift: w,
-      arrowWidth: this.arrowWidth,
-      arrowLength: this.arrowLength
-    }), this.sourceArrow.setAttribute("d", g));
-    let l = null;
-    this.targetArrow && (l = oe({
-      diagonalDistance: c.diagonalDistance,
-      to: d,
-      offset: this.targetOffset,
-      flip: -1,
-      shift: d,
-      arrowWidth: this.arrowWidth,
-      arrowLength: this.arrowLength
-    }), this.targetArrow.setAttribute("d", l)), this.afterRenderEmitter.emit({
-      edgePath: c,
-      sourceArrowPath: g,
-      targetArrowPath: l
+  }
+  resetDragState() {
+    this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
+  }
+  tryCreateConnection(e) {
+    const t = ve(this.canvas.graph, e);
+    if (t === null) {
+      this.params.onEdgeCreationInterrupted(
+        this.staticPortId,
+        this.isTargetDragging
+      );
+      return;
+    }
+    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
+    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+  }
+  moveDraggingPort(e) {
+    const t = this.overlayLayer.getBoundingClientRect(), s = {
+      x: e.x - t.x,
+      y: e.y - t.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+    this.overlayCanvas.updateNode(b.Dragging, {
+      x: n.x,
+      y: n.y
     });
   }
 }
-const et = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, tt = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, se = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
-};
-class rt extends Error {
-  constructor(e) {
-    super(e), this.name = "InteractiveEdgeError";
+class _ {
+  constructor(e, t, s, i, n) {
+    o(this, "overlayCanvas");
+    o(this, "staticPortId", null);
+    o(this, "isTargetDragging", !0);
+    o(this, "draggingEdgePayload", null);
+    o(this, "onEdgeReattached", (e) => {
+      this.params.onAfterEdgeReattached(e);
+    });
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+      this.overlayLayer,
+      this.viewportStore
+    ), F.configure(
+      this.canvas,
+      this.overlayLayer,
+      this.window,
+      {
+        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+        onStopDrag: () => {
+          this.resetDragState();
+        },
+        onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
+        },
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
+        }
+      }
+    );
   }
-}
-class me {
-  constructor(e, t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "handle", et());
-    o(this, "onAfterRender");
-    o(this, "interactiveLine");
-    o(this, "interactiveSourceArrow", null);
-    o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof me)
-      throw new rt(
-        "interactive edge can be configured only once"
-      );
-    this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-    const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
-    this.interactiveLine = tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = se(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = se(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
-      this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
+  static configure(e, t, s, i, n) {
+    new _(
+      e,
+      t,
+      s,
+      i,
+      n
+    );
+  }
+  tryStartEdgeDragging(e, t) {
+    const s = this.params.draggingEdgeResolver(e);
+    if (s === null)
+      return !1;
+    const i = this.canvas.graph.getEdge(s);
+    if (i === null)
+      return !1;
+    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
+    this.staticPortId = h, this.isTargetDragging = a;
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
+      x: l.x + l.width / 2,
+      y: l.y + l.height / 2
+    }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), v = T(p, {
+      x: g.x - f.x,
+      y: g.y - f.y
+    }), y = T(p, {
+      x: t.x - f.x,
+      y: t.y - f.y
+    });
+    this.draggingEdgePayload = {
+      id: s,
+      from: i.from,
+      to: i.to,
+      shape: i.shape,
+      priority: i.priority
+    }, this.canvas.removeEdge(s);
+    const E = {
+      overlayId: b.Static,
+      portCoords: v,
+      portDirection: c.direction
+    }, x = {
+      overlayId: b.Dragging,
+      portCoords: y,
+      portDirection: d.direction
+    }, [P, D] = this.isTargetDragging ? [E, x] : [x, E];
+    this.overlayCanvas.addNode(V(P)), this.overlayCanvas.addNode(V(D));
+    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
+    return this.overlayCanvas.addEdge({
+      id: b.Edge,
+      from: P.overlayId,
+      to: D.overlayId,
+      shape: N
+    }), !0;
+  }
+  resetDragState() {
+    this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
+  }
+  moveDraggingPort(e) {
+    const t = this.overlayLayer.getBoundingClientRect(), s = {
+      x: e.x - t.x,
+      y: e.y - t.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+    this.overlayCanvas.updateNode(b.Dragging, {
+      x: n.x,
+      y: n.y
     });
   }
-  render(e) {
-    this.baseEdge.render(e);
+  tryCreateConnection(e) {
+    const t = ve(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
+      const h = this.draggingEdgePayload;
+      this.params.onEdgeReattachInterrupted({
+        id: h.id,
+        from: h.from,
+        to: h.to,
+        shape: h.shape,
+        priority: h.priority
+      });
+      return;
+    }
+    const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = {
+      from: s,
+      to: i,
+      shape: this.draggingEdgePayload.shape,
+      priority: this.draggingEdgePayload.priority
+    }, a = this.params.connectionPreprocessor(n);
+    if (a !== null)
+      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
+    else {
+      const h = this.draggingEdgePayload;
+      this.params.onEdgeReattachPrevented({
+        id: h.id,
+        from: h.from,
+        to: h.to,
+        shape: h.shape,
+        priority: h.priority
+      });
+    }
   }
 }
-class ut {
-  constructor(e, t) {
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "svg");
-    /**
-     * @deprecated
-     * use midpointElement instead
-     */
-    o(this, "medianElement");
-    this.baseShape = e, this.midpointElement = t, this.medianElement = this.midpointElement, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
-      const i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
-      this.midpointElement.style.setProperty("transform", n);
-    });
+const ht = () => {
+  const r = document.createElement("div");
+  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
+}, z = () => {
+  const r = document.createElement("div");
+  return r.style.position = "absolute", r.style.inset = "0", r;
+}, de = () => {
+  const r = z();
+  return r.style.pointerEvents = "none", r;
+};
+class at {
+  constructor(e) {
+    o(this, "background", z());
+    o(this, "main", z());
+    o(this, "overlayConnectablePorts", de());
+    o(this, "overlayDraggableEdges", de());
+    o(this, "host", ht());
+    this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
-  render(e) {
-    this.baseShape.render(e);
+  destroy() {
+    this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const ye = (r) => {
+const X = (r) => () => r, ce = X(0), dt = () => {
+  let r = 0;
+  return () => r++;
+}, ct = (r, e) => {
+  let t = ce, s = ce;
+  const i = dt();
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = X(r)), typeof e == "number" && (s = X(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+    nodesPriorityFn: t,
+    edgesPriorityFn: s
+  };
+}, q = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
@@ -2491,7 +2664,7 @@ const ye = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Ke({
+      return () => new Je({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2519,7 +2692,7 @@ const ye = (r) => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new qe({
+      return () => new Pe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2530,7 +2703,7 @@ const ye = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Je({
+      return () => new Ze({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2544,72 +2717,72 @@ const ye = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, ot = (r) => {
-  var t, s, i, n, h;
-  const e = ke(
+}, gt = (r) => {
+  var t, s, i, n, a;
+  const e = ct(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? le,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ye(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: q(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, st = (r) => {
-  var p, f, v, E, A, S;
+}, lt = (r) => {
+  var p, f, v, y, E, x;
   const e = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), t = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.dragCursor, a = h !== void 0 ? h : "grab", d = (A = r == null ? void 0 : r.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, g = (S = r == null ? void 0 : r.mouse) == null ? void 0 : S.mouseUpEventVerifier;
+  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, a = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
-    dragCursor: a,
+    dragCursor: h,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: g !== void 0 ? g : (b) => b.button === 0,
+    mouseUpEventVerifier: l !== void 0 ? l : (P) => P.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
   };
-}, it = (r) => {
+}, ut = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
-    let h = n.nextTransform.x, a = n.nextTransform.y;
-    h < e && h < n.prevTransform.x && (h = Math.min(n.prevTransform.x, e));
+    let a = n.nextTransform.x, h = n.nextTransform.y;
+    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
-    h > c && h > n.prevTransform.x && (h = Math.max(n.prevTransform.x, c)), a < s && a < n.prevTransform.y && (a = Math.min(n.prevTransform.y, s));
-    const g = n.canvasHeight * n.prevTransform.scale, l = i - g;
-    return a > l && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: h, y: a };
+    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
+    const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
+    return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, nt = (r) => {
+}, pt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
-    const h = n.prevTransform, a = n.nextTransform;
-    let d = a.scale, c = a.x, g = a.y;
-    if (a.scale > i && a.scale > h.scale) {
-      d = Math.max(h.scale, i), c = h.x, g = h.y;
-      const l = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * l, g = h.y + (a.y - h.y) * l;
+    const a = n.prevTransform, h = n.nextTransform;
+    let d = h.scale, c = h.x, l = h.y;
+    if (h.scale > i && h.scale > a.scale) {
+      d = Math.max(a.scale, i), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
-    if (a.scale < s && a.scale < h.scale) {
-      d = Math.min(h.scale, s), c = h.x, g = h.y;
-      const l = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * l, g = h.y + (a.y - h.y) * l;
+    if (h.scale < s && h.scale < a.scale) {
+      d = Math.min(a.scale, s), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
     return {
       scale: d,
       x: c,
-      y: g
+      y: l
     };
   };
-}, ht = (r) => (e) => r.reduce(
+}, wt = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -2617,75 +2790,75 @@ const ye = (r) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ie = (r) => {
+), ge = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return nt({
+      return pt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return it({
+      return ut({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, ne = (r) => {
-  var v, E, A, S, b, N, M, L, J, K, Q, _;
+}, le = (r) => {
+  var v, y, E, x, P, D, N, R, ee, te, re, oe;
   const e = (v = r == null ? void 0 : r.scale) == null ? void 0 : v.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = ht(
+  s !== void 0 ? Array.isArray(s) ? i = wt(
     s.map(
-      (P) => ie(P)
+      (M) => ge(M)
     )
-  ) : i = ie(s) : i = (P) => P.nextTransform;
-  const n = ((E = r == null ? void 0 : r.shift) == null ? void 0 : E.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
-  }), a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
-  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, g = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, l = g !== void 0 ? g : (P) => P.button === 0, p = (M = r == null ? void 0 : r.scale) == null ? void 0 : M.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
+  ) : i = ge(s) : i = (M) => M.nextTransform;
+  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
+  }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
+    onTransformStarted: ((R = r == null ? void 0 : r.events) == null ? void 0 : R.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((J = r == null ? void 0 : r.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
+    onTransformFinished: ((ee = r == null ? void 0 : r.events) == null ? void 0 : ee.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: h,
-    onTransformChange: a,
+    onBeforeTransformChange: a,
+    onTransformChange: h,
     transformPreprocessor: i,
     shiftCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l,
+    mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((K = r == null ? void 0 : r.scale) == null ? void 0 : K.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((Q = r == null ? void 0 : r.events) == null ? void 0 : Q.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((te = r == null ? void 0 : r.scale) == null ? void 0 : te.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((re = r == null ? void 0 : r.events) == null ? void 0 : re.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((_ = r == null ? void 0 : r.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformFinished) ?? (() => {
     })
   };
-}, at = (r, e) => {
+}, ft = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, dt = (r) => r instanceof SVGElement ? r : at(
+}, vt = (r) => r instanceof SVGElement ? r : ft(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), ct = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = dt(r.renderer ?? {});
+), mt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = vt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, lt = (r, e, t) => {
-  var c, g, l;
-  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
-  }, a = () => {
+}, yt = (r, e, t) => {
+  var c, l, g;
+  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
+  }, h = () => {
   }, d = () => {
   };
   return {
@@ -2693,14 +2866,33 @@ const ye = (r) => {
     connectionPreprocessor: r.connectionPreprocessor ?? i,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
-    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? h,
-    onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? a,
+    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
+    onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
+    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? ye(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? q(r.edgeShape) : e
+  };
+}, Et = (r, e) => {
+  var c, l, g;
+  const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
+    const f = e.getPortAdjacentEdgeIds(p);
+    return f.length > 0 ? f[f.length - 1] : null;
+  }, a = () => {
+  }, h = () => {
+  }, d = () => {
+  };
+  return {
+    connectionPreprocessor: r.connectionPreprocessor ?? t,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
+    draggingEdgeResolver: r.draggingEdgeResolver ?? n,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? q(r.draggingEdgeShape) : null,
+    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
+    onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
+    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
 };
-class wt {
+class St {
   constructor(e) {
     o(this, "element", null);
     o(this, "canvasDefaults", {});
@@ -2708,12 +2900,14 @@ class wt {
     o(this, "transformConfig", {});
     o(this, "backgroundConfig", {});
     o(this, "connectablePortsConfig", {});
+    o(this, "draggableEdgesConfig", {});
     o(this, "virtualScrollConfig");
     o(this, "hasDraggableNode", !1);
     o(this, "hasTransformableViewport", !1);
     o(this, "hasResizeReactiveNodes", !1);
     o(this, "hasBackground", !1);
     o(this, "hasUserConnectablePorts", !1);
+    o(this, "hasUserDraggableEdges", !1);
     o(this, "boxRenderingTrigger");
     o(this, "window", window);
     e !== void 0 && (this.element = e);
@@ -2774,70 +2968,86 @@ class wt {
   enableUserConnectablePorts(e) {
     return this.connectablePortsConfig = e ?? {}, this.hasUserConnectablePorts = !0, this;
   }
+  enableUserDraggableEdges(e) {
+    return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
+  }
   /**
    * builds final canvas
    */
   build() {
     if (this.element === null)
-      throw new x(
+      throw new S(
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new ae());
-    const t = new ce(), s = new Le(), i = new Oe(this.element);
-    let n = new he(
+    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new pe());
+    const t = new fe(), s = new $e(), i = new at(this.element);
+    let n = new ue(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new Te(n, t, e));
-    const h = ot(this.canvasDefaults), a = new de(
+    e !== void 0 && (n = new Ue(n, t, e));
+    const a = gt(this.canvasDefaults), h = new we(
       this.element,
       t,
       s,
       n,
-      h
+      a
     );
-    if (this.hasBackground && Y.configure(
-      a,
-      ct(this.backgroundConfig),
+    if (this.hasBackground && J.configure(
+      h,
+      mt(this.backgroundConfig),
       i.background
-    ), this.hasResizeReactiveNodes && k.configure(a), this.hasDraggableNode && z.configure(
-      a,
+    ), this.hasResizeReactiveNodes && Y.configure(h), this.hasDraggableNode && K.configure(
+      h,
       i.main,
       this.window,
-      st(this.dragConfig)
+      lt(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = lt(
+      const c = yt(
         this.connectablePortsConfig,
-        h.edges.shapeFactory,
-        h.ports.direction
+        a.edges.shapeFactory,
+        a.ports.direction
       );
-      H.configure(
-        a,
-        i.overlay,
+      Q.configure(
+        h,
+        i.overlayConnectablePorts,
         s,
         this.window,
         c
       );
     }
-    this.virtualScrollConfig !== void 0 ? X.configure(
-      a,
+    if (this.hasUserDraggableEdges) {
+      const c = Et(
+        this.draggableEdgesConfig,
+        h.graph
+      );
+      _.configure(
+        h,
+        i.overlayDraggableEdges,
+        s,
+        this.window,
+        c
+      );
+    }
+    this.virtualScrollConfig !== void 0 ? Z.configure(
+      h,
       i.main,
       this.window,
-      ne(this.transformConfig),
+      le(this.transformConfig),
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && U.configure(
-      a,
+    ) : this.hasTransformableViewport && $.configure(
+      h,
       i.main,
       this.window,
-      ne(this.transformConfig)
+      le(this.transformConfig)
     ), this.reset();
     const d = () => {
-      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
+      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
     };
-    return a.onBeforeDestroy.subscribe(d), a;
+    return h.onBeforeDestroy.subscribe(d), h;
   }
   /**
    * @deprecated
@@ -2848,17 +3058,17 @@ class wt {
   }
 }
 export {
-  Je as BezierEdgeShape,
-  wt as CanvasBuilder,
-  qe as DirectEdgeShape,
-  ae as EventSubject,
-  Ke as HorizontalEdgeShape,
-  x as HtmlGraphError,
-  rt as InteractiveEdgeError,
-  me as InteractiveEdgeShape,
-  C as LineEdgeShape,
-  ut as MedianEdgeShape,
-  ut as MidpointEdgeShape,
+  Ze as BezierEdgeShape,
+  St as CanvasBuilder,
+  Pe as DirectEdgeShape,
+  pe as EventSubject,
+  Je as HorizontalEdgeShape,
+  S as HtmlGraphError,
+  tt as InteractiveEdgeError,
+  Te as InteractiveEdgeShape,
+  W as LineEdgeShape,
+  xt as MedianEdgeShape,
+  xt as MidpointEdgeShape,
   Qe as StraightEdgeShape,
   _e as VerticalEdgeShape
 };