@html-graph/html-graph 3.14.0 → 3.15.0

package/dist/html-graph.js

@@ -51,8 +51,8 @@ class ue {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = t.centerFn(s, i), a = t.x - n * h.x, d = t.y - n * h.y;
-    t.element.style.transform = `translate(${a}px, ${d}px)`;
+    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.centerFn(s, i), h = t.x - n * a.x, d = t.y - n * a.y;
+    t.element.style.transform = `translate(${h}px, ${d}px)`;
   }
   updateNodePriority(e) {
     const t = this.graphStore.getNode(e);
@@ -65,17 +65,17 @@ class ue {
     this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
       t.from,
       s,
       n,
-      a,
+      h,
       d
     ), l = this.createEdgeRenderPort(
       t.to,
       i,
-      h,
       a,
+      h,
       d
     );
     t.shape.render({ from: c, to: l });
@@ -85,13 +85,13 @@ class ue {
     t.shape.svg.style.zIndex = `${t.priority}`;
   }
   createEdgeRenderPort(e, t, s, i, n) {
-    const h = {
+    const a = {
       x: s.left - i.left,
       y: s.top - i.top
-    }, a = T(n, h);
+    }, h = T(n, a);
     return {
-      x: a.x,
-      y: a.y,
+      x: h.x,
+      y: h.y,
       width: s.width * n.scale,
       height: s.height * n.scale,
       direction: t.direction,
@@ -116,8 +116,8 @@ class Ie {
     return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), h = this.graphStore.getNode(i), a = Math.min(n.x, h.x), d = Math.max(n.x, h.x), c = Math.min(n.y, h.y), l = Math.max(n.y, h.y);
-    return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
 class Ue {
@@ -128,20 +128,20 @@ class Ue {
     o(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
       const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
-      this.graphStore.getAllNodeIds().forEach((h) => {
-        const a = this.renderingBox.hasNode(h), d = this.attachedNodes.has(h);
-        a && !d ? t.add(h) : !a && d && s.add(h);
-      }), this.graphStore.getAllEdgeIds().forEach((h) => {
-        const a = this.renderingBox.hasEdge(h), d = this.attachedEdges.has(h), c = this.graphStore.getEdge(h), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
-        a && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), a && !d ? i.add(h) : !a && d && n.add(h);
-      }), n.forEach((h) => {
-        this.handleDetachEdge(h);
-      }), s.forEach((h) => {
-        this.handleDetachNode(h);
-      }), t.forEach((h) => {
-        this.attachedNodes.has(h) || this.handleAttachNode(h);
-      }), i.forEach((h) => {
-        this.handleAttachEdge(h);
+      this.graphStore.getAllNodeIds().forEach((a) => {
+        const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
+        h && !d ? t.add(a) : !h && d && s.add(a);
+      }), this.graphStore.getAllEdgeIds().forEach((a) => {
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
+      }), n.forEach((a) => {
+        this.handleDetachEdge(a);
+      }), s.forEach((a) => {
+        this.handleDetachNode(a);
+      }), t.forEach((a) => {
+        this.attachedNodes.has(a) || this.handleAttachNode(a);
+      }), i.forEach((a) => {
+        this.handleAttachEdge(a);
       });
     });
     this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
@@ -880,8 +880,8 @@ class Y {
   }
 }
 const Fe = (r, e, t) => {
-  const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
-  return e >= s && e <= s + n && t >= i && t <= i + h;
+  const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
+  return e >= s && e <= s + n && t >= i && t <= i + a;
 }, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, V = (r) => {
@@ -942,11 +942,11 @@ class ze {
     ), n = {
       x: s.x + this.params.sourceDirection.x * this.params.curvature,
       y: s.y + this.params.sourceDirection.y * this.params.curvature
-    }, h = {
+    }, a = {
       x: i.x - this.params.targetDirection.x * this.params.curvature,
       y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, a = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${h.x} ${h.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
-    this.path = `${d}${a}${c}`;
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    this.path = `${d}${h}${c}`;
   }
 }
 const ye = (r, e, t, s) => ({
@@ -969,19 +969,19 @@ class Xe {
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = m(
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
       { x: i, y: w.y },
       this.params.sourceDirection,
       w
     ), l = {
-      x: c.x + a,
+      x: c.x + h,
       y: c.y + d
     }, g = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), p = {
-      x: g.x + a,
+      x: g.x + h,
       y: g.y + d
     }, f = {
       x: (l.x + p.x) / 2,
@@ -993,10 +993,10 @@ class Xe {
       x: g.x - this.params.curvature * this.params.targetDirection.x,
       y: g.y - this.params.curvature * this.params.targetDirection.y
     }, E = {
-      x: c.x + a,
+      x: c.x + h,
       y: c.y + d
     }, x = {
-      x: g.x + a,
+      x: g.x + h,
       y: g.y + d
     };
     this.path = [
@@ -1012,17 +1012,17 @@ const C = (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 i = 0, n = 0, h = 0;
-    r.forEach((a, d) => {
+    let i = 0, n = 0, a = 0;
+    r.forEach((h, d) => {
       let c = 0, l = 0, g = 0;
       const p = d > 0, f = d < s, v = p && f;
-      if (p && (c = -i, l = -n, g = h), f) {
+      if (p && (c = -i, l = -n, g = a), f) {
         const R = r[d + 1];
-        i = R.x - a.x, n = R.y - a.y, h = Math.sqrt(i * i + n * n);
+        i = R.x - h.x, n = R.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: a.x + i * E, y: a.y + n * E } : a, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: a.x + c * D, y: a.y + l * D } : a;
+      const E = a !== 0 ? Math.min((v ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: h.x + i * E, y: h.y + n * E } : h, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: h.x + c * D, y: h.y + l * D } : h;
       d > 0 && t.push(`L ${N.x} ${N.y}`), v && t.push(
-        `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
   }
@@ -1046,23 +1046,23 @@ class Ye {
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
-      { x: h, y: w.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: w.y },
       this.params.sourceDirection,
       w
     ), d = m(
-      { x: this.params.to.x - h, y: this.params.to.y },
+      { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), c = Math.max((a.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
+    ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
       x: this.params.flipX > 0 ? c : -n,
-      y: a.y
+      y: h.y
     }, p = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, v = { x: f.x, y: l };
     this.path = C(
-      [s, a, g, p, v, f, d, i],
+      [s, h, g, p, v, f, d, i],
       this.params.roundness
     );
   }
@@ -1087,7 +1087,7 @@ class H {
       { x: i, y: w.y },
       this.params.sourceDirection,
       w
-    ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1116,16 +1116,16 @@ class He {
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
       { x: n, y: w.y },
       this.params.sourceDirection,
       w
-    ), a = m(
+    ), h = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     );
-    this.path = C([s, h, a, i], this.params.roundness);
+    this.path = C([s, a, h, i], this.params.roundness);
   }
 }
 class je {
@@ -1146,23 +1146,23 @@ class je {
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
-      { x: h, y: w.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+      { x: a, y: w.y },
       this.params.sourceDirection,
       w
     ), d = m(
-      { x: this.params.to.x - h, y: this.params.to.y },
+      { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), c = Math.max((a.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
-      x: a.x,
+    ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
+      x: h.x,
       y: this.params.flipY > 0 ? c : -n
     }, p = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, v = { x: l, y: f.y };
     this.path = C(
-      [s, a, g, p, v, f, d, i],
+      [s, h, g, p, v, f, d, i],
       this.params.roundness
     );
   }
@@ -1172,7 +1172,7 @@ class j {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, a = [
+    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
       { x: this.params.arrowLength, y: w.y },
       { x: i, y: w.y },
       { x: i, y: this.params.side },
@@ -1183,8 +1183,8 @@ class j {
       { x: this.params.arrowLength, y: w.y }
     ].map(
       (c) => m(c, this.params.sourceDirection, w)
-    ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${C(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+    ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${C(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
 class Ge {
@@ -1192,7 +1192,7 @@ class Ge {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, h = Math.sqrt(i * i - t * t), a = h * t / i, d = h + s + this.params.arrowLength, c = this.params.arrowLength + a, g = [
+    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
       { x: this.params.arrowLength, y: w.y },
       { x: c, y: n },
       { x: c, y: -n },
@@ -1267,12 +1267,12 @@ const Ee = (r, e) => {
   }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), h = Math.abs(s.x - t.x), a = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
+  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
   return {
     x: i,
     y: n,
-    width: h,
-    height: a,
+    width: a,
+    height: h,
     flipX: d,
     flipY: c
   };
@@ -1281,8 +1281,8 @@ const Ee = (r, e) => {
     w,
     { x: t, y: s },
     { x: t, y: -s }
-  ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
-  return `${h} ${a} ${d} Z`;
+  ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  return `${a} ${h} ${d} Z`;
 }, u = Object.freeze({
   color: "#777777",
   width: 1,
@@ -1314,19 +1314,19 @@ class W {
     this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = ne(
       e.from.direction,
-      h,
-      a
+      a,
+      h
     ), c = ne(
       e.to.direction,
-      h,
-      a
+      a,
+      h
     ), l = {
       x: i,
       y: n
@@ -1337,8 +1337,8 @@ class W {
       d,
       c,
       l,
-      h,
-      a
+      a,
+      h
     );
     this.line.setAttribute("d", v.path);
     let y = null;
@@ -1681,11 +1681,11 @@ class Pe {
     [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = { x: i, y: n }, c = new Ke({
       to: d,
       sourceOffset: this.sourceOffset,
@@ -1921,13 +1921,13 @@ class K {
     const i = this.graph.getNode(e);
     if (i === null)
       return;
-    const n = this.canvas.viewport.getContentMatrix(), h = T(n, {
+    const n = this.canvas.viewport.getContentMatrix(), a = T(n, {
       x: i.x,
       y: i.y
-    }), a = T(
+    }), h = T(
       { scale: 1, x: t, y: s },
-      h
-    ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, a);
+      a
+    ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, h);
     this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
       nodeId: e,
       element: i.element,
@@ -1986,19 +1986,19 @@ const rt = (r, e, t) => ({
   y: r.scale * (1 - e) * s + r.y
 }), I = (r) => {
   const e = [], t = r.touches.length;
-  for (let a = 0; a < t; a++)
-    e.push([r.touches[a].clientX, r.touches[a].clientY]);
+  for (let h = 0; h < t; h++)
+    e.push([r.touches[h].clientX, r.touches[h].clientY]);
   const s = e.reduce(
-    (a, d) => [a[0] + d[0], a[1] + d[1]],
+    (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), i = [s[0] / t, s[1] / t], h = e.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
-    (a, d) => a + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+  ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+    (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
     x: i[0],
     y: i[1],
-    scale: h / t,
+    scale: a / t,
     touchesCnt: t,
     touches: e
   };
@@ -2039,8 +2039,8 @@ class $ {
     o(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, a = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(a, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
@@ -2069,8 +2069,8 @@ class $ {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), h = this.prevTouches.x - i, a = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(c, h, a);
+        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        this.scaleViewport(c, a, h);
       }
       this.prevTouches = t;
     });
@@ -2103,20 +2103,20 @@ class $ {
     new $(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
-      canvasHeight: h
+      canvasHeight: a
     });
-    this.performTransform(a);
+    this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
-      canvasWidth: h,
-      canvasHeight: a
+      canvasWidth: a,
+      canvasHeight: h
     });
     this.performTransform(d);
   }
@@ -2143,7 +2143,7 @@ class $ {
   }
 }
 class Z {
-  constructor(e, t, s, i, n, h) {
+  constructor(e, t, s, i, n, a) {
     o(this, "canvasResizeObserver");
     o(this, "nodeHorizontal");
     o(this, "nodeVertical");
@@ -2174,11 +2174,11 @@ class Z {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
-    const a = {
+    const h = {
       ...i,
       onResizeTransformStarted: () => {
         this.userTransformInProgress = !0, i.onResizeTransformStarted();
@@ -2202,17 +2202,17 @@ class Z {
       e,
       this.element,
       this.window,
-      a
+      h
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, s, i, n, h) {
+  static configure(e, t, s, i, n, a) {
     new Z(
       e,
       t,
       s,
       i,
       n,
-      h
+      a
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -2221,12 +2221,12 @@ class Z {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, h = this.viewportMatrix.y + t + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > h || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, h = 3 * t + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: i, width: n, height: h });
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: s, y: i, width: n, height: a });
   }
 }
 const st = () => {
@@ -2257,8 +2257,8 @@ class J {
     o(this, "resizeObserver", new ResizeObserver((e) => {
       const t = e[0], { width: s, height: i } = t.contentRect;
       this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
-      const n = this.tileWidth / s, h = this.tileHeight / i;
-      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${h}`);
+      const n = this.tileWidth / s, a = this.tileHeight / i;
+      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
     o(this, "onAfterTransformUpdated", () => {
       const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
@@ -2407,15 +2407,15 @@ class Q {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (h, a) => {
-          const d = this.params.connectionTypeResolver(h);
-          return d === null ? !1 : (this.grabPort(h, a, d), !0);
+        onPortPointerDown: (a, h) => {
+          const d = this.params.connectionTypeResolver(a);
+          return d === null ? !1 : (this.grabPort(a, h, d), !0);
         },
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
@@ -2432,9 +2432,9 @@ class Q {
   grabPort(e, t, s) {
     const i = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), h = n.x + n.width / 2, a = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
-      x: h - d.x,
-      y: a - d.y
+    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
+      x: a - d.x,
+      y: h - d.y
     }), g = T(c, {
       x: t.x - d.x,
       y: t.y - d.y
@@ -2467,8 +2467,8 @@ class Q {
       );
       return;
     }
-    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, h = this.params.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
+    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
@@ -2486,7 +2486,7 @@ class _ {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
     o(this, "isTargetDragging", !0);
-    o(this, "draggingEdge", null);
+    o(this, "draggingEdgePayload", null);
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
@@ -2503,12 +2503,12 @@ class _ {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (h, a) => this.tryStartEdgeDragging(h, a),
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
+        onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
@@ -2529,9 +2529,9 @@ class _ {
     const i = this.canvas.graph.getEdge(s);
     if (i === null)
       return !1;
-    const n = e === i.from, h = e === i.to, a = n ? i.to : i.from;
-    this.staticPortId = a, this.isTargetDragging = h;
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(a), l = c.element.getBoundingClientRect(), g = {
+    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
+    this.staticPortId = h, this.isTargetDragging = a;
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
     }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), v = T(p, {
@@ -2541,7 +2541,13 @@ class _ {
       x: t.x - f.x,
       y: t.y - f.y
     });
-    this.draggingEdge = i, this.canvas.removeEdge(s);
+    this.draggingEdgePayload = {
+      id: s,
+      from: i.from,
+      to: i.to,
+      shape: i.shape,
+      priority: i.priority
+    }, this.canvas.removeEdge(s);
     const E = {
       overlayId: b.Static,
       portCoords: v,
@@ -2561,7 +2567,7 @@ class _ {
     }), !0;
   }
   resetDragState() {
-    this.draggingEdge = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
+    this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
@@ -2576,16 +2582,34 @@ class _ {
   tryCreateConnection(e) {
     const t = ve(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
-      this.params.onEdgeReattachInterrupted(this.draggingEdge);
+      const h = this.draggingEdgePayload;
+      this.params.onEdgeReattachInterrupted({
+        id: h.id,
+        from: h.from,
+        to: h.to,
+        shape: h.shape,
+        priority: h.priority
+      });
       return;
     }
     const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = {
       from: s,
       to: i,
-      shape: this.draggingEdge.shape,
-      priority: this.draggingEdge.priority
-    }, h = this.params.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached)) : this.params.onEdgeReattachPrevented(this.draggingEdge);
+      shape: this.draggingEdgePayload.shape,
+      priority: this.draggingEdgePayload.priority
+    }, a = this.params.connectionPreprocessor(n);
+    if (a !== null)
+      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
+    else {
+      const h = this.draggingEdgePayload;
+      this.params.onEdgeReattachPrevented({
+        id: h.id,
+        from: h.from,
+        to: h.to,
+        shape: h.shape,
+        priority: h.priority
+      });
+    }
   }
 }
 const ht = () => {
@@ -2694,7 +2718,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
       });
   }
 }, gt = (r) => {
-  var t, s, i, n, h;
+  var t, s, i, n, a;
   const e = ct(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
@@ -2708,7 +2732,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: q(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: q(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
@@ -2716,11 +2740,11 @@ const X = (r) => () => r, ce = X(0), dt = () => {
   var p, f, v, y, E, x;
   const e = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), t = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
+  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, a = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
-    dragCursor: a,
+    dragCursor: h,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l !== void 0 ? l : (P) => P.button === 0,
     onNodeDrag: e,
@@ -2730,27 +2754,27 @@ const X = (r) => () => r, ce = X(0), dt = () => {
 }, ut = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
-    let h = n.nextTransform.x, a = n.nextTransform.y;
-    h < e && h < n.prevTransform.x && (h = Math.min(n.prevTransform.x, e));
+    let a = n.nextTransform.x, h = n.nextTransform.y;
+    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
-    h > c && h > n.prevTransform.x && (h = Math.max(n.prevTransform.x, c)), a < s && a < n.prevTransform.y && (a = Math.min(n.prevTransform.y, s));
+    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
-    return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
+    return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
 }, pt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
-    const h = n.prevTransform, a = n.nextTransform;
-    let d = a.scale, c = a.x, l = a.y;
-    if (a.scale > i && a.scale > h.scale) {
-      d = Math.max(h.scale, i), c = h.x, l = h.y;
-      const g = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
+    const a = n.prevTransform, h = n.nextTransform;
+    let d = h.scale, c = h.x, l = h.y;
+    if (h.scale > i && h.scale > a.scale) {
+      d = Math.max(a.scale, i), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
-    if (a.scale < s && a.scale < h.scale) {
-      d = Math.min(h.scale, s), c = h.x, l = h.y;
-      const g = (d - h.scale) / (a.scale - h.scale);
-      c = h.x + (a.x - h.x) * g, l = h.y + (a.y - h.y) * g;
+    if (h.scale < s && h.scale < a.scale) {
+      d = Math.min(a.scale, s), c = a.x, l = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
     return {
       scale: d,
@@ -2792,8 +2816,8 @@ const X = (r) => () => r, ce = X(0), dt = () => {
       (M) => ge(M)
     )
   ) : i = ge(s) : i = (M) => M.nextTransform;
-  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
+  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
   }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
@@ -2801,8 +2825,8 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     }),
     onTransformFinished: ((ee = r == null ? void 0 : r.events) == null ? void 0 : ee.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: h,
-    onTransformChange: a,
+    onBeforeTransformChange: a,
+    onTransformChange: h,
     transformPreprocessor: i,
     shiftCursor: n,
     mouseDownEventVerifier: c,
@@ -2833,8 +2857,8 @@ const X = (r) => () => r, ce = X(0), dt = () => {
   };
 }, yt = (r, e, t) => {
   var c, l, g;
-  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
-  }, a = () => {
+  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
+  }, h = () => {
   }, d = () => {
   };
   return {
@@ -2842,9 +2866,9 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     connectionPreprocessor: r.connectionPreprocessor ?? i,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
-    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? h,
+    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
+    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? q(r.edgeShape) : e
   };
@@ -2853,8 +2877,8 @@ const X = (r) => () => r, ce = X(0), dt = () => {
   const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
     const f = e.getPortAdjacentEdgeIds(p);
     return f.length > 0 ? f[f.length - 1] : null;
-  }, h = () => {
   }, a = () => {
+  }, h = () => {
   }, d = () => {
   };
   return {
@@ -2863,9 +2887,9 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
     draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? q(r.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
+    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
-    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
+    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
 };
 class St {
@@ -2964,30 +2988,30 @@ class St {
       i.main
     );
     e !== void 0 && (n = new Ue(n, t, e));
-    const h = gt(this.canvasDefaults), a = new we(
+    const a = gt(this.canvasDefaults), h = new we(
       this.element,
       t,
       s,
       n,
-      h
+      a
     );
     if (this.hasBackground && J.configure(
-      a,
+      h,
       mt(this.backgroundConfig),
       i.background
-    ), this.hasResizeReactiveNodes && Y.configure(a), this.hasDraggableNode && K.configure(
-      a,
+    ), this.hasResizeReactiveNodes && Y.configure(h), this.hasDraggableNode && K.configure(
+      h,
       i.main,
       this.window,
       lt(this.dragConfig)
     ), this.hasUserConnectablePorts) {
       const c = yt(
         this.connectablePortsConfig,
-        h.edges.shapeFactory,
-        h.ports.direction
+        a.edges.shapeFactory,
+        a.ports.direction
       );
       Q.configure(
-        a,
+        h,
         i.overlayConnectablePorts,
         s,
         this.window,
@@ -2997,10 +3021,10 @@ class St {
     if (this.hasUserDraggableEdges) {
       const c = Et(
         this.draggableEdgesConfig,
-        a.graph
+        h.graph
       );
       _.configure(
-        a,
+        h,
         i.overlayDraggableEdges,
         s,
         this.window,
@@ -3008,22 +3032,22 @@ class St {
       );
     }
     this.virtualScrollConfig !== void 0 ? Z.configure(
-      a,
+      h,
       i.main,
       this.window,
       le(this.transformConfig),
       e,
       this.virtualScrollConfig
     ) : this.hasTransformableViewport && $.configure(
-      a,
+      h,
       i.main,
       this.window,
       le(this.transformConfig)
     ), this.reset();
     const d = () => {
-      i.destroy(), a.onBeforeDestroy.unsubscribe(d);
+      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
     };
-    return a.onBeforeDestroy.subscribe(d), a;
+    return h.onBeforeDestroy.subscribe(d), h;
   }
   /**
    * @deprecated