@html-graph/html-graph 0.0.58 → 0.0.59

package/dist/main.js

@@ -161,12 +161,6 @@ 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 : {
@@ -177,8 +171,8 @@ class ee {
       priority: t.priority
     };
   }
-  getNodePortIds(e) {
-    return this.graphStore.getNodePortIds(e);
+  getAllNodeIds() {
+    return this.graphStore.getAllNodeIds();
   }
   getPort(e) {
     const t = this.graphStore.getPort(e);
@@ -188,6 +182,12 @@ class ee {
       direction: t.direction
     };
   }
+  getAllPortIds() {
+    return this.graphStore.getAllPortIds();
+  }
+  getNodePortIds(e) {
+    return this.graphStore.getNodePortIds(e);
+  }
   getPortNodeId(e) {
     return this.graphStore.getPortNodeId(e) ?? null;
   }
@@ -198,12 +198,6 @@ class ee {
     const t = this.graphStore.getEdge(e);
     return t === void 0 ? null : { from: t.from, to: t.to, priority: t.priority };
   }
-  getPortAdjacentEdgeIds(e) {
-    return this.graphStore.getPortAdjacentEdgeIds(e);
-  }
-  getNodeAdjacentEdgeIds(e) {
-    return this.graphStore.getNodeAdjacentEdgeIds(e);
-  }
   getPortIncomingEdgeIds(e) {
     return this.graphStore.getPortIncomingEdgeIds(e);
   }
@@ -213,6 +207,9 @@ class ee {
   getPortCycleEdgeIds(e) {
     return this.graphStore.getPortCycleEdgeIds(e);
   }
+  getPortAdjacentEdgeIds(e) {
+    return this.graphStore.getPortAdjacentEdgeIds(e);
+  }
   getNodeIncomingEdgeIds(e) {
     return this.graphStore.getNodeIncomingEdgeIds(e);
   }
@@ -222,6 +219,9 @@ class ee {
   getNodeCycleEdgeIds(e) {
     return this.graphStore.getNodeCycleEdgeIds(e);
   }
+  getNodeAdjacentEdgeIds(e) {
+    return this.graphStore.getNodeAdjacentEdgeIds(e);
+  }
 }
 const l = {
   x: 0,
@@ -229,59 +229,59 @@ const l = {
 }, 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) => {
+}), f = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) }), x = (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) => {
+}, D = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
     let o = 0, i = 0, n = 0;
     r.forEach((h, c) => {
-      let d = 0, u = 0, w = 0;
+      let d = 0, g = 0, w = 0;
       const m = c > 0, y = c < s, v = m && y;
-      if (m && (d = -o, u = -i, w = n), y) {
+      if (m && (d = -o, g = -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 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}`
+      const P = Math.min((v ? e : 0) / n, c < s - 1 ? 0.5 : 1), M = v ? { x: h.x + o * P, y: h.y + i * P } : h, T = Math.min((v ? e : 0) / w, c > 1 ? 0.5 : 1), W = v ? { x: h.x + d * T, y: h.y + g * T } : h;
+      c > 0 && t.push(`L ${W.x} ${W.y}`), v && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${M.x} ${M.y}`
       );
     });
   }
   return t.join(" ");
-}, T = () => {
+}, N = () => {
   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) => {
+}, L = (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) => {
+}, E = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", r), e;
 };
 class te {
   constructor(e, t, s, o, i, n, h) {
-    a(this, "svg", T());
+    a(this, "svg", N());
     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));
+    this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
-    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -290,7 +290,7 @@ class te {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -314,24 +314,24 @@ class te {
     }, h = {
       x: i.x - s.x * this.curvature,
       y: i.y - s.y * this.curvature
-    }, c = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, u = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
-    return `${d}${c}${u}`;
+    }, c = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.sourceArrow ? "" : `M ${l.x} ${l.y} L ${o.x} ${o.y} `, g = this.targetArrow ? "" : ` M ${i.x} ${i.y} L ${e.x} ${e.y}`;
+    return `${d}${c}${g}`;
   }
 }
 class re {
   constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", T());
+    a(this, "svg", N());
     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));
+    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
-    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -340,7 +340,7 @@ class re {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -351,23 +351,23 @@ class re {
   }
   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);
+    return D([o, h, c, i], this.roundness);
   }
 }
 class se {
   constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", T());
+    a(this, "svg", N());
     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));
+    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
-    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, t);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -376,7 +376,7 @@ class se {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -386,27 +386,27 @@ class se {
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), 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],
+    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.x + g.x) / 2, h), m = e.y / 2, y = { x: o > 0 ? w : -h, y: d.y }, v = { x: y.x, y: m }, S = { x: o > 0 ? e.x - w : e.x + h, y: g.y }, P = { x: S.x, y: m };
+    return D(
+      [i, d, y, v, P, S, g, n],
       this.roundness
     );
   }
 }
 class oe {
   constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", T());
+    a(this, "svg", N());
     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));
+    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
-    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, s);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, s);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -415,7 +415,7 @@ class oe {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -425,28 +425,27 @@ class oe {
     }
   }
   createLinePath(e, t, s, o) {
-    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), 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,
+    const i = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, n = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, h = this.arrowLength + this.arrowOffset, c = h - this.roundness, d = p({ x: c, y: l.y }, t, l), g = p({ x: e.x - c, y: e.y }, s, e), w = Math.max((d.y + g.y) / 2, h), m = e.x / 2, y = { x: d.x, y: o > 0 ? w : -h }, v = { x: m, y: y.y }, S = {
+      x: g.x,
       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],
+    }, P = { x: m, y: S.y };
+    return D(
+      [i, d, y, v, P, S, g, n],
       this.roundness
     );
   }
 }
 class ie {
   constructor(e, t, s, o, i, n, h) {
-    a(this, "svg", T());
-    a(this, "group", $());
+    a(this, "svg", N());
     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));
+    this.arrowLength = s, this.arrowWidth = o, this.radius = n, this.smallRadius = h, this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = E(e), this.svg.appendChild(this.arrow));
   }
   update(e, t, s, o) {
-    const i = x(o, t, s), n = this.createLinePath(i);
+    const i = f(o, t, s), n = this.createLinePath(i);
     if (this.line.setAttribute("d", n), this.arrow) {
-      const h = E(
+      const h = x(
         i,
         l,
         this.arrowLength,
@@ -460,25 +459,24 @@ class ie {
       { x: this.arrowLength, y: l.y },
       { x: n, y: h },
       { x: n, y: -h }
-    ].map((m) => p(m, e, l)), u = [
+    ].map((m) => p(m, e, l)), g = [
       `M ${d[0].x} ${d[0].y}`,
       `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
       `A ${s} ${s} 0 1 0 ${d[2].x} ${d[2].y}`,
       `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
     ].join(" "), w = `M 0 0 L ${d[0].x} ${d[0].y} `;
-    return `${this.arrow !== null ? "" : w}${u}`;
+    return `${this.arrow !== null ? "" : w}${g}`;
   }
 }
 class B {
   constructor(e, t, s, o, i, n, h, c) {
-    a(this, "svg", T());
-    a(this, "group", $());
+    a(this, "svg", N());
     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.arrowLength = s, this.arrowWidth = o, this.side = n, this.minPortOffset = h, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), this.line = L(e, t), this.svg.appendChild(this.line), i && (this.arrow = E(e), this.svg.appendChild(this.arrow));
+    const d = this.minPortOffset, g = this.side, w = this.arrowLength + d, m = w + 2 * g;
     this.linePoints = [
       { x: this.arrowLength, y: l.y },
       { x: w, y: l.y },
@@ -491,9 +489,9 @@ class B {
     ];
   }
   update(e, t, s, o) {
-    const i = x(o, t, s), n = this.createLinePath(i);
+    const i = f(o, t, s), n = this.createLinePath(i);
     if (this.line.setAttribute("d", n), this.arrow) {
-      const h = E(
+      const h = x(
         i,
         l,
         this.arrowLength,
@@ -506,25 +504,25 @@ class B {
     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)}`;
+    return `${this.arrow ? "" : s}${D(t, this.roundness)}`;
   }
 }
-class G {
-  constructor(e, t, s, o, i, n, h, c, d, u) {
-    a(this, "svg", T());
+class ne {
+  constructor(e, t, s, o, i, n, h, c, d) {
+    a(this, "svg", N());
     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));
+    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 = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   update(e, t, s, o, i) {
     this.group.style.transform = `scale(${t}, ${s})`;
-    const n = x(o, t, s), h = x(i, t, s), c = this.createLinePath(e, n, h, t, s);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t, s);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -533,7 +531,7 @@ class G {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -543,38 +541,58 @@ class G {
     }
   }
   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(
+    const n = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, c = this.arrowLength, d = this.detourX * o, g = this.detourY * i, w = p(
       { 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(
+    ), m = {
+      x: w.x + d,
+      y: w.y + g
+    }, 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
-    );
+    ), v = {
+      x: y.x + d,
+      y: y.y + g
+    }, S = { x: (m.x + v.x) / 2, y: (m.y + v.y) / 2 }, P = {
+      x: w.x + this.curvature * t.x,
+      y: w.y + this.curvature * t.y
+    }, M = {
+      x: y.x - this.curvature * s.x,
+      y: y.y - this.curvature * s.y
+    }, b = {
+      x: w.x + d,
+      y: w.y + g
+    }, T = {
+      x: y.x + d,
+      y: y.y + g
+    };
+    return [
+      `M ${n.x} ${n.y}`,
+      `L ${w.x} ${w.y}`,
+      `C ${P.x} ${P.y} ${b.x} ${b.y} ${S.x} ${S.y}`,
+      `C ${T.x} ${T.y} ${M.x} ${M.y} ${y.x} ${y.y}`,
+      `L ${h.x} ${h.y}`
+    ].join(" ");
   }
 }
-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());
+class G {
+  constructor(e, t, s, o, i, n, h, c, d, g) {
+    a(this, "svg", N());
     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));
+    this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = c, this.detourX = Math.cos(g) * d, this.detourY = Math.sin(g) * d, this.svg.appendChild(this.group), this.line = L(e, t), this.group.appendChild(this.line), n && (this.sourceArrow = E(e), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = E(e), this.group.appendChild(this.targetArrow));
   }
   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);
+    const n = f(o, t, s), h = f(i, t, s), c = this.createLinePath(e, n, h, t, s);
     if (this.line.setAttribute("d", c), this.sourceArrow) {
-      const d = E(
+      const d = x(
         n,
         l,
         this.arrowLength,
@@ -583,7 +601,7 @@ class ne {
       this.sourceArrow.setAttribute("d", d);
     }
     if (this.targetArrow) {
-      const d = E(
+      const d = x(
         h,
         e,
         -this.arrowLength,
@@ -593,43 +611,23 @@ class ne {
     }
   }
   createLinePath(e, t, s, o, i) {
-    const n = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, c = this.arrowLength, d = this.detourX * o, u = this.detourY * i, w = p(
+    const n = this.sourceArrow ? p({ x: this.arrowLength, y: l.y }, t, l) : l, h = this.targetArrow ? p({ x: e.x - this.arrowLength, y: e.y }, s, e) : e, c = this.arrowLength + this.arrowOffset, d = p(
       { x: c, y: l.y },
       t,
       l
-    ), m = {
-      x: w.x + d,
-      y: w.y + u
-    }, y = p(
+    ), g = this.detourX * o, w = this.detourY * i, m = { x: d.x + g, y: d.y + w }, 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(" ");
+    ), v = { x: y.x + g, y: y.y + w };
+    return D(
+      [n, d, m, v, y, h],
+      this.roundness
+    );
   }
 }
-const ae = (r) => (e) => e === P.PortCycle ? new ie(
+var A = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(A || {});
+const ae = (r) => (e) => e === A.PortCycle ? new ie(
   r.color,
   r.width,
   r.arrowLength,
@@ -637,7 +635,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.hasSourceArrow || r.hasTargetArrow,
   r.cycleRadius,
   r.smallCycleRadius
-) : e === P.NodeCycle ? new ne(
+) : e === A.NodeCycle ? new ne(
   r.color,
   r.width,
   r.curvature,
@@ -655,7 +653,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.arrowWidth,
   r.hasSourceArrow,
   r.hasTargetArrow
-), he = (r) => (e) => e === P.PortCycle ? new B(
+), he = (r) => (e) => e === A.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -664,7 +662,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === P.NodeCycle ? new G(
+) : e === A.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -684,7 +682,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.hasSourceArrow,
   r.hasTargetArrow,
   r.roundness
-), ce = (r) => (e) => e === P.PortCycle ? new B(
+), ce = (r) => (e) => e === A.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -693,7 +691,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === P.NodeCycle ? new G(
+) : e === A.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -704,7 +702,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.roundness,
   r.detourDistance,
   r.detourDirection
-) : new se(
+) : new oe(
   r.color,
   r.width,
   r.arrowLength,
@@ -713,7 +711,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.hasSourceArrow,
   r.hasTargetArrow,
   r.roundness
-), de = (r) => (e) => e === P.PortCycle ? new B(
+), de = (r) => (e) => e === A.PortCycle ? new B(
   r.color,
   r.width,
   r.arrowLength,
@@ -722,7 +720,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : e === P.NodeCycle ? new G(
+) : e === A.NodeCycle ? new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -733,7 +731,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.roundness,
   r.detourDistance,
   r.detourDirection
-) : new oe(
+) : new se(
   r.color,
   r.width,
   r.arrowLength,
@@ -743,7 +741,7 @@ const ae = (r) => (e) => e === P.PortCycle ? new ie(
   r.hasTargetArrow,
   r.roundness
 );
-class W {
+class F {
   constructor(e) {
     a(this, "counter", 0);
     this.checkExists = e;
@@ -759,7 +757,7 @@ class W {
     this.counter = 0;
   }
 }
-class f extends Error {
+class C extends Error {
   constructor() {
     super(...arguments);
     a(this, "name", "HtmlGraphError");
@@ -767,20 +765,20 @@ class f extends Error {
 }
 class le {
   constructor(e, t, s, o, i, n, h, c) {
-    a(this, "nodeIdGenerator", new W(
+    a(this, "nodeIdGenerator", new F(
       (e) => this.graphStore.getNode(e) !== void 0
     ));
-    a(this, "portIdGenerator", new W(
+    a(this, "portIdGenerator", new F(
       (e) => this.graphStore.getPort(e) !== void 0
     ));
-    a(this, "edgeIdGenerator", new W(
+    a(this, "edgeIdGenerator", new F(
       (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");
+      throw new C("failed to add node with existing id");
     this.graphStore.addNode(
       e,
       t,
@@ -801,21 +799,21 @@ class le {
   updateNode(e, t, s, o, i) {
     const n = this.graphStore.getNode(e);
     if (n === void 0)
-      throw new f("failed to update nonexisting node");
+      throw new C("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");
+      throw new C("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");
+      throw new C("failed to set port on nonexisting node");
     if (this.graphStore.getPort(e) !== void 0)
-      throw new f("failed to add port with existing id");
+      throw new C("failed to add port with existing id");
     this.graphStore.addPort(
       e,
       t,
@@ -827,23 +825,23 @@ class le {
   updatePort(e, t, s) {
     const o = this.graphStore.getPort(e);
     if (o === void 0)
-      throw new f("failed to unset nonexisting port");
+      throw new C("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");
+      throw new C("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");
+      throw new C("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(s) === void 0)
-      throw new f("failed to add edge to nonexisting port");
+      throw new C("failed to add edge to nonexisting port");
     if (this.graphStore.getEdge(e) !== void 0)
-      throw new f("failed to add edge with existing id");
+      throw new C("failed to add edge with existing id");
     const n = this.resolveEdgeType(t, s);
     this.graphStore.addEdge(
       e,
@@ -856,7 +854,7 @@ class le {
   updateEdge(e, t, s) {
     const o = this.graphStore.getEdge(e);
     if (o === void 0)
-      throw new f("failed to update nonexisting edge");
+      throw new C("failed to update nonexisting edge");
     if (t !== void 0) {
       const i = this.resolveEdgeType(o.from, o.to);
       o.shape = t(i), this.htmlController.updateEdgeShape(e);
@@ -865,7 +863,7 @@ class le {
   }
   removeEdge(e) {
     if (this.graphStore.getEdge(e) === void 0)
-      throw new f("failed to remove nonexisting edge");
+      throw new C("failed to remove nonexisting edge");
     this.htmlController.detachEdge(e), this.graphStore.removeEdge(e);
   }
   patchViewportMatrix(e, t, s) {
@@ -888,25 +886,22 @@ class le {
   }
   resolveEdgeType(e, t) {
     if (e === t)
-      return P.PortCycle;
+      return A.PortCycle;
     const s = this.graphStore.getPortNodeId(e), o = this.graphStore.getPortNodeId(t);
-    return s === o ? P.NodeCycle : P.Regular;
+    return s === o ? A.NodeCycle : A.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 = () => {
+}, we = () => {
   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 {
+class ye {
   constructor() {
     a(this, "keyMap", /* @__PURE__ */ new Map());
     a(this, "valueMap", /* @__PURE__ */ new Map());
@@ -937,48 +932,30 @@ class me {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class pe {
-  constructor(e, t, s, o) {
+class me {
+  constructor(e, t) {
     a(this, "canvasWrapper", null);
     a(this, "host", ue());
-    a(this, "canvas", ge());
-    a(this, "container", we());
-    a(this, "canvasCtx");
-    a(this, "canvasResizeObserver");
+    a(this, "container", ge());
     a(this, "nodesResizeObserver");
     a(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    a(this, "nodeIdToWrapperElementMap", new me());
+    a(this, "nodeIdToWrapperElementMap", new ye());
     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);
-    });
+    this.graphStore = e, this.viewportTransformer = t, this.host.appendChild(this.container), this.nodesResizeObserver = this.createNodesResizeObserver();
   }
   attach(e) {
-    this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host), this.canvasResizeObserver.observe(this.canvasWrapper);
+    this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host);
   }
   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();
+    this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   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";
+    const t = this.graphStore.getNode(e), s = we();
+    s.appendChild(t.element), this.container.appendChild(s), this.nodeElementToIdMap.set(t.element, e), this.nodeIdToWrapperElementMap.set(e, s), this.updateNodeCoordinatesInternal(e), this.updateNodePriority(e), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e), s = this.nodeIdToWrapperElementMap.getByKey(e);
@@ -986,16 +963,26 @@ class pe {
   }
   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);
+    this.edgeIdToElementMap.set(e, t.shape.svg), this.container.appendChild(t.shape.svg), this.updateEdgeCoordinates(e), this.updateEdgePriority(e);
   }
   detachEdge(e) {
     const t = this.graphStore.getEdge(e);
     this.container.removeChild(t.shape.svg), this.edgeIdToElementMap.delete(e);
   }
+  clear() {
+    this.edgeIdToElementMap.forEach((e, t) => {
+      this.detachEdge(t);
+    }), this.nodeIdToWrapperElementMap.forEach((e, t) => {
+      this.detachNode(t);
+    });
+  }
+  destroy() {
+    this.nodesResizeObserver.disconnect(), this.host.removeChild(this.container), this.clear(), this.detach();
+  }
   updateNodeCoordinates(e) {
     const t = this.graphStore.getNodeAdjacentEdgeIds(e);
-    this.updateNodeCoords(e), t.forEach((s) => {
-      this.updateEdgeCoords(s);
+    this.updateNodeCoordinatesInternal(e), t.forEach((s) => {
+      this.updateEdgeCoordinates(s);
     });
   }
   updateNodePriority(e) {
@@ -1006,7 +993,7 @@ class pe {
     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);
+    this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg), this.updateEdgeCoordinates(e), this.updateEdgePriority(e);
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -1014,37 +1001,28 @@ class pe {
   }
   updatePortEdges(e) {
     this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
-      this.updateEdgeCoords(s);
-    });
-  }
-  createHostResizeObserver() {
-    return new ResizeObserver(() => {
-      this.updateCanvasDimensions(), this.applyTransform();
+      this.updateEdgeCoordinates(s);
     });
   }
   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);
+        this.updateNodeCoordinatesInternal(o), this.graphStore.getNodeAdjacentEdgeIds(o).forEach((n) => {
+          this.updateEdgeCoordinates(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})`;
+  updateNodeCoordinatesInternal(e) {
+    const t = this.nodeIdToWrapperElementMap.getByKey(e), { width: s, height: o } = t.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(e), { x: h, y: c } = n.centerFn(s, o), d = n.x - i * h, g = n.y - i * c;
+    t.style.transform = `matrix(1, 0, 0, 1, ${d}, ${g})`;
   }
-  updateEdgeCoords(e) {
+  updateEdgeCoordinates(e) {
     const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), i = s.element.getBoundingClientRect(), n = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), d = {
       x: c.scale * (i.left - h.left) + c.dx,
       y: c.scale * (i.top - h.top) + c.dy
-    }, u = {
+    }, g = {
       x: c.scale * (n.left - h.left) + c.dx,
       y: c.scale * (n.top - h.top) + c.dy
     }, w = s.centerFn(
@@ -1057,87 +1035,46 @@ class pe {
       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;
+      x: g.x + m.x,
+      y: g.y + m.y
+    }, S = Math.min(y.x, v.x), P = Math.min(y.y, v.y), M = Math.abs(v.x - y.x), b = Math.abs(v.y - y.y);
+    t.shape.svg.style.width = `${M}px`, t.shape.svg.style.height = `${b}px`, t.shape.svg.style.transform = `translate(${S}px, ${P}px)`;
+    const T = y.x <= v.x ? 1 : -1, W = y.y <= v.y ? 1 : -1;
     t.shape.update(
-      { x: N, y: L },
-      M,
-      b,
+      { x: M, y: b },
+      T,
+      W,
       s.direction,
       o.direction
     );
   }
 }
-class ve {
-  constructor(e, t, s, o, i, n) {
+class pe {
+  constructor(e, t, s, o, i) {
     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 d = new pe(
-      c,
-      h,
-      this.publicViewportTransformer,
-      e
+    const n = new Q(), h = new q();
+    this.publicGraphStore = new ee(h), this.publicViewportTransformer = new Z(
+      n
     );
+    const c = new me(h, n);
     this.canvasController = new le(
-      c,
-      d,
       h,
+      c,
+      n,
+      e,
       t,
       s,
       o,
-      i,
-      n
+      i
     );
   }
 }
 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,
-    s,
-    o
-  );
-}, Ce = (r) => {
-  switch (r == null ? void 0 : r.type) {
-    case "custom":
-      return r.drawingFn;
-    case "dots":
-      return Ee(
-        r.dotColor ?? "#d8d8d8",
-        r.dotGap ?? 25,
-        r.dotRadius ?? 1.5,
-        r.color ?? "#ffffff",
-        r.limit ?? 1e4
-      );
-    default:
-      return fe();
-  }
-}, g = {
+}), u = {
   edgeColor: "#5c5c5c",
   edgeWidth: 1,
   edgeArrowLength: 15,
@@ -1151,90 +1088,85 @@ const H = (r, e) => ({
   detourDirection: -Math.PI / 2,
   smallCycleSize: 15,
   curvature: 90
-}, z = (r) => {
+}, R = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.factory;
     case "straight":
       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
+        color: r.color ?? u.edgeColor,
+        width: r.width ?? u.edgeWidth,
+        arrowLength: r.arrowLength ?? u.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
+        roundness: r.roundness ?? u.roundness,
+        detourDistance: r.detourDistance ?? u.detourDistance,
+        detourDirection: r.detourDirection ?? u.detourDirection
       });
     case "horizontal":
-      return 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
+      return de({
+        color: r.color ?? u.edgeColor,
+        width: r.width ?? u.edgeWidth,
+        arrowLength: r.arrowLength ?? u.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
+        roundness: r.roundness ?? u.roundness,
+        detourDistance: r.detourDistance ?? u.detourDistance,
+        detourDirection: r.detourDirection ?? u.detourDirection
       });
     case "vertical":
-      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
+      return ce({
+        color: r.color ?? u.edgeColor,
+        width: r.width ?? u.edgeWidth,
+        arrowLength: r.arrowLength ?? u.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
+        arrowOffset: r.arrowOffset ?? u.edgeArrowOffset,
+        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
+        cycleSquareSide: r.cycleSquareSide ?? u.cycleSize,
+        roundness: r.roundness ?? u.roundness,
+        detourDistance: r.detourDistance ?? u.detourDistance,
+        detourDirection: r.detourDirection ?? u.detourDirection
       });
     default:
       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
+        color: r.color ?? u.edgeColor,
+        width: r.width ?? u.edgeWidth,
+        arrowLength: r.arrowLength ?? u.edgeArrowLength,
+        arrowWidth: r.arrowWidth ?? u.edgeArrowWidth,
+        hasSourceArrow: r.hasSourceArrow ?? u.hasSourceArrow,
+        hasTargetArrow: r.hasTargetArrow ?? u.hasTargetArrow,
+        cycleRadius: r.cycleRadius ?? u.cycleSize,
+        detourDistance: r.detourDistance ?? u.detourDistance,
+        detourDirection: r.detourDirection ?? u.detourDirection,
+        smallCycleRadius: r.smallCycleRadius ?? u.smallCycleSize,
+        curvature: r.curvature ?? u.curvature
       });
   }
-}, I = (r) => () => r, U = I(0), k = () => {
+}, z = (r) => () => r, U = z(0), k = () => {
   let r = 0;
   return () => r++;
-}, Ae = (r, e) => {
+}, ve = (r, e) => {
   const t = [
     U,
     U
   ];
   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) => {
+  return r === "shared-incremental" && (t[0] = s), e === "shared-incremental" && (t[1] = s), typeof r == "number" && (t[0] = z(r)), typeof e == "number" && (t[1] = z(e)), typeof r == "function" && (t[0] = r), typeof e == "function" && (t[1] = e), t;
+}, fe = (r) => {
   var s, o, i, n, h, c;
-  const [e, t] = Ae(
+  const [e, t] = ve(
     (s = r.nodes) == null ? void 0 : s.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
   return {
-    background: {
-      drawingFn: Ce(
-        r.background ?? { type: "none" }
-      )
-    },
     nodes: {
       centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? H,
       priorityFn: e
@@ -1244,21 +1176,20 @@ const H = (r, e) => ({
       direction: ((h = r.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: z(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
+      shapeFactory: R(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
       priorityFn: t
     }
   };
 };
-class Pe {
+class xe {
   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,
+    const t = fe(this.apiOptions ?? {});
+    this.di = new pe(
       t.nodes.centerFn,
       t.ports.centerFn,
       t.ports.direction,
@@ -1309,7 +1240,7 @@ class Pe {
     return this.di.canvasController.unmarkPort(e), this;
   }
   addEdge(e) {
-    const t = e.shape !== void 0 ? z(e.shape) : this.edgeShapeFactory;
+    const t = e.shape !== void 0 ? R(e.shape) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
       e.id,
       e.from,
@@ -1319,7 +1250,7 @@ class Pe {
     ), this;
   }
   updateEdge(e, t) {
-    const s = t.shape !== void 0 ? z(t.shape) : void 0;
+    const s = t.shape !== void 0 ? R(t.shape) : void 0;
     return this.di.canvasController.updateEdge(e, s, t.priority), this;
   }
   removeEdge(e) {
@@ -1352,13 +1283,13 @@ class Pe {
     this.di.canvasController.destroy();
   }
 }
-const O = (r, e, t) => {
+const V = (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) => {
+}, O = (r, e, t) => e >= 0 && e < r.innerWidth && t >= 0 && t <= r.innerHeight, I = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 };
-class Me {
+class Ee {
   constructor(e, t) {
     a(this, "model");
     a(this, "transformation");
@@ -1367,7 +1298,7 @@ class Me {
     a(this, "grabbedNodeId", null);
     a(this, "onNodeDrag");
     a(this, "onBeforeNodeDrag");
-    a(this, "nodeIdGenerator", new W(
+    a(this, "nodeIdGenerator", new F(
       (e) => this.nodes.has(e)
     ));
     a(this, "element", null);
@@ -1375,7 +1306,7 @@ class Me {
       this.cancelMouseDrag();
     });
     a(this, "onCanvasMouseMove", (e) => {
-      if (this.element !== null && (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY))) {
+      if (this.element !== null && (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
@@ -1390,7 +1321,7 @@ class Me {
     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))) {
+        if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !O(this.window, t.clientX, t.clientY))) {
           this.cancelTouchDrag();
           return;
         }
@@ -1434,7 +1365,7 @@ class Me {
         element: e.element,
         x: n.x,
         y: n.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = t, R(this.element, this.dragCursor), this.moveNodeOnTop(t), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
+      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = t, I(this.element, this.dragCursor), this.moveNodeOnTop(t), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
     }, o = (i) => {
       const n = this.model.getNode(t);
       this.onBeforeNodeDrag({
@@ -1500,8 +1431,8 @@ class Me {
   dragNode(e, t, s) {
     const o = this.model.getNode(e);
     if (o === null)
-      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;
+      throw new C("failed to drag nonexisting node");
+    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, h = i.scale * o.y + i.dy, c = n + t, d = h + s, g = this.canvas.transformation.getViewportMatrix(), w = g.scale * c + g.dx, m = g.scale * d + g.dy;
     this.canvas.updateNode(e, { x: w, y: m }), this.onNodeDrag({
       nodeId: e,
       element: o.element,
@@ -1523,7 +1454,7 @@ class Me {
     });
   }
   cancelMouseDrag() {
-    this.grabbedNodeId = null, this.element !== null && R(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNodeId = null, this.element !== null && I(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onCanvasMouseUp), this.window.removeEventListener("mousemove", this.onCanvasMouseMove);
@@ -1535,26 +1466,26 @@ class Me {
     this.window.removeEventListener("touchmove", this.onCanvasTouchMove), this.window.removeEventListener("touchend", this.onCanvasTouchEnd), this.window.removeEventListener("touchcancel", this.onCanvasTouchEnd);
   }
 }
-const Ne = () => {
-}, Le = (r, e) => e, be = (r, e) => {
+const Ce = () => {
+}, Ae = (r, e) => e, Se = (r, e) => {
   const t = e !== null ? 1 / e : null, s = r !== null ? 1 / r : null;
   return (o, i) => s !== null && i.scale > s && i.scale > o.scale || t !== null && i.scale < t && i.scale < o.scale ? o : i;
-}, Te = (r, e, t, s) => (o, i, n, h) => {
+}, Pe = (r, e, t, s) => (o, i, n, h) => {
   let c = i.dx, d = i.dy;
   r !== null && c < r && c < o.dx && (c = o.dx);
-  const 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 g = n * o.scale;
+  e !== null && c > e - g && c > o.dx && (c = o.dx), t !== null && d < t && d < o.dy && (d = o.dy);
   const w = h * o.scale;
   return s !== null && d > s - w && d > o.dy && (d = o.dy), { scale: i.scale, dx: c, dy: d };
 }, K = (r) => {
   switch (r.type) {
     case "scale-limit":
-      return be(
+      return Se(
         r.minContentScale ?? null,
         r.maxContentScale ?? null
       );
     case "shift-limit":
-      return Te(
+      return Pe(
         r.minX ?? null,
         r.maxX ?? null,
         r.minY ?? null,
@@ -1563,11 +1494,11 @@ const Ne = () => {
     default:
       return r.preprocessorFn;
   }
-}, $e = (r) => (e, t, s, o) => r.reduce(
+}, Me = (r) => (e, t, s, o) => r.reduce(
   (i, n) => n(e, i, s, o),
   t
 );
-class De {
+class Ne {
   constructor(e, t) {
     a(this, "model");
     a(this, "transformation");
@@ -1580,12 +1511,12 @@ class De {
     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));
+      this.element !== null && (I(this.element, this.shiftCursor), this.window.addEventListener("mousemove", this.onMouseMove), this.window.addEventListener("mouseup", this.onMouseUp));
     });
     a(this, "onMouseMove", (e) => {
       if (!this.isShiftable || this.element === null)
         return;
-      if (!O(this.element, e.clientX, e.clientY) || !V(this.window, e.clientX, e.clientY)) {
+      if (!V(this.element, e.clientX, e.clientY) || !O(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1610,7 +1541,7 @@ class De {
         return;
       const t = this.getAverageTouch(e);
       if (!t.touches.every(
-        (o) => O(this.element, o[0], o[1]) && V(this.window, o[0], o[1])
+        (o) => V(this.element, o[0], o[1]) && O(this.window, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1635,20 +1566,20 @@ class De {
           t,
           s
         );
-        this.canvas.patchViewportMatrix(o), this.onTransformFinished(o);
+        this.canvas.patchViewportMatrix(o), this.onTransformFinished();
       }
     }));
     a(this, "shiftCursor");
-    var i, n, h, c, d, u, w, m;
+    var i, n, h, c, d, g, 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 s = (g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.wheelSensitivity;
+    this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((w = t == null ? void 0 : t.events) == null ? void 0 : w.onTransformFinished) ?? Ce;
     const o = t == null ? void 0 : t.transformPreprocessor;
-    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = $e(
+    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = Me(
       o.map(
         (y) => K(y)
       )
-    ) : 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";
+    ) : this.transformPreprocessor = K(o) : this.transformPreprocessor = Ae, this.shiftCursor = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab";
   }
   addNode(e) {
     return this.canvas.addNode(e), this;
@@ -1727,7 +1658,7 @@ class De {
         i,
         n
       );
-      this.canvas.patchViewportMatrix(h), this.onTransformFinished(h);
+      this.canvas.patchViewportMatrix(h), this.onTransformFinished();
     }
   }
   scaleViewport(e, t, s) {
@@ -1743,10 +1674,10 @@ class De {
       n,
       h
     );
-    this.canvas.patchViewportMatrix(c), this.onTransformFinished(c);
+    this.canvas.patchViewportMatrix(c), this.onTransformFinished();
   }
   stopMouseDrag() {
-    this.element !== null && R(this.element, null), this.removeMouseDragListeners();
+    this.element !== null && I(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onMouseMove), this.window.removeEventListener("mouseup", this.onMouseUp);
@@ -1758,7 +1689,7 @@ class De {
     this.window.removeEventListener("touchmove", this.onTouchMove), this.window.removeEventListener("touchend", this.onTouchEnd), this.window.removeEventListener("touchcancel", this.onTouchEnd);
   }
 }
-class We {
+class Te {
   constructor() {
     a(this, "coreOptions");
     a(this, "dragOptions");
@@ -1776,26 +1707,27 @@ class We {
     return this.isTransformable = !0, this.transformOptions = e, this;
   }
   build() {
-    let e = new Pe(this.coreOptions);
-    return this.isDraggable && (e = new Me(e, this.dragOptions)), this.isTransformable && (e = new De(e, this.transformOptions)), e;
+    let e = new xe(this.coreOptions);
+    return this.isDraggable && (e = new Ee(e, this.dragOptions)), this.isTransformable && (e = new Ne(e, this.transformOptions)), e;
   }
 }
 export {
   te as BezierEdgeShape,
-  Pe as CanvasCore,
+  xe as CanvasCore,
   ie as CycleCircleEdgeShape,
   B as CycleSquareEdgeShape,
+  ne as DetourBezierEdgeShape,
   G as DetourStraightEdgeShape,
-  P as EdgeType,
+  A as EdgeType,
   se as HorizontalEdgeShape,
-  We as HtmlGraphBuilder,
-  f as HtmlGraphError,
+  Te as HtmlGraphBuilder,
+  C as HtmlGraphError,
   re as StraightEdgeShape,
-  Me as UserDraggableNodesCanvas,
-  De as UserTransformableCanvas,
+  Ee as UserDraggableNodesCanvas,
+  Ne as UserTransformableCanvas,
   oe as VerticalEdgeShape,
   ae as createBezierEdgeShapeFactory,
-  ce as createHorizontalEdgeShapeFactory,
+  de as createHorizontalEdgeShapeFactory,
   he as createStraightEdgeShareFactory,
-  de as createVerticalEdgeShapeFactory
+  ce as createVerticalEdgeShapeFactory
 };