@html-graph/html-graph 0.0.59 → 0.0.61

package/dist/main.js

@@ -1,6 +1,6 @@
 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 a = (r, e, t) => J(r, typeof e != "symbol" ? e + "" : 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,
@@ -12,8 +12,8 @@ const Y = (r) => ({
 };
 class Q {
   constructor() {
-    a(this, "viewportMatrix", X);
-    a(this, "contentMatrix", X);
+    n(this, "viewportMatrix", X);
+    n(this, "contentMatrix", X);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -21,18 +21,18 @@ class Q {
   getContentMatrix() {
     return this.contentMatrix;
   }
-  patchViewportMatrix(e, t, s) {
+  patchViewportMatrix(e) {
     this.viewportMatrix = {
-      scale: e ?? this.viewportMatrix.scale,
-      dx: t ?? this.viewportMatrix.dx,
-      dy: s ?? this.viewportMatrix.dy
+      scale: e.scale ?? this.viewportMatrix.scale,
+      dx: e.dx ?? this.viewportMatrix.dx,
+      dy: e.dy ?? this.viewportMatrix.dy
     }, this.contentMatrix = Y(this.viewportMatrix);
   }
-  patchContentMatrix(e, t, s) {
+  patchContentMatrix(e) {
     this.contentMatrix = {
-      scale: e ?? this.contentMatrix.scale,
-      dx: t ?? this.contentMatrix.dx,
-      dy: s ?? this.contentMatrix.dy
+      scale: e.scale ?? this.contentMatrix.scale,
+      dx: e.dx ?? this.contentMatrix.dx,
+      dy: e.dy ?? this.contentMatrix.dy
     }, this.viewportMatrix = Y(this.contentMatrix);
   }
 }
@@ -49,17 +49,23 @@ class Z {
 }
 class q {
   constructor() {
-    a(this, "nodes", /* @__PURE__ */ new Map());
-    a(this, "ports", /* @__PURE__ */ new Map());
-    a(this, "nodePorts", /* @__PURE__ */ new Map());
-    a(this, "portNodeId", /* @__PURE__ */ new Map());
-    a(this, "edges", /* @__PURE__ */ new Map());
-    a(this, "incommingEdges", /* @__PURE__ */ new Map());
-    a(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    a(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(e, t, s, o, i, n) {
-    this.nodes.set(e, { element: t, x: s, y: o, centerFn: i, priority: n }), this.nodePorts.set(e, /* @__PURE__ */ new Map());
+    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());
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -70,8 +76,12 @@ class q {
   removeNode(e) {
     this.nodes.delete(e), this.nodePorts.delete(e);
   }
-  addPort(e, t, s, o, i) {
-    this.ports.set(e, { element: t, centerFn: o, direction: i }), this.cycleEdges.set(e, /* @__PURE__ */ new Set()), this.incommingEdges.set(e, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e, /* @__PURE__ */ new Set()), this.portNodeId.set(e, s), this.nodePorts.get(s).set(e, 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);
   }
   getPort(e) {
     return this.ports.get(e);
@@ -91,13 +101,13 @@ class q {
     const t = this.portNodeId.get(e);
     this.portNodeId.delete(e), this.nodePorts.get(t).delete(e), this.ports.delete(e);
   }
-  addEdge(e, t, s, o, i) {
-    this.edges.set(e, {
-      from: t,
-      to: s,
-      shape: o,
-      priority: i
-    }), t !== s ? (this.outcommingEdges.get(t).add(e), this.incommingEdges.get(s).add(e)) : this.cycleEdges.get(t).add(e);
+  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);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
@@ -229,28 +239,28 @@ const l = {
 }, 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)
-}), f = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) }), x = (r, e, t, s) => {
+}), 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((d) => p(d, r, l)).map((d) => ({ x: d.x + e.x, y: d.y + e.y })), n = `M ${i[0].x} ${i[0].y}`, h = `L ${i[1].x} ${i[1].y}`, c = `L ${i[2].x} ${i[2].y}`;
-  return `${n} ${h} ${c}`;
+  ].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, n = 0;
-    r.forEach((h, c) => {
-      let d = 0, g = 0, w = 0;
-      const m = c > 0, y = c < s, v = m && y;
-      if (m && (d = -o, g = -i, w = n), y) {
-        const j = r[c + 1];
-        o = j.x - h.x, i = j.y - h.y, n = Math.sqrt(o * o + i * i);
+    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 P = Math.min((v ? e : 0) / n, c < s - 1 ? 0.5 : 1), M = v ? { x: h.x + o * P, y: h.y + i * P } : h, T = Math.min((v ? e : 0) / w, c > 1 ? 0.5 : 1), W = v ? { x: h.x + d * T, y: h.y + g * T } : h;
-      c > 0 && t.push(`L ${W.x} ${W.y}`), v && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${M.x} ${M.y}`
+      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}`
       );
     });
   }
@@ -264,39 +274,39 @@ const l = {
 }, 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;
-}, E = (r) => {
+}, A = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", r), e;
 };
 class te {
-  constructor(e, t, s, o, i, n, h) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(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), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   createLinePath(e, t, s) {
@@ -308,175 +318,175 @@ class te {
       { x: e.x - this.arrowLength, y: e.y },
       s,
       e
-    ), n = {
+    ), h = {
       x: o.x + t.x * this.curvature,
       y: o.y + t.y * this.curvature
-    }, h = {
+    }, a = {
       x: i.x - s.x * this.curvature,
       y: i.y - s.y * this.curvature
-    }, c = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, g = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
-    return `${d}${c}${g}`;
+    }, 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}`;
   }
 }
 class re {
-  constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   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, n = this.arrowLength + this.arrowOffset, h = p({ x: n, y: l.y }, t, l), c = p({ x: e.x - n, y: e.y }, s, e);
-    return D([o, h, c, i], this.roundness);
+    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);
   }
 }
 class se {
-  constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.x + g.x) / 2, h), m = e.y / 2, y = { x: o > 0 ? w : -h, y: d.y }, v = { x: y.x, y: m }, S = { x: o > 0 ? e.x - w : e.x + h, y: g.y }, P = { x: S.x, y: m };
+    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, d, y, v, P, S, g, n],
+      [i, c, y, v, S, P, u, h],
       this.roundness
     );
   }
 }
 class oe {
-  constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(this, "targetArrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, s);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.y + g.y) / 2, h), m = e.x / 2, y = { x: d.x, y: o > 0 ? w : -h }, v = { x: m, y: y.y }, S = {
-      x: g.x,
-      y: o > 0 ? e.y - w : e.y + h
-    }, P = { x: m, y: S.y };
+    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, d, y, v, P, S, g, n],
+      [i, c, y, v, S, P, u, h],
       this.roundness
     );
   }
 }
 class ie {
-  constructor(e, t, s, o, i, n, h) {
-    a(this, "svg", N());
-    a(this, "line");
-    a(this, "arrow", null);
-    this.arrowLength = s, this.arrowWidth = o, this.radius = n, this.smallRadius = h, this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = E(e), this.svg.appendChild(this.arrow));
+  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 = f(o, t, s), n = this.createLinePath(i);
-    if (this.line.setAttribute("d", n), this.arrow) {
-      const h = x(
+    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", h);
+      this.arrow.setAttribute("d", a);
     }
   }
   createLinePath(e) {
-    const t = this.smallRadius, s = this.radius, o = Math.sqrt(t * t + s * s), i = t + s, n = this.arrowLength + o * (1 - s / i), h = t * s / i, d = [
+    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: n, y: h },
-      { x: n, y: -h }
-    ].map((m) => p(m, e, l)), g = [
-      `M ${d[0].x} ${d[0].y}`,
-      `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
-      `A ${s} ${s} 0 1 0 ${d[2].x} ${d[2].y}`,
-      `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
-    ].join(" "), w = `M 0 0 L ${d[0].x} ${d[0].y} `;
-    return `${this.arrow !== null ? "" : w}${g}`;
+      { 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}`;
   }
 }
 class B {
-  constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", N());
-    a(this, "line");
-    a(this, "arrow", null);
-    a(this, "roundness");
-    a(this, "linePoints");
-    this.arrowLength = s, this.arrowWidth = o, this.side = n, this.minPortOffset = h, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = E(e), this.svg.appendChild(this.arrow));
-    const d = this.minPortOffset, g = this.side, w = this.arrowLength + d, m = w + 2 * g;
+  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 },
@@ -489,15 +499,15 @@ class B {
     ];
   }
   update(e, t, s, o) {
-    const i = f(o, t, s), n = this.createLinePath(i);
-    if (this.line.setAttribute("d", n), this.arrow) {
-      const h = x(
+    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", h);
+      this.arrow.setAttribute("d", a);
     }
   }
   createLinePath(e) {
@@ -508,126 +518,126 @@ class B {
   }
 }
 class ne {
-  constructor(e, t, s, o, i, n, h, c, d) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(this, "targetArrow", null);
-    a(this, "detourX");
-    a(this, "detourY");
-    this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(d) * c, this.detourY = Math.sin(d) * c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t, s);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   createLinePath(e, t, s, o, i) {
-    const n = 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, c = this.arrowLength, d = this.detourX * o, g = this.detourY * i, w = p(
-      { x: c, y: l.y },
+    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 + d,
-      y: w.y + g
+      x: w.x + c,
+      y: w.y + u
     }, y = p(
-      { x: e.x - c, y: e.y },
+      { x: e.x - d, y: e.y },
       s,
       e
     ), v = {
-      x: y.x + d,
-      y: y.y + g
-    }, S = { x: (m.x + v.x) / 2, y: (m.y + v.y) / 2 }, P = {
+      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 + d,
-      y: w.y + g
+      x: w.x + c,
+      y: w.y + u
     }, T = {
-      x: y.x + d,
-      y: y.y + g
+      x: y.x + c,
+      y: y.y + u
     };
     return [
-      `M ${n.x} ${n.y}`,
+      `M ${h.x} ${h.y}`,
       `L ${w.x} ${w.y}`,
-      `C ${P.x} ${P.y} ${b.x} ${b.y} ${S.x} ${S.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 ${h.x} ${h.y}`
+      `L ${a.x} ${a.y}`
     ].join(" ");
   }
 }
 class G {
-  constructor(e, t, s, o, i, n, h, c, d, g) {
-    a(this, "svg", N());
-    a(this, "group", $());
-    a(this, "line");
-    a(this, "sourceArrow", null);
-    a(this, "targetArrow", null);
-    a(this, "detourX");
-    a(this, "detourY");
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.detourX = Math.cos(g) * d, this.detourY = Math.sin(g) * d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+  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 n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t, s);
-    if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = x(
-        n,
+    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", d);
+      this.sourceArrow.setAttribute("d", c);
     }
     if (this.targetArrow) {
-      const d = x(
-        h,
+      const c = E(
+        a,
         e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", d);
+      this.targetArrow.setAttribute("d", c);
     }
   }
   createLinePath(e, t, s, o, i) {
-    const n = 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, c = this.arrowLength + this.arrowOffset, d = p(
-      { x: c, y: l.y },
+    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
-    ), g = this.detourX * o, w = this.detourY * i, m = { x: d.x + g, y: d.y + w }, y = p(
-      { x: e.x - c, y: e.y },
+    ), 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 + g, y: y.y + w };
+    ), v = { x: y.x + u, y: y.y + w };
     return D(
-      [n, d, m, v, y, h],
+      [h, c, m, v, y, a],
       this.roundness
     );
   }
 }
-var A = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(A || {});
-const ae = (r) => (e) => e === A.PortCycle ? new ie(
+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,
@@ -635,7 +645,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.hasSourceArrow || r.hasTargetArrow,
   r.cycleRadius,
   r.smallCycleRadius
-) : e === A.NodeCycle ? new ne(
+) : e === C.NodeCycle ? new ne(
   r.color,
   r.width,
   r.curvature,
@@ -653,7 +663,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.arrowWidth,
   r.hasSourceArrow,
   r.hasTargetArrow
-), he = (r) => (e) => e === A.PortCycle ? new B(
+), he = (r) => (e) => e === C.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -662,7 +672,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === A.NodeCycle ? new G(
+) : e === C.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -682,7 +692,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.hasSourceArrow,
   r.hasTargetArrow,
   r.roundness
-), ce = (r) => (e) => e === A.PortCycle ? new B(
+), de = (r) => (e) => e === C.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -691,7 +701,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === A.NodeCycle ? new G(
+) : e === C.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -711,7 +721,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.hasSourceArrow,
   r.hasTargetArrow,
   r.roundness
-), de = (r) => (e) => e === A.PortCycle ? new B(
+), ce = (r) => (e) => e === C.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -720,7 +730,7 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === A.NodeCycle ? new G(
+) : e === C.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -741,9 +751,9 @@ const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.hasTargetArrow,
   r.roundness
 );
-class F {
+class I {
   constructor(e) {
-    a(this, "counter", 0);
+    n(this, "counter", 0);
     this.checkExists = e;
   }
   create(e) {
@@ -757,144 +767,151 @@ class F {
     this.counter = 0;
   }
 }
-class C extends Error {
+class f extends Error {
   constructor() {
     super(...arguments);
-    a(this, "name", "HtmlGraphError");
+    n(this, "name", "HtmlGraphError");
   }
 }
 class le {
-  constructor(e, t, s, o, i, n, h, c) {
-    a(this, "nodeIdGenerator", new F(
+  constructor(e, t, s, o, i, h, a, d) {
+    n(this, "nodeIdGenerator", new I(
       (e) => this.graphStore.getNode(e) !== void 0
     ));
-    a(this, "portIdGenerator", new F(
+    n(this, "portIdGenerator", new I(
       (e) => this.graphStore.getPort(e) !== void 0
     ));
-    a(this, "edgeIdGenerator", new F(
+    n(this, "edgeIdGenerator", new I(
       (e) => this.graphStore.getEdge(e) !== void 0
     ));
-    this.graphStore = e, this.htmlController = t, this.viewportTransformer = s, this.defaultNodesCenterFn = o, this.defaultPortsCenterFn = i, this.defaultPortsDirection = n, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = c;
+    this.graphStore = e, this.htmlController = t, this.viewportTransformer = s, this.defaultNodesCenterFn = o, this.defaultPortsCenterFn = i, this.defaultPortsDirection = h, this.defaultNodesPriorityFn = a, this.defaultEdgesPriorityFn = d;
   }
-  addNode(e, t, s, o, i, n, h) {
-    if (e = this.nodeIdGenerator.create(e), this.graphStore.getNode(e) !== void 0)
-      throw new C("failed to add node with existing id");
-    this.graphStore.addNode(
-      e,
-      t,
-      s,
-      o,
-      n ?? this.defaultNodesCenterFn,
-      h ?? this.defaultNodesPriorityFn()
-    ), this.htmlController.attachNode(e), Array.from(i ?? []).forEach((c) => {
-      this.markPort(
-        c.id,
-        c.element,
-        e,
-        c.centerFn ?? this.defaultPortsCenterFn,
-        c.direction ?? this.defaultPortsDirection
-      );
-    });
+  attach(e) {
+    this.htmlController.attach(e);
   }
-  updateNode(e, t, s, o, i) {
-    const n = this.graphStore.getNode(e);
-    if (n === void 0)
-      throw new C("failed to update nonexisting node");
-    n.x = t ?? n.x, n.y = s ?? n.y, n.centerFn = i ?? n.centerFn, this.htmlController.updateNodeCoordinates(e), o !== void 0 && (n.priority = o, this.htmlController.updateNodePriority(e));
+  detach() {
+    this.htmlController.detach();
   }
-  removeNode(e) {
-    if (this.graphStore.getNode(e) === void 0)
-      throw new C("failed to remove nonexisting node");
-    (this.graphStore.getNodePortIds(e) ?? []).forEach((t) => {
-      this.unmarkPort(t);
-    }), this.htmlController.detachNode(e), this.graphStore.removeNode(e);
+  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");
+    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) => {
+      this.markPort({
+        portId: s.id,
+        element: s.element,
+        nodeId: t,
+        centerFn: s.centerFn,
+        direction: s.direction
+      });
+    });
   }
-  markPort(e, t, s, o, i) {
-    if (e = this.portIdGenerator.create(e), this.graphStore.getNode(s) === void 0)
-      throw new C("failed to set port on nonexisting node");
-    if (this.graphStore.getPort(e) !== void 0)
-      throw new C("failed to add port with existing id");
-    this.graphStore.addPort(
-      e,
-      t,
-      s,
-      o ?? this.defaultPortsCenterFn,
-      i ?? this.defaultPortsDirection
-    );
+  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");
+    this.graphStore.addPort({
+      portId: t,
+      element: e.element,
+      nodeId: e.nodeId,
+      centerFn: e.centerFn ?? this.defaultPortsCenterFn,
+      direction: e.direction ?? this.defaultPortsDirection
+    });
   }
-  updatePort(e, t, s) {
-    const o = this.graphStore.getPort(e);
-    if (o === void 0)
-      throw new C("failed to unset nonexisting port");
-    o.direction = t ?? o.direction, o.centerFn = s ?? o.centerFn, this.htmlController.updatePortEdges(e);
+  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);
+    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);
   }
-  unmarkPort(e) {
-    if (this.graphStore.getPort(e) === void 0)
-      throw new C("failed to unset nonexisting port");
-    this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
-      this.removeEdge(t);
-    }), this.graphStore.removePort(e);
+  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);
+    });
   }
-  addEdge(e, t, s, o, i) {
-    if (e = this.edgeIdGenerator.create(e), this.graphStore.getPort(t) === void 0)
-      throw new C("failed to add edge from nonexisting port");
-    if (this.graphStore.getPort(s) === void 0)
-      throw new C("failed to add edge to nonexisting port");
-    if (this.graphStore.getEdge(e) !== void 0)
-      throw new C("failed to add edge with existing id");
-    const n = this.resolveEdgeType(t, s);
-    this.graphStore.addEdge(
-      e,
-      t,
-      s,
-      o(n),
-      i ?? this.defaultEdgesPriorityFn()
-    ), this.htmlController.attachEdge(e);
-  }
-  updateEdge(e, t, s) {
-    const o = this.graphStore.getEdge(e);
-    if (o === void 0)
-      throw new C("failed to update nonexisting edge");
-    if (t !== void 0) {
-      const i = this.resolveEdgeType(o.from, o.to);
-      o.shape = t(i), this.htmlController.updateEdgeShape(e);
-    }
-    s !== void 0 && (o.priority = s, this.htmlController.updateEdgePriority(e));
+  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);
+    });
   }
   removeEdge(e) {
     if (this.graphStore.getEdge(e) === void 0)
-      throw new C("failed to remove nonexisting edge");
+      throw new f("failed to remove nonexisting edge");
     this.htmlController.detachEdge(e), this.graphStore.removeEdge(e);
   }
-  patchViewportMatrix(e, t, s) {
-    this.viewportTransformer.patchViewportMatrix(e, t, s), this.htmlController.applyTransform();
+  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);
   }
-  patchContentMatrix(e, t, s) {
-    this.viewportTransformer.patchContentMatrix(e, t, s), this.htmlController.applyTransform();
+  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);
   }
-  attach(e) {
-    this.htmlController.attach(e);
+  patchViewportMatrix(e) {
+    this.viewportTransformer.patchViewportMatrix(e), this.htmlController.applyTransform();
   }
-  detach() {
-    this.htmlController.detach();
+  patchContentMatrix(e) {
+    this.viewportTransformer.patchContentMatrix(e), this.htmlController.applyTransform();
   }
   clear() {
     this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
   }
   destroy() {
-    this.htmlController.destroy();
+    this.clear(), this.htmlController.destroy();
   }
   resolveEdgeType(e, t) {
     if (e === t)
-      return A.PortCycle;
+      return C.PortCycle;
     const s = this.graphStore.getPortNodeId(e), o = this.graphStore.getPortNodeId(t);
-    return s === o ? A.NodeCycle : A.Regular;
+    return s === o ? C.NodeCycle : C.Regular;
   }
 }
-const ue = () => {
+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;
-}, ge = () => {
+}, 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 = () => {
@@ -902,46 +919,13 @@ const ue = () => {
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden", r;
 };
 class ye {
-  constructor() {
-    a(this, "keyMap", /* @__PURE__ */ new Map());
-    a(this, "valueMap", /* @__PURE__ */ new Map());
-  }
-  set(e, t) {
-    this.keyMap.set(e, t), this.valueMap.set(t, e);
-  }
-  getByKey(e) {
-    return this.keyMap.get(e);
-  }
-  getByValue(e) {
-    return this.valueMap.get(e);
-  }
-  deleteByKey(e) {
-    const t = this.keyMap.get(e);
-    t !== void 0 && this.valueMap.delete(t), this.keyMap.delete(e);
-  }
-  deleteByValue(e) {
-    const t = this.valueMap.get(e);
-    t !== void 0 && this.keyMap.delete(t), this.valueMap.delete(e);
-  }
-  forEach(e) {
-    this.keyMap.forEach((t, s) => {
-      e(t, s);
-    });
-  }
-  clear() {
-    this.keyMap.clear(), this.valueMap.clear();
-  }
-}
-class me {
   constructor(e, t) {
-    a(this, "canvasWrapper", null);
-    a(this, "host", ue());
-    a(this, "container", ge());
-    a(this, "nodesResizeObserver");
-    a(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    a(this, "nodeIdToWrapperElementMap", new ye());
-    a(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    this.graphStore = e, this.viewportTransformer = t, this.host.appendChild(this.container), this.nodesResizeObserver = this.createNodesResizeObserver();
+    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);
@@ -955,15 +939,15 @@ class me {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e), s = we();
-    s.appendChild(t.element), this.container.appendChild(s), this.nodeElementToIdMap.set(t.element, e), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoordinatesInternal(e), this.updateNodePriority(e), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
+    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.getByKey(e);
-    this.nodesResizeObserver.unobserve(s), s.removeChild(t.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(t.element), this.nodeIdToWrapperElementMap.deleteByKey(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.updateEdgeCoordinates(e), this.updateEdgePriority(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);
@@ -977,104 +961,83 @@ class me {
     });
   }
   destroy() {
-    this.nodesResizeObserver.disconnect(), this.host.removeChild(this.container), this.clear(), this.detach();
+    this.clear(), this.detach(), this.host.removeChild(this.container);
   }
   updateNodeCoordinates(e) {
-    const t = this.graphStore.getNodeAdjacentEdgeIds(e);
-    this.updateNodeCoordinatesInternal(e), t.forEach((s) => {
-      this.updateEdgeCoordinates(s);
-    });
+    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.getByKey(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), this.updateEdgeCoordinates(e), this.updateEdgePriority(e);
-  }
-  updateEdgePriority(e) {
-    const t = this.graphStore.getEdge(e);
-    t.shape.svg.style.zIndex = `${t.priority}`;
-  }
-  updatePortEdges(e) {
-    this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
-      this.updateEdgeCoordinates(s);
-    });
-  }
-  createNodesResizeObserver() {
-    return new ResizeObserver((e) => {
-      e.forEach((t) => {
-        const s = t.target, o = this.nodeIdToWrapperElementMap.getByValue(s);
-        this.updateNodeCoordinatesInternal(o), this.graphStore.getNodeAdjacentEdgeIds(o).forEach((n) => {
-          this.updateEdgeCoordinates(n);
-        });
-      });
-    });
-  }
-  updateNodeCoordinatesInternal(e) {
-    const t = this.nodeIdToWrapperElementMap.getByKey(e), { width: s, height: o } = t.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(e), { x: h, y: c } = n.centerFn(s, o), d = n.x - i * h, g = n.y - i * c;
-    t.style.transform = `matrix(1, 0, 0, 1, ${d}, ${g})`;
-  }
-  updateEdgeCoordinates(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), i = s.element.getBoundingClientRect(), n = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), d = {
-      x: c.scale * (i.left - h.left) + c.dx,
-      y: c.scale * (i.top - h.top) + c.dy
-    }, g = {
-      x: c.scale * (n.left - h.left) + c.dx,
-      y: c.scale * (n.top - h.top) + c.dy
+    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 * c.scale,
-      i.height * c.scale
+      i.width * d.scale,
+      i.height * d.scale
     ), m = o.centerFn(
-      n.width * c.scale,
-      n.height * c.scale
+      h.width * d.scale,
+      h.height * d.scale
     ), y = {
-      x: d.x + w.x,
-      y: d.y + w.y
+      x: c.x + w.x,
+      y: c.y + w.y
     }, v = {
-      x: g.x + m.x,
-      y: g.y + m.y
-    }, S = Math.min(y.x, v.x), P = 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(${S}px, ${P}px)`;
-    const T = y.x <= v.x ? 1 : -1, W = y.y <= v.y ? 1 : -1;
+      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,
-      W,
+      F,
       s.direction,
       o.direction
     );
   }
+  updateEdgePriority(e) {
+    const t = this.graphStore.getEdge(e);
+    t.shape.svg.style.zIndex = `${t.priority}`;
+  }
 }
-class pe {
-  constructor(e, t, s, o, i) {
-    a(this, "publicViewportTransformer");
-    a(this, "publicGraphStore");
-    a(this, "canvasController");
-    const n = new Q(), h = new q();
-    this.publicGraphStore = new ee(h), this.publicViewportTransformer = new Z(
-      n
+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 c = new me(h, n);
+    const o = new ye(s, t);
     this.canvasController = new le(
-      h,
-      c,
-      n,
-      e,
-      t,
       s,
       o,
-      i
+      t,
+      e.nodesCenterFn,
+      e.portsCenterFn,
+      e.portsDirection,
+      e.nodesPriorityFn,
+      e.edgesPriorityFn
     );
   }
 }
 const H = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), u = {
+}), g = {
   edgeColor: "#5c5c5c",
   edgeWidth: 1,
   edgeArrowLength: 15,
@@ -1094,65 +1057,65 @@ const H = (r, e) => ({
       return r.factory;
     case "straight":
       return he({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+        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 de({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+      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 ce({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+      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 ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleRadius: r.cycleRadius ?? u.cycleSize,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection,
-        smallCycleRadius: r.smallCycleRadius ?? u.smallCycleSize,
-        curvature: r.curvature ?? u.curvature
+        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++;
-}, ve = (r, e) => {
+}, pe = (r, e) => {
   const t = [
     U,
     U
@@ -1160,9 +1123,9 @@ const H = (r, e) => ({
   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;
-}, fe = (r) => {
-  var s, o, i, n, h, c;
-  const [e, t] = ve(
+}, 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
   );
@@ -1172,106 +1135,154 @@ const H = (r, e) => ({
       priorityFn: e
     },
     ports: {
-      centerFn: ((n = r.ports) == null ? void 0 : n.centerFn) ?? H,
-      direction: ((h = r.ports) == null ? void 0 : h.direction) ?? 0
+      centerFn: ((h = r.ports) == null ? void 0 : h.centerFn) ?? H,
+      direction: ((a = r.ports) == null ? void 0 : a.direction) ?? 0
     },
     edges: {
-      shapeFactory: R(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
+      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);
+  }
+  getByValue(e) {
+    return this.valueMap.get(e);
+  }
+  deleteByKey(e) {
+    const t = this.keyMap.get(e);
+    t !== void 0 && this.valueMap.delete(t), this.keyMap.delete(e);
+  }
+  deleteByValue(e) {
+    const t = this.valueMap.get(e);
+    t !== void 0 && this.keyMap.delete(t), this.valueMap.delete(e);
+  }
+  forEach(e) {
+    this.keyMap.forEach((t, s) => {
+      e(t, s);
+    });
+  }
+  clear() {
+    this.keyMap.clear(), this.valueMap.clear();
+  }
+}
 class xe {
   constructor(e) {
-    a(this, "transformation");
-    a(this, "model");
-    a(this, "di");
-    a(this, "edgeShapeFactory");
-    this.apiOptions = e;
-    const t = fe(this.apiOptions ?? {});
-    this.di = new pe(
-      t.nodes.centerFn,
-      t.ports.centerFn,
-      t.ports.direction,
-      t.nodes.priorityFn,
-      t.edges.priorityFn
-    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = t.edges.shapeFactory;
+    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) {
-    return this.di.canvasController.addNode(
-      e.id,
-      e.element,
-      e.x,
-      e.y,
-      e.ports,
-      e.centerFn,
-      e.priority
-    ), this;
+    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,
-      t.x,
-      t.y,
-      t.priority,
-      t.centerFn
-    ), this;
+    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
+    }), this;
   }
   removeNode(e) {
-    return this.di.canvasController.removeNode(e), this;
+    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(
-      e.id,
-      e.element,
-      e.nodeId,
-      e.centerFn,
-      e.direction
-    ), this;
+    return this.di.canvasController.markPort({
+      portId: e.id,
+      element: e.element,
+      nodeId: e.nodeId,
+      centerFn: e.centerFn,
+      direction: e.direction
+    }), this;
   }
   updatePort(e, t) {
-    return this.di.canvasController.updatePort(
-      e,
-      t == null ? void 0 : t.direction,
-      t == null ? void 0 : t.centerFn
-    ), this;
+    return this.di.canvasController.updatePort(e, {
+      direction: t == null ? void 0 : t.direction,
+      centerFn: t == null ? void 0 : t.centerFn
+    }), 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(
-      e.id,
-      e.from,
-      e.to,
-      t,
-      e.priority
-    ), this;
+    return this.di.canvasController.addEdge({
+      edgeId: e.id,
+      from: e.from,
+      to: e.to,
+      shapeFactory: t,
+      priority: e.priority
+    }), this;
   }
   updateEdge(e, t) {
-    const s = t.shape !== void 0 ? R(t.shape) : void 0;
-    return this.di.canvasController.updateEdge(e, s, t.priority), this;
+    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
+    }), this;
   }
   removeEdge(e) {
     return this.di.canvasController.removeEdge(e), this;
   }
   patchViewportMatrix(e) {
-    return this.di.canvasController.patchViewportMatrix(
-      e.scale ?? null,
-      e.dx ?? null,
-      e.dy ?? null
-    ), this;
+    return this.di.canvasController.patchViewportMatrix(e), this;
   }
   patchContentMatrix(e) {
-    return this.di.canvasController.patchContentMatrix(
-      e.scale ?? null,
-      e.dx ?? null,
-      e.dy ?? null
-    ), this;
+    return this.di.canvasController.patchContentMatrix(e), this;
   }
   clear() {
-    return this.di.canvasController.clear(), this;
+    return this.di.canvasController.clear(), this.nodes.clear(), this;
   }
   attach(e) {
     return this.di.canvasController.attach(e), this;
@@ -1280,48 +1291,48 @@ class xe {
     return this.di.canvasController.detach(), this;
   }
   destroy() {
-    this.di.canvasController.destroy();
+    this.clear(), this.di.canvasController.destroy(), this.nodesResizeObserver.disconnect();
   }
 }
-const V = (r, e, t) => {
-  const { x: s, y: o, width: i, height: n } = r.getBoundingClientRect();
-  return e >= s && e < s + i && t >= o && t <= o + n;
-}, O = (r, e, t) => e >= 0 && e < r.innerWidth && t >= 0 && t <= r.innerHeight, I = (r, e) => {
+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");
 };
 class Ee {
   constructor(e, t) {
-    a(this, "model");
-    a(this, "transformation");
-    a(this, "maxNodePriority", 0);
-    a(this, "nodes", /* @__PURE__ */ new Map());
-    a(this, "grabbedNodeId", null);
-    a(this, "onNodeDrag");
-    a(this, "onBeforeNodeDrag");
-    a(this, "nodeIdGenerator", new F(
+    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)
     ));
-    a(this, "element", null);
-    a(this, "onCanvasMouseUp", () => {
+    n(this, "element", null);
+    n(this, "onCanvasMouseUp", () => {
       this.cancelMouseDrag();
     });
-    a(this, "onCanvasMouseMove", (e) => {
-      if (this.element !== null && (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY))) {
+    n(this, "onCanvasMouseMove", (e) => {
+      if (this.element !== null && (!W(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
-    a(this, "onCanvasTouchStart", (e) => {
+    n(this, "onCanvasTouchStart", (e) => {
       this.previousTouchCoords = [
         e.touches[0].clientX,
         e.touches[0].clientY
       ];
     });
-    a(this, "onCanvasTouchMove", (e) => {
+    n(this, "onCanvasTouchMove", (e) => {
       if (e.touches.length === 1) {
         const t = e.touches[0];
-        if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !O(this.window, t.clientX, t.clientY))) {
+        if (this.element !== null && (!W(this.element, t.clientX, t.clientY) || !V(this.window, t.clientX, t.clientY))) {
           this.cancelTouchDrag();
           return;
         }
@@ -1335,23 +1346,23 @@ class Ee {
         }
       }
     });
-    a(this, "onCanvasTouchEnd", (e) => {
+    n(this, "onCanvasTouchEnd", (e) => {
       e.touches.length > 0 ? this.previousTouchCoords = [
         e.touches[0].clientX,
         e.touches[0].clientY
       ] : this.cancelTouchDrag();
     });
-    a(this, "previousTouchCoords", null);
-    a(this, "freezePriority");
-    a(this, "window", window);
-    a(this, "dragCursor");
-    var i, n;
+    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 = ((n = t == null ? void 0 : t.events) == null ? void 0 : n.onBeforeNodeDrag) ?? o, this.freezePriority = (t == null ? void 0 : t.grabPriorityStrategy) === "freeze", this.dragCursor = (t == null ? void 0 : t.dragCursor) !== void 0 ? t.dragCursor : "grab";
+    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);
@@ -1359,20 +1370,20 @@ class Ee {
     const s = (i) => {
       if (this.element === null)
         return;
-      const n = this.model.getNode(t);
+      const h = this.model.getNode(t);
       this.onBeforeNodeDrag({
         nodeId: t,
         element: e.element,
-        x: n.x,
-        y: n.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = t, I(this.element, this.dragCursor), this.moveNodeOnTop(t), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
+        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 n = this.model.getNode(t);
+      const h = this.model.getNode(t);
       this.onBeforeNodeDrag({
         nodeId: t,
         element: e.element,
-        x: n.x,
-        y: n.y
+        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));
     };
     return this.nodes.set(t, {
@@ -1431,8 +1442,8 @@ class Ee {
   dragNode(e, t, s) {
     const o = this.model.getNode(e);
     if (o === null)
-      throw new C("failed to drag nonexisting node");
-    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, h = i.scale * o.y + i.dy, c = n + t, d = h + s, g = this.canvas.transformation.getViewportMatrix(), w = g.scale * c + g.dx, m = g.scale * d + g.dy;
+      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,
@@ -1454,7 +1465,7 @@ class Ee {
     });
   }
   cancelMouseDrag() {
-    this.grabbedNodeId = null, this.element !== null && I(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNodeId = null, this.element !== null && O(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onCanvasMouseUp), this.window.removeEventListener("mousemove", this.onCanvasMouseMove);
@@ -1466,26 +1477,26 @@ class Ee {
     this.window.removeEventListener("touchmove", this.onCanvasTouchMove), this.window.removeEventListener("touchend", this.onCanvasTouchEnd), this.window.removeEventListener("touchcancel", this.onCanvasTouchEnd);
   }
 }
-const Ce = () => {
-}, Ae = (r, e) => e, Se = (r, e) => {
+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;
-}, Pe = (r, e, t, s) => (o, i, n, h) => {
-  let c = i.dx, d = i.dy;
-  r !== null && c < r && c < o.dx && (c = o.dx);
-  const g = n * o.scale;
-  e !== null && c > e - g && c > o.dx && (c = o.dx), t !== null && d < t && d < o.dy && (d = o.dy);
-  const w = h * o.scale;
-  return s !== null && d > s - w && d > o.dy && (d = o.dy), { scale: i.scale, dx: c, dy: d };
+}, 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) {
     case "scale-limit":
-      return Se(
+      return Pe(
         r.minContentScale ?? null,
         r.maxContentScale ?? null
       );
     case "shift-limit":
-      return Pe(
+      return Se(
         r.minX ?? null,
         r.maxX ?? null,
         r.minY ?? null,
@@ -1495,53 +1506,53 @@ const Ce = () => {
       return r.preprocessorFn;
   }
 }, Me = (r) => (e, t, s, o) => r.reduce(
-  (i, n) => n(e, i, s, o),
+  (i, h) => h(e, i, s, o),
   t
 );
 class Ne {
   constructor(e, t) {
-    a(this, "model");
-    a(this, "transformation");
-    a(this, "element", null);
-    a(this, "prevTouches", null);
-    a(this, "onTransformFinished");
-    a(this, "transformPreprocessor");
-    a(this, "isScalable");
-    a(this, "isShiftable");
-    a(this, "wheelSensitivity");
-    a(this, "window", window);
-    a(this, "onMouseDown", () => {
-      this.element !== null && (I(this.element, this.shiftCursor), this.window.addEventListener("mousemove", this.onMouseMove), this.window.addEventListener("mouseup", this.onMouseUp));
+    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));
     });
-    a(this, "onMouseMove", (e) => {
+    n(this, "onMouseMove", (e) => {
       if (!this.isShiftable || this.element === null)
         return;
-      if (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY)) {
+      if (!W(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
       const t = -e.movementX, s = -e.movementY;
       this.moveViewport(t, s);
     });
-    a(this, "onMouseUp", () => {
+    n(this, "onMouseUp", () => {
       this.stopMouseDrag();
     });
-    a(this, "onWheelScroll", (e) => {
+    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, h = 1 / (e.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(h, o, i);
+      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);
     });
-    a(this, "onTouchStart", (e) => {
+    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);
     });
-    a(this, "onTouchMove", (e) => {
+    n(this, "onTouchMove", (e) => {
       if (this.prevTouches === null || !this.isShiftable || this.element === null)
         return;
       const t = this.getAverageTouch(e);
       if (!t.touches.every(
-        (o) => V(this.element, o[0], o[1]) && O(this.window, o[0], o[1])
+        (o) => W(this.element, o[0], o[1]) && V(this.window, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1550,15 +1561,15 @@ class Ne {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: i } = this.element.getBoundingClientRect(), n = this.prevTouches.x - o, h = this.prevTouches.y - i, d = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(d, n, h);
+        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);
       }
       this.prevTouches = t;
     });
-    a(this, "onTouchEnd", (e) => {
+    n(this, "onTouchEnd", (e) => {
       e.touches.length > 0 ? this.prevTouches = this.getAverageTouch(e) : this.stopTouchDrag();
     });
-    a(this, "observer", new ResizeObserver(() => {
+    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,
@@ -1569,17 +1580,17 @@ class Ne {
         this.canvas.patchViewportMatrix(o), this.onTransformFinished();
       }
     }));
-    a(this, "shiftCursor");
-    var i, n, h, c, d, g, w, m;
-    this.canvas = e, this.options = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((n = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : n.enabled) !== !1, this.isShiftable = ((c = (h = this.options) == null ? void 0 : h.shift) == null ? void 0 : c.enabled) !== !1;
-    const s = (g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.wheelSensitivity;
-    this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((w = t == null ? void 0 : t.events) == null ? void 0 : w.onTransformFinished) ?? Ce;
+    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 = Ae, this.shiftCursor = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab";
+    ) : 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";
   }
   addNode(e) {
     return this.canvas.addNode(e), this;
@@ -1628,19 +1639,19 @@ class Ne {
   }
   getAverageTouch(e) {
     const t = [], s = e.touches.length;
-    for (let c = 0; c < s; c++)
-      t.push([e.touches[c].clientX, e.touches[c].clientY]);
+    for (let d = 0; d < s; d++)
+      t.push([e.touches[d].clientX, e.touches[d].clientY]);
     const o = t.reduce(
-      (c, d) => [c[0] + d[0], c[1] + d[1]],
+      (d, c) => [d[0] + c[0], d[1] + c[1]],
       [0, 0]
-    ), i = [o[0] / s, o[1] / s], h = t.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
-      (c, d) => c + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+    ), 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: h / s,
+      scale: a / s,
       touchesCnt: s,
       touches: t
     };
@@ -1652,13 +1663,13 @@ class Ne {
       dy: s.dy + s.scale * t
     };
     if (this.element !== null) {
-      const { width: i, height: n } = this.element.getBoundingClientRect(), h = this.transformPreprocessor(
+      const { width: i, height: h } = this.element.getBoundingClientRect(), a = this.transformPreprocessor(
         s,
         o,
         i,
-        n
+        h
       );
-      this.canvas.patchViewportMatrix(h), this.onTransformFinished();
+      this.canvas.patchViewportMatrix(a), this.onTransformFinished();
     }
   }
   scaleViewport(e, t, s) {
@@ -1668,16 +1679,16 @@ class Ne {
       scale: o.scale * e,
       dx: o.scale * (1 - e) * t + o.dx,
       dy: o.scale * (1 - e) * s + o.dy
-    }, { width: n, height: h } = this.element.getBoundingClientRect(), c = this.transformPreprocessor(
+    }, { width: h, height: a } = this.element.getBoundingClientRect(), d = this.transformPreprocessor(
       o,
       i,
-      n,
-      h
+      h,
+      a
     );
-    this.canvas.patchViewportMatrix(c), this.onTransformFinished();
+    this.canvas.patchViewportMatrix(d), this.onTransformFinished();
   }
   stopMouseDrag() {
-    this.element !== null && I(this.element, null), this.removeMouseDragListeners();
+    this.element !== null && O(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onMouseMove), this.window.removeEventListener("mouseup", this.onMouseUp);
@@ -1691,11 +1702,11 @@ class Ne {
 }
 class Te {
   constructor() {
-    a(this, "coreOptions");
-    a(this, "dragOptions");
-    a(this, "transformOptions");
-    a(this, "isDraggable", !1);
-    a(this, "isTransformable", !1);
+    n(this, "coreOptions");
+    n(this, "dragOptions");
+    n(this, "transformOptions");
+    n(this, "isDraggable", !1);
+    n(this, "isTransformable", !1);
   }
   setOptions(e) {
     return this.coreOptions = e, this;
@@ -1718,16 +1729,16 @@ export {
   B as CycleSquareEdgeShape,
   ne as DetourBezierEdgeShape,
   G as DetourStraightEdgeShape,
-  A as EdgeType,
+  C as EdgeType,
   se as HorizontalEdgeShape,
   Te as HtmlGraphBuilder,
-  C as HtmlGraphError,
+  f as HtmlGraphError,
   re as StraightEdgeShape,
   Ee as UserDraggableNodesCanvas,
   Ne as UserTransformableCanvas,
   oe as VerticalEdgeShape,
   ae as createBezierEdgeShapeFactory,
-  de as createHorizontalEdgeShapeFactory,
+  ce as createHorizontalEdgeShapeFactory,
   he as createStraightEdgeShareFactory,
-  ce as createVerticalEdgeShapeFactory
+  de as createVerticalEdgeShapeFactory
 };