@html-graph/html-graph 0.0.45 → 0.0.47

package/dist/main.js

@@ -1,8 +1,8 @@
-var k = Object.defineProperty;
-var j = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var r = (n, t, e) => j(n, typeof t != "symbol" ? t + "" : t, e);
-class F {
-  constructor(t) {
+var F = Object.defineProperty;
+var k = (n, t, e) => t in n ? F(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => k(n, typeof t != "symbol" ? t + "" : t, e);
+class j {
+  constructor(t, e, o, s, i) {
     r(this, "canvasWrapper", null);
     r(this, "host");
     r(this, "nodesContainer");
@@ -39,7 +39,7 @@ class F {
         },
         moveOnTop: (t) => {
           const e = this.nodeIdToWrapperElementMap.get(t);
-          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.di.graphStore.getNodeAdjacentConnections(t).forEach((s) => {
+          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentConnections(t).forEach((s) => {
             this.connectionIdToElementMap.get(s).style.zIndex = `${this.currentZIndex - 1}`;
           });
         }
@@ -58,13 +58,11 @@ class F {
         }
       }
     });
-    this.di = t, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.connectionsContainer = this.createConnectionsContainer();
-    const e = this.canvas.getContext("2d");
-    if (e === null)
+    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = o, this.layersMode = s, this.backgroundDrawingFn = i, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.connectionsContainer = this.createConnectionsContainer();
+    const h = this.canvas.getContext("2d");
+    if (h === null)
       throw new Error("unable to get canvas context");
-    this.canvasCtx = e, this.host.appendChild(this.canvas);
-    const o = this.di.options.layers.mode;
-    this.layers[o].create(), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
+    this.canvasCtx = h, this.host.appendChild(this.canvas), this.layers[this.layersMode].create(), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
   }
   clear() {
     Array.from(this.connectionIdToElementMap.keys()).forEach((t) => {
@@ -83,30 +81,22 @@ class F {
     this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.connectionsContainer), this.host.removeChild(this.nodesContainer), this.canvasWrapper !== null && this.canvasWrapper.removeChild(this.host);
   }
   applyTransform() {
-    this.canvasCtx.clearRect(
-      0,
-      0,
-      this.canvasCtx.canvas.width,
-      this.canvasCtx.canvas.height
-    ), this.canvasCtx.save(), this.di.options.background.drawingFn(
-      this.canvasCtx,
-      this.di.publicViewportTransformer
-    ), this.canvasCtx.restore();
-    const [t, e] = this.di.viewportTransformer.getViewCoords(0, 0), o = this.di.viewportTransformer.getViewScale();
-    this.layers[this.di.options.layers.mode].update(o, t, e);
+    this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
+    const [t, e] = this.viewportTransformer.getViewCoords(0, 0), o = this.viewportTransformer.getViewScale();
+    this.layers[this.layersMode].update(o, t, e);
   }
   attachNode(t) {
-    const e = this.di.graphStore.getNode(t), o = document.createElement("div");
+    const e = this.graphStore.getNode(t), o = document.createElement("div");
     o.appendChild(e.element), o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, o.style.visibility = "hidden", this.nodesContainer.appendChild(o), this.nodeElementToIdMap.set(e.element, t), this.nodeWrapperElementToIdMap.set(o, t), this.nodeIdToWrapperElementMap.set(t, o), this.updateNodeCoords(t, e.x, e.y), this.nodesResizeObserver.observe(o), o.style.visibility = "visible";
   }
   detachNode(t) {
-    const e = this.di.graphStore.getNode(t);
+    const e = this.graphStore.getNode(t);
     this.nodesResizeObserver.unobserve(e.element), this.nodesContainer.removeChild(e.element);
     const o = this.nodeIdToWrapperElementMap.get(t);
     o.removeChild(e.element), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(o), this.nodeIdToWrapperElementMap.delete(t);
   }
   attachConnection(t) {
-    const o = this.di.graphStore.getConnection(t).controller.svg;
+    const o = this.graphStore.getConnection(t).controller.svg;
     o.style.transformOrigin = "50% 50%", o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, this.connectionIdToElementMap.set(t, o), this.updateConnectionCoords(t), this.connectionsContainer.appendChild(o);
   }
   detachConnection(t) {
@@ -114,16 +104,16 @@ class F {
     this.connectionIdToElementMap.delete(t), this.connectionsContainer.removeChild(e);
   }
   moveNodeOnTop(t) {
-    this.layers[this.di.options.layers.mode].moveOnTop(t);
+    this.layers[this.layersMode].moveOnTop(t);
   }
   updateNodePosition(t) {
-    const e = this.di.graphStore.getNode(t), o = this.di.graphStore.getNodeAdjacentConnections(t);
+    const e = this.graphStore.getNode(t), o = this.graphStore.getNodeAdjacentConnections(t);
     this.updateNodeCoords(t, e.x, e.y), o.forEach((s) => {
       this.updateConnectionCoords(s);
     });
   }
   updatePortConnections(t) {
-    this.di.graphStore.getPortAdjacentConnections(t).forEach((o) => {
+    this.graphStore.getPortAdjacentConnections(t).forEach((o) => {
       this.updateConnectionCoords(o);
     });
   }
@@ -155,8 +145,8 @@ class F {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        const o = e.target, s = this.nodeWrapperElementToIdMap.get(o), i = this.di.graphStore.getNode(s);
-        this.updateNodeCoords(s, i.x, i.y), this.di.graphStore.getNodeAdjacentConnections(s).forEach((a) => {
+        const o = e.target, s = this.nodeWrapperElementToIdMap.get(o), i = this.graphStore.getNode(s);
+        this.updateNodeCoords(s, i.x, i.y), this.graphStore.getNodeAdjacentConnections(s).forEach((a) => {
           this.updateConnectionCoords(a);
         });
       });
@@ -167,27 +157,27 @@ class F {
     this.canvas.width = t, this.canvas.height = e;
   }
   updateNodeCoords(t, e, o) {
-    const s = this.nodeIdToWrapperElementMap.get(t), { width: i, height: c } = s.getBoundingClientRect(), a = this.di.viewportTransformer.getAbsScale(), h = this.di.graphStore.getNode(t), [l, m] = h.centerFn(i, c);
-    s.style.transform = `matrix(1, 0, 0, 1, ${e - a * l}, ${o - a * m})`;
+    const s = this.nodeIdToWrapperElementMap.get(t), { width: i, height: h } = s.getBoundingClientRect(), a = this.viewportTransformer.getAbsScale(), c = this.graphStore.getNode(t), [l, g] = c.centerFn(i, h);
+    s.style.transform = `matrix(1, 0, 0, 1, ${e - a * l}, ${o - a * g})`;
   }
   updateConnectionCoords(t) {
-    const e = this.di.graphStore.getConnection(t), o = this.di.graphStore.getPort(e.from), s = this.di.graphStore.getPort(e.to), i = o.element.getBoundingClientRect(), c = s.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [h, l] = this.di.viewportTransformer.getAbsCoords(
+    const e = this.graphStore.getConnection(t), o = this.graphStore.getPort(e.from), s = this.graphStore.getPort(e.to), i = o.element.getBoundingClientRect(), h = s.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
       i.left - a.left,
       i.top - a.top
-    ), [m, d] = this.di.viewportTransformer.getAbsCoords(
-      c.left - a.left,
-      c.top - a.top
-    ), g = this.di.viewportTransformer.getAbsScale(), [u, p] = o.centerFn(
-      i.width * g,
-      i.height * g
+    ), [g, d] = this.viewportTransformer.getAbsCoords(
+      h.left - a.left,
+      h.top - a.top
+    ), m = this.viewportTransformer.getAbsScale(), [u, p] = o.centerFn(
+      i.width * m,
+      i.height * m
     ), [f, y] = s.centerFn(
-      c.width * g,
-      c.height * g
-    ), b = u + h, S = p + l, N = f + m, v = y + d, w = Math.min(b, N), T = Math.min(S, v), E = Math.abs(N - b), O = Math.abs(v - S), M = this.connectionIdToElementMap.get(t), L = b <= N, V = S <= v;
-    M.style.transform = `matrix(${L ? 1 : -1}, 0, 0, ${V ? 1 : -1}, ${w}, ${T})`, e.controller.update(w, T, E, O, o, s);
+      h.width * m,
+      h.height * m
+    ), S = u + c, b = p + l, N = f + g, C = y + d, w = Math.min(S, N), T = Math.min(b, C), E = Math.abs(N - S), x = Math.abs(C - b), M = this.connectionIdToElementMap.get(t), L = S <= N, V = b <= C;
+    M.style.transform = `matrix(${L ? 1 : -1}, 0, 0, ${V ? 1 : -1}, ${w}, ${T})`, e.controller.update(w, T, E, x, o, s);
   }
 }
-class W {
+class D {
   constructor() {
     r(this, "state", {
       scale: 1,
@@ -257,7 +247,7 @@ class W {
     };
   }
 }
-class D {
+class W {
   constructor(t) {
     this.transformer = t;
   }
@@ -290,10 +280,205 @@ class D {
     return this.transformer.getAbsScale();
   }
 }
-class C {
+class R {
+  constructor() {
+    r(this, "nodes", /* @__PURE__ */ Object.create(null));
+    r(this, "ports", /* @__PURE__ */ Object.create(null));
+    r(this, "nodePorts", /* @__PURE__ */ Object.create(null));
+    r(this, "portNodeId", /* @__PURE__ */ Object.create(null));
+    r(this, "connections", /* @__PURE__ */ Object.create(null));
+    r(this, "incommingConnections", /* @__PURE__ */ Object.create(null));
+    r(this, "outcommingConnections", /* @__PURE__ */ Object.create(null));
+    r(this, "cycleConnections", /* @__PURE__ */ Object.create(null));
+  }
+  getAllNodes() {
+    return Object.keys(this.nodes);
+  }
+  getAllPorts() {
+    return Object.keys(this.ports);
+  }
+  getAllConnections() {
+    return Object.keys(this.connections);
+  }
+  addNode(t, e, o, s, i) {
+    this.nodes[t] = { element: e, x: o, y: s, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
+  }
+  hasNode(t) {
+    return this.nodes[t] !== void 0;
+  }
+  getNode(t) {
+    return this.nodes[t];
+  }
+  updateNodeCoords(t, e, o) {
+    this.nodes[t].x = e, this.nodes[t].y = o;
+  }
+  updateConnectionController(t, e) {
+    this.connections[t].controller = e;
+  }
+  removeNode(t) {
+    this.getNodeAdjacentConnections(t).forEach((s) => {
+      this.removeConnection(s);
+    }), delete this.nodes[t];
+    const o = this.nodePorts[t];
+    Object.keys(o).forEach((s) => {
+      delete this.portNodeId[s];
+    }), delete this.nodePorts[t];
+  }
+  addPort(t, e, o, s, i) {
+    this.ports[t] = { element: e, centerFn: s, direction: i }, this.cycleConnections[t] = {}, this.incommingConnections[t] = {}, this.outcommingConnections[t] = {}, this.portNodeId[t] = o;
+    const h = this.nodePorts[o];
+    h !== void 0 && (h[t] = e);
+  }
+  getPort(t) {
+    return this.ports[t];
+  }
+  getPortNode(t) {
+    return this.portNodeId[t];
+  }
+  hasPort(t) {
+    return this.portNodeId[t] !== void 0;
+  }
+  removePort(t) {
+    Object.keys(this.cycleConnections[t]).forEach((s) => {
+      this.removeConnection(s);
+    }), delete this.cycleConnections[t], Object.keys(this.incommingConnections[t]).forEach((s) => {
+      this.removeConnection(s);
+    }), delete this.incommingConnections[t], Object.keys(this.outcommingConnections[t]).forEach((s) => {
+      this.removeConnection(s);
+    }), delete this.outcommingConnections[t];
+    const e = this.portNodeId[t];
+    delete this.portNodeId[t];
+    const o = this.nodePorts[e];
+    delete o[t], delete this.ports[t];
+  }
+  addConnection(t, e, o, s) {
+    this.connections[t] = {
+      from: e,
+      to: o,
+      controller: s
+    }, e !== o ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[o][t] = !0) : this.cycleConnections[e][t] = !0;
+  }
+  getConnection(t) {
+    return this.connections[t];
+  }
+  hasConnection(t) {
+    return this.connections[t] !== void 0;
+  }
+  removeConnection(t) {
+    const e = this.connections[t], o = e.from, s = e.to;
+    delete this.cycleConnections[o][t], delete this.cycleConnections[s][t], delete this.incommingConnections[o][t], delete this.incommingConnections[s][t], delete this.outcommingConnections[o][t], delete this.outcommingConnections[s][t], delete this.connections[t];
+  }
+  getPortIncomingConnections(t) {
+    return Object.keys(this.incommingConnections[t] ?? {});
+  }
+  getPortOutcomingConnections(t) {
+    return Object.keys(this.outcommingConnections[t] ?? {});
+  }
+  getPortCycleConnections(t) {
+    return Object.keys(this.cycleConnections[t] ?? {});
+  }
+  getPortAdjacentConnections(t) {
+    return [
+      ...this.getPortIncomingConnections(t),
+      ...this.getPortOutcomingConnections(t),
+      ...this.getPortCycleConnections(t)
+    ];
+  }
+  getNodeIncomingConnections(t) {
+    const e = Object.keys(this.nodePorts[t]);
+    let o = [];
+    return e.forEach((s) => {
+      o = [...o, ...this.getPortIncomingConnections(s)];
+    }), o;
+  }
+  getNodeOutcomingConnections(t) {
+    const e = Object.keys(this.nodePorts[t]);
+    let o = [];
+    return e.forEach((s) => {
+      o = [...o, ...this.getPortOutcomingConnections(s)];
+    }), o;
+  }
+  getNodeCycleConnections(t) {
+    const e = Object.keys(this.nodePorts[t]);
+    let o = [];
+    return e.forEach((s) => {
+      o = [...o, ...this.getPortCycleConnections(s)];
+    }), o;
+  }
+  getNodeAdjacentConnections(t) {
+    return [
+      ...this.getNodeIncomingConnections(t),
+      ...this.getNodeOutcomingConnections(t),
+      ...this.getNodeCycleConnections(t)
+    ];
+  }
+  clear() {
+    this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.connections = /* @__PURE__ */ Object.create(null), this.incommingConnections = /* @__PURE__ */ Object.create(null), this.outcommingConnections = /* @__PURE__ */ Object.create(null), this.cycleConnections = /* @__PURE__ */ Object.create(null);
+  }
+}
+class z {
+  constructor(t) {
+    this.graphStore = t;
+  }
+  getNode(t) {
+    const e = this.graphStore.getNode(t);
+    return e === void 0 ? null : { x: e.x, y: e.y };
+  }
+  getPort(t) {
+    const e = this.graphStore.getPortNode(t);
+    return e === void 0 ? null : { nodeId: e };
+  }
+  getConnection(t) {
+    const e = this.graphStore.getConnection(t);
+    return e === void 0 ? null : { from: e.from, to: e.to };
+  }
+  getAllNodes() {
+    return this.graphStore.getAllNodes();
+  }
+  getAllPorts() {
+    return this.graphStore.getAllPorts();
+  }
+  getAllConnections() {
+    return this.graphStore.getAllConnections();
+  }
+  hasNode(t) {
+    return this.graphStore.hasNode(t);
+  }
+  hasPort(t) {
+    return this.graphStore.hasPort(t);
+  }
+  hasConnection(t) {
+    return this.graphStore.hasConnection(t);
+  }
+  getPortIncomingConnections(t) {
+    return this.graphStore.getPortIncomingConnections(t);
+  }
+  getPortOutcomingConnections(t) {
+    return this.graphStore.getPortOutcomingConnections(t);
+  }
+  getPortCycleConnections(t) {
+    return this.graphStore.getPortCycleConnections(t);
+  }
+  getPortAdjacentConnections(t) {
+    return this.graphStore.getPortAdjacentConnections(t);
+  }
+  getNodeIncomingConnections(t) {
+    return this.graphStore.getNodeIncomingConnections(t);
+  }
+  getNodeOutcomingConnections(t) {
+    return this.graphStore.getNodeOutcomingConnections(t);
+  }
+  getNodeCycleConnections(t) {
+    return this.graphStore.getNodeCycleConnections(t);
+  }
+  getNodeAdjacentConnections(t) {
+    return this.graphStore.getNodeAdjacentConnections(t);
+  }
+}
+class v {
   static getPortCenter(t) {
-    const { top: e, left: o, width: s, height: i } = t.element.getBoundingClientRect(), c = t.centerFn(s, i);
-    return [o + c[0], e + c[1]];
+    const { top: e, left: o, width: s, height: i } = t.element.getBoundingClientRect(), h = t.centerFn(s, i);
+    return [o + h[0], e + h[1]];
   }
   static rotate(t, e, o) {
     return [
@@ -309,25 +494,25 @@ class C {
       [0, 0],
       [s, i],
       [s, -i]
-    ].map((d) => this.rotate(d, t, [0, 0])).map((d) => [d[0] + e, d[1] + o]), h = `M ${a[0][0]} ${a[0][1]}`, l = `L ${a[1][0]} ${a[1][1]}`, m = `L ${a[2][0]} ${a[2][1]}`;
-    return `${h} ${l} ${m}`;
+    ].map((d) => this.rotate(d, t, [0, 0])).map((d) => [d[0] + e, d[1] + o]), c = `M ${a[0][0]} ${a[0][1]}`, l = `L ${a[1][0]} ${a[1][1]}`, g = `L ${a[2][0]} ${a[2][1]}`;
+    return `${c} ${l} ${g}`;
   }
   static getArrowOffsetPath(t, e, o, s, i) {
     const a = [
       [s, 0],
       [s + i, 0]
-    ].map((h) => this.rotate(h, t, [0, 0])).map((h) => [h[0] + e, h[1] + o]);
+    ].map((c) => this.rotate(c, t, [0, 0])).map((c) => [c[0] + e, c[1] + o]);
     return `M ${a[0][0]} ${a[0][1]} L ${a[1][0]} ${a[1][1]}`;
   }
 }
-class R {
-  constructor(t, e, o, s, i, c, a) {
+class G {
+  constructor(t, e, o, s, i, h, a) {
     r(this, "svg");
     r(this, "group");
     r(this, "line");
     r(this, "sourceArrow", null);
     r(this, "targetArrow", null);
-    this.color = t, this.width = e, this.curvature = o, this.arrowLength = s, this.arrowWidth = i, this.hasSourceArrow = c, this.hasTargetArrow = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
+    this.color = t, this.width = e, this.curvature = o, this.arrowLength = s, this.arrowWidth = i, this.hasSourceArrow = h, this.hasTargetArrow = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
@@ -335,35 +520,35 @@ class R {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, o, s, i, c) {
+  update(t, e, o, s, i, h) {
     this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
-    const a = C.getPortCenter(i), h = C.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${m})`;
-    const d = C.getDirectionVector(
+    const a = v.getPortCenter(i), c = v.getPortCenter(h), l = a[0] <= c[0] ? 1 : -1, g = a[1] <= c[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${g})`;
+    const d = v.getDirectionVector(
       i.direction,
       l,
-      m
-    ), g = C.getDirectionVector(
-      c.direction,
+      g
+    ), m = v.getDirectionVector(
+      h.direction,
       l,
-      m
-    ), u = C.rotate(
+      g
+    ), u = v.rotate(
       [this.arrowLength, 0],
       d,
       [0, 0]
-    ), p = C.rotate(
+    ), p = v.rotate(
       [o - this.arrowLength, s],
-      g,
+      m,
       [o, s]
     ), f = [
       u[0] + d[0] * this.curvature,
       u[1] + d[1] * this.curvature
     ], y = [
-      p[0] - g[0] * this.curvature,
-      p[1] - g[1] * this.curvature
-    ], b = `M ${u[0]} ${u[1]}`, S = `C ${f[0]} ${f[1]}, ${y[0]} ${y[1]}, ${p[0]} ${p[1]}`, N = `M 0 0 L ${u[0]} ${u[1]} `, v = ` M ${p[0]} ${p[1]} L ${o} ${s}`, w = `${this.sourceArrow ? "" : N}${b} ${S}${this.targetArrow ? "" : v}`;
+      p[0] - m[0] * this.curvature,
+      p[1] - m[1] * this.curvature
+    ], S = `M ${u[0]} ${u[1]}`, b = `C ${f[0]} ${f[1]}, ${y[0]} ${y[1]}, ${p[0]} ${p[1]}`, N = `M 0 0 L ${u[0]} ${u[1]} `, C = ` M ${p[0]} ${p[1]} L ${o} ${s}`, w = `${this.sourceArrow ? "" : N}${S} ${b}${this.targetArrow ? "" : C}`;
     if (this.line.setAttribute("d", w), this.sourceArrow) {
-      const T = C.getArrowPath(
+      const T = v.getArrowPath(
         d,
         0,
         0,
@@ -373,8 +558,8 @@ class R {
       this.sourceArrow.setAttribute("d", T);
     }
     if (this.targetArrow) {
-      const T = C.getArrowPath(
-        g,
+      const T = v.getArrowPath(
+        m,
         o,
         s,
         -this.arrowLength,
@@ -384,7 +569,7 @@ class R {
     }
   }
 }
-const z = (n) => () => new R(
+const B = (n) => () => new G(
   n.color ?? "#5c5c5c",
   n.width ?? 1,
   n.curvature ?? 90,
@@ -393,14 +578,14 @@ const z = (n) => () => new R(
   n.hasSourceArrow ?? !1,
   n.hasTargetArrow ?? !1
 );
-class G {
-  constructor(t, e, o, s, i, c, a) {
+class Y {
+  constructor(t, e, o, s, i, h, a) {
     r(this, "svg");
     r(this, "group");
     r(this, "line");
     r(this, "sourceArrow", null);
     r(this, "targetArrow", null);
-    this.color = t, this.width = e, this.arrowLength = o, this.arrowWidth = s, this.minPortOffset = i, this.hasSourceArrow = c, this.hasTargetArrow = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
+    this.color = t, this.width = e, this.arrowLength = o, this.arrowWidth = s, this.minPortOffset = i, this.hasSourceArrow = h, this.hasTargetArrow = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
@@ -408,41 +593,41 @@ class G {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, o, s, i, c) {
+  update(t, e, o, s, i, h) {
     this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
-    const a = C.getPortCenter(i), h = C.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${m})`;
-    const d = C.getDirectionVector(
+    const a = v.getPortCenter(i), c = v.getPortCenter(h), l = a[0] <= c[0] ? 1 : -1, g = a[1] <= c[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${g})`;
+    const d = v.getDirectionVector(
       i.direction,
       l,
-      m
-    ), g = C.getDirectionVector(
-      c.direction,
+      g
+    ), m = v.getDirectionVector(
+      h.direction,
       l,
-      m
-    ), u = C.rotate(
+      g
+    ), u = v.rotate(
       [this.arrowLength + this.minPortOffset, 0],
       d,
       [0, 0]
-    ), p = C.rotate(
+    ), p = v.rotate(
       [o - this.arrowLength - this.minPortOffset, s],
-      g,
+      m,
       [o, s]
-    ), [f, y] = [o / 2, s / 2], b = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${f} ${u[1]} L ${f} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${y} L ${p[0]} ${y} L ${p[0]} ${p[1]}`, S = `M 0 0 L ${u[0]} ${u[1]} `, N = ` M ${p[0]} ${p[1]} L ${o} ${s}`, v = C.getArrowOffsetPath(
+    ), [f, y] = [o / 2, s / 2], S = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${f} ${u[1]} L ${f} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${y} L ${p[0]} ${y} L ${p[0]} ${p[1]}`, b = `M 0 0 L ${u[0]} ${u[1]} `, N = ` M ${p[0]} ${p[1]} L ${o} ${s}`, C = v.getArrowOffsetPath(
       d,
       0,
       0,
       this.arrowLength,
       this.minPortOffset
-    ), w = C.getArrowOffsetPath(
-      g,
+    ), w = v.getArrowOffsetPath(
+      m,
       o,
       s,
       -this.arrowLength,
       -this.minPortOffset
-    ), T = `${this.sourceArrow ? v : S}${b}${this.targetArrow ? w : N}`;
+    ), T = `${this.sourceArrow ? C : b}${S}${this.targetArrow ? w : N}`;
     if (this.line.setAttribute("d", T), this.sourceArrow) {
-      const E = C.getArrowPath(
+      const E = v.getArrowPath(
         d,
         0,
         0,
@@ -452,8 +637,8 @@ class G {
       this.sourceArrow.setAttribute("d", E);
     }
     if (this.targetArrow) {
-      const E = C.getArrowPath(
-        g,
+      const E = v.getArrowPath(
+        m,
         o,
         s,
         -this.arrowLength,
@@ -463,7 +648,7 @@ class G {
     }
   }
 }
-const B = (n) => () => new G(
+const X = (n) => () => new Y(
   n.color,
   n.width,
   n.arrowLength,
@@ -473,364 +658,181 @@ const B = (n) => () => new G(
   n.hasTargetArrow
 );
 var $ = /* @__PURE__ */ ((n) => (n.Regular = "regular", n.Cycle = "cycle", n))($ || {});
-class Y {
-  constructor(t) {
-    this.di = t;
+class A {
+  constructor() {
+    r(this, "counter", 0);
+  }
+  next() {
+    const t = `${this.counter}`;
+    return this.counter++, t;
+  }
+  reset() {
+    this.counter = 0;
+  }
+}
+class Z {
+  constructor(t, e, o, s, i) {
+    r(this, "nodeIdGenerator", new A());
+    r(this, "portIdGenerator", new A());
+    r(this, "connectionIdGenerator", new A());
+    this.graphStore = t, this.htmlController = e, this.viewportTransformer = o, this.nodesCenterFn = s, this.portsCenterFn = i;
   }
   moveNodeOnTop(t) {
-    if (!this.di.graphStore.hasNode(t))
+    if (!this.graphStore.hasNode(t))
       throw new Error("failed to move on top nonexisting node");
-    this.di.htmlController.moveNodeOnTop(t);
+    this.htmlController.moveNodeOnTop(t);
   }
   dragNode(t, e, o) {
-    if (!this.di.graphStore.hasNode(t))
+    if (!this.graphStore.hasNode(t))
       throw new Error("failed to drag nonexisting node");
-    const s = this.di.graphStore.getNode(t), [i, c] = this.di.viewportTransformer.getViewCoords(s.x, s.y), a = i + e, h = c + o, [l, m] = this.di.viewportTransformer.getAbsCoords(a, h);
-    this.di.graphStore.updateNodeCoords(t, l, m), this.di.htmlController.updateNodePosition(t);
+    const s = this.graphStore.getNode(t), [i, h] = this.viewportTransformer.getViewCoords(s.x, s.y), a = i + e, c = h + o, [l, g] = this.viewportTransformer.getAbsCoords(a, c);
+    this.graphStore.updateNodeCoords(t, l, g), this.htmlController.updateNodePosition(t);
   }
-  addNode(t, e, o, s, i, c) {
+  addNode(t, e, o, s, i, h) {
     if (t === void 0)
       do
-        t = this.di.nodeIdGenerator.next();
-      while (this.di.graphStore.hasNode(t));
-    if (this.di.graphStore.hasNode(t))
+        t = this.nodeIdGenerator.next();
+      while (this.graphStore.hasNode(t));
+    if (this.graphStore.hasNode(t))
       throw new Error("failed to add node with existing id");
-    this.di.graphStore.addNode(
+    this.graphStore.addNode(
       t,
       e,
       o,
       s,
-      c ?? this.di.options.nodes.centerFn
-    ), this.di.htmlController.attachNode(t), i !== void 0 && Object.entries(i).forEach(([a, h]) => {
-      h instanceof HTMLElement ? this.di.controller.markPort(
-        a,
-        h,
-        t,
-        this.di.options.ports.centerFn,
-        null
-      ) : this.di.controller.markPort(
+      h ?? this.nodesCenterFn
+    ), this.htmlController.attachNode(t), i !== void 0 && Object.entries(i).forEach(([a, c]) => {
+      c instanceof HTMLElement ? this.markPort(a, c, t, this.portsCenterFn, null) : this.markPort(
         a,
-        h.element,
+        c.element,
         t,
-        h.centerFn ?? this.di.options.ports.centerFn,
-        h.direction ?? null
+        c.centerFn ?? this.portsCenterFn,
+        c.direction ?? null
       );
     });
   }
   markPort(t, e, o, s, i) {
     if (t === void 0)
       do
-        t = this.di.portIdGenerator.next();
-      while (this.di.graphStore.hasPort(t));
-    if (!this.di.graphStore.hasNode(o))
+        t = this.portIdGenerator.next();
+      while (this.graphStore.hasPort(t));
+    if (!this.graphStore.hasNode(o))
       throw new Error("failed to set port on nonexisting node");
-    if (this.di.graphStore.hasPort(t))
+    if (this.graphStore.hasPort(t))
       throw new Error("failed to add port with existing id");
-    this.di.graphStore.addPort(
+    this.graphStore.addPort(
       t,
       e,
       o,
-      s ?? this.di.options.ports.centerFn,
+      s ?? this.portsCenterFn,
       i ?? null
     );
   }
   updatePortConnections(t) {
-    if (!this.di.graphStore.hasPort(t))
+    if (!this.graphStore.hasPort(t))
       throw new Error("failed to unset nonexisting port");
-    this.di.htmlController.updatePortConnections(t);
+    this.htmlController.updatePortConnections(t);
   }
   unmarkPort(t) {
-    if (!this.di.graphStore.hasPort(t))
+    if (!this.graphStore.hasPort(t))
       throw new Error("failed to unset nonexisting port");
-    this.di.graphStore.getPortAdjacentConnections(t).forEach((e) => {
+    this.graphStore.getPortAdjacentConnections(t).forEach((e) => {
       this.removeConnection(e);
-    }), this.di.graphStore.removePort(t);
+    }), this.graphStore.removePort(t);
   }
   addConnection(t, e, o, s) {
     if (t === void 0)
       do
-        t = this.di.connectionIdGenerator.next();
-      while (this.di.graphStore.hasConnection(t));
-    if (!this.di.graphStore.hasPort(e))
+        t = this.connectionIdGenerator.next();
+      while (this.graphStore.hasConnection(t));
+    if (!this.graphStore.hasPort(e))
       throw new Error("failed to add connection from nonexisting port");
-    if (!this.di.graphStore.hasPort(o))
+    if (!this.graphStore.hasPort(o))
       throw new Error("failed to add connection to nonexisting port");
-    this.di.graphStore.addConnection(
+    this.graphStore.addConnection(
       t,
       e,
       o,
       s($.Regular)
-    ), this.di.htmlController.attachConnection(t);
+    ), this.htmlController.attachConnection(t);
   }
   removeConnection(t) {
-    if (!this.di.graphStore.hasConnection(t))
+    if (!this.graphStore.hasConnection(t))
       throw new Error("failed to remove nonexisting connection");
-    this.di.htmlController.detachConnection(t), this.di.graphStore.removeConnection(t);
+    this.htmlController.detachConnection(t), this.graphStore.removeConnection(t);
   }
   removeNode(t) {
-    if (!this.di.graphStore.hasNode(t))
+    if (!this.graphStore.hasNode(t))
       throw new Error("failed to remove nonexisting node");
-    this.di.htmlController.detachNode(t), this.di.graphStore.removeNode(t);
+    this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
-  patchViewportTransform(t, e, o) {
-    this.di.viewportTransformer.patchState(t, e, o), this.di.htmlController.applyTransform();
+  patchViewportState(t, e, o) {
+    this.viewportTransformer.patchState(t, e, o), this.htmlController.applyTransform();
   }
-  moveContent(t, e) {
-    this.di.viewportTransformer.applyShift(-t, -e), this.di.htmlController.applyTransform();
+  moveViewport(t, e) {
+    this.viewportTransformer.applyShift(t, e), this.htmlController.applyTransform();
   }
   scaleContent(t, e, o) {
-    this.di.viewportTransformer.applyScale(1 / t, e, o), this.di.htmlController.applyTransform();
+    this.viewportTransformer.applyScale(t, e, o), this.htmlController.applyTransform();
   }
   moveToNodes(t) {
     if (t.length === 0)
       return;
-    const e = t.map((g) => this.di.graphStore.getNode(g)).filter((g) => g !== void 0);
+    const e = t.map((m) => this.graphStore.getNode(m)).filter((m) => m !== void 0);
     if (e.length < t.length)
       throw new Error("failed to move to nonexisting node");
     const [o, s] = e.reduce(
-      (g, u) => [g[0] + u.x, g[1] + u.y],
+      (m, u) => [m[0] + u.x, m[1] + u.y],
       [0, 0]
-    ), i = o / e.length, c = s / e.length, [a, h] = this.di.htmlController.getViewportDimensions(), l = this.di.viewportTransformer.getAbsScale(), m = i - l * a / 2, d = c - l * h / 2;
-    this.patchViewportTransform(null, m, d);
+    ), i = o / e.length, h = s / e.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), g = i - l * a / 2, d = h - l * c / 2;
+    this.patchViewportState(null, g, d);
   }
   updateNodeCoords(t, e, o) {
-    if (!this.di.graphStore.hasNode(t))
+    if (!this.graphStore.hasNode(t))
       throw new Error("failed to update coordinates of nonexisting node");
-    this.di.graphStore.updateNodeCoords(t, e, o), this.di.htmlController.updateNodePosition(t);
-  }
-  updateConnectionOptions(t, e) {
-    if (!this.di.graphStore.hasConnection(t))
-      throw new Error("failed to update nonexisting connection");
-    this.di.htmlController.detachConnection(t), this.di.graphStore.updateConnectionController(t, e), this.di.htmlController.attachConnection(t);
-  }
-  clear() {
-    this.di.htmlController.clear(), this.di.graphStore.clear(), this.di.nodeIdGenerator.reset(), this.di.portIdGenerator.reset(), this.di.connectionIdGenerator.reset();
-  }
-  destroy() {
-    this.di.htmlController.destroy();
-  }
-}
-class X {
-  constructor() {
-    r(this, "nodes", /* @__PURE__ */ Object.create(null));
-    r(this, "ports", /* @__PURE__ */ Object.create(null));
-    r(this, "nodePorts", /* @__PURE__ */ Object.create(null));
-    r(this, "portNodeId", /* @__PURE__ */ Object.create(null));
-    r(this, "connections", /* @__PURE__ */ Object.create(null));
-    r(this, "incommingConnections", /* @__PURE__ */ Object.create(null));
-    r(this, "outcommingConnections", /* @__PURE__ */ Object.create(null));
-    r(this, "cycleConnections", /* @__PURE__ */ Object.create(null));
-  }
-  getAllNodes() {
-    return Object.keys(this.nodes);
-  }
-  getAllPorts() {
-    return Object.keys(this.ports);
-  }
-  getAllConnections() {
-    return Object.keys(this.connections);
-  }
-  addNode(t, e, o, s, i) {
-    this.nodes[t] = { element: e, x: o, y: s, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
-  }
-  hasNode(t) {
-    return this.nodes[t] !== void 0;
-  }
-  getNode(t) {
-    return this.nodes[t];
-  }
-  updateNodeCoords(t, e, o) {
-    this.nodes[t].x = e, this.nodes[t].y = o;
+    this.graphStore.updateNodeCoords(t, e, o), this.htmlController.updateNodePosition(t);
   }
   updateConnectionController(t, e) {
-    this.connections[t].controller = e;
-  }
-  removeNode(t) {
-    this.getNodeAdjacentConnections(t).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.nodes[t];
-    const o = this.nodePorts[t];
-    Object.keys(o).forEach((s) => {
-      delete this.portNodeId[s];
-    }), delete this.nodePorts[t];
-  }
-  addPort(t, e, o, s, i) {
-    this.ports[t] = { element: e, centerFn: s, direction: i }, this.cycleConnections[t] = {}, this.incommingConnections[t] = {}, this.outcommingConnections[t] = {}, this.portNodeId[t] = o;
-    const c = this.nodePorts[o];
-    c !== void 0 && (c[t] = e);
-  }
-  getPort(t) {
-    return this.ports[t];
-  }
-  getPortNode(t) {
-    return this.portNodeId[t];
-  }
-  hasPort(t) {
-    return this.portNodeId[t] !== void 0;
-  }
-  removePort(t) {
-    Object.keys(this.cycleConnections[t]).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.cycleConnections[t], Object.keys(this.incommingConnections[t]).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.incommingConnections[t], Object.keys(this.outcommingConnections[t]).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.outcommingConnections[t];
-    const e = this.portNodeId[t];
-    delete this.portNodeId[t];
-    const o = this.nodePorts[e];
-    delete o[t], delete this.ports[t];
-  }
-  addConnection(t, e, o, s) {
-    this.connections[t] = {
-      from: e,
-      to: o,
-      controller: s
-    }, e !== o ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[o][t] = !0) : this.cycleConnections[e][t] = !0;
-  }
-  getConnection(t) {
-    return this.connections[t];
-  }
-  hasConnection(t) {
-    return this.connections[t] !== void 0;
-  }
-  removeConnection(t) {
-    const e = this.connections[t], o = e.from, s = e.to;
-    delete this.cycleConnections[o][t], delete this.cycleConnections[s][t], delete this.incommingConnections[o][t], delete this.incommingConnections[s][t], delete this.outcommingConnections[o][t], delete this.outcommingConnections[s][t], delete this.connections[t];
-  }
-  getPortIncomingConnections(t) {
-    return Object.keys(this.incommingConnections[t] ?? {});
-  }
-  getPortOutcomingConnections(t) {
-    return Object.keys(this.outcommingConnections[t] ?? {});
-  }
-  getPortCycleConnections(t) {
-    return Object.keys(this.cycleConnections[t] ?? {});
-  }
-  getPortAdjacentConnections(t) {
-    return [
-      ...this.getPortIncomingConnections(t),
-      ...this.getPortOutcomingConnections(t),
-      ...this.getPortCycleConnections(t)
-    ];
-  }
-  getNodeIncomingConnections(t) {
-    const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortIncomingConnections(s)];
-    }), o;
-  }
-  getNodeOutcomingConnections(t) {
-    const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortOutcomingConnections(s)];
-    }), o;
+    if (!this.graphStore.hasConnection(t))
+      throw new Error("failed to update nonexisting connection");
+    this.htmlController.detachConnection(t), this.graphStore.updateConnectionController(t, e), this.htmlController.attachConnection(t);
   }
-  getNodeCycleConnections(t) {
-    const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortCycleConnections(s)];
-    }), o;
+  attach(t) {
+    this.htmlController.attach(t);
   }
-  getNodeAdjacentConnections(t) {
-    return [
-      ...this.getNodeIncomingConnections(t),
-      ...this.getNodeOutcomingConnections(t),
-      ...this.getNodeCycleConnections(t)
-    ];
+  detach() {
+    this.htmlController.detach();
   }
   clear() {
-    this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.connections = /* @__PURE__ */ Object.create(null), this.incommingConnections = /* @__PURE__ */ Object.create(null), this.outcommingConnections = /* @__PURE__ */ Object.create(null), this.cycleConnections = /* @__PURE__ */ Object.create(null);
-  }
-}
-class Z {
-  constructor(t) {
-    this.graphStore = t;
-  }
-  getNode(t) {
-    const e = this.graphStore.getNode(t);
-    return e === void 0 ? null : { x: e.x, y: e.y };
-  }
-  getPort(t) {
-    const e = this.graphStore.getPortNode(t);
-    return e === void 0 ? null : { nodeId: e };
-  }
-  getConnection(t) {
-    const e = this.graphStore.getConnection(t);
-    return e === void 0 ? null : { from: e.from, to: e.to };
-  }
-  getAllNodes() {
-    return this.graphStore.getAllNodes();
-  }
-  getAllPorts() {
-    return this.graphStore.getAllPorts();
-  }
-  getAllConnections() {
-    return this.graphStore.getAllConnections();
-  }
-  hasNode(t) {
-    return this.graphStore.hasNode(t);
-  }
-  hasPort(t) {
-    return this.graphStore.hasPort(t);
+    this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.connectionIdGenerator.reset();
   }
-  hasConnection(t) {
-    return this.graphStore.hasConnection(t);
-  }
-  getPortIncomingConnections(t) {
-    return this.graphStore.getPortIncomingConnections(t);
-  }
-  getPortOutcomingConnections(t) {
-    return this.graphStore.getPortOutcomingConnections(t);
-  }
-  getPortCycleConnections(t) {
-    return this.graphStore.getPortCycleConnections(t);
-  }
-  getPortAdjacentConnections(t) {
-    return this.graphStore.getPortAdjacentConnections(t);
-  }
-  getNodeIncomingConnections(t) {
-    return this.graphStore.getNodeIncomingConnections(t);
-  }
-  getNodeOutcomingConnections(t) {
-    return this.graphStore.getNodeOutcomingConnections(t);
-  }
-  getNodeCycleConnections(t) {
-    return this.graphStore.getNodeCycleConnections(t);
-  }
-  getNodeAdjacentConnections(t) {
-    return this.graphStore.getNodeAdjacentConnections(t);
-  }
-}
-class A {
-  constructor() {
-    r(this, "counter", 0);
-  }
-  next() {
-    const t = `${this.counter}`;
-    return this.counter++, t;
-  }
-  reset() {
-    this.counter = 0;
+  destroy() {
+    this.htmlController.destroy();
   }
 }
 class H {
-  constructor(t) {
+  constructor(t, e, o, s) {
     r(this, "htmlController");
     r(this, "viewportTransformer");
-    r(this, "publicViewportTransformer");
-    r(this, "controller");
     r(this, "graphStore");
+    r(this, "publicViewportTransformer");
     r(this, "publicGraphStore");
-    r(this, "nodeIdGenerator");
-    r(this, "portIdGenerator");
-    r(this, "connectionIdGenerator");
-    this.options = t, this.htmlController = new F(this), this.viewportTransformer = new W(), this.publicViewportTransformer = new D(
+    r(this, "canvasController");
+    this.viewportTransformer = new D(), this.publicViewportTransformer = new W(
       this.viewportTransformer
-    ), this.controller = new Y(this), this.graphStore = new X(), this.publicGraphStore = new Z(this.graphStore), this.nodeIdGenerator = new A(), this.portIdGenerator = new A(), this.connectionIdGenerator = new A();
+    ), this.graphStore = new R(), this.publicGraphStore = new z(this.graphStore), this.htmlController = new j(
+      this.graphStore,
+      this.viewportTransformer,
+      this.publicViewportTransformer,
+      t,
+      e
+    ), this.canvasController = new Z(
+      this.graphStore,
+      this.htmlController,
+      this.viewportTransformer,
+      o,
+      s
+    );
   }
 }
 const P = (n, t) => [
@@ -838,17 +840,18 @@ const P = (n, t) => [
   t / 2
 ], U = () => () => {
 }, q = (n, t, e, o, s, i) => {
-  n.fillStyle = i, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
-  const c = t.getViewCoords(0, 0), a = t.getViewScale(), h = o * a;
-  let l = 0, m = 0, d = h / 2;
+  n.clearRect(0, 0, n.canvas.width, n.canvas.height), n.save(), n.fillStyle = i, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
+  const h = t.getViewCoords(0, 0), a = t.getViewScale(), c = o * a;
+  let l = 0, g = 0, d = c / 2;
   do
-    d *= 2, l = n.canvas.width / d, m = n.canvas.height / d;
-  while (l * m > 1e4);
-  const g = c[0] - Math.floor(c[0] / d) * d, u = c[1] - Math.floor(c[1] / d) * d, p = s * a, f = 2 * Math.PI, y = g - d, b = u - d, S = n.canvas.width + g, N = n.canvas.height + u;
+    d *= 2, l = n.canvas.width / d, g = n.canvas.height / d;
+  while (l * g > 1e4);
+  const m = h[0] - Math.floor(h[0] / d) * d, u = h[1] - Math.floor(h[1] / d) * d, p = s * a, f = 2 * Math.PI, y = m - d, S = u - d, b = n.canvas.width + m, N = n.canvas.height + u;
   n.fillStyle = e;
-  for (let v = y; v <= S; v += d)
-    for (let w = b; w <= N; w += d)
-      n.beginPath(), n.arc(v, w, p, 0, f), n.closePath(), n.fill();
+  for (let C = y; C <= b; C += d)
+    for (let w = S; w <= N; w += d)
+      n.beginPath(), n.arc(C, w, p, 0, f), n.closePath(), n.fill();
+  n.restore();
 }, J = (n, t, e, o) => (s, i) => {
   q(
     s,
@@ -878,12 +881,12 @@ const P = (n, t) => [
     default:
       return U();
   }
-}, x = (n) => {
+}, O = (n) => {
   switch (n == null ? void 0 : n.type) {
     case "custom":
       return n.controllerFactory;
     case "straight":
-      return B({
+      return X({
         color: n.color ?? "#5c5c5c",
         width: n.width ?? 1,
         arrowLength: n.arrowLength ?? 15,
@@ -893,7 +896,7 @@ const P = (n, t) => [
         hasTargetArrow: n.hasTargetArrow ?? !1
       });
     default:
-      return z({
+      return B({
         color: n.color ?? "#5c5c5c",
         width: n.width ?? 1,
         curvature: n.curvature ?? 90,
@@ -918,7 +921,7 @@ const P = (n, t) => [
       centerFn: ((e = n.ports) == null ? void 0 : e.centerFn) ?? P
     },
     connections: {
-      controllerFactory: x(
+      controllerFactory: O(
         n.connections ?? {}
       )
     },
@@ -931,12 +934,19 @@ class tt {
   constructor(t) {
     r(this, "transformation");
     r(this, "model");
-    r(this, "options");
     r(this, "di");
-    this.apiOptions = t, this.options = I(this.apiOptions ?? {}), this.di = new H(this.options), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore;
+    r(this, "connectionControllerFactory");
+    this.apiOptions = t;
+    const e = I(this.apiOptions ?? {});
+    this.di = new H(
+      e.layers.mode,
+      e.background.drawingFn,
+      e.nodes.centerFn,
+      e.ports.centerFn
+    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.connectionControllerFactory = e.connections.controllerFactory;
   }
   addNode(t) {
-    return this.di.controller.addNode(
+    return this.di.canvasController.addNode(
       t.id,
       t.element,
       t.x,
@@ -946,13 +956,13 @@ class tt {
     ), this;
   }
   moveNodeOnTop(t) {
-    return this.di.controller.moveNodeOnTop(t), this;
+    return this.di.canvasController.moveNodeOnTop(t), this;
   }
   removeNode(t) {
-    return this.di.controller.removeNode(t), this;
+    return this.di.canvasController.removeNode(t), this;
   }
   markPort(t) {
-    return this.di.controller.markPort(
+    return this.di.canvasController.markPort(
       t.id,
       t.element,
       t.nodeId,
@@ -961,14 +971,14 @@ class tt {
     ), this;
   }
   updatePortConnections(t) {
-    return this.di.controller.updatePortConnections(t), this;
+    return this.di.canvasController.updatePortConnections(t), this;
   }
   unmarkPort(t) {
-    return this.di.controller.unmarkPort(t), this;
+    return this.di.canvasController.unmarkPort(t), this;
   }
   addConnection(t) {
-    const e = t.options !== void 0 ? x(t.options) : this.di.options.connections.controllerFactory;
-    return this.di.controller.addConnection(
+    const e = t.options !== void 0 ? O(t.options) : this.connectionControllerFactory;
+    return this.di.canvasController.addConnection(
       t.id,
       t.from,
       t.to,
@@ -976,48 +986,54 @@ class tt {
     ), this;
   }
   removeConnection(t) {
-    return this.di.controller.removeConnection(t), this;
+    return this.di.canvasController.removeConnection(t), this;
   }
-  patchViewportTransform(t) {
-    return this.di.controller.patchViewportTransform(
+  patchViewportState(t) {
+    return this.di.canvasController.patchViewportState(
       t.scale ?? null,
       t.x ?? null,
       t.y ?? null
     ), this;
   }
-  moveContent(t) {
-    return this.di.controller.moveContent(t.x ?? 0, t.y ?? 0), this;
+  moveViewport(t) {
+    return this.di.canvasController.moveViewport(
+      t.x ?? 0,
+      t.y ?? 0
+    ), this;
   }
-  scaleContent(t) {
-    return this.di.controller.scaleContent(
+  scaleViewport(t) {
+    return this.di.canvasController.scaleContent(
       t.scale,
       t.x ?? 0,
       t.y ?? 0
     ), this;
   }
   moveToNodes(t) {
-    return this.di.controller.moveToNodes(t), this;
+    return this.di.canvasController.moveToNodes(t), this;
   }
   updateNodeCoords(t, e, o) {
-    return this.di.controller.updateNodeCoords(t, e, o), this;
+    return this.di.canvasController.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionController(t, e) {
-    return this.di.controller.updateConnectionOptions(t, e), this;
+  updateConnection(t, e) {
+    return e.controller !== void 0 && this.di.canvasController.updateConnectionController(
+      t,
+      e.controller
+    ), this;
   }
   dragNode(t, e, o) {
-    return this.di.controller.dragNode(t, e, o), this;
+    return this.di.canvasController.dragNode(t, e, o), this;
   }
   clear() {
-    return this.di.controller.clear(), this;
+    return this.di.canvasController.clear(), this;
   }
   attach(t) {
-    return this.di.htmlController.attach(t), this;
+    return this.di.canvasController.attach(t), this;
   }
   detach() {
-    return this.di.htmlController.detach(), this;
+    return this.di.canvasController.detach(), this;
   }
   destroy() {
-    this.di.controller.destroy();
+    this.di.canvasController.destroy();
   }
 }
 class et {
@@ -1100,14 +1116,14 @@ class et {
   removeConnection(t) {
     return this.canvas.removeConnection(t), this;
   }
-  patchViewportTransform(t) {
-    return this.canvas.patchViewportTransform(t), this;
+  patchViewportState(t) {
+    return this.canvas.patchViewportState(t), this;
   }
-  moveContent(t) {
-    return this.canvas.moveContent(t), this;
+  moveViewport(t) {
+    return this.canvas.moveViewport(t), this;
   }
-  scaleContent(t) {
-    return this.canvas.scaleContent(t), this;
+  scaleViewport(t) {
+    return this.canvas.scaleViewport(t), this;
   }
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
@@ -1115,8 +1131,8 @@ class et {
   updateNodeCoords(t, e, o) {
     return this.canvas.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionController(t, e) {
-    return this.canvas.updateConnectionController(t, e), this;
+  updateConnection(t, e) {
+    return this.canvas.updateConnection(t, e), this;
   }
   dragNode(t, e, o) {
     return this.canvas.dragNode(t, e, o), this;
@@ -1130,7 +1146,7 @@ class et {
     }), this.nodes.clear(), this;
   }
   attach(t) {
-    return this.canvas.attach(t), this.element = t, t.addEventListener("mouseup", this.onCanvasMouseUp), t.addEventListener("mousemove", this.onCanvasMouseMove), t.addEventListener("touchstart", this.onCanvasTouchStart), t.addEventListener("touchmove", this.onCanvasTouchMove), t.addEventListener("touchend", this.onCanvasTouchEnd), t.addEventListener("touchcancel", this.onCanvasTouchEnd), this;
+    return this.canvas.attach(t), this.element = t, this.element.addEventListener("mouseup", this.onCanvasMouseUp), this.element.addEventListener("mousemove", this.onCanvasMouseMove), this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.element.addEventListener("touchmove", this.onCanvasTouchMove), this.element.addEventListener("touchend", this.onCanvasTouchEnd), this.element.addEventListener("touchcancel", this.onCanvasTouchEnd), this;
   }
   detach() {
     return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mouseup", this.onCanvasMouseUp), this.element.removeEventListener("mousemove", this.onCanvasMouseMove), this.element.removeEventListener("touchstart", this.onCanvasTouchStart), this.element.removeEventListener("touchmove", this.onCanvasTouchMove), this.element.removeEventListener("touchend", this.onCanvasTouchEnd), this.element.removeEventListener("touchcancel", this.onCanvasTouchEnd), this.element = null), this;
@@ -1160,7 +1176,7 @@ class ot {
       this.setCursor("grab"), this.isMoving = !0;
     });
     r(this, "onMouseMove", (t) => {
-      !this.isMoving || !this.isShiftable || this.canvas.moveContent({ x: t.movementX, y: t.movementY });
+      !this.isMoving || !this.isShiftable || this.canvas.moveViewport({ x: -t.movementX, y: -t.movementY });
     });
     r(this, "onMouseUp", () => {
       this.setCursor(null), this.isMoving = !1;
@@ -1169,8 +1185,8 @@ class ot {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: e, top: o } = this.element.getBoundingClientRect(), s = t.clientX - e, i = t.clientY - o, c = t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity, a = this.canvas.transformation.getViewScale() * c;
-      this.checkNextScaleValid(a) && this.canvas.scaleContent({ scale: c, x: s, y: i });
+      const { left: e, top: o } = this.element.getBoundingClientRect(), s = t.clientX - e, i = t.clientY - o, h = t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity, a = this.canvas.transformation.getViewScale() * h;
+      this.checkNextScaleValid(a) && this.canvas.scaleViewport({ scale: 1 / h, x: s, y: i });
     });
     r(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
@@ -1179,21 +1195,21 @@ class ot {
       if (this.prevTouches === null || this.element === null || !this.isShiftable)
         return;
       const e = this.getAverageTouch(t);
-      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.canvas.moveContent({
-        x: e.x - this.prevTouches.x,
-        y: e.y - this.prevTouches.y
+      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.canvas.moveViewport({
+        x: -(e.x - this.prevTouches.x),
+        y: -(e.y - this.prevTouches.y)
       }), e.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: s } = this.element.getBoundingClientRect(), i = this.prevTouches.x - o, c = this.prevTouches.y - s, a = e.scale / this.prevTouches.scale, h = this.canvas.transformation.getViewScale() * a;
-        this.checkNextScaleValid(h) && this.canvas.scaleContent({ scale: a, x: i, y: c });
+        const { left: o, top: s } = this.element.getBoundingClientRect(), i = this.prevTouches.x - o, h = this.prevTouches.y - s, a = e.scale / this.prevTouches.scale, c = this.canvas.transformation.getViewScale() * a;
+        this.checkNextScaleValid(c) && this.canvas.scaleViewport({ scale: 1 / a, x: i, y: h });
       }
       this.prevTouches = e, t.preventDefault();
     });
     r(this, "onTouchEnd", () => {
       this.prevTouches = null;
     });
-    var s, i, c, a, h, l, m, d, g, u;
-    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((i = (s = this.options) == null ? void 0 : s.scale) == null ? void 0 : i.enabled) !== !1, this.minContentScale = ((a = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : a.minContent) ?? null, this.maxContentScale = ((l = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : l.maxContent) ?? null, this.isShiftable = ((d = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : d.enabled) !== !1;
-    const o = (u = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : u.wheelSensitivity;
+    var s, i, h, a, c, l, g, d, m, u;
+    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((i = (s = this.options) == null ? void 0 : s.scale) == null ? void 0 : i.enabled) !== !1, this.minContentScale = ((a = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : a.minContent) ?? null, this.maxContentScale = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.maxContent) ?? null, this.isShiftable = ((d = (g = this.options) == null ? void 0 : g.shift) == null ? void 0 : d.enabled) !== !1;
+    const o = (u = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : u.wheelSensitivity;
     this.wheelSensitivity = o !== void 0 ? o : 1.2;
   }
   addNode(t) {
@@ -1217,14 +1233,14 @@ class ot {
   removeConnection(t) {
     return this.canvas.removeConnection(t), this;
   }
-  patchViewportTransform(t) {
-    return this.canvas.patchViewportTransform(t), this;
+  patchViewportState(t) {
+    return this.canvas.patchViewportState(t), this;
   }
-  moveContent(t) {
-    return this.canvas.moveContent(t), this;
+  moveViewport(t) {
+    return this.canvas.moveViewport(t), this;
   }
-  scaleContent(t) {
-    return this.canvas.scaleContent(t), this;
+  scaleViewport(t) {
+    return this.canvas.scaleViewport(t), this;
   }
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
@@ -1232,8 +1248,8 @@ class ot {
   updateNodeCoords(t, e, o) {
     return this.canvas.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionController(t, e) {
-    return this.canvas.updateConnectionController(t, e), this;
+  updateConnection(t, e) {
+    return this.canvas.updateConnection(t, e), this;
   }
   dragNode(t, e, o) {
     return this.canvas.dragNode(t, e, o), this;
@@ -1245,7 +1261,7 @@ class ot {
     return this.canvas.clear(), this;
   }
   attach(t) {
-    return this.canvas.attach(t), this.element = t, t.addEventListener("mousedown", this.onMouseDown), t.addEventListener("mousemove", this.onMouseMove), t.addEventListener("mouseup", this.onMouseUp), t.addEventListener("wheel", this.onWheelScroll), t.addEventListener("touchstart", this.onTouchStart), t.addEventListener("touchmove", this.onTouchMove), t.addEventListener("touchend", this.onTouchEnd), t.addEventListener("touchcancel", this.onTouchEnd), this;
+    return this.canvas.attach(t), this.element = t, this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("mousemove", this.onMouseMove), this.element.addEventListener("mouseup", this.onMouseUp), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.element.addEventListener("touchmove", this.onTouchMove), this.element.addEventListener("touchend", this.onTouchEnd), this.element.addEventListener("touchcancel", this.onTouchEnd), this;
   }
   detach() {
     return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("mousemove", this.onMouseMove), this.element.removeEventListener("mouseup", this.onMouseUp), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("touchmove", this.onTouchMove), this.element.removeEventListener("touchend", this.onTouchEnd), this.element.removeEventListener("touchcancel", this.onTouchEnd)), this.element = null, this;
@@ -1255,13 +1271,13 @@ class ot {
   }
   getAverageTouch(t) {
     const e = [], o = t.touches.length;
-    for (let h = 0; h < o; h++)
-      e.push([t.touches[h].clientX, t.touches[h].clientY]);
+    for (let c = 0; c < o; c++)
+      e.push([t.touches[c].clientX, t.touches[c].clientY]);
     const s = e.reduce(
-      (h, l) => [h[0] + l[0], h[1] + l[1]],
+      (c, l) => [c[0] + l[0], c[1] + l[1]],
       [0, 0]
-    ), i = [s[0] / o, s[1] / o], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
-      (h, l) => h + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
+    ), i = [s[0] / o, s[1] / o], a = e.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+      (c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
       0
     );
     return { x: i[0], y: i[1], scale: a / o, touchesCnt: o };
@@ -1296,13 +1312,14 @@ class st {
   }
 }
 export {
-  R as BezierConnectionController,
-  st as CanvasBuilder,
+  G as BezierConnectionController,
   tt as CanvasCore,
-  C as ConnectionUtils,
+  $ as ConnectionType,
+  v as ConnectionUtils,
   et as DraggableNodesCanvas,
-  G as StraightConnectionController,
+  st as HtmlGraphBuilder,
+  Y as StraightConnectionController,
   ot as TransformableCanvas,
-  z as createBezierConnectionControllerFactory,
-  B as createStraightConnectionControllerFactory
+  B as createBezierConnectionControllerFactory,
+  X as createStraightConnectionControllerFactory
 };