@html-graph/html-graph 0.0.59 → 0.0.60

package/dist/main.d.ts

@@ -134,6 +134,7 @@ export declare class CanvasCore implements Canvas {
     readonly model: PublicGraphStore;
     private readonly di;
     private readonly edgeShapeFactory;
+    private readonly nodeResizeObserverFactory;
     constructor(apiOptions?: CoreOptions | undefined);
     addNode(node: AddNodeRequest): CanvasCore;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): CanvasCore;

package/dist/main.js

@@ -242,13 +242,13 @@ const l = {
     const s = r.length - 1;
     let o = 0, i = 0, n = 0;
     r.forEach((h, c) => {
-      let d = 0, g = 0, w = 0;
+      let d = 0, u = 0, w = 0;
       const m = c > 0, y = c < s, v = m && y;
-      if (m && (d = -o, g = -i, w = n), y) {
+      if (m && (d = -o, u = -i, w = n), y) {
         const j = r[c + 1];
         o = j.x - h.x, i = j.y - h.y, n = Math.sqrt(o * o + i * i);
       }
-      const P = Math.min((v ? e : 0) / n, c < s - 1 ? 0.5 : 1), M = v ? { x: h.x + o * P, y: h.y + i * P } : h, T = Math.min((v ? e : 0) / w, c > 1 ? 0.5 : 1), W = v ? { x: h.x + d * T, y: h.y + g * T } : h;
+      const P = Math.min((v ? e : 0) / n, c < s - 1 ? 0.5 : 1), M = v ? { x: h.x + o * P, y: h.y + i * P } : h, T = Math.min((v ? e : 0) / w, c > 1 ? 0.5 : 1), W = v ? { x: h.x + d * T, y: h.y + u * T } : h;
       c > 0 && t.push(`L ${W.x} ${W.y}`), v && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${M.x} ${M.y}`
       );
@@ -314,8 +314,8 @@ class te {
     }, h = {
       x: i.x - s.x * this.curvature,
       y: i.y - s.y * this.curvature
-    }, c = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, g = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
-    return `${d}${c}${g}`;
+    }, c = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, u = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
+    return `${d}${c}${u}`;
   }
 }
 class re {
@@ -386,9 +386,9 @@ class se {
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.x + g.x) / 2, h), m = e.y / 2, y = { x: o > 0 ? w : -h, y: d.y }, v = { x: y.x, y: m }, S = { x: o > 0 ? e.x - w : e.x + h, y: g.y }, P = { x: S.x, y: m };
+    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), u = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.x + u.x) / 2, h), m = e.y / 2, y = { x: o > 0 ? w : -h, y: d.y }, v = { x: y.x, y: m }, S = { x: o > 0 ? e.x - w : e.x + h, y: u.y }, P = { x: S.x, y: m };
     return D(
-      [i, d, y, v, P, S, g, n],
+      [i, d, y, v, P, S, u, n],
       this.roundness
     );
   }
@@ -425,12 +425,12 @@ class oe {
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.y + g.y) / 2, h), m = e.x / 2, y = { x: d.x, y: o > 0 ? w : -h }, v = { x: m, y: y.y }, S = {
-      x: g.x,
+    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), u = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.y + u.y) / 2, h), m = e.x / 2, y = { x: d.x, y: o > 0 ? w : -h }, v = { x: m, y: y.y }, S = {
+      x: u.x,
       y: o > 0 ? e.y - w : e.y + h
     }, P = { x: m, y: S.y };
     return D(
-      [i, d, y, v, P, S, g, n],
+      [i, d, y, v, P, S, u, n],
       this.roundness
     );
   }
@@ -459,13 +459,13 @@ class ie {
       { x: this.arrowLength, y: l.y },
       { x: n, y: h },
       { x: n, y: -h }
-    ].map((m) => p(m, e, l)), g = [
+    ].map((m) => p(m, e, l)), u = [
       `M ${d[0].x} ${d[0].y}`,
       `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
       `A ${s} ${s} 0 1 0 ${d[2].x} ${d[2].y}`,
       `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
     ].join(" "), w = `M 0 0 L ${d[0].x} ${d[0].y} `;
-    return `${this.arrow !== null ? "" : w}${g}`;
+    return `${this.arrow !== null ? "" : w}${u}`;
   }
 }
 class B {
@@ -476,7 +476,7 @@ class B {
     a(this, "roundness");
     a(this, "linePoints");
     this.arrowLength = s, this.arrowWidth = o, this.side = n, this.minPortOffset = h, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = E(e), this.svg.appendChild(this.arrow));
-    const d = this.minPortOffset, g = this.side, w = this.arrowLength + d, m = w + 2 * g;
+    const d = this.minPortOffset, u = this.side, w = this.arrowLength + d, m = w + 2 * u;
     this.linePoints = [
       { x: this.arrowLength, y: l.y },
       { x: w, y: l.y },
@@ -541,20 +541,20 @@ class ne {
     }
   }
   createLinePath(e, t, s, o, i) {
-    const n = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, c = this.arrowLength, d = this.detourX * o, g = this.detourY * i, w = p(
+    const n = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, c = this.arrowLength, d = this.detourX * o, u = this.detourY * i, w = p(
       { x: c, y: l.y },
       t,
       l
     ), m = {
       x: w.x + d,
-      y: w.y + g
+      y: w.y + u
     }, y = p(
       { x: e.x - c, y: e.y },
       s,
       e
     ), v = {
       x: y.x + d,
-      y: y.y + g
+      y: y.y + u
     }, S = { x: (m.x + v.x) / 2, y: (m.y + v.y) / 2 }, P = {
       x: w.x + this.curvature * t.x,
       y: w.y + this.curvature * t.y
@@ -563,10 +563,10 @@ class ne {
       y: y.y - this.curvature * s.y
     }, b = {
       x: w.x + d,
-      y: w.y + g
+      y: w.y + u
     }, T = {
       x: y.x + d,
-      y: y.y + g
+      y: y.y + u
     };
     return [
       `M ${n.x} ${n.y}`,
@@ -578,7 +578,7 @@ class ne {
   }
 }
 class G {
-  constructor(e, t, s, o, i, n, h, c, d, g) {
+  constructor(e, t, s, o, i, n, h, c, d, u) {
     a(this, "svg", N());
     a(this, "group", $());
     a(this, "line");
@@ -586,7 +586,7 @@ class G {
     a(this, "targetArrow", null);
     a(this, "detourX");
     a(this, "detourY");
-    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.detourX = Math.cos(g) * d, this.detourY = Math.sin(g) * d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
+    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.detourX = Math.cos(u) * d, this.detourY = Math.sin(u) * d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
@@ -615,11 +615,11 @@ class G {
       { x: c, y: l.y },
       t,
       l
-    ), g = this.detourX * o, w = this.detourY * i, m = { x: d.x + g, y: d.y + w }, y = p(
+    ), u = this.detourX * o, w = this.detourY * i, m = { x: d.x + u, y: d.y + w }, y = p(
       { x: e.x - c, y: e.y },
       s,
       e
-    ), v = { x: y.x + g, y: y.y + w };
+    ), v = { x: y.x + u, y: y.y + w };
     return D(
       [n, d, m, v, y, h],
       this.roundness
@@ -933,15 +933,15 @@ class ye {
   }
 }
 class me {
-  constructor(e, t) {
+  constructor(e, t, s, o) {
     a(this, "canvasWrapper", null);
     a(this, "host", ue());
     a(this, "container", ge());
-    a(this, "nodesResizeObserver");
+    a(this, "nodeWrappersResizeObserver");
     a(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
     a(this, "nodeIdToWrapperElementMap", new ye());
     a(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    this.graphStore = e, this.viewportTransformer = t, this.host.appendChild(this.container), this.nodesResizeObserver = this.createNodesResizeObserver();
+    this.nodeResizeObserverFactory = e, this.getBoundingClientRect = t, this.graphStore = s, this.viewportTransformer = o, this.host.appendChild(this.container), this.nodeWrappersResizeObserver = this.createNodesResizeObserver();
   }
   attach(e) {
     this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host);
@@ -955,11 +955,11 @@ class me {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e), s = we();
-    s.appendChild(t.element), this.container.appendChild(s), this.nodeElementToIdMap.set(t.element, e), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoordinatesInternal(e), this.updateNodePriority(e), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
+    s.appendChild(t.element), this.container.appendChild(s), this.nodeElementToIdMap.set(t.element, e), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoordinatesInternal(e), this.updateNodePriority(e), this.nodeWrappersResizeObserver.observe(s), s.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e), s = this.nodeIdToWrapperElementMap.getByKey(e);
-    this.nodesResizeObserver.unobserve(s), s.removeChild(t.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(t.element), this.nodeIdToWrapperElementMap.deleteByKey(e);
+    this.nodeWrappersResizeObserver.unobserve(s), s.removeChild(t.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(t.element), this.nodeIdToWrapperElementMap.deleteByKey(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e);
@@ -977,7 +977,7 @@ class me {
     });
   }
   destroy() {
-    this.nodesResizeObserver.disconnect(), this.host.removeChild(this.container), this.clear(), this.detach();
+    this.nodeWrappersResizeObserver.disconnect(), this.host.removeChild(this.container), this.clear(), this.detach();
   }
   updateNodeCoordinates(e) {
     const t = this.graphStore.getNodeAdjacentEdgeIds(e);
@@ -1005,7 +1005,7 @@ class me {
     });
   }
   createNodesResizeObserver() {
-    return new ResizeObserver((e) => {
+    return this.nodeResizeObserverFactory((e) => {
       e.forEach((t) => {
         const s = t.target, o = this.nodeIdToWrapperElementMap.getByValue(s);
         this.updateNodeCoordinatesInternal(o), this.graphStore.getNodeAdjacentEdgeIds(o).forEach((n) => {
@@ -1015,14 +1015,14 @@ class me {
     });
   }
   updateNodeCoordinatesInternal(e) {
-    const t = this.nodeIdToWrapperElementMap.getByKey(e), { width: s, height: o } = t.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(e), { x: h, y: c } = n.centerFn(s, o), d = n.x - i * h, g = n.y - i * c;
-    t.style.transform = `matrix(1, 0, 0, 1, ${d}, ${g})`;
+    const t = this.nodeIdToWrapperElementMap.getByKey(e), { width: s, height: o } = this.getBoundingClientRect.call(t), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(e), { x: h, y: c } = n.centerFn(s, o), d = n.x - i * h, u = n.y - i * c;
+    t.style.transform = `translate(${d}px, ${u}px)`;
   }
   updateEdgeCoordinates(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), i = s.element.getBoundingClientRect(), n = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), d = {
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), i = this.getBoundingClientRect.call(s.element), n = this.getBoundingClientRect.call(o.element), h = this.getBoundingClientRect.call(this.host), c = this.viewportTransformer.getViewportMatrix(), d = {
       x: c.scale * (i.left - h.left) + c.dx,
       y: c.scale * (i.top - h.top) + c.dy
-    }, g = {
+    }, u = {
       x: c.scale * (n.left - h.left) + c.dx,
       y: c.scale * (n.top - h.top) + c.dy
     }, w = s.centerFn(
@@ -1035,8 +1035,8 @@ class me {
       x: d.x + w.x,
       y: d.y + w.y
     }, v = {
-      x: g.x + m.x,
-      y: g.y + m.y
+      x: u.x + m.x,
+      y: u.y + m.y
     }, S = Math.min(y.x, v.x), P = Math.min(y.y, v.y), M = Math.abs(v.x - y.x), b = Math.abs(v.y - y.y);
     t.shape.svg.style.width = `${M}px`, t.shape.svg.style.height = `${b}px`, t.shape.svg.style.transform = `translate(${S}px, ${P}px)`;
     const T = y.x <= v.x ? 1 : -1, W = y.y <= v.y ? 1 : -1;
@@ -1050,31 +1050,36 @@ class me {
   }
 }
 class pe {
-  constructor(e, t, s, o, i) {
+  constructor(e, t, s, o, i, n, h) {
     a(this, "publicViewportTransformer");
     a(this, "publicGraphStore");
     a(this, "canvasController");
-    const n = new Q(), h = new q();
-    this.publicGraphStore = new ee(h), this.publicViewportTransformer = new Z(
-      n
+    const c = new Q(), d = new q();
+    this.publicGraphStore = new ee(d), this.publicViewportTransformer = new Z(
+      c
     );
-    const c = new me(h, n);
-    this.canvasController = new le(
-      h,
-      c,
-      n,
+    const u = new me(
       e,
       t,
+      d,
+      c
+    );
+    this.canvasController = new le(
+      d,
+      u,
+      c,
       s,
       o,
-      i
+      i,
+      n,
+      h
     );
   }
 }
 const H = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), u = {
+}), g = {
   edgeColor: "#5c5c5c",
   edgeWidth: 1,
   edgeArrowLength: 15,
@@ -1088,68 +1093,68 @@ const H = (r, e) => ({
   detourDirection: -Math.PI / 2,
   smallCycleSize: 15,
   curvature: 90
-}, R = (r) => {
+}, k = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.factory;
     case "straight":
       return he({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+        color: r.color ?? g.edgeColor,
+        width: r.width ?? g.edgeWidth,
+        arrowLength: r.arrowLength ?? g.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
+        roundness: r.roundness ?? g.roundness,
+        detourDistance: r.detourDistance ?? g.detourDistance,
+        detourDirection: r.detourDirection ?? g.detourDirection
       });
     case "horizontal":
       return de({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+        color: r.color ?? g.edgeColor,
+        width: r.width ?? g.edgeWidth,
+        arrowLength: r.arrowLength ?? g.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
+        roundness: r.roundness ?? g.roundness,
+        detourDistance: r.detourDistance ?? g.detourDistance,
+        detourDirection: r.detourDirection ?? g.detourDirection
       });
     case "vertical":
       return ce({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
-        roundness: r.roundness ?? u.roundness,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection
+        color: r.color ?? g.edgeColor,
+        width: r.width ?? g.edgeWidth,
+        arrowLength: r.arrowLength ?? g.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? g.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? g.cycleSize,
+        roundness: r.roundness ?? g.roundness,
+        detourDistance: r.detourDistance ?? g.detourDistance,
+        detourDirection: r.detourDirection ?? g.detourDirection
       });
     default:
       return ae({
-        color: r.color ?? u.edgeColor,
-        width: r.width ?? u.edgeWidth,
-        arrowLength: r.arrowLength ?? u.edgeArrowLength,
-        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
-        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
-        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
-        cycleRadius: r.cycleRadius ?? u.cycleSize,
-        detourDistance: r.detourDistance ?? u.detourDistance,
-        detourDirection: r.detourDirection ?? u.detourDirection,
-        smallCycleRadius: r.smallCycleRadius ?? u.smallCycleSize,
-        curvature: r.curvature ?? u.curvature
+        color: r.color ?? g.edgeColor,
+        width: r.width ?? g.edgeWidth,
+        arrowLength: r.arrowLength ?? g.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? g.edgeArrowWidth,
+        hasSourceArrow: r.hasSourceArrow ?? g.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? g.hasTargetArrow,
+        cycleRadius: r.cycleRadius ?? g.cycleSize,
+        detourDistance: r.detourDistance ?? g.detourDistance,
+        detourDirection: r.detourDirection ?? g.detourDirection,
+        smallCycleRadius: r.smallCycleRadius ?? g.smallCycleSize,
+        curvature: r.curvature ?? g.curvature
       });
   }
-}, z = (r) => () => r, U = z(0), k = () => {
+}, z = (r) => () => r, U = z(0), R = () => {
   let r = 0;
   return () => r++;
 }, ve = (r, e) => {
@@ -1157,8 +1162,8 @@ const H = (r, e) => ({
     U,
     U
   ];
-  r === "incremental" && (t[0] = k()), e === "incremental" && (t[1] = k());
-  const s = k();
+  r === "incremental" && (t[0] = R()), e === "incremental" && (t[1] = R());
+  const s = R();
   return r === "shared-incremental" && (t[0] = s), e === "shared-incremental" && (t[1] = s), typeof r == "number" && (t[0] = z(r)), typeof e == "number" && (t[1] = z(e)), typeof r == "function" && (t[0] = r), typeof e == "function" && (t[1] = e), t;
 }, fe = (r) => {
   var s, o, i, n, h, c;
@@ -1176,7 +1181,7 @@ const H = (r, e) => ({
       direction: ((h = r.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: R(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
+      shapeFactory: k(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
       priorityFn: t
     }
   };
@@ -1187,9 +1192,12 @@ class xe {
     a(this, "model");
     a(this, "di");
     a(this, "edgeShapeFactory");
+    a(this, "nodeResizeObserverFactory", (e) => new window.ResizeObserver(e));
     this.apiOptions = e;
     const t = fe(this.apiOptions ?? {});
     this.di = new pe(
+      this.nodeResizeObserverFactory,
+      Element.prototype.getBoundingClientRect,
       t.nodes.centerFn,
       t.ports.centerFn,
       t.ports.direction,
@@ -1240,7 +1248,7 @@ class xe {
     return this.di.canvasController.unmarkPort(e), this;
   }
   addEdge(e) {
-    const t = e.shape !== void 0 ? R(e.shape) : this.edgeShapeFactory;
+    const t = e.shape !== void 0 ? k(e.shape) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
       e.id,
       e.from,
@@ -1250,7 +1258,7 @@ class xe {
     ), this;
   }
   updateEdge(e, t) {
-    const s = t.shape !== void 0 ? R(t.shape) : void 0;
+    const s = t.shape !== void 0 ? k(t.shape) : void 0;
     return this.di.canvasController.updateEdge(e, s, t.priority), this;
   }
   removeEdge(e) {
@@ -1283,10 +1291,10 @@ class xe {
     this.di.canvasController.destroy();
   }
 }
-const V = (r, e, t) => {
+const O = (r, e, t) => {
   const { x: s, y: o, width: i, height: n } = r.getBoundingClientRect();
   return e >= s && e < s + i && t >= o && t <= o + n;
-}, O = (r, e, t) => e >= 0 && e < r.innerWidth && t >= 0 && t <= r.innerHeight, I = (r, e) => {
+}, V = (r, e, t) => e >= 0 && e < r.innerWidth && t >= 0 && t <= r.innerHeight, I = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 };
 class Ee {
@@ -1306,7 +1314,7 @@ class Ee {
       this.cancelMouseDrag();
     });
     a(this, "onCanvasMouseMove", (e) => {
-      if (this.element !== null && (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY))) {
+      if (this.element !== null && (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
@@ -1321,7 +1329,7 @@ class Ee {
     a(this, "onCanvasTouchMove", (e) => {
       if (e.touches.length === 1) {
         const t = e.touches[0];
-        if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !O(this.window, t.clientX, t.clientY))) {
+        if (this.element !== null && (!O(this.element, t.clientX, t.clientY) || !V(this.window, t.clientX, t.clientY))) {
           this.cancelTouchDrag();
           return;
         }
@@ -1432,7 +1440,7 @@ class Ee {
     const o = this.model.getNode(e);
     if (o === null)
       throw new C("failed to drag nonexisting node");
-    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, h = i.scale * o.y + i.dy, c = n + t, d = h + s, g = this.canvas.transformation.getViewportMatrix(), w = g.scale * c + g.dx, m = g.scale * d + g.dy;
+    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, h = i.scale * o.y + i.dy, c = n + t, d = h + s, u = this.canvas.transformation.getViewportMatrix(), w = u.scale * c + u.dx, m = u.scale * d + u.dy;
     this.canvas.updateNode(e, { x: w, y: m }), this.onNodeDrag({
       nodeId: e,
       element: o.element,
@@ -1473,8 +1481,8 @@ const Ce = () => {
 }, Pe = (r, e, t, s) => (o, i, n, h) => {
   let c = i.dx, d = i.dy;
   r !== null && c < r && c < o.dx && (c = o.dx);
-  const g = n * o.scale;
-  e !== null && c > e - g && c > o.dx && (c = o.dx), t !== null && d < t && d < o.dy && (d = o.dy);
+  const u = n * o.scale;
+  e !== null && c > e - u && c > o.dx && (c = o.dx), t !== null && d < t && d < o.dy && (d = o.dy);
   const w = h * o.scale;
   return s !== null && d > s - w && d > o.dy && (d = o.dy), { scale: i.scale, dx: c, dy: d };
 }, K = (r) => {
@@ -1516,7 +1524,7 @@ class Ne {
     a(this, "onMouseMove", (e) => {
       if (!this.isShiftable || this.element === null)
         return;
-      if (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY)) {
+      if (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1541,7 +1549,7 @@ class Ne {
         return;
       const t = this.getAverageTouch(e);
       if (!t.touches.every(
-        (o) => V(this.element, o[0], o[1]) && O(this.window, o[0], o[1])
+        (o) => O(this.element, o[0], o[1]) && V(this.window, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1570,9 +1578,9 @@ class Ne {
       }
     }));
     a(this, "shiftCursor");
-    var i, n, h, c, d, g, w, m;
+    var i, n, h, c, d, u, w, m;
     this.canvas = e, this.options = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((n = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : n.enabled) !== !1, this.isShiftable = ((c = (h = this.options) == null ? void 0 : h.shift) == null ? void 0 : c.enabled) !== !1;
-    const s = (g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.wheelSensitivity;
+    const s = (u = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : u.wheelSensitivity;
     this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((w = t == null ? void 0 : t.events) == null ? void 0 : w.onTransformFinished) ?? Ce;
     const o = t == null ? void 0 : t.transformPreprocessor;
     o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = Me(

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(m,x){typeof exports=="object"&&typeof module<"u"?x(exports):typeof define=="function"&&define.amd?define(["exports"],x):(m=typeof globalThis<"u"?globalThis:m||self,x(m.HTMLGraph={}))})(this,function(m){"use strict";var Le=Object.defineProperty;var Te=(m,x,$)=>x in m?Le(m,x,{enumerable:!0,configurable:!0,writable:!0,value:$}):m[x]=$;var a=(m,x,$)=>Te(m,typeof x!="symbol"?x+"":x,$);const x=r=>({scale:1/r.scale,dx:-r.dx/r.scale,dy:-r.dy/r.scale}),$={scale:1,dx:0,dy:0};class ce{constructor(){a(this,"viewportMatrix",$);a(this,"contentMatrix",$)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e,t,s){this.viewportMatrix={scale:e??this.viewportMatrix.scale,dx:t??this.viewportMatrix.dx,dy:s??this.viewportMatrix.dy},this.contentMatrix=x(this.viewportMatrix)}patchContentMatrix(e,t,s){this.contentMatrix={scale:e??this.contentMatrix.scale,dx:t??this.contentMatrix.dx,dy:s??this.contentMatrix.dy},this.viewportMatrix=x(this.contentMatrix)}}class de{constructor(e){this.transformer=e}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class le{constructor(){a(this,"nodes",new Map);a(this,"ports",new Map);a(this,"nodePorts",new Map);a(this,"portNodeId",new Map);a(this,"edges",new Map);a(this,"incommingEdges",new Map);a(this,"outcommingEdges",new Map);a(this,"cycleEdges",new Map)}addNode(e,t,s,o,i,n){this.nodes.set(e,{element:t,x:s,y:o,centerFn:i,priority:n}),this.nodePorts.set(e,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}removeNode(e){this.nodes.delete(e),this.nodePorts.delete(e)}addPort(e,t,s,o,i){this.ports.set(e,{element:t,centerFn:o,direction:i}),this.cycleEdges.set(e,new Set),this.incommingEdges.set(e,new Set),this.outcommingEdges.set(e,new Set),this.portNodeId.set(e,s),this.nodePorts.get(s).set(e,t)}getPort(e){return this.ports.get(e)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(e){const t=this.nodePorts.get(e);if(t!==void 0)return Array.from(t.keys())}getPortNodeId(e){return this.portNodeId.get(e)}removePort(e){const t=this.portNodeId.get(e);this.portNodeId.delete(e),this.nodePorts.get(t).delete(e),this.ports.delete(e)}addEdge(e,t,s,o,i){this.edges.set(e,{from:t,to:s,shape:o,priority:i}),t!==s?(this.outcommingEdges.get(t).add(e),this.incommingEdges.get(s).add(e)):this.cycleEdges.get(t).add(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){const t=this.edges.get(e),s=t.from,o=t.to;this.cycleEdges.get(s).delete(e),this.cycleEdges.get(o).delete(e),this.incommingEdges.get(s).delete(e),this.incommingEdges.get(o).delete(e),this.outcommingEdges.get(s).delete(e),this.outcommingEdges.get(o).delete(e),this.edges.delete(e)}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdgeIds(e){return Array.from(this.incommingEdges.get(e))}getPortOutcomingEdgeIds(e){return Array.from(this.outcommingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortIncomingEdgeIds(o)]}),s}getNodeOutcomingEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortOutcomingEdgeIds(o)]}),s}getNodeCycleEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortCycleEdgeIds(o)]}),s}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}}class ue{constructor(e){this.graphStore=e}getNode(e){const t=this.graphStore.getNode(e);return t===void 0?null:{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const t=this.graphStore.getPort(e);return t===void 0?null:{element:t.element,centerFn:t.centerFn,direction:t.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)}getPortNodeId(e){return this.graphStore.getPortNodeId(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const t=this.graphStore.getEdge(e);return t===void 0?null:{from:t.from,to:t.to,priority:t.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNodeAdjacentEdgeIds(e)}}const l={x:0,y:0},v=(r,e,t)=>({x:e.x*r.x-e.y*r.y+((1-e.x)*t.x+e.y*t.y),y:e.y*r.x+e.x*r.y+((1-e.x)*t.y-e.y*t.x)}),E=(r,e,t)=>({x:e*Math.cos(r),y:t*Math.sin(r)}),C=(r,e,t,s)=>{const i=[l,{x:t,y:s},{x:t,y:-s}].map(d=>v(d,r,l)).map(d=>({x:d.x+e.x,y:d.y+e.y})),n=`M ${i[0].x} ${i[0].y}`,h=`L ${i[1].x} ${i[1].y}`,c=`L ${i[2].x} ${i[2].y}`;return`${n} ${h} ${c}`},V=(r,e)=>{const t=[];if(r.length>0&&t.push(`M ${r[0].x} ${r[0].y}`),r.length===2&&t.push(`L ${r[1].x} ${r[1].y}`),r.length>2){const s=r.length-1;let o=0,i=0,n=0;r.forEach((h,c)=>{let d=0,g=0,w=0;const p=c>0,y=c<s,f=p&&y;if(p&&(d=-o,g=-i,w=n),y){const he=r[c+1];o=he.x-h.x,i=he.y-h.y,n=Math.sqrt(o*o+i*i)}const N=Math.min((f?e:0)/n,c<s-1?.5:1),b=f?{x:h.x+o*N,y:h.y+i*N}:h,D=Math.min((f?e:0)/w,c>1?.5:1),G=f?{x:h.x+d*D,y:h.y+g*D}:h;c>0&&t.push(`L ${G.x} ${G.y}`),f&&t.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`)})}return t.join(" ")},L=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.style.pointerEvents="none",r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.overflow="visible",r},W=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.transformOrigin="50% 50%",r},T=(r,e)=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke",r),t.setAttribute("stroke-width",`${e}`),t.setAttribute("fill","none"),t},A=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",r),e};class X{constructor(e,t,s,o,i,n,h){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s){const o=v({x:this.arrowLength,y:l.y},t,l),i=v({x:e.x-this.arrowLength,y:e.y},s,e),n={x:o.x+t.x*this.curvature,y:o.y+t.y*this.curvature},h={x:i.x-s.x*this.curvature,y:i.y-s.y*this.curvature},c=`M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`,d=this.sourceArrow?"":`M ${l.x} ${l.y} L ${o.x} ${o.y} `,g=this.targetArrow?"":` M ${i.x} ${i.y} L ${e.x} ${e.y}`;return`${d}${c}${g}`}}class U{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s){const o=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,i=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,n=this.arrowLength+this.arrowOffset,h=v({x:n,y:l.y},t,l),c=v({x:e.x-n,y:e.y},s,e);return V([o,h,c,i],this.roundness)}}class K{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o){const i=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,n=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,h=this.arrowLength+this.arrowOffset,c=h-this.roundness,d=v({x:c,y:l.y},t,l),g=v({x:e.x-c,y:e.y},s,e),w=Math.max((d.x+g.x)/2,h),p=e.y/2,y={x:o>0?w:-h,y:d.y},f={x:y.x,y:p},M={x:o>0?e.x-w:e.x+h,y:g.y},N={x:M.x,y:p};return V([i,d,y,f,N,M,g,n],this.roundness)}}class _{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o){const i=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,n=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,h=this.arrowLength+this.arrowOffset,c=h-this.roundness,d=v({x:c,y:l.y},t,l),g=v({x:e.x-c,y:e.y},s,e),w=Math.max((d.y+g.y)/2,h),p=e.x/2,y={x:d.x,y:o>0?w:-h},f={x:p,y:y.y},M={x:g.x,y:o>0?e.y-w:e.y+h},N={x:p,y:M.y};return V([i,d,y,f,N,M,g,n],this.roundness)}}class J{constructor(e,t,s,o,i,n,h){a(this,"svg",L());a(this,"line");a(this,"arrow",null);this.arrowLength=s,this.arrowWidth=o,this.radius=n,this.smallRadius=h,this.line=T(e,t),this.svg.appendChild(this.line),i&&(this.arrow=A(e),this.svg.appendChild(this.arrow))}update(e,t,s,o){const i=E(o,t,s),n=this.createLinePath(i);if(this.line.setAttribute("d",n),this.arrow){const h=C(i,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",h)}}createLinePath(e){const t=this.smallRadius,s=this.radius,o=Math.sqrt(t*t+s*s),i=t+s,n=this.arrowLength+o*(1-s/i),h=t*s/i,d=[{x:this.arrowLength,y:l.y},{x:n,y:h},{x:n,y:-h}].map(p=>v(p,e,l)),g=[`M ${d[0].x} ${d[0].y}`,`A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,`A ${s} ${s} 0 1 0 ${d[2].x} ${d[2].y}`,`A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`].join(" "),w=`M 0 0 L ${d[0].x} ${d[0].y} `;return`${this.arrow!==null?"":w}${g}`}}class O{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"line");a(this,"arrow",null);a(this,"roundness");a(this,"linePoints");this.arrowLength=s,this.arrowWidth=o,this.side=n,this.minPortOffset=h,this.roundness=Math.min(c,this.minPortOffset,this.side/2),this.line=T(e,t),this.svg.appendChild(this.line),i&&(this.arrow=A(e),this.svg.appendChild(this.arrow));const d=this.minPortOffset,g=this.side,w=this.arrowLength+d,p=w+2*g;this.linePoints=[{x:this.arrowLength,y:l.y},{x:w,y:l.y},{x:w,y:this.side},{x:p,y:this.side},{x:p,y:-this.side},{x:w,y:-this.side},{x:w,y:l.y},{x:this.arrowLength,y:l.y}]}update(e,t,s,o){const i=E(o,t,s),n=this.createLinePath(i);if(this.line.setAttribute("d",n),this.arrow){const h=C(i,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",h)}}createLinePath(e){const t=this.linePoints.map(o=>v(o,e,l)),s=`M ${l.x} ${l.y} L ${t[0].x} ${t[0].y} `;return`${this.arrow?"":s}${V(t,this.roundness)}`}}class Q{constructor(e,t,s,o,i,n,h,c,d){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(d)*c,this.detourY=Math.sin(d)*c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o,i){const n=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,c=this.arrowLength,d=this.detourX*o,g=this.detourY*i,w=v({x:c,y:l.y},t,l),p={x:w.x+d,y:w.y+g},y=v({x:e.x-c,y:e.y},s,e),f={x:y.x+d,y:y.y+g},M={x:(p.x+f.x)/2,y:(p.y+f.y)/2},N={x:w.x+this.curvature*t.x,y:w.y+this.curvature*t.y},b={x:y.x-this.curvature*s.x,y:y.y-this.curvature*s.y},F={x:w.x+d,y:w.y+g},D={x:y.x+d,y:y.y+g};return[`M ${n.x} ${n.y}`,`L ${w.x} ${w.y}`,`C ${N.x} ${N.y} ${F.x} ${F.y} ${M.x} ${M.y}`,`C ${D.x} ${D.y} ${b.x} ${b.y} ${y.x} ${y.y}`,`L ${h.x} ${h.y}`].join(" ")}}class I{constructor(e,t,s,o,i,n,h,c,d,g){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.detourX=Math.cos(g)*d,this.detourY=Math.sin(g)*d,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o,i){const n=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,c=this.arrowLength+this.arrowOffset,d=v({x:c,y:l.y},t,l),g=this.detourX*o,w=this.detourY*i,p={x:d.x+g,y:d.y+w},y=v({x:e.x-c,y:e.y},s,e),f={x:y.x+g,y:y.y+w};return V([n,d,p,f,y,h],this.roundness)}}var P=(r=>(r.Regular="regular",r.PortCycle="port-cycle",r.NodeCycle="node-cycle",r))(P||{});const Z=r=>e=>e===P.PortCycle?new J(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleRadius,r.smallCycleRadius):e===P.NodeCycle?new Q(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow,r.detourDistance,r.detourDirection):new X(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow),q=r=>e=>e===P.PortCycle?new O(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new U(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),ee=r=>e=>e===P.PortCycle?new O(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new _(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),te=r=>e=>e===P.PortCycle?new O(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new K(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness);class k{constructor(e){a(this,"counter",0);this.checkExists=e}create(e){if(e!==void 0)return e;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class S extends Error{constructor(){super(...arguments);a(this,"name","HtmlGraphError")}}class ge{constructor(e,t,s,o,i,n,h,c){a(this,"nodeIdGenerator",new k(e=>this.graphStore.getNode(e)!==void 0));a(this,"portIdGenerator",new k(e=>this.graphStore.getPort(e)!==void 0));a(this,"edgeIdGenerator",new k(e=>this.graphStore.getEdge(e)!==void 0));this.graphStore=e,this.htmlController=t,this.viewportTransformer=s,this.defaultNodesCenterFn=o,this.defaultPortsCenterFn=i,this.defaultPortsDirection=n,this.defaultNodesPriorityFn=h,this.defaultEdgesPriorityFn=c}addNode(e,t,s,o,i,n,h){if(e=this.nodeIdGenerator.create(e),this.graphStore.getNode(e)!==void 0)throw new S("failed to add node with existing id");this.graphStore.addNode(e,t,s,o,n??this.defaultNodesCenterFn,h??this.defaultNodesPriorityFn()),this.htmlController.attachNode(e),Array.from(i??[]).forEach(c=>{this.markPort(c.id,c.element,e,c.centerFn??this.defaultPortsCenterFn,c.direction??this.defaultPortsDirection)})}updateNode(e,t,s,o,i){const n=this.graphStore.getNode(e);if(n===void 0)throw new S("failed to update nonexisting node");n.x=t??n.x,n.y=s??n.y,n.centerFn=i??n.centerFn,this.htmlController.updateNodeCoordinates(e),o!==void 0&&(n.priority=o,this.htmlController.updateNodePriority(e))}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new S("failed to remove nonexisting node");(this.graphStore.getNodePortIds(e)??[]).forEach(t=>{this.unmarkPort(t)}),this.htmlController.detachNode(e),this.graphStore.removeNode(e)}markPort(e,t,s,o,i){if(e=this.portIdGenerator.create(e),this.graphStore.getNode(s)===void 0)throw new S("failed to set port on nonexisting node");if(this.graphStore.getPort(e)!==void 0)throw new S("failed to add port with existing id");this.graphStore.addPort(e,t,s,o??this.defaultPortsCenterFn,i??this.defaultPortsDirection)}updatePort(e,t,s){const o=this.graphStore.getPort(e);if(o===void 0)throw new S("failed to unset nonexisting port");o.direction=t??o.direction,o.centerFn=s??o.centerFn,this.htmlController.updatePortEdges(e)}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new S("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(e).forEach(t=>{this.removeEdge(t)}),this.graphStore.removePort(e)}addEdge(e,t,s,o,i){if(e=this.edgeIdGenerator.create(e),this.graphStore.getPort(t)===void 0)throw new S("failed to add edge from nonexisting port");if(this.graphStore.getPort(s)===void 0)throw new S("failed to add edge to nonexisting port");if(this.graphStore.getEdge(e)!==void 0)throw new S("failed to add edge with existing id");const n=this.resolveEdgeType(t,s);this.graphStore.addEdge(e,t,s,o(n),i??this.defaultEdgesPriorityFn()),this.htmlController.attachEdge(e)}updateEdge(e,t,s){const o=this.graphStore.getEdge(e);if(o===void 0)throw new S("failed to update nonexisting edge");if(t!==void 0){const i=this.resolveEdgeType(o.from,o.to);o.shape=t(i),this.htmlController.updateEdgeShape(e)}s!==void 0&&(o.priority=s,this.htmlController.updateEdgePriority(e))}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new S("failed to remove nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.removeEdge(e)}patchViewportMatrix(e,t,s){this.viewportTransformer.patchViewportMatrix(e,t,s),this.htmlController.applyTransform()}patchContentMatrix(e,t,s){this.viewportTransformer.patchContentMatrix(e,t,s),this.htmlController.applyTransform()}attach(e){this.htmlController.attach(e)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.htmlController.destroy()}resolveEdgeType(e,t){if(e===t)return P.PortCycle;const s=this.graphStore.getPortNodeId(e),o=this.graphStore.getPortNodeId(t);return s===o?P.NodeCycle:P.Regular}}const we=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r.style.overflow="hidden",r},ye=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="0",r.style.height="0",r},me=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.visibility="hidden",r};class pe{constructor(){a(this,"keyMap",new Map);a(this,"valueMap",new Map)}set(e,t){this.keyMap.set(e,t),this.valueMap.set(t,e)}getByKey(e){return this.keyMap.get(e)}getByValue(e){return this.valueMap.get(e)}deleteByKey(e){const t=this.keyMap.get(e);t!==void 0&&this.valueMap.delete(t),this.keyMap.delete(e)}deleteByValue(e){const t=this.valueMap.get(e);t!==void 0&&this.keyMap.delete(t),this.valueMap.delete(e)}forEach(e){this.keyMap.forEach((t,s)=>{e(t,s)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class ve{constructor(e,t){a(this,"canvasWrapper",null);a(this,"host",we());a(this,"container",ye());a(this,"nodesResizeObserver");a(this,"nodeElementToIdMap",new Map);a(this,"nodeIdToWrapperElementMap",new pe);a(this,"edgeIdToElementMap",new Map);this.graphStore=e,this.viewportTransformer=t,this.host.appendChild(this.container),this.nodesResizeObserver=this.createNodesResizeObserver()}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const e=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.dx}, ${e.dy})`}attachNode(e){const t=this.graphStore.getNode(e),s=me();s.appendChild(t.element),this.container.appendChild(s),this.nodeElementToIdMap.set(t.element,e),this.nodeIdToWrapperElementMap.set(e,s),this.updateNodeCoordinatesInternal(e),this.updateNodePriority(e),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);this.nodesResizeObserver.unobserve(s),s.removeChild(t.element),this.container.removeChild(s),this.nodeElementToIdMap.delete(t.element),this.nodeIdToWrapperElementMap.deleteByKey(e)}attachEdge(e){const t=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,t.shape.svg),this.container.appendChild(t.shape.svg),this.updateEdgeCoordinates(e),this.updateEdgePriority(e)}detachEdge(e){const t=this.graphStore.getEdge(e);this.container.removeChild(t.shape.svg),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,t)=>{this.detachEdge(t)}),this.nodeIdToWrapperElementMap.forEach((e,t)=>{this.detachNode(t)})}destroy(){this.nodesResizeObserver.disconnect(),this.host.removeChild(this.container),this.clear(),this.detach()}updateNodeCoordinates(e){const t=this.graphStore.getNodeAdjacentEdgeIds(e);this.updateNodeCoordinatesInternal(e),t.forEach(s=>{this.updateEdgeCoordinates(s)})}updateNodePriority(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);s.style.zIndex=`${t.priority}`}updateEdgeShape(e){const t=this.edgeIdToElementMap.get(e);this.container.removeChild(t);const s=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,s.shape.svg),this.container.appendChild(s.shape.svg),this.updateEdgeCoordinates(e),this.updateEdgePriority(e)}updateEdgePriority(e){const t=this.graphStore.getEdge(e);t.shape.svg.style.zIndex=`${t.priority}`}updatePortEdges(e){this.graphStore.getPortAdjacentEdgeIds(e).forEach(s=>{this.updateEdgeCoordinates(s)})}createNodesResizeObserver(){return new ResizeObserver(e=>{e.forEach(t=>{const s=t.target,o=this.nodeIdToWrapperElementMap.getByValue(s);this.updateNodeCoordinatesInternal(o),this.graphStore.getNodeAdjacentEdgeIds(o).forEach(n=>{this.updateEdgeCoordinates(n)})})})}updateNodeCoordinatesInternal(e){const t=this.nodeIdToWrapperElementMap.getByKey(e),{width:s,height:o}=t.getBoundingClientRect(),i=this.viewportTransformer.getViewportMatrix().scale,n=this.graphStore.getNode(e),{x:h,y:c}=n.centerFn(s,o),d=n.x-i*h,g=n.y-i*c;t.style.transform=`matrix(1, 0, 0, 1, ${d}, ${g})`}updateEdgeCoordinates(e){const t=this.graphStore.getEdge(e),s=this.graphStore.getPort(t.from),o=this.graphStore.getPort(t.to),i=s.element.getBoundingClientRect(),n=o.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),c=this.viewportTransformer.getViewportMatrix(),d={x:c.scale*(i.left-h.left)+c.dx,y:c.scale*(i.top-h.top)+c.dy},g={x:c.scale*(n.left-h.left)+c.dx,y:c.scale*(n.top-h.top)+c.dy},w=s.centerFn(i.width*c.scale,i.height*c.scale),p=o.centerFn(n.width*c.scale,n.height*c.scale),y={x:d.x+w.x,y:d.y+w.y},f={x:g.x+p.x,y:g.y+p.y},M=Math.min(y.x,f.x),N=Math.min(y.y,f.y),b=Math.abs(f.x-y.x),F=Math.abs(f.y-y.y);t.shape.svg.style.width=`${b}px`,t.shape.svg.style.height=`${F}px`,t.shape.svg.style.transform=`translate(${M}px, ${N}px)`;const D=y.x<=f.x?1:-1,G=y.y<=f.y?1:-1;t.shape.update({x:b,y:F},D,G,s.direction,o.direction)}}class fe{constructor(e,t,s,o,i){a(this,"publicViewportTransformer");a(this,"publicGraphStore");a(this,"canvasController");const n=new ce,h=new le;this.publicGraphStore=new ue(h),this.publicViewportTransformer=new de(n);const c=new ve(h,n);this.canvasController=new ge(h,c,n,e,t,s,o,i)}}const re=(r,e)=>({x:r/2,y:e/2}),u={edgeColor:"#5c5c5c",edgeWidth:1,edgeArrowLength:15,edgeArrowWidth:4,edgeArrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleSize:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,smallCycleSize:15,curvature:90},j=r=>{switch(r==null?void 0:r.type){case"custom":return r.factory;case"straight":return q({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});case"horizontal":return te({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});case"vertical":return ee({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});default:return Z({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleRadius:r.cycleRadius??u.cycleSize,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection,smallCycleRadius:r.smallCycleRadius??u.smallCycleSize,curvature:r.curvature??u.curvature})}},H=r=>()=>r,se=H(0),Y=()=>{let r=0;return()=>r++},xe=(r,e)=>{const t=[se,se];r==="incremental"&&(t[0]=Y()),e==="incremental"&&(t[1]=Y());const s=Y();return r==="shared-incremental"&&(t[0]=s),e==="shared-incremental"&&(t[1]=s),typeof r=="number"&&(t[0]=H(r)),typeof e=="number"&&(t[1]=H(e)),typeof r=="function"&&(t[0]=r),typeof e=="function"&&(t[1]=e),t},Ee=r=>{var s,o,i,n,h,c;const[e,t]=xe((s=r.nodes)==null?void 0:s.priority,(o=r.edges)==null?void 0:o.priority);return{nodes:{centerFn:((i=r.nodes)==null?void 0:i.centerFn)??re,priorityFn:e},ports:{centerFn:((n=r.ports)==null?void 0:n.centerFn)??re,direction:((h=r.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:j(((c=r.edges)==null?void 0:c.shape)??{}),priorityFn:t}}};class oe{constructor(e){a(this,"transformation");a(this,"model");a(this,"di");a(this,"edgeShapeFactory");this.apiOptions=e;const t=Ee(this.apiOptions??{});this.di=new fe(t.nodes.centerFn,t.ports.centerFn,t.ports.direction,t.nodes.priorityFn,t.edges.priorityFn),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore,this.edgeShapeFactory=t.edges.shapeFactory}addNode(e){return this.di.canvasController.addNode(e.id,e.element,e.x,e.y,e.ports,e.centerFn,e.priority),this}updateNode(e,t){return this.di.canvasController.updateNode(e,t.x,t.y,t.priority,t.centerFn),this}removeNode(e){return this.di.canvasController.removeNode(e),this}markPort(e){return this.di.canvasController.markPort(e.id,e.element,e.nodeId,e.centerFn,e.direction),this}updatePort(e,t){return this.di.canvasController.updatePort(e,t==null?void 0:t.direction,t==null?void 0:t.centerFn),this}unmarkPort(e){return this.di.canvasController.unmarkPort(e),this}addEdge(e){const t=e.shape!==void 0?j(e.shape):this.edgeShapeFactory;return this.di.canvasController.addEdge(e.id,e.from,e.to,t,e.priority),this}updateEdge(e,t){const s=t.shape!==void 0?j(t.shape):void 0;return this.di.canvasController.updateEdge(e,s,t.priority),this}removeEdge(e){return this.di.canvasController.removeEdge(e),this}patchViewportMatrix(e){return this.di.canvasController.patchViewportMatrix(e.scale??null,e.dx??null,e.dy??null),this}patchContentMatrix(e){return this.di.canvasController.patchContentMatrix(e.scale??null,e.dx??null,e.dy??null),this}clear(){return this.di.canvasController.clear(),this}attach(e){return this.di.canvasController.attach(e),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}const z=(r,e,t)=>{const{x:s,y:o,width:i,height:n}=r.getBoundingClientRect();return e>=s&&e<s+i&&t>=o&&t<=o+n},B=(r,e,t)=>e>=0&&e<r.innerWidth&&t>=0&&t<=r.innerHeight,R=(r,e)=>{e!==null?r.style.cursor=e:r.style.removeProperty("cursor")};class ie{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"maxNodePriority",0);a(this,"nodes",new Map);a(this,"grabbedNodeId",null);a(this,"onNodeDrag");a(this,"onBeforeNodeDrag");a(this,"nodeIdGenerator",new k(e=>this.nodes.has(e)));a(this,"element",null);a(this,"onCanvasMouseUp",()=>{this.cancelMouseDrag()});a(this,"onCanvasMouseMove",e=>{if(this.element!==null&&(!z(this.element,e.clientX,e.clientY)||!B(this.window,e.clientX,e.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});a(this,"onCanvasTouchStart",e=>{this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]});a(this,"onCanvasTouchMove",e=>{if(e.touches.length===1){const t=e.touches[0];if(this.element!==null&&(!z(this.element,t.clientX,t.clientY)||!B(this.window,t.clientX,t.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){e.stopImmediatePropagation();const s=t.clientX-this.previousTouchCoords[0],o=t.clientY-this.previousTouchCoords[1];this.dragNode(this.grabbedNodeId,s,o),this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]}}});a(this,"onCanvasTouchEnd",e=>{e.touches.length>0?this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]:this.cancelTouchDrag()});a(this,"previousTouchCoords",null);a(this,"freezePriority");a(this,"window",window);a(this,"dragCursor");var i,n;this.canvas=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model;const s=()=>{};this.onNodeDrag=((i=t==null?void 0:t.events)==null?void 0:i.onNodeDrag)??s;const o=()=>!0;this.onBeforeNodeDrag=((n=t==null?void 0:t.events)==null?void 0:n.onBeforeNodeDrag)??o,this.freezePriority=(t==null?void 0:t.grabPriorityStrategy)==="freeze",this.dragCursor=(t==null?void 0:t.dragCursor)!==void 0?t.dragCursor:"grab"}addNode(e){const t=this.nodeIdGenerator.create(e.id);this.canvas.addNode({...e,id:t}),this.updateMaxNodePriority(t);const s=i=>{if(this.element===null)return;const n=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:n.x,y:n.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=t,R(this.element,this.dragCursor),this.moveNodeOnTop(t),this.window.addEventListener("mouseup",this.onCanvasMouseUp),this.window.addEventListener("mousemove",this.onCanvasMouseMove))},o=i=>{const n=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:n.x,y:n.y})&&i.touches.length===1&&(this.grabbedNodeId=t,this.moveNodeOnTop(t),this.window.addEventListener("touchmove",this.onCanvasTouchMove),this.window.addEventListener("touchend",this.onCanvasTouchEnd),this.window.addEventListener("touchcancel",this.onCanvasTouchEnd))};return this.nodes.set(t,{element:e.element,onMouseDown:s,onTouchStart:o}),e.element.addEventListener("mousedown",s),e.element.addEventListener("touchstart",o),this}updateNode(e,t){return this.canvas.updateNode(e,t),this.updateMaxNodePriority(e),this}removeNode(e){const t=this.nodes.get(e);return t!==void 0&&(t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)),this.canvas.removeNode(e),this.nodes.delete(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,t){return this.canvas.updatePort(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}attach(e){return this.detach(),this.element=e,this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}dragNode(e,t,s){const o=this.model.getNode(e);if(o===null)throw new S("failed to drag nonexisting node");const i=this.canvas.transformation.getContentMatrix(),n=i.scale*o.x+i.dx,h=i.scale*o.y+i.dy,c=n+t,d=h+s,g=this.canvas.transformation.getViewportMatrix(),w=g.scale*c+g.dx,p=g.scale*d+g.dy;this.canvas.updateNode(e,{x:w,y:p}),this.onNodeDrag({nodeId:e,element:o.element,x:o.x,y:o.y})}updateMaxNodePriority(e){const t=this.model.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,t)}moveNodeOnTop(e){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const t=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(e).forEach(o=>{this.updateEdge(o,{priority:t})})}cancelMouseDrag(){this.grabbedNodeId=null,this.element!==null&&R(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onCanvasMouseUp),this.window.removeEventListener("mousemove",this.onCanvasMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null,this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onCanvasTouchMove),this.window.removeEventListener("touchend",this.onCanvasTouchEnd),this.window.removeEventListener("touchcancel",this.onCanvasTouchEnd)}}const Ce=()=>{},Ae=(r,e)=>e,Se=(r,e)=>{const t=e!==null?1/e:null,s=r!==null?1/r:null;return(o,i)=>s!==null&&i.scale>s&&i.scale>o.scale||t!==null&&i.scale<t&&i.scale<o.scale?o:i},Pe=(r,e,t,s)=>(o,i,n,h)=>{let c=i.dx,d=i.dy;r!==null&&c<r&&c<o.dx&&(c=o.dx);const g=n*o.scale;e!==null&&c>e-g&&c>o.dx&&(c=o.dx),t!==null&&d<t&&d<o.dy&&(d=o.dy);const w=h*o.scale;return s!==null&&d>s-w&&d>o.dy&&(d=o.dy),{scale:i.scale,dx:c,dy:d}},ne=r=>{switch(r.type){case"scale-limit":return Se(r.minContentScale??null,r.maxContentScale??null);case"shift-limit":return Pe(r.minX??null,r.maxX??null,r.minY??null,r.maxY??null);default:return r.preprocessorFn}},Me=r=>(e,t,s,o)=>r.reduce((i,n)=>n(e,i,s,o),t);class ae{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"element",null);a(this,"prevTouches",null);a(this,"onTransformFinished");a(this,"transformPreprocessor");a(this,"isScalable");a(this,"isShiftable");a(this,"wheelSensitivity");a(this,"window",window);a(this,"onMouseDown",()=>{this.element!==null&&(R(this.element,this.shiftCursor),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseup",this.onMouseUp))});a(this,"onMouseMove",e=>{if(!this.isShiftable||this.element===null)return;if(!z(this.element,e.clientX,e.clientY)||!B(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const t=-e.movementX,s=-e.movementY;this.moveViewport(t,s)});a(this,"onMouseUp",()=>{this.stopMouseDrag()});a(this,"onWheelScroll",e=>{if(this.element===null||this.isScalable===!1)return;e.preventDefault();const{left:t,top:s}=this.element.getBoundingClientRect(),o=e.clientX-t,i=e.clientY-s,h=1/(e.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(h,o,i)});a(this,"onTouchStart",e=>{this.prevTouches=this.getAverageTouch(e),this.window.addEventListener("touchmove",this.onTouchMove),this.window.addEventListener("touchend",this.onTouchEnd),this.window.addEventListener("touchcancel",this.onTouchEnd)});a(this,"onTouchMove",e=>{if(this.prevTouches===null||!this.isShiftable||this.element===null)return;const t=this.getAverageTouch(e);if(!t.touches.every(o=>z(this.element,o[0],o[1])&&B(this.window,o[0],o[1]))){this.stopTouchDrag();return}if((t.touchesCnt===1||t.touchesCnt===2)&&this.moveViewport(-(t.x-this.prevTouches.x),-(t.y-this.prevTouches.y)),t.touchesCnt===2&&this.isScalable){const{left:o,top:i}=this.element.getBoundingClientRect(),n=this.prevTouches.x-o,h=this.prevTouches.y-i,d=1/(t.scale/this.prevTouches.scale);this.scaleViewport(d,n,h)}this.prevTouches=t});a(this,"onTouchEnd",e=>{e.touches.length>0?this.prevTouches=this.getAverageTouch(e):this.stopTouchDrag()});a(this,"observer",new ResizeObserver(()=>{if(this.element!==null){const e=this.canvas.transformation.getViewportMatrix(),{width:t,height:s}=this.element.getBoundingClientRect(),o=this.transformPreprocessor(e,e,t,s);this.canvas.patchViewportMatrix(o),this.onTransformFinished()}}));a(this,"shiftCursor");var i,n,h,c,d,g,w,p;this.canvas=e,this.options=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((n=(i=this.options)==null?void 0:i.scale)==null?void 0:n.enabled)!==!1,this.isShiftable=((c=(h=this.options)==null?void 0:h.shift)==null?void 0:c.enabled)!==!1;const s=(g=(d=this.options)==null?void 0:d.scale)==null?void 0:g.wheelSensitivity;this.wheelSensitivity=s!==void 0?s:1.2,this.onTransformFinished=((w=t==null?void 0:t.events)==null?void 0:w.onTransformFinished)??Ce;const o=t==null?void 0:t.transformPreprocessor;o!==void 0?Array.isArray(o)?this.transformPreprocessor=Me(o.map(y=>ne(y))):this.transformPreprocessor=ne(o):this.transformPreprocessor=Ae,this.shiftCursor=((p=t==null?void 0:t.shift)==null?void 0:p.cursor)!==void 0?t.shift.cursor:"grab"}addNode(e){return this.canvas.addNode(e),this}updateNode(e,t){return this.canvas.updateNode(e,t),this}removeNode(e){return this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,t){return this.canvas.updatePort(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this}attach(e){return this.detach(),this.element=e,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}getAverageTouch(e){const t=[],s=e.touches.length;for(let c=0;c<s;c++)t.push([e.touches[c].clientX,e.touches[c].clientY]);const o=t.reduce((c,d)=>[c[0]+d[0],c[1]+d[1]],[0,0]),i=[o[0]/s,o[1]/s],h=t.map(c=>[c[0]-i[0],c[1]-i[1]]).reduce((c,d)=>c+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:i[0],y:i[1],scale:h/s,touchesCnt:s,touches:t}}moveViewport(e,t){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,dx:s.dx+s.scale*e,dy:s.dy+s.scale*t};if(this.element!==null){const{width:i,height:n}=this.element.getBoundingClientRect(),h=this.transformPreprocessor(s,o,i,n);this.canvas.patchViewportMatrix(h),this.onTransformFinished()}}scaleViewport(e,t,s){if(this.element===null)return;const o=this.canvas.transformation.getViewportMatrix(),i={scale:o.scale*e,dx:o.scale*(1-e)*t+o.dx,dy:o.scale*(1-e)*s+o.dy},{width:n,height:h}=this.element.getBoundingClientRect(),c=this.transformPreprocessor(o,i,n,h);this.canvas.patchViewportMatrix(c),this.onTransformFinished()}stopMouseDrag(){this.element!==null&&R(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseup",this.onMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onTouchMove),this.window.removeEventListener("touchend",this.onTouchEnd),this.window.removeEventListener("touchcancel",this.onTouchEnd)}}class Ne{constructor(){a(this,"coreOptions");a(this,"dragOptions");a(this,"transformOptions");a(this,"isDraggable",!1);a(this,"isTransformable",!1)}setOptions(e){return this.coreOptions=e,this}setUserDraggableNodes(e){return this.isDraggable=!0,this.dragOptions=e,this}setUserTransformableCanvas(e){return this.isTransformable=!0,this.transformOptions=e,this}build(){let e=new oe(this.coreOptions);return this.isDraggable&&(e=new ie(e,this.dragOptions)),this.isTransformable&&(e=new ae(e,this.transformOptions)),e}}m.BezierEdgeShape=X,m.CanvasCore=oe,m.CycleCircleEdgeShape=J,m.CycleSquareEdgeShape=O,m.DetourBezierEdgeShape=Q,m.DetourStraightEdgeShape=I,m.EdgeType=P,m.HorizontalEdgeShape=K,m.HtmlGraphBuilder=Ne,m.HtmlGraphError=S,m.StraightEdgeShape=U,m.UserDraggableNodesCanvas=ie,m.UserTransformableCanvas=ae,m.VerticalEdgeShape=_,m.createBezierEdgeShapeFactory=Z,m.createHorizontalEdgeShapeFactory=te,m.createStraightEdgeShareFactory=q,m.createVerticalEdgeShapeFactory=ee,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(m,x){typeof exports=="object"&&typeof module<"u"?x(exports):typeof define=="function"&&define.amd?define(["exports"],x):(m=typeof globalThis<"u"?globalThis:m||self,x(m.HTMLGraph={}))})(this,function(m){"use strict";var Le=Object.defineProperty;var Te=(m,x,$)=>x in m?Le(m,x,{enumerable:!0,configurable:!0,writable:!0,value:$}):m[x]=$;var a=(m,x,$)=>Te(m,typeof x!="symbol"?x+"":x,$);const x=r=>({scale:1/r.scale,dx:-r.dx/r.scale,dy:-r.dy/r.scale}),$={scale:1,dx:0,dy:0};class ce{constructor(){a(this,"viewportMatrix",$);a(this,"contentMatrix",$)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e,t,s){this.viewportMatrix={scale:e??this.viewportMatrix.scale,dx:t??this.viewportMatrix.dx,dy:s??this.viewportMatrix.dy},this.contentMatrix=x(this.viewportMatrix)}patchContentMatrix(e,t,s){this.contentMatrix={scale:e??this.contentMatrix.scale,dx:t??this.contentMatrix.dx,dy:s??this.contentMatrix.dy},this.viewportMatrix=x(this.contentMatrix)}}class de{constructor(e){this.transformer=e}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class le{constructor(){a(this,"nodes",new Map);a(this,"ports",new Map);a(this,"nodePorts",new Map);a(this,"portNodeId",new Map);a(this,"edges",new Map);a(this,"incommingEdges",new Map);a(this,"outcommingEdges",new Map);a(this,"cycleEdges",new Map)}addNode(e,t,s,o,i,n){this.nodes.set(e,{element:t,x:s,y:o,centerFn:i,priority:n}),this.nodePorts.set(e,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}removeNode(e){this.nodes.delete(e),this.nodePorts.delete(e)}addPort(e,t,s,o,i){this.ports.set(e,{element:t,centerFn:o,direction:i}),this.cycleEdges.set(e,new Set),this.incommingEdges.set(e,new Set),this.outcommingEdges.set(e,new Set),this.portNodeId.set(e,s),this.nodePorts.get(s).set(e,t)}getPort(e){return this.ports.get(e)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(e){const t=this.nodePorts.get(e);if(t!==void 0)return Array.from(t.keys())}getPortNodeId(e){return this.portNodeId.get(e)}removePort(e){const t=this.portNodeId.get(e);this.portNodeId.delete(e),this.nodePorts.get(t).delete(e),this.ports.delete(e)}addEdge(e,t,s,o,i){this.edges.set(e,{from:t,to:s,shape:o,priority:i}),t!==s?(this.outcommingEdges.get(t).add(e),this.incommingEdges.get(s).add(e)):this.cycleEdges.get(t).add(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){const t=this.edges.get(e),s=t.from,o=t.to;this.cycleEdges.get(s).delete(e),this.cycleEdges.get(o).delete(e),this.incommingEdges.get(s).delete(e),this.incommingEdges.get(o).delete(e),this.outcommingEdges.get(s).delete(e),this.outcommingEdges.get(o).delete(e),this.edges.delete(e)}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdgeIds(e){return Array.from(this.incommingEdges.get(e))}getPortOutcomingEdgeIds(e){return Array.from(this.outcommingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortIncomingEdgeIds(o)]}),s}getNodeOutcomingEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortOutcomingEdgeIds(o)]}),s}getNodeCycleEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(o=>{s=[...s,...this.getPortCycleEdgeIds(o)]}),s}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}}class ue{constructor(e){this.graphStore=e}getNode(e){const t=this.graphStore.getNode(e);return t===void 0?null:{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const t=this.graphStore.getPort(e);return t===void 0?null:{element:t.element,centerFn:t.centerFn,direction:t.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)}getPortNodeId(e){return this.graphStore.getPortNodeId(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const t=this.graphStore.getEdge(e);return t===void 0?null:{from:t.from,to:t.to,priority:t.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNodeAdjacentEdgeIds(e)}}const l={x:0,y:0},v=(r,e,t)=>({x:e.x*r.x-e.y*r.y+((1-e.x)*t.x+e.y*t.y),y:e.y*r.x+e.x*r.y+((1-e.x)*t.y-e.y*t.x)}),E=(r,e,t)=>({x:e*Math.cos(r),y:t*Math.sin(r)}),C=(r,e,t,s)=>{const i=[l,{x:t,y:s},{x:t,y:-s}].map(d=>v(d,r,l)).map(d=>({x:d.x+e.x,y:d.y+e.y})),n=`M ${i[0].x} ${i[0].y}`,h=`L ${i[1].x} ${i[1].y}`,c=`L ${i[2].x} ${i[2].y}`;return`${n} ${h} ${c}`},O=(r,e)=>{const t=[];if(r.length>0&&t.push(`M ${r[0].x} ${r[0].y}`),r.length===2&&t.push(`L ${r[1].x} ${r[1].y}`),r.length>2){const s=r.length-1;let o=0,i=0,n=0;r.forEach((h,c)=>{let d=0,g=0,w=0;const p=c>0,y=c<s,f=p&&y;if(p&&(d=-o,g=-i,w=n),y){const he=r[c+1];o=he.x-h.x,i=he.y-h.y,n=Math.sqrt(o*o+i*i)}const N=Math.min((f?e:0)/n,c<s-1?.5:1),b=f?{x:h.x+o*N,y:h.y+i*N}:h,D=Math.min((f?e:0)/w,c>1?.5:1),G=f?{x:h.x+d*D,y:h.y+g*D}:h;c>0&&t.push(`L ${G.x} ${G.y}`),f&&t.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`)})}return t.join(" ")},L=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.style.pointerEvents="none",r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.overflow="visible",r},W=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.transformOrigin="50% 50%",r},T=(r,e)=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke",r),t.setAttribute("stroke-width",`${e}`),t.setAttribute("fill","none"),t},A=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",r),e};class X{constructor(e,t,s,o,i,n,h){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s){const o=v({x:this.arrowLength,y:l.y},t,l),i=v({x:e.x-this.arrowLength,y:e.y},s,e),n={x:o.x+t.x*this.curvature,y:o.y+t.y*this.curvature},h={x:i.x-s.x*this.curvature,y:i.y-s.y*this.curvature},c=`M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`,d=this.sourceArrow?"":`M ${l.x} ${l.y} L ${o.x} ${o.y} `,g=this.targetArrow?"":` M ${i.x} ${i.y} L ${e.x} ${e.y}`;return`${d}${c}${g}`}}class U{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s){const o=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,i=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,n=this.arrowLength+this.arrowOffset,h=v({x:n,y:l.y},t,l),c=v({x:e.x-n,y:e.y},s,e);return O([o,h,c,i],this.roundness)}}class K{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o){const i=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,n=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,h=this.arrowLength+this.arrowOffset,c=h-this.roundness,d=v({x:c,y:l.y},t,l),g=v({x:e.x-c,y:e.y},s,e),w=Math.max((d.x+g.x)/2,h),p=e.y/2,y={x:o>0?w:-h,y:d.y},f={x:y.x,y:p},M={x:o>0?e.x-w:e.x+h,y:g.y},N={x:M.x,y:p};return O([i,d,y,f,N,M,g,n],this.roundness)}}class _{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o){const i=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,n=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,h=this.arrowLength+this.arrowOffset,c=h-this.roundness,d=v({x:c,y:l.y},t,l),g=v({x:e.x-c,y:e.y},s,e),w=Math.max((d.y+g.y)/2,h),p=e.x/2,y={x:d.x,y:o>0?w:-h},f={x:p,y:y.y},M={x:g.x,y:o>0?e.y-w:e.y+h},N={x:p,y:M.y};return O([i,d,y,f,N,M,g,n],this.roundness)}}class J{constructor(e,t,s,o,i,n,h){a(this,"svg",L());a(this,"line");a(this,"arrow",null);this.arrowLength=s,this.arrowWidth=o,this.radius=n,this.smallRadius=h,this.line=T(e,t),this.svg.appendChild(this.line),i&&(this.arrow=A(e),this.svg.appendChild(this.arrow))}update(e,t,s,o){const i=E(o,t,s),n=this.createLinePath(i);if(this.line.setAttribute("d",n),this.arrow){const h=C(i,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",h)}}createLinePath(e){const t=this.smallRadius,s=this.radius,o=Math.sqrt(t*t+s*s),i=t+s,n=this.arrowLength+o*(1-s/i),h=t*s/i,d=[{x:this.arrowLength,y:l.y},{x:n,y:h},{x:n,y:-h}].map(p=>v(p,e,l)),g=[`M ${d[0].x} ${d[0].y}`,`A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,`A ${s} ${s} 0 1 0 ${d[2].x} ${d[2].y}`,`A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`].join(" "),w=`M 0 0 L ${d[0].x} ${d[0].y} `;return`${this.arrow!==null?"":w}${g}`}}class V{constructor(e,t,s,o,i,n,h,c){a(this,"svg",L());a(this,"line");a(this,"arrow",null);a(this,"roundness");a(this,"linePoints");this.arrowLength=s,this.arrowWidth=o,this.side=n,this.minPortOffset=h,this.roundness=Math.min(c,this.minPortOffset,this.side/2),this.line=T(e,t),this.svg.appendChild(this.line),i&&(this.arrow=A(e),this.svg.appendChild(this.arrow));const d=this.minPortOffset,g=this.side,w=this.arrowLength+d,p=w+2*g;this.linePoints=[{x:this.arrowLength,y:l.y},{x:w,y:l.y},{x:w,y:this.side},{x:p,y:this.side},{x:p,y:-this.side},{x:w,y:-this.side},{x:w,y:l.y},{x:this.arrowLength,y:l.y}]}update(e,t,s,o){const i=E(o,t,s),n=this.createLinePath(i);if(this.line.setAttribute("d",n),this.arrow){const h=C(i,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",h)}}createLinePath(e){const t=this.linePoints.map(o=>v(o,e,l)),s=`M ${l.x} ${l.y} L ${t[0].x} ${t[0].y} `;return`${this.arrow?"":s}${O(t,this.roundness)}`}}class Q{constructor(e,t,s,o,i,n,h,c,d){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(d)*c,this.detourY=Math.sin(d)*c,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o,i){const n=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,c=this.arrowLength,d=this.detourX*o,g=this.detourY*i,w=v({x:c,y:l.y},t,l),p={x:w.x+d,y:w.y+g},y=v({x:e.x-c,y:e.y},s,e),f={x:y.x+d,y:y.y+g},M={x:(p.x+f.x)/2,y:(p.y+f.y)/2},N={x:w.x+this.curvature*t.x,y:w.y+this.curvature*t.y},b={x:y.x-this.curvature*s.x,y:y.y-this.curvature*s.y},F={x:w.x+d,y:w.y+g},D={x:y.x+d,y:y.y+g};return[`M ${n.x} ${n.y}`,`L ${w.x} ${w.y}`,`C ${N.x} ${N.y} ${F.x} ${F.y} ${M.x} ${M.y}`,`C ${D.x} ${D.y} ${b.x} ${b.y} ${y.x} ${y.y}`,`L ${h.x} ${h.y}`].join(" ")}}class I{constructor(e,t,s,o,i,n,h,c,d,g){a(this,"svg",L());a(this,"group",W());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=c,this.detourX=Math.cos(g)*d,this.detourY=Math.sin(g)*d,this.svg.appendChild(this.group),this.line=T(e,t),this.group.appendChild(this.line),n&&(this.sourceArrow=A(e),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=A(e),this.group.appendChild(this.targetArrow))}update(e,t,s,o,i){this.group.style.transform=`scale(${t}, ${s})`;const n=E(o,t,s),h=E(i,t,s),c=this.createLinePath(e,n,h,t,s);if(this.line.setAttribute("d",c),this.sourceArrow){const d=C(n,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",d)}if(this.targetArrow){const d=C(h,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",d)}}createLinePath(e,t,s,o,i){const n=this.sourceArrow?v({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?v({x:e.x-this.arrowLength,y:e.y},s,e):e,c=this.arrowLength+this.arrowOffset,d=v({x:c,y:l.y},t,l),g=this.detourX*o,w=this.detourY*i,p={x:d.x+g,y:d.y+w},y=v({x:e.x-c,y:e.y},s,e),f={x:y.x+g,y:y.y+w};return O([n,d,p,f,y,h],this.roundness)}}var P=(r=>(r.Regular="regular",r.PortCycle="port-cycle",r.NodeCycle="node-cycle",r))(P||{});const Z=r=>e=>e===P.PortCycle?new J(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleRadius,r.smallCycleRadius):e===P.NodeCycle?new Q(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow,r.detourDistance,r.detourDirection):new X(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow),q=r=>e=>e===P.PortCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new U(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),ee=r=>e=>e===P.PortCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new _(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),te=r=>e=>e===P.PortCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===P.NodeCycle?new I(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new K(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness);class R{constructor(e){a(this,"counter",0);this.checkExists=e}create(e){if(e!==void 0)return e;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class S extends Error{constructor(){super(...arguments);a(this,"name","HtmlGraphError")}}class ge{constructor(e,t,s,o,i,n,h,c){a(this,"nodeIdGenerator",new R(e=>this.graphStore.getNode(e)!==void 0));a(this,"portIdGenerator",new R(e=>this.graphStore.getPort(e)!==void 0));a(this,"edgeIdGenerator",new R(e=>this.graphStore.getEdge(e)!==void 0));this.graphStore=e,this.htmlController=t,this.viewportTransformer=s,this.defaultNodesCenterFn=o,this.defaultPortsCenterFn=i,this.defaultPortsDirection=n,this.defaultNodesPriorityFn=h,this.defaultEdgesPriorityFn=c}addNode(e,t,s,o,i,n,h){if(e=this.nodeIdGenerator.create(e),this.graphStore.getNode(e)!==void 0)throw new S("failed to add node with existing id");this.graphStore.addNode(e,t,s,o,n??this.defaultNodesCenterFn,h??this.defaultNodesPriorityFn()),this.htmlController.attachNode(e),Array.from(i??[]).forEach(c=>{this.markPort(c.id,c.element,e,c.centerFn??this.defaultPortsCenterFn,c.direction??this.defaultPortsDirection)})}updateNode(e,t,s,o,i){const n=this.graphStore.getNode(e);if(n===void 0)throw new S("failed to update nonexisting node");n.x=t??n.x,n.y=s??n.y,n.centerFn=i??n.centerFn,this.htmlController.updateNodeCoordinates(e),o!==void 0&&(n.priority=o,this.htmlController.updateNodePriority(e))}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new S("failed to remove nonexisting node");(this.graphStore.getNodePortIds(e)??[]).forEach(t=>{this.unmarkPort(t)}),this.htmlController.detachNode(e),this.graphStore.removeNode(e)}markPort(e,t,s,o,i){if(e=this.portIdGenerator.create(e),this.graphStore.getNode(s)===void 0)throw new S("failed to set port on nonexisting node");if(this.graphStore.getPort(e)!==void 0)throw new S("failed to add port with existing id");this.graphStore.addPort(e,t,s,o??this.defaultPortsCenterFn,i??this.defaultPortsDirection)}updatePort(e,t,s){const o=this.graphStore.getPort(e);if(o===void 0)throw new S("failed to unset nonexisting port");o.direction=t??o.direction,o.centerFn=s??o.centerFn,this.htmlController.updatePortEdges(e)}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new S("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(e).forEach(t=>{this.removeEdge(t)}),this.graphStore.removePort(e)}addEdge(e,t,s,o,i){if(e=this.edgeIdGenerator.create(e),this.graphStore.getPort(t)===void 0)throw new S("failed to add edge from nonexisting port");if(this.graphStore.getPort(s)===void 0)throw new S("failed to add edge to nonexisting port");if(this.graphStore.getEdge(e)!==void 0)throw new S("failed to add edge with existing id");const n=this.resolveEdgeType(t,s);this.graphStore.addEdge(e,t,s,o(n),i??this.defaultEdgesPriorityFn()),this.htmlController.attachEdge(e)}updateEdge(e,t,s){const o=this.graphStore.getEdge(e);if(o===void 0)throw new S("failed to update nonexisting edge");if(t!==void 0){const i=this.resolveEdgeType(o.from,o.to);o.shape=t(i),this.htmlController.updateEdgeShape(e)}s!==void 0&&(o.priority=s,this.htmlController.updateEdgePriority(e))}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new S("failed to remove nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.removeEdge(e)}patchViewportMatrix(e,t,s){this.viewportTransformer.patchViewportMatrix(e,t,s),this.htmlController.applyTransform()}patchContentMatrix(e,t,s){this.viewportTransformer.patchContentMatrix(e,t,s),this.htmlController.applyTransform()}attach(e){this.htmlController.attach(e)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.htmlController.destroy()}resolveEdgeType(e,t){if(e===t)return P.PortCycle;const s=this.graphStore.getPortNodeId(e),o=this.graphStore.getPortNodeId(t);return s===o?P.NodeCycle:P.Regular}}const we=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r.style.overflow="hidden",r},ye=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="0",r.style.height="0",r},me=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.visibility="hidden",r};class pe{constructor(){a(this,"keyMap",new Map);a(this,"valueMap",new Map)}set(e,t){this.keyMap.set(e,t),this.valueMap.set(t,e)}getByKey(e){return this.keyMap.get(e)}getByValue(e){return this.valueMap.get(e)}deleteByKey(e){const t=this.keyMap.get(e);t!==void 0&&this.valueMap.delete(t),this.keyMap.delete(e)}deleteByValue(e){const t=this.valueMap.get(e);t!==void 0&&this.keyMap.delete(t),this.valueMap.delete(e)}forEach(e){this.keyMap.forEach((t,s)=>{e(t,s)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class ve{constructor(e,t,s,o){a(this,"canvasWrapper",null);a(this,"host",we());a(this,"container",ye());a(this,"nodeWrappersResizeObserver");a(this,"nodeElementToIdMap",new Map);a(this,"nodeIdToWrapperElementMap",new pe);a(this,"edgeIdToElementMap",new Map);this.nodeResizeObserverFactory=e,this.getBoundingClientRect=t,this.graphStore=s,this.viewportTransformer=o,this.host.appendChild(this.container),this.nodeWrappersResizeObserver=this.createNodesResizeObserver()}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const e=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.dx}, ${e.dy})`}attachNode(e){const t=this.graphStore.getNode(e),s=me();s.appendChild(t.element),this.container.appendChild(s),this.nodeElementToIdMap.set(t.element,e),this.nodeIdToWrapperElementMap.set(e,s),this.updateNodeCoordinatesInternal(e),this.updateNodePriority(e),this.nodeWrappersResizeObserver.observe(s),s.style.visibility="visible"}detachNode(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);this.nodeWrappersResizeObserver.unobserve(s),s.removeChild(t.element),this.container.removeChild(s),this.nodeElementToIdMap.delete(t.element),this.nodeIdToWrapperElementMap.deleteByKey(e)}attachEdge(e){const t=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,t.shape.svg),this.container.appendChild(t.shape.svg),this.updateEdgeCoordinates(e),this.updateEdgePriority(e)}detachEdge(e){const t=this.graphStore.getEdge(e);this.container.removeChild(t.shape.svg),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,t)=>{this.detachEdge(t)}),this.nodeIdToWrapperElementMap.forEach((e,t)=>{this.detachNode(t)})}destroy(){this.nodeWrappersResizeObserver.disconnect(),this.host.removeChild(this.container),this.clear(),this.detach()}updateNodeCoordinates(e){const t=this.graphStore.getNodeAdjacentEdgeIds(e);this.updateNodeCoordinatesInternal(e),t.forEach(s=>{this.updateEdgeCoordinates(s)})}updateNodePriority(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);s.style.zIndex=`${t.priority}`}updateEdgeShape(e){const t=this.edgeIdToElementMap.get(e);this.container.removeChild(t);const s=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,s.shape.svg),this.container.appendChild(s.shape.svg),this.updateEdgeCoordinates(e),this.updateEdgePriority(e)}updateEdgePriority(e){const t=this.graphStore.getEdge(e);t.shape.svg.style.zIndex=`${t.priority}`}updatePortEdges(e){this.graphStore.getPortAdjacentEdgeIds(e).forEach(s=>{this.updateEdgeCoordinates(s)})}createNodesResizeObserver(){return this.nodeResizeObserverFactory(e=>{e.forEach(t=>{const s=t.target,o=this.nodeIdToWrapperElementMap.getByValue(s);this.updateNodeCoordinatesInternal(o),this.graphStore.getNodeAdjacentEdgeIds(o).forEach(n=>{this.updateEdgeCoordinates(n)})})})}updateNodeCoordinatesInternal(e){const t=this.nodeIdToWrapperElementMap.getByKey(e),{width:s,height:o}=this.getBoundingClientRect.call(t),i=this.viewportTransformer.getViewportMatrix().scale,n=this.graphStore.getNode(e),{x:h,y:c}=n.centerFn(s,o),d=n.x-i*h,g=n.y-i*c;t.style.transform=`translate(${d}px, ${g}px)`}updateEdgeCoordinates(e){const t=this.graphStore.getEdge(e),s=this.graphStore.getPort(t.from),o=this.graphStore.getPort(t.to),i=this.getBoundingClientRect.call(s.element),n=this.getBoundingClientRect.call(o.element),h=this.getBoundingClientRect.call(this.host),c=this.viewportTransformer.getViewportMatrix(),d={x:c.scale*(i.left-h.left)+c.dx,y:c.scale*(i.top-h.top)+c.dy},g={x:c.scale*(n.left-h.left)+c.dx,y:c.scale*(n.top-h.top)+c.dy},w=s.centerFn(i.width*c.scale,i.height*c.scale),p=o.centerFn(n.width*c.scale,n.height*c.scale),y={x:d.x+w.x,y:d.y+w.y},f={x:g.x+p.x,y:g.y+p.y},M=Math.min(y.x,f.x),N=Math.min(y.y,f.y),b=Math.abs(f.x-y.x),F=Math.abs(f.y-y.y);t.shape.svg.style.width=`${b}px`,t.shape.svg.style.height=`${F}px`,t.shape.svg.style.transform=`translate(${M}px, ${N}px)`;const D=y.x<=f.x?1:-1,G=y.y<=f.y?1:-1;t.shape.update({x:b,y:F},D,G,s.direction,o.direction)}}class fe{constructor(e,t,s,o,i,n,h){a(this,"publicViewportTransformer");a(this,"publicGraphStore");a(this,"canvasController");const c=new ce,d=new le;this.publicGraphStore=new ue(d),this.publicViewportTransformer=new de(c);const g=new ve(e,t,d,c);this.canvasController=new ge(d,g,c,s,o,i,n,h)}}const re=(r,e)=>({x:r/2,y:e/2}),u={edgeColor:"#5c5c5c",edgeWidth:1,edgeArrowLength:15,edgeArrowWidth:4,edgeArrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleSize:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,smallCycleSize:15,curvature:90},j=r=>{switch(r==null?void 0:r.type){case"custom":return r.factory;case"straight":return q({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});case"horizontal":return te({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});case"vertical":return ee({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,arrowOffset:r.arrowOffset??u.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??u.cycleSize,roundness:r.roundness??u.roundness,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection});default:return Z({color:r.color??u.edgeColor,width:r.width??u.edgeWidth,arrowLength:r.arrowLength??u.edgeArrowLength,arrowWidth:r.arrowWidth??u.edgeArrowWidth,hasSourceArrow:r.hasSourceArrow??u.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??u.hasTargetArrow,cycleRadius:r.cycleRadius??u.cycleSize,detourDistance:r.detourDistance??u.detourDistance,detourDirection:r.detourDirection??u.detourDirection,smallCycleRadius:r.smallCycleRadius??u.smallCycleSize,curvature:r.curvature??u.curvature})}},H=r=>()=>r,se=H(0),Y=()=>{let r=0;return()=>r++},xe=(r,e)=>{const t=[se,se];r==="incremental"&&(t[0]=Y()),e==="incremental"&&(t[1]=Y());const s=Y();return r==="shared-incremental"&&(t[0]=s),e==="shared-incremental"&&(t[1]=s),typeof r=="number"&&(t[0]=H(r)),typeof e=="number"&&(t[1]=H(e)),typeof r=="function"&&(t[0]=r),typeof e=="function"&&(t[1]=e),t},Ee=r=>{var s,o,i,n,h,c;const[e,t]=xe((s=r.nodes)==null?void 0:s.priority,(o=r.edges)==null?void 0:o.priority);return{nodes:{centerFn:((i=r.nodes)==null?void 0:i.centerFn)??re,priorityFn:e},ports:{centerFn:((n=r.ports)==null?void 0:n.centerFn)??re,direction:((h=r.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:j(((c=r.edges)==null?void 0:c.shape)??{}),priorityFn:t}}};class oe{constructor(e){a(this,"transformation");a(this,"model");a(this,"di");a(this,"edgeShapeFactory");a(this,"nodeResizeObserverFactory",e=>new window.ResizeObserver(e));this.apiOptions=e;const t=Ee(this.apiOptions??{});this.di=new fe(this.nodeResizeObserverFactory,Element.prototype.getBoundingClientRect,t.nodes.centerFn,t.ports.centerFn,t.ports.direction,t.nodes.priorityFn,t.edges.priorityFn),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore,this.edgeShapeFactory=t.edges.shapeFactory}addNode(e){return this.di.canvasController.addNode(e.id,e.element,e.x,e.y,e.ports,e.centerFn,e.priority),this}updateNode(e,t){return this.di.canvasController.updateNode(e,t.x,t.y,t.priority,t.centerFn),this}removeNode(e){return this.di.canvasController.removeNode(e),this}markPort(e){return this.di.canvasController.markPort(e.id,e.element,e.nodeId,e.centerFn,e.direction),this}updatePort(e,t){return this.di.canvasController.updatePort(e,t==null?void 0:t.direction,t==null?void 0:t.centerFn),this}unmarkPort(e){return this.di.canvasController.unmarkPort(e),this}addEdge(e){const t=e.shape!==void 0?j(e.shape):this.edgeShapeFactory;return this.di.canvasController.addEdge(e.id,e.from,e.to,t,e.priority),this}updateEdge(e,t){const s=t.shape!==void 0?j(t.shape):void 0;return this.di.canvasController.updateEdge(e,s,t.priority),this}removeEdge(e){return this.di.canvasController.removeEdge(e),this}patchViewportMatrix(e){return this.di.canvasController.patchViewportMatrix(e.scale??null,e.dx??null,e.dy??null),this}patchContentMatrix(e){return this.di.canvasController.patchContentMatrix(e.scale??null,e.dx??null,e.dy??null),this}clear(){return this.di.canvasController.clear(),this}attach(e){return this.di.canvasController.attach(e),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}const z=(r,e,t)=>{const{x:s,y:o,width:i,height:n}=r.getBoundingClientRect();return e>=s&&e<s+i&&t>=o&&t<=o+n},B=(r,e,t)=>e>=0&&e<r.innerWidth&&t>=0&&t<=r.innerHeight,k=(r,e)=>{e!==null?r.style.cursor=e:r.style.removeProperty("cursor")};class ie{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"maxNodePriority",0);a(this,"nodes",new Map);a(this,"grabbedNodeId",null);a(this,"onNodeDrag");a(this,"onBeforeNodeDrag");a(this,"nodeIdGenerator",new R(e=>this.nodes.has(e)));a(this,"element",null);a(this,"onCanvasMouseUp",()=>{this.cancelMouseDrag()});a(this,"onCanvasMouseMove",e=>{if(this.element!==null&&(!z(this.element,e.clientX,e.clientY)||!B(this.window,e.clientX,e.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});a(this,"onCanvasTouchStart",e=>{this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]});a(this,"onCanvasTouchMove",e=>{if(e.touches.length===1){const t=e.touches[0];if(this.element!==null&&(!z(this.element,t.clientX,t.clientY)||!B(this.window,t.clientX,t.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){e.stopImmediatePropagation();const s=t.clientX-this.previousTouchCoords[0],o=t.clientY-this.previousTouchCoords[1];this.dragNode(this.grabbedNodeId,s,o),this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]}}});a(this,"onCanvasTouchEnd",e=>{e.touches.length>0?this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]:this.cancelTouchDrag()});a(this,"previousTouchCoords",null);a(this,"freezePriority");a(this,"window",window);a(this,"dragCursor");var i,n;this.canvas=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model;const s=()=>{};this.onNodeDrag=((i=t==null?void 0:t.events)==null?void 0:i.onNodeDrag)??s;const o=()=>!0;this.onBeforeNodeDrag=((n=t==null?void 0:t.events)==null?void 0:n.onBeforeNodeDrag)??o,this.freezePriority=(t==null?void 0:t.grabPriorityStrategy)==="freeze",this.dragCursor=(t==null?void 0:t.dragCursor)!==void 0?t.dragCursor:"grab"}addNode(e){const t=this.nodeIdGenerator.create(e.id);this.canvas.addNode({...e,id:t}),this.updateMaxNodePriority(t);const s=i=>{if(this.element===null)return;const n=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:n.x,y:n.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=t,k(this.element,this.dragCursor),this.moveNodeOnTop(t),this.window.addEventListener("mouseup",this.onCanvasMouseUp),this.window.addEventListener("mousemove",this.onCanvasMouseMove))},o=i=>{const n=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:n.x,y:n.y})&&i.touches.length===1&&(this.grabbedNodeId=t,this.moveNodeOnTop(t),this.window.addEventListener("touchmove",this.onCanvasTouchMove),this.window.addEventListener("touchend",this.onCanvasTouchEnd),this.window.addEventListener("touchcancel",this.onCanvasTouchEnd))};return this.nodes.set(t,{element:e.element,onMouseDown:s,onTouchStart:o}),e.element.addEventListener("mousedown",s),e.element.addEventListener("touchstart",o),this}updateNode(e,t){return this.canvas.updateNode(e,t),this.updateMaxNodePriority(e),this}removeNode(e){const t=this.nodes.get(e);return t!==void 0&&(t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)),this.canvas.removeNode(e),this.nodes.delete(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,t){return this.canvas.updatePort(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}attach(e){return this.detach(),this.element=e,this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}dragNode(e,t,s){const o=this.model.getNode(e);if(o===null)throw new S("failed to drag nonexisting node");const i=this.canvas.transformation.getContentMatrix(),n=i.scale*o.x+i.dx,h=i.scale*o.y+i.dy,c=n+t,d=h+s,g=this.canvas.transformation.getViewportMatrix(),w=g.scale*c+g.dx,p=g.scale*d+g.dy;this.canvas.updateNode(e,{x:w,y:p}),this.onNodeDrag({nodeId:e,element:o.element,x:o.x,y:o.y})}updateMaxNodePriority(e){const t=this.model.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,t)}moveNodeOnTop(e){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const t=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(e).forEach(o=>{this.updateEdge(o,{priority:t})})}cancelMouseDrag(){this.grabbedNodeId=null,this.element!==null&&k(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onCanvasMouseUp),this.window.removeEventListener("mousemove",this.onCanvasMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null,this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onCanvasTouchMove),this.window.removeEventListener("touchend",this.onCanvasTouchEnd),this.window.removeEventListener("touchcancel",this.onCanvasTouchEnd)}}const Ce=()=>{},Ae=(r,e)=>e,Se=(r,e)=>{const t=e!==null?1/e:null,s=r!==null?1/r:null;return(o,i)=>s!==null&&i.scale>s&&i.scale>o.scale||t!==null&&i.scale<t&&i.scale<o.scale?o:i},Pe=(r,e,t,s)=>(o,i,n,h)=>{let c=i.dx,d=i.dy;r!==null&&c<r&&c<o.dx&&(c=o.dx);const g=n*o.scale;e!==null&&c>e-g&&c>o.dx&&(c=o.dx),t!==null&&d<t&&d<o.dy&&(d=o.dy);const w=h*o.scale;return s!==null&&d>s-w&&d>o.dy&&(d=o.dy),{scale:i.scale,dx:c,dy:d}},ne=r=>{switch(r.type){case"scale-limit":return Se(r.minContentScale??null,r.maxContentScale??null);case"shift-limit":return Pe(r.minX??null,r.maxX??null,r.minY??null,r.maxY??null);default:return r.preprocessorFn}},Me=r=>(e,t,s,o)=>r.reduce((i,n)=>n(e,i,s,o),t);class ae{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"element",null);a(this,"prevTouches",null);a(this,"onTransformFinished");a(this,"transformPreprocessor");a(this,"isScalable");a(this,"isShiftable");a(this,"wheelSensitivity");a(this,"window",window);a(this,"onMouseDown",()=>{this.element!==null&&(k(this.element,this.shiftCursor),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseup",this.onMouseUp))});a(this,"onMouseMove",e=>{if(!this.isShiftable||this.element===null)return;if(!z(this.element,e.clientX,e.clientY)||!B(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const t=-e.movementX,s=-e.movementY;this.moveViewport(t,s)});a(this,"onMouseUp",()=>{this.stopMouseDrag()});a(this,"onWheelScroll",e=>{if(this.element===null||this.isScalable===!1)return;e.preventDefault();const{left:t,top:s}=this.element.getBoundingClientRect(),o=e.clientX-t,i=e.clientY-s,h=1/(e.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(h,o,i)});a(this,"onTouchStart",e=>{this.prevTouches=this.getAverageTouch(e),this.window.addEventListener("touchmove",this.onTouchMove),this.window.addEventListener("touchend",this.onTouchEnd),this.window.addEventListener("touchcancel",this.onTouchEnd)});a(this,"onTouchMove",e=>{if(this.prevTouches===null||!this.isShiftable||this.element===null)return;const t=this.getAverageTouch(e);if(!t.touches.every(o=>z(this.element,o[0],o[1])&&B(this.window,o[0],o[1]))){this.stopTouchDrag();return}if((t.touchesCnt===1||t.touchesCnt===2)&&this.moveViewport(-(t.x-this.prevTouches.x),-(t.y-this.prevTouches.y)),t.touchesCnt===2&&this.isScalable){const{left:o,top:i}=this.element.getBoundingClientRect(),n=this.prevTouches.x-o,h=this.prevTouches.y-i,d=1/(t.scale/this.prevTouches.scale);this.scaleViewport(d,n,h)}this.prevTouches=t});a(this,"onTouchEnd",e=>{e.touches.length>0?this.prevTouches=this.getAverageTouch(e):this.stopTouchDrag()});a(this,"observer",new ResizeObserver(()=>{if(this.element!==null){const e=this.canvas.transformation.getViewportMatrix(),{width:t,height:s}=this.element.getBoundingClientRect(),o=this.transformPreprocessor(e,e,t,s);this.canvas.patchViewportMatrix(o),this.onTransformFinished()}}));a(this,"shiftCursor");var i,n,h,c,d,g,w,p;this.canvas=e,this.options=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((n=(i=this.options)==null?void 0:i.scale)==null?void 0:n.enabled)!==!1,this.isShiftable=((c=(h=this.options)==null?void 0:h.shift)==null?void 0:c.enabled)!==!1;const s=(g=(d=this.options)==null?void 0:d.scale)==null?void 0:g.wheelSensitivity;this.wheelSensitivity=s!==void 0?s:1.2,this.onTransformFinished=((w=t==null?void 0:t.events)==null?void 0:w.onTransformFinished)??Ce;const o=t==null?void 0:t.transformPreprocessor;o!==void 0?Array.isArray(o)?this.transformPreprocessor=Me(o.map(y=>ne(y))):this.transformPreprocessor=ne(o):this.transformPreprocessor=Ae,this.shiftCursor=((p=t==null?void 0:t.shift)==null?void 0:p.cursor)!==void 0?t.shift.cursor:"grab"}addNode(e){return this.canvas.addNode(e),this}updateNode(e,t){return this.canvas.updateNode(e,t),this}removeNode(e){return this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,t){return this.canvas.updatePort(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this}attach(e){return this.detach(),this.element=e,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}getAverageTouch(e){const t=[],s=e.touches.length;for(let c=0;c<s;c++)t.push([e.touches[c].clientX,e.touches[c].clientY]);const o=t.reduce((c,d)=>[c[0]+d[0],c[1]+d[1]],[0,0]),i=[o[0]/s,o[1]/s],h=t.map(c=>[c[0]-i[0],c[1]-i[1]]).reduce((c,d)=>c+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:i[0],y:i[1],scale:h/s,touchesCnt:s,touches:t}}moveViewport(e,t){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,dx:s.dx+s.scale*e,dy:s.dy+s.scale*t};if(this.element!==null){const{width:i,height:n}=this.element.getBoundingClientRect(),h=this.transformPreprocessor(s,o,i,n);this.canvas.patchViewportMatrix(h),this.onTransformFinished()}}scaleViewport(e,t,s){if(this.element===null)return;const o=this.canvas.transformation.getViewportMatrix(),i={scale:o.scale*e,dx:o.scale*(1-e)*t+o.dx,dy:o.scale*(1-e)*s+o.dy},{width:n,height:h}=this.element.getBoundingClientRect(),c=this.transformPreprocessor(o,i,n,h);this.canvas.patchViewportMatrix(c),this.onTransformFinished()}stopMouseDrag(){this.element!==null&&k(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseup",this.onMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onTouchMove),this.window.removeEventListener("touchend",this.onTouchEnd),this.window.removeEventListener("touchcancel",this.onTouchEnd)}}class Ne{constructor(){a(this,"coreOptions");a(this,"dragOptions");a(this,"transformOptions");a(this,"isDraggable",!1);a(this,"isTransformable",!1)}setOptions(e){return this.coreOptions=e,this}setUserDraggableNodes(e){return this.isDraggable=!0,this.dragOptions=e,this}setUserTransformableCanvas(e){return this.isTransformable=!0,this.transformOptions=e,this}build(){let e=new oe(this.coreOptions);return this.isDraggable&&(e=new ie(e,this.dragOptions)),this.isTransformable&&(e=new ae(e,this.transformOptions)),e}}m.BezierEdgeShape=X,m.CanvasCore=oe,m.CycleCircleEdgeShape=J,m.CycleSquareEdgeShape=V,m.DetourBezierEdgeShape=Q,m.DetourStraightEdgeShape=I,m.EdgeType=P,m.HorizontalEdgeShape=K,m.HtmlGraphBuilder=Ne,m.HtmlGraphError=S,m.StraightEdgeShape=U,m.UserDraggableNodesCanvas=ie,m.UserTransformableCanvas=ae,m.VerticalEdgeShape=_,m.createBezierEdgeShapeFactory=Z,m.createHorizontalEdgeShapeFactory=te,m.createStraightEdgeShareFactory=q,m.createVerticalEdgeShapeFactory=ee,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "0.0.59",
+  "version": "0.0.60",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",