@html-graph/html-graph 3.7.0 → 3.8.0

package/dist/html-graph.js

@@ -252,6 +252,9 @@ class pe {
       priority: o.priority
     };
   }
+  getElementNodeId(e) {
+    return this.graphStore.getElementNodeId(e) ?? null;
+  }
   // TODO: use Set in v4
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
@@ -339,991 +342,249 @@ class S extends Error {
     r(this, "name", "HtmlGraphError");
   }
 }
-const Ae = (t, e) => ({
-  x: t / 2,
-  y: e / 2
-}), $ = (t) => () => t, K = $(0), Ee = () => {
-  let t = 0;
-  return () => t++;
-}, 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: i
-  };
-}, v = (t, e, o) => ({
-  x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
-  y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
-}), w = {
-  x: 0,
-  y: 0
-}, Se = (t) => {
-  const e = v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ), o = v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ), 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 ${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}`;
-}, be = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = v(
-    { x: i, y: w.y },
-    t.fromVector,
-    w
-  ), a = {
-    x: c.x + n,
-    y: c.y + d
-  }, l = v(
-    { x: t.to.x - i, y: t.to.y },
-    t.toVector,
-    t.to
-  ), g = {
-    x: l.x + n,
-    y: l.y + d
-  }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, p = {
-    x: c.x + t.curvature * t.fromVector.x,
-    y: c.y + t.curvature * t.fromVector.y
-  }, f = {
-    x: l.x - t.curvature * t.toVector.x,
-    y: l.y - t.curvature * t.toVector.y
-  }, A = {
-    x: c.x + n,
-    y: c.y + d
-  }, E = {
-    x: l.x + n,
-    y: l.y + d
-  };
-  return [
-    `M ${e.x} ${e.y}`,
-    `L ${c.x} ${c.y}`,
-    `C ${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(" ");
-}, 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 i = t.length - 1;
-    let s = 0, h = 0, n = 0;
-    t.forEach((d, c) => {
-      let a = 0, l = 0, g = 0;
-      const y = c > 0, p = c < i, f = y && p;
-      if (y && (a = -s, l = -h, g = n), p) {
-        const L = t[c + 1];
-        s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
-      }
-      const E = n !== 0 ? Math.min((f ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, 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} ${b.x} ${b.y}`
-      );
+class ne {
+  constructor(e, o, i, s, h) {
+    /**
+     * provides api for accessing model of rendered graph
+     */
+    r(this, "graph");
+    /**
+     * provides api for accessing viewport state
+     */
+    r(this, "viewport");
+    r(this, "nodeIdGenerator", new C(
+      (e) => this.graph.getNode(e) !== null
+    ));
+    r(this, "portIdGenerator", new C(
+      (e) => this.graph.getPort(e) !== null
+    ));
+    r(this, "edgeIdGenerator", new C(
+      (e) => this.graph.getEdge(e) !== null
+    ));
+    r(this, "onAfterNodeAdded", (e) => {
+      this.htmlView.attachNode(e);
+    });
+    r(this, "onAfterNodeUpdated", (e) => {
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
+        this.htmlView.renderEdge(i);
+      });
+    });
+    r(this, "onAfterNodePriorityUpdated", (e) => {
+      this.htmlView.updateNodePriority(e);
+    });
+    r(this, "onBeforeNodeRemoved", (e) => {
+      this.graphStore.getNodePortIds(e).forEach((o) => {
+        this.unmarkPort(o);
+      }), this.htmlView.detachNode(e);
+    });
+    r(this, "onAfterPortUpdated", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
+        this.htmlView.renderEdge(i);
+      });
+    });
+    r(this, "onBeforePortUnmarked", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
+        this.removeEdge(o);
+      });
+    });
+    r(this, "onAfterEdgeAdded", (e) => {
+      this.htmlView.attachEdge(e);
+    });
+    r(this, "onAfterEdgeShapeUpdated", (e) => {
+      this.htmlView.updateEdgeShape(e);
+    });
+    r(this, "onAfterEdgeUpdated", (e) => {
+      this.htmlView.renderEdge(e);
+    });
+    r(this, "onAfterEdgePriorityUpdated", (e) => {
+      this.htmlView.updateEdgePriority(e);
     });
+    r(this, "onBeforeEdgeRemoved", (e) => {
+      this.htmlView.detachEdge(e);
+    });
+    r(this, "onBeforeClear", () => {
+      this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
+    });
+    r(this, "onBeforeDestroyEmitter");
+    /**
+     * emits event just before destruction of canvas
+     */
+    r(this, "onBeforeDestroy");
+    this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = h, this.graph = new pe(this.graphStore), this.viewport = new 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] = x();
   }
-  return o.join(" ");
-}, me = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
-    { x: s, y: w.y },
-    t.fromVector,
-    w
-  ), n = v(
-    { x: t.to.x - s, y: t.to.y },
-    t.toVector,
-    t.to
-  ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
-    x: t.flipX > 0 ? d : -i,
-    y: h.y
-  }, l = { x: a.x, y: c }, g = {
-    x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
-    y: n.y
-  }, y = { x: g.x, y: c };
-  return V(
-    [e, h, a, l, y, g, n, o],
-    t.roundness
-  );
-}, F = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
-    { x: i, y: w.y },
-    t.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 - i, y: t.to.y },
-    t.toVector,
-    t.to
-  ), g = { x: l.x + d, y: l.y + c };
-  return V(
-    [e, s, a, g, l, o],
-    t.roundness
-  );
-}, Te = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
-    { x: i, y: w.y },
-    t.fromVector,
-    w
-  ), h = v(
-    { x: t.to.x - i, y: t.to.y },
-    t.toVector,
-    t.to
-  );
-  return V([e, s, h, o], t.roundness);
-}, Pe = (t) => {
-  const e = t.hasSourceArrow ? v(
-    { x: t.arrowLength, y: w.y },
-    t.fromVector,
-    w
-  ) : w, o = t.hasTargetArrow ? v(
-    { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVector,
-    t.to
-  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
-    { x: s, y: w.y },
-    t.fromVector,
-    w
-  ), n = v(
-    { x: t.to.x - s, y: t.to.y },
-    t.toVector,
-    t.to
-  ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
-    x: h.x,
-    y: t.flipY > 0 ? d : -i
-  }, l = { x: c, y: a.y }, g = {
-    x: n.x,
-    y: t.flipY > 0 ? t.to.y - d : t.to.y + i
-  }, y = { x: c, y: g.y };
-  return V(
-    [e, h, a, l, y, g, n, o],
-    t.roundness
-  );
-}, 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: i, y: w.y },
-    { x: i, y: t.side },
-    { x: s, y: t.side },
-    { x: s, y: -t.side },
-    { x: i, y: -t.side },
-    { x: i, y: w.y },
-    { x: t.arrowLength, y: w.y }
-  ].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}${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 }
-  ].map(
-    (g) => v(g, t.fromVector, w)
-  ), a = [
-    `M ${c[0].x} ${c[0].y}`,
-    `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
-    `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
-    `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
-  ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
-}, u = Object.freeze({
-  color: "#777777",
-  width: 1,
-  arrowLength: 15,
-  arrowWidth: 4,
-  arrowOffset: 15,
-  hasSourceArrow: !1,
-  hasTargetArrow: !1,
-  cycleRadius: 30,
-  cycleSquareSide: 30,
-  roundness: 10,
-  detourDistance: 100,
-  detourDirection: -Math.PI / 2,
-  detourDirectionVertical: 0,
-  smallCycleRadius: 15,
-  curvature: 90,
-  interactiveWidth: 10
-}), Q = (t, e, o, i) => {
-  const h = [
-    w,
-    { 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} Z`;
-}, _ = (t) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("fill", t), e;
-}, Me = () => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return t.style.transformOrigin = "50% 50%", t;
-}, 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;
-}, Le = (t, e) => {
-  const o = {
-    x: t.x + t.width / 2,
-    y: t.y + t.height / 2
-  }, i = {
-    x: e.x + e.width / 2,
-    y: e.y + e.height / 2
-  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
-  return {
-    x: s,
-    y: h,
-    width: n,
-    height: d,
-    flipX: c,
-    flipY: a
-  };
-}, 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) {
-    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));
+  /**
+   * adds new node
+   */
+  addNode(e) {
+    const o = this.nodeIdGenerator.create(e.id);
+    if (this.graph.getNode(o) !== null)
+      throw new S("failed to add node with existing id");
+    if (this.graphStore.addNode({
+      id: o,
+      element: e.element,
+      x: e.x,
+      y: e.y,
+      centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
+      priority: e.priority ?? this.defaults.nodes.priorityFn()
+    }), e.ports !== void 0)
+      for (const i of e.ports)
+        this.markPort({
+          id: i.id,
+          element: i.element,
+          nodeId: o,
+          direction: i.direction
+        });
+    return this;
   }
-  render(e) {
-    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, ${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,
-      d
-    ), a = q(
-      e.to.direction,
-      n,
-      d
-    ), l = {
-      x: s,
-      y: h
-    };
-    let g = a, y = -this.params.arrowLength, p;
-    e.from.portId === e.to.portId ? (p = this.params.createCyclePath, g = c, y = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? p = this.params.createDetourPath : p = this.params.createLinePath;
-    const f = p(
-      c,
-      a,
-      l,
-      n,
-      d
-    );
-    if (this.line.setAttribute("d", f), this.sourceArrow) {
-      const A = Q(
-        c,
-        w,
-        this.params.arrowLength,
-        this.params.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", A);
-    }
-    if (this.targetArrow) {
-      const A = Q(
-        g,
-        l,
-        y,
-        this.params.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", A);
-    }
+  /**
+   * updates node parameters
+   */
+  updateNode(e, o) {
+    if (this.graph.getNode(e) === null)
+      throw new S("failed to update non existing node");
+    return this.graphStore.updateNode(e, o ?? {}), this;
   }
-}
-class Re {
-  constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "curvature");
-    r(this, "portCycleRadius");
-    r(this, "portCycleSmallRadius");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => Ne({
-      fromVector: e,
-      radius: this.portCycleRadius,
-      smallRadius: this.portCycleSmallRadius,
-      arrowLength: this.arrowLength,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createDetourPath", (e, o, i, s, h) => be({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipX: s,
-      flipY: h,
-      arrowLength: this.arrowLength,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      curvature: this.curvature,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createLinePath", (e, o, i) => Se({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      arrowLength: this.arrowLength,
-      curvature: this.curvature,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+  /**
+   * removes specified node
+   * all the ports of node get unmarked
+   * all the edges adjacent to node get removed
+   */
+  removeNode(e) {
+    if (this.graph.getNode(e) === null)
+      throw new S("failed to remove non existing node");
+    return this.graphStore.removeNode(e), this;
   }
-  render(e) {
-    this.lineShape.render(e);
+  /**
+   * marks specified element as a port for specified node
+   */
+  markPort(e) {
+    const o = this.portIdGenerator.create(e.id);
+    if (this.graph.getPort(o) !== null)
+      throw new S("failed to add port with existing id");
+    if (this.graph.getNode(e.nodeId) === null)
+      throw new S("failed to mark port for nonexistent node");
+    return this.graphStore.addPort({
+      id: o,
+      element: e.element,
+      nodeId: e.nodeId,
+      direction: e.direction ?? this.defaults.ports.direction
+    }), this;
   }
-}
-class Be {
-  constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => k({
-      fromVector: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createDetourPath", (e, o, i, s, h) => F({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipX: s,
-      flipY: h,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createLinePath", (e, o, i, s) => me({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipX: s,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
-      o,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.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.lineShape.render(e);
+  /**
+   * updates port and edges attached to it
+   */
+  updatePort(e, o) {
+    if (this.graph.getPort(e) === null)
+      throw new S("failed to update nonexistent port");
+    return this.graphStore.updatePort(e, o ?? {}), this;
   }
-}
-class Ie {
-  constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => k({
-      fromVector: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createDetourPath", (e, o, i, s, h) => F({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipX: s,
-      flipY: h,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createLinePath", (e, o, i) => Te({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
-      o,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+  /**
+   * unmarks specified port
+   * all the edges adjacent to the port get removed
+   */
+  unmarkPort(e) {
+    if (this.graph.getPort(e) === null)
+      throw new S("failed to unmark non existing port");
+    return this.graphStore.removePort(e), this;
   }
-  render(e) {
-    this.lineShape.render(e);
+  /**
+   * adds new edge
+   */
+  addEdge(e) {
+    const o = this.edgeIdGenerator.create(e.id);
+    if (this.graph.getEdge(o) !== null)
+      throw new S("failed to add edge with existing id");
+    if (this.graph.getPort(e.from) === null)
+      throw new S("failed to add edge from nonexistent port");
+    if (this.graph.getPort(e.to) === null)
+      throw new S("failed to add edge to nonexistent port");
+    return this.graphStore.addEdge({
+      id: o,
+      from: e.from,
+      to: e.to,
+      shape: e.shape ?? this.defaults.edges.shapeFactory(o),
+      priority: e.priority ?? this.defaults.edges.priorityFn()
+    }), this;
   }
-}
-class Ue {
-  constructor(e) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow");
-    r(this, "targetArrow");
-    r(this, "arrowLength");
-    r(this, "arrowWidth");
-    r(this, "arrowOffset");
-    r(this, "roundness");
-    r(this, "cycleSquareSide");
-    r(this, "detourDirection");
-    r(this, "detourDistance");
-    r(this, "hasSourceArrow");
-    r(this, "hasTargetArrow");
-    r(this, "lineShape");
-    r(this, "createCyclePath", (e) => k({
-      fromVector: e,
-      arrowLength: this.arrowLength,
-      side: this.cycleSquareSide,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createDetourPath", (e, o, i, s, h) => F({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipX: s,
-      flipY: h,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      detourDirection: this.detourDirection,
-      detourDistance: this.detourDistance,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    r(this, "createLinePath", (e, o, i, s, h) => Pe({
-      to: i,
-      fromVector: e,
-      toVector: o,
-      flipY: h,
-      arrowLength: this.arrowLength,
-      arrowOffset: this.arrowOffset,
-      roundness: this.roundness,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow
-    }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
-    this.roundness = Math.min(
-      o,
-      this.arrowOffset,
-      this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new I({
-      color: (e == null ? void 0 : e.color) ?? u.color,
-      width: (e == null ? void 0 : e.width) ?? u.width,
-      arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
-      hasSourceArrow: this.hasSourceArrow,
-      hasTargetArrow: this.hasTargetArrow,
-      createCyclePath: this.createCyclePath,
-      createDetourPath: this.createDetourPath,
-      createLinePath: this.createLinePath
-    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
+  /**
+   * updates specified edge
+   */
+  updateEdge(e, o) {
+    if (this.graph.getEdge(e) === null)
+      throw new S("failed to update nonexistent edge");
+    return this.graphStore.updateEdge(e, o ?? {}), this;
   }
-  render(e) {
-    this.lineShape.render(e);
+  /**
+   * removes specified edge
+   */
+  removeEdge(e) {
+    if (this.graph.getEdge(e) === null)
+      throw new S("failed to remove nonexistent edge");
+    return this.graphStore.removeEdge(e), this;
   }
-}
-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";
+  /**
+   * applies transformation for viewport matrix
+   */
+  patchViewportMatrix(e) {
+    return this.viewportStore.patchViewportMatrix(e), this;
   }
-}
-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);
+  /**
+   * applies transformation for content matrix
+   */
+  patchContentMatrix(e) {
+    return this.viewportStore.patchContentMatrix(e), this;
   }
-  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 Ie({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
-      });
-    case "horizontal":
-      return () => new Be({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
-      });
-    case "vertical":
-      return () => new Ue({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        arrowOffset: t.arrowOffset,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleSquareSide: t.cycleSquareSide,
-        roundness: t.roundness,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
-      });
-    default:
-      return () => new Re({
-        color: t.color,
-        width: t.width,
-        arrowLength: t.arrowLength,
-        arrowWidth: t.arrowWidth,
-        hasSourceArrow: t.hasSourceArrow,
-        hasTargetArrow: t.hasTargetArrow,
-        cycleRadius: t.cycleRadius,
-        smallCycleRadius: t.smallCycleRadius,
-        curvature: t.curvature,
-        detourDistance: t.detourDistance,
-        detourDirection: t.detourDirection
-      });
+  /**
+   * clears canvas from nodes and edges
+   * canvas gets rolled back to initial state and can be reused
+   */
+  clear() {
+    return this.graphStore.clear(), this;
   }
-}, ke = (t) => {
-  var o, i, s, h, n;
-  const e = xe(
-    (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.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) ?? Ae,
-      priorityFn: e.nodesPriorityFn
-    },
-    ports: {
-      direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
-    },
-    edges: {
-      shapeFactory: Fe(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
-      priorityFn: e.edgesPriorityFn
-    }
-  };
-};
-class he {
-  constructor(e, o, i, s, h) {
-    /**
-     * provides api for accessing model of rendered graph
-     */
-    r(this, "graph");
-    /**
-     * provides api for accessing viewport state
-     */
-    r(this, "viewport");
-    r(this, "defaults");
-    r(this, "nodeIdGenerator", new C(
-      (e) => this.graph.getNode(e) !== null
-    ));
-    r(this, "portIdGenerator", new C(
-      (e) => this.graph.getPort(e) !== null
-    ));
-    r(this, "edgeIdGenerator", new C(
-      (e) => this.graph.getEdge(e) !== null
-    ));
-    r(this, "onAfterNodeAdded", (e) => {
-      this.htmlView.attachNode(e);
-    });
-    r(this, "onAfterNodeUpdated", (e) => {
-      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
-        this.htmlView.renderEdge(i);
-      });
-    });
-    r(this, "onAfterNodePriorityUpdated", (e) => {
-      this.htmlView.updateNodePriority(e);
-    });
-    r(this, "onBeforeNodeRemoved", (e) => {
-      this.graphStore.getNodePortIds(e).forEach((o) => {
-        this.unmarkPort(o);
-      }), this.htmlView.detachNode(e);
-    });
-    r(this, "onAfterPortUpdated", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
-        this.htmlView.renderEdge(i);
-      });
-    });
-    r(this, "onBeforePortUnmarked", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
-        this.removeEdge(o);
-      });
-    });
-    r(this, "onAfterEdgeAdded", (e) => {
-      this.htmlView.attachEdge(e);
-    });
-    r(this, "onAfterEdgeShapeUpdated", (e) => {
-      this.htmlView.updateEdgeShape(e);
-    });
-    r(this, "onAfterEdgeUpdated", (e) => {
-      this.htmlView.renderEdge(e);
-    });
-    r(this, "onAfterEdgePriorityUpdated", (e) => {
-      this.htmlView.updateEdgePriority(e);
-    });
-    r(this, "onBeforeEdgeRemoved", (e) => {
-      this.htmlView.detachEdge(e);
-    });
-    r(this, "onBeforeClear", () => {
-      this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
-    });
-    r(this, "onBeforeDestroyEmitter");
-    /**
-     * emits event just before destruction of canvas
-     */
-    r(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = o, this.viewportStore = i, this.htmlView = s, this.defaults = 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(
+  /**
+   * destroys canvas
+   * canvas element gets rolled back to initial state, and can not be reused
+   */
+  destroy() {
+    this.clear(), this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
       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.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
       this.onAfterEdgeShapeUpdated
-    ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
+    ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
+    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
-  /**
-   * adds new node
-   */
-  addNode(e) {
-    const o = this.nodeIdGenerator.create(e.id);
-    if (this.graph.getNode(o) !== null)
-      throw new S("failed to add node with existing id");
-    if (this.graphStore.addNode({
-      id: o,
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
-      priority: e.priority ?? this.defaults.nodes.priorityFn()
-    }), e.ports !== void 0)
-      for (const i of e.ports)
-        this.markPort({
-          id: i.id,
-          element: i.element,
-          nodeId: o,
-          direction: i.direction
-        });
-    return this;
+}
+class he {
+  constructor() {
+    r(this, "singleToMultiMap", /* @__PURE__ */ new Map());
+    r(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
-  /**
-   * updates node parameters
-   */
-  updateNode(e, o) {
-    if (this.graph.getNode(e) === null)
-      throw new S("failed to update non existing node");
-    return this.graphStore.updateNode(e, o ?? {}), this;
+  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);
   }
-  /**
-   * removes specified node
-   * all the ports of node get unmarked
-   * all the edges adjacent to node get removed
-   */
-  removeNode(e) {
-    if (this.graph.getNode(e) === null)
-      throw new S("failed to remove non existing node");
-    return this.graphStore.removeNode(e), this;
+  getMultiBySingle(e) {
+    const o = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
+    return Array.from(o.values());
   }
-  /**
-   * marks specified element as a port for specified node
-   */
-  markPort(e) {
-    const o = this.portIdGenerator.create(e.id);
-    if (this.graph.getPort(o) !== null)
-      throw new S("failed to add port with existing id");
-    if (this.graph.getNode(e.nodeId) === null)
-      throw new S("failed to mark port for nonexistent node");
-    return this.graphStore.addPort({
-      id: o,
-      element: e.element,
-      nodeId: e.nodeId,
-      direction: e.direction ?? this.defaults.ports.direction
-    }), this;
+  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);
   }
-  /**
-   * updates port and edges attached to it
-   */
-  updatePort(e, o) {
-    if (this.graph.getPort(e) === null)
-      throw new S("failed to update nonexistent port");
-    return this.graphStore.updatePort(e, o ?? {}), this;
+  getByMulti(e) {
+    return this.multiToSingleMap.get(e);
   }
-  /**
-   * unmarks specified port
-   * all the edges adjacent to the port get removed
-   */
-  unmarkPort(e) {
-    if (this.graph.getPort(e) === null)
-      throw new S("failed to unmark non existing port");
-    return this.graphStore.removePort(e), this;
-  }
-  /**
-   * adds new edge
-   */
-  addEdge(e) {
-    const o = this.edgeIdGenerator.create(e.id);
-    if (this.graph.getEdge(o) !== null)
-      throw new S("failed to add edge with existing id");
-    if (this.graph.getPort(e.from) === null)
-      throw new S("failed to add edge from nonexistent port");
-    if (this.graph.getPort(e.to) === null)
-      throw new S("failed to add edge to nonexistent port");
-    return this.graphStore.addEdge({
-      id: o,
-      from: e.from,
-      to: e.to,
-      shape: e.shape ?? this.defaults.edges.shapeFactory(o),
-      priority: e.priority ?? this.defaults.edges.priorityFn()
-    }), this;
-  }
-  /**
-   * updates specified edge
-   */
-  updateEdge(e, o) {
-    if (this.graph.getEdge(e) === null)
-      throw new S("failed to update nonexistent edge");
-    return this.graphStore.updateEdge(e, o ?? {}), this;
-  }
-  /**
-   * removes specified edge
-   */
-  removeEdge(e) {
-    if (this.graph.getEdge(e) === null)
-      throw new S("failed to remove nonexistent edge");
-    return this.graphStore.removeEdge(e), this;
-  }
-  /**
-   * applies transformation for viewport matrix
-   */
-  patchViewportMatrix(e) {
-    return this.viewportStore.patchViewportMatrix(e), this;
-  }
-  /**
-   * applies transformation for content matrix
-   */
-  patchContentMatrix(e) {
-    return this.viewportStore.patchContentMatrix(e), this;
-  }
-  /**
-   * clears canvas from nodes and edges
-   * canvas gets rolled back to initial state and can be reused
-   */
-  clear() {
-    return this.graphStore.clear(), this;
-  }
-  /**
-   * destroys canvas
-   * canvas element gets rolled back to initial state, and can not be reused
-   */
-  destroy() {
-    this.clear(), this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
-      this.onAfterNodePriorityUpdated
-    ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
-      this.onAfterEdgeShapeUpdated
-    ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
-      this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
-  }
-}
-class de {
-  constructor() {
-    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);
+  removeBySingle(e) {
+    this.singleToMultiMap.get(e).forEach((i) => {
+      this.multiToSingleMap.delete(i);
+    }), this.singleToMultiMap.delete(e);
   }
   clear() {
     this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
@@ -1340,15 +601,16 @@ class de {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class ce {
+class de {
   constructor() {
     r(this, "nodes", /* @__PURE__ */ new Map());
     r(this, "ports", /* @__PURE__ */ new Map());
     r(this, "edges", /* @__PURE__ */ new Map());
+    r(this, "nodesElementsMap", /* @__PURE__ */ new Map());
     r(this, "incomingEdges", /* @__PURE__ */ new Map());
     r(this, "outcomingEdges", /* @__PURE__ */ new Map());
     r(this, "cycleEdges", /* @__PURE__ */ new Map());
-    r(this, "elementPorts", new de());
+    r(this, "elementPorts", new he());
     r(this, "afterNodeAddedEmitter");
     r(this, "onAfterNodeAdded");
     r(this, "afterNodeUpdatedEmitter");
@@ -1386,7 +648,7 @@ class ce {
       priority: e.priority,
       ports: o
     };
-    this.nodes.set(e.id, i), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, i), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -1394,12 +656,17 @@ class ce {
   getNode(e) {
     return this.nodes.get(e);
   }
+  getElementNodeId(e) {
+    return this.nodesElementsMap.get(e);
+  }
   updateNode(e, o) {
     const i = this.nodes.get(e);
     i.x = o.x ?? i.x, i.y = o.y ?? i.y, i.centerFn = o.centerFn ?? i.centerFn, o.priority !== void 0 && (i.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
-    this.beforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
+    this.beforeNodeRemovedEmitter.emit(e);
+    const o = this.nodes.get(e);
+    this.nodesElementsMap.delete(o.element), this.nodes.delete(e);
   }
   addPort(e) {
     this.ports.set(e.id, {
@@ -1457,7 +724,7 @@ class ce {
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(e) {
     return Array.from(this.incomingEdges.get(e));
@@ -1516,19 +783,19 @@ class ce {
     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 te = (t) => ({
+const K = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), oe = {
+}), Q = {
   scale: 1,
   x: 0,
   y: 0
 };
-class ze {
+class Ae {
   constructor() {
-    r(this, "viewportMatrix", oe);
-    r(this, "contentMatrix", oe);
+    r(this, "viewportMatrix", Q);
+    r(this, "contentMatrix", Q);
     r(this, "afterUpdateEmitter");
     r(this, "onAfterUpdated");
     r(this, "beforeUpdateEmitter");
@@ -1546,17 +813,17 @@ class ze {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = te(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = K(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 = te(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = K(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class z {
+class F {
   constructor(e) {
     r(this, "elementToNodeId", /* @__PURE__ */ new Map());
     r(this, "nodesResizeObserver");
@@ -1582,37 +849,37 @@ class z {
     }), 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 z(e);
+    new F(e);
   }
   handleNodeResize(e) {
     const o = this.elementToNodeId.get(e);
     this.canvas.updateNode(o);
   }
 }
-const Oe = (t) => {
+const Ee = (t) => {
   var g, y, p, f, A, E;
   const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
   }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), i = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
+  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (m) => m.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
   return {
     freezePriority: s,
     dragCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (b) => b.button === 0,
+    mouseUpEventVerifier: a !== void 0 ? a : (m) => m.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: o,
     onNodeDragFinished: i
   };
-}, Xe = (t, e, o) => {
+}, 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) => {
+}, Se = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, M = (t, e, o, i) => xe(e, o, i) && Se(t, o, i), B = (t, e) => {
   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 {
+class k {
   constructor(e, o, i, s) {
     r(this, "grabbedNodeId", null);
     r(this, "maxNodePriority", 0);
@@ -1719,10 +986,10 @@ class O {
       this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
     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);
+    this.canvas = e, this.element = o, this.window = i, this.config = Ee(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s) {
-    new O(e, o, i, s);
+    new k(e, o, i, s);
   }
   dragNode(e, o, i) {
     const s = this.graph.getNode(e);
@@ -1781,7 +1048,7 @@ class O {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
 }
-const He = (t) => {
+const me = (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;
@@ -1791,7 +1058,7 @@ const He = (t) => {
     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 };
   };
-}, je = (t) => {
+}, be = (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;
@@ -1812,7 +1079,7 @@ const He = (t) => {
       y: l
     };
   };
-}, Ge = (t) => (e) => t.reduce(
+}, Te = (t) => (e) => t.reduce(
   (o, i) => i({
     prevTransform: e.prevTransform,
     nextTransform: o,
@@ -1820,35 +1087,35 @@ const He = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), re = (t) => {
+), _ = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return je({
+      return be({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return He({
+      return me({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Ze = (t) => {
-  var f, A, E, b, T, m, D, L, j, G, Z, J;
+}, Pe = (t) => {
+  var f, A, E, m, T, b, D, L, j, G, Z, J;
   const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, i = t == null ? void 0 : t.transformPreprocessor;
   let s;
-  i !== void 0 ? Array.isArray(i) ? s = Ge(
+  i !== void 0 ? Array.isArray(i) ? s = Te(
     i.map(
-      (P) => re(P)
+      (P) => _(P)
     )
-  ) : s = re(i) : s = (P) => P.nextTransform;
+  ) : s = _(i) : s = (P) => P.nextTransform;
   const h = ((A = t == null ? void 0 : t.shift) == null ? void 0 : A.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), d = ((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;
+  }), d = ((m = t == null ? void 0 : t.events) == null ? void 0 : m.onTransformChange) ?? (() => {
+  }), c = (T = t == null ? void 0 : t.shift) == null ? void 0 : T.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (b = t == null ? void 0 : t.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, y = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, p = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
     onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
@@ -1868,11 +1135,11 @@ const He = (t) => {
     onResizeTransformFinished: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Je = (t, e, o) => ({
+}, Ne = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), Ke = (t, e, o, i) => ({
+}), Me = (t, e, o, i) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
   y: t.scale * (1 - e) * i + t.y
@@ -1895,7 +1162,7 @@ const He = (t) => {
     touches: e
   };
 };
-class U {
+class I {
   constructor(e, o, i, s) {
     r(this, "viewport");
     r(this, "prevTouches", null);
@@ -1984,7 +1251,7 @@ class U {
     });
     this.canvas = e, this.element = o, this.window = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.config = Ze(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.config = Pe(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
@@ -1993,7 +1260,7 @@ class U {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s) {
-    new U(
+    new I(
       e,
       o,
       i,
@@ -2001,7 +1268,7 @@ class U {
     );
   }
   moveViewport(e, o) {
-    const i = this.viewport.getViewportMatrix(), s = Je(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
+    const i = this.viewport.getViewportMatrix(), s = Ne(i, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.config.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
@@ -2010,7 +1277,7 @@ class U {
     this.performTransform(d);
   }
   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({
+    const s = this.canvas.viewport.getViewportMatrix(), h = Me(s, e, o, i), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.config.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: n,
@@ -2040,7 +1307,7 @@ class U {
     this.transformInProgress = !1, this.config.onTransformFinished();
   }
 }
-class X {
+class z {
   constructor(e, o, i, s, h, n) {
     r(this, "canvasResizeObserver");
     r(this, "nodeHorizontal");
@@ -2072,16 +1339,16 @@ class X {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     r(this, "userTransformInProgress", !1);
-    var p, f, A, E, b;
+    var p, f, A, E, m;
     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();
+      const b = T[0];
+      this.viewportWidth = b.contentRect.width, this.viewportHeight = b.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
     const d = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onResizeTransformStarted) ?? (() => {
     }), c = ((f = s == null ? void 0 : s.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
     }), a = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onTransformChange) ?? (() => {
     }), l = ((E = s == null ? void 0 : s.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-    }), g = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
+    }), g = ((m = s == null ? void 0 : s.events) == null ? void 0 : m.onTransformFinished) ?? (() => {
     }), y = {
       ...s,
       events: {
@@ -2105,7 +1372,7 @@ class X {
         }
       }
     };
-    U.configure(
+    I.configure(
       e,
       this.element,
       this.window,
@@ -2113,7 +1380,7 @@ class X {
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i, s, h, n) {
-    new X(
+    new z(
       e,
       o,
       i,
@@ -2136,29 +1403,29 @@ class X {
     this.trigger.emit({ x: i, y: s, width: h, height: n });
   }
 }
-const Qe = () => {
+const De = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.position = "absolute", t.style.inset = "0", t;
-}, _e = () => {
+}, Le = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return t.setAttribute("fill", "url(#pattern)"), t;
-}, qe = () => {
+}, Ve = () => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return t.setAttribute("id", "pattern"), t;
-}, et = (t, e) => {
+}, Re = (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;
-}, tt = (t) => t instanceof SVGElement ? t : et(
+}, Be = (t) => t instanceof SVGElement ? t : Re(
   (t == null ? void 0 : t.radius) ?? 1.5,
   (t == null ? void 0 : t.color) ?? "#d8d8d8"
-), 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 ?? {});
+), Ie = (t) => {
+  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, i = (e == null ? void 0 : e.height) ?? 25, s = Be(t.renderer ?? {});
   return {
     tileWidth: o,
     tileHeight: i,
@@ -2166,11 +1433,11 @@ const Qe = () => {
     maxViewportScale: t.maxViewportScale ?? 10
   };
 };
-class Y {
+class O {
   constructor(e, o, i) {
-    r(this, "svg", Qe());
-    r(this, "patternRenderingRectangle", _e());
-    r(this, "pattern", qe());
+    r(this, "svg", De());
+    r(this, "patternRenderingRectangle", Le());
+    r(this, "pattern", Ve());
     r(this, "patternContent");
     r(this, "tileWidth");
     r(this, "tileHeight");
@@ -2194,7 +1461,7 @@ class Y {
       ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     this.canvas = e, this.host = i;
-    const s = ot(o);
+    const s = Ie(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);
@@ -2202,14 +1469,14 @@ class Y {
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.host), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated(), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, o, i) {
-    new Y(e, o, i);
+    new O(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 rt = (t) => {
+const Ue = (t) => {
   var d, c, a;
   const e = () => "direct", o = (l) => l, i = (l) => l.button === 0, s = () => {
   }, h = () => {
@@ -2226,11 +1493,11 @@ const rt = (t) => {
     dragPortDirection: t.dragPortDirection ?? void 0
   };
 };
-class H {
+class X {
   constructor(e, o, i, s, h, n) {
     r(this, "config");
     r(this, "overlayCanvas");
-    r(this, "ports", new de());
+    r(this, "ports", new he());
     r(this, "staticOverlayPortId", "static");
     r(this, "draggingOverlayPortId", "dragging");
     r(this, "staticPortId", null);
@@ -2310,13 +1577,13 @@ class H {
     r(this, "onEdgeCreated", (e) => {
       this.config.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = rt(n);
-    const d = new ce(), c = new ie(
+    this.canvas = e, this.overlayLayer = o, this.viewportStore = i, this.window = s, this.config = Ue(n);
+    const d = new de(), c = new ie(
       d,
       this.viewportStore,
       this.overlayLayer
     );
-    this.overlayCanvas = new he(
+    this.overlayCanvas = new ne(
       this.overlayLayer,
       d,
       this.viewportStore,
@@ -2325,7 +1592,7 @@ class 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, i, s, h, n) {
-    new H(
+    new X(
       e,
       o,
       i,
@@ -2334,130 +1601,871 @@ class H {
       n
     );
   }
-  grabPort(e, o) {
-    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
-    }), y = N(l, {
-      x: o.x - a.x,
-      y: o.y - a.y
-    }), p = {
-      overlayId: this.staticOverlayPortId,
-      portCoords: g,
-      portDirection: s.direction
-    }, f = {
-      overlayId: this.draggingOverlayPortId,
-      portCoords: y,
-      portDirection: this.config.dragPortDirection
+  grabPort(e, o) {
+    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
+    }), y = N(l, {
+      x: o.x - a.x,
+      y: o.y - a.y
+    }), p = {
+      overlayId: this.staticOverlayPortId,
+      portCoords: g,
+      portDirection: s.direction
+    }, f = {
+      overlayId: this.draggingOverlayPortId,
+      portCoords: y,
+      portDirection: this.config.dragPortDirection
+    };
+    this.isDirect = h === "direct";
+    const A = this.isDirect ? p : f, E = this.isDirect ? f : p;
+    this.createOverlayGraph(A, E);
+  }
+  hookPortEvents(e) {
+    e.addEventListener("mousedown", this.onPortMouseDown, {
+      passive: !0
+    }), e.addEventListener("touchstart", this.onPortTouchStart, {
+      passive: !0
+    });
+  }
+  unhookPortEvents(e) {
+    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
+  }
+  stopMouseDrag() {
+    this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
+  }
+  stopTouchDrag() {
+    this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+  }
+  resetDragState() {
+    this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
+  }
+  createOverlayGraph(e, o) {
+    const i = this.createAddNodeRequest(e);
+    this.overlayCanvas.addNode(i);
+    const s = this.createAddNodeRequest(o);
+    this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
+      from: e.overlayId,
+      to: o.overlayId
+    });
+  }
+  createAddNodeRequest(e) {
+    const o = document.createElement("div");
+    return {
+      id: e.overlayId,
+      element: o,
+      x: e.portCoords.x,
+      y: e.portCoords.y,
+      ports: [
+        {
+          id: e.overlayId,
+          element: o,
+          direction: e.portDirection
+        }
+      ]
+    };
+  }
+  tryCreateConnection(e) {
+    const o = this.findPortAtPoint(e);
+    if (o === null) {
+      this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
+      return;
+    }
+    const i = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: i, to: s }, n = this.config.connectionPreprocessor(h);
+    n !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(h);
+  }
+  moveDraggingNode(e) {
+    const o = this.overlayLayer.getBoundingClientRect(), i = {
+      x: e.x - o.x,
+      y: e.y - o.y
+    }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
+    this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
+      x: h.x,
+      y: h.y
+    });
+  }
+  findPortAtPoint(e) {
+    const o = document.elementsFromPoint(e.x, e.y);
+    for (const i of o) {
+      const s = this.findPortAtElement(i);
+      if (s !== null)
+        return s;
+    }
+    return null;
+  }
+  findPortAtElement(e) {
+    let o = e, i = null;
+    for (; o !== null && (i = this.ports.getMultiBySingle(o)[0] ?? null, i === null); )
+      o = o.parentElement;
+    return i;
+  }
+  isPortConnectionAllowed(e) {
+    const o = this.ports.getMultiBySingle(e)[0];
+    return this.config.connectionTypeResolver(o) !== null;
+  }
+}
+const Ce = () => {
+  const t = document.createElement("div");
+  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
+}, W = () => {
+  const t = document.createElement("div");
+  return t.style.position = "absolute", t.style.inset = "0", t;
+};
+class We {
+  constructor(e) {
+    r(this, "background", W());
+    r(this, "main", W());
+    r(this, "overlay", W());
+    r(this, "host", Ce());
+    this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
+  }
+  destroy() {
+    this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
+  }
+}
+const $e = (t, e) => ({
+  x: t / 2,
+  y: e / 2
+}), $ = (t) => () => t, q = $(0), Fe = () => {
+  let t = 0;
+  return () => t++;
+}, ke = (t, e) => {
+  let o = q, i = q;
+  const s = Fe();
+  return t === "incremental" && (o = s), e === "incremental" && (i = s), typeof t == "number" && (o = $(t)), typeof e == "number" && (i = $(e)), typeof t == "function" && (o = t), typeof e == "function" && (i = e), {
+    nodesPriorityFn: o,
+    edgesPriorityFn: i
+  };
+}, v = (t, e, o) => ({
+  x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
+  y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
+}), w = {
+  x: 0,
+  y: 0
+}, ze = (t) => {
+  const e = v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ), o = v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ), 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 ${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}`;
+}, Oe = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ) : t.to, i = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = v(
+    { x: i, y: w.y },
+    t.fromVector,
+    w
+  ), a = {
+    x: c.x + n,
+    y: c.y + d
+  }, l = v(
+    { x: t.to.x - i, y: t.to.y },
+    t.toVector,
+    t.to
+  ), g = {
+    x: l.x + n,
+    y: l.y + d
+  }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, p = {
+    x: c.x + t.curvature * t.fromVector.x,
+    y: c.y + t.curvature * t.fromVector.y
+  }, f = {
+    x: l.x - t.curvature * t.toVector.x,
+    y: l.y - t.curvature * t.toVector.y
+  }, A = {
+    x: c.x + n,
+    y: c.y + d
+  }, E = {
+    x: l.x + n,
+    y: l.y + d
+  };
+  return [
+    `M ${e.x} ${e.y}`,
+    `L ${c.x} ${c.y}`,
+    `C ${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(" ");
+}, 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 i = t.length - 1;
+    let s = 0, h = 0, n = 0;
+    t.forEach((d, c) => {
+      let a = 0, l = 0, g = 0;
+      const y = c > 0, p = c < i, f = y && p;
+      if (y && (a = -s, l = -h, g = n), p) {
+        const L = t[c + 1];
+        s = L.x - d.x, h = L.y - d.y, n = Math.sqrt(s * s + h * h);
+      }
+      const E = n !== 0 ? Math.min((f ? e : 0) / n, c < i - 1 ? 0.5 : 1) : 0, m = f ? { x: d.x + s * E, y: d.y + h * E } : d, b = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = f ? { x: d.x + a * b, y: d.y + l * b } : d;
+      c > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
+        `C ${d.x} ${d.y} ${d.x} ${d.y} ${m.x} ${m.y}`
+      );
+    });
+  }
+  return o.join(" ");
+}, Xe = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
+    { x: s, y: w.y },
+    t.fromVector,
+    w
+  ), n = v(
+    { x: t.to.x - s, y: t.to.y },
+    t.toVector,
+    t.to
+  ), d = Math.max((h.x + n.x) / 2, i), c = t.to.y / 2, a = {
+    x: t.flipX > 0 ? d : -i,
+    y: h.y
+  }, l = { x: a.x, y: c }, g = {
+    x: t.flipX > 0 ? t.to.x - d : t.to.x + i,
+    y: n.y
+  }, y = { x: g.x, y: c };
+  return V(
+    [e, h, a, l, y, g, n, o],
+    t.roundness
+  );
+}, Y = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
+    { x: i, y: w.y },
+    t.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 - i, y: t.to.y },
+    t.toVector,
+    t.to
+  ), g = { x: l.x + d, y: l.y + c };
+  return V(
+    [e, s, a, g, l, o],
+    t.roundness
+  );
+}, Ye = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = v(
+    { x: i, y: w.y },
+    t.fromVector,
+    w
+  ), h = v(
+    { x: t.to.x - i, y: t.to.y },
+    t.toVector,
+    t.to
+  );
+  return V([e, s, h, o], t.roundness);
+}, He = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVector,
+    w
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVector,
+    t.to
+  ) : t.to, i = t.arrowLength + t.arrowOffset, s = i - t.roundness, h = v(
+    { x: s, y: w.y },
+    t.fromVector,
+    w
+  ), n = v(
+    { x: t.to.x - s, y: t.to.y },
+    t.toVector,
+    t.to
+  ), d = Math.max((h.y + n.y) / 2, i), c = t.to.x / 2, a = {
+    x: h.x,
+    y: t.flipY > 0 ? d : -i
+  }, l = { x: c, y: a.y }, g = {
+    x: n.x,
+    y: t.flipY > 0 ? t.to.y - d : t.to.y + i
+  }, y = { x: c, y: g.y };
+  return V(
+    [e, h, a, l, y, g, n, o],
+    t.roundness
+  );
+}, H = (t) => {
+  const e = t.arrowOffset, o = t.side, i = t.arrowLength + e, s = i + 2 * o, n = [
+    { x: t.arrowLength, y: w.y },
+    { x: i, y: w.y },
+    { x: i, y: t.side },
+    { x: s, y: t.side },
+    { x: s, y: -t.side },
+    { x: i, y: -t.side },
+    { x: i, y: w.y },
+    { x: t.arrowLength, y: w.y }
+  ].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}${V(n, t.roundness)}`;
+}, je = (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 }
+  ].map(
+    (g) => v(g, t.fromVector, w)
+  ), a = [
+    `M ${c[0].x} ${c[0].y}`,
+    `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
+    `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
+    `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
+  ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
+}, u = Object.freeze({
+  color: "#777777",
+  width: 1,
+  arrowLength: 15,
+  arrowWidth: 4,
+  arrowOffset: 15,
+  hasSourceArrow: !1,
+  hasTargetArrow: !1,
+  cycleRadius: 30,
+  cycleSquareSide: 30,
+  roundness: 10,
+  detourDistance: 100,
+  detourDirection: -Math.PI / 2,
+  detourDirectionVertical: 0,
+  smallCycleRadius: 15,
+  curvature: 90,
+  interactiveWidth: 10
+}), ee = (t, e, o, i) => {
+  const h = [
+    w,
+    { 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} Z`;
+}, te = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("fill", t), e;
+}, Ge = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return t.style.transformOrigin = "50% 50%", t;
+}, Ze = (t, e) => {
+  const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
+}, Je = (t, e) => {
+  const o = {
+    x: t.x + t.width / 2,
+    y: t.y + t.height / 2
+  }, i = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, s = Math.min(o.x, i.x), h = Math.min(o.y, i.y), n = Math.abs(i.x - o.x), d = Math.abs(i.y - o.y), c = o.x <= i.x ? 1 : -1, a = o.y <= i.y ? 1 : -1;
+  return {
+    x: s,
+    y: h,
+    width: n,
+    height: d,
+    flipX: c,
+    flipY: a
+  };
+}, Ke = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
+}, oe = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) });
+class U {
+  constructor(e) {
+    r(this, "svg", Ke());
+    r(this, "group", Ge());
+    r(this, "line");
+    r(this, "sourceArrow", null);
+    r(this, "targetArrow", null);
+    this.params = e, this.svg.appendChild(this.group), this.line = Ze(e.color, e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = te(e.color), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = te(e.color), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: o, y: i, width: s, height: h, flipX: n, flipY: d } = Je(
+      e.from,
+      e.to
+    );
+    this.svg.style.transform = `translate(${o}px, ${i}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    const c = oe(
+      e.from.direction,
+      n,
+      d
+    ), a = oe(
+      e.to.direction,
+      n,
+      d
+    ), l = {
+      x: s,
+      y: h
     };
-    this.isDirect = h === "direct";
-    const A = this.isDirect ? p : f, E = this.isDirect ? f : p;
-    this.createOverlayGraph(A, E);
-  }
-  hookPortEvents(e) {
-    e.addEventListener("mousedown", this.onPortMouseDown, {
-      passive: !0
-    }), e.addEventListener("touchstart", this.onPortTouchStart, {
-      passive: !0
-    });
-  }
-  unhookPortEvents(e) {
-    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
-  }
-  stopMouseDrag() {
-    this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-  }
-  stopTouchDrag() {
-    this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+    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
+    );
+    if (this.line.setAttribute("d", f), this.sourceArrow) {
+      const A = ee(
+        c,
+        w,
+        this.params.arrowLength,
+        this.params.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", A);
+    }
+    if (this.targetArrow) {
+      const A = ee(
+        g,
+        l,
+        y,
+        this.params.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", A);
+    }
   }
-  resetDragState() {
-    this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
+}
+class Qe {
+  constructor(e) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "arrowLength");
+    r(this, "arrowWidth");
+    r(this, "curvature");
+    r(this, "portCycleRadius");
+    r(this, "portCycleSmallRadius");
+    r(this, "detourDirection");
+    r(this, "detourDistance");
+    r(this, "hasSourceArrow");
+    r(this, "hasTargetArrow");
+    r(this, "lineShape");
+    r(this, "createCyclePath", (e) => je({
+      fromVector: e,
+      radius: this.portCycleRadius,
+      smallRadius: this.portCycleSmallRadius,
+      arrowLength: this.arrowLength,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createDetourPath", (e, o, i, s, h) => Oe({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipX: s,
+      flipY: h,
+      arrowLength: this.arrowLength,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createLinePath", (e, o, i) => ze({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      arrowLength: this.arrowLength,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new U({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
   }
-  createOverlayGraph(e, o) {
-    const i = this.createAddNodeRequest(e);
-    this.overlayCanvas.addNode(i);
-    const s = this.createAddNodeRequest(o);
-    this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
-      from: e.overlayId,
-      to: o.overlayId
-    });
+  render(e) {
+    this.lineShape.render(e);
   }
-  createAddNodeRequest(e) {
-    const o = document.createElement("div");
-    return {
-      id: e.overlayId,
-      element: o,
-      x: e.portCoords.x,
-      y: e.portCoords.y,
-      ports: [
-        {
-          id: e.overlayId,
-          element: o,
-          direction: e.portDirection
-        }
-      ]
-    };
+}
+class _e {
+  constructor(e) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "arrowLength");
+    r(this, "arrowWidth");
+    r(this, "arrowOffset");
+    r(this, "roundness");
+    r(this, "cycleSquareSide");
+    r(this, "detourDirection");
+    r(this, "detourDistance");
+    r(this, "hasSourceArrow");
+    r(this, "hasTargetArrow");
+    r(this, "lineShape");
+    r(this, "createCyclePath", (e) => H({
+      fromVector: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipX: s,
+      flipY: h,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createLinePath", (e, o, i, s) => Xe({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipX: s,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new U({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
   }
-  tryCreateConnection(e) {
-    const o = this.findPortAtPoint(e);
-    if (o === null) {
-      this.config.onEdgeCreationInterrupted(this.staticPortId, this.isDirect);
-      return;
-    }
-    const i = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: i, to: s }, n = this.config.connectionPreprocessor(h);
-    n !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.config.onEdgeCreationPrevented(h);
+  render(e) {
+    this.lineShape.render(e);
   }
-  moveDraggingNode(e) {
-    const o = this.overlayLayer.getBoundingClientRect(), i = {
-      x: e.x - o.x,
-      y: e.y - o.y
-    }, s = this.canvas.viewport.getViewportMatrix(), h = N(s, i);
-    this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
-      x: h.x,
-      y: h.y
-    });
+}
+class qe {
+  constructor(e) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "arrowLength");
+    r(this, "arrowWidth");
+    r(this, "arrowOffset");
+    r(this, "roundness");
+    r(this, "cycleSquareSide");
+    r(this, "detourDirection");
+    r(this, "detourDistance");
+    r(this, "hasSourceArrow");
+    r(this, "hasTargetArrow");
+    r(this, "lineShape");
+    r(this, "createCyclePath", (e) => H({
+      fromVector: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipX: s,
+      flipY: h,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createLinePath", (e, o, i) => Ye({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new U({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
   }
-  findPortAtPoint(e) {
-    const o = document.elementsFromPoint(e.x, e.y);
-    for (const i of o) {
-      const s = this.findPortAtElement(i);
-      if (s !== null)
-        return s;
-    }
-    return null;
+  render(e) {
+    this.lineShape.render(e);
   }
-  findPortAtElement(e) {
-    let o = e, i = null;
-    for (; o !== null && (i = this.ports.getMultiBySingle(o)[0] ?? null, i === null); )
-      o = o.parentElement;
-    return i;
+}
+class et {
+  constructor(e) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "arrowLength");
+    r(this, "arrowWidth");
+    r(this, "arrowOffset");
+    r(this, "roundness");
+    r(this, "cycleSquareSide");
+    r(this, "detourDirection");
+    r(this, "detourDistance");
+    r(this, "hasSourceArrow");
+    r(this, "hasTargetArrow");
+    r(this, "lineShape");
+    r(this, "createCyclePath", (e) => H({
+      fromVector: e,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createDetourPath", (e, o, i, s, h) => Y({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipX: s,
+      flipY: h,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    r(this, "createLinePath", (e, o, i, s, h) => He({
+      to: i,
+      fromVector: e,
+      toVector: o,
+      flipY: h,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.lineShape = new U({
+      color: (e == null ? void 0 : e.color) ?? u.color,
+      width: (e == null ? void 0 : e.width) ?? u.width,
+      arrowLength: this.arrowLength,
+      arrowWidth: this.arrowWidth,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow,
+      createCyclePath: this.createCyclePath,
+      createDetourPath: this.createDetourPath,
+      createLinePath: this.createLinePath
+    }), this.svg = this.lineShape.svg, this.group = this.lineShape.group, this.line = this.lineShape.line, this.sourceArrow = this.lineShape.sourceArrow, this.targetArrow = this.lineShape.targetArrow;
   }
-  isPortConnectionAllowed(e) {
-    const o = this.ports.getMultiBySingle(e)[0];
-    return this.config.connectionTypeResolver(o) !== null;
+  render(e) {
+    this.lineShape.render(e);
   }
 }
-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;
+const tt = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return t.style.pointerEvents = "auto", t.style.cursor = "pointer", t;
+}, ot = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${t}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
+}, re = (t) => {
+  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 st {
+class rt extends Error {
   constructor(e) {
-    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);
+    super(e), this.name = "InteractiveEdgeError";
   }
-  destroy() {
-    this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
+}
+class ce {
+  constructor(e, o) {
+    r(this, "svg");
+    r(this, "group");
+    r(this, "line");
+    r(this, "sourceArrow");
+    r(this, "targetArrow");
+    r(this, "handle", tt());
+    r(this, "interactiveLine");
+    r(this, "interactiveSourceArrow", null);
+    r(this, "interactiveTargetArrow", null);
+    if (this.structuredEdge = e, e instanceof ce)
+      throw new rt(
+        "interactive edge can be configured only once"
+      );
+    this.svg = this.structuredEdge.svg, this.group = this.structuredEdge.group, this.line = this.structuredEdge.line, this.sourceArrow = this.structuredEdge.sourceArrow, this.targetArrow = this.structuredEdge.targetArrow;
+    const i = (o == null ? void 0 : o.width) ?? u.interactiveWidth;
+    this.interactiveLine = ot(i), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = re(i), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = re(i), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle);
+  }
+  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 it = (t) => {
+  if (typeof t == "function")
+    return t;
+  switch (t == null ? void 0 : t.type) {
+    case "straight":
+      return () => new qe({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
+      });
+    case "horizontal":
+      return () => new _e({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
+      });
+    case "vertical":
+      return () => new et({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
+      });
+    default:
+      return () => new Qe({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleRadius: t.cycleRadius,
+        smallCycleRadius: t.smallCycleRadius,
+        curvature: t.curvature,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
+      });
+  }
+}, st = (t) => {
+  var o, i, s, h, n;
+  const e = ke(
+    (o = t.nodes) == null ? void 0 : o.priority,
+    (i = t.edges) == null ? void 0 : i.priority
+  );
+  return {
+    nodes: {
+      centerFn: ((s = t.nodes) == null ? void 0 : s.centerFn) ?? $e,
+      priorityFn: e.nodesPriorityFn
+    },
+    ports: {
+      direction: ((h = t.ports) == null ? void 0 : h.direction) ?? 0
+    },
+    edges: {
+      shapeFactory: it(((n = t.edges) == null ? void 0 : n.shape) ?? {}),
+      priorityFn: e.edgesPriorityFn
+    }
+  };
+};
 class ht {
   constructor(e) {
     r(this, "element", null);
@@ -2542,51 +2550,51 @@ class ht {
       );
     let e = this.boxRenderingTrigger;
     this.virtualScrollConfig !== void 0 && e === void 0 && (e = new se());
-    const o = new ce(), i = new ze(), s = new st(this.element);
+    const o = new de(), i = new Ae(), s = new We(this.element);
     let h = new ie(
       o,
       i,
       s.main
     );
     e !== void 0 && (h = new ve(h, o, e));
-    const n = new he(
+    const n = st(this.canvasDefaults), d = new ne(
       this.element,
       o,
       i,
       h,
-      this.canvasDefaults
-    ), d = () => {
-      s.destroy(), n.onBeforeDestroy.unsubscribe(d);
+      n
+    ), c = () => {
+      s.destroy(), d.onBeforeDestroy.unsubscribe(c);
     };
-    return n.onBeforeDestroy.subscribe(d), this.hasBackground && Y.configure(
-      n,
+    return d.onBeforeDestroy.subscribe(c), this.hasBackground && O.configure(
+      d,
       this.backgroundConfig,
       s.background
-    ), this.hasResizeReactiveNodes && z.configure(n), this.hasDraggableNode && O.configure(
-      n,
+    ), this.hasResizeReactiveNodes && F.configure(d), this.hasDraggableNode && k.configure(
+      d,
       s.main,
       this.window,
       this.dragConfig
-    ), this.hasUserConnectablePorts && H.configure(
-      n,
+    ), this.hasUserConnectablePorts && X.configure(
+      d,
       s.overlay,
       i,
       this.window,
-      this.canvasDefaults,
-      this.connectablePortsConfig
-    ), this.virtualScrollConfig !== void 0 ? X.configure(
       n,
+      this.connectablePortsConfig
+    ), this.virtualScrollConfig !== void 0 ? z.configure(
+      d,
       s.main,
       this.window,
       this.transformConfig,
       e,
       this.virtualScrollConfig
-    ) : this.hasTransformableViewport && U.configure(
-      n,
+    ) : this.hasTransformableViewport && I.configure(
+      d,
       s.main,
       this.window,
       this.transformConfig
-    ), this.reset(), n;
+    ), this.reset(), d;
   }
   /**
    * @deprecated
@@ -2597,14 +2605,14 @@ class ht {
   }
 }
 export {
-  Re as BezierEdgeShape,
+  Qe as BezierEdgeShape,
   ht as CanvasBuilder,
   se as EventSubject,
-  Be as HorizontalEdgeShape,
+  _e as HorizontalEdgeShape,
   S as HtmlGraphError,
-  $e as InteractiveEdgeError,
-  ne as InteractiveEdgeShape,
-  I as LineEdgeShape,
-  Ie as StraightEdgeShape,
-  Ue as VerticalEdgeShape
+  rt as InteractiveEdgeError,
+  ce as InteractiveEdgeShape,
+  U as LineEdgeShape,
+  qe as StraightEdgeShape,
+  et as VerticalEdgeShape
 };