@html-graph/html-graph 4.0.0 → 4.1.0

package/dist/html-graph.js

@@ -35,7 +35,7 @@ class pt {
     this.container.removeChild(e.element);
   }
   attachEdge(t) {
-    const e = this.graphStore.getEdge(t).shape.svg;
+    const e = this.graphStore.getEdge(t).payload.shape.svg;
     this.edgeIdToElementMap.set(t, e), this.container.appendChild(e), this.renderEdge(t), this.updateEdgePriority(t);
   }
   detachEdge(t) {
@@ -53,18 +53,18 @@ class pt {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(t) {
-    const e = this.graphStore.getNode(t), { width: s, height: i } = e.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = e.centerFn(s, i), h = e.x - n * a.x, d = e.y - n * a.y;
+    const e = this.graphStore.getNode(t), { width: s, height: i } = e.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = e.payload.centerFn(s, i), h = e.payload.x - n * a.x, d = e.payload.y - n * a.y;
     e.element.style.transform = `translate(${h}px, ${d}px)`;
   }
   updateNodePriority(t) {
     const e = this.graphStore.getNode(t);
-    e.element.style.zIndex = `${e.priority}`;
+    e.element.style.zIndex = `${e.payload.priority}`;
   }
   updateEdgeShape(t) {
     const e = this.edgeIdToElementMap.get(t);
     this.container.removeChild(e);
-    const s = this.graphStore.getEdge(t);
-    this.edgeIdToElementMap.set(t, s.shape.svg), this.container.appendChild(s.shape.svg);
+    const i = this.graphStore.getEdge(t).payload.shape.svg;
+    this.edgeIdToElementMap.set(t, i), this.container.appendChild(i);
   }
   renderEdge(t) {
     const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), i = this.graphStore.getPort(e.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
@@ -79,11 +79,11 @@ class pt {
       d
     );
     let g = C.Line;
-    s.element === i.element ? g = C.PortCycle : s.nodeId === i.nodeId && (g = C.NodeCycle), e.shape.render({ from: c, to: l, category: g });
+    s.element === i.element ? g = C.PortCycle : s.nodeId === i.nodeId && (g = C.NodeCycle), e.payload.shape.render({ from: c, to: l, category: g });
   }
   updateEdgePriority(t) {
     const e = this.graphStore.getEdge(t);
-    e.shape.svg.style.zIndex = `${e.priority}`;
+    e.payload.shape.svg.style.zIndex = `${e.payload.priority}`;
   }
   createEdgeRenderPort(t, e, s, i) {
     const n = {
@@ -95,7 +95,7 @@ class pt {
       y: a.y,
       width: e.width * i.scale,
       height: e.height * i.scale,
-      direction: t.direction
+      direction: t.payload.direction
     };
   }
 }
@@ -111,11 +111,11 @@ class Vt {
     this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
   }
   hasNode(t) {
-    const e = this.graphStore.getNode(t);
+    const e = this.graphStore.getNode(t).payload;
     return e.x >= this.xFrom && e.x <= this.xTo && e.y >= this.yFrom && e.y <= this.yTo;
   }
   hasEdge(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(i).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
@@ -248,12 +248,15 @@ class Wt {
   }
   getNode(t) {
     const e = this.graphStore.getNode(t);
-    return e === void 0 ? null : {
+    if (e === void 0)
+      return null;
+    const s = e.payload;
+    return {
       element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn,
-      priority: e.priority
+      x: s.x,
+      y: s.y,
+      centerFn: s.centerFn,
+      priority: s.priority
     };
   }
   getElementNodeId(t) {
@@ -266,7 +269,7 @@ class Wt {
     const e = this.graphStore.getPort(t);
     return e === void 0 ? null : {
       element: e.element,
-      direction: e.direction,
+      direction: e.payload.direction,
       nodeId: e.nodeId
     };
   }
@@ -284,11 +287,14 @@ class Wt {
   }
   getEdge(t) {
     const e = this.graphStore.getEdge(t);
-    return e === void 0 ? null : {
+    if (e === void 0)
+      return null;
+    const s = e.payload;
+    return {
       from: e.from,
       to: e.to,
-      priority: e.priority,
-      shape: e.shape
+      priority: s.priority,
+      shape: s.shape
     };
   }
   getPortIncomingEdgeIds(t) {
@@ -420,7 +426,7 @@ class ft {
    */
   addNode(t) {
     const e = this.nodeIdGenerator.create(t.id);
-    if (this.graph.getNode(e) !== null)
+    if (this.graphStore.getNode(e) !== void 0)
       throw new S("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(t.element) !== void 0)
       throw new S(
@@ -447,7 +453,7 @@ class ft {
    * updates node parameters
    */
   updateNode(t, e) {
-    if (this.graph.getNode(t) === null)
+    if (this.graphStore.getNode(t) === void 0)
       throw new S("failed to update non existing node");
     return this.graphStore.updateNode(t, e ?? {}), this;
   }
@@ -457,7 +463,7 @@ class ft {
    * all the edges adjacent to node get removed
    */
   removeNode(t) {
-    if (this.graph.getNode(t) === null)
+    if (this.graphStore.getNode(t) === void 0)
       throw new S("failed to remove non existing node");
     return this.graphStore.removeNode(t), this;
   }
@@ -466,9 +472,9 @@ class ft {
    */
   markPort(t) {
     const e = this.portIdGenerator.create(t.id);
-    if (this.graph.getPort(e) !== null)
+    if (this.graphStore.getPort(e) !== void 0)
       throw new S("failed to add port with existing id");
-    if (this.graph.getNode(t.nodeId) === null)
+    if (this.graphStore.getNode(t.nodeId) === void 0)
       throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: e,
@@ -481,7 +487,7 @@ class ft {
    * updates port and edges attached to it
    */
   updatePort(t, e) {
-    if (this.graph.getPort(t) === null)
+    if (this.graphStore.getPort(t) === void 0)
       throw new S("failed to update nonexistent port");
     return this.graphStore.updatePort(t, e ?? {}), this;
   }
@@ -490,7 +496,7 @@ class ft {
    * all the edges adjacent to the port get removed
    */
   unmarkPort(t) {
-    if (this.graph.getPort(t) === null)
+    if (this.graphStore.getPort(t) === void 0)
       throw new S("failed to unmark non existing port");
     return this.graphStore.removePort(t), this;
   }
@@ -499,11 +505,11 @@ class ft {
    */
   addEdge(t) {
     const e = this.edgeIdGenerator.create(t.id);
-    if (this.graph.getEdge(e) !== null)
+    if (this.graphStore.getEdge(e) !== void 0)
       throw new S("failed to add edge with existing id");
-    if (this.graph.getPort(t.from) === null)
+    if (this.graphStore.getPort(t.from) === void 0)
       throw new S("failed to add edge from nonexistent port");
-    if (this.graph.getPort(t.to) === null)
+    if (this.graphStore.getPort(t.to) === void 0)
       throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: e,
@@ -517,7 +523,7 @@ class ft {
    * updates specified edge
    */
   updateEdge(t, e) {
-    if (this.graph.getEdge(t) === null)
+    if (this.graphStore.getEdge(t) === void 0)
       throw new S("failed to update nonexistent edge");
     return this.graphStore.updateEdge(t, e ?? {}), this;
   }
@@ -525,7 +531,7 @@ class ft {
    * removes specified edge
    */
   removeEdge(t) {
-    if (this.graph.getEdge(t) === null)
+    if (this.graphStore.getEdge(t) === void 0)
       throw new S("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(t), this;
   }
@@ -602,7 +608,7 @@ class $t {
     return this.multiToSingleMap.get(t) !== void 0;
   }
 }
-class mt {
+class yt {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -643,10 +649,12 @@ class mt {
   addNode(t) {
     const e = /* @__PURE__ */ new Map(), s = {
       element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn,
-      priority: t.priority,
+      payload: {
+        x: t.x,
+        y: t.y,
+        centerFn: t.centerFn,
+        priority: t.priority
+      },
       ports: e
     };
     this.nodes.set(t.id, s), this.nodesElementsMap.set(t.element, t.id), this.afterNodeAddedEmitter.emit(t.id);
@@ -661,7 +669,7 @@ class mt {
     return this.nodesElementsMap.get(t);
   }
   updateNode(t, e) {
-    const s = this.nodes.get(t);
+    const s = this.nodes.get(t).payload;
     s.x = e.x ?? s.x, s.y = e.y ?? s.y, s.centerFn = e.centerFn ?? s.centerFn, e.priority !== void 0 && (s.priority = e.priority, this.afterNodePriorityUpdatedEmitter.emit(t)), this.afterNodeUpdatedEmitter.emit(t);
   }
   removeNode(t) {
@@ -672,7 +680,9 @@ class mt {
   addPort(t) {
     this.ports.set(t.id, {
       element: t.element,
-      direction: t.direction,
+      payload: {
+        direction: t.direction
+      },
       nodeId: t.nodeId
     }), this.elementPorts.addRecord(t.element, t.id), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element), this.afterPortAddedEmitter.emit(t.id);
   }
@@ -680,7 +690,7 @@ class mt {
     return this.ports.get(t);
   }
   updatePort(t, e) {
-    const s = this.ports.get(t);
+    const s = this.ports.get(t).payload;
     s.direction = e.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(t);
   }
   getAllPortIds() {
@@ -703,17 +713,17 @@ class mt {
   }
   updateEdge(t, e) {
     if (e.from !== void 0 || e.to !== void 0) {
-      const i = this.edges.get(t);
+      const i = this.edges.get(t), n = i.payload;
       this.removeEdgeInternal(t), this.addEdgeInternal({
         id: t,
         from: e.from ?? i.from,
         to: e.to ?? i.to,
-        shape: i.shape,
-        priority: i.priority
+        shape: n.shape,
+        priority: n.priority
       });
     }
     const s = this.edges.get(t);
-    e.shape !== void 0 && (s.shape = e.shape, this.afterEdgeShapeUpdatedEmitter.emit(t)), e.priority !== void 0 && (s.priority = e.priority, this.afterEdgePriorityUpdatedEmitter.emit(t)), this.afterEdgeUpdatedEmitter.emit(t);
+    e.shape !== void 0 && (s.payload.shape = e.shape, this.afterEdgeShapeUpdatedEmitter.emit(t)), e.priority !== void 0 && (s.payload.priority = e.priority, this.afterEdgePriorityUpdatedEmitter.emit(t)), this.afterEdgeUpdatedEmitter.emit(t);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
@@ -775,8 +785,10 @@ class mt {
     this.edges.set(t.id, {
       from: t.from,
       to: t.to,
-      shape: t.shape,
-      priority: t.priority
+      payload: {
+        shape: t.shape,
+        priority: t.priority
+      }
     }), t.from !== t.to ? (this.outcomingEdges.get(t.from).add(t.id), this.incomingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
   }
   removeEdgeInternal(t) {
@@ -877,7 +889,7 @@ const Ft = (r, t, e) => {
   for (; e !== null && (s = r.getElementPortIds(e)[0] ?? null, s === null); )
     e = e.parentElement;
   return s;
-}, yt = (r, t) => {
+}, mt = (r, t) => {
   const e = document.elementsFromPoint(t.x, t.y);
   for (const s of e) {
     const i = kt(r, s);
@@ -890,7 +902,7 @@ var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r
 const vt = (r, t) => ({
   x: r / 2,
   y: t / 2
-}), m = (r, t, e) => ({
+}), y = (r, t, e) => ({
   x: t.x * r.x - t.y * r.y + ((1 - t.x) * e.x + t.y * e.y),
   y: t.y * r.x + t.x * r.y + ((1 - t.x) * e.y - t.y * e.x)
 }), u = {
@@ -904,11 +916,11 @@ class zt {
     this.params = t;
     const e = this.params.to;
     this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = m(
+    const s = y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ), i = m(
+    ), i = y(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -931,25 +943,25 @@ class Xt {
     o(this, "path");
     o(this, "midpoint");
     this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
     ), l = {
       x: c.x + h,
       y: c.y + d
-    }, g = m(
+    }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -959,7 +971,7 @@ class Xt {
     }, f = {
       x: (l.x + w.x) / 2,
       y: (l.y + w.y) / 2
-    }, y = {
+    }, m = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
@@ -975,7 +987,7 @@ class Xt {
     this.path = [
       `M ${e.x} ${e.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
+      `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
       `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
       `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = B(f, t.flipX, t.flipY, t.to);
@@ -988,13 +1000,13 @@ const M = (r, t) => {
     let i = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, l = 0, g = 0;
-      const w = d > 0, f = d < s, y = w && f;
+      const w = d > 0, f = d < s, m = w && f;
       if (w && (c = -i, l = -n, g = a), f) {
         const V = r[d + 1];
         i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = a !== 0 ? Math.min((y ? t : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = y ? { x: h.x + i * E, y: h.y + n * E } : h, b = g !== 0 ? Math.min((y ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
-      d > 0 && e.push(`L ${D.x} ${D.y}`), y && e.push(
+      const E = a !== 0 ? Math.min((m ? t : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: h.x + i * E, y: h.y + n * E } : h, b = g !== 0 ? Math.min((m ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = m ? { x: h.x + c * b, y: h.y + l * b } : h;
+      d > 0 && e.push(`L ${D.x} ${D.y}`), m && e.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
@@ -1008,22 +1020,22 @@ class Yt {
     this.params = t;
     const e = this.params.to;
     this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: u.y },
       this.params.sourceDirection,
       u
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1033,9 +1045,9 @@ class Yt {
     }, w = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, y = { x: f.x, y: l };
+    }, m = { x: f.x, y: l };
     this.path = M(
-      [s, h, g, w, y, f, d, i],
+      [s, h, g, w, m, f, d, i],
       this.params.roundness
     );
   }
@@ -1045,22 +1057,22 @@ class Ht {
     o(this, "path");
     o(this, "midpoint");
     this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1078,22 +1090,22 @@ class jt {
     this.params = t;
     const e = this.params.to;
     this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
       { x: n, y: u.y },
       this.params.sourceDirection,
       u
-    ), h = m(
+    ), h = y(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1108,22 +1120,22 @@ class Gt {
     this.params = t;
     const e = this.params.to;
     this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: u.y },
       this.params.sourceDirection,
       u
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1133,9 +1145,9 @@ class Gt {
     }, w = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, y = { x: l, y: f.y };
+    }, m = { x: l, y: f.y };
     this.path = M(
-      [s, h, g, w, y, f, d, i],
+      [s, h, g, w, m, f, d, i],
       this.params.roundness
     );
   }
@@ -1155,7 +1167,7 @@ class G {
       { x: i, y: u.y },
       { x: this.params.arrowLength, y: u.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, u)
+      (c) => y(c, this.params.sourceDirection, u)
     ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
@@ -1171,7 +1183,7 @@ class Kt {
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, u)
+      (m) => y(m, this.params.sourceDirection, u)
     ), w = [
       `M ${g[0].x} ${g[0].y}`,
       `A ${e} ${e} 0 0 1 ${g[1].x} ${g[1].y}`,
@@ -1222,22 +1234,22 @@ class Jt {
     o(this, "path");
     o(this, "midpoint");
     this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1263,22 +1275,22 @@ class Qt {
     o(this, "path");
     o(this, "midpoint");
     this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1336,7 +1348,7 @@ const Et = (r, t) => {
     u,
     { x: e, y: s },
     { x: e, y: -s }
-  ].map((c) => m(c, r, u)).map((c) => ({ x: c.x + t.x, y: c.y + t.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  ].map((c) => y(c, r, u)).map((c) => ({ x: c.x + t.x, y: c.y + t.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
   return `${a} ${h} ${d} Z`;
 }, p = Object.freeze({
   color: "#777777",
@@ -1388,14 +1400,14 @@ class F {
     };
     let g = c, w = -this.params.arrowLength, f;
     t.category === C.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : t.category === C.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const y = f(
+    const m = f(
       d,
       c,
       l,
       a,
       h
     );
-    this.line.setAttribute("d", y.path);
+    this.line.setAttribute("d", m.path);
     let v = null;
     this.sourceArrow && (v = X(
       d,
@@ -1410,7 +1422,7 @@ class F {
       w,
       this.params.arrowWidth
     ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: y,
+      edgePath: m,
       sourceArrowPath: v,
       targetArrowPath: E
     });
@@ -1831,7 +1843,7 @@ class Ne {
   }
 }
 const Dt = (r, t) => {
-  const e = new mt(), s = new pt(e, t, r), i = {
+  const e = new yt(), s = new pt(e, t, r), i = {
     nodes: {
       centerFn: vt,
       priorityFn: () => 0
@@ -2502,9 +2514,9 @@ class _ {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [y, v] = this.isTargetDragging ? [w, f] : [f, w];
-    this.overlayCanvas.addNode(W(y)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
-      from: y.overlayId,
+    const [m, v] = this.isTargetDragging ? [w, f] : [f, w];
+    this.overlayCanvas.addNode(W(m)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
+      from: m.overlayId,
       to: v.overlayId,
       shape: this.params.edgeShapeFactory(P.Edge)
     });
@@ -2513,16 +2525,16 @@ class _ {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(t) {
-    const e = yt(this.canvas.graph, t);
+    const e = mt(this.canvas.graph, t), s = this.staticPortId;
     if (e === null) {
       this.params.onEdgeCreationInterrupted({
-        staticPortId: this.staticPortId,
+        staticPortId: s,
         isDirect: this.isTargetDragging
       });
       return;
     }
-    const s = this.isTargetDragging ? this.staticPortId : e, i = this.isTargetDragging ? e : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
-    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+    const i = this.isTargetDragging ? s : e, n = this.isTargetDragging ? e : s, a = { from: i, to: n }, h = this.params.connectionPreprocessor(a);
+    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
   }
   moveDraggingPort(t) {
     const e = this.overlayLayer.getBoundingClientRect(), s = {
@@ -2588,7 +2600,7 @@ class q {
     const d = this.canvas.graph.getPort(t), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
-    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = T(w, {
+    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = T(w, {
       x: g.x - f.x,
       y: g.y - f.y
     }), v = T(w, {
@@ -2604,7 +2616,7 @@ class q {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayId: P.Static,
-      portCoords: y,
+      portCoords: m,
       portDirection: c.direction
     }, x = {
       overlayId: P.Dragging,
@@ -2634,7 +2646,7 @@ class q {
     });
   }
   tryCreateConnection(t) {
-    const e = yt(this.canvas.graph, t);
+    const e = mt(this.canvas.graph, t);
     if (this.overlayCanvas.removeEdge(P.Edge), e === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -2790,10 +2802,10 @@ const H = (r) => () => r, gt = H(0), le = () => {
     }
   };
 }, we = (r) => {
-  var w, f, y, v, E;
+  var w, f, m, v, E;
   const t = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
   }), e = r.nodeDragVerifier ?? (() => !0), s = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (x) => x.button === 0, l = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, g = l !== void 0 ? l : (x) => x.button === 0;
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (m = r.mouse) == null ? void 0 : m.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (x) => x.button === 0, l = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, g = l !== void 0 ? l : (x) => x.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -2815,7 +2827,7 @@ const H = (r) => () => r, gt = H(0), le = () => {
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, me = (r) => {
+}, ye = (r) => {
   const t = r.maxContentScale, e = r.minContentScale, s = t !== null ? 1 / t : 0, i = e !== null ? 1 / e : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -2836,7 +2848,7 @@ const H = (r) => () => r, gt = H(0), le = () => {
       y: l
     };
   };
-}, ye = (r) => (t) => r.reduce(
+}, me = (r) => (t) => r.reduce(
   (e, s) => s({
     prevTransform: t.prevTransform,
     nextTransform: e,
@@ -2849,7 +2861,7 @@ const H = (r) => () => r, gt = H(0), le = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return me({
+      return ye({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
@@ -2862,10 +2874,10 @@ const H = (r) => () => r, gt = H(0), le = () => {
       });
   }
 }, ut = (r) => {
-  var y, v, E, x, L, b, D, V, et, rt, ot, st;
-  const t = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, e = t !== void 0 ? t : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  var m, v, E, x, L, b, D, V, et, rt, ot, st;
+  const t = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, e = t !== void 0 ? t : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = ye(
+  s !== void 0 ? Array.isArray(s) ? i = me(
     s.map(
       (N) => lt(N)
     )
@@ -2979,9 +2991,11 @@ class Me {
     o(this, "hasBackground", !1);
     o(this, "hasUserConnectablePorts", !1);
     o(this, "hasUserDraggableEdges", !1);
-    o(this, "boxRenderingTrigger");
+    o(this, "boxRenderingTrigger", new wt());
+    o(this, "graphStore", new yt());
+    o(this, "viewportStore", new Bt());
     o(this, "window", window);
-    this.element = t, t !== void 0 && (this.element = t);
+    this.element = t;
   }
   /**
    * specifies default values for graph entities
@@ -3024,7 +3038,7 @@ class Me {
    * enables edge creation by dragging one port to another
    */
   enableUserConnectablePorts(t) {
-    return this.connectablePortsConfig = t ?? {}, this.hasUserConnectablePorts = !0, this;
+    return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = t ?? {}, this;
   }
   enableUserDraggableEdges(t) {
     return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = t ?? {}, this;
@@ -3036,79 +3050,77 @@ class Me {
     if (this.used)
       throw new Te("CanvasBuilder is a single use object");
     this.used = !0;
-    let t = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && t === void 0 && (t = new wt());
-    const e = new mt(), s = new Bt(), i = new ge(this.element);
-    let n = new pt(
-      e,
-      s,
-      i.main
+    const t = new ge(this.element);
+    let e = new pt(
+      this.graphStore,
+      this.viewportStore,
+      t.main
     );
-    t !== void 0 && (n = new It(
-      n,
+    this.virtualScrollConfig !== void 0 && (e = new It(
       e,
-      t,
+      this.graphStore,
+      this.boxRenderingTrigger,
       be(this.virtualScrollConfig)
     ));
-    const a = pe(this.canvasDefaults), h = new ft(
+    const s = pe(this.canvasDefaults), i = new ft(
+      this.graphStore,
+      this.viewportStore,
       e,
-      s,
-      n,
-      a
+      s
     );
     if (this.hasBackground && Q.configure(
-      h,
+      i,
       Ae(this.backgroundConfig),
-      i.background
-    ), this.hasNodeResizeReactiveEdges && j.configure(h), this.hasDraggableNode && Z.configure(
-      h,
-      i.main,
+      t.background
+    ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
+      i,
+      t.main,
       this.window,
       we(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = xe(
+      const a = xe(
         this.connectablePortsConfig,
-        a.edges.shapeFactory,
-        a.ports.direction
+        s.edges.shapeFactory,
+        s.ports.direction
       );
       _.configure(
-        h,
-        i.overlayConnectablePorts,
-        s,
+        i,
+        t.overlayConnectablePorts,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = Se(
+      const a = Se(
         this.draggableEdgesConfig,
-        h.graph
+        i.graph
       );
       q.configure(
-        h,
-        i.overlayDraggableEdges,
-        s,
+        i,
+        t.overlayDraggableEdges,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     this.virtualScrollConfig !== void 0 ? J.configure(
-      h,
-      i.main,
+      i,
+      t.main,
       this.window,
       ut(this.transformConfig),
-      t,
+      this.boxRenderingTrigger,
       Pe(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && k.configure(
-      h,
-      i.main,
+      i,
+      t.main,
       this.window,
       ut(this.transformConfig)
     );
-    const d = () => {
-      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
+    const n = () => {
+      t.destroy(), i.onBeforeDestroy.unsubscribe(n);
     };
-    return h.onBeforeDestroy.subscribe(d), h;
+    return i.onBeforeDestroy.subscribe(n), i;
   }
 }
 export {