@html-graph/html-graph 2.3.0 → 2.5.0

package/dist/html-graph.js

@@ -1,22 +1,47 @@
-var te = Object.defineProperty;
-var oe = (t, e, o) => e in t ? te(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var i = (t, e, o) => oe(t, typeof e != "symbol" ? e + "" : e, o);
-class re {
+var oe = Object.defineProperty;
+var re = (t, e, o) => e in t ? oe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var i = (t, e, o) => re(t, typeof e != "symbol" ? e + "" : e, o);
+class ie {
   constructor(e) {
     i(this, "onAfterNodeAdded");
+    /**
+     * @deprecated
+     * use onAfterNodeUpdated instead
+     */
     i(this, "onAfterNodeCoordinatesUpdated");
+    i(this, "onAfterNodeUpdated");
     i(this, "onAfterNodePriorityUpdated");
     i(this, "onBeforeNodeRemoved");
+    i(this, "onAfterPortMarked");
+    /**
+     * @deprecated
+     * use onAfterPortMarked instead
+     */
     i(this, "onAfterPortAdded");
+    i(this, "onAfterPortUpdated");
+    /**
+     * @deprecated
+     * use onAfterPortUpdated instead
+     */
     i(this, "onAfterPortDirectionUpdated");
+    i(this, "onBeforePortUnmarked");
+    /**
+     * @deprecated
+     * use onBeforePortUnmarked instead
+     */
     i(this, "onBeforePortRemoved");
     i(this, "onAfterEdgeAdded");
     i(this, "onAfterEdgeShapeUpdated");
+    i(this, "onAfterEdgeUpdated");
+    /**
+     * @deprecated
+     * use onAfterEdgeUpdated instead
+     */
     i(this, "onAfterEdgeAdjacentPortsUpdated");
     i(this, "onAfterEdgePriorityUpdated");
     i(this, "onBeforeEdgeRemoved");
     i(this, "onBeforeClear");
-    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeCoordinatesUpdated = this.graphStore.onAfterNodeCoordinatesUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortAdded = this.graphStore.onAfterPortAdded, this.onAfterPortDirectionUpdated = this.graphStore.onAfterPortDirectionUpdated, this.onBeforePortRemoved = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeAdjacentPortsUpdated = this.graphStore.onAfterEdgeAdjacentPortsUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
+    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodeCoordinatesUpdated = this.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortAdded = this.onAfterPortMarked, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onAfterPortDirectionUpdated = this.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onBeforePortRemoved = this.onBeforePortUnmarked, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgeAdjacentPortsUpdated = this.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
   }
   getNode(e) {
     const o = this.graphStore.getNode(e);
@@ -85,9 +110,11 @@ class re {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class ie {
+class se {
   constructor(e) {
-    this.transformer = e;
+    i(this, "onBeforeUpdated");
+    i(this, "onAfterUpdated");
+    this.transformer = e, this.onBeforeUpdated = this.transformer.onBeforeUpdated, this.onAfterUpdated = this.transformer.onAfterUpdated;
   }
   getViewportMatrix() {
     return { ...this.transformer.getViewportMatrix() };
@@ -96,11 +123,61 @@ class ie {
     return { ...this.transformer.getContentMatrix() };
   }
 }
-class se {
+class ne {
   constructor(e, o, r) {
     i(this, "viewport");
     i(this, "graph");
-    this.graphStore = e, this.viewportStore = o, this.htmlView = r, this.graph = new re(this.graphStore), this.viewport = new ie(this.viewportStore);
+    i(this, "onAfterNodeAdded", (e) => {
+      this.htmlView.attachNode(e);
+    });
+    i(this, "onAfterNodeUpdated", (e) => {
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((r) => {
+        this.htmlView.renderEdge(r);
+      });
+    });
+    i(this, "onAfterNodePriorityUpdated", (e) => {
+      this.htmlView.updateNodePriority(e);
+    });
+    i(this, "onBeforeNodeRemoved", (e) => {
+      this.graphStore.getNodePortIds(e).forEach((o) => {
+        this.unmarkPort(o);
+      }), this.htmlView.detachNode(e);
+    });
+    i(this, "onAfterPortUpdated", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((r) => {
+        this.htmlView.renderEdge(r);
+      });
+    });
+    i(this, "onBeforePortUnmarked", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
+        this.removeEdge(o);
+      });
+    });
+    i(this, "onAfterEdgeAdded", (e) => {
+      this.htmlView.attachEdge(e);
+    });
+    i(this, "onAfterEdgeShapeUpdated", (e) => {
+      this.htmlView.updateEdgeShape(e);
+    });
+    i(this, "onAfterEdgeUpdated", (e) => {
+      this.htmlView.renderEdge(e);
+    });
+    i(this, "onAfterEdgePriorityUpdated", (e) => {
+      this.htmlView.updateEdgePriority(e);
+    });
+    i(this, "onBeforeEdgeRemoved", (e) => {
+      this.htmlView.detachEdge(e);
+    });
+    i(this, "onBeforeClear", () => {
+      this.htmlView.clear();
+    });
+    this.graphStore = e, this.viewportStore = o, this.htmlView = r, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+      this.onAfterNodePriorityUpdated
+    ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
+      this.onAfterEdgeShapeUpdated
+    ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
+      this.onAfterEdgePriorityUpdated
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), this.graph = new ie(this.graphStore), this.viewport = new se(this.viewportStore);
   }
   attach(e) {
     this.htmlView.attach(e);
@@ -109,46 +186,31 @@ class se {
     this.htmlView.detach();
   }
   addNode(e) {
-    this.graphStore.addNode(e), this.htmlView.attachNode(e.id);
+    this.graphStore.addNode(e);
   }
   updateNode(e, o) {
-    this.graphStore.updateNodeCoordinates(e, {
-      x: o.x,
-      y: o.y,
-      centerFn: o.centerFn
-    }), this.htmlView.updateNodeCoordinates(e), o.priority !== void 0 && (this.graphStore.updateNodePriority(e, o.priority), this.htmlView.updateNodePriority(e)), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((n) => {
-      this.htmlView.renderEdge(n);
-    });
+    this.graphStore.updateNode(e, o);
   }
   removeNode(e) {
-    this.graphStore.getNodePortIds(e).forEach((o) => {
-      this.unmarkPort(o);
-    }), this.graphStore.removeNode(e), this.htmlView.detachNode(e);
+    this.graphStore.removeNode(e);
   }
   markPort(e) {
     this.graphStore.addPort(e);
   }
   updatePort(e, o) {
-    o.direction !== void 0 && this.graphStore.updatePortDirection(e, o.direction), this.graphStore.getPortAdjacentEdgeIds(e).forEach((n) => {
-      this.htmlView.renderEdge(n);
-    });
+    this.graphStore.updatePort(e, o);
   }
   unmarkPort(e) {
-    this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
-      this.removeEdge(o);
-    }), this.graphStore.removePort(e);
+    this.graphStore.removePort(e);
   }
   addEdge(e) {
-    this.graphStore.addEdge(e), this.htmlView.attachEdge(e.id);
+    this.graphStore.addEdge(e);
   }
   updateEdge(e, o) {
-    (o.from !== void 0 || o.to !== void 0) && this.graphStore.updateEdgeAdjacentPorts(e, {
-      from: o.from,
-      to: o.to
-    }), o.shape !== void 0 && (this.graphStore.updateEdgeShape(e, o.shape), this.htmlView.updateEdgeShape(e)), this.htmlView.renderEdge(e), o.priority !== void 0 && (this.graphStore.updateEdgePriority(e, o.priority), this.htmlView.updateEdgePriority(e));
+    this.graphStore.updateEdge(e, o);
   }
   removeEdge(e) {
-    this.graphStore.removeEdge(e), this.htmlView.detachEdge(e);
+    this.graphStore.removeEdge(e);
   }
   patchViewportMatrix(e) {
     this.viewportStore.patchViewportMatrix(e);
@@ -157,33 +219,39 @@ class se {
     this.viewportStore.patchContentMatrix(e);
   }
   clear() {
-    this.htmlView.clear(), this.graphStore.clear();
+    this.graphStore.clear();
   }
   destroy() {
-    this.clear(), this.htmlView.destroy();
+    this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
+      this.onAfterNodePriorityUpdated
+    ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
+      this.onAfterEdgeShapeUpdated
+    ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
+      this.onAfterEdgePriorityUpdated
+    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.clear(), this.htmlView.destroy();
   }
 }
-const $ = (t, e, o) => {
+const U = (t, e, o) => {
   const { x: r, y: n, width: h, height: s } = t.getBoundingClientRect();
   return e >= r && e <= r + h && o >= n && o <= n + s;
-}, W = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, R = (t, e) => {
+}, $ = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, R = (t, e) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
-}, ne = (t) => {
-  var g, f, x, y, S, p;
+}, he = (t) => {
+  var g, f, x, v, S, p;
   const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
   }), o = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), r = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
-  }), n = (t == null ? void 0 : t.moveOnTop) === !1, h = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, s = h !== void 0 ? h : "grab", d = (S = t == null ? void 0 : t.mouse) == null ? void 0 : S.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, a = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseUpEventVerifier;
+  }), n = (t == null ? void 0 : t.moveOnTop) === !1, h = (v = t == null ? void 0 : t.mouse) == null ? void 0 : v.dragCursor, s = h !== void 0 ? h : "grab", d = (S = t == null ? void 0 : t.mouse) == null ? void 0 : S.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, a = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseUpEventVerifier;
   return {
     freezePriority: n,
     dragCursor: s,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (T) => T.button === 0,
+    mouseUpEventVerifier: a !== void 0 ? a : (N) => N.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: o,
     onNodeDragFinished: r
   };
 };
-class he {
+class de {
   constructor(e, o) {
     i(this, "graph");
     i(this, "viewport");
@@ -192,7 +260,7 @@ class he {
     i(this, "grabbedNodeId", null);
     i(this, "element", null);
     i(this, "onWindowMouseMove", (e) => {
-      if (this.element !== null && (!$(this.element, e.clientX, e.clientY) || !W(this.window, e.clientX, e.clientY))) {
+      if (this.element !== null && (!U(this.element, e.clientX, e.clientY) || !$(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
@@ -205,7 +273,7 @@ class he {
       if (e.touches.length !== 1)
         return;
       const o = e.touches[0];
-      if (this.element !== null && (!$(this.element, o.clientX, o.clientY) || !W(this.window, o.clientX, o.clientY))) {
+      if (this.element !== null && (!U(this.element, o.clientX, o.clientY) || !$(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
@@ -223,7 +291,7 @@ class he {
     i(this, "previousTouchCoords", null);
     i(this, "window", window);
     i(this, "options");
-    this.canvas = e, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = ne(o ?? {});
+    this.canvas = e, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = he(o ?? {});
   }
   attach(e) {
     this.detach(), this.element = e, this.canvas.attach(this.element);
@@ -354,7 +422,7 @@ class he {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const de = (t) => {
+const ce = (t) => {
   const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, r = t.minY !== null ? t.minY : -1 / 0, n = t.maxY !== null ? t.maxY : 1 / 0;
   return (h) => {
     let s = h.nextTransform.x, d = h.nextTransform.y;
@@ -364,7 +432,7 @@ const de = (t) => {
     const l = h.canvasHeight * h.prevTransform.scale, g = n - l;
     return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: d };
   };
-}, ce = (t) => {
+}, ae = (t) => {
   const e = t.maxContentScale, o = t.minContentScale, r = e !== null ? 1 / e : 0, n = o !== null ? 1 / o : 1 / 0;
   return (h) => {
     const s = h.prevTransform, d = h.nextTransform;
@@ -385,7 +453,7 @@ const de = (t) => {
       y: l
     };
   };
-}, ae = (t) => (e) => t.reduce(
+}, le = (t) => (e) => t.reduce(
   (o, r) => r({
     prevTransform: e.prevTransform,
     nextTransform: o,
@@ -393,40 +461,40 @@ const de = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), J = (t) => {
+), Q = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return ce({
+      return ae({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return de({
+      return ce({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, le = (t) => {
-  var y, S, p, T, k, V, D, C, H, G, K, _;
-  const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
+}, ge = (t) => {
+  var v, S, p, N, k, M, V, L, G, _, J, K;
+  const e = (v = t == null ? void 0 : t.scale) == null ? void 0 : v.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
   let n;
-  r !== void 0 ? Array.isArray(r) ? n = ae(
+  r !== void 0 ? Array.isArray(r) ? n = le(
     r.map(
-      (P) => J(P)
+      (b) => Q(b)
     )
-  ) : n = J(r) : n = (P) => P.nextTransform;
+  ) : n = Q(r) : n = (b) => b.nextTransform;
   const h = ((S = t == null ? void 0 : t.shift) == null ? void 0 : S.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
-  }), d = ((T = t == null ? void 0 : t.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), c = (k = t == null ? void 0 : t.shift) == null ? void 0 : k.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (V = t == null ? void 0 : t.shift) == null ? void 0 : V.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, f = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
+  }), d = ((N = t == null ? void 0 : t.events) == null ? void 0 : N.onTransformChange) ?? (() => {
+  }), c = (k = t == null ? void 0 : t.shift) == null ? void 0 : k.mouseDownEventVerifier, a = c !== void 0 ? c : (b) => b.button === 0, l = (M = t == null ? void 0 : t.shift) == null ? void 0 : M.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0, f = (V = t == null ? void 0 : t.scale) == null ? void 0 : V.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((C = t == null ? void 0 : t.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
+    onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((H = t == null ? void 0 : t.events) == null ? void 0 : H.onTransformFinished) ?? (() => {
+    onTransformFinished: ((G = t == null ? void 0 : t.events) == null ? void 0 : G.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: s,
     onTransformChange: d,
@@ -435,13 +503,13 @@ const de = (t) => {
     mouseDownEventVerifier: a,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: x,
-    scaleWheelFinishTimeout: ((G = t == null ? void 0 : t.scale) == null ? void 0 : G.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((_ = t == null ? void 0 : t.scale) == null ? void 0 : _.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((J = t == null ? void 0 : t.events) == null ? void 0 : J.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
     })
   };
-}, b = (t) => {
+}, C = (t) => {
   const e = [], o = t.touches.length;
   for (let d = 0; d < o; d++)
     e.push([t.touches[d].clientX, t.touches[d].clientY]);
@@ -459,16 +527,16 @@ const de = (t) => {
     touchesCnt: o,
     touches: e
   };
-}, ge = (t, e, o) => ({
+}, ue = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), ue = (t, e, o, r) => ({
+}), we = (t, e, o, r) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
   y: t.scale * (1 - e) * r + t.y
 });
-class q {
+class ee {
   constructor(e, o) {
     i(this, "graph");
     i(this, "viewport");
@@ -480,7 +548,7 @@ class q {
       this.element === null || !this.options.mouseDownEventVerifier(e) || (R(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (this.element === null || !$(this.element, e.clientX, e.clientY) || !W(this.window, e.clientX, e.clientY)) {
+      if (this.element === null || !U(this.element, e.clientX, e.clientY) || !$(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -501,18 +569,18 @@ class q {
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = b(e);
+        this.prevTouches = C(e);
         return;
       }
-      this.prevTouches = b(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
+      this.prevTouches = C(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
     });
     i(this, "onWindowTouchMove", (e) => {
       const o = this.element;
       if (o === null)
         return;
-      const r = b(e);
+      const r = C(e);
       if (!r.touches.every(
-        (h) => $(o, h[0], h[1]) && W(this.window, h[0], h[1])
+        (h) => U(o, h[0], h[1]) && $(this.window, h[0], h[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -528,7 +596,7 @@ class q {
       this.prevTouches = r;
     });
     i(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = b(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = C(e) : this.stopTouchDrag();
     });
     i(this, "observer", new ResizeObserver(() => {
       const e = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
@@ -540,7 +608,7 @@ class q {
       this.options.onResizeTransformStarted(), this.canvas.patchViewportMatrix(n), this.options.onResizeTransformFinished();
     }));
     i(this, "options");
-    this.canvas = e, this.options = le(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
+    this.canvas = e, this.options = ge(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
   }
   attach(e) {
     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);
@@ -588,7 +656,7 @@ class q {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   moveViewport(e, o, r) {
-    const n = this.viewport.getViewportMatrix(), h = ge(n, o, r), { width: s, height: d } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
+    const n = this.viewport.getViewportMatrix(), h = ue(n, o, r), { width: s, height: d } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
       prevTransform: n,
       nextTransform: h,
       canvasWidth: s,
@@ -597,7 +665,7 @@ class q {
     this.performTransform(c);
   }
   scaleViewport(e, o, r, n) {
-    const h = this.canvas.viewport.getViewportMatrix(), s = ue(h, o, r, n), { width: d, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
+    const h = this.canvas.viewport.getViewportMatrix(), s = we(h, o, r, n), { width: d, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
       prevTransform: h,
       nextTransform: s,
       canvasWidth: d,
@@ -621,112 +689,7 @@ class q {
     this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.options.onTransformChange();
   }
 }
-class we {
-  constructor() {
-    i(this, "keyMap", /* @__PURE__ */ new Map());
-    i(this, "valueMap", /* @__PURE__ */ new Map());
-  }
-  set(e, o) {
-    this.keyMap.set(e, o), this.valueMap.set(o, 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 o = this.keyMap.get(e);
-    o !== void 0 && this.valueMap.delete(o), this.keyMap.delete(e);
-  }
-  deleteByValue(e) {
-    const o = this.valueMap.get(e);
-    o !== void 0 && this.keyMap.delete(o), this.valueMap.delete(e);
-  }
-  forEach(e) {
-    this.keyMap.forEach((o, r) => {
-      e(o, r);
-    });
-  }
-  clear() {
-    this.keyMap.clear(), this.valueMap.clear();
-  }
-}
 class fe {
-  constructor(e) {
-    i(this, "viewport");
-    i(this, "graph");
-    i(this, "nodes", new we());
-    i(this, "nodesResizeObserver");
-    i(this, "window", window);
-    this.canvas = e, this.nodesResizeObserver = new this.window.ResizeObserver((o) => {
-      o.forEach((r) => {
-        const n = r.target;
-        this.handleNodeResize(n);
-      });
-    }), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
-  }
-  attach(e) {
-    this.canvas.attach(e);
-  }
-  detach() {
-    this.canvas.detach();
-  }
-  addNode(e) {
-    this.canvas.addNode(e), this.nodes.set(e.id, e.element), this.nodesResizeObserver.observe(e.element);
-  }
-  updateNode(e, o) {
-    this.canvas.updateNode(e, o);
-  }
-  removeNode(e) {
-    this.canvas.removeNode(e);
-    const o = this.nodes.getByKey(e);
-    this.nodes.deleteByKey(e), this.nodesResizeObserver.unobserve(o);
-  }
-  markPort(e) {
-    this.canvas.markPort(e);
-  }
-  updatePort(e, o) {
-    this.canvas.updatePort(e, o);
-  }
-  unmarkPort(e) {
-    this.canvas.unmarkPort(e);
-  }
-  addEdge(e) {
-    this.canvas.addEdge(e);
-  }
-  updateEdge(e, o) {
-    this.canvas.updateEdge(e, o);
-  }
-  removeEdge(e) {
-    this.canvas.removeEdge(e);
-  }
-  patchViewportMatrix(e) {
-    this.canvas.patchViewportMatrix(e);
-  }
-  patchContentMatrix(e) {
-    this.canvas.patchContentMatrix(e);
-  }
-  clear() {
-    this.canvas.clear(), this.nodesResizeObserver.disconnect(), this.nodes.clear();
-  }
-  destroy() {
-    this.clear(), this.canvas.destroy();
-  }
-  handleNodeResize(e) {
-    const o = this.nodes.getByValue(e);
-    this.canvas.updateNode(o, {}), this.graph.getNodeAdjacentEdgeIds(o).forEach((n) => {
-      this.canvas.updateEdge(n, {});
-    });
-  }
-}
-class ye {
   constructor(e, o, r, n) {
     i(this, "graph");
     i(this, "viewport");
@@ -773,7 +736,7 @@ class ye {
         }
       }
     };
-    this.canvas = new q(
+    this.canvas = new ee(
       e,
       d
     ), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.trigger.subscribe(this.updateLoadedArea);
@@ -840,10 +803,10 @@ class ye {
 const ve = () => {
   const t = document.createElement("div");
   return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-}, xe = () => {
+}, ye = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
-}, Ee = () => {
+}, xe = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
 };
@@ -851,14 +814,14 @@ class Ae {
   constructor(e, o) {
     i(this, "canvasWrapper", null);
     i(this, "host", ve());
-    i(this, "container", xe());
+    i(this, "container", ye());
     i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
     });
-    this.graphStore = e, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdate.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attach(e) {
     this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host), this.graphStore.getAllEdgeIds().forEach((o) => {
@@ -869,8 +832,8 @@ class Ae {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   attachNode(e) {
-    const o = this.graphStore.getNode(e), r = Ee();
-    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodeCoordinates(e), this.updateNodePriority(e), r.style.visibility = "visible";
+    const o = this.graphStore.getNode(e), r = xe();
+    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodePosition(e), this.updateNodePriority(e), r.style.visibility = "visible";
   }
   detachNode(e) {
     const o = this.nodeIdToWrapperElementMap.get(e);
@@ -892,9 +855,9 @@ class Ae {
     });
   }
   destroy() {
-    this.viewportStore.onAfterUpdate.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
+    this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
   }
-  updateNodeCoordinates(e) {
+  updateNodePosition(e) {
     const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, d = r.centerFn(n, h), c = r.x - s * d.x, a = r.y - s * d.y;
     o.style.transform = `translate(${c}px, ${a}px)`;
   }
@@ -942,7 +905,7 @@ class Ae {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class pe {
+class Ee {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -962,7 +925,7 @@ class pe {
     return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class Se {
+class pe {
   constructor(e, o, r) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -986,7 +949,7 @@ class Se {
         this.handleAttachEdge(s);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new pe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new Ee(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attach(e) {
     this.htmlView.attach(e);
@@ -1006,8 +969,8 @@ class Se {
   detachEdge(e) {
     this.attachedEdges.has(e) && this.handleDetachEdge(e);
   }
-  updateNodeCoordinates(e) {
-    this.attachedNodes.has(e) ? this.htmlView.updateNodeCoordinates(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
+  updateNodePosition(e) {
+    this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
       this.attachEdgeEntities(o);
     }));
   }
@@ -1046,7 +1009,7 @@ class Se {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class ee {
+class te {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -1062,8 +1025,8 @@ class ee {
     });
   }
 }
-const E = () => {
-  const t = new ee();
+const A = () => {
+  const t = new te();
   return [t, t];
 };
 class z {
@@ -1082,53 +1045,53 @@ class z {
     this.counter = 0;
   }
 }
-class A extends Error {
+class E extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "HtmlGraphError");
   }
 }
-const Te = (t, e) => ({
+const Se = (t, e) => ({
   x: t / 2,
   y: e / 2
-}), Y = (t) => () => t, Q = Y(0), Ne = () => {
+}), Y = (t) => () => t, Z = Y(0), Ne = () => {
   let t = 0;
   return () => t++;
 }, me = (t, e) => {
-  let o = Q, r = Q;
+  let o = Z, r = Z;
   const n = Ne();
   return t === "incremental" && (o = n), e === "incremental" && (r = n), typeof t == "number" && (o = Y(t)), typeof e == "number" && (r = Y(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
-}, v = (t, e, o) => ({
+}, y = (t, e, o) => ({
   x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
   y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
-}), N = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
+}), m = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
   x: 0,
   y: 0
-}, m = (t, e, o, r) => {
+}, T = (t, e, o, r) => {
   const h = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
-  ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
+  ].map((a) => y(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
   return `${s} ${d} ${c}`;
-}, L = (t, e) => {
+}, D = (t, e) => {
   const o = [];
   if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
     const r = t.length - 1;
     let n = 0, h = 0, s = 0;
     t.forEach((d, c) => {
       let a = 0, l = 0, g = 0;
-      const f = c > 0, x = c < r, y = f && x;
+      const f = c > 0, x = c < r, v = f && x;
       if (f && (a = -n, l = -h, g = s), x) {
-        const C = t[c + 1];
-        n = C.x - d.x, h = C.y - d.y, s = Math.sqrt(n * n + h * h);
+        const L = t[c + 1];
+        n = L.x - d.x, h = L.y - d.y, s = Math.sqrt(n * n + h * h);
       }
-      const p = s !== 0 ? Math.min((y ? e : 0) / s, c < r - 1 ? 0.5 : 1) : 0, T = y ? { x: d.x + n * p, y: d.y + h * p } : d, V = g !== 0 ? Math.min((y ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = y ? { x: d.x + a * V, y: d.y + l * V } : d;
-      c > 0 && o.push(`L ${D.x} ${D.y}`), y && o.push(
-        `C ${d.x} ${d.y} ${d.x} ${d.y} ${T.x} ${T.y}`
+      const p = s !== 0 ? Math.min((v ? e : 0) / s, c < r - 1 ? 0.5 : 1) : 0, N = v ? { x: d.x + n * p, y: d.y + h * p } : d, M = g !== 0 ? Math.min((v ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, V = v ? { x: d.x + a * M, y: d.y + l * M } : d;
+      c > 0 && o.push(`L ${V.x} ${V.y}`), v && o.push(
+        `C ${d.x} ${d.y} ${d.x} ${d.y} ${N.x} ${N.y}`
       );
     });
   }
@@ -1136,13 +1099,13 @@ const Te = (t, e) => ({
 }, I = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
-}, F = () => {
+}, W = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.transformOrigin = "50% 50%", t;
-}, U = (t, e) => {
+}, F = (t, e) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
-}, M = (t) => {
+}, P = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", t), e;
 }, B = (t, e) => {
@@ -1161,12 +1124,12 @@ const Te = (t, e) => ({
     flipX: c,
     flipY: a
   };
-}, Me = (t) => {
-  const e = v(
+}, Te = (t) => {
+  const e = y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ), o = v(
+  ), o = y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
@@ -1179,22 +1142,22 @@ const Te = (t, e) => ({
   }, h = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, s = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
   return `${s}${h}${d}`;
 }, Pe = (t) => {
-  const e = t.hasSourceArrow ? v(
+  const e = t.hasSourceArrow ? y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ) : w, o = t.hasTargetArrow ? v(
+  ) : w, o = t.hasTargetArrow ? y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, r = t.arrowLength, n = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, s = n * t.flipX, d = h * t.flipY, c = v(
+  ) : t.to, r = t.arrowLength, n = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, s = n * t.flipX, d = h * t.flipY, c = y(
     { x: r, y: w.y },
     t.fromVect,
     w
   ), a = {
     x: c.x + s,
     y: c.y + d
-  }, l = v(
+  }, l = y(
     { x: t.to.x - r, y: t.to.y },
     t.toVect,
     t.to
@@ -1204,7 +1167,7 @@ const Te = (t, e) => ({
   }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
     x: c.x + t.curvature * t.fromVect.x,
     y: c.y + t.curvature * t.fromVect.y
-  }, y = {
+  }, v = {
     x: l.x - t.curvature * t.toVect.x,
     y: l.y - t.curvature * t.toVect.y
   }, S = {
@@ -1218,19 +1181,19 @@ const Te = (t, e) => ({
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
     `C ${x.x} ${x.y} ${S.x} ${S.y} ${f.x} ${f.y}`,
-    `C ${p.x} ${p.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
+    `C ${p.x} ${p.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, Ve = (t) => {
-  const e = t.hasSourceArrow ? v(
+}, be = (t) => {
+  const e = t.hasSourceArrow ? y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ) : w, o = t.hasTargetArrow ? v(
+  ) : w, o = t.hasTargetArrow ? y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = v({ x: n, y: w.y }, t.fromVect, w), s = v(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = y({ x: n, y: w.y }, t.fromVect, w), s = y(
     { x: t.to.x - n, y: t.to.y },
     t.toVect,
     t.to
@@ -1238,57 +1201,57 @@ const Te = (t, e) => ({
     x: t.flipX > 0 ? t.to.x - d : t.to.x + r,
     y: s.y
   }, f = { x: g.x, y: c };
-  return L(
+  return D(
     [e, h, a, l, f, g, s, o],
     t.roundness
   );
 }, X = (t) => {
-  const e = t.hasSourceArrow ? v(
+  const e = t.hasSourceArrow ? y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ) : w, o = t.hasTargetArrow ? v(
+  ) : w, o = t.hasTargetArrow ? y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, n = v(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = y(
     { x: r, y: w.y },
     t.fromVect,
     w
-  ), h = Math.cos(t.detourDirection) * t.detourDistance, s = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = s * t.flipY, a = { x: n.x + d, y: n.y + c }, l = v(
+  ), h = Math.cos(t.detourDirection) * t.detourDistance, s = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = s * t.flipY, a = { x: n.x + d, y: n.y + c }, l = y(
     { x: t.to.x - r, y: t.to.y },
     t.toVect,
     t.to
   ), g = { x: l.x + d, y: l.y + c };
-  return L(
+  return D(
     [e, n, a, g, l, o],
     t.roundness
   );
-}, De = (t) => {
-  const e = t.hasSourceArrow ? v(
+}, Me = (t) => {
+  const e = t.hasSourceArrow ? y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ) : w, o = t.hasTargetArrow ? v(
+  ) : w, o = t.hasTargetArrow ? y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, n = v({ x: r, y: w.y }, t.fromVect, w), h = v(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = y({ x: r, y: w.y }, t.fromVect, w), h = y(
     { x: t.to.x - r, y: t.to.y },
     t.toVect,
     t.to
   );
-  return L([e, n, h, o], t.roundness);
-}, Ce = (t) => {
-  const e = t.hasSourceArrow ? v(
+  return D([e, n, h, o], t.roundness);
+}, Ve = (t) => {
+  const e = t.hasSourceArrow ? y(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
     w
-  ) : w, o = t.hasTargetArrow ? v(
+  ) : w, o = t.hasTargetArrow ? y(
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = v({ x: n, y: w.y }, t.fromVect, w), s = v(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = y({ x: n, y: w.y }, t.fromVect, w), s = y(
     { x: t.to.x - n, y: t.to.y },
     t.toVect,
     t.to
@@ -1296,11 +1259,11 @@ const Te = (t, e) => ({
     x: s.x,
     y: t.flipY > 0 ? t.to.y - d : t.to.y + r
   }, f = { x: c, y: g.y };
-  return L(
+  return D(
     [e, h, a, l, f, g, s, o],
     t.roundness
   );
-}, j = (t) => {
+}, H = (t) => {
   const e = t.arrowOffset, o = t.side, r = t.arrowLength + e, n = r + 2 * o, s = [
     { x: t.arrowLength, y: w.y },
     { x: r, y: w.y },
@@ -1311,15 +1274,15 @@ const Te = (t, e) => ({
     { x: r, y: w.y },
     { x: t.arrowLength, y: w.y }
   ].map(
-    (c) => v(c, t.fromVect, w)
+    (c) => y(c, t.fromVect, w)
   ), d = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${L(s, t.roundness)}`;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${D(s, t.roundness)}`;
 }, Le = (t) => {
   const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), n = e + o, h = t.arrowLength + r * (1 - o / n), s = e * o / n, c = [
     { x: t.arrowLength, y: w.y },
     { x: h, y: s },
     { x: h, y: -s }
-  ].map((g) => v(g, t.fromVect, w)), a = [
+  ].map((g) => y(g, t.fromVect, w)), a = [
     `M ${c[0].x} ${c[0].y}`,
     `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
     `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
@@ -1343,10 +1306,10 @@ const Te = (t, e) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class be {
+class De {
   constructor(e) {
     i(this, "svg", I());
-    i(this, "group", F());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1361,7 +1324,7 @@ class be {
     i(this, "hasTargetArrow");
     this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const o = (e == null ? void 0 : e.color) ?? u.color, r = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = U(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(o), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
@@ -1369,11 +1332,11 @@ class be {
       e.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
-    const c = N(
+    const c = m(
       e.from.direction,
       s,
       d
-    ), a = N(e.to.direction, s, d), l = {
+    ), a = m(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
@@ -1397,7 +1360,7 @@ class be {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Me({
+    }) : g = Te({
       to: l,
       fromVect: c,
       toVect: a,
@@ -1406,29 +1369,29 @@ class be {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = m(
+      const v = T(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const y = m(
+      const v = T(
         f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", v);
     }
   }
 }
-class $e {
+class Ce {
   constructor(e) {
     i(this, "svg", I());
-    i(this, "group", F());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1449,7 +1412,7 @@ class $e {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
@@ -1457,16 +1420,16 @@ class $e {
       e.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
-    const c = N(
+    const c = m(
       e.from.direction,
       s,
       d
-    ), a = N(e.to.direction, s, d), l = {
+    ), a = m(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
     let g, f = a, x = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1487,7 +1450,7 @@ class $e {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Ve({
+    }) : g = be({
       to: l,
       fromVect: c,
       toVect: a,
@@ -1498,29 +1461,29 @@ class $e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = m(
+      const v = T(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const y = m(
+      const v = T(
         f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", v);
     }
   }
 }
-class We {
+class Ue {
   constructor(e) {
     i(this, "svg", I());
-    i(this, "group", F());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1541,7 +1504,7 @@ class We {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
@@ -1549,16 +1512,16 @@ class We {
       e.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
-    const c = N(
+    const c = m(
       e.from.direction,
       s,
       d
-    ), a = N(e.to.direction, s, d), l = {
+    ), a = m(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
     let g, f = a, x = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1579,7 +1542,7 @@ class We {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = De({
+    }) : g = Me({
       to: l,
       fromVect: c,
       toVect: a,
@@ -1589,29 +1552,29 @@ class We {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = m(
+      const v = T(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const y = m(
+      const v = T(
         f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", v);
     }
   }
 }
-class Re {
+class $e {
   constructor(e) {
     i(this, "svg", I());
-    i(this, "group", F());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1632,7 +1595,7 @@ class Re {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
@@ -1640,16 +1603,16 @@ class Re {
       e.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
-    const c = N(
+    const c = m(
       e.from.direction,
       s,
       d
-    ), a = N(e.to.direction, s, d), l = {
+    ), a = m(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
     let g, f = a, x = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1670,7 +1633,7 @@ class Re {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Ce({
+    }) : g = Ve({
       to: l,
       fromVect: c,
       toVect: a,
@@ -1681,31 +1644,31 @@ class Re {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = m(
+      const v = T(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const y = m(
+      const v = T(
         f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", v);
     }
   }
 }
-const Ie = (t) => {
+const Re = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new We({
+      return () => new Ue({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1719,7 +1682,7 @@ const Ie = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new $e({
+      return () => new Ce({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1733,7 +1696,7 @@ const Ie = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new Re({
+      return () => new $e({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1747,7 +1710,7 @@ const Ie = (t) => {
         detourDirection: t.detourDirection
       });
     default:
-      return () => new be({
+      return () => new De({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1761,7 +1724,7 @@ const Ie = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, Fe = (t) => {
+}, Ie = (t) => {
   var o, r, n, h, s;
   const e = me(
     (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
@@ -1769,20 +1732,20 @@ const Ie = (t) => {
   );
   return {
     nodes: {
-      centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Te,
+      centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Se,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Ie(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
+      shapeFactory: Re(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class Ue {
-  constructor(e, o) {
+class We {
+  constructor(e, o, r) {
     i(this, "nodeIdGenerator", new z(
       (e) => this.graph.getNode(e) !== null
     ));
@@ -1801,9 +1764,11 @@ class Ue {
      * provides api for accessing viewport state
      */
     i(this, "viewport");
-    this.controller = e, this.defaults = Fe(o), this.graph = e.graph, this.viewport = e.viewport;
+    this.element = e, this.controller = o, this.defaults = Ie(r), this.graph = o.graph, this.viewport = o.viewport, this.attach(this.element);
   }
   /**
+   * @deprecated
+   * use CanvasBuilder.attach instead
    * attaches canvas to given element
    * detaches element first when canvas is attached
    */
@@ -1811,6 +1776,8 @@ class Ue {
     return this.controller.attach(e), this;
   }
   /**
+   * @deprecated
+   * attach canvas once instead, then reattach wrapper element
    * detaches canvas from element when attached
    */
   detach() {
@@ -1822,7 +1789,7 @@ class Ue {
   addNode(e) {
     const o = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(o) !== null)
-      throw new A("failed to add node with existing id");
+      throw new E("failed to add node with existing id");
     if (this.controller.addNode({
       id: o,
       element: e.element,
@@ -1845,7 +1812,7 @@ class Ue {
    */
   updateNode(e, o) {
     if (this.graph.getNode(e) === null)
-      throw new A("failed to update nonexisting node");
+      throw new E("failed to update nonexisting node");
     return this.controller.updateNode(e, o ?? {}), this;
   }
   /**
@@ -1855,7 +1822,7 @@ class Ue {
    */
   removeNode(e) {
     if (this.graph.getNode(e) === null)
-      throw new A("failed to remove nonexisting node");
+      throw new E("failed to remove nonexisting node");
     return this.controller.removeNode(e), this;
   }
   /**
@@ -1864,9 +1831,9 @@ class Ue {
   markPort(e) {
     const o = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(o) !== null)
-      throw new A("failed to add port with existing id");
+      throw new E("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
-      throw new A("failed to set port on nonexisting node");
+      throw new E("failed to set port on nonexisting node");
     return this.controller.markPort({
       id: o,
       element: e.element,
@@ -1879,7 +1846,7 @@ class Ue {
    */
   updatePort(e, o) {
     if (this.graph.getPort(e) === null)
-      throw new A("failed to unset nonexisting port");
+      throw new E("failed to unset nonexisting port");
     return this.controller.updatePort(e, o ?? {}), this;
   }
   /**
@@ -1888,7 +1855,7 @@ class Ue {
    */
   unmarkPort(e) {
     if (this.graph.getPort(e) === null)
-      throw new A("failed to unset nonexisting port");
+      throw new E("failed to unset nonexisting port");
     return this.controller.unmarkPort(e), this;
   }
   /**
@@ -1897,11 +1864,11 @@ class Ue {
   addEdge(e) {
     const o = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(o) !== null)
-      throw new A("failed to add edge with existing id");
+      throw new E("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
-      throw new A("failed to add edge from nonexisting port");
+      throw new E("failed to add edge from nonexisting port");
     if (this.graph.getPort(e.to) === null)
-      throw new A("failed to add edge to nonexisting port");
+      throw new E("failed to add edge to nonexisting port");
     return this.controller.addEdge({
       id: o,
       from: e.from,
@@ -1915,7 +1882,7 @@ class Ue {
    */
   updateEdge(e, o) {
     if (this.graph.getEdge(e) === null)
-      throw new A("failed to update nonexisting edge");
+      throw new E("failed to update nonexisting edge");
     return this.controller.updateEdge(e, o ?? {}), this;
   }
   /**
@@ -1923,7 +1890,7 @@ class Ue {
    */
   removeEdge(e) {
     if (this.graph.getEdge(e) === null)
-      throw new A("failed to remove nonexisting edge");
+      throw new E("failed to remove nonexisting edge");
     return this.controller.removeEdge(e), this;
   }
   /**
@@ -1953,7 +1920,7 @@ class Ue {
     this.controller.destroy();
   }
 }
-class Be {
+class Fe {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -1961,42 +1928,33 @@ class Be {
     i(this, "incommingEdges", /* @__PURE__ */ new Map());
     i(this, "outcommingEdges", /* @__PURE__ */ new Map());
     i(this, "cycleEdges", /* @__PURE__ */ new Map());
-    i(this, "onAfterNodeAddedEmitter");
+    i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
-    i(this, "onAfterNodeCoordinatesUpdatedEmitter");
-    i(this, "onAfterNodeCoordinatesUpdated");
-    i(this, "onAfterNodePriorityUpdatedEmitter");
+    i(this, "afterNodeUpdatedEmitter");
+    i(this, "onAfterNodeUpdated");
+    i(this, "afterNodePriorityUpdatedEmitter");
     i(this, "onAfterNodePriorityUpdated");
-    i(this, "onBeforeNodeRemovedEmitter");
+    i(this, "beforeNodeRemovedEmitter");
     i(this, "onBeforeNodeRemoved");
-    i(this, "onAfterPortAddedEmitter");
+    i(this, "afterPortAddedEmitter");
     i(this, "onAfterPortAdded");
-    i(this, "onAfterPortDirectionUpdatedEmitter");
-    i(this, "onAfterPortDirectionUpdated");
-    i(this, "onBeforePortRemovedEmitter");
+    i(this, "afterPortUpdatedEmitter");
+    i(this, "onAfterPortUpdated");
+    i(this, "beforePortRemovedEmitter");
     i(this, "onBeforePortRemoved");
-    i(this, "onAfterEdgeAddedEmitter");
+    i(this, "afterEdgeAddedEmitter");
     i(this, "onAfterEdgeAdded");
-    i(this, "onAfterEdgeShapeUpdatedEmitter");
+    i(this, "afterEdgeShapeUpdatedEmitter");
     i(this, "onAfterEdgeShapeUpdated");
-    i(this, "onAfterEdgeAdjacentPortsUpdatedEmitter");
-    i(this, "onAfterEdgeAdjacentPortsUpdated");
-    i(this, "onAfterEdgePriorityUpdatedEmitter");
+    i(this, "afterEdgeUpdatedEmitter");
+    i(this, "onAfterEdgeUpdated");
+    i(this, "afterEdgePriorityUpdatedEmitter");
     i(this, "onAfterEdgePriorityUpdated");
-    i(this, "onBeforeEdgeRemovedEmitter");
+    i(this, "beforeEdgeRemovedEmitter");
     i(this, "onBeforeEdgeRemoved");
-    i(this, "onBeforeClearEmitter");
+    i(this, "beforeClearEmitter");
     i(this, "onBeforeClear");
-    [this.onAfterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [
-      this.onAfterNodeCoordinatesUpdatedEmitter,
-      this.onAfterNodeCoordinatesUpdated
-    ] = E(), [this.onAfterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.onBeforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.onAfterPortAddedEmitter, this.onAfterPortAdded] = E(), [
-      this.onAfterPortDirectionUpdatedEmitter,
-      this.onAfterPortDirectionUpdated
-    ] = E(), [this.onBeforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.onAfterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.onAfterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [
-      this.onAfterEdgeAdjacentPortsUpdatedEmitter,
-      this.onAfterEdgeAdjacentPortsUpdated
-    ] = E(), [this.onAfterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.onBeforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.onBeforeClearEmitter, this.onBeforeClear] = E();
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
   }
   addNode(e) {
     const o = /* @__PURE__ */ new Map(), r = {
@@ -2007,7 +1965,7 @@ class Be {
       priority: e.priority,
       ports: o
     };
-    this.nodes.set(e.id, r), this.onAfterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, r), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -2015,30 +1973,26 @@ class Be {
   getNode(e) {
     return this.nodes.get(e);
   }
-  updateNodeCoordinates(e, o) {
-    const r = this.nodes.get(e);
-    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, this.onAfterNodeCoordinatesUpdatedEmitter.emit(e);
-  }
-  updateNodePriority(e, o) {
+  updateNode(e, o) {
     const r = this.nodes.get(e);
-    r.priority = o, this.onAfterNodePriorityUpdatedEmitter.emit(e);
+    r.x = o.x ?? r.x, r.y = o.y ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, o.priority !== void 0 && (r.priority = o.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
-    this.onBeforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
+    this.beforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
   }
   addPort(e) {
     this.ports.set(e.id, {
       element: e.element,
       direction: e.direction,
       nodeId: e.nodeId
-    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.onAfterPortAddedEmitter.emit(e.id);
+    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
   getPort(e) {
     return this.ports.get(e);
   }
-  updatePortDirection(e, o) {
+  updatePort(e, o) {
     const r = this.ports.get(e);
-    r.direction = o, this.onAfterPortDirectionUpdatedEmitter.emit(e);
+    r.direction = o.direction ?? r.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
@@ -2050,28 +2004,24 @@ class Be {
   }
   removePort(e) {
     const o = this.ports.get(e).nodeId;
-    this.onBeforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e);
+    this.beforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e);
   }
   addEdge(e) {
-    this.addEdgeInternal(e), this.onAfterEdgeAddedEmitter.emit(e.id);
-  }
-  updateEdgeShape(e, o) {
-    const r = this.edges.get(e);
-    r.shape = o, this.onAfterEdgeShapeUpdatedEmitter.emit(e);
+    this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
-  updateEdgeAdjacentPorts(e, o) {
-    const r = this.edges.get(e);
-    this.removeEdgeInternal(e), this.addEdgeInternal({
-      id: e,
-      from: o.from ?? r.from,
-      to: o.to ?? r.to,
-      shape: r.shape,
-      priority: r.priority
-    }), this.onAfterEdgeAdjacentPortsUpdatedEmitter.emit(e);
-  }
-  updateEdgePriority(e, o) {
+  updateEdge(e, o) {
+    if (o.from !== void 0 || o.to !== void 0) {
+      const n = this.edges.get(e);
+      this.removeEdgeInternal(e), this.addEdgeInternal({
+        id: e,
+        from: o.from ?? n.from,
+        to: o.to ?? n.to,
+        shape: n.shape,
+        priority: n.priority
+      });
+    }
     const r = this.edges.get(e);
-    r.priority = o, this.onAfterEdgePriorityUpdatedEmitter.emit(e);
+    o.shape !== void 0 && (r.shape = o.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), o.priority !== void 0 && (r.priority = o.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
@@ -2080,10 +2030,10 @@ class Be {
     return this.edges.get(e);
   }
   removeEdge(e) {
-    this.onBeforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
+    this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.onBeforeClearEmitter.emit(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.beforeClearEmitter.emit(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(e) {
     return Array.from(this.incommingEdges.get(e));
@@ -2142,22 +2092,24 @@ class Be {
     this.cycleEdges.get(r).delete(e), this.cycleEdges.get(n).delete(e), this.incommingEdges.get(r).delete(e), this.incommingEdges.get(n).delete(e), this.outcommingEdges.get(r).delete(e), this.outcommingEdges.get(n).delete(e), this.edges.delete(e);
   }
 }
-const Z = (t) => ({
+const O = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), O = {
+}), q = {
   scale: 1,
   x: 0,
   y: 0
 };
-class ke {
+class Be {
   constructor() {
-    i(this, "viewportMatrix", O);
-    i(this, "contentMatrix", O);
-    i(this, "emitter");
-    i(this, "onAfterUpdate");
-    [this.emitter, this.onAfterUpdate] = E();
+    i(this, "viewportMatrix", q);
+    i(this, "contentMatrix", q);
+    i(this, "afterUpdateEmitter");
+    i(this, "onAfterUpdated");
+    i(this, "beforeUpdateEmitter");
+    i(this, "onBeforeUpdated");
+    [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -2166,22 +2118,55 @@ class ke {
     return this.contentMatrix;
   }
   patchViewportMatrix(e) {
-    this.viewportMatrix = {
+    this.beforeUpdateEmitter.emit(), this.viewportMatrix = {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = Z(this.viewportMatrix), this.emitter.emit();
+    }, this.contentMatrix = O(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
-    this.contentMatrix = {
+    this.beforeUpdateEmitter.emit(), this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = Z(this.contentMatrix), this.emitter.emit();
+    }, this.viewportMatrix = O(this.contentMatrix), this.afterUpdateEmitter.emit();
+  }
+}
+class j {
+  constructor(e) {
+    i(this, "elementToNodeId", /* @__PURE__ */ new Map());
+    i(this, "nodesResizeObserver");
+    i(this, "onAfterNodeAdded", (e) => {
+      const o = this.canvas.graph.getNode(e);
+      this.elementToNodeId.set(o.element, e), this.nodesResizeObserver.observe(o.element);
+    });
+    i(this, "onBeforeNodeRemoved", (e) => {
+      const o = this.canvas.graph.getNode(e);
+      this.elementToNodeId.delete(o.element), this.nodesResizeObserver.unobserve(o.element);
+    });
+    i(this, "onBeforeClear", () => {
+      this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
+    });
+    this.canvas = e, this.nodesResizeObserver = new ResizeObserver((o) => {
+      o.forEach((r) => {
+        const n = r.target;
+        this.handleNodeResize(n);
+      });
+    }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
+  }
+  static configure(e) {
+    new j(e);
+  }
+  handleNodeResize(e) {
+    const o = this.elementToNodeId.get(e);
+    this.canvas.updateNode(o), this.canvas.graph.getNodeAdjacentEdgeIds(o).forEach((n) => {
+      this.canvas.updateEdge(n);
+    });
   }
 }
-class Ye {
+class ze {
   constructor() {
+    i(this, "element", null);
     i(this, "canvasDefaults", {});
     i(this, "dragOptions");
     i(this, "transformOptions");
@@ -2191,6 +2176,9 @@ class Ye {
     i(this, "hasResizeReactiveNodes", !1);
     i(this, "boxRenderingTrigger");
   }
+  attach(e) {
+    return this.element = e, this;
+  }
   /**
    * specifies default values for graph entities
    */
@@ -2235,41 +2223,45 @@ class Ye {
    * builds final canvas
    */
   build() {
+    if (this.element === null)
+      throw new E(
+        "unable to build canvas when no attach element specified"
+      );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollOptions !== void 0 && e === void 0 && (e = new ee());
-    const o = new Be(), r = new ke();
+    this.virtualScrollOptions !== void 0 && e === void 0 && (e = new te());
+    const o = new Fe(), r = new Be();
     let n = new Ae(o, r);
-    e !== void 0 && (n = new Se(n, o, e));
-    let h = new se(
+    e !== void 0 && (n = new pe(n, o, e));
+    let h = new ne(
       o,
       r,
       n
     );
-    this.hasResizeReactiveNodes && (h = new fe(h)), this.hasDraggableNode && (h = new he(
+    this.hasDraggableNode && (h = new de(
       h,
       this.dragOptions
-    )), this.virtualScrollOptions !== void 0 ? h = new ye(
+    )), this.virtualScrollOptions !== void 0 ? h = new fe(
       h,
       e,
       this.transformOptions,
       this.virtualScrollOptions
-    ) : this.hasTransformableViewport && (h = new q(
+    ) : this.hasTransformableViewport && (h = new ee(
       h,
       this.transformOptions
     ));
-    const s = new Ue(h, this.canvasDefaults);
-    return this.reset(), s;
+    const s = new We(this.element, h, this.canvasDefaults);
+    return this.hasResizeReactiveNodes && j.configure(s), this.reset(), s;
   }
   reset() {
-    this.canvasDefaults = {}, this.dragOptions = void 0, this.transformOptions = void 0, this.virtualScrollOptions = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasResizeReactiveNodes = !1, this.boxRenderingTrigger = void 0;
+    this.element = null, this.canvasDefaults = {}, this.dragOptions = void 0, this.transformOptions = void 0, this.virtualScrollOptions = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasResizeReactiveNodes = !1, this.boxRenderingTrigger = void 0;
   }
 }
 export {
-  be as BezierEdgeShape,
-  Ye as CanvasBuilder,
-  ee as EventSubject,
-  $e as HorizontalEdgeShape,
-  A as HtmlGraphError,
-  We as StraightEdgeShape,
-  Re as VerticalEdgeShape
+  De as BezierEdgeShape,
+  ze as CanvasBuilder,
+  te as EventSubject,
+  Ce as HorizontalEdgeShape,
+  E as HtmlGraphError,
+  Ue as StraightEdgeShape,
+  $e as VerticalEdgeShape
 };