@html-graph/html-graph 0.0.61 → 0.1.1

package/dist/main.js

@@ -1,764 +1,1076 @@
-var _ = Object.defineProperty;
-var J = (r, e, t) => e in r ? _(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var n = (r, e, t) => J(r, typeof e != "symbol" ? e + "" : e, t);
-const Y = (r) => ({
-  scale: 1 / r.scale,
-  dx: -r.dx / r.scale,
-  dy: -r.dy / r.scale
-}), X = {
-  scale: 1,
-  dx: 0,
-  dy: 0
-};
-class Q {
-  constructor() {
-    n(this, "viewportMatrix", X);
-    n(this, "contentMatrix", X);
-  }
-  getViewportMatrix() {
-    return this.viewportMatrix;
-  }
-  getContentMatrix() {
-    return this.contentMatrix;
-  }
-  patchViewportMatrix(e) {
-    this.viewportMatrix = {
-      scale: e.scale ?? this.viewportMatrix.scale,
-      dx: e.dx ?? this.viewportMatrix.dx,
-      dy: e.dy ?? this.viewportMatrix.dy
-    }, this.contentMatrix = Y(this.viewportMatrix);
+var U = Object.defineProperty;
+var K = (e, t, o) => t in e ? U(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var s = (e, t, o) => K(e, typeof t != "symbol" ? t + "" : t, o);
+const _ = (e, t) => ({
+  x: e / 2,
+  y: t / 2
+}), f = (e, t, o) => ({
+  x: t.x * e.x - t.y * e.y + ((1 - t.x) * o.x + t.y * o.y),
+  y: t.y * e.x + t.x * e.y + ((1 - t.x) * o.y - t.y * o.x)
+}), A = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), u = {
+  x: 0,
+  y: 0
+}, E = (e, t, o, r) => {
+  const n = [
+    u,
+    { x: o, y: r },
+    { x: o, y: -r }
+  ].map((l) => f(l, e, u)).map((l) => ({ x: l.x + t.x, y: l.y + t.y })), d = `M ${n[0].x} ${n[0].y}`, c = `L ${n[1].x} ${n[1].y}`, h = `L ${n[2].x} ${n[2].y}`;
+  return `${d} ${c} ${h}`;
+}, N = (e, t) => {
+  const o = [];
+  if (e.length > 0 && o.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && o.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
+    const r = e.length - 1;
+    let i = 0, n = 0, d = 0;
+    e.forEach((c, h) => {
+      let l = 0, a = 0, w = 0;
+      const y = h > 0, x = h < r, v = y && x;
+      if (y && (l = -i, a = -n, w = d), x) {
+        const z = e[h + 1];
+        i = z.x - c.x, n = z.y - c.y, d = Math.sqrt(i * i + n * n);
+      }
+      const M = d !== 0 ? Math.min((v ? t : 0) / d, h < r - 1 ? 0.5 : 1) : 0, X = v ? { x: c.x + i * M, y: c.y + n * M } : c, k = w !== 0 ? Math.min((v ? t : 0) / w, h > 1 ? 0.5 : 1) : 0, B = v ? { x: c.x + l * k, y: c.y + a * k } : c;
+      h > 0 && o.push(`L ${B.x} ${B.y}`), v && o.push(
+        `C ${c.x} ${c.y} ${c.x} ${c.y} ${X.x} ${X.y}`
+      );
+    });
   }
-  patchContentMatrix(e) {
-    this.contentMatrix = {
-      scale: e.scale ?? this.contentMatrix.scale,
-      dx: e.dx ?? this.contentMatrix.dx,
-      dy: e.dy ?? this.contentMatrix.dy
-    }, this.viewportMatrix = Y(this.contentMatrix);
+  return o.join(" ");
+}, I = () => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e;
+}, $ = () => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return e.style.transformOrigin = "50% 50%", e;
+}, m = (e, t) => {
+  const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return o.setAttribute("stroke", e), o.setAttribute("stroke-width", `${t}`), o.setAttribute("fill", "none"), o;
+}, T = (e) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return t.setAttribute("fill", e), t;
+}, p = (e, t) => {
+  const o = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, r = {
+    x: t.x + t.width / 2,
+    y: t.y + t.height / 2
+  }, i = Math.min(o.x, r.x), n = Math.min(o.y, r.y), d = Math.abs(r.x - o.x), c = Math.abs(r.y - o.y), h = o.x <= r.x ? 1 : -1, l = o.y <= r.y ? 1 : -1;
+  return {
+    x: i,
+    y: n,
+    width: d,
+    height: c,
+    flipX: h,
+    flipY: l
+  };
+}, J = (e) => {
+  const t = f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ), o = f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ), r = {
+    x: t.x + e.fromVect.x * e.curvature,
+    y: t.y + e.fromVect.y * e.curvature
+  }, i = {
+    x: o.x - e.toVect.x * e.curvature,
+    y: o.y - e.toVect.y * e.curvature
+  }, n = `M ${t.x} ${t.y} C ${r.x} ${r.y}, ${i.x} ${i.y}, ${o.x} ${o.y}`, d = e.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${t.x} ${t.y} `, c = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
+  return `${d}${n}${c}`;
+}, Q = (e) => {
+  const t = e.hasSourceArrow ? f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ) : u, o = e.hasTargetArrow ? f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ) : e.to, r = e.arrowLength, i = Math.cos(e.detourDirection) * e.detourDistance, n = Math.sin(e.detourDirection) * e.detourDistance, d = i * e.flipX, c = n * e.flipY, h = f(
+    { x: r, y: u.y },
+    e.fromVect,
+    u
+  ), l = {
+    x: h.x + d,
+    y: h.y + c
+  }, a = f(
+    { x: e.to.x - r, y: e.to.y },
+    e.toVect,
+    e.to
+  ), w = {
+    x: a.x + d,
+    y: a.y + c
+  }, y = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 }, x = {
+    x: h.x + e.curvature * e.fromVect.x,
+    y: h.y + e.curvature * e.fromVect.y
+  }, v = {
+    x: a.x - e.curvature * e.toVect.x,
+    y: a.y - e.curvature * e.toVect.y
+  }, b = {
+    x: h.x + d,
+    y: h.y + c
+  }, M = {
+    x: a.x + d,
+    y: a.y + c
+  };
+  return [
+    `M ${t.x} ${t.y}`,
+    `L ${h.x} ${h.y}`,
+    `C ${x.x} ${x.y} ${b.x} ${b.y} ${y.x} ${y.y}`,
+    `C ${M.x} ${M.y} ${v.x} ${v.y} ${a.x} ${a.y}`,
+    `L ${o.x} ${o.y}`
+  ].join(" ");
+}, Z = (e) => {
+  const t = e.hasSourceArrow ? f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ) : u, o = e.hasTargetArrow ? f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, n = f({ x: i, y: u.y }, e.fromVect, u), d = f(
+    { x: e.to.x - i, y: e.to.y },
+    e.toVect,
+    e.to
+  ), c = Math.max((n.x + d.x) / 2, r), h = e.to.y / 2, l = { x: e.flipX > 0 ? c : -r, y: n.y }, a = { x: l.x, y: h }, w = {
+    x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
+    y: d.y
+  }, y = { x: w.x, y: h };
+  return N(
+    [t, n, l, a, y, w, d, o],
+    e.roundness
+  );
+}, R = (e) => {
+  const t = e.hasSourceArrow ? f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ) : u, o = e.hasTargetArrow ? f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f(
+    { x: r, y: u.y },
+    e.fromVect,
+    u
+  ), n = Math.cos(e.detourDirection) * e.detourDistance, d = Math.sin(e.detourDirection) * e.detourDistance, c = n * e.flipX, h = d * e.flipY, l = { x: i.x + c, y: i.y + h }, a = f(
+    { x: e.to.x - r, y: e.to.y },
+    e.toVect,
+    e.to
+  ), w = { x: a.x + c, y: a.y + h };
+  return N(
+    [t, i, l, w, a, o],
+    e.roundness
+  );
+}, q = (e) => {
+  const t = e.hasSourceArrow ? f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ) : u, o = e.hasTargetArrow ? f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f({ x: r, y: u.y }, e.fromVect, u), n = f(
+    { x: e.to.x - r, y: e.to.y },
+    e.toVect,
+    e.to
+  );
+  return N([t, i, n, o], e.roundness);
+}, tt = (e) => {
+  const t = e.hasSourceArrow ? f(
+    { x: e.arrowLength, y: u.y },
+    e.fromVect,
+    u
+  ) : u, o = e.hasTargetArrow ? f(
+    { x: e.to.x - e.arrowLength, y: e.to.y },
+    e.toVect,
+    e.to
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, n = f({ x: i, y: u.y }, e.fromVect, u), d = f(
+    { x: e.to.x - i, y: e.to.y },
+    e.toVect,
+    e.to
+  ), c = Math.max((n.y + d.y) / 2, r), h = e.to.x / 2, l = { x: n.x, y: e.flipY > 0 ? c : -r }, a = { x: h, y: l.y }, w = {
+    x: d.x,
+    y: e.flipY > 0 ? e.to.y - c : e.to.y + r
+  }, y = { x: h, y: w.y };
+  return N(
+    [t, n, l, a, y, w, d, o],
+    e.roundness
+  );
+}, Y = (e) => {
+  const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, i = r + 2 * o, d = [
+    { x: e.arrowLength, y: u.y },
+    { x: r, y: u.y },
+    { x: r, y: e.side },
+    { x: i, y: e.side },
+    { x: i, y: -e.side },
+    { x: r, y: -e.side },
+    { x: r, y: u.y },
+    { x: e.arrowLength, y: u.y }
+  ].map(
+    (h) => f(h, e.fromVect, u)
+  ), c = `M ${u.x} ${u.y} L ${d[0].x} ${d[0].y} `;
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${N(d, e.roundness)}`;
+}, et = (e) => {
+  const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), i = t + o, n = e.arrowLength + r * (1 - o / i), d = t * o / i, h = [
+    { x: e.arrowLength, y: u.y },
+    { x: n, y: d },
+    { x: n, y: -d }
+  ].map((w) => f(w, e.fromVect, u)), l = [
+    `M ${h[0].x} ${h[0].y}`,
+    `A ${t} ${t} 0 0 1 ${h[1].x} ${h[1].y}`,
+    `A ${o} ${o} 0 1 0 ${h[2].x} ${h[2].y}`,
+    `A ${t} ${t} 0 0 1 ${h[0].x} ${h[0].y}`
+  ].join(" "), a = `M 0 0 L ${h[0].x} ${h[0].y} `;
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : a}${l}`;
+}, g = Object.freeze({
+  color: "#5c5c5c",
+  width: 1,
+  arrowLength: 15,
+  arrowWidth: 4,
+  arrowOffset: 15,
+  hasSourceArrow: !1,
+  hasTargetArrow: !1,
+  cycleRadius: 30,
+  cycleSquareSide: 30,
+  roundness: 10,
+  detourDistance: 100,
+  detourDirection: -Math.PI / 2,
+  smallCycleRadius: 15,
+  curvature: 90
+});
+class ot {
+  constructor(t) {
+    s(this, "svg", I());
+    s(this, "group", $());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "arrowLength");
+    s(this, "arrowWidth");
+    s(this, "curvature");
+    s(this, "portCycleRadius");
+    s(this, "portCycleSmallRadius");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? g.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? g.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? g.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
+    const o = (t == null ? void 0 : t.color) ?? g.color, r = (t == null ? void 0 : t.width) ?? g.width;
+    this.svg.appendChild(this.group), this.line = m(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(o), this.group.appendChild(this.targetArrow));
+  }
+  render(t) {
+    const { x: o, y: r, width: i, height: n, flipX: d, flipY: c } = p(
+      t.source,
+      t.target
+    );
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${n}px`, this.group.style.transform = `scale(${d}, ${c})`;
+    const h = A(
+      t.source.direction,
+      d,
+      c
+    ), l = A(
+      t.target.direction,
+      d,
+      c
+    ), a = {
+      x: i,
+      y: n
+    };
+    let w, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (w = et({
+      fromVect: h,
+      radius: this.portCycleRadius,
+      smallRadius: this.portCycleSmallRadius,
+      arrowLength: this.arrowLength,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = Q({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipX: d,
+      flipY: c,
+      arrowLength: this.arrowLength,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }) : w = J({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      arrowLength: this.arrowLength,
+      curvature: this.curvature,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), this.line.setAttribute("d", w), this.sourceArrow) {
+      const v = E(
+        h,
+        u,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", v);
+    }
+    if (this.targetArrow) {
+      const v = E(
+        y,
+        a,
+        x,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", v);
+    }
   }
 }
-class Z {
-  constructor(e) {
-    this.transformer = e;
+class rt {
+  constructor(t) {
+    s(this, "svg", I());
+    s(this, "group", $());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "arrowLength");
+    s(this, "arrowWidth");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? g.color, i = (t == null ? void 0 : t.width) ?? g.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+  }
+  render(t) {
+    const { x: o, y: r, width: i, height: n, flipX: d, flipY: c } = p(
+      t.source,
+      t.target
+    );
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${n}px`, this.group.style.transform = `scale(${d}, ${c})`;
+    const h = A(
+      t.source.direction,
+      d,
+      c
+    ), l = A(
+      t.target.direction,
+      d,
+      c
+    ), a = {
+      x: i,
+      y: n
+    };
+    let w, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (w = Y({
+      fromVect: h,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipX: d,
+      flipY: c,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }) : w = Z({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipX: d,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), this.line.setAttribute("d", w), this.sourceArrow) {
+      const v = E(
+        h,
+        u,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", v);
+    }
+    if (this.targetArrow) {
+      const v = E(
+        y,
+        a,
+        x,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", v);
+    }
   }
-  getViewportMatrix() {
-    return { ...this.transformer.getViewportMatrix() };
+}
+class it {
+  constructor(t) {
+    s(this, "svg", I());
+    s(this, "group", $());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "arrowLength");
+    s(this, "arrowWidth");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? g.color, i = (t == null ? void 0 : t.width) ?? g.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+  }
+  render(t) {
+    const { x: o, y: r, width: i, height: n, flipX: d, flipY: c } = p(
+      t.source,
+      t.target
+    );
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${n}px`, this.group.style.transform = `scale(${d}, ${c})`;
+    const h = A(
+      t.source.direction,
+      d,
+      c
+    ), l = A(
+      t.target.direction,
+      d,
+      c
+    ), a = {
+      x: i,
+      y: n
+    };
+    let w, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (w = Y({
+      fromVect: h,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipX: d,
+      flipY: c,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }) : w = q({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), this.line.setAttribute("d", w), this.sourceArrow) {
+      const v = E(
+        h,
+        u,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", v);
+    }
+    if (this.targetArrow) {
+      const v = E(
+        y,
+        a,
+        x,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", v);
+    }
   }
-  getContentMatrix() {
-    return { ...this.transformer.getContentMatrix() };
+}
+class nt {
+  constructor(t) {
+    s(this, "svg", I());
+    s(this, "group", $());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "arrowLength");
+    s(this, "arrowWidth");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    this.roundness = Math.min(
+      o,
+      this.arrowOffset,
+      this.cycleSquareSide / 2
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? g.color, i = (t == null ? void 0 : t.width) ?? g.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+  }
+  render(t) {
+    const { x: o, y: r, width: i, height: n, flipX: d, flipY: c } = p(
+      t.source,
+      t.target
+    );
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${n}px`, this.group.style.transform = `scale(${d}, ${c})`;
+    const h = A(
+      t.source.direction,
+      d,
+      c
+    ), l = A(
+      t.target.direction,
+      d,
+      c
+    ), a = {
+      x: i,
+      y: n
+    };
+    let w, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (w = Y({
+      fromVect: h,
+      arrowLength: this.arrowLength,
+      side: this.cycleSquareSide,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipX: d,
+      flipY: c,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      detourDirection: this.detourDirection,
+      detourDistance: this.detourDistance,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }) : w = tt({
+      to: a,
+      fromVect: h,
+      toVect: l,
+      flipY: c,
+      arrowLength: this.arrowLength,
+      arrowOffset: this.arrowOffset,
+      roundness: this.roundness,
+      hasSourceArrow: this.hasSourceArrow,
+      hasTargetArrow: this.hasTargetArrow
+    }), this.line.setAttribute("d", w), this.sourceArrow) {
+      const v = E(
+        h,
+        u,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", v);
+    }
+    if (this.targetArrow) {
+      const v = E(
+        y,
+        a,
+        x,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", v);
+    }
   }
 }
-class q {
+const st = (e) => {
+  if (typeof e == "function")
+    return e;
+  switch (e == null ? void 0 : e.type) {
+    case "straight":
+      return () => new it({
+        color: e.color,
+        width: e.width,
+        arrowLength: e.arrowLength,
+        arrowWidth: e.arrowWidth,
+        arrowOffset: e.arrowOffset,
+        hasSourceArrow: e.hasSourceArrow,
+        hasTargetArrow: e.hasTargetArrow,
+        cycleSquareSide: e.cycleSquareSide,
+        roundness: e.roundness,
+        detourDistance: e.detourDistance,
+        detourDirection: e.detourDirection
+      });
+    case "horizontal":
+      return () => new rt({
+        color: e.color,
+        width: e.width,
+        arrowLength: e.arrowLength,
+        arrowWidth: e.arrowWidth,
+        arrowOffset: e.arrowOffset,
+        hasSourceArrow: e.hasSourceArrow,
+        hasTargetArrow: e.hasTargetArrow,
+        cycleSquareSide: e.cycleSquareSide,
+        roundness: e.roundness,
+        detourDistance: e.detourDistance,
+        detourDirection: e.detourDirection
+      });
+    case "vertical":
+      return () => new nt({
+        color: e.color,
+        width: e.width,
+        arrowLength: e.arrowLength,
+        arrowWidth: e.arrowWidth,
+        arrowOffset: e.arrowOffset,
+        hasSourceArrow: e.hasSourceArrow,
+        hasTargetArrow: e.hasTargetArrow,
+        cycleSquareSide: e.cycleSquareSide,
+        roundness: e.roundness,
+        detourDistance: e.detourDistance,
+        detourDirection: e.detourDirection
+      });
+    default:
+      return () => new ot({
+        color: e.color,
+        width: e.width,
+        arrowLength: e.arrowLength,
+        arrowWidth: e.arrowWidth,
+        hasSourceArrow: e.hasSourceArrow,
+        hasTargetArrow: e.hasTargetArrow,
+        cycleRadius: e.cycleRadius,
+        smallCycleRadius: e.smallCycleRadius,
+        curvature: e.curvature,
+        detourDistance: e.detourDistance,
+        detourDirection: e.detourDirection
+      });
+  }
+}, F = (e) => () => e, G = F(0), V = () => {
+  let e = 0;
+  return () => e++;
+}, ht = (e, t) => {
+  let o = G, r = G;
+  e === "incremental" && (o = V()), t === "incremental" && (r = V());
+  const i = V();
+  return e === "shared-incremental" && (o = i), t === "shared-incremental" && (r = i), typeof e == "number" && (o = F(e)), typeof t == "number" && (r = F(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
+    nodesPriorityFn: o,
+    edgesPriorityFn: r
+  };
+}, ct = (e) => {
+  var o, r, i, n, d;
+  const t = ht(
+    (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
+    (r = e == null ? void 0 : e.edges) == null ? void 0 : r.priority
+  );
+  return {
+    nodes: {
+      centerFn: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? _,
+      priorityFn: t.nodesPriorityFn
+    },
+    ports: {
+      direction: ((n = e == null ? void 0 : e.ports) == null ? void 0 : n.direction) ?? 0
+    },
+    edges: {
+      shapeFactory: st(((d = e == null ? void 0 : e.edges) == null ? void 0 : d.shape) ?? {}),
+      priorityFn: t.edgesPriorityFn
+    }
+  };
+};
+class dt {
   constructor() {
-    n(this, "nodes", /* @__PURE__ */ new Map());
-    n(this, "ports", /* @__PURE__ */ new Map());
-    n(this, "nodePorts", /* @__PURE__ */ new Map());
-    n(this, "portNodeId", /* @__PURE__ */ new Map());
-    n(this, "edges", /* @__PURE__ */ new Map());
-    n(this, "incommingEdges", /* @__PURE__ */ new Map());
-    n(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    n(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(e) {
-    this.nodes.set(e.nodeId, {
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn,
-      priority: e.priority
-    }), this.nodePorts.set(e.nodeId, /* @__PURE__ */ new Map());
+    s(this, "nodes", /* @__PURE__ */ new Map());
+    s(this, "ports", /* @__PURE__ */ new Map());
+    s(this, "nodePorts", /* @__PURE__ */ new Map());
+    s(this, "portNodeId", /* @__PURE__ */ new Map());
+    s(this, "edges", /* @__PURE__ */ new Map());
+    s(this, "incommingEdges", /* @__PURE__ */ new Map());
+    s(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    s(this, "cycleEdges", /* @__PURE__ */ new Map());
+  }
+  addNode(t) {
+    this.nodes.set(t.nodeId, {
+      element: t.element,
+      x: t.x,
+      y: t.y,
+      centerFn: t.centerFn,
+      priority: t.priority
+    }), this.nodePorts.set(t.nodeId, /* @__PURE__ */ new Map());
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(e) {
-    return this.nodes.get(e);
+  getNode(t) {
+    return this.nodes.get(t);
   }
-  removeNode(e) {
-    this.nodes.delete(e), this.nodePorts.delete(e);
+  removeNode(t) {
+    this.nodes.delete(t), this.nodePorts.delete(t);
   }
-  addPort(e) {
-    this.ports.set(e.portId, {
-      element: e.element,
-      centerFn: e.centerFn,
-      direction: e.direction
-    }), this.cycleEdges.set(e.portId, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.portId, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.portId, /* @__PURE__ */ new Set()), this.portNodeId.set(e.portId, e.nodeId), this.nodePorts.get(e.nodeId).set(e.portId, e.element);
+  addPort(t) {
+    this.ports.set(t.portId, {
+      element: t.element,
+      direction: t.direction
+    }), this.cycleEdges.set(t.portId, /* @__PURE__ */ new Set()), this.incommingEdges.set(t.portId, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t.portId, /* @__PURE__ */ new Set()), this.portNodeId.set(t.portId, t.nodeId), this.nodePorts.get(t.nodeId).set(t.portId, t.element);
   }
-  getPort(e) {
-    return this.ports.get(e);
+  getPort(t) {
+    return this.ports.get(t);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getNodePortIds(e) {
-    const t = this.nodePorts.get(e);
-    if (t !== void 0)
-      return Array.from(t.keys());
+  getNodePortIds(t) {
+    const o = this.nodePorts.get(t);
+    if (o !== void 0)
+      return Array.from(o.keys());
   }
-  getPortNodeId(e) {
-    return this.portNodeId.get(e);
+  getPortNodeId(t) {
+    return this.portNodeId.get(t);
   }
-  removePort(e) {
-    const t = this.portNodeId.get(e);
-    this.portNodeId.delete(e), this.nodePorts.get(t).delete(e), this.ports.delete(e);
+  removePort(t) {
+    const o = this.portNodeId.get(t);
+    this.portNodeId.delete(t), this.nodePorts.get(o).delete(t), this.ports.delete(t);
   }
-  addEdge(e) {
-    this.edges.set(e.edgeId, {
-      from: e.from,
-      to: e.to,
-      shape: e.shape,
-      priority: e.priority
-    }), e.from !== e.to ? (this.outcommingEdges.get(e.from).add(e.edgeId), this.incommingEdges.get(e.to).add(e.edgeId)) : this.cycleEdges.get(e.from).add(e.edgeId);
+  addEdge(t) {
+    this.edges.set(t.edgeId, {
+      from: t.from,
+      to: t.to,
+      shape: t.shape,
+      priority: t.priority
+    }), t.from !== t.to ? (this.outcommingEdges.get(t.from).add(t.edgeId), this.incommingEdges.get(t.to).add(t.edgeId)) : this.cycleEdges.get(t.from).add(t.edgeId);
+  }
+  updateEdgeFrom(t, o) {
+    const r = this.edges.get(t);
+    this.removeEdge(t), this.addEdge({
+      edgeId: t,
+      from: o,
+      to: r.to,
+      shape: r.shape,
+      priority: r.priority
+    });
+  }
+  updateEdgeTo(t, o) {
+    const r = this.edges.get(t);
+    this.removeEdge(t), this.addEdge({
+      edgeId: t,
+      from: r.from,
+      to: o,
+      shape: r.shape,
+      priority: r.priority
+    });
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(e) {
-    return this.edges.get(e);
+  getEdge(t) {
+    return this.edges.get(t);
   }
-  removeEdge(e) {
-    const t = this.edges.get(e), s = t.from, o = t.to;
-    this.cycleEdges.get(s).delete(e), this.cycleEdges.get(o).delete(e), this.incommingEdges.get(s).delete(e), this.incommingEdges.get(o).delete(e), this.outcommingEdges.get(s).delete(e), this.outcommingEdges.get(o).delete(e), this.edges.delete(e);
+  removeEdge(t) {
+    const o = this.edges.get(t), r = o.from, i = o.to;
+    this.cycleEdges.get(r).delete(t), this.cycleEdges.get(i).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(i).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(i).delete(t), this.edges.delete(t);
   }
   clear() {
     this.nodes.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear();
   }
-  getPortIncomingEdgeIds(e) {
-    return Array.from(this.incommingEdges.get(e));
+  getPortIncomingEdgeIds(t) {
+    return Array.from(this.incommingEdges.get(t));
   }
-  getPortOutcomingEdgeIds(e) {
-    return Array.from(this.outcommingEdges.get(e));
+  getPortOutcomingEdgeIds(t) {
+    return Array.from(this.outcommingEdges.get(t));
   }
-  getPortCycleEdgeIds(e) {
-    return Array.from(this.cycleEdges.get(e));
+  getPortCycleEdgeIds(t) {
+    return Array.from(this.cycleEdges.get(t));
   }
-  getPortAdjacentEdgeIds(e) {
+  getPortAdjacentEdgeIds(t) {
     return [
-      ...this.getPortIncomingEdgeIds(e),
-      ...this.getPortOutcomingEdgeIds(e),
-      ...this.getPortCycleEdgeIds(e)
+      ...this.getPortIncomingEdgeIds(t),
+      ...this.getPortOutcomingEdgeIds(t),
+      ...this.getPortCycleEdgeIds(t)
     ];
   }
-  getNodeIncomingEdgeIds(e) {
-    const t = Array.from(this.nodePorts.get(e).keys());
-    let s = [];
-    return t.forEach((o) => {
-      s = [...s, ...this.getPortIncomingEdgeIds(o)];
-    }), s;
-  }
-  getNodeOutcomingEdgeIds(e) {
-    const t = Array.from(this.nodePorts.get(e).keys());
-    let s = [];
-    return t.forEach((o) => {
-      s = [...s, ...this.getPortOutcomingEdgeIds(o)];
-    }), s;
-  }
-  getNodeCycleEdgeIds(e) {
-    const t = Array.from(this.nodePorts.get(e).keys());
-    let s = [];
-    return t.forEach((o) => {
-      s = [...s, ...this.getPortCycleEdgeIds(o)];
-    }), s;
-  }
-  getNodeAdjacentEdgeIds(e) {
+  getNodeIncomingEdgeIds(t) {
+    const o = Array.from(this.nodePorts.get(t).keys());
+    let r = [];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortIncomingEdgeIds(i)];
+    }), r;
+  }
+  getNodeOutcomingEdgeIds(t) {
+    const o = Array.from(this.nodePorts.get(t).keys());
+    let r = [];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortOutcomingEdgeIds(i)];
+    }), r;
+  }
+  getNodeCycleEdgeIds(t) {
+    const o = Array.from(this.nodePorts.get(t).keys());
+    let r = [];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortCycleEdgeIds(i)];
+    }), r;
+  }
+  getNodeAdjacentEdgeIds(t) {
     return [
-      ...this.getNodeIncomingEdgeIds(e),
-      ...this.getNodeOutcomingEdgeIds(e),
-      ...this.getNodeCycleEdgeIds(e)
+      ...this.getNodeIncomingEdgeIds(t),
+      ...this.getNodeOutcomingEdgeIds(t),
+      ...this.getNodeCycleEdgeIds(t)
     ];
   }
 }
-class ee {
-  constructor(e) {
-    this.graphStore = e;
+class lt {
+  constructor(t) {
+    this.graphStore = t;
   }
-  getNode(e) {
-    const t = this.graphStore.getNode(e);
-    return t === void 0 ? null : {
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn,
-      priority: t.priority
+  getNode(t) {
+    const o = this.graphStore.getNode(t);
+    return o === void 0 ? null : {
+      element: o.element,
+      x: o.x,
+      y: o.y,
+      centerFn: o.centerFn,
+      priority: o.priority
     };
   }
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
-  getPort(e) {
-    const t = this.graphStore.getPort(e);
-    return t === void 0 ? null : {
-      element: t.element,
-      centerFn: t.centerFn,
-      direction: t.direction
+  getPort(t) {
+    const o = this.graphStore.getPort(t);
+    return o === void 0 ? null : {
+      element: o.element,
+      direction: o.direction
     };
   }
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
-  getNodePortIds(e) {
-    return this.graphStore.getNodePortIds(e);
+  getNodePortIds(t) {
+    return this.graphStore.getNodePortIds(t);
   }
-  getPortNodeId(e) {
-    return this.graphStore.getPortNodeId(e) ?? null;
+  getPortNodeId(t) {
+    return this.graphStore.getPortNodeId(t) ?? null;
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
-  getEdge(e) {
-    const t = this.graphStore.getEdge(e);
-    return t === void 0 ? null : { from: t.from, to: t.to, priority: t.priority };
+  getEdge(t) {
+    const o = this.graphStore.getEdge(t);
+    return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
   }
-  getPortIncomingEdgeIds(e) {
-    return this.graphStore.getPortIncomingEdgeIds(e);
+  getPortIncomingEdgeIds(t) {
+    return this.graphStore.getPortIncomingEdgeIds(t);
   }
-  getPortOutcomingEdgeIds(e) {
-    return this.graphStore.getPortOutcomingEdgeIds(e);
+  getPortOutcomingEdgeIds(t) {
+    return this.graphStore.getPortOutcomingEdgeIds(t);
   }
-  getPortCycleEdgeIds(e) {
-    return this.graphStore.getPortCycleEdgeIds(e);
+  getPortCycleEdgeIds(t) {
+    return this.graphStore.getPortCycleEdgeIds(t);
   }
-  getPortAdjacentEdgeIds(e) {
-    return this.graphStore.getPortAdjacentEdgeIds(e);
+  getPortAdjacentEdgeIds(t) {
+    return this.graphStore.getPortAdjacentEdgeIds(t);
   }
-  getNodeIncomingEdgeIds(e) {
-    return this.graphStore.getNodeIncomingEdgeIds(e);
+  getNodeIncomingEdgeIds(t) {
+    return this.graphStore.getNodeIncomingEdgeIds(t);
   }
-  getNodeOutcomingEdgeIds(e) {
-    return this.graphStore.getNodeOutcomingEdgeIds(e);
+  getNodeOutcomingEdgeIds(t) {
+    return this.graphStore.getNodeOutcomingEdgeIds(t);
   }
-  getNodeCycleEdgeIds(e) {
-    return this.graphStore.getNodeCycleEdgeIds(e);
+  getNodeCycleEdgeIds(t) {
+    return this.graphStore.getNodeCycleEdgeIds(t);
   }
-  getNodeAdjacentEdgeIds(e) {
-    return this.graphStore.getNodeAdjacentEdgeIds(e);
+  getNodeAdjacentEdgeIds(t) {
+    return this.graphStore.getNodeAdjacentEdgeIds(t);
   }
 }
-const l = {
-  x: 0,
-  y: 0
-}, p = (r, e, t) => ({
-  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
-  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
-}), x = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) }), E = (r, e, t, s) => {
-  const i = [
-    l,
-    { x: t, y: s },
-    { x: t, y: -s }
-  ].map((c) => p(c, r, l)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${i[0].x} ${i[0].y}`, a = `L ${i[1].x} ${i[1].y}`, d = `L ${i[2].x} ${i[2].y}`;
-  return `${h} ${a} ${d}`;
-}, D = (r, e) => {
-  const t = [];
-  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
-    const s = r.length - 1;
-    let o = 0, i = 0, h = 0;
-    r.forEach((a, d) => {
-      let c = 0, u = 0, w = 0;
-      const m = d > 0, y = d < s, v = m && y;
-      if (m && (c = -o, u = -i, w = h), y) {
-        const j = r[d + 1];
-        o = j.x - a.x, i = j.y - a.y, h = Math.sqrt(o * o + i * i);
-      }
-      const S = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, M = v ? { x: a.x + o * S, y: a.y + i * S } : a, T = w !== 0 ? Math.min((v ? e : 0) / w, d > 1 ? 0.5 : 1) : 0, F = v ? { x: a.x + c * T, y: a.y + u * T } : a;
-      d > 0 && t.push(`L ${F.x} ${F.y}`), v && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${M.x} ${M.y}`
-      );
-    });
-  }
-  return t.join(" ");
-}, N = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return r.style.pointerEvents = "none", r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.overflow = "visible", r;
-}, $ = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return r.style.transformOrigin = "50% 50%", r;
-}, L = (r, e) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("stroke", r), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t;
-}, A = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("fill", r), e;
+const j = (e) => ({
+  scale: 1 / e.scale,
+  dx: -e.dx / e.scale,
+  dy: -e.dy / e.scale
+}), H = {
+  scale: 1,
+  dx: 0,
+  dy: 0
 };
-class te {
-  constructor(e, t, s, o, i, h, a) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+class at {
+  constructor() {
+    s(this, "viewportMatrix", H);
+    s(this, "contentMatrix", H);
   }
-  createLinePath(e, t, s) {
-    const o = p(
-      { x: this.arrowLength, y: l.y },
-      t,
-      l
-    ), i = p(
-      { x: e.x - this.arrowLength, y: e.y },
-      s,
-      e
-    ), h = {
-      x: o.x + t.x * this.curvature,
-      y: o.y + t.y * this.curvature
-    }, a = {
-      x: i.x - s.x * this.curvature,
-      y: i.y - s.y * this.curvature
-    }, d = `M ${o.x} ${o.y} C ${h.x} ${h.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, c = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, u = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
-    return `${c}${d}${u}`;
+  getViewportMatrix() {
+    return this.viewportMatrix;
   }
-}
-class re {
-  constructor(e, t, s, o, i, h, a, d) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+  getContentMatrix() {
+    return this.contentMatrix;
   }
-  createLinePath(e, t, s) {
-    const o = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, i = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, a = p({ x: h, y: l.y }, t, l), d = p({ x: e.x - h, y: e.y }, s, e);
-    return D([o, a, d, i], this.roundness);
+  patchViewportMatrix(t) {
+    this.viewportMatrix = {
+      scale: t.scale ?? this.viewportMatrix.scale,
+      dx: t.dx ?? this.viewportMatrix.dx,
+      dy: t.dy ?? this.viewportMatrix.dy
+    }, this.contentMatrix = j(this.viewportMatrix);
+  }
+  patchContentMatrix(t) {
+    this.contentMatrix = {
+      scale: t.scale ?? this.contentMatrix.scale,
+      dx: t.dx ?? this.contentMatrix.dx,
+      dy: t.dy ?? this.contentMatrix.dy
+    }, this.viewportMatrix = j(this.contentMatrix);
   }
 }
-class se {
-  constructor(e, t, s, o, i, h, a, d) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a, t);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+class gt {
+  constructor(t) {
+    this.transformer = t;
   }
-  createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, a = this.arrowLength + this.arrowOffset, d = a - this.roundness, c = p({ x: d, y: l.y }, t, l), u = p({ x: e.x - d, y: e.y }, s, e), w = Math.max((c.x + u.x) / 2, a), m = e.y / 2, y = { x: o > 0 ? w : -a, y: c.y }, v = { x: y.x, y: m }, P = { x: o > 0 ? e.x - w : e.x + a, y: u.y }, S = { x: P.x, y: m };
-    return D(
-      [i, c, y, v, S, P, u, h],
-      this.roundness
-    );
+  getViewportMatrix() {
+    return { ...this.transformer.getViewportMatrix() };
+  }
+  getContentMatrix() {
+    return { ...this.transformer.getContentMatrix() };
   }
 }
-class oe {
-  constructor(e, t, s, o, i, h, a, d) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a, s);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+const ut = () => {
+  const e = document.createElement("div");
+  return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
+}, wt = () => {
+  const e = document.createElement("div");
+  return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
+}, yt = () => {
+  const e = document.createElement("div");
+  return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.visibility = "hidden", e;
+};
+class ft {
+  constructor(t, o) {
+    s(this, "canvasWrapper", null);
+    s(this, "host", ut());
+    s(this, "container", wt());
+    s(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    this.graphStore = t, this.viewportTransformer = o, this.host.appendChild(this.container);
+  }
+  attach(t) {
+    this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
   }
-  createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, a = this.arrowLength + this.arrowOffset, d = a - this.roundness, c = p({ x: d, y: l.y }, t, l), u = p({ x: e.x - d, y: e.y }, s, e), w = Math.max((c.y + u.y) / 2, a), m = e.x / 2, y = { x: c.x, y: o > 0 ? w : -a }, v = { x: m, y: y.y }, P = {
-      x: u.x,
-      y: o > 0 ? e.y - w : e.y + a
-    }, S = { x: m, y: P.y };
-    return D(
-      [i, c, y, v, S, P, u, h],
-      this.roundness
-    );
+  detach() {
+    this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
-}
-class ie {
-  constructor(e, t, s, o, i, h, a) {
-    n(this, "svg", N());
-    n(this, "line");
-    n(this, "arrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.radius = h, this.smallRadius = a, this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = A(e), this.svg.appendChild(this.arrow));
-  }
-  update(e, t, s, o) {
-    const i = x(o, t, s), h = this.createLinePath(i);
-    if (this.line.setAttribute("d", h), this.arrow) {
-      const a = E(
-        i,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.arrow.setAttribute("d", a);
-    }
+  applyTransform() {
+    const t = this.viewportTransformer.getContentMatrix();
+    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
   }
-  createLinePath(e) {
-    const t = this.smallRadius, s = this.radius, o = Math.sqrt(t * t + s * s), i = t + s, h = this.arrowLength + o * (1 - s / i), a = t * s / i, c = [
-      { x: this.arrowLength, y: l.y },
-      { x: h, y: a },
-      { x: h, y: -a }
-    ].map((m) => p(m, e, l)), u = [
-      `M ${c[0].x} ${c[0].y}`,
-      `A ${t} ${t} 0 0 1 ${c[1].x} ${c[1].y}`,
-      `A ${s} ${s} 0 1 0 ${c[2].x} ${c[2].y}`,
-      `A ${t} ${t} 0 0 1 ${c[0].x} ${c[0].y}`
-    ].join(" "), w = `M 0 0 L ${c[0].x} ${c[0].y} `;
-    return `${this.arrow !== null ? "" : w}${u}`;
+  attachNode(t) {
+    const o = this.graphStore.getNode(t), r = yt();
+    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(t, r), this.updateNodeCoordinates(t), this.updateNodePriority(t), r.style.visibility = "visible";
   }
-}
-class B {
-  constructor(e, t, s, o, i, h, a, d) {
-    n(this, "svg", N());
-    n(this, "line");
-    n(this, "arrow", null);
-    n(this, "roundness");
-    n(this, "linePoints");
-    this.arrowLength = s, this.arrowWidth = o, this.side = h, this.minPortOffset = a, this.roundness = Math.min(d, this.minPortOffset, this.side / 2), this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = A(e), this.svg.appendChild(this.arrow));
-    const c = this.minPortOffset, u = this.side, w = this.arrowLength + c, m = w + 2 * u;
-    this.linePoints = [
-      { x: this.arrowLength, y: l.y },
-      { x: w, y: l.y },
-      { x: w, y: this.side },
-      { x: m, y: this.side },
-      { x: m, y: -this.side },
-      { x: w, y: -this.side },
-      { x: w, y: l.y },
-      { x: this.arrowLength, y: l.y }
-    ];
+  detachNode(t) {
+    const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
+    r.removeChild(o.element), this.container.removeChild(r), this.nodeIdToWrapperElementMap.delete(t);
   }
-  update(e, t, s, o) {
-    const i = x(o, t, s), h = this.createLinePath(i);
-    if (this.line.setAttribute("d", h), this.arrow) {
-      const a = E(
-        i,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.arrow.setAttribute("d", a);
-    }
+  attachEdge(t) {
+    const o = this.graphStore.getEdge(t);
+    this.edgeIdToElementMap.set(t, o.shape.svg), this.container.appendChild(o.shape.svg), this.renderEdge(t), this.updateEdgePriority(t);
   }
-  createLinePath(e) {
-    const t = this.linePoints.map(
-      (o) => p(o, e, l)
-    ), s = `M ${l.x} ${l.y} L ${t[0].x} ${t[0].y} `;
-    return `${this.arrow ? "" : s}${D(t, this.roundness)}`;
+  detachEdge(t) {
+    const o = this.graphStore.getEdge(t);
+    this.container.removeChild(o.shape.svg), this.edgeIdToElementMap.delete(t);
   }
-}
-class ne {
-  constructor(e, t, s, o, i, h, a, d, c) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    n(this, "detourX");
-    n(this, "detourY");
-    this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(c) * d, this.detourY = Math.sin(c) * d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a, t, s);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+  clear() {
+    this.edgeIdToElementMap.forEach((t, o) => {
+      this.detachEdge(o);
+    }), this.nodeIdToWrapperElementMap.forEach((t, o) => {
+      this.detachNode(o);
+    });
   }
-  createLinePath(e, t, s, o, i) {
-    const h = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, a = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, d = this.arrowLength, c = this.detourX * o, u = this.detourY * i, w = p(
-      { x: d, y: l.y },
-      t,
-      l
-    ), m = {
-      x: w.x + c,
-      y: w.y + u
-    }, y = p(
-      { x: e.x - d, y: e.y },
-      s,
-      e
-    ), v = {
-      x: y.x + c,
-      y: y.y + u
-    }, P = { x: (m.x + v.x) / 2, y: (m.y + v.y) / 2 }, S = {
-      x: w.x + this.curvature * t.x,
-      y: w.y + this.curvature * t.y
-    }, M = {
-      x: y.x - this.curvature * s.x,
-      y: y.y - this.curvature * s.y
-    }, b = {
-      x: w.x + c,
-      y: w.y + u
-    }, T = {
-      x: y.x + c,
-      y: y.y + u
-    };
-    return [
-      `M ${h.x} ${h.y}`,
-      `L ${w.x} ${w.y}`,
-      `C ${S.x} ${S.y} ${b.x} ${b.y} ${P.x} ${P.y}`,
-      `C ${T.x} ${T.y} ${M.x} ${M.y} ${y.x} ${y.y}`,
-      `L ${a.x} ${a.y}`
-    ].join(" ");
+  destroy() {
+    this.clear(), this.detach(), this.host.removeChild(this.container);
   }
-}
-class G {
-  constructor(e, t, s, o, i, h, a, d, c, u) {
-    n(this, "svg", N());
-    n(this, "group", $());
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    n(this, "detourX");
-    n(this, "detourY");
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = d, this.detourX = Math.cos(u) * c, this.detourY = Math.sin(u) * c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), h && (this.sourceArrow = A(e), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = A(e), this.group.appendChild(this.targetArrow));
-  }
-  update(e, t, s, o, i) {
-    this.group.style.transform = `scale(${t}, ${s})`;
-    const h = x(o, t, s), a = x(i, t, s), d = this.createLinePath(e, h, a, t, s);
-    if (this.line.setAttribute("d", d), this.sourceArrow) {
-      const c = E(
-        h,
-        l,
-        this.arrowLength,
-        this.arrowWidth
-      );
-      this.sourceArrow.setAttribute("d", c);
-    }
-    if (this.targetArrow) {
-      const c = E(
-        a,
-        e,
-        -this.arrowLength,
-        this.arrowWidth
-      );
-      this.targetArrow.setAttribute("d", c);
-    }
+  updateNodeCoordinates(t) {
+    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: i, height: n } = r.element.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix().scale, c = r.centerFn(i, n), h = r.x - d * c.x, l = r.y - d * c.y;
+    o.style.transform = `translate(${h}px, ${l}px)`;
   }
-  createLinePath(e, t, s, o, i) {
-    const h = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, a = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, d = this.arrowLength + this.arrowOffset, c = p(
-      { x: d, y: l.y },
-      t,
-      l
-    ), u = this.detourX * o, w = this.detourY * i, m = { x: c.x + u, y: c.y + w }, y = p(
-      { x: e.x - d, y: e.y },
-      s,
-      e
-    ), v = { x: y.x + u, y: y.y + w };
-    return D(
-      [h, c, m, v, y, a],
-      this.roundness
-    );
+  updateNodePriority(t) {
+    const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
+    r.style.zIndex = `${o.priority}`;
+  }
+  updateEdgeShape(t) {
+    const o = this.edgeIdToElementMap.get(t);
+    this.container.removeChild(o);
+    const r = this.graphStore.getEdge(t);
+    this.edgeIdToElementMap.set(t, r.shape.svg), this.container.appendChild(r.shape.svg);
+  }
+  renderEdge(t) {
+    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), i = this.graphStore.getPort(o.to), n = r.element.getBoundingClientRect(), d = i.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix(), l = {
+      x: h.scale * (n.left - c.left) + h.dx,
+      y: h.scale * (n.top - c.top) + h.dy
+    }, a = {
+      x: h.scale * (d.left - c.left) + h.dx,
+      y: h.scale * (d.top - c.top) + h.dy
+    }, w = {
+      x: l.x,
+      y: l.y,
+      width: n.width * h.scale,
+      height: n.height * h.scale,
+      direction: r.direction,
+      portId: o.from,
+      nodeId: this.graphStore.getPortNodeId(o.from)
+    }, y = {
+      x: a.x,
+      y: a.y,
+      width: d.width * h.scale,
+      height: d.height * h.scale,
+      direction: i.direction,
+      portId: o.to,
+      nodeId: this.graphStore.getPortNodeId(o.to)
+    };
+    o.shape.render({
+      source: w,
+      target: y
+    });
+  }
+  updateEdgePriority(t) {
+    const o = this.graphStore.getEdge(t);
+    o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-var C = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(C || {});
-const ae = (r) => (e) => e === C.PortCycle ? new ie(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow || r.hasTargetArrow,
-  r.cycleRadius,
-  r.smallCycleRadius
-) : e === C.NodeCycle ? new ne(
-  r.color,
-  r.width,
-  r.curvature,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.detourDistance,
-  r.detourDirection
-) : new te(
-  r.color,
-  r.width,
-  r.curvature,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow,
-  r.hasTargetArrow
-), he = (r) => (e) => e === C.PortCycle ? new B(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow || r.hasTargetArrow,
-  r.cycleSquareSide,
-  r.arrowOffset,
-  r.roundness
-) : e === C.NodeCycle ? new G(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness,
-  r.detourDistance,
-  r.detourDirection
-) : new re(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness
-), de = (r) => (e) => e === C.PortCycle ? new B(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow || r.hasTargetArrow,
-  r.cycleSquareSide,
-  r.arrowOffset,
-  r.roundness
-) : e === C.NodeCycle ? new G(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness,
-  r.detourDistance,
-  r.detourDirection
-) : new oe(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness
-), ce = (r) => (e) => e === C.PortCycle ? new B(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.hasSourceArrow || r.hasTargetArrow,
-  r.cycleSquareSide,
-  r.arrowOffset,
-  r.roundness
-) : e === C.NodeCycle ? new G(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness,
-  r.detourDistance,
-  r.detourDirection
-) : new se(
-  r.color,
-  r.width,
-  r.arrowLength,
-  r.arrowWidth,
-  r.arrowOffset,
-  r.hasSourceArrow,
-  r.hasTargetArrow,
-  r.roundness
-);
-class I {
-  constructor(e) {
-    n(this, "counter", 0);
-    this.checkExists = e;
-  }
-  create(e) {
-    if (e !== void 0)
-      return e;
+class C {
+  constructor(t) {
+    s(this, "counter", 0);
+    this.checkExists = t;
+  }
+  create(t) {
+    if (t !== void 0)
+      return t;
     for (; this.checkExists(this.counter); )
       this.counter++;
     return this.counter;
@@ -767,133 +1079,126 @@ class I {
     this.counter = 0;
   }
 }
-class f extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
-    n(this, "name", "HtmlGraphError");
+    s(this, "name", "HtmlGraphError");
   }
 }
-class le {
-  constructor(e, t, s, o, i, h, a, d) {
-    n(this, "nodeIdGenerator", new I(
-      (e) => this.graphStore.getNode(e) !== void 0
+class vt {
+  constructor(t, o, r, i, n, d, c) {
+    s(this, "nodeIdGenerator", new C(
+      (t) => this.graphStore.getNode(t) !== void 0
     ));
-    n(this, "portIdGenerator", new I(
-      (e) => this.graphStore.getPort(e) !== void 0
+    s(this, "portIdGenerator", new C(
+      (t) => this.graphStore.getPort(t) !== void 0
     ));
-    n(this, "edgeIdGenerator", new I(
-      (e) => this.graphStore.getEdge(e) !== void 0
+    s(this, "edgeIdGenerator", new C(
+      (t) => this.graphStore.getEdge(t) !== void 0
     ));
-    this.graphStore = e, this.htmlController = t, this.viewportTransformer = s, this.defaultNodesCenterFn = o, this.defaultPortsCenterFn = i, this.defaultPortsDirection = h, this.defaultNodesPriorityFn = a, this.defaultEdgesPriorityFn = d;
+    this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = n, this.defaultNodesPriorityFn = d, this.defaultEdgesPriorityFn = c;
   }
-  attach(e) {
-    this.htmlController.attach(e);
+  attach(t) {
+    this.htmlController.attach(t);
   }
   detach() {
     this.htmlController.detach();
   }
-  addNode(e) {
-    const t = this.nodeIdGenerator.create(e.nodeId);
-    if (this.graphStore.getNode(t) !== void 0)
-      throw new f("failed to add node with existing id");
+  addNode(t) {
+    const o = this.nodeIdGenerator.create(t.nodeId);
+    if (this.graphStore.getNode(o) !== void 0)
+      throw new S("failed to add node with existing id");
     this.graphStore.addNode({
-      nodeId: t,
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn ?? this.defaultNodesCenterFn,
-      priority: e.priority ?? this.defaultNodesPriorityFn()
-    }), this.htmlController.attachNode(t), Array.from(e.ports ?? []).forEach((s) => {
+      nodeId: o,
+      element: t.element,
+      x: t.x,
+      y: t.y,
+      centerFn: t.centerFn ?? this.defaultNodesCenterFn,
+      priority: t.priority ?? this.defaultNodesPriorityFn()
+    }), this.htmlController.attachNode(o), Array.from(t.ports ?? []).forEach((r) => {
       this.markPort({
-        portId: s.id,
-        element: s.element,
-        nodeId: t,
-        centerFn: s.centerFn,
-        direction: s.direction
+        portId: r.id,
+        element: r.element,
+        nodeId: o,
+        direction: r.direction
       });
     });
   }
-  markPort(e) {
-    const t = this.portIdGenerator.create(e.portId);
-    if (this.graphStore.getPort(t) !== void 0)
-      throw new f("failed to add port with existing id");
-    if (this.graphStore.getNode(e.nodeId) === void 0)
-      throw new f("failed to set port on nonexisting node");
+  markPort(t) {
+    const o = this.portIdGenerator.create(t.portId);
+    if (this.graphStore.getPort(o) !== void 0)
+      throw new S("failed to add port with existing id");
+    if (this.graphStore.getNode(t.nodeId) === void 0)
+      throw new S("failed to set port on nonexisting node");
     this.graphStore.addPort({
-      portId: t,
-      element: e.element,
-      nodeId: e.nodeId,
-      centerFn: e.centerFn ?? this.defaultPortsCenterFn,
-      direction: e.direction ?? this.defaultPortsDirection
+      portId: o,
+      element: t.element,
+      nodeId: t.nodeId,
+      direction: t.direction ?? this.defaultPortsDirection
     });
   }
-  addEdge(e) {
-    const t = this.edgeIdGenerator.create(e.edgeId);
-    if (this.graphStore.getEdge(t) !== void 0)
-      throw new f("failed to add edge with existing id");
-    if (this.graphStore.getPort(e.from) === void 0)
-      throw new f("failed to add edge from nonexisting port");
-    if (this.graphStore.getPort(e.to) === void 0)
-      throw new f("failed to add edge to nonexisting port");
-    const s = this.resolveEdgeType(e.from, e.to);
+  addEdge(t) {
+    const o = this.edgeIdGenerator.create(t.edgeId);
+    if (this.graphStore.getEdge(o) !== void 0)
+      throw new S("failed to add edge with existing id");
+    if (this.graphStore.getPort(t.from) === void 0)
+      throw new S("failed to add edge from nonexisting port");
+    if (this.graphStore.getPort(t.to) === void 0)
+      throw new S("failed to add edge to nonexisting port");
     this.graphStore.addEdge({
-      edgeId: t,
-      from: e.from,
-      to: e.to,
-      shape: e.shapeFactory(s),
-      priority: e.priority ?? this.defaultEdgesPriorityFn()
-    }), this.htmlController.attachEdge(t);
-  }
-  updateEdge(e) {
-    const t = this.graphStore.getEdge(e.edgeId);
-    if (t === void 0)
-      throw new f("failed to update nonexisting edge");
-    if (e.shape !== void 0) {
-      const s = this.resolveEdgeType(t.from, t.to);
-      t.shape = e.shape(s), this.htmlController.updateEdgeShape(e.edgeId);
-    }
-    e.priority !== void 0 && (t.priority = e.priority, this.htmlController.updateEdgePriority(e.edgeId)), this.htmlController.updateEdge(e.edgeId);
-  }
-  updatePort(e, t) {
-    const s = this.graphStore.getPort(e);
-    if (s === void 0)
-      throw new f("failed to unset nonexisting port");
-    s.direction = t.direction ?? s.direction, s.centerFn = t.centerFn ?? s.centerFn, this.graphStore.getPortAdjacentEdgeIds(e).forEach((i) => {
-      this.htmlController.updateEdge(i);
+      edgeId: o,
+      from: t.from,
+      to: t.to,
+      shape: t.shape,
+      priority: t.priority ?? this.defaultEdgesPriorityFn()
+    }), this.htmlController.attachEdge(o);
+  }
+  updateEdge(t) {
+    const o = this.graphStore.getEdge(t.edgeId);
+    if (o === void 0)
+      throw new S("failed to update nonexisting edge");
+    t.shape !== void 0 && (o.shape = t.shape, this.htmlController.updateEdgeShape(t.edgeId)), t.priority !== void 0 && (o.priority = t.priority, this.htmlController.updateEdgePriority(t.edgeId)), t.from !== void 0 && this.graphStore.updateEdgeFrom(t.edgeId, t.from), t.to !== void 0 && this.graphStore.updateEdgeTo(t.edgeId, t.to), this.htmlController.renderEdge(t.edgeId);
+  }
+  updatePort(t, o) {
+    const r = this.graphStore.getPort(t);
+    if (r === void 0)
+      throw new S("failed to unset nonexisting port");
+    r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((n) => {
+      this.htmlController.renderEdge(n);
     });
   }
-  updateNode(e, t) {
-    const s = this.graphStore.getNode(e);
-    if (s === void 0)
-      throw new f("failed to update nonexisting node");
-    s.x = (t == null ? void 0 : t.x) ?? s.x, s.y = (t == null ? void 0 : t.y) ?? s.y, s.centerFn = (t == null ? void 0 : t.centerFn) ?? s.centerFn, s.priority = (t == null ? void 0 : t.priority) ?? s.priority, this.htmlController.updateNodeCoordinates(e), this.htmlController.updateNodePriority(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((i) => {
-      this.htmlController.updateEdge(i);
+  updateNode(t, o) {
+    const r = this.graphStore.getNode(t);
+    if (r === void 0)
+      throw new S("failed to update nonexisting node");
+    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = (o == null ? void 0 : o.centerFn) ?? r.centerFn, r.priority = (o == null ? void 0 : o.priority) ?? r.priority, this.htmlController.updateNodeCoordinates(t), this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((n) => {
+      this.htmlController.renderEdge(n);
     });
   }
-  removeEdge(e) {
-    if (this.graphStore.getEdge(e) === void 0)
-      throw new f("failed to remove nonexisting edge");
-    this.htmlController.detachEdge(e), this.graphStore.removeEdge(e);
+  removeEdge(t) {
+    if (this.graphStore.getEdge(t) === void 0)
+      throw new S("failed to remove nonexisting edge");
+    this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
-  unmarkPort(e) {
-    if (this.graphStore.getPort(e) === void 0)
-      throw new f("failed to unset nonexisting port");
-    this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
-      this.removeEdge(t);
-    }), this.graphStore.removePort(e);
+  unmarkPort(t) {
+    if (this.graphStore.getPort(t) === void 0)
+      throw new S("failed to unset nonexisting port");
+    this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
+      this.removeEdge(o);
+    }), this.graphStore.removePort(t);
   }
-  removeNode(e) {
-    if (this.graphStore.getNode(e) === void 0)
-      throw new f("failed to remove nonexisting node");
-    this.graphStore.getNodePortIds(e).forEach((t) => {
-      this.unmarkPort(t);
-    }), this.htmlController.detachNode(e), this.graphStore.removeNode(e);
+  removeNode(t) {
+    if (this.graphStore.getNode(t) === void 0)
+      throw new S("failed to remove nonexisting node");
+    this.graphStore.getNodePortIds(t).forEach((o) => {
+      this.unmarkPort(o);
+    }), this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
-  patchViewportMatrix(e) {
-    this.viewportTransformer.patchViewportMatrix(e), this.htmlController.applyTransform();
+  patchViewportMatrix(t) {
+    this.viewportTransformer.patchViewportMatrix(t), this.htmlController.applyTransform();
   }
-  patchContentMatrix(e) {
-    this.viewportTransformer.patchContentMatrix(e), this.htmlController.applyTransform();
+  patchContentMatrix(t) {
+    this.viewportTransformer.patchContentMatrix(t), this.htmlController.applyTransform();
   }
   clear() {
     this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
@@ -901,844 +1206,659 @@ class le {
   destroy() {
     this.clear(), this.htmlController.destroy();
   }
-  resolveEdgeType(e, t) {
-    if (e === t)
-      return C.PortCycle;
-    const s = this.graphStore.getPortNodeId(e), o = this.graphStore.getPortNodeId(t);
-    return s === o ? C.NodeCycle : C.Regular;
-  }
 }
-const ge = () => {
-  const r = document.createElement("div");
-  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, ue = () => {
-  const r = document.createElement("div");
-  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, we = () => {
-  const r = document.createElement("div");
-  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden", r;
-};
-class ye {
-  constructor(e, t) {
-    n(this, "canvasWrapper", null);
-    n(this, "host", ge());
-    n(this, "container", ue());
-    n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    this.graphStore = e, this.viewportTransformer = t, this.host.appendChild(this.container);
-  }
-  attach(e) {
-    this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host);
-  }
-  detach() {
-    this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
-  }
-  applyTransform() {
-    const e = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.dx}, ${e.dy})`;
-  }
-  attachNode(e) {
-    const t = this.graphStore.getNode(e), s = we();
-    s.appendChild(t.element), this.container.appendChild(s), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoordinates(e), this.updateNodePriority(e), s.style.visibility = "visible";
-  }
-  detachNode(e) {
-    const t = this.graphStore.getNode(e), s = this.nodeIdToWrapperElementMap.get(e);
-    s.removeChild(t.element), this.container.removeChild(s), this.nodeIdToWrapperElementMap.delete(e);
-  }
-  attachEdge(e) {
-    const t = this.graphStore.getEdge(e);
-    this.edgeIdToElementMap.set(e, t.shape.svg), this.container.appendChild(t.shape.svg), this.updateEdge(e), this.updateEdgePriority(e);
-  }
-  detachEdge(e) {
-    const t = this.graphStore.getEdge(e);
-    this.container.removeChild(t.shape.svg), this.edgeIdToElementMap.delete(e);
-  }
-  clear() {
-    this.edgeIdToElementMap.forEach((e, t) => {
-      this.detachEdge(t);
-    }), this.nodeIdToWrapperElementMap.forEach((e, t) => {
-      this.detachNode(t);
-    });
-  }
-  destroy() {
-    this.clear(), this.detach(), this.host.removeChild(this.container);
-  }
-  updateNodeCoordinates(e) {
-    const t = this.nodeIdToWrapperElementMap.get(e), s = this.graphStore.getNode(e), { width: o, height: i } = s.element.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix().scale, a = s.centerFn(o, i), d = s.x - h * a.x, c = s.y - h * a.y;
-    t.style.transform = `translate(${d}px, ${c}px)`;
-  }
-  updateNodePriority(e) {
-    const t = this.graphStore.getNode(e), s = this.nodeIdToWrapperElementMap.get(e);
-    s.style.zIndex = `${t.priority}`;
-  }
-  updateEdgeShape(e) {
-    const t = this.edgeIdToElementMap.get(e);
-    this.container.removeChild(t);
-    const s = this.graphStore.getEdge(e);
-    this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
-  }
-  updateEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), i = s.element.getBoundingClientRect(), h = o.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix(), c = {
-      x: d.scale * (i.left - a.left) + d.dx,
-      y: d.scale * (i.top - a.top) + d.dy
-    }, u = {
-      x: d.scale * (h.left - a.left) + d.dx,
-      y: d.scale * (h.top - a.top) + d.dy
-    }, w = s.centerFn(
-      i.width * d.scale,
-      i.height * d.scale
-    ), m = o.centerFn(
-      h.width * d.scale,
-      h.height * d.scale
-    ), y = {
-      x: c.x + w.x,
-      y: c.y + w.y
-    }, v = {
-      x: u.x + m.x,
-      y: u.y + m.y
-    }, P = Math.min(y.x, v.x), S = Math.min(y.y, v.y), M = Math.abs(v.x - y.x), b = Math.abs(v.y - y.y);
-    t.shape.svg.style.width = `${M}px`, t.shape.svg.style.height = `${b}px`, t.shape.svg.style.transform = `translate(${P}px, ${S}px)`;
-    const T = y.x <= v.x ? 1 : -1, F = y.y <= v.y ? 1 : -1;
-    t.shape.update(
-      { x: M, y: b },
-      T,
-      F,
-      s.direction,
-      o.direction
-    );
-  }
-  updateEdgePriority(e) {
-    const t = this.graphStore.getEdge(e);
-    t.shape.svg.style.zIndex = `${t.priority}`;
-  }
-}
-class me {
-  constructor(e) {
-    n(this, "publicViewportTransformer");
-    n(this, "publicGraphStore");
-    n(this, "canvasController");
-    const t = new Q(), s = new q();
-    this.publicGraphStore = new ee(s), this.publicViewportTransformer = new Z(
-      t
-    );
-    const o = new ye(s, t);
-    this.canvasController = new le(
-      s,
-      o,
-      t,
-      e.nodesCenterFn,
-      e.portsCenterFn,
-      e.portsDirection,
-      e.nodesPriorityFn,
-      e.edgesPriorityFn
-    );
-  }
-}
-const H = (r, e) => ({
-  x: r / 2,
-  y: e / 2
-}), g = {
-  edgeColor: "#5c5c5c",
-  edgeWidth: 1,
-  edgeArrowLength: 15,
-  edgeArrowWidth: 4,
-  edgeArrowOffset: 15,
-  hasSourceArrow: !1,
-  hasTargetArrow: !1,
-  cycleSize: 30,
-  roundness: 10,
-  detourDistance: 100,
-  detourDirection: -Math.PI / 2,
-  smallCycleSize: 15,
-  curvature: 90
-}, R = (r) => {
-  switch (r == null ? void 0 : r.type) {
-    case "custom":
-      return r.factory;
-    case "straight":
-      return he({
-        color: r.color ?? g.edgeColor,
-        width: r.width ?? g.edgeWidth,
-        arrowLength: r.arrowLength ?? g.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
-        roundness: r.roundness ?? g.roundness,
-        detourDistance: r.detourDistance ?? g.detourDistance,
-        detourDirection: r.detourDirection ?? g.detourDirection
-      });
-    case "horizontal":
-      return ce({
-        color: r.color ?? g.edgeColor,
-        width: r.width ?? g.edgeWidth,
-        arrowLength: r.arrowLength ?? g.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
-        roundness: r.roundness ?? g.roundness,
-        detourDistance: r.detourDistance ?? g.detourDistance,
-        detourDirection: r.detourDirection ?? g.detourDirection
-      });
-    case "vertical":
-      return de({
-        color: r.color ?? g.edgeColor,
-        width: r.width ?? g.edgeWidth,
-        arrowLength: r.arrowLength ?? g.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
-        roundness: r.roundness ?? g.roundness,
-        detourDistance: r.detourDistance ?? g.detourDistance,
-        detourDirection: r.detourDirection ?? g.detourDirection
-      });
-    default:
-      return ae({
-        color: r.color ?? g.edgeColor,
-        width: r.width ?? g.edgeWidth,
-        arrowLength: r.arrowLength ?? g.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
-        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
-        cycleRadius: r.cycleRadius ?? g.cycleSize,
-        detourDistance: r.detourDistance ?? g.detourDistance,
-        detourDirection: r.detourDirection ?? g.detourDirection,
-        smallCycleRadius: r.smallCycleRadius ?? g.smallCycleSize,
-        curvature: r.curvature ?? g.curvature
-      });
-  }
-}, z = (r) => () => r, U = z(0), k = () => {
-  let r = 0;
-  return () => r++;
-}, pe = (r, e) => {
-  const t = [
-    U,
-    U
-  ];
-  r === "incremental" && (t[0] = k()), e === "incremental" && (t[1] = k());
-  const s = k();
-  return r === "shared-incremental" && (t[0] = s), e === "shared-incremental" && (t[1] = s), typeof r == "number" && (t[0] = z(r)), typeof e == "number" && (t[1] = z(e)), typeof r == "function" && (t[0] = r), typeof e == "function" && (t[1] = e), t;
-}, ve = (r) => {
-  var s, o, i, h, a, d;
-  const [e, t] = pe(
-    (s = r.nodes) == null ? void 0 : s.priority,
-    (o = r.edges) == null ? void 0 : o.priority
-  );
-  return {
-    nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? H,
-      priorityFn: e
-    },
-    ports: {
-      centerFn: ((h = r.ports) == null ? void 0 : h.centerFn) ?? H,
-      direction: ((a = r.ports) == null ? void 0 : a.direction) ?? 0
-    },
-    edges: {
-      shapeFactory: R(((d = r.edges) == null ? void 0 : d.shape) ?? {}),
-      priorityFn: t
-    }
-  };
-};
-class fe {
-  constructor() {
-    n(this, "keyMap", /* @__PURE__ */ new Map());
-    n(this, "valueMap", /* @__PURE__ */ new Map());
-  }
-  set(e, t) {
-    this.keyMap.set(e, t), this.valueMap.set(t, e);
-  }
-  hasKey(e) {
-    return this.keyMap.has(e);
-  }
-  hasValue(e) {
-    return this.valueMap.has(e);
-  }
-  getByKey(e) {
-    return this.keyMap.get(e);
+class xt {
+  constructor(t) {
+    s(this, "transformation");
+    s(this, "model");
+    s(this, "canvasController");
+    s(this, "edgeShapeFactory");
+    this.apiOptions = t;
+    const o = ct(this.apiOptions), r = new at(), i = new dt();
+    this.model = new lt(i), this.transformation = new gt(r);
+    const n = new ft(i, r);
+    this.canvasController = new vt(
+      i,
+      n,
+      r,
+      o.nodes.centerFn,
+      o.ports.direction,
+      o.nodes.priorityFn,
+      o.edges.priorityFn
+    ), this.edgeShapeFactory = o.edges.shapeFactory;
   }
-  getByValue(e) {
-    return this.valueMap.get(e);
+  attach(t) {
+    return this.canvasController.attach(t), this;
   }
-  deleteByKey(e) {
-    const t = this.keyMap.get(e);
-    t !== void 0 && this.valueMap.delete(t), this.keyMap.delete(e);
+  detach() {
+    return this.canvasController.detach(), this;
   }
-  deleteByValue(e) {
-    const t = this.valueMap.get(e);
-    t !== void 0 && this.keyMap.delete(t), this.valueMap.delete(e);
+  addNode(t) {
+    return this.canvasController.addNode({
+      nodeId: t.id,
+      element: t.element,
+      x: t.x,
+      y: t.y,
+      ports: t.ports,
+      centerFn: t.centerFn,
+      priority: t.priority
+    }), this;
   }
-  forEach(e) {
-    this.keyMap.forEach((t, s) => {
-      e(t, s);
-    });
+  updateNode(t, o) {
+    return this.canvasController.updateNode(t, {
+      x: o == null ? void 0 : o.x,
+      y: o == null ? void 0 : o.y,
+      priority: o == null ? void 0 : o.priority,
+      centerFn: o == null ? void 0 : o.centerFn
+    }), this;
   }
-  clear() {
-    this.keyMap.clear(), this.valueMap.clear();
+  removeNode(t) {
+    return this.canvasController.removeNode(t), this;
   }
-}
-class xe {
-  constructor(e) {
-    n(this, "transformation");
-    n(this, "model");
-    n(this, "di");
-    n(this, "edgeShapeFactory");
-    n(this, "nodes", new fe());
-    n(this, "nodeIdGenerator", new I(
-      (e) => this.nodes.hasKey(e)
-    ));
-    n(this, "nodesResizeObserver");
-    this.apiOptions = e, this.nodesResizeObserver = new window.ResizeObserver((s) => {
-      s.forEach((o) => {
-        const i = o.target, h = this.nodes.getByValue(i);
-        this.updateNode(h), this.model.getNodeAdjacentEdgeIds(h).forEach((d) => {
-          this.updateEdge(d);
-        });
-      });
-    });
-    const t = ve(this.apiOptions ?? {});
-    this.di = new me({
-      nodesCenterFn: t.nodes.centerFn,
-      nodesPriorityFn: t.nodes.priorityFn,
-      portsCenterFn: t.ports.centerFn,
-      portsDirection: t.ports.direction,
-      edgesPriorityFn: t.edges.priorityFn
-    }), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = t.edges.shapeFactory;
-  }
-  addNode(e) {
-    const t = this.nodeIdGenerator.create(e.id);
-    return this.di.canvasController.addNode({
-      nodeId: t,
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      ports: e.ports,
-      centerFn: e.centerFn,
-      priority: e.priority
-    }), this.nodes.set(t, e.element), this.nodesResizeObserver.observe(e.element), this;
-  }
-  updateNode(e, t) {
-    return this.di.canvasController.updateNode(e, {
-      x: t == null ? void 0 : t.x,
-      y: t == null ? void 0 : t.y,
-      priority: t == null ? void 0 : t.priority,
-      centerFn: t == null ? void 0 : t.centerFn
+  addEdge(t) {
+    return this.canvasController.addEdge({
+      edgeId: t.id,
+      from: t.from,
+      to: t.to,
+      shape: t.shape ?? this.edgeShapeFactory(),
+      priority: t.priority
     }), this;
   }
-  removeNode(e) {
-    this.di.canvasController.removeNode(e);
-    const t = this.nodes.getByKey(e);
-    if (this.nodes.deleteByKey(e), t === void 0)
-      throw new f("failed to remove non existing node");
-    return this.nodesResizeObserver.unobserve(t), this;
-  }
-  markPort(e) {
-    return this.di.canvasController.markPort({
-      portId: e.id,
-      element: e.element,
-      nodeId: e.nodeId,
-      centerFn: e.centerFn,
-      direction: e.direction
+  updateEdge(t, o) {
+    return this.canvasController.updateEdge({
+      edgeId: t,
+      shape: o == null ? void 0 : o.shape,
+      priority: o == null ? void 0 : o.priority,
+      from: o == null ? void 0 : o.from,
+      to: o == null ? void 0 : o.to
     }), this;
   }
-  updatePort(e, t) {
-    return this.di.canvasController.updatePort(e, {
-      direction: t == null ? void 0 : t.direction,
-      centerFn: t == null ? void 0 : t.centerFn
-    }), this;
+  removeEdge(t) {
+    return this.canvasController.removeEdge(t), this;
   }
-  unmarkPort(e) {
-    return this.di.canvasController.unmarkPort(e), this;
-  }
-  addEdge(e) {
-    const t = e.shape !== void 0 ? R(e.shape) : this.edgeShapeFactory;
-    return this.di.canvasController.addEdge({
-      edgeId: e.id,
-      from: e.from,
-      to: e.to,
-      shapeFactory: t,
-      priority: e.priority
+  markPort(t) {
+    return this.canvasController.markPort({
+      portId: t.id,
+      element: t.element,
+      nodeId: t.nodeId,
+      direction: t.direction
     }), this;
   }
-  updateEdge(e, t) {
-    const s = (t == null ? void 0 : t.shape) !== void 0 ? R(t.shape) : void 0;
-    return this.di.canvasController.updateEdge({
-      edgeId: e,
-      shape: s,
-      priority: t == null ? void 0 : t.priority
+  updatePort(t, o) {
+    return this.canvasController.updatePort(t, {
+      direction: o == null ? void 0 : o.direction
     }), this;
   }
-  removeEdge(e) {
-    return this.di.canvasController.removeEdge(e), this;
+  unmarkPort(t) {
+    return this.canvasController.unmarkPort(t), this;
   }
-  patchViewportMatrix(e) {
-    return this.di.canvasController.patchViewportMatrix(e), this;
+  patchViewportMatrix(t) {
+    return this.canvasController.patchViewportMatrix(t), this;
   }
-  patchContentMatrix(e) {
-    return this.di.canvasController.patchContentMatrix(e), this;
+  patchContentMatrix(t) {
+    return this.canvasController.patchContentMatrix(t), this;
   }
   clear() {
-    return this.di.canvasController.clear(), this.nodes.clear(), this;
-  }
-  attach(e) {
-    return this.di.canvasController.attach(e), this;
-  }
-  detach() {
-    return this.di.canvasController.detach(), this;
+    return this.canvasController.clear(), this;
   }
   destroy() {
-    this.clear(), this.di.canvasController.destroy(), this.nodesResizeObserver.disconnect();
+    this.clear(), this.canvasController.destroy();
   }
 }
-const W = (r, e, t) => {
-  const { x: s, y: o, width: i, height: h } = r.getBoundingClientRect();
-  return e >= s && e < s + i && t >= o && t <= o + h;
-}, V = (r, e, t) => e >= 0 && e < r.innerWidth && t >= 0 && t <= r.innerHeight, O = (r, e) => {
-  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
+const P = (e, t, o) => {
+  const { x: r, y: i, width: n, height: d } = e.getBoundingClientRect();
+  return t >= r && t <= r + n && o >= i && o <= i + d;
+}, L = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, D = (e, t) => {
+  t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
 };
-class Ee {
-  constructor(e, t) {
-    n(this, "model");
-    n(this, "transformation");
-    n(this, "maxNodePriority", 0);
-    n(this, "nodes", /* @__PURE__ */ new Map());
-    n(this, "grabbedNodeId", null);
-    n(this, "onNodeDrag");
-    n(this, "onBeforeNodeDrag");
-    n(this, "nodeIdGenerator", new I(
-      (e) => this.nodes.has(e)
+class St {
+  constructor(t, o) {
+    s(this, "model");
+    s(this, "transformation");
+    s(this, "maxNodePriority", 0);
+    s(this, "nodes", /* @__PURE__ */ new Map());
+    s(this, "grabbedNodeId", null);
+    s(this, "onNodeDrag");
+    s(this, "onBeforeNodeDrag");
+    s(this, "nodeIdGenerator", new C(
+      (t) => this.nodes.has(t)
     ));
-    n(this, "element", null);
-    n(this, "onCanvasMouseUp", () => {
-      this.cancelMouseDrag();
-    });
-    n(this, "onCanvasMouseMove", (e) => {
-      if (this.element !== null && (!W(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY))) {
+    s(this, "element", null);
+    s(this, "onWindowMouseMove", (t) => {
+      if (this.element !== null && (!P(this.element, t.clientX, t.clientY) || !L(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
-      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
+      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
     });
-    n(this, "onCanvasTouchStart", (e) => {
-      this.previousTouchCoords = [
-        e.touches[0].clientX,
-        e.touches[0].clientY
-      ];
+    s(this, "onWindowMouseUp", (t) => {
+      t.button === 0 && this.cancelMouseDrag();
     });
-    n(this, "onCanvasTouchMove", (e) => {
-      if (e.touches.length === 1) {
-        const t = e.touches[0];
-        if (this.element !== null && (!W(this.element, t.clientX, t.clientY) || !V(this.window, t.clientX, t.clientY))) {
-          this.cancelTouchDrag();
-          return;
-        }
-        if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
-          e.stopImmediatePropagation();
-          const s = t.clientX - this.previousTouchCoords[0], o = t.clientY - this.previousTouchCoords[1];
-          this.dragNode(this.grabbedNodeId, s, o), this.previousTouchCoords = [
-            e.touches[0].clientX,
-            e.touches[0].clientY
-          ];
-        }
+    s(this, "onWindowTouchMove", (t) => {
+      if (t.touches.length !== 1)
+        return;
+      const o = t.touches[0];
+      if (this.element !== null && (!P(this.element, o.clientX, o.clientY) || !L(this.window, o.clientX, o.clientY))) {
+        this.cancelTouchDrag();
+        return;
+      }
+      if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
+        const r = o.clientX - this.previousTouchCoords.x, i = o.clientY - this.previousTouchCoords.y;
+        this.dragNode(this.grabbedNodeId, r, i), this.previousTouchCoords = {
+          x: t.touches[0].clientX,
+          y: t.touches[0].clientY
+        };
       }
     });
-    n(this, "onCanvasTouchEnd", (e) => {
-      e.touches.length > 0 ? this.previousTouchCoords = [
-        e.touches[0].clientX,
-        e.touches[0].clientY
-      ] : this.cancelTouchDrag();
+    s(this, "onWindowTouchFinish", (t) => {
+      t.touches.length > 0 ? this.previousTouchCoords = {
+        x: t.touches[0].clientX,
+        y: t.touches[0].clientY
+      } : this.cancelTouchDrag();
     });
-    n(this, "previousTouchCoords", null);
-    n(this, "freezePriority");
-    n(this, "window", window);
-    n(this, "dragCursor");
-    var i, h;
-    this.canvas = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
-    const s = () => {
-    };
-    this.onNodeDrag = ((i = t == null ? void 0 : t.events) == null ? void 0 : i.onNodeDrag) ?? s;
-    const o = () => !0;
-    this.onBeforeNodeDrag = ((h = t == null ? void 0 : t.events) == null ? void 0 : h.onBeforeNodeDrag) ?? o, this.freezePriority = (t == null ? void 0 : t.grabPriorityStrategy) === "freeze", this.dragCursor = (t == null ? void 0 : t.dragCursor) !== void 0 ? t.dragCursor : "grab";
-  }
-  addNode(e) {
-    const t = this.nodeIdGenerator.create(e.id);
-    this.canvas.addNode({ ...e, id: t }), this.updateMaxNodePriority(t);
-    const s = (i) => {
-      if (this.element === null)
+    s(this, "previousTouchCoords", null);
+    s(this, "freezePriority");
+    s(this, "window", window);
+    s(this, "dragCursor");
+    var r, i;
+    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.onNodeDrag = ((r = o == null ? void 0 : o.events) == null ? void 0 : r.onNodeDrag) ?? (() => {
+    }), this.onBeforeNodeDrag = ((i = o == null ? void 0 : o.events) == null ? void 0 : i.onBeforeNodeDrag) ?? (() => !0), this.freezePriority = (o == null ? void 0 : o.moveOnTop) === !1, this.dragCursor = (o == null ? void 0 : o.dragCursor) !== void 0 ? o.dragCursor : "grab";
+  }
+  attach(t) {
+    return this.detach(), this.element = t, this.canvas.attach(this.element), this;
+  }
+  detach() {
+    return this.canvas.detach(), this.element !== null && (this.element = null), this;
+  }
+  addNode(t) {
+    const o = this.nodeIdGenerator.create(t.id);
+    this.canvas.addNode({ ...t, id: o }), this.updateMaxNodePriority(o);
+    const r = (n) => {
+      if (this.element === null || n.button !== 0)
         return;
-      const h = this.model.getNode(t);
+      const d = this.model.getNode(o);
       this.onBeforeNodeDrag({
-        nodeId: t,
-        element: e.element,
-        x: h.x,
-        y: h.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = t, O(this.element, this.dragCursor), this.moveNodeOnTop(t), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
-    }, o = (i) => {
-      const h = this.model.getNode(t);
+        nodeId: o,
+        element: t.element,
+        x: d.x,
+        y: d.y
+      }) && (n.stopImmediatePropagation(), this.grabbedNodeId = o, D(this.element, this.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+    }, i = (n) => {
+      n.stopImmediatePropagation(), this.previousTouchCoords = {
+        x: n.touches[0].clientX,
+        y: n.touches[0].clientY
+      };
+      const d = this.model.getNode(o);
       this.onBeforeNodeDrag({
-        nodeId: t,
-        element: e.element,
-        x: h.x,
-        y: h.y
-      }) && i.touches.length === 1 && (this.grabbedNodeId = t, this.moveNodeOnTop(t), this.window.addEventListener("touchmove", this.onCanvasTouchMove), this.window.addEventListener("touchend", this.onCanvasTouchEnd), this.window.addEventListener("touchcancel", this.onCanvasTouchEnd));
+        nodeId: o,
+        element: t.element,
+        x: d.x,
+        y: d.y
+      }) && n.touches.length === 1 && (this.grabbedNodeId = o, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
     };
-    return this.nodes.set(t, {
-      element: e.element,
-      onMouseDown: s,
-      onTouchStart: o
-    }), e.element.addEventListener("mousedown", s), e.element.addEventListener("touchstart", o), this;
+    return this.nodes.set(o, {
+      element: t.element,
+      onMouseDown: r,
+      onTouchStart: i
+    }), t.element.addEventListener("mousedown", r), t.element.addEventListener("touchstart", i), this;
   }
-  updateNode(e, t) {
-    return this.canvas.updateNode(e, t), this.updateMaxNodePriority(e), this;
+  updateNode(t, o) {
+    return this.canvas.updateNode(t, o), this.updateMaxNodePriority(t), this;
   }
-  removeNode(e) {
-    const t = this.nodes.get(e);
-    return t !== void 0 && (t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart)), this.canvas.removeNode(e), this.nodes.delete(e), this;
+  removeNode(t) {
+    const o = this.nodes.get(t);
+    return o !== void 0 && (o.element.removeEventListener("mousedown", o.onMouseDown), o.element.removeEventListener("touchstart", o.onTouchStart)), this.nodes.delete(t), this.canvas.removeNode(t), this;
   }
-  markPort(e) {
-    return this.canvas.markPort(e), this;
+  markPort(t) {
+    return this.canvas.markPort(t), this;
   }
-  updatePort(e, t) {
-    return this.canvas.updatePort(e, t), this;
+  updatePort(t, o) {
+    return this.canvas.updatePort(t, o), this;
   }
-  unmarkPort(e) {
-    return this.canvas.unmarkPort(e), this;
+  unmarkPort(t) {
+    return this.canvas.unmarkPort(t), this;
   }
-  addEdge(e) {
-    return this.canvas.addEdge(e), this;
+  addEdge(t) {
+    return this.canvas.addEdge(t), this;
   }
-  updateEdge(e, t) {
-    return this.canvas.updateEdge(e, t), this;
+  updateEdge(t, o) {
+    return this.canvas.updateEdge(t, o), this;
   }
-  removeEdge(e) {
-    return this.canvas.removeEdge(e), this;
+  removeEdge(t) {
+    return this.canvas.removeEdge(t), this;
   }
-  patchViewportMatrix(e) {
-    return this.canvas.patchViewportMatrix(e), this;
+  patchViewportMatrix(t) {
+    return this.canvas.patchViewportMatrix(t), this;
   }
-  patchContentMatrix(e) {
-    return this.canvas.patchContentMatrix(e), this;
+  patchContentMatrix(t) {
+    return this.canvas.patchContentMatrix(t), this;
   }
   clear() {
-    return this.canvas.clear(), this.nodes.forEach((e) => {
-      e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart);
+    return this.canvas.clear(), this.nodes.forEach((t) => {
+      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
     }), this.nodes.clear(), this.maxNodePriority = 0, this;
   }
-  attach(e) {
-    return this.detach(), this.element = e, this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.canvas.attach(this.element), this;
-  }
-  detach() {
-    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("touchstart", this.onCanvasTouchStart), this.element = null), this;
-  }
   destroy() {
-    this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.nodes.forEach((e) => {
-      e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart);
-    }), this.nodes.clear(), this.canvas.destroy();
-  }
-  dragNode(e, t, s) {
-    const o = this.model.getNode(e);
-    if (o === null)
-      throw new f("failed to drag nonexisting node");
-    const i = this.canvas.transformation.getContentMatrix(), h = i.scale * o.x + i.dx, a = i.scale * o.y + i.dy, d = h + t, c = a + s, u = this.canvas.transformation.getViewportMatrix(), w = u.scale * d + u.dx, m = u.scale * c + u.dy;
-    this.canvas.updateNode(e, { x: w, y: m }), this.onNodeDrag({
-      nodeId: e,
-      element: o.element,
-      x: o.x,
-      y: o.y
+    this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
+  }
+  dragNode(t, o, r) {
+    const i = this.model.getNode(t);
+    if (i === null)
+      return;
+    const n = this.canvas.transformation.getContentMatrix(), d = n.scale * i.x + n.dx, c = n.scale * i.y + n.dy, h = d + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), w = a.scale * h + a.dx, y = a.scale * l + a.dy;
+    this.canvas.updateNode(t, { x: w, y }), this.onNodeDrag({
+      nodeId: t,
+      element: i.element,
+      x: i.x,
+      y: i.y
     });
   }
-  updateMaxNodePriority(e) {
-    const t = this.model.getNode(e).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, t);
+  updateMaxNodePriority(t) {
+    const o = this.model.getNode(t).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
-  moveNodeOnTop(e) {
+  moveNodeOnTop(t) {
     if (this.freezePriority)
       return;
-    this.maxNodePriority += 2, this.updateNode(e, { priority: this.maxNodePriority });
-    const t = this.maxNodePriority - 1;
-    this.model.getNodeAdjacentEdgeIds(e).forEach((o) => {
-      this.updateEdge(o, { priority: t });
+    this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
+    const o = this.maxNodePriority - 1;
+    this.model.getNodeAdjacentEdgeIds(t).forEach((i) => {
+      this.updateEdge(i, { priority: o });
     });
   }
   cancelMouseDrag() {
-    this.grabbedNodeId = null, this.element !== null && O(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNodeId = null, this.element !== null && D(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
-    this.window.removeEventListener("mouseup", this.onCanvasMouseUp), this.window.removeEventListener("mousemove", this.onCanvasMouseMove);
+    this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
   cancelTouchDrag() {
     this.previousTouchCoords = null, this.grabbedNodeId = null, this.removeTouchDragListeners();
   }
   removeTouchDragListeners() {
-    this.window.removeEventListener("touchmove", this.onCanvasTouchMove), this.window.removeEventListener("touchend", this.onCanvasTouchEnd), this.window.removeEventListener("touchcancel", this.onCanvasTouchEnd);
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const Ae = () => {
-}, Ce = (r, e) => e, Pe = (r, e) => {
-  const t = e !== null ? 1 / e : null, s = r !== null ? 1 / r : null;
-  return (o, i) => s !== null && i.scale > s && i.scale > o.scale || t !== null && i.scale < t && i.scale < o.scale ? o : i;
-}, Se = (r, e, t, s) => (o, i, h, a) => {
-  let d = i.dx, c = i.dy;
-  r !== null && d < r && d < o.dx && (d = o.dx);
-  const u = h * o.scale;
-  e !== null && d > e - u && d > o.dx && (d = o.dx), t !== null && c < t && c < o.dy && (c = o.dy);
-  const w = a * o.scale;
-  return s !== null && c > s - w && c > o.dy && (c = o.dy), { scale: i.scale, dx: d, dy: c };
-}, K = (r) => {
-  switch (r.type) {
+const At = (e) => {
+  const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, i = e.maxY !== null ? e.maxY : 1 / 0;
+  return (n) => {
+    let d = n.nextTransform.dx, c = n.nextTransform.dy;
+    d < t && d < n.prevTransform.dx && (d = Math.min(n.prevTransform.dx, t));
+    const h = n.canvasWidth * n.prevTransform.scale;
+    d > o - h && d > n.prevTransform.dx && (d = Math.max(n.prevTransform.dx, o - h)), c < r && c < n.prevTransform.dy && (c = Math.min(n.prevTransform.dy, r));
+    const l = n.canvasHeight * n.prevTransform.scale;
+    return c > i - l && c > n.prevTransform.dy && (c = Math.max(n.prevTransform.dy, i - l)), { scale: n.nextTransform.scale, dx: d, dy: c };
+  };
+}, Et = (e) => {
+  const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, i = o !== null ? 1 / o : 1 / 0;
+  return (n) => {
+    let d = n.nextTransform.scale, c = n.nextTransform.dx, h = n.nextTransform.dy;
+    return n.nextTransform.scale > i && n.nextTransform.scale > n.prevTransform.scale && (d = Math.max(n.prevTransform.scale, i), c = n.prevTransform.dx, h = n.prevTransform.dy), n.nextTransform.scale < r && n.nextTransform.scale < n.prevTransform.scale && (d = Math.min(n.prevTransform.scale, r), c = n.prevTransform.dx, h = n.prevTransform.dy), {
+      scale: d,
+      dx: c,
+      dy: h
+    };
+  };
+}, Tt = (e) => (t) => e.reduce(
+  (o, r) => r({
+    prevTransform: t.prevTransform,
+    nextTransform: o,
+    canvasWidth: t.canvasWidth,
+    canvasHeight: t.canvasHeight
+  }),
+  t.nextTransform
+), O = (e) => {
+  if (typeof e == "function")
+    return e;
+  switch (e.type) {
     case "scale-limit":
-      return Pe(
-        r.minContentScale ?? null,
-        r.maxContentScale ?? null
-      );
+      return Et({
+        minContentScale: e.minContentScale ?? 0,
+        maxContentScale: e.maxContentScale ?? 1 / 0
+      });
     case "shift-limit":
-      return Se(
-        r.minX ?? null,
-        r.maxX ?? null,
-        r.minY ?? null,
-        r.maxY ?? null
-      );
-    default:
-      return r.preprocessorFn;
-  }
-}, Me = (r) => (e, t, s, o) => r.reduce(
-  (i, h) => h(e, i, s, o),
-  t
-);
-class Ne {
-  constructor(e, t) {
-    n(this, "model");
-    n(this, "transformation");
-    n(this, "element", null);
-    n(this, "prevTouches", null);
-    n(this, "onTransformFinished");
-    n(this, "transformPreprocessor");
-    n(this, "isScalable");
-    n(this, "isShiftable");
-    n(this, "wheelSensitivity");
-    n(this, "window", window);
-    n(this, "onMouseDown", () => {
-      this.element !== null && (O(this.element, this.shiftCursor), this.window.addEventListener("mousemove", this.onMouseMove), this.window.addEventListener("mouseup", this.onMouseUp));
+      return At({
+        minX: e.minX ?? -1 / 0,
+        maxX: e.maxX ?? 1 / 0,
+        minY: e.minY ?? -1 / 0,
+        maxY: e.maxY ?? 1 / 0
+      });
+  }
+}, Mt = (e) => {
+  var h, l, a, w;
+  const t = (h = e == null ? void 0 : e.scale) == null ? void 0 : h.wheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
+  let i;
+  r !== void 0 ? Array.isArray(r) ? i = Tt(
+    r.map(
+      (y) => O(y)
+    )
+  ) : i = O(r) : i = (y) => y.nextTransform;
+  const n = ((l = e == null ? void 0 : e.shift) == null ? void 0 : l.cursor) !== void 0 ? e.shift.cursor : "grab", d = ((a = e == null ? void 0 : e.events) == null ? void 0 : a.onBeforeTransformStarted) ?? (() => {
+  }), c = ((w = e == null ? void 0 : e.events) == null ? void 0 : w.onTransformFinished) ?? (() => {
+  });
+  return {
+    wheelSensitivity: o,
+    onBeforeTransformStarted: d,
+    onTransformFinished: c,
+    transformPreprocessor: i,
+    shiftCursor: n
+  };
+}, W = (e) => {
+  const t = [], o = e.touches.length;
+  for (let c = 0; c < o; c++)
+    t.push([e.touches[c].clientX, e.touches[c].clientY]);
+  const r = t.reduce(
+    (c, h) => [c[0] + h[0], c[1] + h[1]],
+    [0, 0]
+  ), i = [r[0] / o, r[1] / o], d = t.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+    (c, h) => c + Math.sqrt(h[0] * h[0] + h[1] * h[1]),
+    0
+  );
+  return {
+    x: i[0],
+    y: i[1],
+    scale: d / o,
+    touchesCnt: o,
+    touches: t
+  };
+}, Ct = (e, t, o) => ({
+  scale: e.scale,
+  dx: e.dx + e.scale * t,
+  dy: e.dy + e.scale * o
+}), Nt = (e, t, o, r) => ({
+  scale: e.scale * t,
+  dx: e.scale * (1 - t) * o + e.dx,
+  dy: e.scale * (1 - t) * r + e.dy
+});
+class Pt {
+  constructor(t, o) {
+    s(this, "model");
+    s(this, "transformation");
+    s(this, "element", null);
+    s(this, "prevTouches", null);
+    s(this, "window", window);
+    s(this, "onMouseDown", (t) => {
+      this.element === null || t.button !== 0 || (D(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp));
     });
-    n(this, "onMouseMove", (e) => {
-      if (!this.isShiftable || this.element === null)
-        return;
-      if (!W(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY)) {
+    s(this, "onWindowMouseMove", (t) => {
+      if (this.element === null || !P(this.element, t.clientX, t.clientY) || !L(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
       }
-      const t = -e.movementX, s = -e.movementY;
-      this.moveViewport(t, s);
+      const o = -t.movementX, r = -t.movementY;
+      this.moveViewport(this.element, o, r);
     });
-    n(this, "onMouseUp", () => {
-      this.stopMouseDrag();
+    s(this, "onWindowMouseUp", (t) => {
+      this.element === null || t.button !== 0 || this.stopMouseDrag();
     });
-    n(this, "onWheelScroll", (e) => {
-      if (this.element === null || this.isScalable === !1)
-        return;
-      e.preventDefault();
-      const { left: t, top: s } = this.element.getBoundingClientRect(), o = e.clientX - t, i = e.clientY - s, a = 1 / (e.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(a, o, i);
+    s(this, "onWheelScroll", (t) => {
+      t.preventDefault();
+      const { left: o, top: r } = this.element.getBoundingClientRect(), i = t.clientX - o, n = t.clientY - r, c = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.scaleViewport(this.element, c, i, n);
     });
-    n(this, "onTouchStart", (e) => {
-      this.prevTouches = this.getAverageTouch(e), this.window.addEventListener("touchmove", this.onTouchMove), this.window.addEventListener("touchend", this.onTouchEnd), this.window.addEventListener("touchcancel", this.onTouchEnd);
+    s(this, "onTouchStart", (t) => {
+      this.prevTouches = W(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish);
     });
-    n(this, "onTouchMove", (e) => {
-      if (this.prevTouches === null || !this.isShiftable || this.element === null)
+    s(this, "onWindowTouchMove", (t) => {
+      const o = this.element;
+      if (o === null)
         return;
-      const t = this.getAverageTouch(e);
-      if (!t.touches.every(
-        (o) => W(this.element, o[0], o[1]) && V(this.window, o[0], o[1])
+      const r = W(t);
+      if (!r.touches.every(
+        (n) => P(o, n[0], n[1]) && L(this.window, n[0], n[1])
       )) {
         this.stopTouchDrag();
         return;
       }
-      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
-        -(t.x - this.prevTouches.x),
-        -(t.y - this.prevTouches.y)
-      ), t.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: i } = this.element.getBoundingClientRect(), h = this.prevTouches.x - o, a = this.prevTouches.y - i, c = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(c, h, a);
+      if ((r.touchesCnt === 1 || r.touchesCnt === 2) && this.moveViewport(
+        o,
+        -(r.x - this.prevTouches.x),
+        -(r.y - this.prevTouches.y)
+      ), r.touchesCnt === 2) {
+        const { left: n, top: d } = o.getBoundingClientRect(), c = this.prevTouches.x - n, h = this.prevTouches.y - d, a = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(o, a, c, h);
       }
-      this.prevTouches = t;
+      this.prevTouches = r;
     });
-    n(this, "onTouchEnd", (e) => {
-      e.touches.length > 0 ? this.prevTouches = this.getAverageTouch(e) : this.stopTouchDrag();
+    s(this, "onWindowTouchFinish", (t) => {
+      t.touches.length > 0 ? this.prevTouches = W(t) : this.stopTouchDrag();
     });
-    n(this, "observer", new ResizeObserver(() => {
-      if (this.element !== null) {
-        const e = this.canvas.transformation.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), o = this.transformPreprocessor(
-          e,
-          e,
-          t,
-          s
-        );
-        this.canvas.patchViewportMatrix(o), this.onTransformFinished();
-      }
+    s(this, "observer", new ResizeObserver(() => {
+      const t = this.canvas.transformation.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), i = this.options.transformPreprocessor({
+        prevTransform: t,
+        nextTransform: t,
+        canvasWidth: o,
+        canvasHeight: r
+      });
+      this.canvas.patchViewportMatrix(i), this.options.onTransformFinished();
     }));
-    n(this, "shiftCursor");
-    var i, h, a, d, c, u, w, m;
-    this.canvas = e, this.options = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((h = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : h.enabled) !== !1, this.isShiftable = ((d = (a = this.options) == null ? void 0 : a.shift) == null ? void 0 : d.enabled) !== !1;
-    const s = (u = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : u.wheelSensitivity;
-    this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((w = t == null ? void 0 : t.events) == null ? void 0 : w.onTransformFinished) ?? Ae;
-    const o = t == null ? void 0 : t.transformPreprocessor;
-    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = Me(
-      o.map(
-        (y) => K(y)
-      )
-    ) : this.transformPreprocessor = K(o) : this.transformPreprocessor = Ce, this.shiftCursor = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab";
+    s(this, "options");
+    this.canvas = t, this.options = Mt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
-  addNode(e) {
-    return this.canvas.addNode(e), this;
+  attach(t) {
+    return this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
   }
-  updateNode(e, t) {
-    return this.canvas.updateNode(e, t), this;
+  detach() {
+    return this.canvas.detach(), this.element !== null && (this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element = null), this;
   }
-  removeNode(e) {
-    return this.canvas.removeNode(e), this;
+  addNode(t) {
+    return this.canvas.addNode(t), this;
   }
-  markPort(e) {
-    return this.canvas.markPort(e), this;
+  updateNode(t, o) {
+    return this.canvas.updateNode(t, o), this;
   }
-  updatePort(e, t) {
-    return this.canvas.updatePort(e, t), this;
+  removeNode(t) {
+    return this.canvas.removeNode(t), this;
   }
-  unmarkPort(e) {
-    return this.canvas.unmarkPort(e), this;
+  markPort(t) {
+    return this.canvas.markPort(t), this;
   }
-  addEdge(e) {
-    return this.canvas.addEdge(e), this;
+  updatePort(t, o) {
+    return this.canvas.updatePort(t, o), this;
   }
-  updateEdge(e, t) {
-    return this.canvas.updateEdge(e, t), this;
+  unmarkPort(t) {
+    return this.canvas.unmarkPort(t), this;
   }
-  removeEdge(e) {
-    return this.canvas.removeEdge(e), this;
+  addEdge(t) {
+    return this.canvas.addEdge(t), this;
   }
-  patchViewportMatrix(e) {
-    return this.canvas.patchViewportMatrix(e), this;
+  updateEdge(t, o) {
+    return this.canvas.updateEdge(t, o), this;
   }
-  patchContentMatrix(e) {
-    return this.canvas.patchContentMatrix(e), this;
+  removeEdge(t) {
+    return this.canvas.removeEdge(t), this;
   }
-  clear() {
-    return this.canvas.clear(), this;
+  patchViewportMatrix(t) {
+    return this.canvas.patchViewportMatrix(t), this;
   }
-  attach(e) {
-    return this.detach(), this.element = e, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
+  patchContentMatrix(t) {
+    return this.canvas.patchContentMatrix(t), this;
   }
-  detach() {
-    return this.canvas.detach(), this.element !== null && (this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element = null), this;
+  clear() {
+    return this.canvas.clear(), this;
   }
   destroy() {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
-  getAverageTouch(e) {
-    const t = [], s = e.touches.length;
-    for (let d = 0; d < s; d++)
-      t.push([e.touches[d].clientX, e.touches[d].clientY]);
-    const o = t.reduce(
-      (d, c) => [d[0] + c[0], d[1] + c[1]],
-      [0, 0]
-    ), i = [o[0] / s, o[1] / s], a = t.map((d) => [d[0] - i[0], d[1] - i[1]]).reduce(
-      (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
-      0
-    );
-    return {
-      x: i[0],
-      y: i[1],
-      scale: a / s,
-      touchesCnt: s,
-      touches: t
-    };
-  }
-  moveViewport(e, t) {
-    const s = this.transformation.getViewportMatrix(), o = {
-      scale: s.scale,
-      dx: s.dx + s.scale * e,
-      dy: s.dy + s.scale * t
-    };
-    if (this.element !== null) {
-      const { width: i, height: h } = this.element.getBoundingClientRect(), a = this.transformPreprocessor(
-        s,
-        o,
-        i,
-        h
-      );
-      this.canvas.patchViewportMatrix(a), this.onTransformFinished();
-    }
-  }
-  scaleViewport(e, t, s) {
-    if (this.element === null)
-      return;
-    const o = this.canvas.transformation.getViewportMatrix(), i = {
-      scale: o.scale * e,
-      dx: o.scale * (1 - e) * t + o.dx,
-      dy: o.scale * (1 - e) * s + o.dy
-    }, { width: h, height: a } = this.element.getBoundingClientRect(), d = this.transformPreprocessor(
-      o,
-      i,
-      h,
-      a
-    );
-    this.canvas.patchViewportMatrix(d), this.onTransformFinished();
+  moveViewport(t, o, r) {
+    this.options.onBeforeTransformStarted();
+    const i = this.transformation.getViewportMatrix(), n = Ct(i, o, r), { width: d, height: c } = t.getBoundingClientRect(), h = this.options.transformPreprocessor({
+      prevTransform: i,
+      nextTransform: n,
+      canvasWidth: d,
+      canvasHeight: c
+    });
+    this.canvas.patchViewportMatrix(h), this.options.onTransformFinished();
+  }
+  scaleViewport(t, o, r, i) {
+    this.options.onBeforeTransformStarted();
+    const n = this.canvas.transformation.getViewportMatrix(), d = Nt(n, o, r, i), { width: c, height: h } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
+      prevTransform: n,
+      nextTransform: d,
+      canvasWidth: c,
+      canvasHeight: h
+    });
+    this.canvas.patchViewportMatrix(l), this.options.onTransformFinished();
   }
   stopMouseDrag() {
-    this.element !== null && O(this.element, null), this.removeMouseDragListeners();
+    this.element !== null && D(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
-    this.window.removeEventListener("mousemove", this.onMouseMove), this.window.removeEventListener("mouseup", this.onMouseUp);
+    this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
   }
   stopTouchDrag() {
     this.prevTouches = null, this.removeTouchDragListeners();
   }
   removeTouchDragListeners() {
-    this.window.removeEventListener("touchmove", this.onTouchMove), this.window.removeEventListener("touchend", this.onTouchEnd), this.window.removeEventListener("touchcancel", this.onTouchEnd);
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Te {
+class Lt {
   constructor() {
-    n(this, "coreOptions");
-    n(this, "dragOptions");
-    n(this, "transformOptions");
-    n(this, "isDraggable", !1);
-    n(this, "isTransformable", !1);
+    s(this, "keyMap", /* @__PURE__ */ new Map());
+    s(this, "valueMap", /* @__PURE__ */ new Map());
+  }
+  set(t, o) {
+    this.keyMap.set(t, o), this.valueMap.set(o, t);
+  }
+  hasKey(t) {
+    return this.keyMap.has(t);
+  }
+  hasValue(t) {
+    return this.valueMap.has(t);
+  }
+  getByKey(t) {
+    return this.keyMap.get(t);
+  }
+  getByValue(t) {
+    return this.valueMap.get(t);
+  }
+  deleteByKey(t) {
+    const o = this.keyMap.get(t);
+    o !== void 0 && this.valueMap.delete(o), this.keyMap.delete(t);
+  }
+  deleteByValue(t) {
+    const o = this.valueMap.get(t);
+    o !== void 0 && this.keyMap.delete(o), this.valueMap.delete(t);
+  }
+  forEach(t) {
+    this.keyMap.forEach((o, r) => {
+      t(o, r);
+    });
+  }
+  clear() {
+    this.keyMap.clear(), this.valueMap.clear();
+  }
+}
+class Dt {
+  constructor(t) {
+    s(this, "transformation");
+    s(this, "model");
+    s(this, "nodes", new Lt());
+    s(this, "nodeIdGenerator", new C(
+      (t) => this.nodes.hasKey(t)
+    ));
+    s(this, "nodesResizeObserver");
+    this.canvas = t, this.nodesResizeObserver = new window.ResizeObserver((o) => {
+      o.forEach((r) => {
+        const i = r.target;
+        this.reactNodeChange(i);
+      });
+    }), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+  }
+  attach(t) {
+    return this.canvas.attach(t), this;
+  }
+  detach() {
+    return this.canvas.detach(), this;
+  }
+  addNode(t) {
+    const o = this.nodeIdGenerator.create(t.id);
+    return this.canvas.addNode({
+      ...t,
+      id: o
+    }), this.nodes.set(o, t.element), this.nodesResizeObserver.observe(t.element), this;
+  }
+  updateNode(t, o) {
+    return this.canvas.updateNode(t, o), this;
+  }
+  removeNode(t) {
+    this.canvas.removeNode(t);
+    const o = this.nodes.getByKey(t);
+    return this.nodes.deleteByKey(t), this.nodesResizeObserver.unobserve(o), this;
+  }
+  markPort(t) {
+    return this.canvas.markPort(t), this;
+  }
+  updatePort(t, o) {
+    return this.canvas.updatePort(t, o), this;
+  }
+  unmarkPort(t) {
+    return this.canvas.unmarkPort(t), this;
+  }
+  addEdge(t) {
+    return this.canvas.addEdge(t), this;
+  }
+  updateEdge(t, o) {
+    return this.canvas.updateEdge(t, o), this;
+  }
+  removeEdge(t) {
+    return this.canvas.removeEdge(t), this;
+  }
+  patchViewportMatrix(t) {
+    return this.canvas.patchViewportMatrix(t), this;
+  }
+  patchContentMatrix(t) {
+    return this.canvas.patchContentMatrix(t), this;
+  }
+  clear() {
+    return this.canvas.clear(), this.nodesResizeObserver.disconnect(), this.nodes.clear(), this;
+  }
+  destroy() {
+    this.clear(), this.canvas.destroy();
+  }
+  reactNodeChange(t) {
+    const o = this.nodes.getByValue(t);
+    this.canvas.updateNode(o), this.model.getNodeAdjacentEdgeIds(o).forEach((i) => {
+      this.canvas.updateEdge(i);
+    });
+  }
+}
+class mt {
+  constructor() {
+    s(this, "coreOptions");
+    s(this, "dragOptions");
+    s(this, "transformOptions");
+    s(this, "isDraggable", !1);
+    s(this, "isTransformable", !1);
+    s(this, "hasResizeReactiveNodes", !1);
+  }
+  setOptions(t) {
+    return this.coreOptions = t, this;
   }
-  setOptions(e) {
-    return this.coreOptions = e, this;
+  setUserDraggableNodes(t) {
+    return this.isDraggable = !0, this.dragOptions = t, this;
   }
-  setUserDraggableNodes(e) {
-    return this.isDraggable = !0, this.dragOptions = e, this;
+  setUserTransformableCanvas(t) {
+    return this.isTransformable = !0, this.transformOptions = t, this;
   }
-  setUserTransformableCanvas(e) {
-    return this.isTransformable = !0, this.transformOptions = e, this;
+  setResizeReactiveNodes() {
+    return this.hasResizeReactiveNodes = !0, this;
   }
   build() {
-    let e = new xe(this.coreOptions);
-    return this.isDraggable && (e = new Ee(e, this.dragOptions)), this.isTransformable && (e = new Ne(e, this.transformOptions)), e;
+    let t = new xt(this.coreOptions);
+    return this.hasResizeReactiveNodes && (t = new Dt(t)), this.isDraggable && (t = new St(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
   }
 }
 export {
-  te as BezierEdgeShape,
-  xe as CanvasCore,
-  ie as CycleCircleEdgeShape,
-  B as CycleSquareEdgeShape,
-  ne as DetourBezierEdgeShape,
-  G as DetourStraightEdgeShape,
-  C as EdgeType,
-  se as HorizontalEdgeShape,
-  Te as HtmlGraphBuilder,
-  f as HtmlGraphError,
-  re as StraightEdgeShape,
-  Ee as UserDraggableNodesCanvas,
-  Ne as UserTransformableCanvas,
-  oe as VerticalEdgeShape,
-  ae as createBezierEdgeShapeFactory,
-  ce as createHorizontalEdgeShapeFactory,
-  he as createStraightEdgeShareFactory,
-  de as createVerticalEdgeShapeFactory
+  ot as BezierEdgeShape,
+  xt as CanvasCore,
+  rt as HorizontalEdgeShape,
+  mt as HtmlGraphBuilder,
+  S as HtmlGraphError,
+  Dt as ResizeReactiveNodesCanvas,
+  it as StraightEdgeShape,
+  St as UserDraggableNodesCanvas,
+  Pt as UserTransformableCanvas,
+  nt as VerticalEdgeShape
 };