@html-graph/html-graph 0.0.56 → 0.0.58

package/dist/main.js

@@ -1,136 +1,19 @@
 var _ = Object.defineProperty;
-var J = (e, t, r) => t in e ? _(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var h = (e, t, r) => J(e, typeof t != "symbol" ? t + "" : t, r);
-const K = () => {
-  const e = document.createElement("div");
-  return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, Q = () => {
-  const e = document.createElement("canvas");
-  return e.style.position = "absolute", e.style.inset = "0", e;
-}, Z = () => {
-  const e = document.createElement("div");
-  return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
-};
-class q {
-  constructor(t, r, s, o) {
-    h(this, "canvasWrapper", null);
-    h(this, "host", K());
-    h(this, "canvas", Q());
-    h(this, "container", Z());
-    h(this, "canvasCtx");
-    h(this, "hostResizeObserver");
-    h(this, "nodesResizeObserver");
-    h(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    h(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
-    h(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    h(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    this.graphStore = t, this.viewportTransformer = r, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
-    const i = this.canvas.getContext("2d");
-    if (i === null)
-      throw new Error("unable to get canvas context");
-    this.canvasCtx = i, this.host.appendChild(this.canvas), this.host.appendChild(this.container), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
-  }
-  clear() {
-    Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
-      this.detachEdge(t);
-    }), Array.from(this.nodeElementToIdMap.values()).forEach((t) => {
-      this.detachNode(t);
-    });
-  }
-  attach(t) {
-    this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
-  }
-  detach() {
-    this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
-  }
-  destroy() {
-    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.container), this.detach();
-  }
-  applyTransform() {
-    this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
-    const t = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
-  }
-  attachNode(t) {
-    const r = this.graphStore.getNode(t), s = document.createElement("div");
-    s.appendChild(r.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.container.appendChild(s), this.nodeElementToIdMap.set(r.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t), this.updateNodePriority(t), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
-  }
-  detachNode(t) {
-    const r = this.graphStore.getNode(t);
-    this.nodesResizeObserver.unobserve(r.element);
-    const s = this.nodeIdToWrapperElementMap.get(t);
-    s.removeChild(r.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(r.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
-  }
-  attachEdge(t) {
-    const s = this.graphStore.getEdge(t).shape.svg;
-    this.edgeIdToElementMap.set(t, s), this.container.appendChild(s), this.updateEdgeCoords(t), this.updateEdgePriority(t);
-  }
-  detachEdge(t) {
-    const r = this.edgeIdToElementMap.get(t);
-    this.edgeIdToElementMap.delete(t), this.container.removeChild(r);
-  }
-  updateNodePriority(t) {
-    const r = this.graphStore.getNode(t), s = this.nodeIdToWrapperElementMap.get(t);
-    s.style.zIndex = `${r.priority}`;
-  }
-  updateEdgePriority(t) {
-    const r = this.graphStore.getEdge(t);
-    this.edgeIdToElementMap.get(t).style.zIndex = `${r.priority}`;
-  }
-  updateNodeCoordinates(t) {
-    const r = this.graphStore.getNodeAdjacentEdges(t);
-    this.updateNodeCoords(t), r.forEach((s) => {
-      this.updateEdgeCoords(s);
-    });
-  }
-  updatePortEdges(t) {
-    this.graphStore.getPortAdjacentEdges(t).forEach((s) => {
-      this.updateEdgeCoords(s);
-    });
-  }
-  createHostResizeObserver() {
-    return new ResizeObserver(() => {
-      this.updateCanvasDimensions(), this.applyTransform();
-    });
-  }
-  createNodesResizeObserver() {
-    return new ResizeObserver((t) => {
-      t.forEach((r) => {
-        const s = r.target, o = this.nodeWrapperElementToIdMap.get(s);
-        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((n) => {
-          this.updateEdgeCoords(n);
-        });
-      });
-    });
-  }
-  updateCanvasDimensions() {
-    const { width: t, height: r } = this.host.getBoundingClientRect();
-    this.canvas.width = t, this.canvas.height = r;
-  }
-  updateNodeCoords(t) {
-    const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(t), { x: c, y: a } = n.centerFn(s, o), l = n.x - i * c, d = n.y - i * a;
-    r.style.transform = `matrix(1, 0, 0, 1, ${l}, ${d})`;
-  }
-  updateEdgeCoords(t) {
-    const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), i = s.element.getBoundingClientRect(), n = o.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), a = this.viewportTransformer.getViewportMatrix(), l = a.scale * (i.left - c.left) + a.dx, d = a.scale * (i.top - c.top) + a.dy, g = a.scale * (n.left - c.left) + a.dx, u = a.scale * (n.top - c.top) + a.dy, { x: y, y: w } = s.centerFn(
-      i.width * a.scale,
-      i.height * a.scale
-    ), { x: v, y: p } = o.centerFn(
-      n.width * a.scale,
-      n.height * a.scale
-    ), f = y + l, m = w + d, x = v + g, A = p + u, C = Math.min(f, x), P = Math.min(m, A), T = Math.abs(x - f), L = Math.abs(A - m);
-    r.shape.update(C, P, T, L, s, o);
-  }
-}
-const G = {
+var J = (r, e, t) => e in r ? _(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var a = (r, e, t) => J(r, typeof e != "symbol" ? e + "" : e, t);
+const Y = (r) => ({
+  scale: 1 / r.scale,
+  dx: -r.dx / r.scale,
+  dy: -r.dy / r.scale
+}), X = {
   scale: 1,
   dx: 0,
   dy: 0
 };
-class I {
+class Q {
   constructor() {
-    h(this, "viewportMatrix", G);
-    h(this, "contentMatrix", G);
+    a(this, "viewportMatrix", X);
+    a(this, "contentMatrix", X);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -138,31 +21,24 @@ class I {
   getContentMatrix() {
     return this.contentMatrix;
   }
-  patchViewportMatrix(t, r, s) {
+  patchViewportMatrix(e, t, s) {
     this.viewportMatrix = {
-      scale: t ?? this.viewportMatrix.scale,
-      dx: r ?? this.viewportMatrix.dx,
+      scale: e ?? this.viewportMatrix.scale,
+      dx: t ?? this.viewportMatrix.dx,
       dy: s ?? this.viewportMatrix.dy
-    }, this.contentMatrix = this.calculateReverseMatrix(this.viewportMatrix);
+    }, this.contentMatrix = Y(this.viewportMatrix);
   }
-  patchContentMatrix(t, r, s) {
+  patchContentMatrix(e, t, s) {
     this.contentMatrix = {
-      scale: t ?? this.contentMatrix.scale,
-      dx: r ?? this.contentMatrix.dx,
+      scale: e ?? this.contentMatrix.scale,
+      dx: t ?? this.contentMatrix.dx,
       dy: s ?? this.contentMatrix.dy
-    }, this.viewportMatrix = this.calculateReverseMatrix(this.contentMatrix);
-  }
-  calculateReverseMatrix(t) {
-    return {
-      scale: 1 / t.scale,
-      dx: -t.dx / t.scale,
-      dy: -t.dy / t.scale
-    };
+    }, this.viewportMatrix = Y(this.contentMatrix);
   }
 }
-class tt {
-  constructor(t) {
-    this.transformer = t;
+class Z {
+  constructor(e) {
+    this.transformer = e;
   }
   getViewportMatrix() {
     return { ...this.transformer.getViewportMatrix() };
@@ -171,901 +47,835 @@ class tt {
     return { ...this.transformer.getContentMatrix() };
   }
 }
-class et {
+class q {
   constructor() {
-    h(this, "nodes", /* @__PURE__ */ new Map());
-    h(this, "ports", /* @__PURE__ */ new Map());
-    h(this, "nodePorts", /* @__PURE__ */ new Map());
-    h(this, "portNodeId", /* @__PURE__ */ new Map());
-    h(this, "edges", /* @__PURE__ */ new Map());
-    h(this, "incommingEdges", /* @__PURE__ */ new Map());
-    h(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    h(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(t, r, s, o, i, n) {
-    this.nodes.set(t, { element: r, x: s, y: o, centerFn: i, priority: n }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
-  }
-  getAllNodes() {
+    a(this, "nodes", /* @__PURE__ */ new Map());
+    a(this, "ports", /* @__PURE__ */ new Map());
+    a(this, "nodePorts", /* @__PURE__ */ new Map());
+    a(this, "portNodeId", /* @__PURE__ */ new Map());
+    a(this, "edges", /* @__PURE__ */ new Map());
+    a(this, "incommingEdges", /* @__PURE__ */ new Map());
+    a(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    a(this, "cycleEdges", /* @__PURE__ */ 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, /* @__PURE__ */ new Map());
+  }
+  getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(t) {
-    return this.nodes.get(t);
+  getNode(e) {
+    return this.nodes.get(e);
   }
-  getNodePorts(t) {
-    const r = this.nodePorts.get(t);
-    if (r !== void 0)
-      return Array.from(r.keys());
+  removeNode(e) {
+    this.nodes.delete(e), this.nodePorts.delete(e);
   }
-  removeNode(t) {
-    this.getNodeAdjacentEdges(t).forEach((o) => {
-      this.removeEdge(o);
-    }), this.nodes.delete(t), this.nodePorts.get(t).forEach((o, i) => {
-      this.portNodeId.delete(i);
-    }), this.nodePorts.delete(t);
+  addPort(e, t, s, o, i) {
+    this.ports.set(e, { element: t, centerFn: o, direction: i }), this.cycleEdges.set(e, /* @__PURE__ */ new Set()), this.incommingEdges.set(e, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e, /* @__PURE__ */ new Set()), this.portNodeId.set(e, s), this.nodePorts.get(s).set(e, t);
   }
-  addPort(t, r, s, o, i) {
-    this.ports.set(t, { element: r, centerFn: o, direction: i }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, r);
+  getPort(e) {
+    return this.ports.get(e);
   }
-  getAllPorts() {
+  getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getPort(t) {
-    return this.ports.get(t);
-  }
-  getPortNode(t) {
-    return this.portNodeId.get(t);
-  }
-  removePort(t) {
-    this.cycleEdges.get(t).forEach((s) => {
-      this.removeEdge(s);
-    }), this.cycleEdges.delete(t), this.incommingEdges.get(t).forEach((s) => {
-      this.removeEdge(s);
-    }), this.incommingEdges.delete(t), this.outcommingEdges.get(t).forEach((s) => {
-      this.removeEdge(s);
-    }), this.outcommingEdges.get(t);
-    const r = this.portNodeId.get(t);
-    this.portNodeId.delete(t), this.nodePorts.get(r).delete(t), this.ports.delete(t);
-  }
-  addEdge(t, r, s, o, i) {
-    this.edges.set(t, {
-      from: r,
+  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
-    }), r !== s ? (this.outcommingEdges.get(r).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(r).add(t);
+    }), t !== s ? (this.outcommingEdges.get(t).add(e), this.incommingEdges.get(s).add(e)) : this.cycleEdges.get(t).add(e);
   }
-  getAllEdges() {
+  getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(t) {
-    return this.edges.get(t);
+  getEdge(e) {
+    return this.edges.get(e);
   }
-  removeEdge(t) {
-    const r = this.edges.get(t), s = r.from, o = r.to;
-    this.cycleEdges.get(s).delete(t), this.cycleEdges.get(o).delete(t), this.incommingEdges.get(s).delete(t), this.incommingEdges.get(o).delete(t), this.outcommingEdges.get(s).delete(t), this.outcommingEdges.get(o).delete(t), this.edges.delete(t);
-  }
-  getPortAdjacentEdges(t) {
-    return [
-      ...this.getPortIncomingEdges(t),
-      ...this.getPortOutcomingEdges(t),
-      ...this.getPortCycleEdges(t)
-    ];
-  }
-  getNodeAdjacentEdges(t) {
-    return [
-      ...this.getNodeIncomingEdges(t),
-      ...this.getNodeOutcomingEdges(t),
-      ...this.getNodeCycleEdges(t)
-    ];
+  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();
   }
-  getPortIncomingEdges(t) {
-    return Array.from(this.incommingEdges.get(t));
+  getPortIncomingEdgeIds(e) {
+    return Array.from(this.incommingEdges.get(e));
   }
-  getPortOutcomingEdges(t) {
-    return Array.from(this.outcommingEdges.get(t));
+  getPortOutcomingEdgeIds(e) {
+    return Array.from(this.outcommingEdges.get(e));
   }
-  getPortCycleEdges(t) {
-    return Array.from(this.cycleEdges.get(t));
+  getPortCycleEdgeIds(e) {
+    return Array.from(this.cycleEdges.get(e));
   }
-  getNodeIncomingEdges(t) {
-    const r = Array.from(this.nodePorts.get(t).keys());
+  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 r.forEach((o) => {
-      s = [...s, ...this.getPortIncomingEdges(o)];
+    return t.forEach((o) => {
+      s = [...s, ...this.getPortIncomingEdgeIds(o)];
     }), s;
   }
-  getNodeOutcomingEdges(t) {
-    const r = Array.from(this.nodePorts.get(t).keys());
+  getNodeOutcomingEdgeIds(e) {
+    const t = Array.from(this.nodePorts.get(e).keys());
     let s = [];
-    return r.forEach((o) => {
-      s = [...s, ...this.getPortOutcomingEdges(o)];
+    return t.forEach((o) => {
+      s = [...s, ...this.getPortOutcomingEdgeIds(o)];
     }), s;
   }
-  getNodeCycleEdges(t) {
-    const r = Array.from(this.nodePorts.get(t).keys());
+  getNodeCycleEdgeIds(e) {
+    const t = Array.from(this.nodePorts.get(e).keys());
     let s = [];
-    return r.forEach((o) => {
-      s = [...s, ...this.getPortCycleEdges(o)];
+    return t.forEach((o) => {
+      s = [...s, ...this.getPortCycleEdgeIds(o)];
     }), s;
   }
+  getNodeAdjacentEdgeIds(e) {
+    return [
+      ...this.getNodeIncomingEdgeIds(e),
+      ...this.getNodeOutcomingEdgeIds(e),
+      ...this.getNodeCycleEdgeIds(e)
+    ];
+  }
 }
-class rt {
-  constructor(t) {
-    this.graphStore = t;
-  }
-  getAllNodes() {
-    return this.graphStore.getAllNodes();
-  }
-  getAllPorts() {
-    return this.graphStore.getAllPorts();
-  }
-  getNode(t) {
-    const r = this.graphStore.getNode(t);
-    return r === void 0 ? null : {
-      element: r.element,
-      x: r.x,
-      y: r.y,
-      centerFn: r.centerFn,
-      priority: r.priority
+class ee {
+  constructor(e) {
+    this.graphStore = e;
+  }
+  getAllNodeIds() {
+    return this.graphStore.getAllNodeIds();
+  }
+  getAllPortIds() {
+    return this.graphStore.getAllPortIds();
+  }
+  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
     };
   }
-  getNodePorts(t) {
-    return this.graphStore.getNodePorts(t);
+  getNodePortIds(e) {
+    return this.graphStore.getNodePortIds(e);
   }
-  getPort(t) {
-    const r = this.graphStore.getPort(t);
-    return r === void 0 ? null : {
-      element: r.element,
-      centerFn: r.centerFn,
-      direction: r.direction
+  getPort(e) {
+    const t = this.graphStore.getPort(e);
+    return t === void 0 ? null : {
+      element: t.element,
+      centerFn: t.centerFn,
+      direction: t.direction
     };
   }
-  getPortNode(t) {
-    return this.graphStore.getPortNode(t) ?? null;
+  getPortNodeId(e) {
+    return this.graphStore.getPortNodeId(e) ?? null;
   }
-  getAllEdges() {
-    return this.graphStore.getAllEdges();
+  getAllEdgeIds() {
+    return this.graphStore.getAllEdgeIds();
   }
-  getEdge(t) {
-    const r = this.graphStore.getEdge(t);
-    return r === void 0 ? null : { from: r.from, to: r.to, priority: r.priority };
+  getEdge(e) {
+    const t = this.graphStore.getEdge(e);
+    return t === void 0 ? null : { from: t.from, to: t.to, priority: t.priority };
   }
-  getPortAdjacentEdges(t) {
-    return this.graphStore.getPortAdjacentEdges(t);
+  getPortAdjacentEdgeIds(e) {
+    return this.graphStore.getPortAdjacentEdgeIds(e);
   }
-  getNodeAdjacentEdges(t) {
-    return this.graphStore.getNodeAdjacentEdges(t);
+  getNodeAdjacentEdgeIds(e) {
+    return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
-  getPortIncomingEdges(t) {
-    return this.graphStore.getPortIncomingEdges(t);
+  getPortIncomingEdgeIds(e) {
+    return this.graphStore.getPortIncomingEdgeIds(e);
   }
-  getPortOutcomingEdges(t) {
-    return this.graphStore.getPortOutcomingEdges(t);
+  getPortOutcomingEdgeIds(e) {
+    return this.graphStore.getPortOutcomingEdgeIds(e);
   }
-  getPortCycleEdges(t) {
-    return this.graphStore.getPortCycleEdges(t);
+  getPortCycleEdgeIds(e) {
+    return this.graphStore.getPortCycleEdgeIds(e);
   }
-  getNodeIncomingEdges(t) {
-    return this.graphStore.getNodeIncomingEdges(t);
+  getNodeIncomingEdgeIds(e) {
+    return this.graphStore.getNodeIncomingEdgeIds(e);
   }
-  getNodeOutcomingEdges(t) {
-    return this.graphStore.getNodeOutcomingEdges(t);
+  getNodeOutcomingEdgeIds(e) {
+    return this.graphStore.getNodeOutcomingEdgeIds(e);
   }
-  getNodeCycleEdges(t) {
-    return this.graphStore.getNodeCycleEdges(t);
+  getNodeCycleEdgeIds(e) {
+    return this.graphStore.getNodeCycleEdgeIds(e);
   }
 }
-const M = (e) => {
-  const { top: t, left: r, width: s, height: o } = e.element.getBoundingClientRect(), i = e.centerFn(s, o);
-  return { x: r + i.x, y: t + i.y };
-}, E = (e, t, r) => ({
-  x: t.x * e.x - t.y * e.y + ((1 - t.x) * r.x + t.y * r.y),
-  y: t.y * e.x + t.x * e.y + ((1 - t.x) * r.y - t.y * r.x)
-}), S = (e, t, r) => ({ x: t * Math.cos(e), y: r * Math.sin(e) }), b = (e, t, r, s, o) => {
-  const n = [
-    { x: 0, y: 0 },
-    { x: s, y: o },
-    { x: s, y: -o }
-  ].map((d) => E(d, e, { x: 0, y: 0 })).map((d) => ({ x: d.x + t, y: d.y + r })), c = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, l = `L ${n[2].x} ${n[2].y}`;
-  return `${c} ${a} ${l}`;
-}, D = (e, t) => {
-  const r = [];
-  if (e.length > 0 && r.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && r.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
-    const s = e.length - 1;
+const l = {
+  x: 0,
+  y: 0
+}, p = (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)
+}), x = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) }), E = (r, e, t, s) => {
+  const i = [
+    l,
+    { x: t, y: s },
+    { x: t, y: -s }
+  ].map((d) => p(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}`;
+}, F = (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;
-    e.forEach((c, a) => {
-      let l = 0, d = 0, g = 0;
-      const u = a > 0, y = a < s, w = u && y;
-      if (u && (l = -o, d = -i, g = n), y) {
-        const C = e[a + 1];
-        o = C.x - c.x, i = C.y - c.y, n = Math.sqrt(o * o + i * i);
+    r.forEach((h, c) => {
+      let d = 0, u = 0, w = 0;
+      const m = c > 0, y = c < s, v = m && 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((w ? t : 0) / n, a < s - 1 ? 0.5 : 1), f = w ? { x: c.x + o * p, y: c.y + i * p } : c, x = Math.min((w ? t : 0) / g, a > 1 ? 0.5 : 1), A = w ? { x: c.x + l * x, y: c.y + d * x } : c;
-      a > 0 && r.push(`L ${A.x} ${A.y}`), w && r.push(
-        `C ${c.x} ${c.y} ${c.x} ${c.y} ${f.x} ${f.y}`
+      const S = Math.min((v ? e : 0) / n, c < s - 1 ? 0.5 : 1), N = v ? { x: h.x + o * S, y: h.y + i * S } : h, M = Math.min((v ? e : 0) / w, c > 1 ? 0.5 : 1), b = v ? { x: h.x + d * M, y: h.y + u * M } : h;
+      c > 0 && t.push(`L ${b.x} ${b.y}`), v && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${N.x} ${N.y}`
       );
     });
   }
-  return r.join(" ");
+  return t.join(" ");
+}, T = () => {
+  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;
+}, $ = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.transformOrigin = "50% 50%", r;
+}, D = (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;
+}, C = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("fill", r), e;
 };
-class st {
-  constructor(t, r, s, o, i, n, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }), w = E(
-      { x: s - this.arrowLength, y: o },
-      u,
-      {
-        x: s,
-        y: o
-      }
-    ), v = {
-      x: y.x + g.x * this.curvature,
-      y: y.y + g.y * this.curvature
-    }, p = {
-      x: w.x - u.x * this.curvature,
-      y: w.y - u.y * this.curvature
-    }, f = `M ${y.x} ${y.y} C ${v.x} ${v.y}, ${p.x} ${p.y}, ${w.x} ${w.y}`, m = this.sourceArrow ? "" : `M 0 0 L ${y.x} ${y.y} `, x = this.targetArrow ? "" : ` M ${w.x} ${w.y} L ${s} ${o}`, A = `${m}${f}${x}`;
-    if (this.line.setAttribute("d", A), this.sourceArrow) {
-      const C = b(
-        g,
-        0,
-        0,
+class te {
+  constructor(e, t, s, o, i, n, h) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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 = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", C);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const C = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", C);
+      this.targetArrow.setAttribute("d", d);
     }
   }
+  createLinePath(e, t, s) {
+    const o = p(
+      { x: this.arrowLength, y: l.y },
+      t,
+      l
+    ), i = p(
+      { 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} `, u = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
+    return `${d}${c}${u}`;
+  }
 }
-class ot {
-  constructor(t, r, s, o, i, n, c, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
-      x: s,
-      y: o
-    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
-      x: s,
-      y: o
-    }), m = D([y, p, f, w], this.roundness);
-    if (this.line.setAttribute("d", m), this.sourceArrow) {
-      const x = b(
-        g,
-        0,
-        0,
+class re {
+  constructor(e, t, s, o, i, n, h, c) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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 = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", x);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const x = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", x);
+      this.targetArrow.setAttribute("d", d);
     }
   }
+  createLinePath(e, t, s) {
+    const o = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, i = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, n = this.arrowLength + this.arrowOffset, h = p({ x: n, y: l.y }, t, l), c = p({ x: e.x - n, y: e.y }, s, e);
+    return F([o, h, c, i], this.roundness);
+  }
 }
-class it {
-  constructor(t, r, s, o, i, n, c, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
-      x: s,
-      y: o
-    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
-      x: s,
-      y: o
-    }), m = Math.max((p.x + f.x) / 2, v), x = o / 2, A = { x: l > 0 ? m : -v, y: p.y }, C = { x: A.x, y: x }, P = { x: l > 0 ? s - m : s + v, y: f.y }, T = { x: P.x, y: x }, L = D(
-      [y, p, A, C, T, P, f, w],
-      this.roundness
-    );
-    if (this.line.setAttribute("d", L), this.sourceArrow) {
-      const $ = b(
-        g,
-        0,
-        0,
+class se {
+  constructor(e, t, s, o, i, n, h, c) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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 = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, t);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", $);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const $ = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", $);
+      this.targetArrow.setAttribute("d", d);
     }
   }
-}
-class nt {
-  constructor(t, r, s, o, i, n, c, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
-      x: s,
-      y: o
-    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
-      x: s,
-      y: o
-    }), m = Math.max((p.y + f.y) / 2, v), x = s / 2, A = { x: p.x, y: d > 0 ? m : -v }, C = { x, y: A.y }, P = {
-      x: f.x,
-      y: d > 0 ? o - m : o + v
-    }, T = { x, y: P.y }, L = D(
-      [y, p, A, C, T, P, f, w],
+  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), 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 }, A = { x: o > 0 ? e.x - w : e.x + h, y: u.y }, S = { x: A.x, y: m };
+    return F(
+      [i, d, y, v, S, A, u, n],
       this.roundness
     );
-    if (this.line.setAttribute("d", L), this.sourceArrow) {
-      const $ = b(
-        g,
-        0,
-        0,
+  }
+}
+class oe {
+  constructor(e, t, s, o, i, n, h, c) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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 = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, s);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", $);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const $ = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", $);
+      this.targetArrow.setAttribute("d", d);
     }
   }
+  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), 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 }, A = {
+      x: u.x,
+      y: o > 0 ? e.y - w : e.y + h
+    }, S = { x: m, y: A.y };
+    return F(
+      [i, d, y, v, S, A, u, n],
+      this.roundness
+    );
+  }
 }
-class ht {
-  constructor(t, r, s, o, i, n, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "arrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = n, this.smallRadius = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
-  }
-  update(t, r, s, o, i) {
-    this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const n = S(i.direction, 1, 1), c = this.smallRadius, a = this.radius, l = Math.sqrt(c * c + a * a), d = c + a, g = this.arrowLength + l * (1 - a / d), u = c * a / d, w = [
-      { x: this.arrowLength, y: 0 },
-      { x: g, y: u },
-      { x: g, y: -u }
-    ].map(
-      (m) => E(m, n, { x: 0, y: 0 })
-    ), v = [
-      `M ${w[0].x} ${w[0].y}`,
-      `A ${c} ${c} 0 0 1 ${w[1].x} ${w[1].y}`,
-      `A ${a} ${a} 0 1 0 ${w[2].x} ${w[2].y}`,
-      `A ${c} ${c} 0 0 1 ${w[0].x} ${w[0].y}`
-    ].join(" "), p = `M 0 0 L ${w[0].x} ${w[0].y} `, f = `${this.arrow !== null ? "" : p}${v}`;
-    if (this.line.setAttribute("d", f), this.arrow) {
-      const m = b(
-        n,
-        0,
-        0,
+class ie {
+  constructor(e, t, s, o, i, n, h) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    a(this, "line");
+    a(this, "arrow", null);
+    this.arrowLength = s, this.arrowWidth = o, this.radius = n, this.smallRadius = h, this.svg.appendChild(this.group), this.line = D(e, t), this.group.appendChild(this.line), i && (this.arrow = C(e), this.group.appendChild(this.arrow));
+  }
+  update(e, t, s, o) {
+    const i = x(o, t, s), n = this.createLinePath(i);
+    if (this.line.setAttribute("d", n), this.arrow) {
+      const h = E(
+        i,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", m);
+      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((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}${u}`;
+  }
 }
-class z {
-  constructor(t, r, s, o, i, n, c, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "arrow", null);
-    h(this, "roundness");
-    h(this, "linePoints");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = n, this.minPortOffset = c, this.roundness = Math.min(a, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
-    const l = this.minPortOffset, d = this.side, g = this.arrowLength + l, u = this.roundness, y = g + 2 * d;
-    console.log(u), this.linePoints = [
-      { x: this.arrowLength, y: 0 },
-      { x: g, y: 0 },
-      { x: g, y: this.side },
-      { x: y, y: this.side },
-      { x: y, y: -this.side },
-      { x: g, y: -this.side },
-      { x: g, y: 0 },
-      { x: this.arrowLength, y: 0 }
+class B {
+  constructor(e, t, s, o, i, n, h, c) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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.svg.appendChild(this.group), this.line = D(e, t), this.group.appendChild(this.line), i && (this.arrow = C(e), this.group.appendChild(this.arrow));
+    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 },
+      { x: w, y: this.side },
+      { x: m, y: this.side },
+      { x: m, y: -this.side },
+      { x: w, y: -this.side },
+      { x: w, y: l.y },
+      { x: this.arrowLength, y: l.y }
     ];
   }
-  update(t, r, s, o, i) {
-    this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const n = S(i.direction, 1, 1), c = this.linePoints.map(
-      (d) => E(d, n, { x: 0, y: 0 })
-    ), a = `M 0 0 L ${c[0].x} ${c[0].y} `, l = `${this.arrow ? "" : a}${D(c, this.roundness)}`;
-    if (this.line.setAttribute("d", l), this.arrow) {
-      const d = b(
-        n,
-        0,
-        0,
+  update(e, t, s, o) {
+    const i = x(o, t, s), n = this.createLinePath(i);
+    if (this.line.setAttribute("d", n), this.arrow) {
+      const h = E(
+        i,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", d);
+      this.arrow.setAttribute("d", h);
     }
   }
+  createLinePath(e) {
+    const t = this.linePoints.map(
+      (o) => p(o, e, l)
+    ), s = `M ${l.x} ${l.y} L ${t[0].x} ${t[0].y} `;
+    return `${this.arrow ? "" : s}${F(t, this.roundness)}`;
+  }
 }
-class B {
-  constructor(t, r, s, o, i, n, c, a, l, d) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    h(this, "detourX");
-    h(this, "detourY");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.detourX = Math.cos(d) * l, this.detourY = Math.sin(d) * l, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
-      x: s,
-      y: o
-    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }), f = { x: p.x + this.detourX, y: p.y + this.detourY }, m = E(
-      { x: s - v, y: o },
-      u,
-      {
-        x: s,
-        y: o
-      }
-    ), x = { x: m.x + this.detourX, y: m.y + this.detourY }, A = D(
-      [y, p, f, x, m, w],
-      this.roundness
-    );
-    if (this.line.setAttribute("d", A), this.sourceArrow) {
-      const C = b(
-        g,
-        0,
-        0,
+class G {
+  constructor(e, t, s, o, i, n, h, c, d, u) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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(u) * d, this.detourY = Math.sin(u) * d, this.svg.appendChild(this.group), this.line = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, t, s);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", C);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const C = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", C);
+      this.targetArrow.setAttribute("d", d);
     }
   }
+  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 + this.arrowOffset, d = p(
+      { x: c, y: l.y },
+      t,
+      l
+    ), 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 + u, y: y.y + w };
+    return F(
+      [n, d, m, v, y, h],
+      this.roundness
+    );
+  }
 }
-var N = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))(N || {});
-class at {
-  constructor(t, r, s, o, i, n, c, a, l) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    h(this, "detourX");
-    h(this, "detourY");
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(l) * a, this.detourY = Math.sin(l) * a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.sourceArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
-  }
-  update(t, r, s, o, i, n) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
-    this.group.style.transform = `scale(${l}, ${d})`;
-    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
-      x: s,
-      y: o
-    }) : { x: s, y: o }, v = this.arrowLength, p = E({ x: v, y: 0 }, g, {
-      x: 0,
-      y: 0
-    }), f = { x: p.x + this.detourX, y: p.y + this.detourY }, m = E(
-      { x: s - v, y: o },
-      u,
-      {
-        x: s,
-        y: o
-      }
-    ), x = { x: m.x + this.detourX, y: m.y + this.detourY }, A = { x: (f.x + x.x) / 2, y: (f.y + x.y) / 2 }, C = {
-      x: p.x - this.curvature * Math.cos(i.direction),
-      y: p.y - this.curvature * Math.sin(i.direction)
-    }, P = {
-      x: m.x + this.curvature * Math.cos(n.direction),
-      y: m.y + this.curvature * Math.sin(n.direction)
-    }, T = { x: p.x + this.detourX, y: p.y + this.detourY }, L = { x: m.x + this.detourX, y: m.y + this.detourY }, $ = [
-      `M ${y.x} ${y.y}`,
-      `L ${p.x} ${p.y}`,
-      `C ${C.x} ${C.y} ${T.x} ${T.y} ${A.x} ${A.y}`,
-      `C ${L.x} ${L.y} ${P.x} ${P.y} ${m.x} ${m.y}`,
-      `L ${w.x} ${w.y}`
-    ].join(" ");
-    if (this.line.setAttribute("d", $), this.sourceArrow) {
-      const k = b(
-        g,
-        0,
-        0,
+var P = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(P || {});
+class ne {
+  constructor(e, t, s, o, i, n, h, c, d) {
+    a(this, "svg", T());
+    a(this, "group", $());
+    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 = D(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = C(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = C(e), this.group.appendChild(this.targetArrow));
+  }
+  update(e, t, s, o, i) {
+    this.group.style.transform = `scale(${t}, ${s})`;
+    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, t, s);
+    if (this.line.setAttribute("d", c), this.sourceArrow) {
+      const d = E(
+        n,
+        l,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", k);
+      this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const k = b(
-        u,
-        s,
-        o,
+      const d = E(
+        h,
+        e,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", k);
+      this.targetArrow.setAttribute("d", d);
     }
   }
+  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, u = this.detourY * i, w = p(
+      { x: c, y: l.y },
+      t,
+      l
+    ), m = {
+      x: w.x + d,
+      y: w.y + u
+    }, y = p(
+      { x: e.x - c, y: e.y },
+      s,
+      e
+    ), v = {
+      x: y.x + d,
+      y: y.y + u
+    }, A = { x: (m.x + v.x) / 2, y: (m.y + v.y) / 2 }, S = {
+      x: w.x + this.curvature * t.x,
+      y: w.y + this.curvature * t.y
+    }, N = {
+      x: y.x - this.curvature * s.x,
+      y: y.y - this.curvature * s.y
+    }, L = {
+      x: w.x + d,
+      y: w.y + u
+    }, M = {
+      x: y.x + d,
+      y: y.y + u
+    };
+    return [
+      `M ${n.x} ${n.y}`,
+      `L ${w.x} ${w.y}`,
+      `C ${S.x} ${S.y} ${L.x} ${L.y} ${A.x} ${A.y}`,
+      `C ${M.x} ${M.y} ${N.x} ${N.y} ${y.x} ${y.y}`,
+      `L ${h.x} ${h.y}`
+    ].join(" ");
+  }
 }
-const ct = (e) => (t) => t === N.PortCycle ? new ht(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow || e.hasTargetArrow,
-  e.cycleRadius,
-  e.smallCycleRadius
-) : t === N.NodeCycle ? new at(
-  e.color,
-  e.width,
-  e.curvature,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.detourDistance,
-  e.detourDirection
-) : new st(
-  e.color,
-  e.width,
-  e.curvature,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow,
-  e.hasTargetArrow
-), lt = (e) => (t) => t === N.PortCycle ? new z(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow || e.hasTargetArrow,
-  e.cycleSquareSide,
-  e.arrowOffset,
-  e.roundness
-) : t === N.NodeCycle ? new B(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness,
-  e.detourDistance,
-  e.detourDirection
-) : new ot(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness
-), dt = (e) => (t) => t === N.PortCycle ? new z(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow || e.hasTargetArrow,
-  e.cycleSquareSide,
-  e.arrowOffset,
-  e.roundness
-) : t === N.NodeCycle ? new B(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness,
-  e.detourDistance,
-  e.detourDirection
-) : new it(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness
-), gt = (e) => (t) => t === N.PortCycle ? new z(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.hasSourceArrow || e.hasTargetArrow,
-  e.cycleSquareSide,
-  e.arrowOffset,
-  e.roundness
-) : t === N.NodeCycle ? new B(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness,
-  e.detourDistance,
-  e.detourDirection
-) : new nt(
-  e.color,
-  e.width,
-  e.arrowLength,
-  e.arrowWidth,
-  e.arrowOffset,
-  e.hasSourceArrow,
-  e.hasTargetArrow,
-  e.roundness
+const ae = (r) => (e) => e === P.PortCycle ? new ie(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleRadius,
+  r.smallCycleRadius
+) : e === P.NodeCycle ? new ne(
+  r.color,
+  r.width,
+  r.curvature,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.detourDistance,
+  r.detourDirection
+) : new te(
+  r.color,
+  r.width,
+  r.curvature,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow,
+  r.hasTargetArrow
+), he = (r) => (e) => e === P.PortCycle ? new B(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : e === P.NodeCycle ? new G(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new re(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
+), ce = (r) => (e) => e === P.PortCycle ? new B(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : e === P.NodeCycle ? new G(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new se(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
+), de = (r) => (e) => e === P.PortCycle ? new B(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : e === P.NodeCycle ? new G(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new oe(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
 );
-class F {
-  constructor() {
-    h(this, "counter", 0);
-  }
-  create() {
-    const t = this.counter;
-    return this.counter++, t;
+class W {
+  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 ut {
-  constructor(t, r, s, o, i, n, c, a) {
-    h(this, "nodeIdGenerator", new F());
-    h(this, "portIdGenerator", new F());
-    h(this, "edgeIdGenerator", new F());
-    this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = i, this.portsDirection = n, this.nodesPriorityFn = c, this.edgesPriorityFn = a;
-  }
-  addNode(t, r, s, o, i, n, c) {
-    if (t === void 0)
-      do
-        t = this.nodeIdGenerator.create();
-      while (this.graphStore.getNode(t) !== void 0);
-    if (this.graphStore.getNode(t) !== void 0)
-      throw new Error("failed to add node with existing id");
+class f extends Error {
+  constructor() {
+    super(...arguments);
+    a(this, "name", "HtmlGraphError");
+  }
+}
+class le {
+  constructor(e, t, s, o, i, n, h, c) {
+    a(this, "nodeIdGenerator", new W(
+      (e) => this.graphStore.getNode(e) !== void 0
+    ));
+    a(this, "portIdGenerator", new W(
+      (e) => this.graphStore.getPort(e) !== void 0
+    ));
+    a(this, "edgeIdGenerator", new W(
+      (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 f("failed to add node with existing id");
     this.graphStore.addNode(
+      e,
       t,
-      r,
       s,
       o,
-      n ?? this.nodesCenterFn,
-      c ?? this.nodesPriorityFn()
-    ), this.htmlController.attachNode(t), Array.from(i ?? []).forEach((a) => {
+      n ?? this.defaultNodesCenterFn,
+      h ?? this.defaultNodesPriorityFn()
+    ), this.htmlController.attachNode(e), Array.from(i ?? []).forEach((c) => {
       this.markPort(
-        a.id ?? this.generatePortId(),
-        a.element,
-        t,
-        a.centerFn ?? this.portsCenterFn,
-        a.direction ?? this.portsDirection
+        c.id,
+        c.element,
+        e,
+        c.centerFn ?? this.defaultPortsCenterFn,
+        c.direction ?? this.defaultPortsDirection
       );
     });
   }
-  updateNode(t, r, s, o, i) {
-    const n = this.graphStore.getNode(t);
+  updateNode(e, t, s, o, i) {
+    const n = this.graphStore.getNode(e);
     if (n === void 0)
-      throw new Error("failed to update nonexisting node");
-    n.x = r ?? n.x, n.y = s ?? n.y, n.centerFn = i ?? n.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (n.priority = o, this.htmlController.updateNodePriority(t));
-  }
-  markPort(t, r, s, o, i) {
-    if (t === void 0)
-      do
-        t = this.portIdGenerator.create();
-      while (this.graphStore.getPort(t) !== void 0);
-    if (this.graphStore.getNode(s) === void 0)
-      throw new Error("failed to set port on nonexisting node");
-    if (this.graphStore.getPort(t) !== void 0)
-      throw new Error("failed to add port with existing id");
+      throw new f("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 f("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 f("failed to set port on nonexisting node");
+    if (this.graphStore.getPort(e) !== void 0)
+      throw new f("failed to add port with existing id");
     this.graphStore.addPort(
+      e,
       t,
-      r,
       s,
-      o ?? this.portsCenterFn,
-      i ?? 0
+      o ?? this.defaultPortsCenterFn,
+      i ?? this.defaultPortsDirection
     );
   }
-  updatePort(t, r) {
-    const s = this.graphStore.getPort(t);
-    if (s === void 0)
-      throw new Error("failed to unset nonexisting port");
-    s.direction = (r == null ? void 0 : r.direction) ?? s.direction, s.centerFn = (r == null ? void 0 : r.centerFn) ?? s.centerFn, this.htmlController.updatePortEdges(t);
-  }
-  unmarkPort(t) {
-    if (this.graphStore.getPort(t) === void 0)
-      throw new Error("failed to unset nonexisting port");
-    this.graphStore.getPortAdjacentEdges(t).forEach((r) => {
-      this.removeEdge(r);
-    }), this.graphStore.removePort(t);
-  }
-  addEdge(t, r, s, o, i) {
-    if (t === void 0)
-      do
-        t = this.edgeIdGenerator.create();
-      while (this.graphStore.getEdge(t) !== void 0);
-    if (this.graphStore.getPort(r) === void 0)
-      throw new Error("failed to add edge from nonexisting port");
+  updatePort(e, t, s) {
+    const o = this.graphStore.getPort(e);
+    if (o === void 0)
+      throw new f("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 f("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 f("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(s) === void 0)
-      throw new Error("failed to add edge to nonexisting port");
-    if (this.graphStore.getEdge(t) !== void 0)
-      throw new Error("failed to add edge with existing id");
-    const n = this.resolveEdgeType(r, s);
+      throw new f("failed to add edge to nonexisting port");
+    if (this.graphStore.getEdge(e) !== void 0)
+      throw new f("failed to add edge with existing id");
+    const n = this.resolveEdgeType(t, s);
     this.graphStore.addEdge(
+      e,
       t,
-      r,
       s,
       o(n),
-      i ?? this.edgesPriorityFn()
-    ), this.htmlController.attachEdge(t);
+      i ?? this.defaultEdgesPriorityFn()
+    ), this.htmlController.attachEdge(e);
   }
-  updateEdge(t, r, s) {
-    const o = this.graphStore.getEdge(t);
+  updateEdge(e, t, s) {
+    const o = this.graphStore.getEdge(e);
     if (o === void 0)
-      throw new Error("failed to update nonexisting edge");
-    if (r !== void 0) {
+      throw new f("failed to update nonexisting edge");
+    if (t !== void 0) {
       const i = this.resolveEdgeType(o.from, o.to);
-      this.htmlController.detachEdge(t), o.shape = r(i), this.htmlController.attachEdge(t);
+      o.shape = t(i), this.htmlController.updateEdgeShape(e);
     }
-    s !== void 0 && (o.priority = s, this.htmlController.updateEdgePriority(t));
+    s !== void 0 && (o.priority = s, this.htmlController.updateEdgePriority(e));
   }
-  removeEdge(t) {
-    if (this.graphStore.getEdge(t) === void 0)
-      throw new Error("failed to remove nonexisting edge");
-    this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
+  removeEdge(e) {
+    if (this.graphStore.getEdge(e) === void 0)
+      throw new f("failed to remove nonexisting edge");
+    this.htmlController.detachEdge(e), this.graphStore.removeEdge(e);
   }
-  removeNode(t) {
-    if (this.graphStore.getNode(t) === void 0)
-      throw new Error("failed to remove nonexisting node");
-    this.htmlController.detachNode(t), this.graphStore.removeNode(t);
+  patchViewportMatrix(e, t, s) {
+    this.viewportTransformer.patchViewportMatrix(e, t, s), this.htmlController.applyTransform();
   }
-  patchViewportMatrix(t, r, s) {
-    this.viewportTransformer.patchViewportMatrix(t, r, s), this.htmlController.applyTransform();
+  patchContentMatrix(e, t, s) {
+    this.viewportTransformer.patchContentMatrix(e, t, s), this.htmlController.applyTransform();
   }
-  patchContentMatrix(t, r, s) {
-    this.viewportTransformer.patchContentMatrix(t, r, s), this.htmlController.applyTransform();
-  }
-  attach(t) {
-    this.htmlController.attach(t);
+  attach(e) {
+    this.htmlController.attach(e);
   }
   detach() {
     this.htmlController.detach();
@@ -1076,39 +886,211 @@ class ut {
   destroy() {
     this.htmlController.destroy();
   }
-  generatePortId() {
-    let t;
-    do
-      t = this.nodeIdGenerator.create();
-    while (this.graphStore.getPort(t) !== void 0);
-    return t;
+  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 ue = () => {
+  const r = document.createElement("div");
+  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
+}, ge = () => {
+  const r = document.createElement("canvas");
+  return r.style.position = "absolute", r.style.inset = "0", r;
+}, we = () => {
+  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;
+}, ye = () => {
+  const r = document.createElement("div");
+  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden", r;
+};
+class me {
+  constructor() {
+    a(this, "keyMap", /* @__PURE__ */ new Map());
+    a(this, "valueMap", /* @__PURE__ */ 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 pe {
+  constructor(e, t, s, o) {
+    a(this, "canvasWrapper", null);
+    a(this, "host", ue());
+    a(this, "canvas", ge());
+    a(this, "container", we());
+    a(this, "canvasCtx");
+    a(this, "canvasResizeObserver");
+    a(this, "nodesResizeObserver");
+    a(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
+    a(this, "nodeIdToWrapperElementMap", new me());
+    a(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    this.graphStore = e, this.viewportTransformer = t, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
+    const i = this.canvas.getContext("2d");
+    if (i === null)
+      throw new f("unable to get canvas context");
+    this.canvasCtx = i, this.host.appendChild(this.canvas), this.host.appendChild(this.container), this.canvasResizeObserver = this.createHostResizeObserver(), this.nodesResizeObserver = this.createNodesResizeObserver();
+  }
+  clear() {
+    this.edgeIdToElementMap.forEach((e, t) => {
+      this.detachEdge(t);
+    }), this.nodeIdToWrapperElementMap.forEach((e, t) => {
+      this.detachNode(t);
+    });
+  }
+  attach(e) {
+    this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host), this.canvasResizeObserver.observe(this.canvasWrapper);
   }
-  resolveEdgeType(t, r) {
-    let s = N.Regular;
-    const o = this.graphStore.getPortNode(t), i = this.graphStore.getPortNode(r);
-    return t === r ? s = N.PortCycle : o === i && (s = N.NodeCycle), s;
+  detach() {
+    this.canvasWrapper !== null && (this.canvasResizeObserver.unobserve(this.canvasWrapper), this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
+  }
+  destroy() {
+    this.canvasResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.container), this.clear(), this.detach();
+  }
+  applyTransform() {
+    this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
+    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 = ye();
+    s.appendChild(t.element), this.container.appendChild(s), this.nodeElementToIdMap.set(t.element, e), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoords(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.updateEdgeCoords(e), this.updateEdgePriority(e);
+  }
+  detachEdge(e) {
+    const t = this.graphStore.getEdge(e);
+    this.container.removeChild(t.shape.svg), this.edgeIdToElementMap.delete(e);
+  }
+  updateNodeCoordinates(e) {
+    const t = this.graphStore.getNodeAdjacentEdgeIds(e);
+    this.updateNodeCoords(e), t.forEach((s) => {
+      this.updateEdgeCoords(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.updateEdgeCoords(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.updateEdgeCoords(s);
+    });
+  }
+  createHostResizeObserver() {
+    return new ResizeObserver(() => {
+      this.updateCanvasDimensions(), this.applyTransform();
+    });
+  }
+  createNodesResizeObserver() {
+    return new ResizeObserver((e) => {
+      e.forEach((t) => {
+        const s = t.target, o = this.nodeIdToWrapperElementMap.getByValue(s);
+        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdgeIds(o).forEach((n) => {
+          this.updateEdgeCoords(n);
+        });
+      });
+    });
+  }
+  updateCanvasDimensions() {
+    const { width: e, height: t } = this.host.getBoundingClientRect();
+    this.canvas.width = e, this.canvas.height = t;
+  }
+  updateNodeCoords(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, u = n.y - i * c;
+    t.style.transform = `matrix(1, 0, 0, 1, ${d}, ${u})`;
+  }
+  updateEdgeCoords(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
+    }, u = {
+      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
+    ), m = o.centerFn(
+      n.width * c.scale,
+      n.height * c.scale
+    ), y = {
+      x: d.x + w.x,
+      y: d.y + w.y
+    }, v = {
+      x: u.x + m.x,
+      y: u.y + m.y
+    }, A = Math.min(y.x, v.x), S = Math.min(y.y, v.y), N = Math.abs(v.x - y.x), L = Math.abs(v.y - y.y);
+    t.shape.svg.style.width = `${N}px`, t.shape.svg.style.height = `${L}px`, t.shape.svg.style.transform = `translate(${A}px, ${S}px)`;
+    const M = y.x <= v.x ? 1 : -1, b = y.y <= v.y ? 1 : -1;
+    t.shape.update(
+      { x: N, y: L },
+      M,
+      b,
+      s.direction,
+      o.direction
+    );
   }
 }
-class wt {
-  constructor(t, r, s, o, i, n) {
-    h(this, "publicViewportTransformer");
-    h(this, "publicGraphStore");
-    h(this, "canvasController");
-    const c = new I(), a = new et();
-    this.publicGraphStore = new rt(a), this.publicViewportTransformer = new tt(
-      c
+class ve {
+  constructor(e, t, s, o, i, n) {
+    a(this, "publicViewportTransformer");
+    a(this, "publicGraphStore");
+    a(this, "canvasController");
+    const h = new Q(), c = new q();
+    this.publicGraphStore = new ee(c), this.publicViewportTransformer = new Z(
+      h
     );
-    const l = new q(
-      a,
+    const d = new pe(
       c,
+      h,
       this.publicViewportTransformer,
-      t
+      e
     );
-    this.canvasController = new ut(
-      a,
-      l,
+    this.canvasController = new le(
       c,
-      r,
+      d,
+      h,
+      t,
       s,
       o,
       i,
@@ -1116,234 +1098,252 @@ class wt {
     );
   }
 }
-const j = (e, t) => ({
-  x: e / 2,
-  y: t / 2
-}), pt = () => () => {
-}, mt = (e, t, r, s, o, i) => {
-  e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.fillStyle = i, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
-  const n = t.getContentMatrix(), c = s * n.scale;
-  let a = 0, l = 0, d = c / 2;
-  do
-    d *= 2, a = e.canvas.width / d, l = e.canvas.height / d;
-  while (a * l > 1e4);
-  const g = n.dx - Math.floor(n.dx / d) * d, u = n.dy - Math.floor(n.dy / d) * d, y = o * n.scale, w = 2 * Math.PI, v = g - d, p = u - d, f = e.canvas.width + g, m = e.canvas.height + u;
-  e.fillStyle = r;
-  for (let x = v; x <= f; x += d)
-    for (let A = p; A <= m; A += d)
-      e.beginPath(), e.arc(x, A, y, 0, w), e.closePath(), e.fill();
-}, vt = (e, t, r, s) => (o, i) => {
-  mt(
-    o,
+const H = (r, e) => ({
+  x: r / 2,
+  y: e / 2
+}), fe = () => () => {
+}, xe = (r, e, t, s, o, i, n) => {
+  r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = i, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
+  const h = e.getContentMatrix(), c = s * h.scale, d = r.canvas.width / c, u = r.canvas.height / c;
+  if (d * u > n)
+    return;
+  const w = h.dx - Math.floor(h.dx / c) * c, m = h.dy - Math.floor(h.dy / c) * c, y = o * h.scale, v = 2 * Math.PI, A = w - c, S = m - c, N = r.canvas.width + w, L = r.canvas.height + m;
+  r.fillStyle = t;
+  for (let M = A; M <= N; M += c)
+    for (let b = S; b <= L; b += c)
+      r.beginPath(), r.arc(M, b, y, 0, v), r.closePath(), r.fill();
+}, Ee = (r, e, t, s, o) => (i, n) => {
+  xe(
     i,
+    n,
+    r,
     e,
     t,
-    r,
-    s
+    s,
+    o
   );
-}, yt = (e) => {
-  switch (e == null ? void 0 : e.type) {
+}, Ce = (r) => {
+  switch (r == null ? void 0 : r.type) {
     case "custom":
-      return e.drawingFn;
+      return r.drawingFn;
     case "dots":
-      return vt(
-        e.dotColor ?? "#d8d8d8",
-        e.dotGap ?? 25,
-        e.dotRadius ?? 1.5,
-        e.color ?? "#ffffff"
+      return Ee(
+        r.dotColor ?? "#d8d8d8",
+        r.dotGap ?? 25,
+        r.dotRadius ?? 1.5,
+        r.color ?? "#ffffff",
+        r.limit ?? 1e4
       );
     default:
-      return pt();
-  }
-}, Y = (e) => {
-  switch (e == null ? void 0 : e.type) {
+      return fe();
+  }
+}, g = {
+  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
+}, z = (r) => {
+  switch (r == null ? void 0 : r.type) {
     case "custom":
-      return e.factory;
+      return r.factory;
     case "straight":
-      return lt({
-        color: e.color ?? "#5c5c5c",
-        width: e.width ?? 1,
-        arrowLength: e.arrowLength ?? 15,
-        arrowWidth: e.arrowWidth ?? 4,
-        arrowOffset: e.arrowOffset ?? 15,
-        hasSourceArrow: e.hasSourceArrow ?? !1,
-        hasTargetArrow: e.hasTargetArrow ?? !1,
-        cycleSquareSide: e.cycleSquareSide ?? 30,
-        roundness: e.roundness ?? 10,
-        detourDistance: e.detourDistance ?? 100,
-        detourDirection: e.detourDirection ?? -Math.PI / 2
+      return he({
+        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 dt({
-        color: e.color ?? "#5c5c5c",
-        width: e.width ?? 1,
-        arrowLength: e.arrowLength ?? 15,
-        arrowWidth: e.arrowWidth ?? 4,
-        arrowOffset: e.arrowOffset ?? 15,
-        hasSourceArrow: e.hasSourceArrow ?? !1,
-        hasTargetArrow: e.hasTargetArrow ?? !1,
-        cycleSquareSide: e.cycleSquareSide ?? 30,
-        roundness: e.roundness ?? 10,
-        detourDistance: e.detourDistance ?? 100,
-        detourDirection: e.detourDirection ?? -Math.PI / 2
+      return ce({
+        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 gt({
-        color: e.color ?? "#5c5c5c",
-        width: e.width ?? 1,
-        arrowLength: e.arrowLength ?? 15,
-        arrowWidth: e.arrowWidth ?? 4,
-        arrowOffset: e.arrowOffset ?? 15,
-        hasSourceArrow: e.hasSourceArrow ?? !1,
-        hasTargetArrow: e.hasTargetArrow ?? !1,
-        cycleSquareSide: e.cycleSquareSide ?? 30,
-        roundness: e.roundness ?? 10,
-        detourDistance: e.detourDistance ?? 100,
-        detourDirection: e.detourDirection ?? -Math.PI / 2
+      return de({
+        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 ct({
-        color: e.color ?? "#5c5c5c",
-        width: e.width ?? 1,
-        curvature: e.curvature ?? 90,
-        arrowLength: e.arrowLength ?? 15,
-        arrowWidth: e.arrowWidth ?? 4,
-        hasSourceArrow: e.hasSourceArrow ?? !1,
-        hasTargetArrow: e.hasTargetArrow ?? !1,
-        cycleRadius: e.cycleRadius ?? 30,
-        smallCycleRadius: e.smallCycleRadius ?? 15,
-        detourDistance: e.detourDistance ?? 100,
-        detourDirection: e.detourDirection ?? -Math.PI / 2
+      return ae({
+        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
       });
   }
-}, X = (e) => () => e, H = X(0), R = () => {
-  let e = 0;
-  return () => e++;
-}, ft = (e, t) => {
-  const r = [
-    H,
-    H
+}, I = (r) => () => r, U = I(0), k = () => {
+  let r = 0;
+  return () => r++;
+}, Ae = (r, e) => {
+  const t = [
+    U,
+    U
   ];
-  e === "incremental" && (r[0] = R()), t === "incremental" && (r[1] = R());
-  const s = R();
-  return e === "shared-incremental" && (r[0] = s), t === "shared-incremental" && (r[1] = s), typeof e == "number" && (r[0] = X(e)), typeof t == "number" && (r[1] = X(t)), typeof e == "function" && (r[0] = e), typeof t == "function" && (r[1] = t), r;
-}, xt = (e) => {
-  var s, o, i, n, c, a;
-  const [t, r] = ft(
-    (s = e.nodes) == null ? void 0 : s.priority,
-    (o = e.edges) == null ? void 0 : o.priority
+  r === "incremental" && (t[0] = k()), e === "incremental" && (t[1] = k());
+  const s = k();
+  return r === "shared-incremental" && (t[0] = s), e === "shared-incremental" && (t[1] = s), typeof r == "number" && (t[0] = I(r)), typeof e == "number" && (t[1] = I(e)), typeof r == "function" && (t[0] = r), typeof e == "function" && (t[1] = e), t;
+}, Se = (r) => {
+  var s, o, i, n, h, c;
+  const [e, t] = Ae(
+    (s = r.nodes) == null ? void 0 : s.priority,
+    (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     background: {
-      drawingFn: yt(
-        e.background ?? { type: "none" }
+      drawingFn: Ce(
+        r.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((i = e.nodes) == null ? void 0 : i.centerFn) ?? j,
-      priorityFn: t
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? H,
+      priorityFn: e
     },
     ports: {
-      centerFn: ((n = e.ports) == null ? void 0 : n.centerFn) ?? j,
-      direction: ((c = e.ports) == null ? void 0 : c.direction) ?? 0
+      centerFn: ((n = r.ports) == null ? void 0 : n.centerFn) ?? H,
+      direction: ((h = r.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Y(((a = e.edges) == null ? void 0 : a.shape) ?? {}),
-      priorityFn: r
+      shapeFactory: z(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
+      priorityFn: t
     }
   };
 };
-class Et {
-  constructor(t) {
-    h(this, "transformation");
-    h(this, "model");
-    h(this, "di");
-    h(this, "edgeShapeFactory");
-    this.apiOptions = t;
-    const r = xt(this.apiOptions ?? {});
-    this.di = new wt(
-      r.background.drawingFn,
-      r.nodes.centerFn,
-      r.ports.centerFn,
-      r.ports.direction,
-      r.nodes.priorityFn,
-      r.edges.priorityFn
-    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = r.edges.shapeFactory;
-  }
-  addNode(t) {
+class Pe {
+  constructor(e) {
+    a(this, "transformation");
+    a(this, "model");
+    a(this, "di");
+    a(this, "edgeShapeFactory");
+    this.apiOptions = e;
+    const t = Se(this.apiOptions ?? {});
+    this.di = new ve(
+      t.background.drawingFn,
+      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(
-      t.id,
-      t.element,
-      t.x,
-      t.y,
-      t.ports,
-      t.centerFn,
-      t.priority
+      e.id,
+      e.element,
+      e.x,
+      e.y,
+      e.ports,
+      e.centerFn,
+      e.priority
     ), this;
   }
-  updateNode(t, r) {
+  updateNode(e, t) {
     return this.di.canvasController.updateNode(
-      t,
-      r.x,
-      r.y,
-      r.priority,
-      r.centerFn
+      e,
+      t.x,
+      t.y,
+      t.priority,
+      t.centerFn
     ), this;
   }
-  removeNode(t) {
-    return this.di.canvasController.removeNode(t), this;
+  removeNode(e) {
+    return this.di.canvasController.removeNode(e), this;
   }
-  markPort(t) {
+  markPort(e) {
     return this.di.canvasController.markPort(
-      t.id,
-      t.element,
-      t.nodeId,
-      t.centerFn,
-      t.direction
+      e.id,
+      e.element,
+      e.nodeId,
+      e.centerFn,
+      e.direction
     ), this;
   }
-  updatePort(t, r) {
-    return this.di.canvasController.updatePort(t, r), this;
+  updatePort(e, t) {
+    return this.di.canvasController.updatePort(
+      e,
+      t == null ? void 0 : t.direction,
+      t == null ? void 0 : t.centerFn
+    ), this;
   }
-  unmarkPort(t) {
-    return this.di.canvasController.unmarkPort(t), this;
+  unmarkPort(e) {
+    return this.di.canvasController.unmarkPort(e), this;
   }
-  addEdge(t) {
-    const r = t.shape !== void 0 ? Y(t.shape) : this.edgeShapeFactory;
+  addEdge(e) {
+    const t = e.shape !== void 0 ? z(e.shape) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
-      t.id,
-      t.from,
-      t.to,
-      r,
-      t.priority
+      e.id,
+      e.from,
+      e.to,
+      t,
+      e.priority
     ), this;
   }
-  updateEdge(t, r) {
-    const s = r.shape !== void 0 ? Y(r.shape) : void 0;
-    return this.di.canvasController.updateEdge(t, s, r.priority), this;
+  updateEdge(e, t) {
+    const s = t.shape !== void 0 ? z(t.shape) : void 0;
+    return this.di.canvasController.updateEdge(e, s, t.priority), this;
   }
-  removeEdge(t) {
-    return this.di.canvasController.removeEdge(t), this;
+  removeEdge(e) {
+    return this.di.canvasController.removeEdge(e), this;
   }
-  patchViewportMatrix(t) {
+  patchViewportMatrix(e) {
     return this.di.canvasController.patchViewportMatrix(
-      t.scale ?? null,
-      t.dx ?? null,
-      t.dy ?? null
+      e.scale ?? null,
+      e.dx ?? null,
+      e.dy ?? null
     ), this;
   }
-  patchContentMatrix(t) {
+  patchContentMatrix(e) {
     return this.di.canvasController.patchContentMatrix(
-      t.scale ?? null,
-      t.dx ?? null,
-      t.dy ?? null
+      e.scale ?? null,
+      e.dx ?? null,
+      e.dy ?? null
     ), this;
   }
   clear() {
     return this.di.canvasController.clear(), this;
   }
-  attach(t) {
-    return this.di.canvasController.attach(t), this;
+  attach(e) {
+    return this.di.canvasController.attach(e), this;
   }
   detach() {
     return this.di.canvasController.detach(), this;
@@ -1352,179 +1352,178 @@ class Et {
     this.di.canvasController.destroy();
   }
 }
-const V = (e, t, r) => {
-  const { x: s, y: o, width: i, height: n } = e.getBoundingClientRect();
-  return t >= s && t < s + i && r >= o && r <= o + n;
-}, W = (e, t, r) => t >= 0 && t < e.innerWidth && r >= 0 && r <= e.innerHeight, O = (e, t) => {
-  t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
+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;
+}, V = (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 At {
-  constructor(t, r) {
-    h(this, "model");
-    h(this, "transformation");
-    h(this, "maxNodePriority", 0);
-    h(this, "nodes", /* @__PURE__ */ new Map());
-    h(this, "grabbedNodeId", null);
-    h(this, "onNodeDrag");
-    h(this, "onBeforeNodeDrag");
-    h(this, "nodeIdGenerator", new F());
-    h(this, "element", null);
-    h(this, "onCanvasMouseUp", () => {
+class Me {
+  constructor(e, t) {
+    a(this, "model");
+    a(this, "transformation");
+    a(this, "maxNodePriority", 0);
+    a(this, "nodes", /* @__PURE__ */ new Map());
+    a(this, "grabbedNodeId", null);
+    a(this, "onNodeDrag");
+    a(this, "onBeforeNodeDrag");
+    a(this, "nodeIdGenerator", new W(
+      (e) => this.nodes.has(e)
+    ));
+    a(this, "element", null);
+    a(this, "onCanvasMouseUp", () => {
       this.cancelMouseDrag();
     });
-    h(this, "onCanvasMouseMove", (t) => {
-      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !W(this.window, t.clientX, t.clientY))) {
+    a(this, "onCanvasMouseMove", (e) => {
+      if (this.element !== null && (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
-      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
+      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
-    h(this, "onCanvasTouchStart", (t) => {
+    a(this, "onCanvasTouchStart", (e) => {
       this.previousTouchCoords = [
-        t.touches[0].clientX,
-        t.touches[0].clientY
+        e.touches[0].clientX,
+        e.touches[0].clientY
       ];
     });
-    h(this, "onCanvasTouchMove", (t) => {
-      if (t.touches.length === 1) {
-        const r = t.touches[0];
-        if (this.element !== null && (!V(this.element, r.clientX, r.clientY) || !W(this.window, r.clientX, r.clientY))) {
+    a(this, "onCanvasTouchMove", (e) => {
+      if (e.touches.length === 1) {
+        const t = e.touches[0];
+        if (this.element !== null && (!O(this.element, t.clientX, t.clientY) || !V(this.window, t.clientX, t.clientY))) {
           this.cancelTouchDrag();
           return;
         }
         if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
-          t.stopImmediatePropagation();
-          const s = r.clientX - this.previousTouchCoords[0], o = r.clientY - this.previousTouchCoords[1];
+          e.stopImmediatePropagation();
+          const s = t.clientX - this.previousTouchCoords[0], o = t.clientY - this.previousTouchCoords[1];
           this.dragNode(this.grabbedNodeId, s, o), this.previousTouchCoords = [
-            t.touches[0].clientX,
-            t.touches[0].clientY
+            e.touches[0].clientX,
+            e.touches[0].clientY
           ];
         }
       }
     });
-    h(this, "onCanvasTouchEnd", (t) => {
-      t.touches.length > 0 ? this.previousTouchCoords = [
-        t.touches[0].clientX,
-        t.touches[0].clientY
+    a(this, "onCanvasTouchEnd", (e) => {
+      e.touches.length > 0 ? this.previousTouchCoords = [
+        e.touches[0].clientX,
+        e.touches[0].clientY
       ] : this.cancelTouchDrag();
     });
-    h(this, "previousTouchCoords", null);
-    h(this, "freezePriority");
-    h(this, "window", window);
+    a(this, "previousTouchCoords", null);
+    a(this, "freezePriority");
+    a(this, "window", window);
+    a(this, "dragCursor");
     var i, n;
-    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
     const s = () => {
     };
-    this.onNodeDrag = ((i = r == null ? void 0 : r.events) == null ? void 0 : i.onNodeDrag) ?? s;
+    this.onNodeDrag = ((i = t == null ? void 0 : t.events) == null ? void 0 : i.onNodeDrag) ?? s;
     const o = () => !0;
-    this.onBeforeNodeDrag = ((n = r == null ? void 0 : r.events) == null ? void 0 : n.onBeforeNodeDrag) ?? o, this.freezePriority = (r == null ? void 0 : r.grabPriorityStrategy) === "freeze";
-  }
-  addNode(t) {
-    let r = t.id;
-    if (r === void 0)
-      do
-        r = this.nodeIdGenerator.create();
-      while (this.nodes.has(r));
-    this.canvas.addNode({ ...t, id: r }), this.updateMaxNodePriority(r);
+    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(r);
+      const n = this.model.getNode(t);
       this.onBeforeNodeDrag({
-        nodeId: r,
-        element: t.element,
+        nodeId: t,
+        element: e.element,
         x: n.x,
         y: n.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = r, O(this.element, "grab"), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
+      }) && (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(r);
+      const n = this.model.getNode(t);
       this.onBeforeNodeDrag({
-        nodeId: r,
-        element: t.element,
+        nodeId: t,
+        element: e.element,
         x: n.x,
         y: n.y
-      }) && i.touches.length === 1 && (this.grabbedNodeId = r, this.moveNodeOnTop(r), this.window.addEventListener("touchmove", this.onCanvasTouchMove), this.window.addEventListener("touchend", this.onCanvasTouchEnd), this.window.addEventListener("touchcancel", this.onCanvasTouchEnd));
+      }) && 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(r, {
-      element: t.element,
+    return this.nodes.set(t, {
+      element: e.element,
       onMouseDown: s,
       onTouchStart: o
-    }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", o), this;
+    }), e.element.addEventListener("mousedown", s), e.element.addEventListener("touchstart", o), this;
   }
-  updateNode(t, r) {
-    return this.canvas.updateNode(t, r), this.updateMaxNodePriority(t), this;
+  updateNode(e, t) {
+    return this.canvas.updateNode(e, t), this.updateMaxNodePriority(e), this;
   }
-  removeNode(t) {
-    const r = this.nodes.get(t);
-    return r !== void 0 && (r.element.removeEventListener("mousedown", r.onMouseDown), r.element.removeEventListener("touchstart", r.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), 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(t) {
-    return this.canvas.markPort(t), this;
+  markPort(e) {
+    return this.canvas.markPort(e), this;
   }
-  updatePort(t, r) {
-    return this.canvas.updatePort(t, r), this;
+  updatePort(e, t) {
+    return this.canvas.updatePort(e, t), this;
   }
-  unmarkPort(t) {
-    return this.canvas.unmarkPort(t), this;
+  unmarkPort(e) {
+    return this.canvas.unmarkPort(e), this;
   }
-  addEdge(t) {
-    return this.canvas.addEdge(t), this;
+  addEdge(e) {
+    return this.canvas.addEdge(e), this;
   }
-  updateEdge(t, r) {
-    return this.canvas.updateEdge(t, r), this;
+  updateEdge(e, t) {
+    return this.canvas.updateEdge(e, t), this;
   }
-  removeEdge(t) {
-    return this.canvas.removeEdge(t), this;
+  removeEdge(e) {
+    return this.canvas.removeEdge(e), this;
   }
-  patchViewportMatrix(t) {
-    return this.canvas.patchViewportMatrix(t), this;
+  patchViewportMatrix(e) {
+    return this.canvas.patchViewportMatrix(e), this;
   }
-  patchContentMatrix(t) {
-    return this.canvas.patchContentMatrix(t), this;
+  patchContentMatrix(e) {
+    return this.canvas.patchContentMatrix(e), this;
   }
   clear() {
-    return this.canvas.clear(), this.nodes.forEach((t) => {
-      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
+    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(t) {
-    return this.detach(), this.element = t, this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.canvas.attach(this.element), 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((t) => {
-      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
+    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(t, r, s) {
-    const o = this.model.getNode(t);
+  dragNode(e, t, s) {
+    const o = this.model.getNode(e);
     if (o === null)
-      throw new Error("failed to drag nonexisting node");
-    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, c = i.scale * o.y + i.dy, a = n + r, l = c + s, d = this.canvas.transformation.getViewportMatrix(), g = d.scale * a + d.dx, u = d.scale * l + d.dy;
-    this.canvas.updateNode(t, { x: g, y: u }), this.onNodeDrag({
-      nodeId: t,
+      throw new f("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, 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,
       x: o.x,
       y: o.y
     });
   }
-  updateMaxNodePriority(t) {
-    const r = this.model.getNode(t).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, r);
+  updateMaxNodePriority(e) {
+    const t = this.model.getNode(e).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
-  moveNodeOnTop(t) {
+  moveNodeOnTop(e) {
     if (this.freezePriority)
       return;
-    this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
-    const r = this.maxNodePriority - 1;
-    this.model.getNodeAdjacentEdges(t).forEach((o) => {
-      this.updateEdge(o, { priority: r });
+    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 && O(this.element, null), this.removeMouseDragListeners();
+    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);
@@ -1536,158 +1535,159 @@ class At {
     this.window.removeEventListener("touchmove", this.onCanvasTouchMove), this.window.removeEventListener("touchend", this.onCanvasTouchEnd), this.window.removeEventListener("touchcancel", this.onCanvasTouchEnd);
   }
 }
-const Ct = () => {
-}, St = (e, t) => t, bt = (e, t) => {
-  const r = t !== null ? 1 / t : null, s = e !== null ? 1 / e : null;
-  return (o, i) => s !== null && i.scale > s && i.scale > o.scale || r !== null && i.scale < r && i.scale < o.scale ? o : i;
-}, Nt = (e, t, r, s) => (o, i, n, c) => {
-  let a = i.dx, l = i.dy;
-  e !== null && a < e && a < o.dx && (a = o.dx);
-  const d = n * o.scale;
-  t !== null && a > t - d && a > o.dx && (a = o.dx), r !== null && l < r && l < o.dy && (l = o.dy);
-  const g = c * o.scale;
-  return s !== null && l > s - g && l > o.dy && (l = o.dy), { scale: i.scale, dx: a, dy: l };
-}, U = (e) => {
-  switch (e.type) {
+const Ne = () => {
+}, Le = (r, e) => e, be = (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;
+}, Te = (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 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) => {
+  switch (r.type) {
     case "scale-limit":
-      return bt(
-        e.minContentScale ?? null,
-        e.maxContentScale ?? null
+      return be(
+        r.minContentScale ?? null,
+        r.maxContentScale ?? null
       );
     case "shift-limit":
-      return Nt(
-        e.minX ?? null,
-        e.maxX ?? null,
-        e.minY ?? null,
-        e.maxY ?? null
+      return Te(
+        r.minX ?? null,
+        r.maxX ?? null,
+        r.minY ?? null,
+        r.maxY ?? null
       );
     default:
-      return e.preprocessorFn;
+      return r.preprocessorFn;
   }
-}, Mt = (e) => (t, r, s, o) => e.reduce(
-  (i, n) => n(t, i, s, o),
-  r
+}, $e = (r) => (e, t, s, o) => r.reduce(
+  (i, n) => n(e, i, s, o),
+  t
 );
-class Pt {
-  constructor(t, r) {
-    h(this, "model");
-    h(this, "transformation");
-    h(this, "element", null);
-    h(this, "prevTouches", null);
-    h(this, "onTransformFinished");
-    h(this, "transformPreprocessor");
-    h(this, "isScalable");
-    h(this, "isShiftable");
-    h(this, "wheelSensitivity");
-    h(this, "window", window);
-    h(this, "onMouseDown", () => {
-      this.element !== null && (O(this.element, "grab"), this.window.addEventListener("mousemove", this.onMouseMove), this.window.addEventListener("mouseup", this.onMouseUp));
+class De {
+  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));
     });
-    h(this, "onMouseMove", (t) => {
+    a(this, "onMouseMove", (e) => {
       if (!this.isShiftable || this.element === null)
         return;
-      if (!V(this.element, t.clientX, t.clientY) || !W(this.window, t.clientX, t.clientY)) {
+      if (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
-      const r = -t.movementX, s = -t.movementY;
-      this.moveViewport(r, s);
+      const t = -e.movementX, s = -e.movementY;
+      this.moveViewport(t, s);
     });
-    h(this, "onMouseUp", () => {
+    a(this, "onMouseUp", () => {
       this.stopMouseDrag();
     });
-    h(this, "onWheelScroll", (t) => {
+    a(this, "onWheelScroll", (e) => {
       if (this.element === null || this.isScalable === !1)
         return;
-      t.preventDefault();
-      const { left: r, top: s } = this.element.getBoundingClientRect(), o = t.clientX - r, i = t.clientY - s, c = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(c, o, i);
+      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);
     });
-    h(this, "onTouchStart", (t) => {
-      this.prevTouches = this.getAverageTouch(t), this.window.addEventListener("touchmove", this.onTouchMove), this.window.addEventListener("touchend", this.onTouchEnd), this.window.addEventListener("touchcancel", this.onTouchEnd);
+    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);
     });
-    h(this, "onTouchMove", (t) => {
+    a(this, "onTouchMove", (e) => {
       if (this.prevTouches === null || !this.isShiftable || this.element === null)
         return;
-      const r = this.getAverageTouch(t);
-      if (!r.touches.every(
-        (o) => V(this.element, o[0], o[1]) && W(this.window, o[0], o[1])
+      const t = this.getAverageTouch(e);
+      if (!t.touches.every(
+        (o) => O(this.element, o[0], o[1]) && V(this.window, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
       }
-      if ((r.touchesCnt === 1 || r.touchesCnt === 2) && this.moveViewport(
-        -(r.x - this.prevTouches.x),
-        -(r.y - this.prevTouches.y)
-      ), r.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: i } = this.element.getBoundingClientRect(), n = this.prevTouches.x - o, c = this.prevTouches.y - i, l = 1 / (r.scale / this.prevTouches.scale);
-        this.scaleViewport(l, n, c);
+      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 = r;
+      this.prevTouches = t;
     });
-    h(this, "onTouchEnd", (t) => {
-      t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.stopTouchDrag();
+    a(this, "onTouchEnd", (e) => {
+      e.touches.length > 0 ? this.prevTouches = this.getAverageTouch(e) : this.stopTouchDrag();
     });
-    h(this, "observer", new ResizeObserver(() => {
+    a(this, "observer", new ResizeObserver(() => {
       if (this.element !== null) {
-        const t = this.canvas.transformation.getViewportMatrix(), { width: r, height: s } = this.element.getBoundingClientRect(), o = this.transformPreprocessor(
-          t,
+        const e = this.canvas.transformation.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), o = this.transformPreprocessor(
+          e,
+          e,
           t,
-          r,
           s
         );
         this.canvas.patchViewportMatrix(o), this.onTransformFinished(o);
       }
     }));
-    var i, n, c, a, l, d, g;
-    this.canvas = t, this.options = r, 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 = ((a = (c = this.options) == null ? void 0 : c.shift) == null ? void 0 : a.enabled) !== !1;
-    const s = (d = (l = this.options) == null ? void 0 : l.scale) == null ? void 0 : d.wheelSensitivity;
-    this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((g = r == null ? void 0 : r.events) == null ? void 0 : g.onTransformFinished) ?? Ct;
-    const o = r == null ? void 0 : r.transformPreprocessor;
-    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = Mt(
+    a(this, "shiftCursor");
+    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 = (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) ?? Ne;
+    const o = t == null ? void 0 : t.transformPreprocessor;
+    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = $e(
       o.map(
-        (u) => U(u)
+        (y) => K(y)
       )
-    ) : this.transformPreprocessor = U(o) : this.transformPreprocessor = St;
+    ) : this.transformPreprocessor = K(o) : this.transformPreprocessor = Le, this.shiftCursor = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab";
   }
-  addNode(t) {
-    return this.canvas.addNode(t), this;
+  addNode(e) {
+    return this.canvas.addNode(e), this;
   }
-  updateNode(t, r) {
-    return this.canvas.updateNode(t, r), this;
+  updateNode(e, t) {
+    return this.canvas.updateNode(e, t), this;
   }
-  removeNode(t) {
-    return this.canvas.removeNode(t), this;
+  removeNode(e) {
+    return this.canvas.removeNode(e), this;
   }
-  markPort(t) {
-    return this.canvas.markPort(t), this;
+  markPort(e) {
+    return this.canvas.markPort(e), this;
   }
-  updatePort(t, r) {
-    return this.canvas.updatePort(t, r), this;
+  updatePort(e, t) {
+    return this.canvas.updatePort(e, t), this;
   }
-  unmarkPort(t) {
-    return this.canvas.unmarkPort(t), this;
+  unmarkPort(e) {
+    return this.canvas.unmarkPort(e), this;
   }
-  addEdge(t) {
-    return this.canvas.addEdge(t), this;
+  addEdge(e) {
+    return this.canvas.addEdge(e), this;
   }
-  updateEdge(t, r) {
-    return this.canvas.updateEdge(t, r), this;
+  updateEdge(e, t) {
+    return this.canvas.updateEdge(e, t), this;
   }
-  removeEdge(t) {
-    return this.canvas.removeEdge(t), this;
+  removeEdge(e) {
+    return this.canvas.removeEdge(e), this;
   }
-  patchViewportMatrix(t) {
-    return this.canvas.patchViewportMatrix(t), this;
+  patchViewportMatrix(e) {
+    return this.canvas.patchViewportMatrix(e), this;
   }
-  patchContentMatrix(t) {
-    return this.canvas.patchContentMatrix(t), this;
+  patchContentMatrix(e) {
+    return this.canvas.patchContentMatrix(e), this;
   }
   clear() {
     return this.canvas.clear(), this;
   }
-  attach(t) {
-    return this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), 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;
@@ -1695,58 +1695,58 @@ class Pt {
   destroy() {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
-  getAverageTouch(t) {
-    const r = [], s = t.touches.length;
-    for (let a = 0; a < s; a++)
-      r.push([t.touches[a].clientX, t.touches[a].clientY]);
-    const o = r.reduce(
-      (a, l) => [a[0] + l[0], a[1] + l[1]],
+  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], c = r.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
-      (a, l) => a + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
+    ), 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: c / s,
+      scale: h / s,
       touchesCnt: s,
-      touches: r
+      touches: t
     };
   }
-  moveViewport(t, r) {
+  moveViewport(e, t) {
     const s = this.transformation.getViewportMatrix(), o = {
       scale: s.scale,
-      dx: s.dx + s.scale * t,
-      dy: s.dy + s.scale * r
+      dx: s.dx + s.scale * e,
+      dy: s.dy + s.scale * t
     };
     if (this.element !== null) {
-      const { width: i, height: n } = this.element.getBoundingClientRect(), c = this.transformPreprocessor(
+      const { width: i, height: n } = this.element.getBoundingClientRect(), h = this.transformPreprocessor(
         s,
         o,
         i,
         n
       );
-      this.canvas.patchViewportMatrix(c), this.onTransformFinished(c);
+      this.canvas.patchViewportMatrix(h), this.onTransformFinished(h);
     }
   }
-  scaleViewport(t, r, s) {
+  scaleViewport(e, t, s) {
     if (this.element === null)
       return;
     const o = this.canvas.transformation.getViewportMatrix(), i = {
-      scale: o.scale * t,
-      dx: o.scale * (1 - t) * r + o.dx,
-      dy: o.scale * (1 - t) * s + o.dy
-    }, { width: n, height: c } = this.element.getBoundingClientRect(), a = this.transformPreprocessor(
+      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,
-      c
+      h
     );
-    this.canvas.patchViewportMatrix(a), this.onTransformFinished(a);
+    this.canvas.patchViewportMatrix(c), this.onTransformFinished(c);
   }
   stopMouseDrag() {
-    this.element !== null && O(this.element, null), this.removeMouseDragListeners();
+    this.element !== null && R(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onMouseMove), this.window.removeEventListener("mouseup", this.onMouseUp);
@@ -1758,43 +1758,44 @@ class Pt {
     this.window.removeEventListener("touchmove", this.onTouchMove), this.window.removeEventListener("touchend", this.onTouchEnd), this.window.removeEventListener("touchcancel", this.onTouchEnd);
   }
 }
-class Tt {
+class We {
   constructor() {
-    h(this, "coreOptions");
-    h(this, "dragOptions");
-    h(this, "transformOptions");
-    h(this, "isDraggable", !1);
-    h(this, "isTransformable", !1);
+    a(this, "coreOptions");
+    a(this, "dragOptions");
+    a(this, "transformOptions");
+    a(this, "isDraggable", !1);
+    a(this, "isTransformable", !1);
   }
-  setOptions(t) {
-    return this.coreOptions = t, this;
+  setOptions(e) {
+    return this.coreOptions = e, this;
   }
-  setUserDraggableNodes(t) {
-    return this.isDraggable = !0, this.dragOptions = t, this;
+  setUserDraggableNodes(e) {
+    return this.isDraggable = !0, this.dragOptions = e, this;
   }
-  setUserTransformableCanvas(t) {
-    return this.isTransformable = !0, this.transformOptions = t, this;
+  setUserTransformableCanvas(e) {
+    return this.isTransformable = !0, this.transformOptions = e, this;
   }
   build() {
-    let t = new Et(this.coreOptions);
-    return this.isDraggable && (t = new At(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
+    let e = new Pe(this.coreOptions);
+    return this.isDraggable && (e = new Me(e, this.dragOptions)), this.isTransformable && (e = new De(e, this.transformOptions)), e;
   }
 }
 export {
-  st as BezierEdgeShape,
-  Et as CanvasCore,
-  ht as CycleCircleEdgeShape,
-  z as CycleSquareEdgeShape,
-  B as DetourStraightEdgeShape,
-  N as EdgeType,
-  it as HorizontalEdgeShape,
-  Tt as HtmlGraphBuilder,
-  ot as StraightEdgeShape,
-  At as UserDraggableNodesCanvas,
-  Pt as UserTransformableCanvas,
-  nt as VerticalEdgeShape,
-  ct as createBezierEdgeShapeFactory,
-  dt as createHorizontalEdgeShapeFactory,
-  lt as createStraightEdgeShareFactory,
-  gt as createVerticalEdgeShapeFactory
+  te as BezierEdgeShape,
+  Pe as CanvasCore,
+  ie as CycleCircleEdgeShape,
+  B as CycleSquareEdgeShape,
+  G as DetourStraightEdgeShape,
+  P as EdgeType,
+  se as HorizontalEdgeShape,
+  We as HtmlGraphBuilder,
+  f as HtmlGraphError,
+  re as StraightEdgeShape,
+  Me as UserDraggableNodesCanvas,
+  De as UserTransformableCanvas,
+  oe as VerticalEdgeShape,
+  ae as createBezierEdgeShapeFactory,
+  ce as createHorizontalEdgeShapeFactory,
+  he as createStraightEdgeShareFactory,
+  de as createVerticalEdgeShapeFactory
 };