@html-graph/html-graph 2.1.0 → 2.2.0

package/dist/html-graph.js

@@ -1,75 +1,7 @@
 var tt = Object.defineProperty;
 var et = (e, t, o) => t in e ? tt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
 var i = (e, t, o) => et(e, typeof t != "symbol" ? t + "" : t, o);
-class O {
-  constructor() {
-    i(this, "callbacks", /* @__PURE__ */ new Set());
-  }
-  subscribe(t) {
-    this.callbacks.add(t);
-  }
-  unsubscribe(t) {
-    this.callbacks.delete(t);
-  }
-  emit(t) {
-    this.callbacks.forEach((o) => {
-      o(t);
-    });
-  }
-}
-const ot = () => {
-  const e = new O();
-  return [e, e];
-}, _ = (e) => ({
-  scale: 1 / e.scale,
-  x: -e.x / e.scale,
-  y: -e.y / e.scale
-}), J = {
-  scale: 1,
-  x: 0,
-  y: 0
-};
-class rt {
-  constructor() {
-    i(this, "viewportMatrix", J);
-    i(this, "contentMatrix", J);
-    i(this, "emitter");
-    i(this, "onAfterUpdate");
-    [this.emitter, this.onAfterUpdate] = ot();
-  }
-  getViewportMatrix() {
-    return this.viewportMatrix;
-  }
-  getContentMatrix() {
-    return this.contentMatrix;
-  }
-  patchViewportMatrix(t) {
-    this.viewportMatrix = {
-      scale: t.scale ?? this.viewportMatrix.scale,
-      x: t.x ?? this.viewportMatrix.x,
-      y: t.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = _(this.viewportMatrix), this.emitter.emit();
-  }
-  patchContentMatrix(t) {
-    this.contentMatrix = {
-      scale: t.scale ?? this.contentMatrix.scale,
-      x: t.x ?? this.contentMatrix.x,
-      y: t.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = _(this.contentMatrix), this.emitter.emit();
-  }
-}
-class it {
-  constructor(t) {
-    this.transformer = t;
-  }
-  getViewportMatrix() {
-    return { ...this.transformer.getViewportMatrix() };
-  }
-  getContentMatrix() {
-    return { ...this.transformer.getContentMatrix() };
-  }
-}
-class st {
+class ot {
   constructor(t) {
     this.graphStore = t;
   }
@@ -99,8 +31,13 @@ class st {
   getNodePortIds(t) {
     return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodePortIds(t);
   }
+  /**
+   * @deprecated
+   * use graph.getPort()?.nodeId ?? null instead
+   */
   getPortNodeId(t) {
-    return this.graphStore.getPortNodeId(t) ?? null;
+    var o;
+    return ((o = this.graphStore.getPort(t)) == null ? void 0 : o.nodeId) ?? null;
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
@@ -134,11 +71,22 @@ class st {
     return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
   }
 }
-class nt {
+class rt {
+  constructor(t) {
+    this.transformer = t;
+  }
+  getViewportMatrix() {
+    return { ...this.transformer.getViewportMatrix() };
+  }
+  getContentMatrix() {
+    return { ...this.transformer.getContentMatrix() };
+  }
+}
+class it {
   constructor(t, o, r) {
     i(this, "viewport");
     i(this, "graph");
-    this.graphStore = t, this.viewportTransformer = o, this.htmlView = r, this.graph = new st(this.graphStore), this.viewport = new it(this.viewportTransformer);
+    this.graphStore = t, this.viewportStore = o, this.htmlView = r, this.graph = new ot(this.graphStore), this.viewport = new rt(this.viewportStore);
   }
   attach(t) {
     this.htmlView.attach(t);
@@ -158,7 +106,7 @@ class nt {
   removeNode(t) {
     this.graphStore.getNodePortIds(t).forEach((o) => {
       this.unmarkPort(o);
-    }), this.htmlView.detachNode(t), this.graphStore.removeNode(t);
+    }), this.graphStore.removeNode(t), this.htmlView.detachNode(t);
   }
   markPort(t) {
     this.graphStore.addPort(t);
@@ -182,13 +130,13 @@ class nt {
     o.shape !== void 0 && (r.shape = o.shape, this.htmlView.updateEdgeShape(t)), o.from !== void 0 && this.graphStore.updateEdgeFrom(t, o.from), o.to !== void 0 && this.graphStore.updateEdgeTo(t, o.to), this.htmlView.renderEdge(t), o.priority !== void 0 && (r.priority = o.priority, this.htmlView.updateEdgePriority(t));
   }
   removeEdge(t) {
-    this.htmlView.detachEdge(t), this.graphStore.removeEdge(t);
+    this.graphStore.removeEdge(t), this.htmlView.detachEdge(t);
   }
   patchViewportMatrix(t) {
-    this.viewportTransformer.patchViewportMatrix(t);
+    this.viewportStore.patchViewportMatrix(t);
   }
   patchContentMatrix(t) {
-    this.viewportTransformer.patchContentMatrix(t);
+    this.viewportStore.patchContentMatrix(t);
   }
   clear() {
     this.htmlView.clear(), this.graphStore.clear();
@@ -202,7 +150,7 @@ const C = (e, t, o) => {
   return t >= r && t <= r + h && o >= n && o <= n + s;
 }, $ = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, W = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
-}, ht = (e) => {
+}, st = (e) => {
   var g, y, x, v, A, S;
   const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
   }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
@@ -217,7 +165,7 @@ const C = (e, t, o) => {
     onNodeDragFinished: r
   };
 };
-class ct {
+class nt {
   constructor(t, o) {
     i(this, "graph");
     i(this, "viewport");
@@ -257,7 +205,7 @@ class ct {
     i(this, "previousTouchCoords", null);
     i(this, "window", window);
     i(this, "options");
-    this.canvas = t, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = ht(o ?? {});
+    this.canvas = t, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = st(o ?? {});
   }
   attach(t) {
     this.detach(), this.element = t, this.canvas.attach(this.element);
@@ -388,7 +336,7 @@ class ct {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const dt = (e) => {
+const ht = (e) => {
   const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, n = e.maxY !== null ? e.maxY : 1 / 0;
   return (h) => {
     let s = h.nextTransform.x, c = h.nextTransform.y;
@@ -398,7 +346,7 @@ const dt = (e) => {
     const l = h.canvasHeight * h.prevTransform.scale, g = n - l;
     return c > g && c > h.prevTransform.y && (c = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: c };
   };
-}, at = (e) => {
+}, ct = (e) => {
   const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, n = o !== null ? 1 / o : 1 / 0;
   return (h) => {
     const s = h.prevTransform, c = h.nextTransform;
@@ -419,7 +367,7 @@ const dt = (e) => {
       y: l
     };
   };
-}, lt = (e) => (t) => e.reduce(
+}, dt = (e) => (t) => e.reduce(
   (o, r) => r({
     prevTransform: t.prevTransform,
     nextTransform: o,
@@ -427,38 +375,38 @@ const dt = (e) => {
     canvasHeight: t.canvasHeight
   }),
   t.nextTransform
-), Q = (e) => {
+), _ = (e) => {
   if (typeof e == "function")
     return e;
   switch (e.type) {
     case "scale-limit":
-      return at({
+      return ct({
         minContentScale: e.minContentScale ?? 0,
         maxContentScale: e.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return dt({
+      return ht({
         minX: e.minX ?? -1 / 0,
         maxX: e.maxX ?? 1 / 0,
         minY: e.minY ?? -1 / 0,
         maxY: e.maxY ?? 1 / 0
       });
   }
-}, gt = (e) => {
-  var v, A, S, T, z, P, L, m, U, j, G, K;
+}, at = (e) => {
+  var v, A, S, T, z, L, D, P, U, j, G, K;
   const t = (v = e == null ? void 0 : e.scale) == null ? void 0 : v.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
   let n;
-  r !== void 0 ? Array.isArray(r) ? n = lt(
+  r !== void 0 ? Array.isArray(r) ? n = dt(
     r.map(
-      (V) => Q(V)
+      (V) => _(V)
     )
-  ) : n = Q(r) : n = (V) => V.nextTransform;
+  ) : n = _(r) : n = (V) => V.nextTransform;
   const h = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", s = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
   }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), d = (z = e == null ? void 0 : e.shift) == null ? void 0 : z.mouseDownEventVerifier, a = d !== void 0 ? d : (V) => V.button === 0, l = (P = e == null ? void 0 : e.shift) == null ? void 0 : P.mouseUpEventVerifier, g = l !== void 0 ? l : (V) => V.button === 0, y = (L = e == null ? void 0 : e.scale) == null ? void 0 : L.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
+  }), d = (z = e == null ? void 0 : e.shift) == null ? void 0 : z.mouseDownEventVerifier, a = d !== void 0 ? d : (V) => V.button === 0, l = (L = e == null ? void 0 : e.shift) == null ? void 0 : L.mouseUpEventVerifier, g = l !== void 0 ? l : (V) => V.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((m = e == null ? void 0 : e.events) == null ? void 0 : m.onTransformStarted) ?? (() => {
+    onTransformStarted: ((P = e == null ? void 0 : e.events) == null ? void 0 : P.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((U = e == null ? void 0 : e.events) == null ? void 0 : U.onTransformFinished) ?? (() => {
     }),
@@ -475,7 +423,7 @@ const dt = (e) => {
     onResizeTransformFinished: ((K = e == null ? void 0 : e.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
     })
   };
-}, b = (e) => {
+}, m = (e) => {
   const t = [], o = e.touches.length;
   for (let c = 0; c < o; c++)
     t.push([e.touches[c].clientX, e.touches[c].clientY]);
@@ -493,16 +441,16 @@ const dt = (e) => {
     touchesCnt: o,
     touches: t
   };
-}, ut = (e, t, o) => ({
+}, lt = (e, t, o) => ({
   scale: e.scale,
   x: e.x + e.scale * t,
   y: e.y + e.scale * o
-}), wt = (e, t, o, r) => ({
+}), gt = (e, t, o, r) => ({
   scale: e.scale * t,
   x: e.scale * (1 - t) * o + e.x,
   y: e.scale * (1 - t) * r + e.y
 });
-class q {
+class O {
   constructor(t, o) {
     i(this, "graph");
     i(this, "viewport");
@@ -535,16 +483,16 @@ class q {
     });
     i(this, "onTouchStart", (t) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = b(t);
+        this.prevTouches = m(t);
         return;
       }
-      this.prevTouches = b(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
+      this.prevTouches = m(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
     });
     i(this, "onWindowTouchMove", (t) => {
       const o = this.element;
       if (o === null)
         return;
-      const r = b(t);
+      const r = m(t);
       if (!r.touches.every(
         (h) => C(o, h[0], h[1]) && $(this.window, h[0], h[1])
       )) {
@@ -562,7 +510,7 @@ class q {
       this.prevTouches = r;
     });
     i(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.prevTouches = b(t) : this.stopTouchDrag();
+      t.touches.length > 0 ? this.prevTouches = m(t) : this.stopTouchDrag();
     });
     i(this, "observer", new ResizeObserver(() => {
       const t = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
@@ -574,7 +522,7 @@ class q {
       this.options.onResizeTransformStarted(), this.canvas.patchViewportMatrix(n), this.options.onResizeTransformFinished();
     }));
     i(this, "options");
-    this.canvas = t, this.options = gt(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
+    this.canvas = t, this.options = at(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
   }
   attach(t) {
     this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element);
@@ -622,7 +570,7 @@ class q {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   moveViewport(t, o, r) {
-    const n = this.viewport.getViewportMatrix(), h = ut(n, o, r), { width: s, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
+    const n = this.viewport.getViewportMatrix(), h = lt(n, o, r), { width: s, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
       prevTransform: n,
       nextTransform: h,
       canvasWidth: s,
@@ -631,7 +579,7 @@ class q {
     this.performTransform(d);
   }
   scaleViewport(t, o, r, n) {
-    const h = this.canvas.viewport.getViewportMatrix(), s = wt(h, o, r, n), { width: c, height: d } = t.getBoundingClientRect(), a = this.options.transformPreprocessor({
+    const h = this.canvas.viewport.getViewportMatrix(), s = gt(h, o, r, n), { width: c, height: d } = t.getBoundingClientRect(), a = this.options.transformPreprocessor({
       prevTransform: h,
       nextTransform: s,
       canvasWidth: c,
@@ -655,7 +603,7 @@ class q {
     this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.options.onTransformChange();
   }
 }
-class yt {
+class ut {
   constructor() {
     i(this, "keyMap", /* @__PURE__ */ new Map());
     i(this, "valueMap", /* @__PURE__ */ new Map());
@@ -692,11 +640,11 @@ class yt {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class vt {
+class wt {
   constructor(t) {
     i(this, "viewport");
     i(this, "graph");
-    i(this, "nodes", new yt());
+    i(this, "nodes", new ut());
     i(this, "nodesResizeObserver");
     i(this, "window", window);
     this.canvas = t, this.nodesResizeObserver = new this.window.ResizeObserver((o) => {
@@ -760,7 +708,7 @@ class vt {
     });
   }
 }
-class ft {
+class yt {
   constructor(t, o, r, n) {
     i(this, "graph");
     i(this, "viewport");
@@ -807,7 +755,7 @@ class ft {
         }
       }
     };
-    this.canvas = new q(
+    this.canvas = new O(
       t,
       c
     ), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.trigger.subscribe(this.updateLoadedArea);
@@ -871,28 +819,28 @@ class ft {
     this.trigger.emit({ x: r, y: n, width: h, height: s });
   }
 }
-const xt = () => {
+const vt = () => {
   const e = document.createElement("div");
   return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, Et = () => {
+}, ft = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
-}, St = () => {
+}, xt = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.visibility = "hidden", e;
 };
-class At {
+class Et {
   constructor(t, o) {
     i(this, "canvasWrapper", null);
-    i(this, "host", xt());
-    i(this, "container", Et());
+    i(this, "host", vt());
+    i(this, "container", ft());
     i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "applyTransform", () => {
-      const t = this.viewportTransformer.getContentMatrix();
+      const t = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
     });
-    this.graphStore = t, this.viewportTransformer = o, this.host.appendChild(this.container), this.viewportTransformer.onAfterUpdate.subscribe(this.applyTransform);
+    this.graphStore = t, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdate.subscribe(this.applyTransform);
   }
   attach(t) {
     this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
@@ -901,20 +849,20 @@ class At {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   attachNode(t) {
-    const o = this.graphStore.getNode(t), r = St();
+    const o = this.graphStore.getNode(t), r = xt();
     r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(t, r), this.updateNodeCoordinates(t), this.updateNodePriority(t), r.style.visibility = "visible";
   }
   detachNode(t) {
-    const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
-    r.removeChild(o.element), this.container.removeChild(r), this.nodeIdToWrapperElementMap.delete(t);
+    const o = this.nodeIdToWrapperElementMap.get(t);
+    o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(t);
   }
   attachEdge(t) {
-    const o = this.graphStore.getEdge(t);
-    this.edgeIdToElementMap.set(t, o.shape.svg), this.container.appendChild(o.shape.svg), this.renderEdge(t), this.updateEdgePriority(t);
+    const o = this.graphStore.getEdge(t).shape.svg;
+    this.edgeIdToElementMap.set(t, o), this.container.appendChild(o), this.renderEdge(t), this.updateEdgePriority(t);
   }
   detachEdge(t) {
-    const o = this.graphStore.getEdge(t);
-    this.container.removeChild(o.shape.svg), this.edgeIdToElementMap.delete(t);
+    const o = this.edgeIdToElementMap.get(t);
+    this.container.removeChild(o), this.edgeIdToElementMap.delete(t);
   }
   clear() {
     this.edgeIdToElementMap.forEach((t, o) => {
@@ -924,10 +872,10 @@ class At {
     });
   }
   destroy() {
-    this.viewportTransformer.onAfterUpdate.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
+    this.viewportStore.onAfterUpdate.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
   }
   updateNodeCoordinates(t) {
-    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportTransformer.getViewportMatrix().scale, c = r.centerFn(n, h), d = r.x - s * c.x, a = r.y - s * c.y;
+    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, c = r.centerFn(n, h), d = r.x - s * c.x, a = r.y - s * c.y;
     o.style.transform = `translate(${d}px, ${a}px)`;
   }
   updateNodePriority(t) {
@@ -941,7 +889,7 @@ class At {
     this.edgeIdToElementMap.set(t, r.shape.svg), this.container.appendChild(r.shape.svg);
   }
   renderEdge(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix(), a = {
+    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), a = {
       x: d.scale * (h.left - c.left) + d.x,
       y: d.scale * (h.top - c.top) + d.y
     }, l = {
@@ -954,7 +902,7 @@ class At {
       height: h.height * d.scale,
       direction: r.direction,
       portId: o.from,
-      nodeId: this.graphStore.getPortNodeId(o.from)
+      nodeId: r.nodeId
     }, y = {
       x: l.x,
       y: l.y,
@@ -962,7 +910,7 @@ class At {
       height: s.height * d.scale,
       direction: n.direction,
       portId: o.to,
-      nodeId: this.graphStore.getPortNodeId(o.to)
+      nodeId: n.nodeId
     };
     o.shape.render({
       from: g,
@@ -974,7 +922,7 @@ class At {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class Tt {
+class St {
   constructor(t) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -990,11 +938,11 @@ class Tt {
     return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
   }
   hasEdge(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPortNodeId(o.from), n = this.graphStore.getPortNodeId(o.to), h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), c = Math.min(h.x, s.x), d = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
+    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), c = Math.min(h.x, s.x), d = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
     return c <= this.xTo && d >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class pt {
+class At {
   constructor(t, o, r) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -1006,7 +954,7 @@ class pt {
         const c = this.renderingBox.hasNode(s), d = this.attachedNodes.has(s);
         c && !d ? o.add(s) : !c && d && r.add(s);
       }), this.graphStore.getAllEdgeIds().forEach((s) => {
-        const c = this.renderingBox.hasEdge(s), d = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPortNodeId(a.from), g = this.graphStore.getPortNodeId(a.to);
+        const c = this.renderingBox.hasEdge(s), d = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
         c && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), c && !d ? n.add(s) : !c && d && h.add(s);
       }), h.forEach((s) => {
         this.handleDetachEdge(s);
@@ -1018,7 +966,7 @@ class pt {
         this.handleAttachEdge(s);
       });
     });
-    this.htmlView = t, this.graphStore = o, this.trigger = r, this.renderingBox = new Tt(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = t, this.graphStore = o, this.trigger = r, this.renderingBox = new St(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attach(t) {
     this.htmlView.attach(t);
@@ -1062,7 +1010,7 @@ class pt {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
   attachEdgeEntities(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPortNodeId(o.from), n = this.graphStore.getPortNodeId(o.to);
+    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId;
     this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(t);
   }
   handleAttachNode(t) {
@@ -1078,6 +1026,26 @@ class pt {
     this.htmlView.detachEdge(t), this.attachedEdges.delete(t);
   }
 }
+class q {
+  constructor() {
+    i(this, "callbacks", /* @__PURE__ */ new Set());
+  }
+  subscribe(t) {
+    this.callbacks.add(t);
+  }
+  unsubscribe(t) {
+    this.callbacks.delete(t);
+  }
+  emit(t) {
+    this.callbacks.forEach((o) => {
+      o(t);
+    });
+  }
+}
+const Tt = () => {
+  const e = new q();
+  return [e, e];
+};
 class Y {
   constructor(t) {
     i(this, "counter", 0);
@@ -1100,14 +1068,14 @@ class E extends Error {
     i(this, "name", "HtmlGraphError");
   }
 }
-const Nt = (e, t) => ({
+const pt = (e, t) => ({
   x: e / 2,
   y: t / 2
-}), X = (e) => () => e, Z = X(0), Mt = () => {
+}), X = (e) => () => e, J = X(0), Mt = () => {
   let e = 0;
   return () => e++;
-}, Vt = (e, t) => {
-  let o = Z, r = Z;
+}, Nt = (e, t) => {
+  let o = J, r = J;
   const n = Mt();
   return e === "incremental" && (o = n), t === "incremental" && (r = n), typeof e == "number" && (o = X(e)), typeof t == "number" && (r = X(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
     nodesPriorityFn: o,
@@ -1119,14 +1087,14 @@ const Nt = (e, t) => ({
 }), p = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), w = {
   x: 0,
   y: 0
-}, N = (e, t, o, r) => {
+}, M = (e, t, o, r) => {
   const h = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
   ].map((a) => f(a, e, w)).map((a) => ({ x: a.x + t.x, y: a.y + t.y })), s = `M ${h[0].x} ${h[0].y}`, c = `L ${h[1].x} ${h[1].y}`, d = `L ${h[2].x} ${h[2].y}`;
   return `${s} ${c} ${d}`;
-}, D = (e, t) => {
+}, b = (e, t) => {
   const o = [];
   if (e.length > 0 && o.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && o.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
     const r = e.length - 1;
@@ -1135,26 +1103,26 @@ const Nt = (e, t) => ({
       let a = 0, l = 0, g = 0;
       const y = d > 0, x = d < r, v = y && x;
       if (y && (a = -n, l = -h, g = s), x) {
-        const m = e[d + 1];
-        n = m.x - c.x, h = m.y - c.y, s = Math.sqrt(n * n + h * h);
+        const P = e[d + 1];
+        n = P.x - c.x, h = P.y - c.y, s = Math.sqrt(n * n + h * h);
       }
-      const S = s !== 0 ? Math.min((v ? t : 0) / s, d < r - 1 ? 0.5 : 1) : 0, T = v ? { x: c.x + n * S, y: c.y + h * S } : c, P = g !== 0 ? Math.min((v ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, L = v ? { x: c.x + a * P, y: c.y + l * P } : c;
-      d > 0 && o.push(`L ${L.x} ${L.y}`), v && o.push(
+      const S = s !== 0 ? Math.min((v ? t : 0) / s, d < r - 1 ? 0.5 : 1) : 0, T = v ? { x: c.x + n * S, y: c.y + h * S } : c, L = g !== 0 ? Math.min((v ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = v ? { x: c.x + a * L, y: c.y + l * L } : c;
+      d > 0 && o.push(`L ${D.x} ${D.y}`), v && o.push(
         `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
       );
     });
   }
   return o.join(" ");
-}, F = () => {
+}, I = () => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e;
-}, I = () => {
+}, F = () => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return e.style.transformOrigin = "50% 50%", e;
 }, R = (e, t) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return o.setAttribute("stroke", e), o.setAttribute("stroke-width", `${t}`), o.setAttribute("fill", "none"), o;
-}, M = (e) => {
+}, N = (e) => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return t.setAttribute("fill", e), t;
 }, k = (e, t) => {
@@ -1173,7 +1141,7 @@ const Nt = (e, t) => ({
     flipX: d,
     flipY: a
   };
-}, Pt = (e) => {
+}, Vt = (e) => {
   const t = f(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -1233,7 +1201,7 @@ const Nt = (e, t) => ({
     `C ${S.x} ${S.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, mt = (e) => {
+}, Dt = (e) => {
   const t = e.hasSourceArrow ? f(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -1250,7 +1218,7 @@ const Nt = (e, t) => ({
     x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
     y: s.y
   }, y = { x: g.x, y: d };
-  return D(
+  return b(
     [t, h, a, l, y, g, s, o],
     e.roundness
   );
@@ -1272,11 +1240,11 @@ const Nt = (e, t) => ({
     e.toVect,
     e.to
   ), g = { x: l.x + c, y: l.y + d };
-  return D(
+  return b(
     [t, n, a, g, l, o],
     e.roundness
   );
-}, Dt = (e) => {
+}, Pt = (e) => {
   const t = e.hasSourceArrow ? f(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -1290,7 +1258,7 @@ const Nt = (e, t) => ({
     e.toVect,
     e.to
   );
-  return D([t, n, h, o], e.roundness);
+  return b([t, n, h, o], e.roundness);
 }, bt = (e) => {
   const t = e.hasSourceArrow ? f(
     { x: e.arrowLength, y: w.y },
@@ -1308,7 +1276,7 @@ const Nt = (e, t) => ({
     x: s.x,
     y: e.flipY > 0 ? e.to.y - c : e.to.y + r
   }, y = { x: d, y: g.y };
-  return D(
+  return b(
     [t, h, a, l, y, g, s, o],
     e.roundness
   );
@@ -1325,8 +1293,8 @@ const Nt = (e, t) => ({
   ].map(
     (d) => f(d, e.fromVect, w)
   ), c = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
-  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${D(s, e.roundness)}`;
-}, Ct = (e) => {
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${b(s, e.roundness)}`;
+}, mt = (e) => {
   const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), n = t + o, h = e.arrowLength + r * (1 - o / n), s = t * o / n, d = [
     { x: e.arrowLength, y: w.y },
     { x: h, y: s },
@@ -1355,10 +1323,10 @@ const Nt = (e, t) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class $t {
+class Ct {
   constructor(t) {
-    i(this, "svg", F());
-    i(this, "group", I());
+    i(this, "svg", I());
+    i(this, "group", F());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1373,7 +1341,7 @@ class $t {
     i(this, "hasTargetArrow");
     this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? u.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
     const o = (t == null ? void 0 : t.color) ?? u.color, r = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(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 = R(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(o), this.group.appendChild(this.targetArrow));
   }
   render(t) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
@@ -1390,7 +1358,7 @@ class $t {
       y: h
     };
     let g, y = a, x = -this.arrowLength;
-    if (t.from.portId === t.to.portId ? (g = Ct({
+    if (t.from.portId === t.to.portId ? (g = mt({
       fromVect: d,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1409,7 +1377,7 @@ class $t {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Pt({
+    }) : g = Vt({
       to: l,
       fromVect: d,
       toVect: a,
@@ -1418,7 +1386,7 @@ class $t {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = N(
+      const v = M(
         d,
         w,
         this.arrowLength,
@@ -1427,7 +1395,7 @@ class $t {
       this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const v = N(
+      const v = M(
         y,
         l,
         x,
@@ -1437,10 +1405,10 @@ class $t {
     }
   }
 }
-class Wt {
+class $t {
   constructor(t) {
-    i(this, "svg", F());
-    i(this, "group", I());
+    i(this, "svg", I());
+    i(this, "group", F());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1461,7 +1429,7 @@ class Wt {
       this.cycleSquareSide / 2
     ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(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 = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
@@ -1499,7 +1467,7 @@ class Wt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = mt({
+    }) : g = Dt({
       to: l,
       fromVect: d,
       toVect: a,
@@ -1510,7 +1478,7 @@ class Wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = N(
+      const v = M(
         d,
         w,
         this.arrowLength,
@@ -1519,7 +1487,7 @@ class Wt {
       this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const v = N(
+      const v = M(
         y,
         l,
         x,
@@ -1529,10 +1497,10 @@ class Wt {
     }
   }
 }
-class Ft {
+class Wt {
   constructor(t) {
-    i(this, "svg", F());
-    i(this, "group", I());
+    i(this, "svg", I());
+    i(this, "group", F());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1553,7 +1521,7 @@ class Ft {
       this.cycleSquareSide / 2
     ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(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 = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
@@ -1591,7 +1559,7 @@ class Ft {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Dt({
+    }) : g = Pt({
       to: l,
       fromVect: d,
       toVect: a,
@@ -1601,7 +1569,7 @@ class Ft {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = N(
+      const v = M(
         d,
         w,
         this.arrowLength,
@@ -1610,7 +1578,7 @@ class Ft {
       this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const v = N(
+      const v = M(
         y,
         l,
         x,
@@ -1622,8 +1590,8 @@ class Ft {
 }
 class It {
   constructor(t) {
-    i(this, "svg", F());
-    i(this, "group", I());
+    i(this, "svg", I());
+    i(this, "group", F());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1644,7 +1612,7 @@ class It {
       this.cycleSquareSide / 2
     ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(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 = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
     const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
@@ -1693,7 +1661,7 @@ class It {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = N(
+      const v = M(
         d,
         w,
         this.arrowLength,
@@ -1702,7 +1670,7 @@ class It {
       this.sourceArrow.setAttribute("d", v);
     }
     if (this.targetArrow) {
-      const v = N(
+      const v = M(
         y,
         l,
         x,
@@ -1712,12 +1680,12 @@ class It {
     }
   }
 }
-const Rt = (e) => {
+const Ft = (e) => {
   if (typeof e == "function")
     return e;
   switch (e == null ? void 0 : e.type) {
     case "straight":
-      return () => new Ft({
+      return () => new Wt({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -1731,7 +1699,7 @@ const Rt = (e) => {
         detourDirection: e.detourDirection
       });
     case "horizontal":
-      return () => new Wt({
+      return () => new $t({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -1759,7 +1727,7 @@ const Rt = (e) => {
         detourDirection: e.detourDirection
       });
     default:
-      return () => new $t({
+      return () => new Ct({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -1773,27 +1741,27 @@ const Rt = (e) => {
         detourDirection: e.detourDirection
       });
   }
-}, kt = (e) => {
+}, Rt = (e) => {
   var o, r, n, h, s;
-  const t = Vt(
+  const t = Nt(
     (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
     (r = e == null ? void 0 : e.edges) == null ? void 0 : r.priority
   );
   return {
     nodes: {
-      centerFn: ((n = e == null ? void 0 : e.nodes) == null ? void 0 : n.centerFn) ?? Nt,
+      centerFn: ((n = e == null ? void 0 : e.nodes) == null ? void 0 : n.centerFn) ?? pt,
       priorityFn: t.nodesPriorityFn
     },
     ports: {
       direction: ((h = e == null ? void 0 : e.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Rt(((s = e == null ? void 0 : e.edges) == null ? void 0 : s.shape) ?? {}),
+      shapeFactory: Ft(((s = e == null ? void 0 : e.edges) == null ? void 0 : s.shape) ?? {}),
       priorityFn: t.edgesPriorityFn
     }
   };
 };
-class zt {
+class kt {
   constructor(t, o) {
     i(this, "nodeIdGenerator", new Y(
       (t) => this.graph.getNode(t) !== null
@@ -1813,7 +1781,7 @@ class zt {
      * provides api for accessing viewport state
      */
     i(this, "viewport");
-    this.controller = t, this.defaults = kt(o), this.graph = t.graph, this.viewport = t.viewport;
+    this.controller = t, this.defaults = Rt(o), this.graph = t.graph, this.viewport = t.viewport;
   }
   /**
    * attaches canvas to given element
@@ -1835,21 +1803,22 @@ class zt {
     const o = this.nodeIdGenerator.create(t.id);
     if (this.graph.getNode(o) !== null)
       throw new E("failed to add node with existing id");
-    return this.controller.addNode({
+    if (this.controller.addNode({
       id: o,
       element: t.element,
       x: t.x,
       y: t.y,
       centerFn: t.centerFn ?? this.defaults.nodes.centerFn,
       priority: t.priority ?? this.defaults.nodes.priorityFn()
-    }), Array.from(t.ports ?? []).forEach((r) => {
-      this.markPort({
-        id: r.id,
-        element: r.element,
-        nodeId: o,
-        direction: r.direction
-      });
-    }), this;
+    }), t.ports !== void 0)
+      for (const r of t.ports)
+        this.markPort({
+          id: r.id,
+          element: r.element,
+          nodeId: o,
+          direction: r.direction
+        });
+    return this;
   }
   /**
    * updates node parameters
@@ -1964,25 +1933,25 @@ class zt {
     this.controller.destroy();
   }
 }
-class Yt {
+class zt {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
-    i(this, "nodePorts", /* @__PURE__ */ new Map());
-    i(this, "portNodeId", /* @__PURE__ */ new Map());
     i(this, "edges", /* @__PURE__ */ new Map());
     i(this, "incommingEdges", /* @__PURE__ */ new Map());
     i(this, "outcommingEdges", /* @__PURE__ */ new Map());
     i(this, "cycleEdges", /* @__PURE__ */ new Map());
   }
   addNode(t) {
-    this.nodes.set(t.id, {
+    const o = /* @__PURE__ */ new Map(), r = {
       element: t.element,
       x: t.x,
       y: t.y,
       centerFn: t.centerFn,
-      priority: t.priority
-    }), this.nodePorts.set(t.id, /* @__PURE__ */ new Map());
+      priority: t.priority,
+      ports: o
+    };
+    this.nodes.set(t.id, r);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -1991,13 +1960,14 @@ class Yt {
     return this.nodes.get(t);
   }
   removeNode(t) {
-    this.nodes.delete(t), this.nodePorts.delete(t);
+    this.nodes.delete(t);
   }
   addPort(t) {
     this.ports.set(t.id, {
       element: t.element,
-      direction: t.direction
-    }), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.portNodeId.set(t.id, t.nodeId), this.nodePorts.get(t.nodeId).set(t.id, t.element);
+      direction: t.direction,
+      nodeId: t.nodeId
+    }), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element);
   }
   getPort(t) {
     return this.ports.get(t);
@@ -2006,16 +1976,13 @@ class Yt {
     return Array.from(this.ports.keys());
   }
   getNodePortIds(t) {
-    const o = this.nodePorts.get(t);
+    const o = this.nodes.get(t);
     if (o !== void 0)
-      return Array.from(o.keys());
-  }
-  getPortNodeId(t) {
-    return this.portNodeId.get(t);
+      return Array.from(o.ports.keys());
   }
   removePort(t) {
-    const o = this.portNodeId.get(t);
-    this.portNodeId.delete(t), this.nodePorts.get(o).delete(t), this.ports.delete(t);
+    const o = this.ports.get(t).nodeId;
+    this.nodes.get(o).ports.delete(t), this.ports.delete(t);
   }
   addEdge(t) {
     this.edges.set(t.id, {
@@ -2056,7 +2023,7 @@ class Yt {
     this.cycleEdges.get(r).delete(t), this.cycleEdges.get(n).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(n).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(n).delete(t), this.edges.delete(t);
   }
   clear() {
-    this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.nodes.clear();
+    this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(t) {
     return Array.from(this.incommingEdges.get(t));
@@ -2075,21 +2042,21 @@ class Yt {
     ];
   }
   getNodeIncomingEdgeIds(t) {
-    const o = Array.from(this.nodePorts.get(t).keys());
+    const o = Array.from(this.nodes.get(t).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortIncomingEdgeIds(n)];
     }), r;
   }
   getNodeOutcomingEdgeIds(t) {
-    const o = Array.from(this.nodePorts.get(t).keys());
+    const o = Array.from(this.nodes.get(t).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortOutcomingEdgeIds(n)];
     }), r;
   }
   getNodeCycleEdgeIds(t) {
-    const o = Array.from(this.nodePorts.get(t).keys());
+    const o = Array.from(this.nodes.get(t).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortCycleEdgeIds(n)];
@@ -2103,6 +2070,44 @@ class Yt {
     ];
   }
 }
+const Q = (e) => ({
+  scale: 1 / e.scale,
+  x: -e.x / e.scale,
+  y: -e.y / e.scale
+}), Z = {
+  scale: 1,
+  x: 0,
+  y: 0
+};
+class Yt {
+  constructor() {
+    i(this, "viewportMatrix", Z);
+    i(this, "contentMatrix", Z);
+    i(this, "emitter");
+    i(this, "onAfterUpdate");
+    [this.emitter, this.onAfterUpdate] = Tt();
+  }
+  getViewportMatrix() {
+    return this.viewportMatrix;
+  }
+  getContentMatrix() {
+    return this.contentMatrix;
+  }
+  patchViewportMatrix(t) {
+    this.viewportMatrix = {
+      scale: t.scale ?? this.viewportMatrix.scale,
+      x: t.x ?? this.viewportMatrix.x,
+      y: t.y ?? this.viewportMatrix.y
+    }, this.contentMatrix = Q(this.viewportMatrix), this.emitter.emit();
+  }
+  patchContentMatrix(t) {
+    this.contentMatrix = {
+      scale: t.scale ?? this.contentMatrix.scale,
+      x: t.x ?? this.contentMatrix.x,
+      y: t.y ?? this.contentMatrix.y
+    }, this.viewportMatrix = Q(this.contentMatrix), this.emitter.emit();
+  }
+}
 class Bt {
   constructor() {
     i(this, "canvasDefaults", {});
@@ -2159,28 +2164,28 @@ class Bt {
    */
   build() {
     let t = this.boxRenderingTrigger;
-    this.virtualScrollOptions !== void 0 && t === void 0 && (t = new O());
-    const o = new Yt(), r = new rt();
-    let n = new At(o, r);
-    t !== void 0 && (n = new pt(n, o, t));
-    let h = new nt(
+    this.virtualScrollOptions !== void 0 && t === void 0 && (t = new q());
+    const o = new zt(), r = new Yt();
+    let n = new Et(o, r);
+    t !== void 0 && (n = new At(n, o, t));
+    let h = new it(
       o,
       r,
       n
     );
-    this.hasResizeReactiveNodes && (h = new vt(h)), this.hasDraggableNode && (h = new ct(
+    this.hasResizeReactiveNodes && (h = new wt(h)), this.hasDraggableNode && (h = new nt(
       h,
       this.dragOptions
-    )), this.virtualScrollOptions !== void 0 ? h = new ft(
+    )), this.virtualScrollOptions !== void 0 ? h = new yt(
       h,
       t,
       this.transformOptions,
       this.virtualScrollOptions
-    ) : this.hasTransformableViewport && (h = new q(
+    ) : this.hasTransformableViewport && (h = new O(
       h,
       this.transformOptions
     ));
-    const s = new zt(h, this.canvasDefaults);
+    const s = new kt(h, this.canvasDefaults);
     return this.reset(), s;
   }
   reset() {
@@ -2188,11 +2193,11 @@ class Bt {
   }
 }
 export {
-  $t as BezierEdgeShape,
+  Ct as BezierEdgeShape,
   Bt as CanvasBuilder,
-  O as EventSubject,
-  Wt as HorizontalEdgeShape,
+  q as EventSubject,
+  $t as HorizontalEdgeShape,
   E as HtmlGraphError,
-  Ft as StraightEdgeShape,
+  Wt as StraightEdgeShape,
   It as VerticalEdgeShape
 };