@html-graph/html-graph 3.6.0 → 3.7.0

package/dist/html-graph.js

@@ -1,31 +1,31 @@
-var he = Object.defineProperty;
-var de = (t, e, o) => e in t ? he(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var i = (t, e, o) => de(t, typeof e != "symbol" ? e + "" : e, o);
-const ce = () => {
+var ae = Object.defineProperty;
+var le = (t, e, o) => e in t ? ae(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var r = (t, e, o) => le(t, typeof e != "symbol" ? e + "" : e, o);
+const ue = () => {
   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;
-}, ae = () => {
+}, ge = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
-}, le = () => {
+}, we = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
 };
-class re {
-  constructor(e, o, r) {
-    i(this, "host", le());
-    i(this, "container", ce());
-    i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    i(this, "applyTransform", () => {
+class ie {
+  constructor(e, o, i) {
+    r(this, "host", we());
+    r(this, "container", ue());
+    r(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    r(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    r(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 = r, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = o, this.element = i, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attachNode(e) {
-    const o = this.graphStore.getNode(e), r = ae();
-    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodePosition(e), this.updateNodePriority(e), r.style.visibility = "visible";
+    const o = this.graphStore.getNode(e), i = ge();
+    i.appendChild(o.element), this.container.appendChild(i), this.nodeIdToWrapperElementMap.set(e, i), this.updateNodePosition(e), this.updateNodePriority(e), i.style.visibility = "visible";
   }
   detachNode(e) {
     const o = this.nodeIdToWrapperElementMap.get(e);
@@ -50,35 +50,35 @@ class re {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: s, height: h } = r.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, d = r.centerFn(s, h), c = r.x - n * d.x, a = r.y - n * d.y;
+    const o = this.nodeIdToWrapperElementMap.get(e), i = this.graphStore.getNode(e), { width: s, height: h } = i.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, d = i.centerFn(s, h), c = i.x - n * d.x, a = i.y - n * d.y;
     o.style.transform = `translate(${c}px, ${a}px)`;
   }
   updateNodePriority(e) {
-    const o = this.graphStore.getNode(e), r = this.nodeIdToWrapperElementMap.get(e);
-    r.style.zIndex = `${o.priority}`;
+    const o = this.graphStore.getNode(e), i = this.nodeIdToWrapperElementMap.get(e);
+    i.style.zIndex = `${o.priority}`;
   }
   updateEdgeShape(e) {
     const o = this.edgeIdToElementMap.get(e);
     this.container.removeChild(o);
-    const r = this.graphStore.getEdge(e);
-    this.edgeIdToElementMap.set(e, r.shape.svg), this.container.appendChild(r.shape.svg);
+    const i = this.graphStore.getEdge(e);
+    this.edgeIdToElementMap.set(e, i.shape.svg), this.container.appendChild(i.shape.svg);
   }
   renderEdge(e) {
-    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = h.left - d.left, l = h.top - d.top, g = n.left - d.left, y = n.top - d.top, p = {
+    const o = this.graphStore.getEdge(e), i = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = i.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = h.left - d.left, l = h.top - d.top, g = n.left - d.left, y = n.top - d.top, p = {
       x: c.scale * a + c.x,
       y: c.scale * l + c.y
     }, f = {
       x: c.scale * g + c.x,
       y: c.scale * y + c.y
-    }, E = {
+    }, A = {
       x: p.x,
       y: p.y,
       width: h.width * c.scale,
       height: h.height * c.scale,
-      direction: r.direction,
+      direction: i.direction,
       portId: o.from,
-      nodeId: r.nodeId
-    }, x = {
+      nodeId: i.nodeId
+    }, E = {
       x: f.x,
       y: f.y,
       width: n.width * c.scale,
@@ -87,19 +87,19 @@ class re {
       portId: o.to,
       nodeId: s.nodeId
     };
-    o.shape.render({ from: E, to: x });
+    o.shape.render({ from: A, to: E });
   }
   updateEdgePriority(e) {
     const o = this.graphStore.getEdge(e);
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class ge {
+class fe {
   constructor(e) {
-    i(this, "xFrom", 1 / 0);
-    i(this, "yFrom", 1 / 0);
-    i(this, "xTo", 1 / 0);
-    i(this, "yTo", 1 / 0);
+    r(this, "xFrom", 1 / 0);
+    r(this, "yFrom", 1 / 0);
+    r(this, "xTo", 1 / 0);
+    r(this, "yTo", 1 / 0);
     this.graphStore = e;
   }
   setRenderingBox(e) {
@@ -110,27 +110,27 @@ class ge {
     return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
   }
   hasEdge(e) {
-    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), 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);
+    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;
   }
 }
-class ue {
-  constructor(e, o, r) {
-    i(this, "attachedNodes", /* @__PURE__ */ new Set());
-    i(this, "attachedEdges", /* @__PURE__ */ new Set());
-    i(this, "renderingBox");
-    i(this, "updateViewport", (e) => {
+class ve {
+  constructor(e, o, i) {
+    r(this, "attachedNodes", /* @__PURE__ */ new Set());
+    r(this, "attachedEdges", /* @__PURE__ */ new Set());
+    r(this, "renderingBox");
+    r(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
+      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 && r.add(n);
+        d && !c ? o.add(n) : !d && c && i.add(n);
       }), this.graphStore.getAllEdgeIds().forEach((n) => {
         const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
-        d && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), d && !c ? s.add(n) : !d && c && h.add(n);
+        d && (this.renderingBox.hasNode(l) || (o.add(l), i.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), i.delete(g))), d && !c ? s.add(n) : !d && c && h.add(n);
       }), h.forEach((n) => {
         this.handleDetachEdge(n);
-      }), r.forEach((n) => {
+      }), i.forEach((n) => {
         this.handleDetachNode(n);
       }), o.forEach((n) => {
         this.attachedNodes.has(n) || this.handleAttachNode(n);
@@ -138,7 +138,7 @@ class ue {
         this.handleAttachEdge(n);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = i, this.renderingBox = new fe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -176,8 +176,8 @@ class ue {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
   attachEdgeEntities(e) {
-    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId;
-    this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(s) || this.handleAttachNode(s), this.handleAttachEdge(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);
   }
   handleAttachNode(e) {
     this.attachedNodes.add(e), this.htmlView.attachNode(e);
@@ -192,9 +192,9 @@ class ue {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class ie {
+class se {
   constructor() {
-    i(this, "callbacks", /* @__PURE__ */ new Set());
+    r(this, "callbacks", /* @__PURE__ */ new Set());
   }
   subscribe(e) {
     this.callbacks.add(e);
@@ -208,14 +208,14 @@ class ie {
     });
   }
 }
-const A = () => {
-  const t = new ie();
+const x = () => {
+  const t = new se();
   return [t, t];
 };
-class we {
+class ye {
   constructor(e) {
-    i(this, "onBeforeUpdated");
-    i(this, "onAfterUpdated");
+    r(this, "onBeforeUpdated");
+    r(this, "onAfterUpdated");
     this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
@@ -225,21 +225,21 @@ class we {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class fe {
+class pe {
   constructor(e) {
-    i(this, "onAfterNodeAdded");
-    i(this, "onAfterNodeUpdated");
-    i(this, "onAfterNodePriorityUpdated");
-    i(this, "onBeforeNodeRemoved");
-    i(this, "onAfterPortMarked");
-    i(this, "onAfterPortUpdated");
-    i(this, "onBeforePortUnmarked");
-    i(this, "onAfterEdgeAdded");
-    i(this, "onAfterEdgeShapeUpdated");
-    i(this, "onAfterEdgeUpdated");
-    i(this, "onAfterEdgePriorityUpdated");
-    i(this, "onBeforeEdgeRemoved");
-    i(this, "onBeforeClear");
+    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");
     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) {
@@ -252,6 +252,7 @@ class fe {
       priority: o.priority
     };
   }
+  // TODO: use Set in v4
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
@@ -263,12 +264,19 @@ class fe {
       nodeId: o.nodeId
     };
   }
+  // TODO: use Set in v4
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
+  // TODO: use Set in v4
   getNodePortIds(e) {
     return this.graphStore.getNodePortIds(e) ?? null;
   }
+  // TODO: use Set in v4
+  getElementPortsIds(e) {
+    return [...this.graphStore.getElementPortsIds(e)];
+  }
+  // TODO: use Set in v4
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
@@ -276,34 +284,42 @@ class fe {
     const o = this.graphStore.getEdge(e);
     return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
   }
+  // TODO: use Set in v4
   getPortIncomingEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
   }
+  // TODO: use Set in v4
   getPortOutcomingEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(e);
   }
+  // TODO: use Set in v4
   getPortCycleEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
   }
+  // TODO: use Set in v4
   getPortAdjacentEdgeIds(e) {
     return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
   }
+  // TODO: use Set in v4
   getNodeIncomingEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
   }
+  // TODO: use Set in v4
   getNodeOutcomingEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(e);
   }
+  // TODO: use Set in v4
   getNodeCycleEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
   }
+  // TODO: use Set in v4
   getNodeAdjacentEdgeIds(e) {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
 class C {
   constructor(e) {
-    i(this, "counter", 0);
+    r(this, "counter", 0);
     this.checkExists = e;
   }
   create(e) {
@@ -320,21 +336,21 @@ class C {
 class S extends Error {
   constructor() {
     super(...arguments);
-    i(this, "name", "HtmlGraphError");
+    r(this, "name", "HtmlGraphError");
   }
 }
-const ve = (t, e) => ({
+const Ae = (t, e) => ({
   x: t / 2,
   y: e / 2
-}), $ = (t) => () => t, Q = $(0), ye = () => {
+}), $ = (t) => () => t, K = $(0), Ee = () => {
   let t = 0;
   return () => t++;
-}, pe = (t, e) => {
-  let o = Q, r = Q;
-  const s = ye();
-  return t === "incremental" && (o = s), e === "incremental" && (r = s), typeof t == "number" && (o = $(t)), typeof e == "number" && (r = $(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
+}, xe = (t, e) => {
+  let o = K, i = K;
+  const s = Ee();
+  return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = $(t)), typeof e == "number" && (i = $(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
     nodesPriorityFn: o,
-    edgesPriorityFn: r
+    edgesPriorityFn: i
   };
 }, v = (t, e, o) => ({
   x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
@@ -342,7 +358,7 @@ const ve = (t, e) => ({
 }), w = {
   x: 0,
   y: 0
-}, xe = (t) => {
+}, Se = (t) => {
   const e = v(
     { x: t.arrowLength, y: w.y },
     t.fromVector,
@@ -351,15 +367,15 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ), r = {
+  ), i = {
     x: e.x + t.fromVector.x * t.curvature,
     y: e.y + t.fromVector.y * t.curvature
   }, s = {
     x: o.x - t.toVector.x * t.curvature,
     y: o.y - t.toVector.y * t.curvature
-  }, h = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
+  }, h = `M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.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}`;
-}, Ee = (t) => {
+}, be = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVector,
@@ -368,15 +384,15 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = v(
-    { x: r, y: w.y },
+  ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = v(
+    { x: i, y: w.y },
     t.fromVector,
     w
   ), a = {
     x: c.x + n,
     y: c.y + d
   }, l = v(
-    { x: t.to.x - r, y: t.to.y },
+    { x: t.to.x - i, y: t.to.y },
     t.toVector,
     t.to
   ), g = {
@@ -388,40 +404,40 @@ const ve = (t, e) => ({
   }, f = {
     x: l.x - t.curvature * t.toVector.x,
     y: l.y - t.curvature * t.toVector.y
-  }, E = {
+  }, A = {
     x: c.x + n,
     y: c.y + d
-  }, x = {
+  }, E = {
     x: l.x + n,
     y: l.y + d
   };
   return [
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
-    `C ${p.x} ${p.y} ${E.x} ${E.y} ${y.x} ${y.y}`,
-    `C ${x.x} ${x.y} ${f.x} ${f.y} ${l.x} ${l.y}`,
+    `C ${p.x} ${p.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
+    `C ${E.x} ${E.y} ${f.x} ${f.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, L = (t, e) => {
+}, V = (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 r = t.length - 1;
+    const i = t.length - 1;
     let s = 0, h = 0, n = 0;
     t.forEach((d, c) => {
       let a = 0, l = 0, g = 0;
-      const y = c > 0, p = c < r, f = y && p;
+      const y = c > 0, p = c < i, f = y && p;
       if (y && (a = -s, l = -h, g = n), p) {
-        const V = t[c + 1];
-        s = V.x - d.x, h = V.y - d.y, n = Math.sqrt(s * s + h * h);
+        const L = t[c + 1];
+        s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
       }
-      const x = n !== 0 ? Math.min((f ? e : 0) / n, c < r - 1 ? 0.5 : 1) : 0, T = f ? { x: d.x + s * x, y: d.y + h * x } : d, m = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = f ? { x: d.x + a * m, y: d.y + l * m } : d;
+      const E = n !== 0 ? Math.min((f ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, b = f ? { x: d.x + s * E, y: d.y + h * E } : d, m = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = f ? { x: d.x + a * m, y: d.y + l * m } : d;
       c > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
-        `C ${d.x} ${d.y} ${d.x} ${d.y} ${T.x} ${T.y}`
+        `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
       );
     });
   }
   return o.join(" ");
-}, Ae = (t) => {
+}, me = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVector,
@@ -430,7 +446,7 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, h = v(
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
     { x: s, y: w.y },
     t.fromVector,
     w
@@ -438,14 +454,14 @@ const ve = (t, e) => ({
     { x: t.to.x - s, y: t.to.y },
     t.toVector,
     t.to
-  ), d = Math.max((h.x + n.x) / 2, r), c = t.to.y / 2, a = {
-    x: t.flipX > 0 ? d : -r,
+  ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
+    x: t.flipX > 0 ? d : -i,
     y: h.y
   }, l = { x: a.x, y: c }, g = {
-    x: t.flipX > 0 ? t.to.x - d : t.to.x + r,
+    x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
     y: n.y
   }, y = { x: g.x, y: c };
-  return L(
+  return V(
     [e, h, a, l, y, g, n, o],
     t.roundness
   );
@@ -458,20 +474,20 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = v(
-    { x: r, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
+    { x: i, y: w.y },
     t.fromVector,
     w
   ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = v(
-    { x: t.to.x - r, y: t.to.y },
+    { x: t.to.x - i, y: t.to.y },
     t.toVector,
     t.to
   ), g = { x: l.x + d, y: l.y + c };
-  return L(
+  return V(
     [e, s, a, g, l, o],
     t.roundness
   );
-}, Se = (t) => {
+}, Te = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVector,
@@ -480,17 +496,17 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = v(
-    { x: r, y: w.y },
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
+    { x: i, y: w.y },
     t.fromVector,
     w
   ), h = v(
-    { x: t.to.x - r, y: t.to.y },
+    { x: t.to.x - i, y: t.to.y },
     t.toVector,
     t.to
   );
-  return L([e, s, h, o], t.roundness);
-}, Te = (t) => {
+  return V([e, s, h, o], t.roundness);
+}, Pe = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVector,
@@ -499,7 +515,7 @@ const ve = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, h = v(
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
     { x: s, y: w.y },
     t.fromVector,
     w
@@ -507,33 +523,33 @@ const ve = (t, e) => ({
     { x: t.to.x - s, y: t.to.y },
     t.toVector,
     t.to
-  ), d = Math.max((h.y + n.y) / 2, r), c = t.to.x / 2, a = {
+  ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
     x: h.x,
-    y: t.flipY > 0 ? d : -r
+    y: t.flipY > 0 ? d : -i
   }, l = { x: c, y: a.y }, g = {
     x: n.x,
-    y: t.flipY > 0 ? t.to.y - d : t.to.y + r
+    y: t.flipY > 0 ? t.to.y - d : t.to.y + i
   }, y = { x: c, y: g.y };
-  return L(
+  return V(
     [e, h, a, l, y, g, n, o],
     t.roundness
   );
-}, z = (t) => {
-  const e = t.arrowOffset, o = t.side, r = t.arrowLength + e, s = r + 2 * o, n = [
+}, k = (t) => {
+  const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
     { x: t.arrowLength, y: w.y },
-    { x: r, y: w.y },
-    { x: r, y: t.side },
+    { x: i, y: w.y },
+    { x: i, y: t.side },
     { x: s, y: t.side },
     { x: s, y: -t.side },
-    { x: r, y: -t.side },
-    { x: r, y: w.y },
+    { x: i, y: -t.side },
+    { x: i, y: w.y },
     { x: t.arrowLength, y: w.y }
   ].map(
     (c) => v(c, t.fromVector, w)
   ), d = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${L(n, t.roundness)}`;
-}, me = (t) => {
-  const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + r * (1 - o / s), n = e * o / s, c = [
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${V(n, t.roundness)}`;
+}, Ne = (t) => {
+  const e = t.smallRadius, o = t.radius, i = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + i * (1 - o / s), n = e * o / s, c = [
     { x: t.arrowLength, y: w.y },
     { x: h, y: n },
     { x: h, y: -n }
@@ -561,31 +577,32 @@ const ve = (t, e) => ({
   detourDirection: -Math.PI / 2,
   detourDirectionVertical: 0,
   smallCycleRadius: 15,
-  curvature: 90
-}), Z = (t, e, o, r) => {
+  curvature: 90,
+  interactiveWidth: 10
+}), Q = (t, e, o, i) => {
   const h = [
     w,
-    { x: o, y: r },
-    { x: o, y: -r }
+    { x: o, y: i },
+    { x: o, y: -i }
   ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
-  return `${n} ${d} ${c}`;
+  return `${n} ${d} ${c} Z`;
 }, _ = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", t), e;
-}, be = () => {
+}, Me = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.transformOrigin = "50% 50%", t;
-}, Pe = (t, e) => {
+}, De = (t, e) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
-}, Ne = (t, e) => {
+}, Le = (t, e) => {
   const o = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
-  }, r = {
+  }, i = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, s = Math.min(o.x, r.x), h = Math.min(o.y, r.y), n = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
+  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
   return {
     x: s,
     y: h,
@@ -594,25 +611,25 @@ const ve = (t, e) => ({
     flipX: c,
     flipY: a
   };
-}, Me = () => {
+}, Ve = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
 }, q = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
 class I {
   constructor(e) {
-    i(this, "svg", Me());
-    i(this, "group", be());
-    i(this, "line");
-    i(this, "sourceArrow", null);
-    i(this, "targetArrow", null);
-    this.params = e, this.svg.appendChild(this.group), this.line = Pe(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = _(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = _(e.color), this.group.appendChild(this.targetArrow));
+    r(this, "svg", Ve());
+    r(this, "group", Me());
+    r(this, "line");
+    r(this, "sourceArrow", null);
+    r(this, "targetArrow", null);
+    this.params = e, this.svg.appendChild(this.group), this.line = De(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = _(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = _(e.color), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: r, width: s, height: h, flipX: n, flipY: d } = Ne(
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = Le(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    this.svg.style.transform = `translate(${o}px, ${i}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
     const c = q(
       e.from.direction,
       n,
@@ -625,59 +642,53 @@ class I {
       x: s,
       y: h
     };
-    let g, y = a, p = -this.params.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = this.params.createCyclePath(
-      c,
-      a,
-      l,
-      n,
-      d
-    ), y = c, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? g = this.params.createDetourPath(
-      c,
-      a,
-      l,
-      n,
-      d
-    ) : g = this.params.createLinePath(
+    let g = a, y = -this.params.arrowLength, p;
+    e.from.portId === e.to.portId ? (p = this.params.createCyclePath, g = c, y = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? p = this.params.createDetourPath : p = this.params.createLinePath;
+    const f = p(
       c,
       a,
       l,
       n,
       d
-    ), this.line.setAttribute("d", g), this.sourceArrow) {
-      const f = Z(
+    );
+    if (this.line.setAttribute("d", f), this.sourceArrow) {
+      const A = Q(
         c,
         w,
         this.params.arrowLength,
         this.params.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", f);
+      this.sourceArrow.setAttribute("d", A);
     }
     if (this.targetArrow) {
-      const f = Z(
-        y,
+      const A = Q(
+        g,
         l,
-        p,
+        y,
         this.params.arrowWidth
       );
-      this.targetArrow.setAttribute("d", f);
+      this.targetArrow.setAttribute("d", A);
     }
   }
 }
-class De {
+class Re {
   constructor(e) {
-    i(this, "svg");
-    i(this, "arrowLength");
-    i(this, "arrowWidth");
-    i(this, "curvature");
-    i(this, "portCycleRadius");
-    i(this, "portCycleSmallRadius");
-    i(this, "detourDirection");
-    i(this, "detourDistance");
-    i(this, "hasSourceArrow");
-    i(this, "hasTargetArrow");
-    i(this, "genericShape");
-    i(this, "createCyclePath", (e) => me({
+    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) => Ne({
       fromVector: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -685,8 +696,8 @@ class De {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, o, r, s, h) => Ee({
-      to: r,
+    r(this, "createDetourPath", (e, o, i, s, h) => be({
+      to: i,
       fromVector: e,
       toVector: o,
       flipX: s,
@@ -698,8 +709,8 @@ class De {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, o, r) => xe({
-      to: r,
+    r(this, "createLinePath", (e, o, i) => Se({
+      to: i,
       fromVector: e,
       toVector: o,
       arrowLength: this.arrowLength,
@@ -707,7 +718,7 @@ class De {
       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.genericShape = new I({
+    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 I({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -717,26 +728,30 @@ class De {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.genericShape.svg;
+    }), 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;
   }
   render(e) {
-    this.genericShape.render(e);
+    this.lineShape.render(e);
   }
 }
-class Ve {
+class Be {
   constructor(e) {
-    i(this, "svg");
-    i(this, "arrowLength");
-    i(this, "arrowWidth");
-    i(this, "arrowOffset");
-    i(this, "roundness");
-    i(this, "cycleSquareSide");
-    i(this, "detourDirection");
-    i(this, "detourDistance");
-    i(this, "hasSourceArrow");
-    i(this, "hasTargetArrow");
-    i(this, "genericShape");
-    i(this, "createCyclePath", (e) => z({
+    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) => k({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -745,8 +760,8 @@ class Ve {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, o, r, s, h) => F({
-      to: r,
+    r(this, "createDetourPath", (e, o, i, s, h) => F({
+      to: i,
       fromVector: e,
       toVector: o,
       flipX: s,
@@ -759,8 +774,8 @@ class Ve {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, o, r, s) => Ae({
-      to: r,
+    r(this, "createLinePath", (e, o, i, s) => me({
+      to: i,
       fromVector: e,
       toVector: o,
       flipX: s,
@@ -776,7 +791,7 @@ class Ve {
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.genericShape = new I({
+    ), 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 I({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -786,26 +801,30 @@ class Ve {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.genericShape.svg;
+    }), 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;
   }
   render(e) {
-    this.genericShape.render(e);
+    this.lineShape.render(e);
   }
 }
-class Le {
+class Ie {
   constructor(e) {
-    i(this, "svg");
-    i(this, "arrowLength");
-    i(this, "arrowWidth");
-    i(this, "arrowOffset");
-    i(this, "roundness");
-    i(this, "cycleSquareSide");
-    i(this, "detourDirection");
-    i(this, "detourDistance");
-    i(this, "hasSourceArrow");
-    i(this, "hasTargetArrow");
-    i(this, "genericShape");
-    i(this, "createCyclePath", (e) => z({
+    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) => k({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -814,8 +833,8 @@ class Le {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, o, r, s, h) => F({
-      to: r,
+    r(this, "createDetourPath", (e, o, i, s, h) => F({
+      to: i,
       fromVector: e,
       toVector: o,
       flipX: s,
@@ -828,8 +847,8 @@ class Le {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, o, r) => Se({
-      to: r,
+    r(this, "createLinePath", (e, o, i) => Te({
+      to: i,
       fromVector: e,
       toVector: o,
       arrowLength: this.arrowLength,
@@ -844,7 +863,7 @@ class Le {
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.genericShape = new I({
+    ), 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 I({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -854,26 +873,30 @@ class Le {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.genericShape.svg;
+    }), 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;
   }
   render(e) {
-    this.genericShape.render(e);
+    this.lineShape.render(e);
   }
 }
-class Re {
+class Ue {
   constructor(e) {
-    i(this, "svg");
-    i(this, "arrowLength");
-    i(this, "arrowWidth");
-    i(this, "arrowOffset");
-    i(this, "roundness");
-    i(this, "cycleSquareSide");
-    i(this, "detourDirection");
-    i(this, "detourDistance");
-    i(this, "hasSourceArrow");
-    i(this, "hasTargetArrow");
-    i(this, "genericShape");
-    i(this, "createCyclePath", (e) => z({
+    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) => k({
       fromVector: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -882,8 +905,8 @@ class Re {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, o, r, s, h) => F({
-      to: r,
+    r(this, "createDetourPath", (e, o, i, s, h) => F({
+      to: i,
       fromVector: e,
       toVector: o,
       flipX: s,
@@ -896,8 +919,8 @@ class Re {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, o, r, s, h) => Te({
-      to: r,
+    r(this, "createLinePath", (e, o, i, s, h) => Pe({
+      to: i,
       fromVector: e,
       toVector: o,
       flipY: h,
@@ -913,7 +936,7 @@ class Re {
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.genericShape = new I({
+    ), 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 I({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -923,18 +946,65 @@ class Re {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath
-    }), this.svg = this.genericShape.svg;
+    }), 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;
   }
   render(e) {
-    this.genericShape.render(e);
+    this.lineShape.render(e);
+  }
+}
+const Ce = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
+}, We = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
+}, ee = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
+};
+class $e extends Error {
+  constructor(e) {
+    super(e), this.name = "InteractiveEdgeError";
   }
 }
-const Be = (t) => {
+class ne {
+  constructor(e, o) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "handle", Ce());
+    r(this, "interactiveLine");
+    r(this, "interactiveSourceArrow", null);
+    r(this, "interactiveTargetArrow", null);
+    if (this.structuredEdge = e, e instanceof ne)
+      throw new $e(
+        "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 = We(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ee(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ee(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
+  }
+  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);
+    }
+  }
+}
+const Fe = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new Le({
+      return () => new Ie({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -948,7 +1018,7 @@ const Be = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new Ve({
+      return () => new Be({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -962,7 +1032,7 @@ const Be = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new Re({
+      return () => new Ue({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -976,7 +1046,7 @@ const Be = (t) => {
         detourDirection: t.detourDirection
       });
     default:
-      return () => new De({
+      return () => new Re({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -990,102 +1060,102 @@ const Be = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, Ie = (t) => {
-  var o, r, s, h, n;
-  const e = pe(
+}, ke = (t) => {
+  var o, i, s, h, n;
+  const e = xe(
     (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
-    (r = t == null ? void 0 : t.edges) == null ? void 0 : r.priority
+    (i = t == null ? void 0 : t.edges) == null ? void 0 : i.priority
   );
   return {
     nodes: {
-      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? ve,
+      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? Ae,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Be(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: Fe(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class se {
-  constructor(e, o, r, s, h) {
+class he {
+  constructor(e, o, i, s, h) {
     /**
      * provides api for accessing model of rendered graph
      */
-    i(this, "graph");
+    r(this, "graph");
     /**
      * provides api for accessing viewport state
      */
-    i(this, "viewport");
-    i(this, "defaults");
-    i(this, "nodeIdGenerator", new C(
+    r(this, "viewport");
+    r(this, "defaults");
+    r(this, "nodeIdGenerator", new C(
       (e) => this.graph.getNode(e) !== null
     ));
-    i(this, "portIdGenerator", new C(
+    r(this, "portIdGenerator", new C(
       (e) => this.graph.getPort(e) !== null
     ));
-    i(this, "edgeIdGenerator", new C(
+    r(this, "edgeIdGenerator", new C(
       (e) => this.graph.getEdge(e) !== null
     ));
-    i(this, "onAfterNodeAdded", (e) => {
+    r(this, "onAfterNodeAdded", (e) => {
       this.htmlView.attachNode(e);
     });
-    i(this, "onAfterNodeUpdated", (e) => {
-      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((r) => {
-        this.htmlView.renderEdge(r);
+    r(this, "onAfterNodeUpdated", (e) => {
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
+        this.htmlView.renderEdge(i);
       });
     });
-    i(this, "onAfterNodePriorityUpdated", (e) => {
+    r(this, "onAfterNodePriorityUpdated", (e) => {
       this.htmlView.updateNodePriority(e);
     });
-    i(this, "onBeforeNodeRemoved", (e) => {
+    r(this, "onBeforeNodeRemoved", (e) => {
       this.graphStore.getNodePortIds(e).forEach((o) => {
         this.unmarkPort(o);
       }), this.htmlView.detachNode(e);
     });
-    i(this, "onAfterPortUpdated", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((r) => {
-        this.htmlView.renderEdge(r);
+    r(this, "onAfterPortUpdated", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
+        this.htmlView.renderEdge(i);
       });
     });
-    i(this, "onBeforePortUnmarked", (e) => {
+    r(this, "onBeforePortUnmarked", (e) => {
       this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
         this.removeEdge(o);
       });
     });
-    i(this, "onAfterEdgeAdded", (e) => {
+    r(this, "onAfterEdgeAdded", (e) => {
       this.htmlView.attachEdge(e);
     });
-    i(this, "onAfterEdgeShapeUpdated", (e) => {
+    r(this, "onAfterEdgeShapeUpdated", (e) => {
       this.htmlView.updateEdgeShape(e);
     });
-    i(this, "onAfterEdgeUpdated", (e) => {
+    r(this, "onAfterEdgeUpdated", (e) => {
       this.htmlView.renderEdge(e);
     });
-    i(this, "onAfterEdgePriorityUpdated", (e) => {
+    r(this, "onAfterEdgePriorityUpdated", (e) => {
       this.htmlView.updateEdgePriority(e);
     });
-    i(this, "onBeforeEdgeRemoved", (e) => {
+    r(this, "onBeforeEdgeRemoved", (e) => {
       this.htmlView.detachEdge(e);
     });
-    i(this, "onBeforeClear", () => {
+    r(this, "onBeforeClear", () => {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
-    i(this, "onBeforeDestroyEmitter");
+    r(this, "onBeforeDestroyEmitter");
     /**
      * emits event just before destruction of canvas
      */
-    i(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = o, this.viewportStore = r, this.htmlView = s, this.defaults = Ie(h), this.graph = new fe(this.graphStore), this.viewport = new we(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    r(this, "onBeforeDestroy");
+    this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = ke(h), this.graph = new pe(this.graphStore), this.viewport = new ye(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.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] = A();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
   }
   /**
    * adds new node
@@ -1102,12 +1172,12 @@ class se {
       centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
       priority: e.priority ?? this.defaults.nodes.priorityFn()
     }), e.ports !== void 0)
-      for (const r of e.ports)
+      for (const i of e.ports)
         this.markPort({
-          id: r.id,
-          element: r.element,
+          id: i.id,
+          element: i.element,
           nodeId: o,
-          direction: r.direction
+          direction: i.direction
         });
     return this;
   }
@@ -1177,7 +1247,7 @@ class se {
       id: o,
       from: e.from,
       to: e.to,
-      shape: e.shape ?? this.defaults.edges.shapeFactory(),
+      shape: e.shape ?? this.defaults.edges.shapeFactory(o),
       priority: e.priority ?? this.defaults.edges.priorityFn()
     }), this;
   }
@@ -1230,44 +1300,85 @@ class se {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class ne {
+class de {
   constructor() {
-    i(this, "nodes", /* @__PURE__ */ new Map());
-    i(this, "ports", /* @__PURE__ */ new Map());
-    i(this, "edges", /* @__PURE__ */ new Map());
-    i(this, "incomingEdges", /* @__PURE__ */ new Map());
-    i(this, "outcomingEdges", /* @__PURE__ */ new Map());
-    i(this, "cycleEdges", /* @__PURE__ */ new Map());
-    i(this, "afterNodeAddedEmitter");
-    i(this, "onAfterNodeAdded");
-    i(this, "afterNodeUpdatedEmitter");
-    i(this, "onAfterNodeUpdated");
-    i(this, "afterNodePriorityUpdatedEmitter");
-    i(this, "onAfterNodePriorityUpdated");
-    i(this, "beforeNodeRemovedEmitter");
-    i(this, "onBeforeNodeRemoved");
-    i(this, "afterPortAddedEmitter");
-    i(this, "onAfterPortAdded");
-    i(this, "afterPortUpdatedEmitter");
-    i(this, "onAfterPortUpdated");
-    i(this, "beforePortRemovedEmitter");
-    i(this, "onBeforePortRemoved");
-    i(this, "afterEdgeAddedEmitter");
-    i(this, "onAfterEdgeAdded");
-    i(this, "afterEdgeShapeUpdatedEmitter");
-    i(this, "onAfterEdgeShapeUpdated");
-    i(this, "afterEdgeUpdatedEmitter");
-    i(this, "onAfterEdgeUpdated");
-    i(this, "afterEdgePriorityUpdatedEmitter");
-    i(this, "onAfterEdgePriorityUpdated");
-    i(this, "beforeEdgeRemovedEmitter");
-    i(this, "onBeforeEdgeRemoved");
-    i(this, "beforeClearEmitter");
-    i(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
+    r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
+    r(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);
+  }
+  getMultiBySingle(e) {
+    const o = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
+    return Array.from(o.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);
+  }
+  getByMulti(e) {
+    return this.multiToSingleMap.get(e);
+  }
+  removeBySingle(e) {
+    this.singleToMultiMap.get(e).forEach((i) => {
+      this.multiToSingleMap.delete(i);
+    }), this.singleToMultiMap.delete(e);
+  }
+  clear() {
+    this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
+  }
+  forEachSingle(e) {
+    this.singleToMultiMap.forEach((o, i) => {
+      e(i);
+    });
+  }
+  hasSingle(e) {
+    return this.singleToMultiMap.get(e) !== void 0;
+  }
+  hasMulti(e) {
+    return this.multiToSingleMap.get(e) !== void 0;
+  }
+}
+class ce {
+  constructor() {
+    r(this, "nodes", /* @__PURE__ */ new Map());
+    r(this, "ports", /* @__PURE__ */ new Map());
+    r(this, "edges", /* @__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();
   }
   addNode(e) {
-    const o = /* @__PURE__ */ new Map(), r = {
+    const o = /* @__PURE__ */ new Map(), i = {
       element: e.element,
       x: e.x,
       y: e.y,
@@ -1275,7 +1386,7 @@ class ne {
       priority: e.priority,
       ports: o
     };
-    this.nodes.set(e.id, r), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, i), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -1284,8 +1395,8 @@ class ne {
     return this.nodes.get(e);
   }
   updateNode(e, o) {
-    const r = this.nodes.get(e);
-    r.x = o.x ?? r.x, r.y = o.y ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, o.priority !== void 0 && (r.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
+    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);
   }
   removeNode(e) {
     this.beforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
@@ -1295,18 +1406,21 @@ class ne {
       element: e.element,
       direction: e.direction,
       nodeId: e.nodeId
-    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
+    }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
   getPort(e) {
     return this.ports.get(e);
   }
   updatePort(e, o) {
-    const r = this.ports.get(e);
-    r.direction = o.direction ?? r.direction, this.afterPortUpdatedEmitter.emit(e);
+    const i = this.ports.get(e);
+    i.direction = o.direction ?? i.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
+  getElementPortsIds(e) {
+    return this.elementPorts.getMultiBySingle(e);
+  }
   getNodePortIds(e) {
     const o = this.nodes.get(e);
     if (o !== void 0)
@@ -1314,7 +1428,7 @@ class ne {
   }
   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.beforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
   addEdge(e) {
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
@@ -1330,8 +1444,8 @@ class ne {
         priority: s.priority
       });
     }
-    const r = this.edges.get(e);
-    o.shape !== void 0 && (r.shape = o.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), o.priority !== void 0 && (r.priority = o.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
+    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);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
@@ -1363,24 +1477,24 @@ class ne {
   }
   getNodeIncomingEdgeIds(e) {
     const o = Array.from(this.nodes.get(e).ports.keys());
-    let r = [];
+    let i = [];
     return o.forEach((s) => {
-      r = [...r, ...this.getPortIncomingEdgeIds(s)];
-    }), r;
+      i = [...i, ...this.getPortIncomingEdgeIds(s)];
+    }), i;
   }
   getNodeOutcomingEdgeIds(e) {
     const o = Array.from(this.nodes.get(e).ports.keys());
-    let r = [];
+    let i = [];
     return o.forEach((s) => {
-      r = [...r, ...this.getPortOutcomingEdgeIds(s)];
-    }), r;
+      i = [...i, ...this.getPortOutcomingEdgeIds(s)];
+    }), i;
   }
   getNodeCycleEdgeIds(e) {
     const o = Array.from(this.nodes.get(e).ports.keys());
-    let r = [];
+    let i = [];
     return o.forEach((s) => {
-      r = [...r, ...this.getPortCycleEdgeIds(s)];
-    }), r;
+      i = [...i, ...this.getPortCycleEdgeIds(s)];
+    }), i;
   }
   getNodeAdjacentEdgeIds(e) {
     return [
@@ -1398,28 +1512,28 @@ class ne {
     }), 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), r = o.from, s = o.to;
-    this.cycleEdges.get(r).delete(e), this.cycleEdges.get(s).delete(e), this.incomingEdges.get(r).delete(e), this.incomingEdges.get(s).delete(e), this.outcomingEdges.get(r).delete(e), this.outcomingEdges.get(s).delete(e), this.edges.delete(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 ee = (t) => ({
+const te = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), te = {
+}), oe = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Ue {
+class ze {
   constructor() {
-    i(this, "viewportMatrix", te);
-    i(this, "contentMatrix", te);
-    i(this, "afterUpdateEmitter");
-    i(this, "onAfterUpdated");
-    i(this, "beforeUpdateEmitter");
-    i(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
+    r(this, "viewportMatrix", oe);
+    r(this, "contentMatrix", oe);
+    r(this, "afterUpdateEmitter");
+    r(this, "onAfterUpdated");
+    r(this, "beforeUpdateEmitter");
+    r(this, "onBeforeUpdated");
+    [this.afterUpdateEmitter, this.onAfterUpdated] = x(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = x();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -1432,80 +1546,80 @@ class Ue {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = ee(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = te(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.beforeUpdateEmitter.emit(), this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = ee(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = te(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class k {
+class z {
   constructor(e) {
-    i(this, "elementToNodeId", /* @__PURE__ */ new Map());
-    i(this, "nodesResizeObserver");
-    i(this, "onAfterNodeAdded", (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);
     });
-    i(this, "onBeforeNodeRemoved", (e) => {
+    r(this, "onBeforeNodeRemoved", (e) => {
       const o = this.canvas.graph.getNode(e);
       this.elementToNodeId.delete(o.element), this.nodesResizeObserver.unobserve(o.element);
     });
-    i(this, "onBeforeClear", () => {
+    r(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
-    i(this, "onBeforeDestroy", () => {
+    r(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((r) => {
-        const s = r.target;
+      o.forEach((i) => {
+        const s = i.target;
         this.handleNodeResize(s);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e) {
-    new k(e);
+    new z(e);
   }
   handleNodeResize(e) {
     const o = this.elementToNodeId.get(e);
     this.canvas.updateNode(o);
   }
 }
-const Ce = (t) => {
-  var g, y, p, f, E, x;
+const Oe = (t) => {
+  var g, y, p, f, A, E;
   const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
-  }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, a = (x = t == null ? void 0 : t.mouse) == null ? void 0 : x.mouseUpEventVerifier;
+  }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), i = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onNodeDragFinished) ?? (() => {
+  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
   return {
     freezePriority: s,
     dragCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (T) => T.button === 0,
+    mouseUpEventVerifier: a !== void 0 ? a : (b) => b.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: o,
-    onNodeDragFinished: r
+    onNodeDragFinished: i
   };
-}, We = (t, e, o) => {
-  const { x: r, y: s, width: h, height: n } = t.getBoundingClientRect();
-  return e >= r && e <= r + h && o >= s && o <= s + n;
-}, $e = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, M = (t, e, o, r) => We(e, o, r) && $e(t, o, r), B = (t, e) => {
+}, Xe = (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;
+}, Ye = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, M = (t, e, o, i) => Xe(e, o, i) && Ye(t, o, i), B = (t, e) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
 }, N = (t, e) => ({
   x: t.scale * e.x + t.x,
   y: t.scale * e.y + t.y
 });
 class O {
-  constructor(e, o, r, s) {
-    i(this, "grabbedNodeId", null);
-    i(this, "maxNodePriority", 0);
-    i(this, "previousTouchCoordinates", null);
-    i(this, "nodeIds", /* @__PURE__ */ new Map());
-    i(this, "graph");
-    i(this, "onAfterNodeAdded", (e) => {
+  constructor(e, o, i, s) {
+    r(this, "grabbedNodeId", null);
+    r(this, "maxNodePriority", 0);
+    r(this, "previousTouchCoordinates", null);
+    r(this, "nodeIds", /* @__PURE__ */ new Map());
+    r(this, "graph");
+    r(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
       const o = this.graph.getNode(e);
       this.nodeIds.set(o.element, e), o.element.addEventListener("mousedown", this.onMouseDown, {
@@ -1514,50 +1628,50 @@ class O {
         passive: !0
       });
     });
-    i(this, "onAfterNodeUpdated", (e) => {
+    r(this, "onAfterNodeUpdated", (e) => {
       this.updateMaxNodePriority(e);
     });
-    i(this, "onBeforeNodeRemoved", (e) => {
+    r(this, "onBeforeNodeRemoved", (e) => {
       const o = this.graph.getNode(e);
       this.nodeIds.delete(o.element), o.element.removeEventListener("mousedown", this.onMouseDown), o.element.removeEventListener("touchstart", this.onTouchStart);
     });
-    i(this, "onBeforeDestroy", () => {
+    r(this, "onBeforeDestroy", () => {
       this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy), this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    i(this, "onBeforeClear", () => {
+    r(this, "onBeforeClear", () => {
       this.nodeIds.forEach((e, o) => {
         o.removeEventListener("mousedown", this.onMouseDown), o.removeEventListener("touchstart", this.onTouchStart);
       }), this.nodeIds.clear(), this.maxNodePriority = 0;
     });
-    i(this, "onMouseDown", (e) => {
+    r(this, "onMouseDown", (e) => {
       if (!this.config.mouseDownEventVerifier(e))
         return;
-      const o = e.currentTarget, r = this.nodeIds.get(o), s = this.graph.getNode(r);
+      const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
       this.config.onBeforeNodeDrag({
-        nodeId: r,
+        nodeId: i,
         element: s.element,
         x: s.x,
         y: s.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = r, B(this.element, this.config.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = i, B(this.element, this.config.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }));
     });
-    i(this, "onTouchStart", (e) => {
+    r(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, r = this.nodeIds.get(o), s = this.graph.getNode(r);
+      const o = e.currentTarget, i = this.nodeIds.get(o), s = this.graph.getNode(i);
       this.config.onBeforeNodeDrag({
-        nodeId: r,
+        nodeId: i,
         element: s.element,
         x: s.x,
         y: s.y
-      }) && (this.grabbedNodeId = r, this.moveNodeOnTop(r), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      }) && (this.grabbedNodeId = i, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -1565,7 +1679,7 @@ class O {
         passive: !0
       }));
     });
-    i(this, "onWindowMouseMove", (e) => {
+    r(this, "onWindowMouseMove", (e) => {
       if (!M(
         this.window,
         this.element,
@@ -1577,10 +1691,10 @@ class O {
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
-    i(this, "onWindowMouseUp", (e) => {
+    r(this, "onWindowMouseUp", (e) => {
       this.config.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
-    i(this, "onWindowTouchMove", (e) => {
+    r(this, "onWindowTouchMove", (e) => {
       if (e.touches.length !== 1)
         return;
       const o = e.touches[0];
@@ -1601,16 +1715,16 @@ class O {
         };
       }
     });
-    i(this, "onWindowTouchFinish", () => {
+    r(this, "onWindowTouchFinish", () => {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
-    i(this, "config");
-    this.canvas = e, this.element = o, this.window = r, this.config = Ce(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);
+    r(this, "config");
+    this.canvas = e, this.element = o, this.window = i, this.config = Oe(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, r, s) {
-    new O(e, o, r, s);
+  static configure(e, o, i, s) {
+    new O(e, o, i, s);
   }
-  dragNode(e, o, r) {
+  dragNode(e, o, i) {
     const s = this.graph.getNode(e);
     if (s === null)
       return;
@@ -1618,7 +1732,7 @@ class O {
       x: s.x,
       y: s.y
     }), d = N(
-      { scale: 1, x: o, y: r },
+      { 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({
@@ -1667,18 +1781,18 @@ class O {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
 }
-const Fe = (t) => {
-  const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, r = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
+const He = (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 < r && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, r));
+    n > a && n > h.prevTransform.x && (n = Math.max(h.prevTransform.x, a)), d < i && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, i));
     const l = h.canvasHeight * h.prevTransform.scale, g = s - l;
     return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: n, y: d };
   };
-}, ze = (t) => {
-  const e = t.maxContentScale, o = t.minContentScale, r = e !== null ? 1 / e : 0, s = o !== null ? 1 / o : 1 / 0;
+}, je = (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;
@@ -1687,8 +1801,8 @@ const Fe = (t) => {
       const g = (c - n.scale) / (d.scale - n.scale);
       a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
     }
-    if (d.scale < r && d.scale < n.scale) {
-      c = Math.min(n.scale, r), a = n.x, l = n.y;
+    if (d.scale < i && d.scale < n.scale) {
+      c = Math.min(n.scale, i), a = n.x, l = n.y;
       const g = (c - n.scale) / (d.scale - n.scale);
       a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
     }
@@ -1698,46 +1812,46 @@ const Fe = (t) => {
       y: l
     };
   };
-}, ke = (t) => (e) => t.reduce(
-  (o, r) => r({
+}, Ge = (t) => (e) => t.reduce(
+  (o, i) => i({
     prevTransform: e.prevTransform,
     nextTransform: o,
     canvasWidth: e.canvasWidth,
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), oe = (t) => {
+), re = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return ze({
+      return je({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Fe({
+      return He({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Oe = (t) => {
-  var f, E, x, T, b, m, D, V, j, G, J, K;
-  const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
+}, Ze = (t) => {
+  var f, A, E, b, T, m, D, L, j, G, Z, J;
+  const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
   let s;
-  r !== void 0 ? Array.isArray(r) ? s = ke(
-    r.map(
-      (P) => oe(P)
+  i !== void 0 ? Array.isArray(i) ? s = Ge(
+    i.map(
+      (P) => re(P)
     )
-  ) : s = oe(r) : s = (P) => P.nextTransform;
-  const h = ((E = t == null ? void 0 : t.shift) == null ? void 0 : E.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
-  }), d = ((T = t == null ? void 0 : t.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), c = (b = t == null ? void 0 : t.shift) == null ? void 0 : b.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (m = t == null ? void 0 : t.shift) == null ? void 0 : m.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, y = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, p = y !== void 0 ? y : () => !0;
+  ) : s = re(i) : s = (P) => P.nextTransform;
+  const h = ((A = t == null ? void 0 : t.shift) == null ? void 0 : A.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  }), d = ((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 : (P) => P.button === 0, l = (m = t == null ? void 0 : t.shift) == null ? void 0 : m.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, y = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, p = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((V = t == null ? void 0 : t.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
+    onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((j = t == null ? void 0 : t.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
     }),
@@ -1749,27 +1863,27 @@ const Fe = (t) => {
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: p,
     scaleWheelFinishTimeout: ((G = t == null ? void 0 : t.scale) == null ? void 0 : G.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformStarted) ?? (() => {
+    onResizeTransformStarted: ((Z = t == null ? void 0 : t.events) == null ? void 0 : Z.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Xe = (t, e, o) => ({
+}, Je = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), Ye = (t, e, o, r) => ({
+}), Ke = (t, e, o, i) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
-  y: t.scale * (1 - e) * r + t.y
+  y: t.scale * (1 - e) * i + t.y
 }), R = (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 r = e.reduce(
+  const i = e.reduce(
     (d, c) => [d[0] + c[0], d[1] + c[1]],
     [0, 0]
-  ), s = [r[0] / o, r[1] / o], n = e.map((d) => [d[0] - s[0], d[1] - s[1]]).reduce(
+  ), 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]),
     0
   );
@@ -1782,22 +1896,22 @@ const Fe = (t) => {
   };
 };
 class U {
-  constructor(e, o, r, s) {
-    i(this, "viewport");
-    i(this, "prevTouches", null);
-    i(this, "wheelFinishTimer", null);
-    i(this, "transformInProgress", !1);
-    i(this, "onBeforeDestroy", () => {
+  constructor(e, o, i, s) {
+    r(this, "viewport");
+    r(this, "prevTouches", null);
+    r(this, "wheelFinishTimer", null);
+    r(this, "transformInProgress", !1);
+    r(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);
     });
-    i(this, "onMouseDown", (e) => {
+    r(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());
     });
-    i(this, "onWindowMouseMove", (e) => {
+    r(this, "onWindowMouseMove", (e) => {
       const o = M(
         this.window,
         this.element,
@@ -1808,21 +1922,21 @@ class U {
         this.stopMouseDrag();
         return;
       }
-      const r = -e.movementX, s = -e.movementY;
-      this.moveViewport(r, s);
+      const i = -e.movementX, s = -e.movementY;
+      this.moveViewport(i, s);
     });
-    i(this, "onWindowMouseUp", (e) => {
+    r(this, "onWindowMouseUp", (e) => {
       this.element === null || !this.config.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
-    i(this, "onWheelScroll", (e) => {
+    r(this, "onWheelScroll", (e) => {
       if (!this.config.mouseWheelEventVerifier(e))
         return;
-      const { left: o, top: r } = this.element.getBoundingClientRect(), s = e.clientX - o, h = e.clientY - r, d = 1 / (e.deltaY < 0 ? this.config.wheelSensitivity : 1 / this.config.wheelSensitivity);
+      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(() => {
         this.transformInProgress || this.config.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.config.scaleWheelFinishTimeout);
     });
-    i(this, "onTouchStart", (e) => {
+    r(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
         this.prevTouches = R(e);
         return;
@@ -1835,7 +1949,7 @@ class U {
         passive: !0
       }), this.startRegisteredTransform();
     });
-    i(this, "onWindowTouchMove", (e) => {
+    r(this, "onWindowTouchMove", (e) => {
       const o = R(e);
       if (!o.touches.every(
         (s) => M(this.window, this.element, s[0], s[1])
@@ -1852,25 +1966,25 @@ class U {
       }
       this.prevTouches = o;
     });
-    i(this, "onWindowTouchFinish", (e) => {
+    r(this, "onWindowTouchFinish", (e) => {
       e.touches.length > 0 ? this.prevTouches = R(e) : this.stopTouchDrag();
     });
-    i(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), s = this.config.transformPreprocessor({
+    r(this, "observer", new ResizeObserver(() => {
+      const e = this.viewport.getViewportMatrix(), { width: o, height: i } = this.element.getBoundingClientRect(), s = this.config.transformPreprocessor({
         prevTransform: e,
         nextTransform: e,
         canvasWidth: o,
-        canvasHeight: r
+        canvasHeight: i
       });
       this.config.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.config.onResizeTransformFinished();
     }));
-    i(this, "config");
-    i(this, "preventWheelScaleListener", (e) => {
+    r(this, "config");
+    r(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = o, this.window = r, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Oe(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Ze(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
@@ -1878,25 +1992,25 @@ class U {
       passive: !0
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, r, s) {
+  static configure(e, o, i, s) {
     new U(
       e,
       o,
-      r,
+      i,
       s
     );
   }
   moveViewport(e, o) {
-    const r = this.viewport.getViewportMatrix(), s = Xe(r, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
-      prevTransform: r,
+    const i = this.viewport.getViewportMatrix(), s = Je(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+      prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
       canvasHeight: n
     });
     this.performTransform(d);
   }
-  scaleViewport(e, o, r) {
-    const s = this.canvas.viewport.getViewportMatrix(), h = Ye(s, e, o, r), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
+  scaleViewport(e, o, i) {
+    const s = this.canvas.viewport.getViewportMatrix(), h = Ke(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: n,
@@ -1927,21 +2041,21 @@ class U {
   }
 }
 class X {
-  constructor(e, o, r, s, h, n) {
-    i(this, "canvasResizeObserver");
-    i(this, "nodeHorizontal");
-    i(this, "nodeVertical");
-    i(this, "viewport");
-    i(this, "viewportWidth", 0);
-    i(this, "viewportHeight", 0);
-    i(this, "viewportMatrix");
-    i(this, "loadedArea", {
+  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", {
       xFrom: 1 / 0,
       xTo: 1 / 0,
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    i(this, "updateLoadedArea", (e) => {
+    r(this, "updateLoadedArea", (e) => {
       this.loadedArea = {
         xFrom: e.x,
         xTo: e.x + e.width,
@@ -1949,25 +2063,25 @@ class X {
         yTo: e.y + e.height
       };
     });
-    i(this, "onBeforeDestroy", () => {
+    r(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);
     });
-    i(this, "onAfterViewportUpdated", () => {
+    r(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
-    i(this, "userTransformInProgress", !1);
-    var p, f, E, x, T;
-    this.canvas = e, this.element = o, this.window = r, this.trigger = h, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((b) => {
-      const m = b[0];
+    r(this, "userTransformInProgress", !1);
+    var p, f, A, 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 m = T[0];
       this.viewportWidth = m.contentRect.width, this.viewportHeight = m.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
     const d = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onResizeTransformStarted) ?? (() => {
     }), c = ((f = s == null ? void 0 : s.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
-    }), a = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onTransformChange) ?? (() => {
-    }), l = ((x = s == null ? void 0 : s.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
-    }), g = ((T = s == null ? void 0 : s.events) == null ? void 0 : T.onTransformFinished) ?? (() => {
+    }), a = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onTransformChange) ?? (() => {
+    }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+    }), g = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
     }), y = {
       ...s,
       events: {
@@ -1983,8 +2097,8 @@ class X {
         },
         onTransformChange: () => {
           this.userTransformInProgress = !1;
-          const b = this.viewportMatrix;
-          this.viewportMatrix = this.viewport.getViewportMatrix(), b.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
+          const T = this.viewportMatrix;
+          this.viewportMatrix = this.viewport.getViewportMatrix(), T.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
         },
         onTransformFinished: () => {
           this.scheduleLoadAreaAroundViewport(), g();
@@ -1998,11 +2112,11 @@ class X {
       y
     ), 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, r, s, h, n) {
+  static configure(e, o, i, s, h, n) {
     new X(
       e,
       o,
-      r,
+      i,
       s,
       h,
       n
@@ -2014,162 +2128,122 @@ class X {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = 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 < r && this.loadedArea.xTo > h && this.loadedArea.yFrom < s && this.loadedArea.yTo > n || this.scheduleLoadAreaAroundViewport();
+    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();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = 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: r, y: s, width: h, height: n });
+    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 He = () => {
+const Qe = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.position = "absolute", t.style.inset = "0", t;
-}, je = () => {
+}, _e = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return t.setAttribute("fill", "url(#pattern)"), t;
-}, Ge = () => {
+}, qe = () => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return t.setAttribute("id", "pattern"), t;
-}, Je = (t, e) => {
+}, et = (t, e) => {
   const o = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return o.setAttribute("cx", "0"), o.setAttribute("cy", "0"), o.setAttribute("r", `${t}`), o.setAttribute("fill", `${e}`), o;
-}, Ke = (t) => t instanceof SVGElement ? t : Je(
+}, tt = (t) => t instanceof SVGElement ? t : et(
   (t == null ? void 0 : t.radius) ?? 1.5,
   (t == null ? void 0 : t.color) ?? "#d8d8d8"
-), Qe = (t) => {
-  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, r = (e == null ? void 0 : e.height) ?? 25, s = Ke(t.renderer ?? {});
+), ot = (t) => {
+  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = tt(t.renderer ?? {});
   return {
     tileWidth: o,
-    tileHeight: r,
+    tileHeight: i,
     renderer: s,
     maxViewportScale: t.maxViewportScale ?? 10
   };
 };
 class Y {
-  constructor(e, o, r) {
-    i(this, "svg", He());
-    i(this, "patternRenderingRectangle", je());
-    i(this, "pattern", Ge());
-    i(this, "patternContent");
-    i(this, "tileWidth");
-    i(this, "tileHeight");
-    i(this, "halfTileWidth");
-    i(this, "halfTileHeight");
-    i(this, "maxViewportScale");
-    i(this, "visible", !1);
-    i(this, "resizeObserver", new ResizeObserver((e) => {
-      const o = e[0], { width: r, height: s } = o.contentRect;
-      this.svg.setAttribute("width", `${r}`), this.svg.setAttribute("height", `${s}`), this.patternRenderingRectangle.setAttribute("width", `${r}`), this.patternRenderingRectangle.setAttribute("height", `${s}`);
-      const h = this.tileWidth / r, n = this.tileHeight / s;
+  constructor(e, o, i) {
+    r(this, "svg", Qe());
+    r(this, "patternRenderingRectangle", _e());
+    r(this, "pattern", qe());
+    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}`);
     }));
-    i(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), o = e.x - this.halfTileWidth * e.scale, r = e.y - this.halfTileHeight * e.scale, s = `matrix(${e.scale}, 0, 0, ${e.scale}, ${o}, ${r})`;
+    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();
     });
-    i(this, "onBeforeDestroy", () => {
+    r(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 = r;
-    const s = Qe(o);
+    this.canvas = e, this.host = i;
+    const s = ot(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);
   }
-  static configure(e, o, r) {
-    new Y(e, o, r);
+  static configure(e, o, i) {
+    new Y(e, o, i);
   }
   updateVisibility() {
     const o = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
     o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-const Ze = (t) => {
+const rt = (t) => {
   var d, c, a;
-  const e = () => "direct", o = (l) => l, r = (l) => l.button === 0, s = () => {
+  const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
   }, h = () => {
   }, n = () => {
   };
   return {
     connectionTypeResolver: t.connectionTypeResolver ?? e,
     connectionPreprocessor: t.connectionPreprocessor ?? o,
-    mouseDownEventVerifier: t.mouseDownEventVerifier ?? r,
-    mouseUpEventVerifier: t.mouseUpEventVerifier ?? r,
+    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
   };
 };
-class _e {
-  constructor() {
-    i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
-    i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
-  }
-  addRecord(e, o) {
-    const r = this.singleToMultiMap.get(e);
-    r === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([o])) : r.add(o), this.multiToSingleMap.set(o, e);
-  }
-  getFirstBySingle(e) {
-    const o = this.singleToMultiMap.get(e);
-    return o === void 0 ? void 0 : Array.from(o.values())[0];
-  }
-  removeByMulti(e) {
-    const o = this.multiToSingleMap.get(e), r = this.singleToMultiMap.get(o);
-    r.delete(e), r.size === 0 && this.singleToMultiMap.delete(o), this.multiToSingleMap.delete(e);
-  }
-  getByMulti(e) {
-    return this.multiToSingleMap.get(e);
-  }
-  removeBySingle(e) {
-    this.singleToMultiMap.get(e).forEach((r) => {
-      this.multiToSingleMap.delete(r);
-    }), this.singleToMultiMap.delete(e);
-  }
-  clear() {
-    this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
-  }
-  forEachSingle(e) {
-    this.singleToMultiMap.forEach((o, r) => {
-      e(r);
-    });
-  }
-  hasSingle(e) {
-    return this.singleToMultiMap.get(e) !== void 0;
-  }
-  hasMulti(e) {
-    return this.multiToSingleMap.get(e) !== void 0;
-  }
-}
 class H {
-  constructor(e, o, r, s, h, n) {
-    i(this, "config");
-    i(this, "overlayCanvas");
-    i(this, "ports", new _e());
-    i(this, "staticOverlayPortId", "static");
-    i(this, "draggingOverlayPortId", "dragging");
-    i(this, "staticPortId", null);
-    i(this, "isDirect", !0);
-    i(this, "onAfterPortMarked", (e) => {
+  constructor(e, o, i, s, h, n) {
+    r(this, "config");
+    r(this, "overlayCanvas");
+    r(this, "ports", new de());
+    r(this, "staticOverlayPortId", "static");
+    r(this, "draggingOverlayPortId", "dragging");
+    r(this, "staticPortId", null);
+    r(this, "isDirect", !0);
+    r(this, "onAfterPortMarked", (e) => {
       const o = this.canvas.graph.getPort(e);
       this.ports.hasSingle(o.element) || this.hookPortEvents(o.element), this.ports.addRecord(o.element, e);
     });
-    i(this, "onBeforePortUnmarked", (e) => {
+    r(this, "onBeforePortUnmarked", (e) => {
       const o = this.canvas.graph.getPort(e);
       this.ports.removeByMulti(e), this.ports.hasSingle(o.element) || this.unhookPortEvents(o.element);
     });
-    i(this, "onPortMouseDown", (e) => {
+    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, {
         passive: !0
@@ -2177,7 +2251,7 @@ class H {
         passive: !0
       }));
     });
-    i(this, "onWindowMouseMove", (e) => {
+    r(this, "onWindowMouseMove", (e) => {
       if (!M(
         this.window,
         this.overlayLayer,
@@ -2189,10 +2263,10 @@ class H {
       }
       this.moveDraggingNode({ x: e.clientX, y: e.clientY });
     });
-    i(this, "onWindowMouseUp", (e) => {
+    r(this, "onWindowMouseUp", (e) => {
       this.config.mouseUpEventVerifier(e) && (this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
     });
-    i(this, "onPortTouchStart", (e) => {
+    r(this, "onPortTouchStart", (e) => {
       const o = e.currentTarget;
       if (!(e.touches.length === 1 && this.isPortConnectionAllowed(o)))
         return;
@@ -2206,7 +2280,7 @@ class H {
         passive: !0
       });
     });
-    i(this, "onWindowTouchMove", (e) => {
+    r(this, "onWindowTouchMove", (e) => {
       const o = e.touches[0];
       if (!M(
         this.window,
@@ -2219,30 +2293,30 @@ class H {
       }
       this.moveDraggingNode({ x: o.clientX, y: o.clientY });
     });
-    i(this, "onWindowTouchFinish", (e) => {
+    r(this, "onWindowTouchFinish", (e) => {
       const o = e.changedTouches[0];
       this.tryCreateConnection({ x: o.clientX, y: o.clientY }), this.stopTouchDrag();
     });
-    i(this, "onBeforeClear", () => {
+    r(this, "onBeforeClear", () => {
       this.ports.forEachSingle((e) => {
         this.unhookPortEvents(e);
       }), this.ports.clear();
     });
-    i(this, "onBeforeDestroy", () => {
+    r(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);
     });
-    i(this, "onEdgeCreated", (e) => {
+    r(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = o, this.viewportStore = r, this.window = s, this.config = Ze(n);
-    const d = new ne(), c = new re(
+    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = rt(n);
+    const d = new ce(), c = new ie(
       d,
       this.viewportStore,
       this.overlayLayer
     );
-    this.overlayCanvas = new se(
+    this.overlayCanvas = new he(
       this.overlayLayer,
       d,
       this.viewportStore,
@@ -2250,19 +2324,19 @@ class H {
       h
     ), 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, r, s, h, n) {
+  static configure(e, o, i, s, h, n) {
     new H(
       e,
       o,
-      r,
+      i,
       s,
       h,
       n
     );
   }
   grabPort(e, o) {
-    const r = this.ports.getFirstBySingle(e), s = this.canvas.graph.getPort(r);
-    this.staticPortId = r;
+    const i = this.ports.getMultiBySingle(e)[0], s = this.canvas.graph.getPort(i);
+    this.staticPortId = i;
     const h = this.config.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), g = N(l, {
       x: d - a.x,
       y: c - a.y
@@ -2279,8 +2353,8 @@ class H {
       portDirection: this.config.dragPortDirection
     };
     this.isDirect = h === "direct";
-    const E = this.isDirect ? p : f, x = this.isDirect ? f : p;
-    this.createOverlayGraph(E, x);
+    const A = this.isDirect ? p : f, E = this.isDirect ? f : p;
+    this.createOverlayGraph(A, E);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2302,8 +2376,8 @@ class H {
     this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
   }
   createOverlayGraph(e, o) {
-    const r = this.createAddNodeRequest(e);
-    this.overlayCanvas.addNode(r);
+    const i = this.createAddNodeRequest(e);
+    this.overlayCanvas.addNode(i);
     const s = this.createAddNodeRequest(o);
     this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
       from: e.overlayId,
@@ -2332,14 +2406,14 @@ class H {
       this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
       return;
     }
-    const r = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: r, to: s }, n = this.config.connectionPreprocessor(h);
+    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);
   }
   moveDraggingNode(e) {
-    const o = this.overlayLayer.getBoundingClientRect(), r = {
+    const o = this.overlayLayer.getBoundingClientRect(), i = {
       x: e.x - o.x,
       y: e.y - o.y
-    }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, r);
+    }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
     this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
       x: h.x,
       y: h.y
@@ -2347,59 +2421,59 @@ class H {
   }
   findPortAtPoint(e) {
     const o = document.elementsFromPoint(e.x, e.y);
-    for (const r of o) {
-      const s = this.findPortAtElement(r);
+    for (const i of o) {
+      const s = this.findPortAtElement(i);
       if (s !== null)
         return s;
     }
     return null;
   }
   findPortAtElement(e) {
-    let o = e, r = null;
-    for (; o !== null && (r = this.ports.getFirstBySingle(o) ?? null, r === null); )
+    let o = e, i = null;
+    for (; o !== null && (i = this.ports.getMultiBySingle(o)[0] ?? null, i === null); )
       o = o.parentElement;
-    return r;
+    return i;
   }
   isPortConnectionAllowed(e) {
-    const o = this.ports.getFirstBySingle(e);
+    const o = this.ports.getMultiBySingle(e)[0];
     return this.config.connectionTypeResolver(o) !== null;
   }
 }
-const qe = () => {
+const it = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
 }, W = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.inset = "0", t;
 };
-class et {
+class st {
   constructor(e) {
-    i(this, "background", W());
-    i(this, "main", W());
-    i(this, "overlay", W());
-    i(this, "host", qe());
+    r(this, "background", W());
+    r(this, "main", W());
+    r(this, "overlay", W());
+    r(this, "host", it());
     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);
   }
 }
-class ot {
+class ht {
   constructor(e) {
-    i(this, "element", null);
-    i(this, "canvasDefaults", {});
-    i(this, "dragConfig", {});
-    i(this, "transformConfig", {});
-    i(this, "backgroundConfig", {});
-    i(this, "connectablePortsConfig", {});
-    i(this, "virtualScrollConfig");
-    i(this, "hasDraggableNode", !1);
-    i(this, "hasTransformableViewport", !1);
-    i(this, "hasResizeReactiveNodes", !1);
-    i(this, "hasBackground", !1);
-    i(this, "hasUserConnectablePorts", !1);
-    i(this, "boxRenderingTrigger");
-    i(this, "window", window);
+    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);
     e !== void 0 && (this.element = e);
   }
   /**
@@ -2467,18 +2541,18 @@ class ot {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new ie());
-    const o = new ne(), r = new Ue(), s = new et(this.element);
-    let h = new re(
+    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new se());
+    const o = new ce(), i = new ze(), s = new st(this.element);
+    let h = new ie(
       o,
-      r,
+      i,
       s.main
     );
-    e !== void 0 && (h = new ue(h, o, e));
-    const n = new se(
+    e !== void 0 && (h = new ve(h, o, e));
+    const n = new he(
       this.element,
       o,
-      r,
+      i,
       h,
       this.canvasDefaults
     ), d = () => {
@@ -2488,7 +2562,7 @@ class ot {
       n,
       this.backgroundConfig,
       s.background
-    ), this.hasResizeReactiveNodes && k.configure(n), this.hasDraggableNode && O.configure(
+    ), this.hasResizeReactiveNodes && z.configure(n), this.hasDraggableNode && O.configure(
       n,
       s.main,
       this.window,
@@ -2496,7 +2570,7 @@ class ot {
     ), this.hasUserConnectablePorts && H.configure(
       n,
       s.overlay,
-      r,
+      i,
       this.window,
       this.canvasDefaults,
       this.connectablePortsConfig
@@ -2523,11 +2597,14 @@ class ot {
   }
 }
 export {
-  De as BezierEdgeShape,
-  ot as CanvasBuilder,
-  ie as EventSubject,
-  Ve as HorizontalEdgeShape,
+  Re as BezierEdgeShape,
+  ht as CanvasBuilder,
+  se as EventSubject,
+  Be as HorizontalEdgeShape,
   S as HtmlGraphError,
-  Le as StraightEdgeShape,
-  Re as VerticalEdgeShape
+  $e as InteractiveEdgeError,
+  ne as InteractiveEdgeShape,
+  I as LineEdgeShape,
+  Ie as StraightEdgeShape,
+  Ue as VerticalEdgeShape
 };