@html-graph/html-graph 3.10.0 → 3.11.1

package/dist/html-graph.js

@@ -1,48 +1,48 @@
-var ye = Object.defineProperty;
-var Ae = (t, e, o) => e in t ? ye(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var r = (t, e, o) => Ae(t, typeof e != "symbol" ? e + "" : e, o);
-const pe = () => {
-  const t = document.createElement("div");
-  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
-}, Ee = () => {
-  const t = document.createElement("div");
-  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-}, xe = (t) => {
-  t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden";
-}, N = (t, e) => ({
-  x: t.scale * e.x + t.x,
-  y: t.scale * e.y + t.y
+var ve = Object.defineProperty;
+var ye = (r, e, t) => e in r ? ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => ye(r, typeof e != "symbol" ? e + "" : e, t);
+const me = () => {
+  const r = document.createElement("div");
+  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
+}, Ae = () => {
+  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) => {
+  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
+}, D = (r, e) => ({
+  x: r.scale * e.x + r.x,
+  y: r.scale * e.y + r.y
 });
-class he {
-  constructor(e, o, i) {
-    r(this, "host", Ee());
-    r(this, "container", pe());
-    r(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    r(this, "applyTransform", () => {
+class ne {
+  constructor(e, t, s) {
+    o(this, "host", Ae());
+    o(this, "container", me());
+    o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
     });
-    this.graphStore = e, this.viewportStore = o, this.element = i, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = t, this.element = s, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attachNode(e) {
-    const o = this.graphStore.getNode(e);
-    xe(o.element), this.container.appendChild(o.element), this.updateNodePosition(e), this.updateNodePriority(e), o.element.style.visibility = "visible";
+    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";
   }
   detachNode(e) {
-    const o = this.graphStore.getNode(e);
-    this.container.removeChild(o.element);
+    const t = this.graphStore.getNode(e);
+    this.container.removeChild(t.element);
   }
   attachEdge(e) {
-    const o = this.graphStore.getEdge(e).shape.svg;
-    this.edgeIdToElementMap.set(e, o), this.container.appendChild(o), this.renderEdge(e), this.updateEdgePriority(e);
+    const t = this.graphStore.getEdge(e).shape.svg;
+    this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
   }
   detachEdge(e) {
-    const o = this.edgeIdToElementMap.get(e);
-    this.container.removeChild(o), this.edgeIdToElementMap.delete(e);
+    const t = this.edgeIdToElementMap.get(e);
+    this.container.removeChild(t), this.edgeIdToElementMap.delete(e);
   }
   clear() {
-    this.edgeIdToElementMap.forEach((e, o) => {
-      this.detachEdge(o);
+    this.edgeIdToElementMap.forEach((e, t) => {
+      this.detachEdge(t);
     }), this.graphStore.getAllNodeIds().forEach((e) => {
       this.detachNode(e);
     });
@@ -51,100 +51,100 @@ class he {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const o = this.graphStore.getNode(e), { width: i, height: s } = o.element.getBoundingClientRect(), h = this.viewportStore.getViewportMatrix().scale, n = o.centerFn(i, s), d = o.x - h * n.x, c = o.y - h * n.y;
-    o.element.style.transform = `translate(${d}px, ${c}px)`;
+    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = t.centerFn(s, i), a = t.x - n * h.x, d = t.y - n * h.y;
+    t.element.style.transform = `translate(${a}px, ${d}px)`;
   }
   updateNodePriority(e) {
-    const o = this.graphStore.getNode(e);
-    o.element.style.zIndex = `${o.priority}`;
+    const t = this.graphStore.getNode(e);
+    t.element.style.zIndex = `${t.priority}`;
   }
   updateEdgeShape(e) {
-    const o = this.edgeIdToElementMap.get(e);
-    this.container.removeChild(o);
-    const i = this.graphStore.getEdge(e);
-    this.edgeIdToElementMap.set(e, i.shape.svg), this.container.appendChild(i.shape.svg);
+    const t = this.edgeIdToElementMap.get(e);
+    this.container.removeChild(t);
+    const s = this.graphStore.getEdge(e);
+    this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
   }
   renderEdge(e) {
-    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = this.createEdgeRenderPort(
-      o.from,
-      i,
-      h,
-      d,
-      c
-    ), l = this.createEdgeRenderPort(
-      o.to,
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+      t.from,
       s,
       n,
-      d,
-      c
+      a,
+      d
+    ), g = this.createEdgeRenderPort(
+      t.to,
+      i,
+      h,
+      a,
+      d
     );
-    o.shape.render({ from: a, to: l });
+    t.shape.render({ from: c, to: g });
   }
   updateEdgePriority(e) {
-    const o = this.graphStore.getEdge(e);
-    o.shape.svg.style.zIndex = `${o.priority}`;
-  }
-  createEdgeRenderPort(e, o, i, s, h) {
-    const n = {
-      x: i.left - s.left,
-      y: i.top - s.top
-    }, d = N(h, n);
+    const t = this.graphStore.getEdge(e);
+    t.shape.svg.style.zIndex = `${t.priority}`;
+  }
+  createEdgeRenderPort(e, t, s, i, n) {
+    const h = {
+      x: s.left - i.left,
+      y: s.top - i.top
+    }, a = D(n, h);
     return {
-      x: d.x,
-      y: d.y,
-      width: i.width * h.scale,
-      height: i.height * h.scale,
-      direction: o.direction,
+      x: a.x,
+      y: a.y,
+      width: s.width * n.scale,
+      height: s.height * n.scale,
+      direction: t.direction,
       portId: e,
-      nodeId: o.nodeId
+      nodeId: t.nodeId
     };
   }
 }
-class Se {
+class xe {
   constructor(e) {
-    r(this, "xFrom", 1 / 0);
-    r(this, "yFrom", 1 / 0);
-    r(this, "xTo", 1 / 0);
-    r(this, "yTo", 1 / 0);
+    o(this, "xFrom", 1 / 0);
+    o(this, "yFrom", 1 / 0);
+    o(this, "xTo", 1 / 0);
+    o(this, "yTo", 1 / 0);
     this.graphStore = e;
   }
   setRenderingBox(e) {
     this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
   }
   hasNode(e) {
-    const o = this.graphStore.getNode(e);
-    return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
+    const t = this.graphStore.getNode(e);
+    return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
   }
   hasEdge(e) {
-    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(i), n = this.graphStore.getNode(s), d = Math.min(h.x, n.x), c = Math.max(h.x, n.x), a = Math.min(h.y, n.y), l = Math.max(h.y, n.y);
-    return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), h = this.graphStore.getNode(i), a = Math.min(n.x, h.x), d = Math.max(n.x, h.x), c = Math.min(n.y, h.y), g = Math.max(n.y, h.y);
+    return a <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class be {
-  constructor(e, o, i) {
-    r(this, "attachedNodes", /* @__PURE__ */ new Set());
-    r(this, "attachedEdges", /* @__PURE__ */ new Set());
-    r(this, "renderingBox");
-    r(this, "updateViewport", (e) => {
+class Se {
+  constructor(e, t, s) {
+    o(this, "attachedNodes", /* @__PURE__ */ new Set());
+    o(this, "attachedEdges", /* @__PURE__ */ new Set());
+    o(this, "renderingBox");
+    o(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
-      this.graphStore.getAllNodeIds().forEach((n) => {
-        const d = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
-        d && !c ? o.add(n) : !d && c && i.add(n);
-      }), this.graphStore.getAllEdgeIds().forEach((n) => {
-        const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, w = this.graphStore.getPort(a.to).nodeId;
-        d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(w) || (o.add(w), i.delete(w))), d && !c ? s.add(n) : !d && c && h.add(n);
-      }), h.forEach((n) => {
-        this.handleDetachEdge(n);
-      }), i.forEach((n) => {
-        this.handleDetachNode(n);
-      }), o.forEach((n) => {
-        this.attachedNodes.has(n) || this.handleAttachNode(n);
-      }), s.forEach((n) => {
-        this.handleAttachEdge(n);
+      const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+      this.graphStore.getAllNodeIds().forEach((h) => {
+        const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
+        a && !d ? t.add(h) : !a && d && s.add(h);
+      }), this.graphStore.getAllEdgeIds().forEach((h) => {
+        const a = this.renderingBox.hasEdge(h), d = this.attachedEdges.has(h), c = this.graphStore.getEdge(h), g = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
+        a && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), a && !d ? i.add(h) : !a && d && n.add(h);
+      }), n.forEach((h) => {
+        this.handleDetachEdge(h);
+      }), s.forEach((h) => {
+        this.handleDetachNode(h);
+      }), t.forEach((h) => {
+        this.attachedNodes.has(h) || this.handleAttachNode(h);
+      }), i.forEach((h) => {
+        this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new Se(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -159,8 +159,8 @@ class be {
     this.attachedEdges.has(e) && this.handleDetachEdge(e);
   }
   updateNodePosition(e) {
-    this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
-      this.attachEdgeEntities(o);
+    this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((t) => {
+      this.attachEdgeEntities(t);
     }));
   }
   updateNodePriority(e) {
@@ -182,8 +182,8 @@ class be {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
   attachEdgeEntities(e) {
-    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId;
-    this.attachedNodes.has(i) || this.handleAttachNode(i), this.attachedNodes.has(s) || this.handleAttachNode(s), this.handleAttachEdge(e);
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId;
+    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
     this.attachedNodes.add(e), this.htmlView.attachNode(e);
@@ -198,9 +198,9 @@ class be {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class de {
+class he {
   constructor() {
-    r(this, "callbacks", /* @__PURE__ */ new Set());
+    o(this, "callbacks", /* @__PURE__ */ new Set());
   }
   subscribe(e) {
     this.callbacks.add(e);
@@ -209,19 +209,19 @@ class de {
     this.callbacks.delete(e);
   }
   emit(e) {
-    this.callbacks.forEach((o) => {
-      o(e);
+    this.callbacks.forEach((t) => {
+      t(e);
     });
   }
 }
-const x = () => {
-  const t = new de();
-  return [t, t];
+const E = () => {
+  const r = new he();
+  return [r, r];
 };
-class Te {
+class be {
   constructor(e) {
-    r(this, "onBeforeUpdated");
-    r(this, "onAfterUpdated");
+    o(this, "onBeforeUpdated");
+    o(this, "onAfterUpdated");
     this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
@@ -231,31 +231,31 @@ class Te {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Pe {
+class Te {
   constructor(e) {
-    r(this, "onAfterNodeAdded");
-    r(this, "onAfterNodeUpdated");
-    r(this, "onAfterNodePriorityUpdated");
-    r(this, "onBeforeNodeRemoved");
-    r(this, "onAfterPortMarked");
-    r(this, "onAfterPortUpdated");
-    r(this, "onBeforePortUnmarked");
-    r(this, "onAfterEdgeAdded");
-    r(this, "onAfterEdgeShapeUpdated");
-    r(this, "onAfterEdgeUpdated");
-    r(this, "onAfterEdgePriorityUpdated");
-    r(this, "onBeforeEdgeRemoved");
-    r(this, "onBeforeClear");
+    o(this, "onAfterNodeAdded");
+    o(this, "onAfterNodeUpdated");
+    o(this, "onAfterNodePriorityUpdated");
+    o(this, "onBeforeNodeRemoved");
+    o(this, "onAfterPortMarked");
+    o(this, "onAfterPortUpdated");
+    o(this, "onBeforePortUnmarked");
+    o(this, "onAfterEdgeAdded");
+    o(this, "onAfterEdgeShapeUpdated");
+    o(this, "onAfterEdgeUpdated");
+    o(this, "onAfterEdgePriorityUpdated");
+    o(this, "onBeforeEdgeRemoved");
+    o(this, "onBeforeClear");
     this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
   }
   getNode(e) {
-    const o = this.graphStore.getNode(e);
-    return o === void 0 ? null : {
-      element: o.element,
-      x: o.x,
-      y: o.y,
-      centerFn: o.centerFn,
-      priority: o.priority
+    const t = this.graphStore.getNode(e);
+    return t === void 0 ? null : {
+      element: t.element,
+      x: t.x,
+      y: t.y,
+      centerFn: t.centerFn,
+      priority: t.priority
     };
   }
   getElementNodeId(e) {
@@ -266,11 +266,11 @@ class Pe {
     return this.graphStore.getAllNodeIds();
   }
   getPort(e) {
-    const o = this.graphStore.getPort(e);
-    return o === void 0 ? null : {
-      element: o.element,
-      direction: o.direction,
-      nodeId: o.nodeId
+    const t = this.graphStore.getPort(e);
+    return t === void 0 ? null : {
+      element: t.element,
+      direction: t.direction,
+      nodeId: t.nodeId
     };
   }
   // TODO: use Set in v4
@@ -290,8 +290,8 @@ class Pe {
     return this.graphStore.getAllEdgeIds();
   }
   getEdge(e) {
-    const o = this.graphStore.getEdge(e);
-    return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
+    const t = this.graphStore.getEdge(e);
+    return t === void 0 ? null : { from: t.from, to: t.to, priority: t.priority };
   }
   // TODO: use Set in v4
   getPortIncomingEdgeIds(e) {
@@ -326,9 +326,9 @@ class Pe {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class W {
+class $ {
   constructor(e) {
-    r(this, "counter", 0);
+    o(this, "counter", 0);
     this.checkExists = e;
   }
   create(e) {
@@ -345,120 +345,120 @@ class W {
 class S extends Error {
   constructor() {
     super(...arguments);
-    r(this, "name", "HtmlGraphError");
+    o(this, "name", "HtmlGraphError");
   }
 }
-class ce {
-  constructor(e, o, i, s, h) {
+class ae {
+  constructor(e, t, s, i, n) {
     /**
      * provides api for accessing model of rendered graph
      */
-    r(this, "graph");
+    o(this, "graph");
     /**
      * provides api for accessing viewport state
      */
-    r(this, "viewport");
-    r(this, "nodeIdGenerator", new W(
+    o(this, "viewport");
+    o(this, "nodeIdGenerator", new $(
       (e) => this.graph.getNode(e) !== null
     ));
-    r(this, "portIdGenerator", new W(
+    o(this, "portIdGenerator", new $(
       (e) => this.graph.getPort(e) !== null
     ));
-    r(this, "edgeIdGenerator", new W(
+    o(this, "edgeIdGenerator", new $(
       (e) => this.graph.getEdge(e) !== null
     ));
-    r(this, "onAfterNodeAdded", (e) => {
+    o(this, "onAfterNodeAdded", (e) => {
       this.htmlView.attachNode(e);
     });
-    r(this, "onAfterNodeUpdated", (e) => {
-      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
-        this.htmlView.renderEdge(i);
+    o(this, "onAfterNodeUpdated", (e) => {
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((s) => {
+        this.htmlView.renderEdge(s);
       });
     });
-    r(this, "onAfterNodePriorityUpdated", (e) => {
+    o(this, "onAfterNodePriorityUpdated", (e) => {
       this.htmlView.updateNodePriority(e);
     });
-    r(this, "onBeforeNodeRemoved", (e) => {
-      this.graphStore.getNodePortIds(e).forEach((o) => {
-        this.unmarkPort(o);
+    o(this, "onBeforeNodeRemoved", (e) => {
+      this.graphStore.getNodePortIds(e).forEach((t) => {
+        this.unmarkPort(t);
       }), this.htmlView.detachNode(e);
     });
-    r(this, "onAfterPortUpdated", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
-        this.htmlView.renderEdge(i);
+    o(this, "onAfterPortUpdated", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
+        this.htmlView.renderEdge(s);
       });
     });
-    r(this, "onBeforePortUnmarked", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
-        this.removeEdge(o);
+    o(this, "onBeforePortUnmarked", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
+        this.removeEdge(t);
       });
     });
-    r(this, "onAfterEdgeAdded", (e) => {
+    o(this, "onAfterEdgeAdded", (e) => {
       this.htmlView.attachEdge(e);
     });
-    r(this, "onAfterEdgeShapeUpdated", (e) => {
+    o(this, "onAfterEdgeShapeUpdated", (e) => {
       this.htmlView.updateEdgeShape(e);
     });
-    r(this, "onAfterEdgeUpdated", (e) => {
+    o(this, "onAfterEdgeUpdated", (e) => {
       this.htmlView.renderEdge(e);
     });
-    r(this, "onAfterEdgePriorityUpdated", (e) => {
+    o(this, "onAfterEdgePriorityUpdated", (e) => {
       this.htmlView.updateEdgePriority(e);
     });
-    r(this, "onBeforeEdgeRemoved", (e) => {
+    o(this, "onBeforeEdgeRemoved", (e) => {
       this.htmlView.detachEdge(e);
     });
-    r(this, "onBeforeClear", () => {
+    o(this, "onBeforeClear", () => {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
-    r(this, "onBeforeDestroyEmitter");
+    o(this, "onBeforeDestroyEmitter");
     /**
      * emits event just before destruction of canvas
      */
-    r(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = h, this.graph = new Pe(this.graphStore), this.viewport = new Te(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    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.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] = x();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = E();
   }
   /**
    * adds new node
    */
   addNode(e) {
-    const o = this.nodeIdGenerator.create(e.id);
-    if (this.graph.getNode(o) !== null)
+    const t = this.nodeIdGenerator.create(e.id);
+    if (this.graph.getNode(t) !== null)
       throw new S("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(e.element) !== void 0)
       throw new S(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
-      id: o,
+      id: t,
       element: e.element,
       x: e.x,
       y: e.y,
       centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
       priority: e.priority ?? this.defaults.nodes.priorityFn()
     }), e.ports !== void 0)
-      for (const i of e.ports)
+      for (const s of e.ports)
         this.markPort({
-          id: i.id,
-          element: i.element,
-          nodeId: o,
-          direction: i.direction
+          id: s.id,
+          element: s.element,
+          nodeId: t,
+          direction: s.direction
         });
     return this;
   }
   /**
    * updates node parameters
    */
-  updateNode(e, o) {
+  updateNode(e, t) {
     if (this.graph.getNode(e) === null)
       throw new S("failed to update non existing node");
-    return this.graphStore.updateNode(e, o ?? {}), this;
+    return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
    * removes specified node
@@ -474,13 +474,13 @@ class ce {
    * marks specified element as a port for specified node
    */
   markPort(e) {
-    const o = this.portIdGenerator.create(e.id);
-    if (this.graph.getPort(o) !== null)
+    const t = this.portIdGenerator.create(e.id);
+    if (this.graph.getPort(t) !== null)
       throw new S("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
       throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
-      id: o,
+      id: t,
       element: e.element,
       nodeId: e.nodeId,
       direction: e.direction ?? this.defaults.ports.direction
@@ -489,10 +489,10 @@ class ce {
   /**
    * updates port and edges attached to it
    */
-  updatePort(e, o) {
+  updatePort(e, t) {
     if (this.graph.getPort(e) === null)
       throw new S("failed to update nonexistent port");
-    return this.graphStore.updatePort(e, o ?? {}), this;
+    return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
    * unmarks specified port
@@ -507,28 +507,28 @@ class ce {
    * adds new edge
    */
   addEdge(e) {
-    const o = this.edgeIdGenerator.create(e.id);
-    if (this.graph.getEdge(o) !== null)
+    const t = this.edgeIdGenerator.create(e.id);
+    if (this.graph.getEdge(t) !== null)
       throw new S("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
       throw new S("failed to add edge from nonexistent port");
     if (this.graph.getPort(e.to) === null)
       throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
-      id: o,
+      id: t,
       from: e.from,
       to: e.to,
-      shape: e.shape ?? this.defaults.edges.shapeFactory(o),
+      shape: e.shape ?? this.defaults.edges.shapeFactory(t),
       priority: e.priority ?? this.defaults.edges.priorityFn()
     }), this;
   }
   /**
    * updates specified edge
    */
-  updateEdge(e, o) {
+  updateEdge(e, t) {
     if (this.graph.getEdge(e) === null)
       throw new S("failed to update nonexistent edge");
-    return this.graphStore.updateEdge(e, o ?? {}), this;
+    return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
    * removes specified edge
@@ -571,37 +571,37 @@ class ce {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class De {
+class Pe {
   constructor() {
-    r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
-    r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
+    o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
+    o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
-  addRecord(e, o) {
-    const i = this.singleToMultiMap.get(e);
-    i === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([o])) : i.add(o), this.multiToSingleMap.set(o, e);
+  addRecord(e, t) {
+    const s = this.singleToMultiMap.get(e);
+    s === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : s.add(t), this.multiToSingleMap.set(t, e);
   }
   getMultiBySingle(e) {
-    const o = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
-    return Array.from(o.values());
+    const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
+    return Array.from(t.values());
   }
   removeByMulti(e) {
-    const o = this.multiToSingleMap.get(e), i = this.singleToMultiMap.get(o);
-    i.delete(e), i.size === 0 && this.singleToMultiMap.delete(o), this.multiToSingleMap.delete(e);
+    const t = this.multiToSingleMap.get(e), s = this.singleToMultiMap.get(t);
+    s.delete(e), s.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
   }
   getByMulti(e) {
     return this.multiToSingleMap.get(e);
   }
   removeBySingle(e) {
-    this.singleToMultiMap.get(e).forEach((i) => {
-      this.multiToSingleMap.delete(i);
+    this.singleToMultiMap.get(e).forEach((s) => {
+      this.multiToSingleMap.delete(s);
     }), this.singleToMultiMap.delete(e);
   }
   clear() {
     this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
   }
   forEachSingle(e) {
-    this.singleToMultiMap.forEach((o, i) => {
-      e(i);
+    this.singleToMultiMap.forEach((t, s) => {
+      e(s);
     });
   }
   hasSingle(e) {
@@ -611,54 +611,54 @@ class De {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class ae {
+class de {
   constructor() {
-    r(this, "nodes", /* @__PURE__ */ new Map());
-    r(this, "ports", /* @__PURE__ */ new Map());
-    r(this, "edges", /* @__PURE__ */ new Map());
-    r(this, "nodesElementsMap", /* @__PURE__ */ new Map());
-    r(this, "incomingEdges", /* @__PURE__ */ new Map());
-    r(this, "outcomingEdges", /* @__PURE__ */ new Map());
-    r(this, "cycleEdges", /* @__PURE__ */ new Map());
-    r(this, "elementPorts", new De());
-    r(this, "afterNodeAddedEmitter");
-    r(this, "onAfterNodeAdded");
-    r(this, "afterNodeUpdatedEmitter");
-    r(this, "onAfterNodeUpdated");
-    r(this, "afterNodePriorityUpdatedEmitter");
-    r(this, "onAfterNodePriorityUpdated");
-    r(this, "beforeNodeRemovedEmitter");
-    r(this, "onBeforeNodeRemoved");
-    r(this, "afterPortAddedEmitter");
-    r(this, "onAfterPortAdded");
-    r(this, "afterPortUpdatedEmitter");
-    r(this, "onAfterPortUpdated");
-    r(this, "beforePortRemovedEmitter");
-    r(this, "onBeforePortRemoved");
-    r(this, "afterEdgeAddedEmitter");
-    r(this, "onAfterEdgeAdded");
-    r(this, "afterEdgeShapeUpdatedEmitter");
-    r(this, "onAfterEdgeShapeUpdated");
-    r(this, "afterEdgeUpdatedEmitter");
-    r(this, "onAfterEdgeUpdated");
-    r(this, "afterEdgePriorityUpdatedEmitter");
-    r(this, "onAfterEdgePriorityUpdated");
-    r(this, "beforeEdgeRemovedEmitter");
-    r(this, "onBeforeEdgeRemoved");
-    r(this, "beforeClearEmitter");
-    r(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = x(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = x(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = x(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = x(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = x(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = x(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = x(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = x(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = x(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = x(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = x(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = x(), [this.beforeClearEmitter, this.onBeforeClear] = x();
+    o(this, "nodes", /* @__PURE__ */ new Map());
+    o(this, "ports", /* @__PURE__ */ new Map());
+    o(this, "edges", /* @__PURE__ */ new Map());
+    o(this, "nodesElementsMap", /* @__PURE__ */ new Map());
+    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, "afterNodeAddedEmitter");
+    o(this, "onAfterNodeAdded");
+    o(this, "afterNodeUpdatedEmitter");
+    o(this, "onAfterNodeUpdated");
+    o(this, "afterNodePriorityUpdatedEmitter");
+    o(this, "onAfterNodePriorityUpdated");
+    o(this, "beforeNodeRemovedEmitter");
+    o(this, "onBeforeNodeRemoved");
+    o(this, "afterPortAddedEmitter");
+    o(this, "onAfterPortAdded");
+    o(this, "afterPortUpdatedEmitter");
+    o(this, "onAfterPortUpdated");
+    o(this, "beforePortRemovedEmitter");
+    o(this, "onBeforePortRemoved");
+    o(this, "afterEdgeAddedEmitter");
+    o(this, "onAfterEdgeAdded");
+    o(this, "afterEdgeShapeUpdatedEmitter");
+    o(this, "onAfterEdgeShapeUpdated");
+    o(this, "afterEdgeUpdatedEmitter");
+    o(this, "onAfterEdgeUpdated");
+    o(this, "afterEdgePriorityUpdatedEmitter");
+    o(this, "onAfterEdgePriorityUpdated");
+    o(this, "beforeEdgeRemovedEmitter");
+    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();
   }
   addNode(e) {
-    const o = /* @__PURE__ */ new Map(), i = {
+    const t = /* @__PURE__ */ new Map(), s = {
       element: e.element,
       x: e.x,
       y: e.y,
       centerFn: e.centerFn,
       priority: e.priority,
-      ports: o
+      ports: t
     };
-    this.nodes.set(e.id, i), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, s), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -669,14 +669,14 @@ class ae {
   getElementNodeId(e) {
     return this.nodesElementsMap.get(e);
   }
-  updateNode(e, o) {
-    const i = this.nodes.get(e);
-    i.x = o.x ?? i.x, i.y = o.y ?? i.y, i.centerFn = o.centerFn ?? i.centerFn, o.priority !== void 0 && (i.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
+  updateNode(e, t) {
+    const s = this.nodes.get(e);
+    s.x = t.x ?? s.x, s.y = t.y ?? s.y, s.centerFn = t.centerFn ?? s.centerFn, t.priority !== void 0 && (s.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
     this.beforeNodeRemovedEmitter.emit(e);
-    const o = this.nodes.get(e);
-    this.nodesElementsMap.delete(o.element), this.nodes.delete(e);
+    const t = this.nodes.get(e);
+    this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
   }
   addPort(e) {
     this.ports.set(e.id, {
@@ -688,9 +688,9 @@ class ae {
   getPort(e) {
     return this.ports.get(e);
   }
-  updatePort(e, o) {
-    const i = this.ports.get(e);
-    i.direction = o.direction ?? i.direction, this.afterPortUpdatedEmitter.emit(e);
+  updatePort(e, t) {
+    const s = this.ports.get(e);
+    s.direction = t.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
@@ -699,30 +699,30 @@ class ae {
     return this.elementPorts.getMultiBySingle(e);
   }
   getNodePortIds(e) {
-    const o = this.nodes.get(e);
-    if (o !== void 0)
-      return Array.from(o.ports.keys());
+    const t = this.nodes.get(e);
+    if (t !== void 0)
+      return Array.from(t.ports.keys());
   }
   removePort(e) {
-    const o = this.ports.get(e).nodeId;
-    this.beforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
+    const t = this.ports.get(e).nodeId;
+    this.beforePortRemovedEmitter.emit(e), this.nodes.get(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
   addEdge(e) {
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
-  updateEdge(e, o) {
-    if (o.from !== void 0 || o.to !== void 0) {
-      const s = this.edges.get(e);
+  updateEdge(e, t) {
+    if (t.from !== void 0 || t.to !== void 0) {
+      const i = this.edges.get(e);
       this.removeEdgeInternal(e), this.addEdgeInternal({
         id: e,
-        from: o.from ?? s.from,
-        to: o.to ?? s.to,
-        shape: s.shape,
-        priority: s.priority
+        from: t.from ?? i.from,
+        to: t.to ?? i.to,
+        shape: i.shape,
+        priority: i.priority
       });
     }
-    const i = this.edges.get(e);
-    o.shape !== void 0 && (i.shape = o.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), o.priority !== void 0 && (i.priority = o.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
+    const s = this.edges.get(e);
+    t.shape !== void 0 && (s.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (s.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
@@ -753,25 +753,25 @@ class ae {
     ];
   }
   getNodeIncomingEdgeIds(e) {
-    const o = Array.from(this.nodes.get(e).ports.keys());
-    let i = [];
-    return o.forEach((s) => {
-      i = [...i, ...this.getPortIncomingEdgeIds(s)];
-    }), i;
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let s = [];
+    return t.forEach((i) => {
+      s = [...s, ...this.getPortIncomingEdgeIds(i)];
+    }), s;
   }
   getNodeOutcomingEdgeIds(e) {
-    const o = Array.from(this.nodes.get(e).ports.keys());
-    let i = [];
-    return o.forEach((s) => {
-      i = [...i, ...this.getPortOutcomingEdgeIds(s)];
-    }), i;
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let s = [];
+    return t.forEach((i) => {
+      s = [...s, ...this.getPortOutcomingEdgeIds(i)];
+    }), s;
   }
   getNodeCycleEdgeIds(e) {
-    const o = Array.from(this.nodes.get(e).ports.keys());
-    let i = [];
-    return o.forEach((s) => {
-      i = [...i, ...this.getPortCycleEdgeIds(s)];
-    }), i;
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let s = [];
+    return t.forEach((i) => {
+      s = [...s, ...this.getPortCycleEdgeIds(i)];
+    }), s;
   }
   getNodeAdjacentEdgeIds(e) {
     return [
@@ -789,28 +789,28 @@ class ae {
     }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
   }
   removeEdgeInternal(e) {
-    const o = this.edges.get(e), i = o.from, s = o.to;
-    this.cycleEdges.get(i).delete(e), this.cycleEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.edges.delete(e);
+    const t = this.edges.get(e), s = t.from, i = t.to;
+    this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const q = (t) => ({
-  scale: 1 / t.scale,
-  x: -t.x / t.scale,
-  y: -t.y / t.scale
+const q = (r) => ({
+  scale: 1 / r.scale,
+  x: -r.x / r.scale,
+  y: -r.y / r.scale
 }), ee = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Ne {
+class De {
   constructor() {
-    r(this, "viewportMatrix", ee);
-    r(this, "contentMatrix", ee);
-    r(this, "afterUpdateEmitter");
-    r(this, "onAfterUpdated");
-    r(this, "beforeUpdateEmitter");
-    r(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = x(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = x();
+    o(this, "viewportMatrix", ee);
+    o(this, "contentMatrix", ee);
+    o(this, "afterUpdateEmitter");
+    o(this, "onAfterUpdated");
+    o(this, "beforeUpdateEmitter");
+    o(this, "onBeforeUpdated");
+    [this.afterUpdateEmitter, this.onAfterUpdated] = E(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = E();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -835,26 +835,26 @@ class Ne {
 }
 class k {
   constructor(e) {
-    r(this, "elementToNodeId", /* @__PURE__ */ new Map());
-    r(this, "nodesResizeObserver");
-    r(this, "onAfterNodeAdded", (e) => {
-      const o = this.canvas.graph.getNode(e);
-      this.elementToNodeId.set(o.element, e), this.nodesResizeObserver.observe(o.element);
+    o(this, "elementToNodeId", /* @__PURE__ */ new Map());
+    o(this, "nodesResizeObserver");
+    o(this, "onAfterNodeAdded", (e) => {
+      const t = this.canvas.graph.getNode(e);
+      this.elementToNodeId.set(t.element, e), this.nodesResizeObserver.observe(t.element);
     });
-    r(this, "onBeforeNodeRemoved", (e) => {
-      const o = this.canvas.graph.getNode(e);
-      this.elementToNodeId.delete(o.element), this.nodesResizeObserver.unobserve(o.element);
+    o(this, "onBeforeNodeRemoved", (e) => {
+      const t = this.canvas.graph.getNode(e);
+      this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
     });
-    r(this, "onBeforeClear", () => {
+    o(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
-    r(this, "onBeforeDestroy", () => {
+    o(this, "onBeforeDestroy", () => {
       this.canvas.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    this.canvas = e, this.nodesResizeObserver = new ResizeObserver((o) => {
-      o.forEach((i) => {
-        const s = i.target;
-        this.handleNodeResize(s);
+    this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
+      t.forEach((s) => {
+        const i = s.target;
+        this.handleNodeResize(i);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
@@ -862,91 +862,91 @@ class k {
     new k(e);
   }
   handleNodeResize(e) {
-    const o = this.elementToNodeId.get(e);
-    this.canvas.updateNode(o);
+    const t = this.elementToNodeId.get(e);
+    this.canvas.updateNode(t);
   }
 }
-const me = (t) => {
-  var v, A, y, p, E, b;
-  const e = ((v = t == null ? void 0 : t.events) == null ? void 0 : v.onNodeDrag) ?? (() => {
-  }), o = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onBeforeNodeDrag) ?? (() => !0), i = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) !== !1, h = (t == null ? void 0 : t.moveEdgesOnTop) !== !1 && s, n = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.dragCursor, d = n !== void 0 ? n : "grab", c = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseDownEventVerifier, a = c !== void 0 ? c : (T) => T.button === 0, l = (b = t == null ? void 0 : t.mouse) == null ? void 0 : b.mouseUpEventVerifier;
+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: s,
-    moveEdgesOnTop: h,
-    dragCursor: d,
-    mouseDownEventVerifier: a,
-    mouseUpEventVerifier: l !== void 0 ? l : (T) => T.button === 0,
+    moveOnTop: i,
+    moveEdgesOnTop: n,
+    dragCursor: a,
+    mouseDownEventVerifier: c,
+    mouseUpEventVerifier: g !== void 0 ? g : (b) => b.button === 0,
     onNodeDrag: e,
-    onBeforeNodeDrag: o,
-    onNodeDragFinished: i
+    onBeforeNodeDrag: t,
+    onNodeDragFinished: s
   };
-}, Me = (t, e, o) => {
-  const { x: i, y: s, width: h, height: n } = t.getBoundingClientRect();
-  return e >= i && e <= i + h && o >= s && o <= s + n;
-}, Le = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, m = (t, e, o, i) => Me(e, o, i) && Le(t, o, i), B = (t, e) => {
-  e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
+}, Me = (r, e, t) => {
+  const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
+  return e >= s && e <= s + n && t >= i && t <= i + h;
+}, Le = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, N = (r, e, t, s) => Me(e, t, s) && Le(r, t, s), B = (r, e) => {
+  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 };
 class z {
-  constructor(e, o, i, s) {
-    r(this, "grabbedNodeId", null);
-    r(this, "maxNodePriority", 0);
-    r(this, "previousTouchCoordinates", null);
-    r(this, "graph");
-    r(this, "onAfterNodeAdded", (e) => {
+  constructor(e, t, s, i) {
+    o(this, "grabbedNodeId", null);
+    o(this, "maxNodePriority", 0);
+    o(this, "previousTouchCoordinates", null);
+    o(this, "graph");
+    o(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
-      const o = this.graph.getNode(e);
-      o.element.addEventListener("mousedown", this.onMouseDown, {
+      const t = this.graph.getNode(e);
+      t.element.addEventListener("mousedown", this.onMouseDown, {
         passive: !0
-      }), o.element.addEventListener("touchstart", this.onTouchStart, {
+      }), t.element.addEventListener("touchstart", this.onTouchStart, {
         passive: !0
       });
     });
-    r(this, "onAfterNodeUpdated", (e) => {
+    o(this, "onAfterNodeUpdated", (e) => {
       this.updateMaxNodePriority(e);
     });
-    r(this, "onBeforeNodeRemoved", (e) => {
-      const o = this.graph.getNode(e);
-      o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
+    o(this, "onBeforeNodeRemoved", (e) => {
+      const t = this.graph.getNode(e);
+      t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
     });
-    r(this, "onBeforeDestroy", () => {
+    o(this, "onBeforeDestroy", () => {
       this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy), this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    r(this, "onBeforeClear", () => {
+    o(this, "onBeforeClear", () => {
       this.canvas.graph.getAllNodeIds().forEach((e) => {
-        const o = this.canvas.graph.getNode(e);
-        o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
+        const t = this.canvas.graph.getNode(e);
+        t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
       }), this.maxNodePriority = 0;
     });
-    r(this, "onMouseDown", (e) => {
+    o(this, "onMouseDown", (e) => {
       if (!this.config.mouseDownEventVerifier(e))
         return;
-      const o = e.currentTarget, i = this.graph.getElementNodeId(o), s = this.graph.getNode(i);
+      const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
       this.config.onBeforeNodeDrag({
-        nodeId: i,
-        element: s.element,
-        x: s.x,
-        y: s.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, B(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        nodeId: s,
+        element: i.element,
+        x: i.x,
+        y: i.y
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, B(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }));
     });
-    r(this, "onTouchStart", (e) => {
+    o(this, "onTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
       e.stopImmediatePropagation(), this.previousTouchCoordinates = {
         x: e.touches[0].clientX,
         y: e.touches[0].clientY
       };
-      const o = e.currentTarget, i = this.canvas.graph.getElementNodeId(o), s = this.graph.getNode(i);
+      const t = e.currentTarget, s = this.canvas.graph.getElementNodeId(t), i = this.graph.getNode(s);
       this.config.onBeforeNodeDrag({
-        nodeId: i,
-        element: s.element,
-        x: s.x,
-        y: s.y
-      }) && (this.grabbedNodeId = i, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        nodeId: s,
+        element: i.element,
+        x: i.x,
+        y: i.y
+      }) && (this.grabbedNodeId = s, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -954,8 +954,8 @@ class z {
         passive: !0
       }));
     });
-    r(this, "onWindowMouseMove", (e) => {
-      if (!m(
+    o(this, "onWindowMouseMove", (e) => {
+      if (!N(
         this.window,
         this.element,
         e.clientX,
@@ -966,63 +966,63 @@ class z {
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
-    r(this, "onWindowMouseUp", (e) => {
+    o(this, "onWindowMouseUp", (e) => {
       this.config.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
-    r(this, "onWindowTouchMove", (e) => {
+    o(this, "onWindowTouchMove", (e) => {
       if (e.touches.length !== 1)
         return;
-      const o = e.touches[0];
-      if (!m(
+      const t = e.touches[0];
+      if (!N(
         this.window,
         this.element,
-        o.clientX,
-        o.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.cancelTouchDrag();
         return;
       }
       if (this.grabbedNodeId !== null && this.previousTouchCoordinates !== null) {
-        const s = o.clientX - this.previousTouchCoordinates.x, h = o.clientY - this.previousTouchCoordinates.y;
-        this.dragNode(this.grabbedNodeId, s, h), this.previousTouchCoordinates = {
+        const i = t.clientX - this.previousTouchCoordinates.x, n = t.clientY - this.previousTouchCoordinates.y;
+        this.dragNode(this.grabbedNodeId, i, n), this.previousTouchCoordinates = {
           x: e.touches[0].clientX,
           y: e.touches[0].clientY
         };
       }
     });
-    r(this, "onWindowTouchFinish", () => {
+    o(this, "onWindowTouchFinish", () => {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
-    r(this, "config");
-    this.canvas = e, this.element = o, this.window = i, this.config = me(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    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);
   }
-  static configure(e, o, i, s) {
-    new z(e, o, i, s);
+  static configure(e, t, s, i) {
+    new z(e, t, s, i);
   }
-  dragNode(e, o, i) {
-    const s = this.graph.getNode(e);
-    if (s === null)
+  dragNode(e, t, s) {
+    const i = this.graph.getNode(e);
+    if (i === null)
       return;
-    const h = this.canvas.viewport.getContentMatrix(), n = N(h, {
-      x: s.x,
-      y: s.y
-    }), d = N(
-      { scale: 1, x: o, y: i },
-      n
-    ), c = this.canvas.viewport.getViewportMatrix(), a = N(c, d);
-    this.canvas.updateNode(e, { x: a.x, y: a.y }), this.config.onNodeDrag({
+    const n = this.canvas.viewport.getContentMatrix(), h = D(n, {
+      x: i.x,
+      y: i.y
+    }), a = D(
+      { scale: 1, x: t, y: s },
+      h
+    ), d = this.canvas.viewport.getViewportMatrix(), c = D(d, a);
+    this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
       nodeId: e,
-      element: s.element,
-      x: a.x,
-      y: a.y
+      element: i.element,
+      x: c.x,
+      y: c.y
     });
   }
   moveNodeOnTop(e) {
     if (this.config.moveOnTop) {
       if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
-        const o = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
-          this.canvas.updateEdge(s, { priority: o });
+        const t = this.maxNodePriority;
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
+          this.canvas.updateEdge(i, { priority: t });
         });
       }
       this.canvas.updateNode(e, { priority: this.maxNodePriority });
@@ -1054,166 +1054,166 @@ class z {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
   updateMaxNodePriority(e) {
-    const o = this.graph.getNode(e).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, o);
+    const t = this.graph.getNode(e).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
 }
-const Re = (t) => {
-  const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, i = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
-  return (h) => {
-    let n = h.nextTransform.x, d = h.nextTransform.y;
-    n < e && n < h.prevTransform.x && (n = Math.min(h.prevTransform.x, e));
-    const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
-    n > a && n > h.prevTransform.x && (n = Math.max(h.prevTransform.x, a)), d < i && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, i));
-    const l = h.canvasHeight * h.prevTransform.scale, w = s - l;
-    return d > w && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, w)), { scale: h.nextTransform.scale, x: n, y: d };
+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 = (t) => {
-  const e = t.maxContentScale, o = t.minContentScale, i = e !== null ? 1 / e : 0, s = o !== null ? 1 / o : 1 / 0;
-  return (h) => {
-    const n = h.prevTransform, d = h.nextTransform;
-    let c = d.scale, a = d.x, l = d.y;
-    if (d.scale > s && d.scale > n.scale) {
-      c = Math.max(n.scale, s), a = n.x, l = n.y;
-      const w = (c - n.scale) / (d.scale - n.scale);
-      a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
+}, 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 (d.scale < i && d.scale < n.scale) {
-      c = Math.min(n.scale, i), a = n.x, l = n.y;
-      const w = (c - n.scale) / (d.scale - n.scale);
-      a = n.x + (d.x - n.x) * w, l = n.y + (d.y - n.y) * w;
+    if (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: c,
-      x: a,
-      y: l
+      scale: d,
+      x: c,
+      y: g
     };
   };
-}, Be = (t) => (e) => t.reduce(
-  (o, i) => i({
+}, Be = (r) => (e) => r.reduce(
+  (t, s) => s({
     prevTransform: e.prevTransform,
-    nextTransform: o,
+    nextTransform: t,
     canvasWidth: e.canvasWidth,
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), te = (t) => {
-  if (typeof t == "function")
-    return t;
-  switch (t.type) {
+), te = (r) => {
+  if (typeof r == "function")
+    return r;
+  switch (r.type) {
     case "scale-limit":
       return Ie({
-        minContentScale: t.minContentScale ?? 0,
-        maxContentScale: t.maxContentScale ?? 1 / 0
+        minContentScale: r.minContentScale ?? 0,
+        maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
       return Re({
-        minX: t.minX ?? -1 / 0,
-        maxX: t.maxX ?? 1 / 0,
-        minY: t.minY ?? -1 / 0,
-        maxY: t.maxY ?? 1 / 0
+        minX: r.minX ?? -1 / 0,
+        maxX: r.maxX ?? 1 / 0,
+        minY: r.minY ?? -1 / 0,
+        maxY: r.maxY ?? 1 / 0
       });
   }
-}, Ve = (t) => {
-  var y, p, E, b, T, P, M, L, J, K, Q, _;
-  const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
-  let s;
-  i !== void 0 ? Array.isArray(i) ? s = Be(
-    i.map(
-      (D) => te(D)
+}, 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)
     )
-  ) : s = te(i) : s = (D) => D.nextTransform;
-  const h = ((p = t == null ? void 0 : t.shift) == null ? void 0 : p.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), d = ((b = t == null ? void 0 : t.events) == null ? void 0 : b.onTransformChange) ?? (() => {
-  }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (D) => D.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, w = l !== void 0 ? l : (D) => D.button === 0, v = (M = t == null ? void 0 : t.scale) == null ? void 0 : M.mouseWheelEventVerifier, A = v !== void 0 ? v : () => !0;
+  ) : 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: o,
-    onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
+    wheelSensitivity: t,
+    onTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
+    onTransformFinished: ((J = r == null ? void 0 : r.events) == null ? void 0 : J.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: n,
-    onTransformChange: d,
-    transformPreprocessor: s,
-    shiftCursor: h,
-    mouseDownEventVerifier: a,
-    mouseUpEventVerifier: w,
-    mouseWheelEventVerifier: A,
-    scaleWheelFinishTimeout: ((K = t == null ? void 0 : t.scale) == null ? void 0 : K.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onResizeTransformStarted) ?? (() => {
+    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: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((_ = r == null ? void 0 : r.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Ue = (t, e, o) => ({
-  scale: t.scale,
-  x: t.x + t.scale * e,
-  y: t.y + t.scale * o
-}), Ce = (t, e, o, i) => ({
-  scale: t.scale * e,
-  x: t.scale * (1 - e) * o + t.x,
-  y: t.scale * (1 - e) * i + t.y
-}), I = (t) => {
-  const e = [], o = t.touches.length;
-  for (let d = 0; d < o; d++)
-    e.push([t.touches[d].clientX, t.touches[d].clientY]);
-  const i = e.reduce(
-    (d, c) => [d[0] + c[0], d[1] + c[1]],
+}, Ce = (r, e, t) => ({
+  scale: r.scale,
+  x: r.x + r.scale * e,
+  y: r.y + r.scale * t
+}), Ue = (r, e, t, s) => ({
+  scale: r.scale * e,
+  x: r.scale * (1 - e) * t + r.x,
+  y: r.scale * (1 - e) * s + r.y
+}), I = (r) => {
+  const e = [], t = r.touches.length;
+  for (let a = 0; a < t; a++)
+    e.push([r.touches[a].clientX, r.touches[a].clientY]);
+  const s = e.reduce(
+    (a, d) => [a[0] + d[0], a[1] + d[1]],
     [0, 0]
-  ), s = [i[0] / o, i[1] / o], n = e.map((d) => [d[0] - s[0], d[1] - s[1]]).reduce(
-    (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
+  ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
+    (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
-    x: s[0],
-    y: s[1],
-    scale: n / o,
-    touchesCnt: o,
+    x: i[0],
+    y: i[1],
+    scale: h / t,
+    touchesCnt: t,
     touches: e
   };
 };
-class U {
-  constructor(e, o, i, s) {
-    r(this, "viewport");
-    r(this, "prevTouches", null);
-    r(this, "wheelFinishTimer", null);
-    r(this, "transformInProgress", !1);
-    r(this, "onBeforeDestroy", () => {
+class C {
+  constructor(e, t, s, i) {
+    o(this, "viewport");
+    o(this, "prevTouches", null);
+    o(this, "wheelFinishTimer", null);
+    o(this, "transformInProgress", !1);
+    o(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("wheel", this.preventWheelScaleListener), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    r(this, "onMouseDown", (e) => {
+    o(this, "onMouseDown", (e) => {
       this.element === null || !this.config.mouseDownEventVerifier(e) || (B(this.element, this.config.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
-    r(this, "onWindowMouseMove", (e) => {
-      const o = m(
+    o(this, "onWindowMouseMove", (e) => {
+      const t = N(
         this.window,
         this.element,
         e.clientX,
         e.clientY
       );
-      if (this.element === null || !o) {
+      if (this.element === null || !t) {
         this.stopMouseDrag();
         return;
       }
-      const i = -e.movementX, s = -e.movementY;
-      this.moveViewport(i, s);
+      const s = -e.movementX, i = -e.movementY;
+      this.moveViewport(s, i);
     });
-    r(this, "onWindowMouseUp", (e) => {
+    o(this, "onWindowMouseUp", (e) => {
       this.element === null || !this.config.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
-    r(this, "onWheelScroll", (e) => {
+    o(this, "onWheelScroll", (e) => {
       if (!this.config.mouseWheelEventVerifier(e))
         return;
-      const { left: o, top: i } = this.element.getBoundingClientRect(), s = e.clientX - o, h = e.clientY - i, d = 1 / (e.deltaY < 0 ? this.config.wheelSensitivity : 1 / this.config.wheelSensitivity);
-      this.wheelFinishTimer === null && this.config.onTransformStarted(), this.scaleViewport(d, s, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      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);
     });
-    r(this, "onTouchStart", (e) => {
+    o(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
         this.prevTouches = I(e);
         return;
@@ -1226,42 +1226,42 @@ class U {
         passive: !0
       }), this.startRegisteredTransform();
     });
-    r(this, "onWindowTouchMove", (e) => {
-      const o = I(e);
-      if (!o.touches.every(
-        (s) => m(this.window, this.element, s[0], s[1])
+    o(this, "onWindowTouchMove", (e) => {
+      const t = I(e);
+      if (!t.touches.every(
+        (i) => N(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
       }
-      if ((o.touchesCnt === 1 || o.touchesCnt === 2) && this.moveViewport(
-        -(o.x - this.prevTouches.x),
-        -(o.y - this.prevTouches.y)
-      ), o.touchesCnt === 2) {
-        const { left: s, top: h } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, d = this.prevTouches.y - h, a = 1 / (o.scale / this.prevTouches.scale);
-        this.scaleViewport(a, n, d);
+      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
+        -(t.x - this.prevTouches.x),
+        -(t.y - this.prevTouches.y)
+      ), t.touchesCnt === 2) {
+        const { left: i, top: n } = this.element.getBoundingClientRect(), h = this.prevTouches.x - i, a = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        this.scaleViewport(c, h, a);
       }
-      this.prevTouches = o;
+      this.prevTouches = t;
     });
-    r(this, "onWindowTouchFinish", (e) => {
+    o(this, "onWindowTouchFinish", (e) => {
       e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
     });
-    r(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: o, height: i } = this.element.getBoundingClientRect(), s = this.config.transformPreprocessor({
+    o(this, "observer", new ResizeObserver(() => {
+      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.config.transformPreprocessor({
         prevTransform: e,
         nextTransform: e,
-        canvasWidth: o,
-        canvasHeight: i
+        canvasWidth: t,
+        canvasHeight: s
       });
-      this.config.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.config.onResizeTransformFinished();
+      this.config.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.config.onResizeTransformFinished();
     }));
-    r(this, "config");
-    r(this, "preventWheelScaleListener", (e) => {
+    o(this, "config");
+    o(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Ve(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Ve(i), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
@@ -1269,32 +1269,32 @@ class U {
       passive: !0
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, i, s) {
-    new U(
+  static configure(e, t, s, i) {
+    new C(
       e,
-      o,
-      i,
-      s
+      t,
+      s,
+      i
     );
   }
-  moveViewport(e, o) {
-    const i = this.viewport.getViewportMatrix(), s = Ue(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+  moveViewport(e, t) {
+    const s = this.viewport.getViewportMatrix(), i = Ce(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.config.transformPreprocessor({
+      prevTransform: s,
+      nextTransform: i,
+      canvasWidth: n,
+      canvasHeight: h
+    });
+    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({
       prevTransform: i,
-      nextTransform: s,
+      nextTransform: n,
       canvasWidth: h,
-      canvasHeight: n
+      canvasHeight: a
     });
     this.performTransform(d);
   }
-  scaleViewport(e, o, i) {
-    const s = this.canvas.viewport.getViewportMatrix(), h = Ce(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
-      prevTransform: s,
-      nextTransform: h,
-      canvasWidth: n,
-      canvasHeight: d
-    });
-    this.performTransform(c);
-  }
   stopMouseDrag() {
     B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
@@ -1318,21 +1318,21 @@ class U {
   }
 }
 class X {
-  constructor(e, o, i, s, h, n) {
-    r(this, "canvasResizeObserver");
-    r(this, "nodeHorizontal");
-    r(this, "nodeVertical");
-    r(this, "viewport");
-    r(this, "viewportWidth", 0);
-    r(this, "viewportHeight", 0);
-    r(this, "viewportMatrix");
-    r(this, "loadedArea", {
+  constructor(e, t, s, i, n, h) {
+    o(this, "canvasResizeObserver");
+    o(this, "nodeHorizontal");
+    o(this, "nodeVertical");
+    o(this, "viewport");
+    o(this, "viewportWidth", 0);
+    o(this, "viewportHeight", 0);
+    o(this, "viewportMatrix");
+    o(this, "loadedArea", {
       xFrom: 1 / 0,
       xTo: 1 / 0,
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    r(this, "updateLoadedArea", (e) => {
+    o(this, "updateLoadedArea", (e) => {
       this.loadedArea = {
         xFrom: e.x,
         xTo: e.x + e.width,
@@ -1340,63 +1340,63 @@ class X {
         yTo: e.y + e.height
       };
     });
-    r(this, "onBeforeDestroy", () => {
+    o(this, "onBeforeDestroy", () => {
       this.trigger.unsubscribe(this.updateLoadedArea), this.canvasResizeObserver.unobserve(this.element), this.canvas.viewport.onAfterUpdated.unsubscribe(
         this.onAfterViewportUpdated
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    r(this, "onAfterViewportUpdated", () => {
+    o(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
-    r(this, "userTransformInProgress", !1);
-    var A, y, p, E, b;
-    this.canvas = e, this.element = o, this.window = i, this.trigger = h, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((T) => {
-      const P = T[0];
-      this.viewportWidth = P.contentRect.width, this.viewportHeight = P.contentRect.height, this.scheduleLoadAreaAroundViewport();
+    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.viewport = e.viewport;
-    const d = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onResizeTransformStarted) ?? (() => {
-    }), c = ((y = s == null ? void 0 : s.events) == null ? void 0 : y.onResizeTransformFinished) ?? (() => {
-    }), a = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onTransformChange) ?? (() => {
-    }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-    }), w = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
+    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 = {
-      ...s,
+      ...i,
       events: {
-        ...s == null ? void 0 : s.events,
+        ...i == null ? void 0 : i.events,
         onResizeTransformStarted: () => {
-          this.userTransformInProgress = !0, d();
+          this.userTransformInProgress = !0, a();
         },
         onResizeTransformFinished: () => {
-          this.userTransformInProgress = !1, c();
+          this.userTransformInProgress = !1, d();
         },
         onBeforeTransformChange: () => {
-          this.userTransformInProgress = !0, l();
+          this.userTransformInProgress = !0, g();
         },
         onTransformChange: () => {
           this.userTransformInProgress = !1;
-          const T = this.viewportMatrix;
-          this.viewportMatrix = this.viewport.getViewportMatrix(), T.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
+          const b = this.viewportMatrix;
+          this.viewportMatrix = this.viewport.getViewportMatrix(), b.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), c();
         },
         onTransformFinished: () => {
-          this.scheduleLoadAreaAroundViewport(), w();
+          this.scheduleLoadAreaAroundViewport(), l();
         }
       }
     };
-    U.configure(
+    C.configure(
       e,
       this.element,
       this.window,
       v
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, i, s, h, n) {
+  static configure(e, t, s, i, n, h) {
     new X(
       e,
-      o,
-      i,
+      t,
       s,
-      h,
-      n
+      i,
+      n,
+      h
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -1405,130 +1405,130 @@ class X {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, i = this.viewportMatrix.x - this.nodeHorizontal, s = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + e + this.nodeHorizontal, n = this.viewportMatrix.y + o + this.nodeVertical;
-    this.loadedArea.xFrom < i && this.loadedArea.xTo > h && this.loadedArea.yFrom < s && this.loadedArea.yTo > n || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, h = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, i = this.viewportMatrix.x - e - this.nodeHorizontal, s = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * e + 2 * this.nodeHorizontal, n = 3 * o + 2 * this.nodeVertical;
-    this.trigger.emit({ x: i, y: s, width: h, height: n });
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, h = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: s, y: i, width: n, height: h });
   }
 }
-const We = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return t.style.position = "absolute", t.style.inset = "0", t;
-}, $e = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  return t.setAttribute("fill", "url(#pattern)"), t;
+const $e = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return r.style.position = "absolute", r.style.inset = "0", r;
+}, We = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  return r.setAttribute("fill", "url(#pattern)"), r;
 }, Fe = () => {
-  const t = document.createElementNS(
+  const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
-  return t.setAttribute("id", "pattern"), t;
-}, Oe = (t, e) => {
-  const o = document.createElementNS(
+  return r.setAttribute("id", "pattern"), r;
+}, Oe = (r, e) => {
+  const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
-  return o.setAttribute("cx", "0"), o.setAttribute("cy", "0"), o.setAttribute("r", `${t}`), o.setAttribute("fill", `${e}`), o;
-}, ke = (t) => t instanceof SVGElement ? t : Oe(
-  (t == null ? void 0 : t.radius) ?? 1.5,
-  (t == null ? void 0 : t.color) ?? "#d8d8d8"
-), ze = (t) => {
-  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = ke(t.renderer ?? {});
+  return 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: o,
-    tileHeight: i,
-    renderer: s,
-    maxViewportScale: t.maxViewportScale ?? 10
+    tileWidth: t,
+    tileHeight: s,
+    renderer: i,
+    maxViewportScale: r.maxViewportScale ?? 10
   };
 };
 class Y {
-  constructor(e, o, i) {
-    r(this, "svg", We());
-    r(this, "patternRenderingRectangle", $e());
-    r(this, "pattern", Fe());
-    r(this, "patternContent");
-    r(this, "tileWidth");
-    r(this, "tileHeight");
-    r(this, "halfTileWidth");
-    r(this, "halfTileHeight");
-    r(this, "maxViewportScale");
-    r(this, "visible", !1);
-    r(this, "resizeObserver", new ResizeObserver((e) => {
-      const o = e[0], { width: i, height: s } = o.contentRect;
-      this.svg.setAttribute("width", `${i}`), this.svg.setAttribute("height", `${s}`), this.patternRenderingRectangle.setAttribute("width", `${i}`), this.patternRenderingRectangle.setAttribute("height", `${s}`);
-      const h = this.tileWidth / i, n = this.tileHeight / s;
-      this.pattern.setAttribute("width", `${h}`), this.pattern.setAttribute("height", `${n}`);
+  constructor(e, t, s) {
+    o(this, "svg", $e());
+    o(this, "patternRenderingRectangle", We());
+    o(this, "pattern", Fe());
+    o(this, "patternContent");
+    o(this, "tileWidth");
+    o(this, "tileHeight");
+    o(this, "halfTileWidth");
+    o(this, "halfTileHeight");
+    o(this, "maxViewportScale");
+    o(this, "visible", !1);
+    o(this, "resizeObserver", new ResizeObserver((e) => {
+      const t = e[0], { width: s, height: i } = t.contentRect;
+      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
+      const n = this.tileWidth / s, h = this.tileHeight / i;
+      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
     }));
-    r(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), o = e.x - this.halfTileWidth * e.scale, i = e.y - this.halfTileHeight * e.scale, s = `matrix(${e.scale}, 0, 0, ${e.scale}, ${o}, ${i})`;
-      this.pattern.setAttribute("patternTransform", s), this.updateVisibility();
+    o(this, "onAfterTransformUpdated", () => {
+      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
+      this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
     });
-    r(this, "onBeforeDestroy", () => {
+    o(this, "onBeforeDestroy", () => {
       this.resizeObserver.unobserve(this.host), this.host.removeChild(this.svg), this.canvas.viewport.onAfterUpdated.unsubscribe(
         this.onAfterTransformUpdated
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    this.canvas = e, this.host = i;
-    const s = ze(o);
-    this.tileWidth = s.tileWidth, this.tileHeight = s.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = s.renderer, this.maxViewportScale = s.maxViewportScale;
-    const h = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
-    this.patternContent.setAttribute("transform", h), this.pattern.appendChild(this.patternContent);
-    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);
+    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);
   }
-  static configure(e, o, i) {
-    new Y(e, o, i);
+  static configure(e, t, s) {
+    new Y(e, t, s);
   }
   updateVisibility() {
-    const o = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
-    o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
+    const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
+    t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const Xe = (t) => {
-  var d, c, a;
-  const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
-  }, h = () => {
+const Xe = (r) => {
+  var a, d, c;
+  const e = () => "direct", t = (g) => g, s = (g) => g.button === 0, i = () => {
   }, n = () => {
+  }, h = () => {
   };
   return {
-    connectionTypeResolver: t.connectionTypeResolver ?? e,
-    connectionPreprocessor: t.connectionPreprocessor ?? o,
-    mouseDownEventVerifier: t.mouseDownEventVerifier ?? i,
-    mouseUpEventVerifier: t.mouseUpEventVerifier ?? i,
-    onAfterEdgeCreated: ((d = t.events) == null ? void 0 : d.onAfterEdgeCreated) ?? s,
-    onEdgeCreationInterrupted: ((c = t.events) == null ? void 0 : c.onEdgeCreationInterrupted) ?? n,
-    onEdgeCreationPrevented: ((a = t.events) == null ? void 0 : a.onEdgeCreationPrevented) ?? h,
-    dragPortDirection: t.dragPortDirection ?? void 0
+    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
   };
 };
 class H {
-  constructor(e, o, i, s, h, n) {
-    r(this, "config");
-    r(this, "overlayCanvas");
-    r(this, "staticOverlayPortId", "static");
-    r(this, "draggingOverlayPortId", "dragging");
-    r(this, "staticPortId", null);
-    r(this, "isDirect", !0);
-    r(this, "onAfterPortMarked", (e) => {
-      const o = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.hookPortEvents(o.element);
-    });
-    r(this, "onBeforePortUnmarked", (e) => {
-      const o = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortsIds(o.element).length === 1 && this.unhookPortEvents(o.element);
-    });
-    r(this, "onPortMouseDown", (e) => {
-      const o = e.currentTarget;
-      this.config.mouseDownEventVerifier(e) && this.isPortConnectionAllowed(o) && (e.stopPropagation(), this.grabPort(o, { x: e.clientX, y: e.clientY }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+  constructor(e, t, s, i, n, h) {
+    o(this, "config");
+    o(this, "overlayCanvas");
+    o(this, "staticOverlayPortId", "static");
+    o(this, "draggingOverlayPortId", "dragging");
+    o(this, "staticPortId", null);
+    o(this, "isDirect", !0);
+    o(this, "onAfterPortMarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortsIds(t.element).length === 1 && this.hookPortEvents(t.element);
+    });
+    o(this, "onBeforePortUnmarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortsIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    });
+    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, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }));
     });
-    r(this, "onWindowMouseMove", (e) => {
-      if (!m(
+    o(this, "onWindowMouseMove", (e) => {
+      if (!N(
         this.window,
         this.overlayLayer,
         e.clientX,
@@ -1539,16 +1539,16 @@ class H {
       }
       this.moveDraggingNode({ x: e.clientX, y: e.clientY });
     });
-    r(this, "onWindowMouseUp", (e) => {
+    o(this, "onWindowMouseUp", (e) => {
       this.config.mouseUpEventVerifier(e) && (this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
     });
-    r(this, "onPortTouchStart", (e) => {
-      const o = e.currentTarget;
-      if (!(e.touches.length === 1 && this.isPortConnectionAllowed(o)))
+    o(this, "onPortTouchStart", (e) => {
+      const t = e.currentTarget;
+      if (!(e.touches.length === 1 && this.isPortConnectionAllowed(t)))
         return;
       e.stopPropagation();
-      const s = e.touches[0];
-      this.grabPort(o, { x: s.clientX, y: s.clientY }), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      const i = e.touches[0];
+      this.grabPort(t, { x: i.clientX, y: i.clientY }), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -1556,82 +1556,82 @@ class H {
         passive: !0
       });
     });
-    r(this, "onWindowTouchMove", (e) => {
-      const o = e.touches[0];
-      if (!m(
+    o(this, "onWindowTouchMove", (e) => {
+      const t = e.touches[0];
+      if (!N(
         this.window,
         this.overlayLayer,
-        o.clientX,
-        o.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.stopTouchDrag();
         return;
       }
-      this.moveDraggingNode({ x: o.clientX, y: o.clientY });
+      this.moveDraggingNode({ x: t.clientX, y: t.clientY });
     });
-    r(this, "onWindowTouchFinish", (e) => {
-      const o = e.changedTouches[0];
-      this.tryCreateConnection({ x: o.clientX, y: o.clientY }), this.stopTouchDrag();
+    o(this, "onWindowTouchFinish", (e) => {
+      const t = e.changedTouches[0];
+      this.tryCreateConnection({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
     });
-    r(this, "onBeforeClear", () => {
+    o(this, "onBeforeClear", () => {
       this.canvas.graph.getAllPortIds().forEach((e) => {
-        const o = this.canvas.graph.getPort(e);
-        this.unhookPortEvents(o.element);
+        const t = this.canvas.graph.getPort(e);
+        this.unhookPortEvents(t.element);
       });
     });
-    r(this, "onBeforeDestroy", () => {
+    o(this, "onBeforeDestroy", () => {
       this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
         this.onBeforePortUnmarked
       ), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
-    r(this, "onEdgeCreated", (e) => {
+    o(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = Xe(n);
-    const d = new ae(), c = new he(
-      d,
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.config = Xe(h);
+    const a = new de(), d = new ne(
+      a,
       this.viewportStore,
       this.overlayLayer
     );
-    this.overlayCanvas = new ce(
+    this.overlayCanvas = new ae(
       this.overlayLayer,
-      d,
+      a,
       this.viewportStore,
-      c,
-      h
+      d,
+      n
     ), this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, i, s, h, n) {
+  static configure(e, t, s, i, n, h) {
     new H(
       e,
-      o,
-      i,
+      t,
       s,
-      h,
-      n
+      i,
+      n,
+      h
     );
   }
-  grabPort(e, o) {
-    const i = this.canvas.graph.getElementPortsIds(e)[0], s = this.canvas.graph.getPort(i);
-    this.staticPortId = i;
-    const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), w = N(l, {
-      x: d - a.x,
-      y: c - a.y
-    }), v = N(l, {
-      x: o.x - a.x,
-      y: o.y - a.y
-    }), A = {
+  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, {
+      x: a - c.x,
+      y: d - c.y
+    }), v = D(g, {
+      x: t.x - c.x,
+      y: t.y - c.y
+    }), p = {
       overlayId: this.staticOverlayPortId,
-      portCoords: w,
-      portDirection: s.direction
-    }, y = {
+      portCoords: l,
+      portDirection: i.direction
+    }, f = {
       overlayId: this.draggingOverlayPortId,
       portCoords: v,
       portDirection: this.config.dragPortDirection
     };
-    this.isDirect = h === "direct";
-    const p = this.isDirect ? A : y, E = this.isDirect ? y : A;
-    this.createOverlayGraph(p, E);
+    this.isDirect = n === "direct";
+    const A = this.isDirect ? p : f, m = this.isDirect ? f : p;
+    this.createOverlayGraph(A, m);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -1652,351 +1652,468 @@ class H {
   resetDragState() {
     this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
   }
-  createOverlayGraph(e, o) {
-    const i = this.createAddNodeRequest(e);
-    this.overlayCanvas.addNode(i);
-    const s = this.createAddNodeRequest(o);
-    this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
+  createOverlayGraph(e, t) {
+    const s = this.createAddNodeRequest(e);
+    this.overlayCanvas.addNode(s);
+    const i = this.createAddNodeRequest(t);
+    this.overlayCanvas.addNode(i), this.overlayCanvas.addEdge({
       from: e.overlayId,
-      to: o.overlayId
+      to: t.overlayId
     });
   }
   createAddNodeRequest(e) {
-    const o = document.createElement("div");
+    const t = document.createElement("div");
     return {
       id: e.overlayId,
-      element: o,
+      element: t,
       x: e.portCoords.x,
       y: e.portCoords.y,
       ports: [
         {
           id: e.overlayId,
-          element: o,
+          element: t,
           direction: e.portDirection
         }
       ]
     };
   }
   tryCreateConnection(e) {
-    const o = this.findPortAtPoint(e);
-    if (o === null) {
+    const t = this.findPortAtPoint(e);
+    if (t === null) {
       this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
       return;
     }
-    const i = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: i, to: s }, n = this.config.connectionPreprocessor(h);
-    n !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(h);
+    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);
   }
   moveDraggingNode(e) {
-    const o = this.overlayLayer.getBoundingClientRect(), i = {
-      x: e.x - o.x,
-      y: e.y - o.y
-    }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
+    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);
     this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
-      x: h.x,
-      y: h.y
+      x: n.x,
+      y: n.y
     });
   }
   findPortAtPoint(e) {
-    const o = document.elementsFromPoint(e.x, e.y);
-    for (const i of o) {
-      const s = this.findPortAtElement(i);
-      if (s !== null)
-        return s;
+    const t = document.elementsFromPoint(e.x, e.y);
+    for (const s of t) {
+      const i = this.findPortAtElement(s);
+      if (i !== null)
+        return i;
     }
     return null;
   }
   findPortAtElement(e) {
-    let o = e, i = null;
-    for (; o !== null && (i = this.canvas.graph.getElementPortsIds(o)[0] ?? null, i === null); )
-      o = o.parentElement;
-    return i;
+    let t = e, s = null;
+    for (; t !== null && (s = this.canvas.graph.getElementPortsIds(t)[0] ?? null, s === null); )
+      t = t.parentElement;
+    return s;
   }
   isPortConnectionAllowed(e) {
-    const o = this.canvas.graph.getElementPortsIds(e)[0];
-    return this.config.connectionTypeResolver(o) !== null;
+    const t = this.canvas.graph.getElementPortsIds(e)[0];
+    return this.config.connectionTypeResolver(t) !== null;
   }
 }
 const Ye = () => {
-  const t = document.createElement("div");
-  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
-}, $ = () => {
-  const t = document.createElement("div");
-  return t.style.position = "absolute", t.style.inset = "0", t;
+  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 {
   constructor(e) {
-    r(this, "background", $());
-    r(this, "main", $());
-    r(this, "overlay", $());
-    r(this, "host", Ye());
+    o(this, "background", W());
+    o(this, "main", W());
+    o(this, "overlay", W());
+    o(this, "host", Ye());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
   }
 }
-const je = (t, e) => ({
-  x: t / 2,
+const je = (r, e) => ({
+  x: r / 2,
   y: e / 2
-}), F = (t) => () => t, oe = F(0), Ge = () => {
-  let t = 0;
-  return () => t++;
-}, Ze = (t, e) => {
-  let o = oe, i = oe;
-  const s = Ge();
-  return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = F(t)), typeof e == "number" && (i = F(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
-    nodesPriorityFn: o,
-    edgesPriorityFn: i
+}), F = (r) => () => r, re = F(0), Ge = () => {
+  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), {
+    nodesPriorityFn: t,
+    edgesPriorityFn: s
   };
-}, f = (t, e, o) => ({
-  x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
-  y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
-}), g = {
+}, y = (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
-}, Je = (t) => {
-  const e = f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ), o = f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ), i = {
-    x: e.x + t.sourceDirection.x * t.curvature,
-    y: e.y + t.sourceDirection.y * t.curvature
-  }, s = {
-    x: o.x - t.targetDirection.x * t.curvature,
-    y: o.y - t.targetDirection.y * t.curvature
-  }, h = `M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${g.x} ${g.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
-  return `${n}${h}${d}`;
-}, Ke = (t) => {
-  const e = t.hasSourceArrow ? f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ) : g, o = t.hasTargetArrow ? f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = f(
-    { x: i, y: g.y },
-    t.sourceDirection,
-    g
-  ), a = {
-    x: c.x + n,
-    y: c.y + d
-  }, l = f(
-    { x: t.to.x - i, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ), w = {
-    x: l.x + n,
-    y: l.y + d
-  }, v = { x: (a.x + w.x) / 2, y: (a.y + w.y) / 2 }, A = {
-    x: c.x + t.curvature * t.sourceDirection.x,
-    y: c.y + t.curvature * t.sourceDirection.y
-  }, y = {
-    x: l.x - t.curvature * t.targetDirection.x,
-    y: l.y - t.curvature * t.targetDirection.y
-  }, p = {
-    x: c.x + n,
-    y: c.y + d
-  }, E = {
-    x: l.x + n,
-    y: l.y + d
-  };
-  return [
-    `M ${e.x} ${e.y}`,
-    `L ${c.x} ${c.y}`,
-    `C ${A.x} ${A.y} ${p.x} ${p.y} ${v.x} ${v.y}`,
-    `C ${E.x} ${E.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
-    `L ${o.x} ${o.y}`
-  ].join(" ");
-}, R = (t, e) => {
-  const o = [];
-  if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
-    const i = t.length - 1;
-    let s = 0, h = 0, n = 0;
-    t.forEach((d, c) => {
-      let a = 0, l = 0, w = 0;
-      const v = c > 0, A = c < i, y = v && A;
-      if (v && (a = -s, l = -h, w = n), A) {
-        const L = t[c + 1];
-        s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
+};
+class Je {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.to;
+    this.median = { x: t.x / 2, y: t.y / 2 };
+    const s = y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), i = y(
+      { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), n = {
+      x: s.x + this.params.sourceDirection.x * this.params.curvature,
+      y: s.y + this.params.sourceDirection.y * this.params.curvature
+    }, h = {
+      x: i.x - this.params.targetDirection.x * this.params.curvature,
+      y: i.y - this.params.targetDirection.y * this.params.curvature
+    }, a = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    this.path = `${d}${a}${c}`;
+  }
+}
+const ce = (r, e, t, s) => ({
+  x: e * r.x + (1 - e) / 2 * s.x,
+  y: t * r.y + (1 - t) / 2 * s.y
+});
+class Ke {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, s = this.params.hasTargetArrow ? y(
+      {
+        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(
+      { x: i, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), g = {
+      x: c.x + a,
+      y: c.y + d
+    }, l = y(
+      { x: this.params.to.x - i, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    ), v = {
+      x: l.x + a,
+      y: l.y + d
+    }, p = {
+      x: (g.x + v.x) / 2,
+      y: (g.y + v.y) / 2
+    }, f = {
+      x: c.x + this.params.curvature * this.params.sourceDirection.x,
+      y: c.y + this.params.curvature * this.params.sourceDirection.y
+    }, A = {
+      x: l.x - this.params.curvature * this.params.targetDirection.x,
+      y: l.y - this.params.curvature * this.params.targetDirection.y
+    }, m = {
+      x: c.x + a,
+      y: c.y + d
+    }, x = {
+      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}`,
+      `L ${s.x} ${s.y}`
+    ].join(" "), this.median = ce(p, e.flipX, e.flipY, e.to);
+  }
+}
+const R = (r, e) => {
+  const t = [];
+  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
+    const s = r.length - 1;
+    let i = 0, n = 0, h = 0;
+    r.forEach((a, d) => {
+      let c = 0, g = 0, l = 0;
+      const v = d > 0, p = d < s, f = v && p;
+      if (v && (c = -i, g = -n, l = h), p) {
+        const L = r[d + 1];
+        i = L.x - a.x, n = L.y - a.y, h = Math.sqrt(i * i + n * n);
       }
-      const E = n !== 0 ? Math.min((y ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = y ? { x: d.x + s * E, y: d.y + h * E } : d, P = w !== 0 ? Math.min((y ? e : 0) / w, c > 1 ? 0.5 : 1) : 0, M = y ? { x: d.x + a * P, y: d.y + l * P } : d;
-      c > 0 && o.push(`L ${M.x} ${M.y}`), y && o.push(
-        `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
+      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}`
       );
     });
   }
-  return o.join(" ");
-}, Qe = (t) => {
-  const e = t.hasSourceArrow ? f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ) : g, o = t.hasTargetArrow ? f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
-    { x: s, y: g.y },
-    t.sourceDirection,
-    g
-  ), n = f(
-    { x: t.to.x - s, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
-    x: t.flipX > 0 ? d : -i,
-    y: h.y
-  }, l = { x: a.x, y: c }, w = {
-    x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
-    y: n.y
-  }, v = { x: w.x, y: c };
-  return R(
-    [e, h, a, l, v, w, n, o],
-    t.roundness
-  );
-}, j = (t) => {
-  const e = t.hasSourceArrow ? f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ) : g, o = t.hasTargetArrow ? f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
-    { x: i, y: g.y },
-    t.sourceDirection,
-    g
-  ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = f(
-    { x: t.to.x - i, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ), w = { x: l.x + d, y: l.y + c };
-  return R(
-    [e, s, a, w, l, o],
-    t.roundness
-  );
-}, _e = (t) => {
-  const e = t.hasSourceArrow ? f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ) : g, o = t.hasTargetArrow ? f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = f(
-    { x: i, y: g.y },
-    t.sourceDirection,
-    g
-  ), h = f(
-    { x: t.to.x - i, y: t.to.y },
-    t.targetDirection,
-    t.to
-  );
-  return R([e, s, h, o], t.roundness);
-}, qe = (t) => {
-  const e = t.hasSourceArrow ? f(
-    { x: t.arrowLength, y: g.y },
-    t.sourceDirection,
-    g
-  ) : g, o = t.hasTargetArrow ? f(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = f(
-    { x: s, y: g.y },
-    t.sourceDirection,
-    g
-  ), n = f(
-    { x: t.to.x - s, y: t.to.y },
-    t.targetDirection,
-    t.to
-  ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
-    x: h.x,
-    y: t.flipY > 0 ? d : -i
-  }, l = { x: c, y: a.y }, w = {
-    x: n.x,
-    y: t.flipY > 0 ? t.to.y - d : t.to.y + i
-  }, v = { x: c, y: w.y };
-  return R(
-    [e, h, a, l, v, w, n, o],
-    t.roundness
-  );
-}, G = (t) => {
-  const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
-    { x: t.arrowLength, y: g.y },
-    { x: i, y: g.y },
-    { x: i, y: t.side },
-    { x: s, y: t.side },
-    { x: s, y: -t.side },
-    { x: i, y: -t.side },
-    { x: i, y: g.y },
-    { x: t.arrowLength, y: g.y }
-  ].map(
-    (c) => f(c, t.sourceDirection, g)
-  ), d = `M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${R(n, t.roundness)}`;
-}, et = (t) => {
-  const e = t.smallRadius, o = t.radius, i = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + i * (1 - o / s), n = e * o / s, c = [
-    { x: t.arrowLength, y: g.y },
-    { x: h, y: n },
-    { x: h, y: -n }
-  ].map(
-    (w) => f(w, t.sourceDirection, g)
-  ), a = [
-    `M ${c[0].x} ${c[0].y}`,
-    `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
-    `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
-    `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
-  ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
-}, le = (t, e) => {
-  t.style.transform = `translate(${e.x}px, ${e.y}px)`, t.style.width = `${Math.max(e.width, 1)}px`, t.style.height = `${Math.max(e.height, 1)}px`;
+  return t.join(" ");
+};
+class Qe {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.to;
+    this.median = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? y(
+      {
+        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(
+      { x: h, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), d = y(
+      { 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 = {
+      x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
+      y: d.y
+    }, f = { x: p.x, y: g };
+    this.path = R(
+      [s, a, l, v, f, p, d, i],
+      this.params.roundness
+    );
+  }
+}
+class j {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, s = this.params.hasTargetArrow ? y(
+      {
+        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(
+      { 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(
+      { 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],
+      this.params.roundness
+    );
+  }
+}
+class _e {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.to;
+    this.median = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? y(
+      {
+        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(
+      { x: n, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), a = y(
+      { x: this.params.to.x - n, y: this.params.to.y },
+      this.params.targetDirection,
+      this.params.to
+    );
+    this.path = R([s, h, a, i], this.params.roundness);
+  }
+}
+class qe {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.to;
+    this.median = { x: t.x / 2, y: t.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: w.y },
+      this.params.sourceDirection,
+      w
+    ) : w, i = this.params.hasTargetArrow ? y(
+      {
+        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(
+      { x: h, y: w.y },
+      this.params.sourceDirection,
+      w
+    ), d = y(
+      { 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 = {
+      x: d.x,
+      y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
+    }, f = { x: g, y: p.y };
+    this.path = R(
+      [s, a, l, v, f, p, d, i],
+      this.params.roundness
+    );
+  }
+}
+class G {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
+      { x: this.params.arrowLength, y: w.y },
+      { x: i, y: w.y },
+      { x: i, y: this.params.side },
+      { x: n, y: this.params.side },
+      { x: n, y: -this.params.side },
+      { x: i, y: -this.params.side },
+      { x: i, y: w.y },
+      { x: this.params.arrowLength, y: w.y }
+    ].map(
+      (c) => y(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 };
+  }
+}
+class et {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    this.params = e;
+    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, h = Math.sqrt(i * i - t * t), a = h * t / i, d = h + s + this.params.arrowLength, c = this.params.arrowLength + a, l = [
+      { x: this.params.arrowLength, y: w.y },
+      { x: c, y: n },
+      { x: c, y: -n },
+      { x: d, y: 0 }
+    ].map(
+      (f) => y(f, this.params.sourceDirection, w)
+    ), v = [
+      `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];
+  }
+}
+class tt {
+  constructor(e) {
+    o(this, "path");
+    o(this, "median");
+    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(
+      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
+    ), Math.sqrt(
+      this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
+    ) === 0) {
+      this.path = "";
+      return;
+    }
+    const i = this.createDirectLinePoint({
+      offset: this.params.sourceOffset,
+      hasArrow: this.params.hasSourceArrow,
+      flip: 1,
+      shift: w
+    }), n = this.createDirectLinePoint({
+      offset: this.params.targetOffset,
+      hasArrow: this.params.hasTargetArrow,
+      flip: -1,
+      shift: this.params.to
+    });
+    this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
+  }
+  createDirectLinePoint(e) {
+    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, i = e.flip * s / this.diagonalDistance;
+    return {
+      x: this.params.to.x * i + e.shift.x,
+      y: this.params.to.y * i + e.shift.y
+    };
+  }
+}
+const le = (r, e) => {
+  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
 }, Z = Object.freeze({
   edgeColor: "--edge-color"
-}), ue = (t) => {
+}), ge = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Z.edgeColor, t), e;
+  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 t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("fill", `var(${Z.edgeColor})`), t;
-}, ge = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return t.style.transformOrigin = "50% 50%", t;
-}, we = (t) => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
+}, ue = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.transformOrigin = "50% 50%", r;
+}, we = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e;
-}, fe = (t, e) => {
-  const o = {
-    x: t.x + t.width / 2,
-    y: t.y + t.height / 2
-  }, i = {
+  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, pe = (r, e) => {
+  const t = {
+    x: r.x + r.width / 2,
+    y: r.y + r.height / 2
+  }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
+  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), h = Math.abs(s.x - t.x), a = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
   return {
-    x: s,
-    y: h,
-    width: n,
-    height: d,
-    flipX: c,
-    flipY: a
+    x: i,
+    y: n,
+    width: h,
+    height: a,
+    flipX: d,
+    flipY: c
   };
-}, O = (t, e, o, i) => {
-  const h = [
-    g,
-    { x: o, y: i },
-    { x: o, y: -i }
-  ].map((a) => f(a, t, g)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
-  return `${n} ${d} ${c} Z`;
+}, O = (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}`;
+  return `${h} ${a} ${d} Z`;
 }, u = Object.freeze({
   color: "#777777",
   width: 1,
@@ -2015,81 +2132,85 @@ const je = (t, e) => ({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), re = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
-class C {
+}), oe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class U {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group", ge());
-    r(this, "line");
-    r(this, "sourceArrow", null);
-    r(this, "targetArrow", null);
-    this.params = e, this.svg = ue(e.color), this.svg.appendChild(this.group), this.line = we(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    o(this, "svg");
+    o(this, "group", ue());
+    o(this, "line");
+    o(this, "sourceArrow", null);
+    o(this, "targetArrow", null);
+    o(this, "onAfterRender");
+    o(this, "afterRenderEmitter");
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.svg = ge(e.color), this.svg.appendChild(this.group), this.line = we(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = fe(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
       e.from,
       e.to
     );
-    le(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
-    const c = re(
+    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = oe(
       e.from.direction,
-      n,
-      d
-    ), a = re(
+      h,
+      a
+    ), c = oe(
       e.to.direction,
-      n,
-      d
-    ), l = {
-      x: s,
-      y: h
+      h,
+      a
+    ), g = {
+      x: i,
+      y: n
     };
-    let w = a, v = -this.params.arrowLength, A;
-    e.from.portId === e.to.portId ? (A = this.params.createCyclePath, w = c, v = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? A = this.params.createDetourPath : A = this.params.createLinePath;
-    const y = A(
+    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(
+      d,
       c,
-      a,
-      l,
-      n,
-      d
+      g,
+      h,
+      a
     );
-    if (this.line.setAttribute("d", y), this.sourceArrow) {
-      const p = O(
-        c,
-        g,
-        this.params.arrowLength,
-        this.params.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", p);
-    }
-    if (this.targetArrow) {
-      const p = O(
-        w,
-        l,
-        v,
-        this.params.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", p);
-    }
+    this.line.setAttribute("d", f.path);
+    let A = null;
+    this.sourceArrow && (A = O(
+      d,
+      w,
+      this.params.arrowLength,
+      this.params.arrowWidth
+    ), this.sourceArrow.setAttribute("d", A));
+    let m = null;
+    this.targetArrow && (m = O(
+      l,
+      g,
+      v,
+      this.params.arrowWidth
+    ), this.targetArrow.setAttribute("d", m)), this.afterRenderEmitter.emit({
+      edgePath: f,
+      sourceArrowPath: A,
+      targetArrowPath: m
+    });
   }
 }
-class tt {
+class rt {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "curvature");
-    r(this, "portCycleRadius");
-    r(this, "portCycleSmallRadius");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => et({
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "curvature");
+    o(this, "portCycleRadius");
+    o(this, "portCycleSmallRadius");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new et({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -2097,12 +2218,12 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => Ke({
-      to: i,
+    o(this, "createDetourPath", (e, t, s, i, n) => new Ke({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipX: s,
-      flipY: h,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
@@ -2110,16 +2231,16 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => Je({
-      to: i,
+    o(this, "createLinePath", (e, t, s) => new Je({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
+      targetDirection: t,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new C({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2129,30 +2250,31 @@ class tt {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
-    this.lineShape.render(e);
+    this.pathShape.render(e);
   }
 }
 class ot {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => G({
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2161,12 +2283,12 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => j({
-      to: i,
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipX: s,
-      flipY: h,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2175,11 +2297,11 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s) => Qe({
-      to: i,
+    o(this, "createLinePath", (e, t, s, i) => new Qe({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipX: s,
+      targetDirection: t,
+      flipX: i,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2187,12 +2309,12 @@ class ot {
       hasTargetArrow: this.hasTargetArrow
     }));
     this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
-      o,
+      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.lineShape = new C({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2202,30 +2324,31 @@ class ot {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
-    this.lineShape.render(e);
+    this.pathShape.render(e);
   }
 }
-class rt {
+class st {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => G({
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2234,12 +2357,12 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => j({
-      to: i,
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipX: s,
-      flipY: h,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2248,10 +2371,10 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i) => _e({
-      to: i,
+    o(this, "createLinePath", (e, t, s) => new _e({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
+      targetDirection: t,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2259,12 +2382,12 @@ class rt {
       hasTargetArrow: this.hasTargetArrow
     }));
     this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
-      o,
+      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.lineShape = new C({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2274,30 +2397,31 @@ class rt {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
-    this.lineShape.render(e);
+    this.pathShape.render(e);
   }
 }
 class it {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => G({
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "onAfterRender");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "arrowOffset");
+    o(this, "roundness");
+    o(this, "cycleSquareSide");
+    o(this, "detourDirection");
+    o(this, "detourDistance");
+    o(this, "hasSourceArrow");
+    o(this, "hasTargetArrow");
+    o(this, "pathShape");
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -2306,12 +2430,12 @@ class it {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createDetourPath", (e, o, i, s, h) => j({
-      to: i,
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipX: s,
-      flipY: h,
+      targetDirection: t,
+      flipX: i,
+      flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2320,11 +2444,11 @@ class it {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    r(this, "createLinePath", (e, o, i, s, h) => qe({
-      to: i,
+    o(this, "createLinePath", (e, t, s, i, n) => new qe({
+      to: s,
       sourceDirection: e,
-      targetDirection: o,
-      flipY: h,
+      targetDirection: t,
+      flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -2332,12 +2456,12 @@ class it {
       hasTargetArrow: this.hasTargetArrow
     }));
     this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    const t = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
-      o,
+      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.lineShape = new C({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new U({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -2347,270 +2471,253 @@ class it {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+    }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
-    this.lineShape.render(e);
+    this.pathShape.render(e);
   }
 }
-const ie = (t) => {
-  if (t.diagonalDistance === 0)
+const se = (r) => {
+  if (r.diagonalDistance === 0)
     return "";
-  const e = t.offset / t.diagonalDistance, o = t.flip * t.to.x, i = t.flip * t.to.y, s = {
-    x: o * e + t.shift.x,
-    y: i * e + t.shift.y
-  }, h = {
-    x: o / t.diagonalDistance,
-    y: i / t.diagonalDistance
+  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
+    x: t * e + r.shift.x,
+    y: s * e + r.shift.y
+  }, n = {
+    x: t / r.diagonalDistance,
+    y: s / r.diagonalDistance
   };
   return O(
-    h,
-    s,
-    t.arrowLength,
-    t.arrowWidth
+    n,
+    i,
+    r.arrowLength,
+    r.arrowWidth
   );
-}, se = (t) => {
-  const e = t.hasArrow ? t.arrowLength : 0, o = t.offset + e, i = t.flip * o / t.diagonalDistance;
-  return {
-    x: t.to.x * i + t.shift.x,
-    y: t.to.y * i + t.shift.y
-  };
-}, st = (t) => {
-  const e = se({
-    diagonalDistance: t.diagonalDistance,
-    to: t.to,
-    offset: t.sourceOffset,
-    hasArrow: t.hasSourceArrow,
-    flip: 1,
-    shift: g,
-    arrowLength: t.arrowLength
-  }), o = se({
-    diagonalDistance: t.diagonalDistance,
-    to: t.to,
-    offset: t.targetOffset,
-    hasArrow: t.hasTargetArrow,
-    flip: -1,
-    shift: t.to,
-    arrowLength: t.arrowLength
-  });
-  return `M ${e.x} ${e.y} L ${o.x} ${o.y}`;
 };
 class nt {
   constructor(e) {
-    r(this, "svg");
-    r(this, "group", ge());
-    r(this, "line");
-    r(this, "sourceArrow", null);
-    r(this, "targetArrow", null);
-    r(this, "color");
-    r(this, "width");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "sourceOffset");
-    r(this, "targetOffset");
-    this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = ue(this.color), this.svg.appendChild(this.group), this.line = we(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
+    o(this, "svg");
+    o(this, "group", ue());
+    o(this, "line");
+    o(this, "sourceArrow", null);
+    o(this, "targetArrow", null);
+    o(this, "color");
+    o(this, "width");
+    o(this, "arrowLength");
+    o(this, "arrowWidth");
+    o(this, "sourceOffset");
+    o(this, "targetOffset");
+    o(this, "onAfterRender");
+    o(this, "afterRenderEmitter");
+    [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = ge(this.color), this.svg.appendChild(this.group), this.line = we(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = V(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = V(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = fe(
+    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = pe(
       e.from,
       e.to
     );
-    le(this.svg, { x: o, y: i, width: s, height: h }), this.group.style.transform = `scale(${n}, ${d})`;
-    const c = Math.sqrt(s * s + h * h), a = { x: s, y: h };
-    if (c > 0) {
-      const l = st({
-        diagonalDistance: c,
-        to: a,
-        sourceOffset: this.sourceOffset,
-        targetOffset: this.targetOffset,
-        hasSourceArrow: this.sourceArrow !== null,
-        hasTargetArrow: this.targetArrow !== null,
-        arrowLength: this.arrowLength
-      });
-      this.line.setAttribute("d", l);
-    } else
-      this.line.setAttribute("d", "");
-    if (this.sourceArrow) {
-      const l = ie({
-        diagonalDistance: c,
-        to: a,
-        offset: this.sourceOffset,
-        flip: 1,
-        shift: g,
-        arrowWidth: this.arrowWidth,
-        arrowLength: this.arrowLength
-      });
-      this.sourceArrow.setAttribute("d", l);
-    }
-    if (this.targetArrow) {
-      const l = ie({
-        diagonalDistance: c,
-        to: a,
-        offset: this.targetOffset,
-        flip: -1,
-        shift: a,
-        arrowWidth: this.arrowWidth,
-        arrowLength: this.arrowLength
-      });
-      this.targetArrow.setAttribute("d", l);
-    }
+    le(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = { x: i, y: n }, c = new tt({
+      to: d,
+      sourceOffset: this.sourceOffset,
+      targetOffset: this.targetOffset,
+      hasSourceArrow: this.sourceArrow !== null,
+      hasTargetArrow: this.targetArrow !== null,
+      arrowLength: this.arrowLength
+    });
+    this.line.setAttribute("d", c.path);
+    let g = null;
+    this.sourceArrow && (g = se({
+      diagonalDistance: c.diagonalDistance,
+      to: d,
+      offset: this.sourceOffset,
+      flip: 1,
+      shift: w,
+      arrowWidth: this.arrowWidth,
+      arrowLength: this.arrowLength
+    }), this.sourceArrow.setAttribute("d", g));
+    let l = null;
+    this.targetArrow && (l = se({
+      diagonalDistance: c.diagonalDistance,
+      to: d,
+      offset: this.targetOffset,
+      flip: -1,
+      shift: d,
+      arrowWidth: this.arrowWidth,
+      arrowLength: this.arrowLength
+    }), this.targetArrow.setAttribute("d", l)), this.afterRenderEmitter.emit({
+      edgePath: c,
+      sourceArrowPath: g,
+      targetArrowPath: l
+    });
   }
 }
 const ht = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
-}, dt = (t) => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
+}, at = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, ne = (t) => {
+  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
+}, ie = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
+  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class ct extends Error {
+class dt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class ve {
-  constructor(e, o) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "handle", ht());
-    r(this, "interactiveLine");
-    r(this, "interactiveSourceArrow", null);
-    r(this, "interactiveTargetArrow", null);
-    if (this.structuredEdge = e, e instanceof ve)
-      throw new ct(
+class fe {
+  constructor(e, t) {
+    o(this, "svg");
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    o(this, "targetArrow");
+    o(this, "handle", ht());
+    o(this, "onAfterRender");
+    o(this, "interactiveLine");
+    o(this, "interactiveSourceArrow", null);
+    o(this, "interactiveTargetArrow", null);
+    if (this.baseEdge = e, e instanceof fe)
+      throw new dt(
         "interactive edge can be configured only once"
       );
-    this.svg = this.structuredEdge.svg, this.group = this.structuredEdge.group, this.line = this.structuredEdge.line, this.sourceArrow = this.structuredEdge.sourceArrow, this.targetArrow = this.structuredEdge.targetArrow;
-    const i = (o == null ? void 0 : o.width) ?? u.interactiveWidth;
-    this.interactiveLine = dt(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ne(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ne(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
+    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.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
+    });
   }
   render(e) {
-    this.structuredEdge.render(e);
-    const o = this.line.getAttribute("d");
-    if (this.interactiveLine.setAttribute("d", o), this.sourceArrow) {
-      const i = this.sourceArrow.getAttribute("d");
-      this.interactiveSourceArrow.setAttribute("d", i);
-    }
-    if (this.targetArrow) {
-      const i = this.targetArrow.getAttribute("d");
-      this.interactiveTargetArrow.setAttribute("d", i);
-    }
+    this.baseEdge.render(e);
   }
 }
-const at = (t) => {
-  if (typeof t == "function")
-    return t;
-  switch (t == null ? void 0 : t.type) {
+class ut {
+  constructor(e, t) {
+    o(this, "group");
+    o(this, "line");
+    o(this, "sourceArrow");
+    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);
+    });
+  }
+  render(e) {
+    this.baseShape.render(e);
+  }
+}
+const ct = (r) => {
+  if (typeof r == "function")
+    return r;
+  switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new rt({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
+      return () => new st({
+        color: r.color,
+        width: r.width,
+        arrowLength: r.arrowLength,
+        arrowWidth: r.arrowWidth,
+        arrowOffset: r.arrowOffset,
+        hasSourceArrow: r.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide,
+        roundness: r.roundness,
+        detourDistance: r.detourDistance,
+        detourDirection: r.detourDirection
       });
     case "horizontal":
       return () => new ot({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
+        color: r.color,
+        width: r.width,
+        arrowLength: r.arrowLength,
+        arrowWidth: r.arrowWidth,
+        arrowOffset: r.arrowOffset,
+        hasSourceArrow: r.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide,
+        roundness: r.roundness,
+        detourDistance: r.detourDistance,
+        detourDirection: r.detourDirection
       });
     case "vertical":
       return () => new it({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
+        color: r.color,
+        width: r.width,
+        arrowLength: r.arrowLength,
+        arrowWidth: r.arrowWidth,
+        arrowOffset: r.arrowOffset,
+        hasSourceArrow: r.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide,
+        roundness: r.roundness,
+        detourDistance: r.detourDistance,
+        detourDirection: r.detourDirection
       });
     case "direct":
       return () => new nt({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        sourceOffset: t.sourceOffset,
-        targetOffset: t.targetOffset
+        color: r.color,
+        width: r.width,
+        arrowLength: r.arrowLength,
+        arrowWidth: r.arrowWidth,
+        hasSourceArrow: r.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow,
+        sourceOffset: r.sourceOffset,
+        targetOffset: r.targetOffset
       });
     default:
-      return () => new tt({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleRadius: t.cycleRadius,
-        smallCycleRadius: t.smallCycleRadius,
-        curvature: t.curvature,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
+      return () => new rt({
+        color: r.color,
+        width: r.width,
+        arrowLength: r.arrowLength,
+        arrowWidth: r.arrowWidth,
+        hasSourceArrow: r.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow,
+        cycleRadius: r.cycleRadius,
+        smallCycleRadius: r.smallCycleRadius,
+        curvature: r.curvature,
+        detourDistance: r.detourDistance,
+        detourDirection: r.detourDirection
       });
   }
-}, lt = (t) => {
-  var o, i, s, h, n;
+}, lt = (r) => {
+  var t, s, i, n, h;
   const e = Ze(
-    (o = t.nodes) == null ? void 0 : o.priority,
-    (i = t.edges) == null ? void 0 : i.priority
+    (t = r.nodes) == null ? void 0 : t.priority,
+    (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? je,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? je,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
-      direction: ((h = t.ports) == null ? void 0 : h.direction) ?? 0
+      direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: at(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: ct(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class gt {
+class wt {
   constructor(e) {
-    r(this, "element", null);
-    r(this, "canvasDefaults", {});
-    r(this, "dragConfig", {});
-    r(this, "transformConfig", {});
-    r(this, "backgroundConfig", {});
-    r(this, "connectablePortsConfig", {});
-    r(this, "virtualScrollConfig");
-    r(this, "hasDraggableNode", !1);
-    r(this, "hasTransformableViewport", !1);
-    r(this, "hasResizeReactiveNodes", !1);
-    r(this, "hasBackground", !1);
-    r(this, "hasUserConnectablePorts", !1);
-    r(this, "boxRenderingTrigger");
-    r(this, "window", window);
+    o(this, "element", null);
+    o(this, "canvasDefaults", {});
+    o(this, "dragConfig", {});
+    o(this, "transformConfig", {});
+    o(this, "backgroundConfig", {});
+    o(this, "connectablePortsConfig", {});
+    o(this, "virtualScrollConfig");
+    o(this, "hasDraggableNode", !1);
+    o(this, "hasTransformableViewport", !1);
+    o(this, "hasResizeReactiveNodes", !1);
+    o(this, "hasBackground", !1);
+    o(this, "hasUserConnectablePorts", !1);
+    o(this, "boxRenderingTrigger");
+    o(this, "window", window);
     e !== void 0 && (this.element = e);
   }
   /**
@@ -2678,52 +2785,52 @@ class gt {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new de());
-    const o = new ae(), i = new Ne(), s = new He(this.element);
-    let h = new he(
-      o,
-      i,
-      s.main
+    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(
+      t,
+      s,
+      i.main
     );
-    e !== void 0 && (h = new be(h, o, e));
-    const n = lt(this.canvasDefaults), d = new ce(
+    e !== void 0 && (n = new Se(n, t, e));
+    const h = lt(this.canvasDefaults), a = new ae(
       this.element,
-      o,
-      i,
-      h,
-      n
-    ), c = () => {
-      s.destroy(), d.onBeforeDestroy.unsubscribe(c);
+      t,
+      s,
+      n,
+      h
+    ), d = () => {
+      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
     };
-    return d.onBeforeDestroy.subscribe(c), this.hasBackground && Y.configure(
-      d,
+    return a.onBeforeDestroy.subscribe(d), this.hasBackground && Y.configure(
+      a,
       this.backgroundConfig,
-      s.background
-    ), this.hasResizeReactiveNodes && k.configure(d), this.hasDraggableNode && z.configure(
-      d,
-      s.main,
+      i.background
+    ), this.hasResizeReactiveNodes && k.configure(a), this.hasDraggableNode && z.configure(
+      a,
+      i.main,
       this.window,
       this.dragConfig
     ), this.hasUserConnectablePorts && H.configure(
-      d,
-      s.overlay,
-      i,
+      a,
+      i.overlay,
+      s,
       this.window,
-      n,
+      h,
       this.connectablePortsConfig
     ), this.virtualScrollConfig !== void 0 ? X.configure(
-      d,
-      s.main,
+      a,
+      i.main,
       this.window,
       this.transformConfig,
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && U.configure(
-      d,
-      s.main,
+    ) : this.hasTransformableViewport && C.configure(
+      a,
+      i.main,
       this.window,
       this.transformConfig
-    ), this.reset(), d;
+    ), this.reset(), a;
   }
   /**
    * @deprecated
@@ -2734,15 +2841,16 @@ class gt {
   }
 }
 export {
-  tt as BezierEdgeShape,
-  gt as CanvasBuilder,
+  rt as BezierEdgeShape,
+  wt as CanvasBuilder,
   nt as DirectEdgeShape,
-  de as EventSubject,
+  he as EventSubject,
   ot as HorizontalEdgeShape,
   S as HtmlGraphError,
-  ct as InteractiveEdgeError,
-  ve as InteractiveEdgeShape,
-  C as LineEdgeShape,
-  rt as StraightEdgeShape,
+  dt as InteractiveEdgeError,
+  fe as InteractiveEdgeShape,
+  U as LineEdgeShape,
+  ut as MedianEdgeShape,
+  st as StraightEdgeShape,
   it as VerticalEdgeShape
 };