npm - @html-graph/html-graph - Versions diffs - 3.11.1 → 3.13.0 - Mend

@html-graph/html-graph 3.11.1 → 3.13.0

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

Files changed (5) hide show

package/dist/html-graph.js CHANGED Viewed

@@ -1,22 +1,22 @@
-var ve = Object.defineProperty;
-var ye = (r, e, t) => e in r ? ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => ye(r, typeof e != "symbol" ? e + "" : e, t);
-const me = () => {
+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 = () => {
   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;
-}, Ae = () => {
+}, Se = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ee = (r) => {
+}, be = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, D = (r, e) => ({
+}, T = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class ne {
+class he {
   constructor(e, t, s) {
-    o(this, "host", Ae());
-    o(this, "container", me());
+    o(this, "host", Se());
+    o(this, "container", xe());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +26,7 @@ class ne {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ee(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    be(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);
@@ -88,7 +88,7 @@ class ne {
     const h = {
       x: s.left - i.left,
       y: s.top - i.top
-    }, a = D(n, h);
+    }, a = T(n, h);
     return {
       x: a.x,
       y: a.y,
@@ -100,7 +100,7 @@ class ne {
     };
   }
 }
-class xe {
+class Pe {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -120,7 +120,7 @@ class xe {
     return a <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class Se {
+class Te {
   constructor(e, t, s) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -144,7 +144,7 @@ class Se {
         this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Pe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -198,7 +198,7 @@ class Se {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class he {
+class ae {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -214,11 +214,11 @@ class he {
     });
   }
 }
-const E = () => {
-  const r = new he();
+const y = () => {
+  const r = new ae();
   return [r, r];
 };
-class be {
+class De {
   constructor(e) {
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
@@ -231,7 +231,7 @@ class be {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Te {
+class Ne {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -326,7 +326,7 @@ class Te {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class $ {
+class W {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -342,13 +342,13 @@ class $ {
     this.counter = 0;
   }
 }
-class S extends Error {
+class x extends Error {
   constructor() {
     super(...arguments);
     o(this, "name", "HtmlGraphError");
   }
 }
-class ae {
+class de {
   constructor(e, t, s, i, n) {
     /**
      * provides api for accessing model of rendered graph
@@ -358,13 +358,13 @@ class ae {
      * provides api for accessing viewport state
      */
     o(this, "viewport");
-    o(this, "nodeIdGenerator", new $(
+    o(this, "nodeIdGenerator", new W(
       (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new $(
+    o(this, "portIdGenerator", new W(
       (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new $(
+    o(this, "edgeIdGenerator", new W(
       (e) => this.graph.getEdge(e) !== null
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -416,13 +416,13 @@ class ae {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.defaults = n, this.graph = new Te(this.graphStore), this.viewport = new be(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.element = e, this.graphStore = 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.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] = E();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = y();
   }
   /**
    * adds new node
@@ -430,9 +430,9 @@ class ae {
   addNode(e) {
     const t = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(t) !== null)
-      throw new S("failed to add node with existing id");
+      throw new x("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(e.element) !== void 0)
-      throw new S(
+      throw new x(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
@@ -440,8 +440,8 @@ class ae {
       element: e.element,
       x: e.x,
       y: e.y,
-      centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
-      priority: e.priority ?? this.defaults.nodes.priorityFn()
+      centerFn: e.centerFn ?? this.params.nodes.centerFn,
+      priority: e.priority ?? this.params.nodes.priorityFn()
     }), e.ports !== void 0)
       for (const s of e.ports)
         this.markPort({
@@ -457,7 +457,7 @@ class ae {
    */
   updateNode(e, t) {
     if (this.graph.getNode(e) === null)
-      throw new S("failed to update non existing node");
+      throw new x("failed to update non existing node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
@@ -467,7 +467,7 @@ class ae {
    */
   removeNode(e) {
     if (this.graph.getNode(e) === null)
-      throw new S("failed to remove non existing node");
+      throw new x("failed to remove non existing node");
     return this.graphStore.removeNode(e), this;
   }
   /**
@@ -476,14 +476,14 @@ class ae {
   markPort(e) {
     const t = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(t) !== null)
-      throw new S("failed to add port with existing id");
+      throw new x("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
-      throw new S("failed to mark port for nonexistent node");
+      throw new x("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: t,
       element: e.element,
       nodeId: e.nodeId,
-      direction: e.direction ?? this.defaults.ports.direction
+      direction: e.direction ?? this.params.ports.direction
     }), this;
   }
   /**
@@ -491,7 +491,7 @@ class ae {
    */
   updatePort(e, t) {
     if (this.graph.getPort(e) === null)
-      throw new S("failed to update nonexistent port");
+      throw new x("failed to update nonexistent port");
     return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
@@ -500,7 +500,7 @@ class ae {
    */
   unmarkPort(e) {
     if (this.graph.getPort(e) === null)
-      throw new S("failed to unmark non existing port");
+      throw new x("failed to unmark non existing port");
     return this.graphStore.removePort(e), this;
   }
   /**
@@ -509,17 +509,17 @@ class ae {
   addEdge(e) {
     const t = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(t) !== null)
-      throw new S("failed to add edge with existing id");
+      throw new x("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
-      throw new S("failed to add edge from nonexistent port");
+      throw new x("failed to add edge from nonexistent port");
     if (this.graph.getPort(e.to) === null)
-      throw new S("failed to add edge to nonexistent port");
+      throw new x("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: t,
       from: e.from,
       to: e.to,
-      shape: e.shape ?? this.defaults.edges.shapeFactory(t),
-      priority: e.priority ?? this.defaults.edges.priorityFn()
+      shape: e.shape ?? this.params.edges.shapeFactory(t),
+      priority: e.priority ?? this.params.edges.priorityFn()
     }), this;
   }
   /**
@@ -527,7 +527,7 @@ class ae {
    */
   updateEdge(e, t) {
     if (this.graph.getEdge(e) === null)
-      throw new S("failed to update nonexistent edge");
+      throw new x("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
@@ -535,7 +535,7 @@ class ae {
    */
   removeEdge(e) {
     if (this.graph.getEdge(e) === null)
-      throw new S("failed to remove nonexistent edge");
+      throw new x("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
   /**
@@ -571,7 +571,7 @@ class ae {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class Pe {
+class Me {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -611,7 +611,7 @@ class Pe {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class de {
+class ce {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -620,7 +620,7 @@ class de {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new Pe());
+    o(this, "elementPorts", new Me());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -647,7 +647,7 @@ class de {
     o(this, "onBeforeEdgeRemoved");
     o(this, "beforeClearEmitter");
     o(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
+    [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();
   }
   addNode(e) {
     const t = /* @__PURE__ */ new Map(), s = {
@@ -802,7 +802,7 @@ const q = (r) => ({
   x: 0,
   y: 0
 };
-class De {
+class Le {
   constructor() {
     o(this, "viewportMatrix", ee);
     o(this, "contentMatrix", ee);
@@ -810,7 +810,7 @@ class De {
     o(this, "onAfterUpdated");
     o(this, "beforeUpdateEmitter");
     o(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = E(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = E();
+    [this.afterUpdateEmitter, this.onAfterUpdated] = y(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = y();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -866,25 +866,10 @@ class k {
     this.canvas.updateNode(t);
   }
 }
-const Ne = (r) => {
-  var v, p, f, A, m, x;
-  const e = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDrag) ?? (() => {
-  }), t = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onBeforeNodeDrag) ?? (() => !0), s = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (A = r == null ? void 0 : r.mouse) == null ? void 0 : A.dragCursor, a = h !== void 0 ? h : "grab", d = (m = r == null ? void 0 : r.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, g = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
-  return {
-    moveOnTop: i,
-    moveEdgesOnTop: n,
-    dragCursor: a,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: g !== void 0 ? g : (b) => b.button === 0,
-    onNodeDrag: e,
-    onBeforeNodeDrag: t,
-    onNodeDragFinished: s
-  };
-}, Me = (r, e, 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;
-}, Le = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, N = (r, e, t, s) => Me(e, t, s) && Le(r, t, s), B = (r, e) => {
+}, 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) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 };
 class z {
@@ -955,7 +940,7 @@ class z {
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!N(
+      if (!D(
         this.window,
         this.element,
         e.clientX,
@@ -973,7 +958,7 @@ class z {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!N(
+      if (!D(
         this.window,
         this.element,
         t.clientX,
@@ -993,8 +978,7 @@ class z {
     o(this, "onWindowTouchFinish", () => {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
-    o(this, "config");
-    this.canvas = e, this.element = t, this.window = s, this.config = Ne(i), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    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);
   }
   static configure(e, t, s, i) {
     new z(e, t, s, i);
@@ -1003,13 +987,13 @@ class z {
     const i = this.graph.getNode(e);
     if (i === null)
       return;
-    const n = this.canvas.viewport.getContentMatrix(), h = D(n, {
+    const n = this.canvas.viewport.getContentMatrix(), h = T(n, {
       x: i.x,
       y: i.y
-    }), a = D(
+    }), a = T(
       { scale: 1, x: t, y: s },
       h
-    ), d = this.canvas.viewport.getViewportMatrix(), c = D(d, a);
+    ), 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,
@@ -1058,98 +1042,11 @@ class z {
     this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
 }
-const Re = (r) => {
-  const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
-  return (n) => {
-    let h = n.nextTransform.x, a = n.nextTransform.y;
-    h < e && h < n.prevTransform.x && (h = 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 };
-  };
-}, Ie = (r) => {
-  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
-  return (n) => {
-    const h = n.prevTransform, a = n.nextTransform;
-    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;
-    }
-    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;
-    }
-    return {
-      scale: d,
-      x: c,
-      y: g
-    };
-  };
-}, Be = (r) => (e) => r.reduce(
-  (t, s) => s({
-    prevTransform: e.prevTransform,
-    nextTransform: t,
-    canvasWidth: e.canvasWidth,
-    canvasHeight: e.canvasHeight
-  }),
-  e.nextTransform
-), te = (r) => {
-  if (typeof r == "function")
-    return r;
-  switch (r.type) {
-    case "scale-limit":
-      return Ie({
-        minContentScale: r.minContentScale ?? 0,
-        maxContentScale: r.maxContentScale ?? 1 / 0
-      });
-    case "shift-limit":
-      return Re({
-        minX: r.minX ?? -1 / 0,
-        maxX: r.maxX ?? 1 / 0,
-        minY: r.minY ?? -1 / 0,
-        maxY: r.maxY ?? 1 / 0
-      });
-  }
-}, Ve = (r) => {
-  var f, A, m, x, b, T, M, L, J, K, Q, _;
-  const e = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
-  let i;
-  s !== void 0 ? Array.isArray(s) ? i = Be(
-    s.map(
-      (P) => te(P)
-    )
-  ) : i = te(s) : i = (P) => P.nextTransform;
-  const n = ((A = r == null ? void 0 : r.shift) == null ? void 0 : A.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((m = r == null ? void 0 : r.events) == null ? void 0 : m.onBeforeTransformChange) ?? (() => {
-  }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, g = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, l = g !== void 0 ? g : (P) => P.button === 0, v = (M = r == null ? void 0 : r.scale) == null ? void 0 : M.mouseWheelEventVerifier, p = v !== void 0 ? v : () => !0;
-  return {
-    wheelSensitivity: t,
-    onTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
-    }),
-    onTransformFinished: ((J = r == null ? void 0 : r.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
-    }),
-    onBeforeTransformChange: h,
-    onTransformChange: a,
-    transformPreprocessor: i,
-    shiftCursor: n,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l,
-    mouseWheelEventVerifier: p,
-    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) ?? (() => {
-    }),
-    onResizeTransformFinished: ((_ = r == null ? void 0 : r.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
-    })
-  };
-}, Ce = (r, e, t) => ({
+const Be = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Ue = (r, e, t, s) => ({
+}), 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
@@ -1172,7 +1069,7 @@ const Re = (r) => {
     touches: e
   };
 };
-class C {
+class U {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
@@ -1182,14 +1079,14 @@ class C {
       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.config.mouseDownEventVerifier(e) || (B(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      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 = N(
+      const t = D(
         this.window,
         this.element,
         e.clientX,
@@ -1203,15 +1100,15 @@ class C {
       this.moveViewport(s, i);
     });
     o(this, "onWindowMouseUp", (e) => {
-      this.element === null || !this.config.mouseUpEventVerifier(e) || this.stopMouseDrag();
+      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
     o(this, "onWheelScroll", (e) => {
-      if (!this.config.mouseWheelEventVerifier(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.config.wheelSensitivity : 1 / this.config.wheelSensitivity);
-      this.wheelFinishTimer === null && this.config.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
-        this.transformInProgress || this.config.onTransformFinished(), this.wheelFinishTimer = null;
-      }, this.config.scaleWheelFinishTimeout);
+      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) {
@@ -1229,7 +1126,7 @@ class C {
     o(this, "onWindowTouchMove", (e) => {
       const t = I(e);
       if (!t.touches.every(
-        (i) => N(this.window, this.element, i[0], i[1])
+        (i) => D(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1247,21 +1144,20 @@ class C {
       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.config.transformPreprocessor({
+      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.config.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.config.onResizeTransformFinished();
+      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
     }));
-    o(this, "config");
     o(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = t, this.window = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Ve(i), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
@@ -1270,15 +1166,10 @@ class C {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new C(
-      e,
-      t,
-      s,
-      i
-    );
+    new U(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = Ce(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.config.transformPreprocessor({
+    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,
@@ -1287,7 +1178,7 @@ class C {
     this.performTransform(a);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = Ue(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+    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,
@@ -1308,13 +1199,13 @@ class C {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
   performTransform(e) {
-    this.config.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.config.onTransformChange();
+    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
   }
   startRegisteredTransform() {
-    this.transformInProgress = !0, this.config.onTransformStarted();
+    this.transformInProgress = !0, this.params.onTransformStarted();
   }
   finishRegisteredTransform() {
-    this.transformInProgress = !1, this.config.onTransformFinished();
+    this.transformInProgress = !1, this.params.onTransformFinished();
   }
 }
 class X {
@@ -1349,44 +1240,35 @@ class X {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    var p, f, A, m, x;
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.virtualScrollOptions = h, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((b) => {
-      const T = b[0];
-      this.viewportWidth = T.contentRect.width, this.viewportHeight = T.contentRect.height, this.scheduleLoadAreaAroundViewport();
+    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 = ((p = i == null ? void 0 : i.events) == null ? void 0 : p.onResizeTransformStarted) ?? (() => {
-    }), d = ((f = i == null ? void 0 : i.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
-    }), c = ((A = i == null ? void 0 : i.events) == null ? void 0 : A.onTransformChange) ?? (() => {
-    }), g = ((m = i == null ? void 0 : i.events) == null ? void 0 : m.onBeforeTransformChange) ?? (() => {
-    }), l = ((x = i == null ? void 0 : i.events) == null ? void 0 : x.onTransformFinished) ?? (() => {
-    }), v = {
+    const a = {
       ...i,
-      events: {
-        ...i == null ? void 0 : i.events,
-        onResizeTransformStarted: () => {
-          this.userTransformInProgress = !0, a();
-        },
-        onResizeTransformFinished: () => {
-          this.userTransformInProgress = !1, d();
-        },
-        onBeforeTransformChange: () => {
-          this.userTransformInProgress = !0, g();
-        },
-        onTransformChange: () => {
-          this.userTransformInProgress = !1;
-          const b = this.viewportMatrix;
-          this.viewportMatrix = this.viewport.getViewportMatrix(), b.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), c();
-        },
-        onTransformFinished: () => {
-          this.scheduleLoadAreaAroundViewport(), l();
-        }
+      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();
       }
     };
-    C.configure(
+    U.configure(
       e,
       this.element,
       this.window,
-      v
+      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) {
@@ -1413,41 +1295,24 @@ class X {
     this.trigger.emit({ x: s, y: i, width: n, height: h });
   }
 }
-const $e = () => {
+const Ue = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, We = () => {
+}, Ce = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Fe = () => {
+}, We = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
-}, Oe = (r, e) => {
-  const t = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "circle"
-  );
-  return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, ke = (r) => r instanceof SVGElement ? r : Oe(
-  (r == null ? void 0 : r.radius) ?? 1.5,
-  (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), ze = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = ke(r.renderer ?? {});
-  return {
-    tileWidth: t,
-    tileHeight: s,
-    renderer: i,
-    maxViewportScale: r.maxViewportScale ?? 10
-  };
 };
 class Y {
   constructor(e, t, s) {
-    o(this, "svg", $e());
-    o(this, "patternRenderingRectangle", We());
-    o(this, "pattern", Fe());
+    o(this, "svg", Ue());
+    o(this, "patternRenderingRectangle", Ce());
+    o(this, "pattern", We());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -1470,13 +1335,11 @@ class Y {
         this.onAfterTransformUpdated
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    this.canvas = e, this.host = s;
-    const i = ze(t);
-    this.tileWidth = i.tileWidth, this.tileHeight = i.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = i.renderer, this.maxViewportScale = i.maxViewportScale;
-    const n = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
-    this.patternContent.setAttribute("transform", n), this.pattern.appendChild(this.patternContent);
-    const h = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    h.appendChild(this.pattern), this.svg.appendChild(h), 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);
+    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);
@@ -1486,26 +1349,12 @@ class Y {
     t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const Xe = (r) => {
-  var a, d, c;
-  const e = () => "direct", t = (g) => g, s = (g) => g.button === 0, i = () => {
-  }, n = () => {
-  }, h = () => {
-  };
-  return {
-    connectionTypeResolver: r.connectionTypeResolver ?? e,
-    connectionPreprocessor: r.connectionPreprocessor ?? t,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
-    onAfterEdgeCreated: ((a = r.events) == null ? void 0 : a.onAfterEdgeCreated) ?? i,
-    onEdgeCreationInterrupted: ((d = r.events) == null ? void 0 : d.onEdgeCreationInterrupted) ?? h,
-    onEdgeCreationPrevented: ((c = r.events) == null ? void 0 : c.onEdgeCreationPrevented) ?? n,
-    dragPortDirection: r.dragPortDirection ?? void 0
-  };
-};
+const le = (r, e) => ({
+  x: r / 2,
+  y: e / 2
+});
 class H {
-  constructor(e, t, s, i, n, h) {
-    o(this, "config");
+  constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticOverlayPortId", "static");
     o(this, "draggingOverlayPortId", "dragging");
@@ -1521,14 +1370,14 @@ class H {
     });
     o(this, "onPortMouseDown", (e) => {
       const t = e.currentTarget;
-      this.config.mouseDownEventVerifier(e) && this.isPortConnectionAllowed(t) && (e.stopPropagation(), this.grabPort(t, { x: e.clientX, y: e.clientY }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && this.isPortConnectionAllowed(t) && (e.stopPropagation(), this.grabPort(t, { x: e.clientX, y: e.clientY }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!N(
+      if (!D(
         this.window,
         this.overlayLayer,
         e.clientX,
@@ -1540,7 +1389,7 @@ class H {
       this.moveDraggingNode({ x: e.clientX, y: e.clientY });
     });
     o(this, "onWindowMouseUp", (e) => {
-      this.config.mouseUpEventVerifier(e) && (this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
+      this.params.mouseUpEventVerifier(e) && (this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
     });
     o(this, "onPortTouchStart", (e) => {
       const t = e.currentTarget;
@@ -1558,7 +1407,7 @@ class H {
     });
     o(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!N(
+      if (!D(
         this.window,
         this.overlayLayer,
         t.clientX,
@@ -1585,53 +1434,64 @@ class H {
       ), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     o(this, "onEdgeCreated", (e) => {
-      this.config.onAfterEdgeCreated(e);
+      this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.config = Xe(h);
-    const a = new de(), d = new ne(
-      a,
+    this.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
-    );
-    this.overlayCanvas = new ae(
+    ), d = {
+      nodes: {
+        centerFn: le,
+        priorityFn: () => 0
+      },
+      edges: {
+        shapeFactory: this.params.edgeShapeFactory,
+        priorityFn: () => 0
+      },
+      ports: {
+        direction: 0
+      }
+    };
+    this.overlayCanvas = new de(
       this.overlayLayer,
-      a,
+      h,
       this.viewportStore,
-      d,
-      n
+      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, h) {
+  static configure(e, t, s, i, n) {
     new H(
       e,
       t,
       s,
       i,
-      n,
-      h
+      n
     );
   }
   grabPort(e, t) {
     const s = this.canvas.graph.getElementPortsIds(e)[0], i = this.canvas.graph.getPort(s);
     this.staticPortId = s;
-    const n = this.config.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 = D(g, {
+    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
-    }), v = D(g, {
+    }), p = T(g, {
       x: t.x - c.x,
       y: t.y - c.y
-    }), p = {
+    }), f = {
       overlayId: this.staticOverlayPortId,
       portCoords: l,
       portDirection: i.direction
-    }, f = {
+    }, v = {
       overlayId: this.draggingOverlayPortId,
-      portCoords: v,
-      portDirection: this.config.dragPortDirection
+      portCoords: p,
+      portDirection: this.params.dragPortDirection
     };
     this.isDirect = n === "direct";
-    const A = this.isDirect ? p : f, m = this.isDirect ? f : p;
-    this.createOverlayGraph(A, m);
+    const E = this.isDirect ? f : v, A = this.isDirect ? v : f;
+    this.createOverlayGraph(E, A);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1680,17 +1540,17 @@ class H {
   tryCreateConnection(e) {
     const t = this.findPortAtPoint(e);
     if (t === null) {
-      this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
+      this.params.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
       return;
     }
-    const s = this.isDirect ? this.staticPortId : t, i = this.isDirect ? t : this.staticPortId, n = { from: s, to: i }, h = this.config.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(n);
+    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 = D(i, s);
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
     this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
       x: n.x,
       y: n.y
@@ -1713,60 +1573,57 @@ class H {
   }
   isPortConnectionAllowed(e) {
     const t = this.canvas.graph.getElementPortsIds(e)[0];
-    return this.config.connectionTypeResolver(t) !== null;
+    return this.params.connectionTypeResolver(t) !== null;
   }
 }
-const Ye = () => {
+const $e = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, W = () => {
+}, $ = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 };
-class He {
+class Oe {
   constructor(e) {
-    o(this, "background", W());
-    o(this, "main", W());
-    o(this, "overlay", W());
-    o(this, "host", Ye());
+    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 je = (r, e) => ({
-  x: r / 2,
-  y: e / 2
-}), F = (r) => () => r, re = F(0), Ge = () => {
+const O = (r) => () => r, te = O(0), Fe = () => {
   let r = 0;
   return () => r++;
-}, Ze = (r, e) => {
-  let t = re, s = re;
-  const i = Ge();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = F(r)), typeof e == "number" && (s = F(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+}, 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
   };
-}, y = (r, e, t) => ({
+}, m = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
 }), w = {
   x: 0,
   y: 0
 };
-class Je {
+class ze {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
-    this.median = { x: t.x / 2, y: t.y / 2 };
-    const s = y(
+    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 = y(
+    ), i = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1780,63 +1637,63 @@ class Je {
     this.path = `${d}${a}${c}`;
   }
 }
-const ce = (r, e, t, s) => ({
+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 Ke {
+class Xe {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, s = this.params.hasTargetArrow ? y(
+    ) : 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 = y(
+    ) : 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 = y(
+    }, l = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), v = {
+    ), p = {
       x: l.x + a,
       y: l.y + d
-    }, p = {
-      x: (g.x + v.x) / 2,
-      y: (g.y + v.y) / 2
     }, 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
-    }, A = {
+    }, E = {
       x: l.x - this.params.curvature * this.params.targetDirection.x,
       y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, m = {
+    }, A = {
       x: c.x + a,
       y: c.y + d
-    }, x = {
+    }, S = {
       x: l.x + a,
       y: l.y + d
     };
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${f.x} ${f.y} ${m.x} ${m.y} ${p.x} ${p.y}`,
-      `C ${x.x} ${x.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
+      `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.median = ce(p, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = ge(f, e.flipX, e.flipY, e.to);
   }
 }
 const R = (r, e) => {
@@ -1846,54 +1703,54 @@ const R = (r, e) => {
     let i = 0, n = 0, h = 0;
     r.forEach((a, d) => {
       let c = 0, g = 0, l = 0;
-      const v = d > 0, p = d < s, f = v && p;
-      if (v && (c = -i, g = -n, l = h), p) {
+      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 m = h !== 0 ? Math.min((f ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = f ? { x: a.x + i * m, y: a.y + n * m } : a, T = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, M = f ? { x: a.x + c * T, y: a.y + g * T } : a;
-      d > 0 && t.push(`L ${M.x} ${M.y}`), f && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
+      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}`
       );
     });
   }
   return t.join(" ");
 };
-class Qe {
+class Ye {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
-    this.median = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    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 ? y(
+    ) : 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 = y(
+    ) : 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 = y(
+    ), 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
-    }, v = { x: l.x, y: g }, p = {
+    }, 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
-    }, f = { x: p.x, y: g };
+    }, v = { x: f.x, y: g };
     this.path = R(
-      [s, a, l, v, f, p, d, i],
+      [s, a, l, p, v, f, d, i],
       this.params.roundness
     );
   }
@@ -1901,57 +1758,57 @@ class Qe {
 class j {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, s = this.params.hasTargetArrow ? y(
+    ) : 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 = y(
+    ) : 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 = y(
+    ), 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
-    ), v = { x: l.x + d, y: l.y + c }, p = { x: (g.x + v.x) / 2, y: (g.y + v.y) / 2 };
-    this.median = ce(p, e.flipX, e.flipY, e.to), this.path = R(
-      [t, n, g, v, l, s],
+    ), 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
     );
   }
 }
-class _e {
+class He {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
-    this.median = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    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 ? y(
+    ) : 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 = y(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = m(
       { x: n, y: w.y },
       this.params.sourceDirection,
       w
-    ), a = y(
+    ), a = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1959,41 +1816,41 @@ class _e {
     this.path = R([s, h, a, i], this.params.roundness);
   }
 }
-class qe {
+class je {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
-    this.median = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    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 ? y(
+    ) : 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 = y(
+    ) : 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 = y(
+    ), 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
-    }, v = { x: g, y: l.y }, p = {
+    }, 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
-    }, f = { x: g, y: p.y };
+    }, v = { x: g, y: f.y };
     this.path = R(
-      [s, a, l, v, f, p, d, i],
+      [s, a, l, p, v, f, d, i],
       this.params.roundness
     );
   }
@@ -2001,7 +1858,7 @@ class qe {
 class G {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    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 },
@@ -2013,15 +1870,15 @@ class G {
       { x: i, y: w.y },
       { x: this.params.arrowLength, y: w.y }
     ].map(
-      (c) => y(c, this.params.sourceDirection, w)
+      (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.median = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+    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 };
   }
 }
-class et {
+class Ge {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    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 },
@@ -2029,24 +1886,24 @@ class et {
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (f) => y(f, this.params.sourceDirection, w)
-    ), v = [
+      (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(" "), p = `M 0 0 L ${l[0].x} ${l[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : p}${v}`, this.median = l[3];
+    ].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];
   }
 }
-class tt {
+class Ze {
   constructor(e) {
     o(this, "path");
-    o(this, "median");
+    o(this, "midpoint");
     o(this, "diagonalDistance");
     this.params = e;
     const t = this.params.to;
-    if (this.median = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
+    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
@@ -2075,23 +1932,23 @@ class tt {
     };
   }
 }
-const le = (r, e) => {
+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"
-}), ge = (r) => {
+}), 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;
-}, ue = () => {
+}, pe = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, we = (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;
-}, pe = (r, e) => {
+}, ve = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -2107,12 +1964,12 @@ const le = (r, e) => {
     flipX: d,
     flipY: c
   };
-}, O = (r, e, t, s) => {
+}, F = (r, e, t, s) => {
   const n = [
     w,
     { x: t, y: s },
     { x: t, y: -s }
-  ].map((c) => y(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  ].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",
@@ -2132,29 +1989,29 @@ const le = (r, e) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), oe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class U {
+}), re = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class C {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", ue());
+    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] = E(), this.svg = ge(e.color), this.svg.appendChild(this.group), this.line = we(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    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));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = ve(
       e.from,
       e.to
     );
-    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = oe(
+    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 = oe(
+    ), c = re(
       e.to.direction,
       h,
       a
@@ -2162,37 +2019,37 @@ class U {
       x: i,
       y: n
     };
-    let l = c, v = -this.params.arrowLength, p;
-    e.from.portId === e.to.portId ? (p = this.params.createCyclePath, l = d, v = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? p = this.params.createDetourPath : p = this.params.createLinePath;
-    const f = p(
+    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", f.path);
-    let A = null;
-    this.sourceArrow && (A = O(
+    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", A));
-    let m = null;
-    this.targetArrow && (m = O(
+    ), this.sourceArrow.setAttribute("d", E));
+    let A = null;
+    this.targetArrow && (A = F(
       l,
       g,
-      v,
+      p,
       this.params.arrowWidth
-    ), this.targetArrow.setAttribute("d", m)), this.afterRenderEmitter.emit({
-      edgePath: f,
-      sourceArrowPath: A,
-      targetArrowPath: m
+    ), this.targetArrow.setAttribute("d", A)), this.afterRenderEmitter.emit({
+      edgePath: v,
+      sourceArrowPath: E,
+      targetArrowPath: A
     });
   }
 }
-class rt {
+class Je {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2210,7 +2067,7 @@ class rt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new et({
+    o(this, "createCyclePath", (e) => new Ge({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -2218,7 +2075,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Ke({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2231,7 +2088,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Je({
+    o(this, "createLinePath", (e, t, s) => new ze({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2240,7 +2097,7 @@ class rt {
       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 U({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2256,7 +2113,7 @@ class rt {
     this.pathShape.render(e);
   }
 }
-class ot {
+class Ke {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2297,7 +2154,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new Qe({
+    o(this, "createLinePath", (e, t, s, i) => new Ye({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2314,7 +2171,7 @@ class ot {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new U({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2330,7 +2187,7 @@ class ot {
     this.pathShape.render(e);
   }
 }
-class st {
+class Qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2371,7 +2228,7 @@ class st {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new _e({
+    o(this, "createLinePath", (e, t, s) => new He({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2387,7 +2244,7 @@ class st {
       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 U({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2403,7 +2260,7 @@ class st {
     this.pathShape.render(e);
   }
 }
-class it {
+class _e {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -2444,7 +2301,7 @@ class it {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new qe({
+    o(this, "createLinePath", (e, t, s, i, n) => new je({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -2461,7 +2318,7 @@ class it {
       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 U({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new C({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2477,7 +2334,7 @@ class it {
     this.pathShape.render(e);
   }
 }
-const se = (r) => {
+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 = {
@@ -2487,17 +2344,17 @@ const se = (r) => {
     x: t / r.diagonalDistance,
     y: s / r.diagonalDistance
   };
-  return O(
+  return F(
     n,
     i,
     r.arrowLength,
     r.arrowWidth
   );
 };
-class nt {
+class qe {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", ue());
+    o(this, "group", pe());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -2509,15 +2366,15 @@ class nt {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = ge(this.color), this.svg.appendChild(this.group), this.line = we(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    [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));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = ve(
       e.from,
       e.to
     );
-    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = { x: i, y: n }, c = new tt({
+    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,
@@ -2527,7 +2384,7 @@ class nt {
     });
     this.line.setAttribute("d", c.path);
     let g = null;
-    this.sourceArrow && (g = se({
+    this.sourceArrow && (g = oe({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.sourceOffset,
@@ -2537,7 +2394,7 @@ class nt {
       arrowLength: this.arrowLength
     }), this.sourceArrow.setAttribute("d", g));
     let l = null;
-    this.targetArrow && (l = se({
+    this.targetArrow && (l = oe({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.targetOffset,
@@ -2552,40 +2409,40 @@ class nt {
     });
   }
 }
-const ht = () => {
+const et = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, at = (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;
-}, ie = (r) => {
+}, 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 dt extends Error {
+class rt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class fe {
+class me {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", ht());
+    o(this, "handle", et());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof fe)
-      throw new dt(
+    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 = at(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ie(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ie(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = 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);
     });
   }
@@ -2601,21 +2458,26 @@ class ut {
     o(this, "targetArrow");
     o(this, "onAfterRender");
     o(this, "svg");
-    this.baseShape = e, this.medianElement = t, 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.medianElement), this.baseShape.onAfterRender.subscribe((s) => {
-      const i = s.edgePath.median, n = `translate(${i.x}px, ${i.y}px)`;
-      this.medianElement.style.setProperty("transform", n);
+    /**
+     * @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);
     });
   }
   render(e) {
     this.baseShape.render(e);
   }
 }
-const ct = (r) => {
+const ye = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new st({
+      return () => new Qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2629,7 +2491,7 @@ const ct = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new ot({
+      return () => new Ke({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2643,7 +2505,7 @@ const ct = (r) => {
         detourDirection: r.detourDirection
       });
     case "vertical":
-      return () => new it({
+      return () => new _e({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2657,7 +2519,7 @@ const ct = (r) => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new nt({
+      return () => new qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2668,7 +2530,7 @@ const ct = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new rt({
+      return () => new Je({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2682,25 +2544,161 @@ const ct = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, lt = (r) => {
+}, ot = (r) => {
   var t, s, i, n, h;
-  const e = Ze(
+  const e = ke(
     (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) ?? je,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? le,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ct(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: ye(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
+}, st = (r) => {
+  var p, f, v, E, A, S;
+  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;
+  return {
+    moveOnTop: i,
+    moveEdgesOnTop: n,
+    dragCursor: a,
+    mouseDownEventVerifier: c,
+    mouseUpEventVerifier: g !== void 0 ? g : (b) => b.button === 0,
+    onNodeDrag: e,
+    onBeforeNodeDrag: t,
+    onNodeDragFinished: s
+  };
+}, it = (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));
+    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 };
+  };
+}, nt = (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;
+    }
+    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;
+    }
+    return {
+      scale: d,
+      x: c,
+      y: g
+    };
+  };
+}, ht = (r) => (e) => r.reduce(
+  (t, s) => s({
+    prevTransform: e.prevTransform,
+    nextTransform: t,
+    canvasWidth: e.canvasWidth,
+    canvasHeight: e.canvasHeight
+  }),
+  e.nextTransform
+), ie = (r) => {
+  if (typeof r == "function")
+    return r;
+  switch (r.type) {
+    case "scale-limit":
+      return nt({
+        minContentScale: r.minContentScale ?? 0,
+        maxContentScale: r.maxContentScale ?? 1 / 0
+      });
+    case "shift-limit":
+      return it({
+        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, _;
+  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.map(
+      (P) => ie(P)
+    )
+  ) : 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;
+  return {
+    wheelSensitivity: t,
+    onTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
+    }),
+    onTransformFinished: ((J = r == null ? void 0 : r.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
+    }),
+    onBeforeTransformChange: h,
+    onTransformChange: a,
+    transformPreprocessor: i,
+    shiftCursor: n,
+    mouseDownEventVerifier: c,
+    mouseUpEventVerifier: l,
+    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) ?? (() => {
+    }),
+    onResizeTransformFinished: ((_ = r == null ? void 0 : r.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
+    })
+  };
+}, at = (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(
+  (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 ?? {});
+  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 = () => {
+  }, d = () => {
+  };
+  return {
+    connectionTypeResolver: r.connectionTypeResolver ?? s,
+    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,
+    dragPortDirection: r.dragPortDirection ?? t,
+    edgeShapeFactory: r.edgeShape !== void 0 ? ye(r.edgeShape) : e
+  };
 };
 class wt {
   constructor(e) {
@@ -2781,56 +2779,65 @@ class wt {
    */
   build() {
     if (this.element === null)
-      throw new S(
+      throw new x(
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new he());
-    const t = new de(), s = new De(), i = new He(this.element);
-    let n = new ne(
+    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(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new Se(n, t, e));
-    const h = lt(this.canvasDefaults), a = new ae(
+    e !== void 0 && (n = new Te(n, t, e));
+    const h = ot(this.canvasDefaults), a = new de(
       this.element,
       t,
       s,
       n,
       h
-    ), d = () => {
-      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
-    };
-    return a.onBeforeDestroy.subscribe(d), this.hasBackground && Y.configure(
+    );
+    if (this.hasBackground && Y.configure(
       a,
-      this.backgroundConfig,
+      ct(this.backgroundConfig),
       i.background
     ), this.hasResizeReactiveNodes && k.configure(a), this.hasDraggableNode && z.configure(
       a,
       i.main,
       this.window,
-      this.dragConfig
-    ), this.hasUserConnectablePorts && H.configure(
-      a,
-      i.overlay,
-      s,
-      this.window,
-      h,
-      this.connectablePortsConfig
-    ), this.virtualScrollConfig !== void 0 ? X.configure(
+      st(this.dragConfig)
+    ), this.hasUserConnectablePorts) {
+      const c = lt(
+        this.connectablePortsConfig,
+        h.edges.shapeFactory,
+        h.ports.direction
+      );
+      H.configure(
+        a,
+        i.overlay,
+        s,
+        this.window,
+        c
+      );
+    }
+    this.virtualScrollConfig !== void 0 ? X.configure(
       a,
       i.main,
       this.window,
-      this.transformConfig,
+      ne(this.transformConfig),
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && C.configure(
+    ) : this.hasTransformableViewport && U.configure(
       a,
       i.main,
       this.window,
-      this.transformConfig
-    ), this.reset(), a;
+      ne(this.transformConfig)
+    ), this.reset();
+    const d = () => {
+      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
+    };
+    return a.onBeforeDestroy.subscribe(d), a;
   }
   /**
    * @deprecated
@@ -2841,16 +2848,17 @@ class wt {
   }
 }
 export {
-  rt as BezierEdgeShape,
+  Je as BezierEdgeShape,
   wt as CanvasBuilder,
-  nt as DirectEdgeShape,
-  he as EventSubject,
-  ot as HorizontalEdgeShape,
-  S as HtmlGraphError,
-  dt as InteractiveEdgeError,
-  fe as InteractiveEdgeShape,
-  U as LineEdgeShape,
+  qe as DirectEdgeShape,
+  ae as EventSubject,
+  Ke as HorizontalEdgeShape,
+  x as HtmlGraphError,
+  rt as InteractiveEdgeError,
+  me as InteractiveEdgeShape,
+  C as LineEdgeShape,
   ut as MedianEdgeShape,
-  st as StraightEdgeShape,
-  it as VerticalEdgeShape
+  ut as MidpointEdgeShape,
+  Qe as StraightEdgeShape,
+  _e as VerticalEdgeShape
 };