@html-graph/html-graph 9.0.0 → 9.1.0

package/dist/html-graph.min.js

@@ -726,7 +726,7 @@ var e = /* @__PURE__ */ function(e) {
 }, x = (e, t, n) => {
 	let { x: r, y: i, width: a, height: o } = e.getBoundingClientRect();
 	return t >= r && t <= r + a && n >= i && n <= i + o;
-}, S = (e, t, n) => t >= 0 && t <= e.innerWidth && n >= 0 && n <= e.innerHeight, C = class {
+}, S = (e, t, n) => t >= 0 && t <= e.innerWidth && n >= 0 && n <= e.innerHeight, ee = class {
 	element;
 	win;
 	constructor(e, t) {
@@ -735,9 +735,9 @@ var e = /* @__PURE__ */ function(e) {
 	verify(e, t) {
 		return x(this.element, e, t) && S(this.win, e, t);
 	}
-}, w = (e, t) => {
+}, C = (e, t) => {
 	t === null ? e.style.removeProperty("cursor") : e.style.cursor = t;
-}, T = (e) => {
+}, w = (e) => {
 	let t = document.createElement("div");
 	return {
 		id: e.overlayNodeId,
@@ -750,26 +750,26 @@ var e = /* @__PURE__ */ function(e) {
 			direction: e.portDirection
 		}]
 	};
-}, ee = (e, t) => {
-	let n = t;
-	for (; n !== null;) {
-		let t = e.findPortIdsByElement(n)[0] ?? null;
+}, te = (e, t, n) => {
+	let r = t;
+	for (; r !== null;) {
+		let t = n(e.findPortIdsByElement(r));
 		if (t !== null) return {
 			status: "portFound",
 			portId: t
 		};
-		if (e.findNodeIdByElement(n) !== void 0) return { status: "nodeEncountered" };
-		n = n.parentElement;
+		if (e.findNodeIdByElement(r) !== void 0) return { status: "nodeEncountered" };
+		r = r.parentElement;
 	}
 	return { status: "notFound" };
 };
 //#endregion
 //#region src/configurators/shared/find-port-at-point/get-elements-at-point/get-elements-at-point.ts
-function* te(e, t) {
+function* ne(e, t) {
 	let n = e.elementsFromPoint(t.x, t.y);
 	for (let e of n) {
 		if (e.shadowRoot !== null) {
-			let n = te(e.shadowRoot, t);
+			let n = ne(e.shadowRoot, t);
 			for (let e of n) yield e;
 		}
 		yield e;
@@ -777,23 +777,23 @@ function* te(e, t) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var ne = (e, t) => {
-	let n = te(document, t);
-	for (let t of n) {
-		let n = ee(e, t);
-		if (n.status === "portFound") return n.portId;
-		if (n.status === "nodeEncountered") return null;
+var re = (e, t, n) => {
+	let r = ne(document, t);
+	for (let t of r) {
+		let r = te(e, t, n);
+		if (r.status === "portFound") return r.portId;
+		if (r.status === "nodeEncountered") return null;
 	}
 	return null;
-}, E = /* @__PURE__ */ function(e) {
+}, T = /* @__PURE__ */ function(e) {
 	return e.StaticNodeId = "static", e.DraggingNodeId = "dragging", e.EdgeId = "edge", e;
-}({}), re = (e, t) => ({
+}({}), ie = (e, t) => ({
 	x: e / 2,
 	y: t / 2
-}), D = (e, t, n) => ({
+}), E = (e, t, n) => ({
 	x: t.x * e.x - t.y * e.y + ((1 - t.x) * n.x + t.y * n.y),
 	y: t.y * e.x + t.x * e.y + ((1 - t.x) * n.y - t.y * n.x)
-}), ie = (e, t, n) => {
+}), ae = (e, t, n) => {
 	let r = {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
@@ -815,14 +815,14 @@ var ne = (e, t) => {
 			y: i.y - o
 		}
 	};
-}, O = .5 * .5 * .5, k = 3 * O, ae = class {
+}, D = .5 * .5 * .5, O = 3 * D, oe = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { from: t, to: n, arrowLength: r, fromDir: i, toDir: a, curvature: o, hasSourceArrow: s, hasTargetArrow: c } = e, l = D({
+		let { from: t, to: n, arrowLength: r, fromDir: i, toDir: a, curvature: o, hasSourceArrow: s, hasTargetArrow: c } = e, l = E({
 			x: t.x + r,
 			y: t.y
-		}, i, t), u = D({
+		}, i, t), u = E({
 			x: n.x - r,
 			y: n.y
 		}, a, n), d = {
@@ -831,7 +831,7 @@ var ne = (e, t) => {
 		}, f = {
 			x: u.x - a.x * o,
 			y: u.y - a.y * o
-		}, p = O * l.x + k * d.x + k * f.x + O * u.x, m = O * l.y + k * d.y + k * f.y + O * u.y;
+		}, p = D * l.x + O * d.x + O * f.x + D * u.x, m = D * l.y + O * d.y + O * f.y + D * u.y;
 		this.midpoint = {
 			x: p,
 			y: m
@@ -839,23 +839,23 @@ var ne = (e, t) => {
 		let h = `M ${l.x} ${l.y} C ${d.x} ${d.y}, ${f.x} ${f.y}, ${u.x} ${u.y}`, g = s ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, _ = c ? "" : ` M ${u.x} ${u.y} L ${n.x} ${n.y}`;
 		this.path = `${g}${h}${_}`;
 	}
-}, oe = class {
+}, se = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { hasSourceArrow: t, hasTargetArrow: n, curvature: r, fromDir: i, toDir: a, detourDir: o, from: s, to: c, arrowLength: l, detourDistance: u } = e, d = t ? D({
+		let { hasSourceArrow: t, hasTargetArrow: n, curvature: r, fromDir: i, toDir: a, detourDir: o, from: s, to: c, arrowLength: l, detourDistance: u } = e, d = t ? E({
 			x: s.x + l,
 			y: s.y
-		}, i, s) : s, f = n ? D({
+		}, i, s) : s, f = n ? E({
 			x: c.x - l,
 			y: c.y
-		}, a, c) : c, p = Math.cos(o) * u, m = Math.sin(o) * u, h = D({
+		}, a, c) : c, p = Math.cos(o) * u, m = Math.sin(o) * u, h = E({
 			x: s.x + l,
 			y: s.y
 		}, i, s), g = {
 			x: h.x + p,
 			y: h.y + m
-		}, _ = D({
+		}, _ = E({
 			x: c.x - l,
 			y: c.y
 		}, a, c), v = {
@@ -873,7 +873,7 @@ var ne = (e, t) => {
 		}, S = {
 			x: h.x + p,
 			y: h.y + m
-		}, C = {
+		}, ee = {
 			x: _.x + p,
 			y: _.y + m
 		};
@@ -881,22 +881,22 @@ var ne = (e, t) => {
 			`M ${d.x} ${d.y}`,
 			`L ${h.x} ${h.y}`,
 			`C ${b.x} ${b.y} ${S.x} ${S.y} ${y.x} ${y.y}`,
-			`C ${C.x} ${C.y} ${x.x} ${x.y} ${_.x} ${_.y}`,
+			`C ${ee.x} ${ee.y} ${x.x} ${x.y} ${_.x} ${_.y}`,
 			`L ${f.x} ${f.y}`
 		].join(" "), this.midpoint = y;
 	}
-}, A = Object.freeze({ edgeColor: "--edge-color" }), se = (e) => {
+}, k = Object.freeze({ edgeColor: "--edge-color" }), ce = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t.style.setProperty(A.edgeColor, e), t;
-}, ce = (e) => {
+	return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t.style.setProperty(k.edgeColor, e), t;
+}, le = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	return t.setAttribute("stroke", `var(${A.edgeColor})`), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t;
-}, j = () => {
+	return t.setAttribute("stroke", `var(${k.edgeColor})`), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t;
+}, A = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	return e.setAttribute("fill", `var(${A.edgeColor})`), e;
-}, le = (e, t) => {
+	return e.setAttribute("fill", `var(${k.edgeColor})`), e;
+}, ue = (e, t) => {
 	e.style.transform = `translate(${t.x}px, ${t.y}px)`, e.style.width = `${t.width}px`, e.style.height = `${t.height}px`;
-}, M = (e, t) => {
+}, j = (e, t) => {
 	let n = [];
 	if (e.length > 0 && n.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && n.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
 		let r = e.length - 1, i = 0, a = 0, o = 0;
@@ -917,7 +917,7 @@ var ne = (e, t) => {
 		});
 	}
 	return n.join(" ");
-}, ue = (e, t) => {
+}, de = (e, t) => {
 	let n = e.linePoint, r = t.linePoint, i = r.x - n.x >= 0, a = e.dir.x >= 0;
 	if (a === t.dir.x >= 0) {
 		let o = a === i, s = {
@@ -991,24 +991,24 @@ var ne = (e, t) => {
 			y: s
 		}
 	};
-}, N = (e) => ({
+}, M = (e) => ({
 	x: e.y,
 	y: e.x
-}), de = (e, t) => {
-	let n = ue({
-		arrowPoint: N(e.arrowPoint),
-		linePoint: N(e.linePoint),
-		dir: N(e.dir)
+}), fe = (e, t) => {
+	let n = de({
+		arrowPoint: M(e.arrowPoint),
+		linePoint: M(e.linePoint),
+		dir: M(e.dir)
 	}, {
-		arrowPoint: N(t.arrowPoint),
-		linePoint: N(t.linePoint),
-		dir: N(t.dir)
+		arrowPoint: M(t.arrowPoint),
+		linePoint: M(t.linePoint),
+		dir: M(t.dir)
 	});
 	return {
-		points: n.points.map((e) => N(e)),
-		midpoint: N(n.midpoint)
+		points: n.points.map((e) => M(e)),
+		midpoint: M(n.midpoint)
 	};
-}, P = (e) => {
+}, N = (e) => {
 	let t = [];
 	for (let n = 1; n < e.length; n++) {
 		let r = e[n - 1], i = e[n], a = i.x - r.x, o = i.y - r.y, s = Math.sqrt(a * a + o * o);
@@ -1034,7 +1034,7 @@ var ne = (e, t) => {
 	}
 	if (r === 0 && e.length > 0) return e[0];
 	throw Error("Failed to calculate midpoint");
-}, fe = (e, t) => {
+}, pe = (e, t) => {
 	let n = e.linePoint, r = e.arrowPoint, i = t.linePoint, a = t.arrowPoint, o = t.dir.y >= 0, s = e.dir.x >= 0, c = i.y - n.y >= 0, l = s === i.x - n.x >= 0, u = o === c;
 	if (l) {
 		if (u) {
@@ -1048,7 +1048,7 @@ var ne = (e, t) => {
 					e,
 					a
 				],
-				midpoint: P([
+				midpoint: N([
 					n,
 					e,
 					i
@@ -1070,7 +1070,7 @@ var ne = (e, t) => {
 				i,
 				a
 			],
-			midpoint: P([
+			midpoint: N([
 				n,
 				t,
 				o,
@@ -1094,7 +1094,7 @@ var ne = (e, t) => {
 				o,
 				a
 			],
-			midpoint: P([
+			midpoint: N([
 				n,
 				t,
 				o,
@@ -1114,46 +1114,46 @@ var ne = (e, t) => {
 			i,
 			a
 		],
-		midpoint: P([
+		midpoint: N([
 			n,
 			d,
 			i
 		])
 	};
-}, pe = (e, t) => {
-	let n = fe({
-		arrowPoint: N(e.arrowPoint),
-		linePoint: N(e.linePoint),
-		dir: N(e.dir)
+}, me = (e, t) => {
+	let n = pe({
+		arrowPoint: M(e.arrowPoint),
+		linePoint: M(e.linePoint),
+		dir: M(e.dir)
 	}, {
-		arrowPoint: N(t.arrowPoint),
-		linePoint: N(t.linePoint),
-		dir: N(t.dir)
+		arrowPoint: M(t.arrowPoint),
+		linePoint: M(t.linePoint),
+		dir: M(t.dir)
 	});
 	return {
-		points: n.points.map((e) => N(e)),
-		midpoint: N(n.midpoint)
+		points: n.points.map((e) => M(e)),
+		midpoint: M(n.midpoint)
 	};
-}, me = (e, t) => {
+}, he = (e, t) => {
 	let n = Math.abs(e.dir.y) < 1e-10, r = Math.abs(t.dir.y) < 1e-10;
-	return n ? r ? ue(e, t) : fe(e, t) : r ? pe(e, t) : de(e, t);
-}, he = class {
+	return n ? r ? de(e, t) : pe(e, t) : r ? me(e, t) : fe(e, t);
+}, ge = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { hasSourceArrow: t, hasTargetArrow: n, from: r, to: i, arrowLength: a, fromDir: o, toDir: s, arrowOffset: c, detourDir: l, detourDistance: u, roundness: d } = e, f = t ? D({
+		let { hasSourceArrow: t, hasTargetArrow: n, from: r, to: i, arrowLength: a, fromDir: o, toDir: s, arrowOffset: c, detourDir: l, detourDistance: u, roundness: d } = e, f = t ? E({
 			x: r.x + a,
 			y: r.y
-		}, o, r) : r, p = n ? D({
+		}, o, r) : r, p = n ? E({
 			x: i.x - a,
 			y: i.y
-		}, s, i) : i, m = a + c, h = Math.cos(l) * u, g = Math.sin(l) * u, _ = D({
+		}, s, i) : i, m = a + c, h = Math.cos(l) * u, g = Math.sin(l) * u, _ = E({
 			x: r.x + m,
 			y: r.y
 		}, o, r), v = {
 			x: _.x + h,
 			y: _.y + g
-		}, y = D({
+		}, y = E({
 			x: i.x - m,
 			y: i.y
 		}, s, i), b = {
@@ -1163,7 +1163,7 @@ var ne = (e, t) => {
 		this.midpoint = {
 			x: (v.x + b.x) / 2,
 			y: (v.y + b.y) / 2
-		}, this.path = M([
+		}, this.path = j([
 			f,
 			_,
 			v,
@@ -1172,18 +1172,18 @@ var ne = (e, t) => {
 			p
 		], d);
 	}
-}, ge = class {
+}, _e = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { from: t, to: n, hasSourceArrow: r, hasTargetArrow: i, arrowLength: a, fromDir: o, toDir: s, arrowOffset: c, roundness: l } = e, u = this.createArrowPoint(r, o, t, a), d = this.createArrowPoint(i, s, n, -a), f = a + c, p = D({
+		let { from: t, to: n, hasSourceArrow: r, hasTargetArrow: i, arrowLength: a, fromDir: o, toDir: s, arrowOffset: c, roundness: l } = e, u = this.createArrowPoint(r, o, t, a), d = this.createArrowPoint(i, s, n, -a), f = a + c, p = E({
 			x: t.x + f,
 			y: t.y
-		}, o, t), m = D({
+		}, o, t), m = E({
 			x: n.x - f,
 			y: n.y
 		}, s, n);
-		this.path = M([
+		this.path = j([
 			u,
 			p,
 			m,
@@ -1196,28 +1196,28 @@ var ne = (e, t) => {
 		};
 	}
 	createArrowPoint(e, t, n, r) {
-		return e ? D({
+		return e ? E({
 			x: n.x + r,
 			y: n.y
 		}, t, n) : n;
 	}
-}, _e = class {
+}, ve = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { from: t, to: n, fromDir: r, toDir: i, arrowLength: a, arrowOffset: o, roundness: s, hasSourceArrow: c, hasTargetArrow: l } = e, u = c ? D({
+		let { from: t, to: n, fromDir: r, toDir: i, arrowLength: a, arrowOffset: o, roundness: s, hasSourceArrow: c, hasTargetArrow: l } = e, u = c ? E({
 			x: t.x + a,
 			y: t.y
-		}, r, t) : t, d = l ? D({
+		}, r, t) : t, d = l ? E({
 			x: n.x - a,
 			y: n.y
-		}, i, n) : n, f = a + o, p = D({
+		}, i, n) : n, f = a + o, p = E({
 			x: t.x + f,
 			y: t.y
-		}, r, t), m = D({
+		}, r, t), m = E({
 			x: n.x - f,
 			y: n.y
-		}, i, n), h = me({
+		}, i, n), h = he({
 			arrowPoint: u,
 			linePoint: p,
 			dir: r
@@ -1226,9 +1226,9 @@ var ne = (e, t) => {
 			linePoint: m,
 			dir: i
 		});
-		this.path = M(h.points, s), this.midpoint = h.midpoint;
+		this.path = j(h.points, s), this.midpoint = h.midpoint;
 	}
-}, ve = class {
+}, ye = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1265,19 +1265,19 @@ var ne = (e, t) => {
 				x: n,
 				y: 0
 			}
-		].map((e) => D(e, i, {
+		].map((e) => E(e, i, {
 			x: 0,
 			y: 0
 		})).map((e) => ({
 			x: e.x + a.x,
 			y: e.y + a.y
 		})), u = `M ${a.x} ${a.y} L ${l[0].x} ${l[0].y} `;
-		this.path = `${o ? "" : u}${M(l, e.roundness)}`, this.midpoint = {
+		this.path = `${o ? "" : u}${j(l, e.roundness)}`, this.midpoint = {
 			x: (l[3].x + l[4].x) / 2,
 			y: (l[3].y + l[4].y) / 2
 		};
 	}
-}, ye = class {
+}, be = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1298,7 +1298,7 @@ var ne = (e, t) => {
 				x: d,
 				y: 0
 			}
-		].map((e) => D(e, i, {
+		].map((e) => E(e, i, {
 			x: 0,
 			y: 0
 		})).map((e) => ({
@@ -1312,30 +1312,30 @@ var ne = (e, t) => {
 		].join(" "), h = `M ${a.x} ${a.y} L ${p[0].x} ${p[0].y} `;
 		this.path = `${o ? "" : h}${m}`, this.midpoint = p[3];
 	}
-}, be = (e, t, n) => {
+}, xe = (e, t, n) => {
 	let r = Math.max(e.y, t.y), i = Math.min(e.y, t.y);
 	return (n >= 0 ? r : i) + n;
-}, xe = class {
+}, Se = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { hasSourceArrow: t, hasTargetArrow: n, arrowLength: r, from: i, to: a, fromDir: o, toDir: s, arrowOffset: c, roundness: l, detourDistance: u } = e, d = t ? D({
+		let { hasSourceArrow: t, hasTargetArrow: n, arrowLength: r, from: i, to: a, fromDir: o, toDir: s, arrowOffset: c, roundness: l, detourDistance: u } = e, d = t ? E({
 			x: i.x + r,
 			y: i.y
-		}, o, i) : i, f = n ? D({
+		}, o, i) : i, f = n ? E({
 			x: a.x - r,
 			y: a.y
-		}, s, a) : a, p = r + c, m = D({
+		}, s, a) : a, p = r + c, m = E({
 			x: i.x + p,
 			y: i.y
-		}, o, i), h = D({
+		}, o, i), h = E({
 			x: a.x - p,
 			y: a.y
-		}, s, a), g = be(m, h, u);
+		}, s, a), g = xe(m, h, u);
 		this.midpoint = {
 			x: (m.x + h.x) / 2,
 			y: g
-		}, this.path = M([
+		}, this.path = j([
 			d,
 			m,
 			{
@@ -1350,30 +1350,30 @@ var ne = (e, t) => {
 			f
 		], l);
 	}
-}, Se = (e, t, n) => {
+}, Ce = (e, t, n) => {
 	let r = Math.max(e.x, t.x), i = Math.min(e.x, t.x);
 	return (n >= 0 ? r : i) + n;
-}, Ce = class {
+}, we = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { hasSourceArrow: t, hasTargetArrow: n, arrowLength: r, fromDir: i, toDir: a, from: o, to: s, arrowOffset: c, detourDistance: l, roundness: u } = e, d = t ? D({
+		let { hasSourceArrow: t, hasTargetArrow: n, arrowLength: r, fromDir: i, toDir: a, from: o, to: s, arrowOffset: c, detourDistance: l, roundness: u } = e, d = t ? E({
 			x: o.x + r,
 			y: o.y
-		}, i, o) : o, f = n ? D({
+		}, i, o) : o, f = n ? E({
 			x: s.x - r,
 			y: s.y
-		}, a, s) : s, p = r + c, m = D({
+		}, a, s) : s, p = r + c, m = E({
 			x: o.x + p,
 			y: o.y
-		}, i, o), h = D({
+		}, i, o), h = E({
 			x: s.x - p,
 			y: s.y
-		}, a, s), g = Se(m, h, l);
+		}, a, s), g = Ce(m, h, l);
 		this.midpoint = {
 			x: g,
 			y: (m.y + h.y) / 2
-		}, this.path = M([
+		}, this.path = j([
 			d,
 			m,
 			{
@@ -1388,25 +1388,25 @@ var ne = (e, t) => {
 			f
 		], u);
 	}
-}, we = class {
+}, Te = class {
 	path;
 	midpoint;
 	constructor(e) {
 		let t = Math.abs(e.fromDir.y) < 1e-10, n = Math.abs(e.toDir.y) < 1e-10;
 		if (t && n) {
-			let t = new xe(e);
+			let t = new Se(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
 		if (!t && !n) {
-			let t = new Ce(e);
+			let t = new we(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
-		let r = new _e(e);
+		let r = new ve(e);
 		this.path = r.path, this.midpoint = r.midpoint;
 	}
-}, F = Object.freeze({
+}, P = Object.freeze({
 	color: "#777777",
 	width: 1,
 	arrowLength: 20,
@@ -1428,10 +1428,10 @@ var ne = (e, t) => {
 	curvature: 90,
 	interactiveWidth: 10,
 	portOffset: 0
-}), Te = (e) => ({
+}), Ee = (e) => ({
 	x: Math.cos(e),
 	y: Math.sin(e)
-}), I = class {
+}), F = class {
 	params;
 	element;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -1442,17 +1442,17 @@ var ne = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = se(e.color), this.element.appendChild(this.group), this.line = ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
+		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = ce(e.color), this.element.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(t) {
-		let { x: n, y: r, width: i, height: a, from: o, to: s } = ie(t.from, t.to, this.params.padding);
-		le(this.element, {
+		let { x: n, y: r, width: i, height: a, from: o, to: s } = ae(t.from, t.to, this.params.padding);
+		ue(this.element, {
 			x: n,
 			y: r,
 			width: i,
 			height: a
 		});
-		let c = Te(t.from.direction), l = Te(t.to.direction), u = {
+		let c = Ee(t.from.direction), l = Ee(t.to.direction), u = {
 			x: -l.x,
 			y: -l.y
 		}, d;
@@ -1476,7 +1476,7 @@ var ne = (e, t) => {
 			targetArrowPath: m
 		});
 	}
-}, Ee = (e) => (t) => {
+}, De = (e) => (t) => {
 	let n = [
 		{
 			x: 0,
@@ -1490,7 +1490,7 @@ var ne = (e, t) => {
 			x: t.arrowLength,
 			y: -e.radius
 		}
-	].map((e) => D(e, t.direction, {
+	].map((e) => E(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1498,7 +1498,7 @@ var ne = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${n[0].x} ${n[0].y}`} ${`L ${n[1].x} ${n[1].y}`} ${`L ${n[2].x} ${n[2].y}`} Z`;
-}, De = (e) => (t) => {
+}, Oe = (e) => (t) => {
 	let n = e.radius, r = t.arrowLength, i = (r * r + 2 * r * n) / (2 * n), a = i + n, o = r + n - n * (r + n) / a, s = n * i / a, c = [
 		{
 			x: 0,
@@ -1512,7 +1512,7 @@ var ne = (e, t) => {
 			x: o,
 			y: s
 		}
-	].map((e) => D(e, t.direction, {
+	].map((e) => E(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1520,8 +1520,8 @@ var ne = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${c[0].x} ${c[0].y}`} ${`A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`} ${`A ${n} ${n} 0 0 0 ${c[2].x} ${c[2].y}`} ${`A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`}`;
-}, Oe = (e) => (t) => {
-	let n = e.smallRadius, r = e.radius, i = D({
+}, ke = (e) => (t) => {
+	let n = e.smallRadius, r = e.radius, i = E({
 		x: t.arrowLength,
 		y: 0
 	}, {
@@ -1540,7 +1540,7 @@ var ne = (e, t) => {
 			y: -i.y
 		},
 		i
-	].map((e) => D(e, t.direction, {
+	].map((e) => E(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1548,18 +1548,18 @@ var ne = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${a[0].x} ${a[0].y}`} ${`A ${r} ${r} 0 0 1 ${a[1].x} ${a[1].y}`} ${`A ${n} ${n} 0 0 1 ${a[2].x} ${a[2].y}`} ${`A ${r} ${r} 0 0 1 ${a[0].x} ${a[0].y}`}`;
-}, L = (e) => {
+}, I = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "triangle": return Ee({ radius: e.radius ?? F.polygonArrowRadius });
-		case "arc": return De({ radius: e.radius ?? F.circleArrowRadius });
-		default: return Oe({
-			smallRadius: e.smallRadius ?? F.wedgeArrowSmallRadius,
-			angle: e.angle ?? F.wedgeArrowAngle,
-			radius: e.radius ?? F.wedgeArrowRadius
+		case "triangle": return De({ radius: e.radius ?? P.polygonArrowRadius });
+		case "arc": return Oe({ radius: e.radius ?? P.circleArrowRadius });
+		default: return ke({
+			smallRadius: e.smallRadius ?? P.wedgeArrowSmallRadius,
+			angle: e.angle ?? P.wedgeArrowAngle,
+			radius: e.radius ?? P.wedgeArrowRadius
 		});
 	}
-}, ke = class {
+}, Ae = class {
 	element;
 	group;
 	line;
@@ -1575,7 +1575,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ye({
+	createCyclePath = (e, t, n) => new be({
 		origin: e,
 		dir: n,
 		radius: this.portCycleRadius,
@@ -1583,7 +1583,7 @@ var ne = (e, t) => {
 		arrowLength: this.arrowLength,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new oe({
+	createDetourPath = (e, t, n, r) => new se({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1595,7 +1595,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new ae({
+	createLinePath = (e, t, n, r) => new oe({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1606,10 +1606,10 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.curvature = e?.curvature ?? F.curvature, this.portCycleRadius = e?.cycleRadius ?? F.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? F.smallCycleRadius, this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.curvature = e?.curvature ?? P.curvature, this.portCycleRadius = e?.cycleRadius ?? P.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? P.smallCycleRadius, this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1622,7 +1622,7 @@ var ne = (e, t) => {
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, Ae = class {
+}, je = class {
 	element;
 	group;
 	line;
@@ -1638,7 +1638,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ve({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1647,7 +1647,7 @@ var ne = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new he({
+	createDetourPath = (e, t, n, r) => new ge({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1660,7 +1660,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new ge({
+	createLinePath = (e, t, n, r) => new _e({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1672,12 +1672,12 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
+		let t = e?.roundness ?? P.roundness;
+		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1690,10 +1690,10 @@ var ne = (e, t) => {
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, je = (e) => {
+}, Me = (e) => {
 	let t = e + Math.PI / 4, n = Math.cos(t), r = Math.sin(t);
 	return n > 0 ? r > 0 ? 0 : -Math.PI / 2 : r > 0 ? Math.PI / 2 : Math.PI;
-}, Me = class {
+}, Ne = class {
 	element;
 	group;
 	line;
@@ -1708,7 +1708,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ve({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1717,7 +1717,7 @@ var ne = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new we({
+	createDetourPath = (e, t, n, r) => new Te({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1729,7 +1729,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new _e({
+	createLinePath = (e, t, n, r) => new ve({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1741,12 +1741,12 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
+		let t = e?.roundness ?? P.roundness;
+		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1762,18 +1762,18 @@ var ne = (e, t) => {
 			category: r,
 			from: {
 				...t,
-				direction: je(t.direction)
+				direction: Me(t.direction)
 			},
 			to: {
 				...n,
-				direction: je(n.direction)
+				direction: Me(n.direction)
 			}
 		});
 	}
-}, Ne = (e) => {
+}, Pe = (e) => {
 	let { direction: t, radius: n } = e, { x: r, y: i } = t, { horizontal: a, vertical: o } = n, s = i / r, c = Math.abs(o / s), l = Math.abs(a * s), u = Math.min(a, c), d = Math.min(o, l);
 	return Math.sqrt(u * u + d * d);
-}, Pe = (e) => typeof e == "number" ? () => e : e === "box" ? Ne : e, Fe = F.portOffset, R = class {
+}, Fe = (e) => typeof e == "number" ? () => e : e === "box" ? Pe : e, Ie = P.portOffset, L = class {
 	element;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1788,11 +1788,11 @@ var ne = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Pe(e?.sourceOffset ?? Fe), this.targetOffsetFn = Pe(e?.targetOffset ?? Fe), this.element = se(this.color), this.element.appendChild(this.group), this.line = ce(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
+		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? P.color, this.width = e?.width ?? P.width, this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowRenderer = I(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Fe(e?.sourceOffset ?? Ie), this.targetOffsetFn = Fe(e?.targetOffset ?? Ie), this.element = ce(this.color), this.element.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(e) {
-		let { x: t, y: n, width: r, height: i, from: a, to: o } = ie(e.from, e.to, 50);
-		le(this.element, {
+		let { x: t, y: n, width: r, height: i, from: a, to: o } = ae(e.from, e.to, 50);
+		ue(this.element, {
 			x: t,
 			y: n,
 			width: r,
@@ -1890,43 +1890,43 @@ var ne = (e, t) => {
 			targetArrowPath: n
 		});
 	}
-}, Ie = () => {
+}, Le = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	return e.style.pointerEvents = "auto", e.style.cursor = "pointer", e;
-}, Le = (e) => {
+}, Re = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	return t.setAttribute("stroke", "transparent"), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t.setAttribute("stroke-linecap", "round"), t;
-}, Re = (e) => {
+}, ze = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	return t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "transparent"), t.setAttribute("stroke", "transparent"), t;
-}, ze = class extends Error {
+}, Be = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InteractiveEdgeError";
 	}
-}, Be = class e {
+}, Ve = class e {
 	baseEdge;
 	element;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	handle = Ie();
+	handle = Le();
 	onAfterRender;
 	interactiveLine;
 	interactiveSourceArrow = null;
 	interactiveTargetArrow = null;
 	constructor(t, n) {
-		if (this.baseEdge = t, t instanceof e) throw new ze("interactive edge can be configured only once");
+		if (this.baseEdge = t, t instanceof e) throw new Be("interactive edge can be configured only once");
 		this.element = this.baseEdge.element, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-		let r = n?.distance ?? F.interactiveWidth;
-		this.interactiveLine = Le(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Re(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Re(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
+		let r = n?.distance ?? P.interactiveWidth;
+		this.interactiveLine = Re(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ze(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ze(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
 			this.interactiveLine.setAttribute("d", e.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", e.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", e.targetArrowPath);
 		});
 	}
 	render(e) {
 		this.baseEdge.render(e);
 	}
-}, Ve = class {
+}, He = class {
 	baseShape;
 	midpointElement;
 	group;
@@ -1944,7 +1944,7 @@ var ne = (e, t) => {
 	render(e) {
 		this.baseShape.render(e);
 	}
-}, He = class {
+}, Ue = class {
 	graphStore;
 	onAfterNodeAdded;
 	onAfterNodeUpdated;
@@ -2043,7 +2043,7 @@ var ne = (e, t) => {
 	getNodeAdjacentEdgeIds(e) {
 		return this.graphStore.getNodeAdjacentEdgeIds(e);
 	}
-}, z = class {
+}, R = class {
 	checkExists;
 	counter = 0;
 	constructor(e) {
@@ -2057,13 +2057,13 @@ var ne = (e, t) => {
 	reset() {
 		this.counter = 0;
 	}
-}, Ue = class {
+}, We = class {
 	graphStore;
 	htmlView;
 	params;
-	nodeIdGenerator = new z((e) => this.graphStore.hasNode(e));
-	portIdGenerator = new z((e) => this.graphStore.hasPort(e));
-	edgeIdGenerator = new z((e) => this.graphStore.hasEdge(e));
+	nodeIdGenerator = new R((e) => this.graphStore.hasNode(e));
+	portIdGenerator = new R((e) => this.graphStore.hasPort(e));
+	edgeIdGenerator = new R((e) => this.graphStore.hasEdge(e));
 	onAfterNodeAdded = (e) => {
 		this.htmlView.attachNode(e);
 	};
@@ -2170,13 +2170,13 @@ var ne = (e, t) => {
 	destroy() {
 		this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
 	}
-}, We = (e) => {
+}, Ge = (e) => {
 	queueMicrotask(() => {
 		e();
 	});
-}, B = (e) => {
+}, z = (e) => {
 	e();
-}, Ge = class {
+}, Ke = class {
 	viewportStore;
 	onBeforeUpdated;
 	onAfterUpdated;
@@ -2199,7 +2199,7 @@ var ne = (e, t) => {
 	createViewportCoords(e) {
 		return this.viewportStore.createViewportCoords(e);
 	}
-}, Ke = (e, t) => Symbol.iterator in e ? {
+}, qe = (e, t) => Symbol.iterator in e ? {
 	minContentScale: t.focus.minContentScale,
 	nodes: e,
 	contentPadding: t.focus.contentPadding,
@@ -2209,15 +2209,15 @@ var ne = (e, t) => {
 	nodes: e.nodes ?? [],
 	contentPadding: e.contentPadding ?? t.focus.contentPadding,
 	animationDuration: e.animationDuration ?? t.focus.animationDuration
-}, qe = (e, t, n) => ({
+}, Je = (e, t, n) => ({
 	scale: e.scale,
 	x: e.x + e.scale * t,
 	y: e.y + e.scale * n
-}), Je = (e, t, n, r) => ({
+}), Ye = (e, t, n, r) => ({
 	scale: e.scale * t,
 	x: e.scale * (1 - t) * n + e.x,
 	y: e.scale * (1 - t) * r + e.y
-}), Ye = class {
+}), Xe = class {
 	graphStore;
 	viewportStore;
 	params;
@@ -2235,16 +2235,16 @@ var ne = (e, t) => {
 		let { width: n, height: r } = this.viewportStore.getDimensions(), i = {
 			x: n / 2,
 			y: r / 2
-		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = qe(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
+		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = Je(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
 		if (c !== void 0) {
 			let e = 1 / c;
-			s = Je(s, e / a.scale, i.x, i.y);
+			s = Ye(s, e / a.scale, i.x, i.y);
 		}
 		let l = t?.animationDuration ?? 0;
 		l > 0 ? this.animateNavigation(a, s, l) : this.viewportStore.patchViewportMatrix(s);
 	}
 	focus(e) {
-		let t = Ke(e ?? {}, this.params);
+		let t = qe(e ?? {}, this.params);
 		this.params.focus.schedule(() => {
 			this.navigate(t);
 		});
@@ -2286,25 +2286,25 @@ var ne = (e, t) => {
 		};
 		this.win.requestAnimationFrame(a);
 	}
-}, Xe = (e, t, n) => {
+}, Ze = (e, t, n) => {
 	let r = new h();
-	return new d(new He(r), new Ge(t), new Ue(r, new a(r, t, e), {
+	return new d(new Ue(r), new Ke(t), new We(r, new a(r, t, e), {
 		nodes: {
-			centerFn: re,
+			centerFn: ie,
 			priorityFn: () => 0
 		},
 		edges: {
-			shapeFactory: () => new R(),
+			shapeFactory: () => new L(),
 			priorityFn: () => 0
 		},
 		ports: { direction: 0 }
-	}), new Ye(r, t, { focus: {
+	}), new Xe(r, t, { focus: {
 		contentPadding: 0,
 		minContentScale: 0,
-		schedule: B,
+		schedule: z,
 		animationDuration: 0
 	} }, n));
-}, V = Symbol(), Ze = class e {
+}, B = Symbol(), Qe = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -2321,11 +2321,11 @@ var ne = (e, t) => {
 	onPortMouseDown = (e) => {
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
-		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n)[0];
-		this.params.onPointerDownVerifier(r, {
+		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n), i = this.params.grabbedPortIdResolver(r);
+		i !== null && this.params.onPointerDownVerifier(i, {
 			x: t.clientX,
 			y: t.clientY
-		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
 	};
 	onWindowMouseMove = (e) => {
 		if (!this.pointInsideVerifier.verify(e.clientX, e.clientY)) {
@@ -2350,7 +2350,7 @@ var ne = (e, t) => {
 		this.params.onPointerDownVerifier(i, {
 			x: n.clientX,
 			y: n.clientY
-		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
 	};
 	onWindowTouchMove = (e) => {
 		let t = e.touches[0];
@@ -2398,16 +2398,16 @@ var ne = (e, t) => {
 	removeWindowTouchListeners() {
 		this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
 	}
-}, H = Symbol(), Qe = class {
+}, V = Symbol(), $e = class {
 	has(e, t) {
-		let n = e[H];
+		let n = e[V];
 		return n !== void 0 && n.has(t);
 	}
 	tag(e, t) {
-		let n = e, r = n[H];
-		r === void 0 ? n[H] = /* @__PURE__ */ new Set([t]) : r.add(t);
+		let n = e, r = n[V];
+		r === void 0 ? n[V] = /* @__PURE__ */ new Set([t]) : r.add(t);
 	}
-}, U = Symbol(), W = class {
+}, H = Symbol(), U = class {
 	window;
 	pointInsideVerifier;
 	onSelected;
@@ -2488,10 +2488,10 @@ var ne = (e, t) => {
 		let r = Math.sqrt(e * e + t * t);
 		this.movedDistance += r, this.movedDistance > this.movementThreshold && n();
 	}
-}, G = (e, t) => ({
+}, W = (e, t) => ({
 	from: e.isDirect ? e.staticPortId : t,
 	to: e.isDirect ? t : e.staticPortId
-}), $e = class {
+}), et = class {
 	graph;
 	connectionAllowedVerifier;
 	constructor(e, t) {
@@ -2502,7 +2502,7 @@ var ne = (e, t) => {
 		return this.graph.getAllPortIds().forEach((i) => {
 			let { element: a, direction: o, nodeId: s } = this.graph.getPort(i), { x: c, y: l } = this.graph.getNode(s);
 			if (c === null || l === null) return;
-			let u = G(e, i);
+			let u = W(e, i);
 			if (!this.connectionAllowedVerifier(u)) return;
 			let { top: d, left: f, width: p, height: m } = a.getBoundingClientRect(), h = {
 				x: f + p / 2,
@@ -2511,7 +2511,7 @@ var ne = (e, t) => {
 			v < n && (n = v, t = o);
 		}), t;
 	}
-}, et = class {
+}, tt = class {
 	direction;
 	constructor(e) {
 		this.direction = e;
@@ -2519,7 +2519,7 @@ var ne = (e, t) => {
 	resolve() {
 		return this.direction;
 	}
-}, tt = class e {
+}, G = (e) => e.length > 0 ? e[0] : null, nt = class e {
 	canvas;
 	element;
 	window;
@@ -2542,12 +2542,12 @@ var ne = (e, t) => {
 		t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
 	};
 	onMouseDown = (e) => {
-		if (this.eventTagger.has(e, V)) return;
+		if (this.eventTagger.has(e, B)) return;
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
 		let n = e.currentTarget, r = this.graph.findNodeIdByElement(n), i = this.graph.getNode(r);
 		if (!this.params.nodeDragVerifier(r)) return;
-		this.eventTagger.tag(e, V), this.params.onNodeDragStarted(r);
+		this.eventTagger.tag(e, B), this.params.onNodeDragStarted(r);
 		let a = this.calculateContentPoint({
 			x: t.clientX,
 			y: t.clientY
@@ -2556,15 +2556,15 @@ var ne = (e, t) => {
 			nodeId: r,
 			dx: a.x - i.x,
 			dy: a.y - i.y
-		}, w(this.element, this.params.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 });
+		}, C(this.element, this.params.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 });
 	};
 	onTouchStart = (e) => {
-		if (this.eventTagger.has(e, V)) return;
+		if (this.eventTagger.has(e, B)) return;
 		let t = e;
 		if (t.touches.length !== 1) return;
 		let n = t.touches[0], r = e.currentTarget, i = this.canvas.graph.findNodeIdByElement(r), a = this.graph.getNode(i);
 		if (!this.params.nodeDragVerifier(i)) return;
-		this.eventTagger.tag(e, V);
+		this.eventTagger.tag(e, B);
 		let o = this.calculateContentPoint({
 			x: n.clientX,
 			y: n.clientY
@@ -2641,7 +2641,7 @@ var ne = (e, t) => {
 		}
 	}
 	stopMouseDrag() {
-		this.finishDrag(), w(this.element, null), this.removeMouseDragListeners();
+		this.finishDrag(), C(this.element, null), this.removeMouseDragListeners();
 	}
 	removeMouseDragListeners() {
 		this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2689,7 +2689,7 @@ var ne = (e, t) => {
 		touchesCnt: n,
 		touches: t
 	};
-}, nt = class e {
+}, rt = class e {
 	canvas;
 	element;
 	window;
@@ -2704,7 +2704,7 @@ var ne = (e, t) => {
 		this.removeMouseDragListeners(), this.removeTouchDragListeners();
 	};
 	onMouseDown = (e) => {
-		this.eventTagger.has(e, V) || this.params.mouseDownEventVerifier(e) && (w(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
+		this.eventTagger.has(e, B) || this.params.mouseDownEventVerifier(e) && (C(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
 	};
 	onWindowMouseMove = (e) => {
 		let t = this.pointInsideVerifier.verify(e.clientX, e.clientY);
@@ -2726,7 +2726,7 @@ var ne = (e, t) => {
 		}, this.params.scaleWheelFinishTimeout);
 	};
 	onTouchStart = (e) => {
-		if (!this.eventTagger.has(e, V)) {
+		if (!this.eventTagger.has(e, B)) {
 			if (this.prevTouches !== null) {
 				this.prevTouches = K(e);
 				return;
@@ -2765,7 +2765,7 @@ var ne = (e, t) => {
 		new e(t, n, r, i, a, o);
 	}
 	moveViewport(e, t) {
-		let n = this.viewport.getViewportMatrix(), r = qe(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+		let n = this.viewport.getViewportMatrix(), r = Je(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
 			prevTransform: n,
 			nextTransform: r,
 			viewport: {
@@ -2776,7 +2776,7 @@ var ne = (e, t) => {
 		this.performTransform(o);
 	}
 	scaleViewport(e, t, n) {
-		let r = this.canvas.viewport.getViewportMatrix(), i = Je(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+		let r = this.canvas.viewport.getViewportMatrix(), i = Ye(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
 			prevTransform: r,
 			nextTransform: i,
 			viewport: {
@@ -2787,7 +2787,7 @@ var ne = (e, t) => {
 		this.performTransform(s);
 	}
 	stopMouseDrag() {
-		w(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+		C(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
 	}
 	removeMouseDragListeners() {
 		this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2818,7 +2818,7 @@ var ne = (e, t) => {
 		});
 		this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(r), this.params.onResizeTransformFinished();
 	}
-}, rt = class e {
+}, it = class e {
 	canvas;
 	element;
 	window;
@@ -2871,7 +2871,7 @@ var ne = (e, t) => {
 				this.scheduleLoadAreaAroundViewport(), r.onTransformFinished();
 			}
 		};
-		nt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+		rt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
 	}
 	static configure(t, n, r, i, a, o, s, c) {
 		new e(t, n, r, i, a, o, s, c);
@@ -2896,21 +2896,21 @@ var ne = (e, t) => {
 			height: u
 		});
 	}
-}, it = () => {
+}, at = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, at = () => {
+}, ot = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	return e.setAttribute("fill", "url(#pattern)"), e;
-}, ot = () => {
+}, st = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
 	return e.setAttribute("id", "pattern"), e;
-}, st = class e {
+}, ct = class e {
 	canvas;
 	backgroundHost;
-	svg = it();
-	patternRenderingRectangle = at();
-	pattern = ot();
+	svg = at();
+	patternRenderingRectangle = ot();
+	pattern = st();
 	patternContent;
 	tileWidth;
 	tileHeight;
@@ -2945,7 +2945,7 @@ var ne = (e, t) => {
 			this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${r}`);
 		}
 	}
-}, ct = class e {
+}, lt = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -2959,7 +2959,7 @@ var ne = (e, t) => {
 		this.params.onAfterEdgeCreated(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Xe(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -2976,9 +2976,10 @@ var ne = (e, t) => {
 			onPointerOutside: () => {
 				let e = this.edgeInProgress;
 				this.resetDragState(), this.params.onEdgeCreationInterrupted(e);
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		Ze.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
 	static configure(t, n, r, i, a, o, s) {
 		new e(t, n, r, i, a, o, s);
@@ -2991,7 +2992,7 @@ var ne = (e, t) => {
 			x: t.x - s.x,
 			y: t.y - s.y
 		}), u = {
-			overlayNodeId: E.StaticNodeId,
+			overlayNodeId: T.StaticNodeId,
 			portCoords: c,
 			portDirection: r.direction
 		}, d = n === "direct";
@@ -3003,26 +3004,26 @@ var ne = (e, t) => {
 			cursor: t,
 			...this.edgeInProgress
 		}), p = {
-			overlayNodeId: E.DraggingNodeId,
+			overlayNodeId: T.DraggingNodeId,
 			portCoords: l,
 			portDirection: f ?? r.direction
 		}, [m, h] = d ? [u, p] : [p, u];
-		this.overlayCanvas.addNode(T(m)), this.overlayCanvas.addNode(T(h)), this.overlayCanvas.addEdge({
+		this.overlayCanvas.addNode(w(m)), this.overlayCanvas.addNode(w(h)), this.overlayCanvas.addEdge({
 			from: m.overlayNodeId,
 			to: h.overlayNodeId,
-			shape: this.params.edgeShapeFactory(E.EdgeId)
+			shape: this.params.edgeShapeFactory(T.EdgeId)
 		});
 	}
 	resetDragState() {
 		this.edgeInProgress = null, this.overlayCanvas.clear();
 	}
 	tryCreateConnection(e) {
-		let t = ne(this.canvas.graph, e);
+		let t = re(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = G(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
+		let n = W(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
 			from: n.from,
 			to: n.to
 		});
@@ -3036,12 +3037,12 @@ var ne = (e, t) => {
 			cursor: e,
 			...this.edgeInProgress
 		});
-		this.overlayCanvas.updateNode(E.DraggingNodeId, {
+		this.overlayCanvas.updateNode(T.DraggingNodeId, {
 			x: n.x,
 			y: n.y
-		}).updatePort(E.DraggingNodeId, { direction: r });
+		}).updatePort(T.DraggingNodeId, { direction: r });
 	}
-}, lt = class e {
+}, ut = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3056,7 +3057,7 @@ var ne = (e, t) => {
 		this.params.onAfterEdgeReattached(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Xe(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3076,9 +3077,10 @@ var ne = (e, t) => {
 					shape: e.shape,
 					priority: e.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		Ze.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
 	static configure(t, n, r, i, a, o, s) {
 		new e(t, n, r, i, a, o, s);
@@ -3109,21 +3111,21 @@ var ne = (e, t) => {
 			priority: r.priority
 		}, this.canvas.removeEdge(n);
 		let m = {
-			overlayNodeId: E.StaticNodeId,
+			overlayNodeId: T.StaticNodeId,
 			portCoords: f,
 			portDirection: c.direction
 		}, h = this.params.draggingPortDirectionResolver.resolve({
 			cursor: t,
 			...this.edgeInProgress
 		}), g = {
-			overlayNodeId: E.DraggingNodeId,
+			overlayNodeId: T.DraggingNodeId,
 			portCoords: p,
 			portDirection: h ?? s.direction
 		}, [_, v] = a ? [m, g] : [g, m];
-		this.overlayCanvas.addNode(T(_)), this.overlayCanvas.addNode(T(v));
-		let y = this.params.draggingEdgeShapeFactory === null ? r.shape : this.params.draggingEdgeShapeFactory(E.EdgeId);
+		this.overlayCanvas.addNode(w(_)), this.overlayCanvas.addNode(w(v));
+		let y = this.params.draggingEdgeShapeFactory === null ? r.shape : this.params.draggingEdgeShapeFactory(T.EdgeId);
 		return this.overlayCanvas.addEdge({
-			id: E.EdgeId,
+			id: T.EdgeId,
 			from: _.overlayNodeId,
 			to: v.overlayNodeId,
 			shape: y
@@ -3140,14 +3142,14 @@ var ne = (e, t) => {
 			cursor: e,
 			...this.edgeInProgress
 		});
-		this.overlayCanvas.updateNode(E.DraggingNodeId, {
+		this.overlayCanvas.updateNode(T.DraggingNodeId, {
 			x: r.x,
 			y: r.y
-		}).updatePort(E.DraggingNodeId, { direction: i });
+		}).updatePort(T.DraggingNodeId, { direction: i });
 	}
 	tryCreateConnection(e) {
-		let t = ne(this.canvas.graph, e);
-		if (this.overlayCanvas.removeEdge(E.EdgeId), t === null) {
+		let t = re(this.canvas.graph, e, this.params.releasedPortIdResolver);
+		if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
 				id: e.id,
@@ -3158,7 +3160,7 @@ var ne = (e, t) => {
 			});
 			return;
 		}
-		let { from: n, to: r } = G(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
+		let { from: n, to: r } = W(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
 			id: i.id,
 			from: n,
 			to: r,
@@ -3180,7 +3182,7 @@ var ne = (e, t) => {
 			});
 		}
 	}
-}, ut = class e {
+}, dt = class e {
 	applier;
 	trigger;
 	constructor(e, t) {
@@ -3191,7 +3193,7 @@ var ne = (e, t) => {
 	static configure(t, n) {
 		new e(t, n);
 	}
-}, dt = class e {
+}, ft = class e {
 	graph;
 	applier;
 	defererFn;
@@ -3216,7 +3218,7 @@ var ne = (e, t) => {
 	scheduleApply() {
 		this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
 	}
-}, ft = class {
+}, pt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3232,23 +3234,23 @@ var ne = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, pt = class {
+}, mt = class {
 	static configure(e, t) {
-		let n = t.applyOn, r = new ft(e, t.algorithm, {
+		let n = t.applyOn, r = new pt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
 		});
 		switch (n.type) {
 			case "trigger":
-				ut.configure(r, n.trigger);
+				dt.configure(r, n.trigger);
 				break;
 			case "topologyChangeSchedule":
-				dt.configure(e.graph, r, n.schedule);
+				ft.configure(e.graph, r, n.schedule);
 				break;
 		}
 	}
-}, mt = class {
+}, ht = class {
 	win;
 	callback;
 	previousTimeStamp = void 0;
@@ -3263,7 +3265,7 @@ var ne = (e, t) => {
 	constructor(e, t) {
 		this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
 	}
-}, ht = class {
+}, gt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3280,30 +3282,29 @@ var ne = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, gt = class e {
-	win;
+}, _t = class e {
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.win = n, this.applier = new ht(e, t.algorithm, {
+		this.applier = new gt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new mt(this.win, this.step);
+		}), new ht(n, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
 	}
-}, _t = class e {
+}, vt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
 	onNodeSelected;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	onAfterNodeAdded = (e) => {
 		let { element: t } = this.canvas.graph.getNode(e);
 		this.configurator.enable(t);
@@ -3319,7 +3320,7 @@ var ne = (e, t) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findNodeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onNodeSelected(n);
@@ -3332,13 +3333,13 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, vt = class e {
+}, yt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	onEdgeSelected;
 	onAfterEdgeAdded = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
@@ -3355,7 +3356,7 @@ var ne = (e, t) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findEdgeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onEdgeSelected(n);
@@ -3368,7 +3369,7 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, yt = class e {
+}, bt = class e {
 	canvas;
 	element;
 	window;
@@ -3376,9 +3377,9 @@ var ne = (e, t) => {
 	eventTagger;
 	configurator;
 	onCanvasSelected;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	constructor(e, t, n, r, i, a) {
-		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				this.eventTagger.has(t, this.eventHandledTag) || this.onCanvasSelected();
 			},
@@ -3392,29 +3393,29 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a, o) {
 		new e(t, n, r, i, a, o);
 	}
-}, bt = () => {
+}, xt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, q = () => {
+}, St = () => {
 	let e = document.createElement("div");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, xt = () => {
-	let e = q();
+}, Ct = () => {
+	let e = St();
 	return e.style.pointerEvents = "none", e;
-}, St = class {
+}, wt = class {
 	element;
-	background = q();
-	main = q();
-	overlayConnectablePorts = xt();
-	overlayDraggableEdges = xt();
-	host = bt();
+	background = St();
+	main = St();
+	overlayConnectablePorts = Ct();
+	overlayDraggableEdges = Ct();
+	host = xt();
 	constructor(e) {
 		this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
 	}
 	destroy() {
 		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
 	}
-}, J = Object.freeze({
+}, q = Object.freeze({
 	seed: "HTMLGraph is awesome",
 	maxTimeDeltaSec: .01,
 	nodeCharge: 1e5,
@@ -3428,14 +3429,14 @@ var ne = (e, t) => {
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
-}), Y = Object.freeze({
+}), J = Object.freeze({
 	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0,
 	movementThreshold: 10
-}), X = () => {}, Ct = (e, t, n) => e === "nearest-connectable-port" ? new $e(t, n) : typeof e == "number" ? new et(e) : new et(void 0), wt = (e) => {
+}), Y = () => {}, Tt = (e, t, n) => e === "nearest-connectable-port" ? new et(t, n) : typeof e == "number" ? new tt(e) : new tt(void 0), Et = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "straight": return () => new Ae({
+		case "straight": return () => new je({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3448,7 +3449,7 @@ var ne = (e, t) => {
 			detourDistance: e.detourDistance,
 			detourDirection: e.detourDirection
 		});
-		case "orthogonal": return () => new Me({
+		case "orthogonal": return () => new Ne({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3460,7 +3461,7 @@ var ne = (e, t) => {
 			roundness: e.roundness,
 			detourDistance: e.detourDistance
 		});
-		case "direct": return () => new R({
+		case "direct": return () => new L({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3470,7 +3471,7 @@ var ne = (e, t) => {
 			sourceOffset: e.sourceOffset,
 			targetOffset: e.targetOffset
 		});
-		default: return () => new ke({
+		default: return () => new Ae({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3484,7 +3485,7 @@ var ne = (e, t) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Tt = (e) => {
+}, Dt = (e) => {
 	let t = e.nodeDragVerifier ?? (() => !0), n = e.moveOnTop !== !1, r = e.moveEdgesOnTop !== !1 && n, i = e.mouse?.dragCursor, a = i === void 0 ? "grab" : i, o = e.mouse?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e.mouse?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c;
 	return {
 		moveOnTop: n,
@@ -3493,12 +3494,12 @@ var ne = (e, t) => {
 		gridSize: e.gridSize ?? null,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
-		onNodeDragStarted: e.events?.onNodeDragStarted ?? X,
-		onNodeDrag: e.events?.onNodeDrag ?? X,
+		onNodeDragStarted: e.events?.onNodeDragStarted ?? Y,
+		onNodeDrag: e.events?.onNodeDrag ?? Y,
 		nodeDragVerifier: t,
-		onNodeDragFinished: e.events?.onNodeDragFinished ?? X
+		onNodeDragFinished: e.events?.onNodeDragFinished ?? Y
 	};
-}, Et = (e) => {
+}, Ot = (e) => {
 	let t = e.minX === null ? -Infinity : e.minX, n = e.maxX === null ? Infinity : e.maxX, r = e.minY === null ? -Infinity : e.minY, i = e.maxY === null ? Infinity : e.maxY;
 	return (e) => {
 		let a = e.nextTransform.x, o = e.nextTransform.y;
@@ -3512,7 +3513,7 @@ var ne = (e, t) => {
 			y: o
 		};
 	};
-}, Dt = (e) => {
+}, kt = (e) => {
 	let t = e.maxContentScale, n = e.minContentScale, r = t === null ? 0 : 1 / t, i = n === null ? Infinity : 1 / n;
 	return (e) => {
 		let t = e.prevTransform, n = e.nextTransform, a = n.scale, o = n.x, s = n.y;
@@ -3532,104 +3533,108 @@ var ne = (e, t) => {
 			y: s
 		};
 	};
-}, Ot = (e) => (t) => e.reduce((e, n) => n({
+}, At = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
 	viewport: t.viewport
-}), t.nextTransform), kt = (e) => {
+}), t.nextTransform), jt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return Dt({
+		case "scale-limit": return kt({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Et({
+		case "shift-limit": return Ot({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, At = (e) => {
+}, Mt = (e) => {
 	let t = e?.scale?.mouseWheelSensitivity, n = t === void 0 ? 1.2 : t, r = e?.transformPreprocessor, i;
-	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? Ot(r.map((e) => kt(e))) : kt(r);
+	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? At(r.map((e) => jt(e))) : jt(r);
 	let a = e?.pan?.cursor === void 0 ? "grab" : e.pan.cursor, o = e?.pan?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.pan?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
 	return {
 		wheelSensitivity: n,
-		onTransformStarted: e?.events?.onTransformStarted ?? X,
-		onTransformFinished: e?.events?.onTransformFinished ?? X,
-		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? X,
-		onTransformChange: e?.events?.onTransformChange ?? X,
+		onTransformStarted: e?.events?.onTransformStarted ?? Y,
+		onTransformFinished: e?.events?.onTransformFinished ?? Y,
+		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? Y,
+		onTransformChange: e?.events?.onTransformChange ?? Y,
 		transformPreprocessor: i,
 		shiftCursor: a,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
 		mouseWheelEventVerifier: d,
 		scaleWheelFinishTimeout: e?.scale?.wheelFinishTimeout ?? 500,
-		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? X,
-		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? X
+		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? Y,
+		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? Y
 	};
-}, jt = (e, t) => {
+}, Nt = (e, t) => {
 	let n = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 	return n.setAttribute("cx", "0"), n.setAttribute("cy", "0"), n.setAttribute("r", `${e}`), n.setAttribute("fill", `${t}`), n;
-}, Mt = (e) => e instanceof SVGElement ? e : jt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Nt = (e) => {
+}, Pt = (e) => e instanceof SVGElement ? e : Nt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ft = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Mt(e.renderer ?? {}),
+		renderer: Pt(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
-}, Z = Object.freeze({
+}, X = Object.freeze({
 	connectionTypeResolver: () => "direct",
 	connectionPreprocessor: (e) => e,
 	connectionAllowedVerifier: () => !0,
 	mouseEventVerifier: (e) => e.button === 0
-}), Pt = (e, t, n) => {
-	let r = e.connectionAllowedVerifier ?? Z.connectionAllowedVerifier;
+}), It = (e, t, n) => {
+	let r = e.connectionAllowedVerifier ?? X.connectionAllowedVerifier;
 	return {
-		connectionTypeResolver: e.connectionTypeResolver ?? Z.connectionTypeResolver,
+		connectionTypeResolver: e.connectionTypeResolver ?? X.connectionTypeResolver,
 		connectionAllowedVerifier: r,
-		draggingPortDirectionResolver: Ct(e.dragPortDirection, n, r),
-		edgeShapeFactory: e.edgeShape === void 0 ? t : wt(e.edgeShape),
-		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseEventVerifier,
-		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? X,
-		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? X,
-		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? X
+		draggingPortDirectionResolver: Tt(e.dragPortDirection, n, r),
+		edgeShapeFactory: e.edgeShape === void 0 ? t : Et(e.edgeShape),
+		connectionPreprocessor: e.connectionPreprocessor ?? X.connectionPreprocessor,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? X.mouseEventVerifier,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? X.mouseEventVerifier,
+		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? Y,
+		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? Y,
+		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? Y,
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? G,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? G
 	};
-}, Q = Object.freeze({
+}, Z = Object.freeze({
 	connectionAllowedVerifier: () => !0,
 	connectionPreprocessor: (e) => e,
 	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0
-}), Ft = (e, t) => {
+}), Lt = (e, t) => {
 	let n = (e) => {
 		let n = t.getPortAdjacentEdgeIds(e);
 		return n.length > 0 ? n[n.length - 1] : null;
-	}, r = e.connectionAllowedVerifier ?? Q.connectionAllowedVerifier;
+	}, r = e.connectionAllowedVerifier ?? Z.connectionAllowedVerifier;
 	return {
-		connectionPreprocessor: e.connectionPreprocessor ?? Q.connectionPreprocessor,
+		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
 		connectionAllowedVerifier: r,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q.mouseDownEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Q.mouseUpEventVerifier,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseDownEventVerifier,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseUpEventVerifier,
 		draggingEdgeResolver: e.draggingEdgeResolver ?? n,
-		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : wt(e.draggingEdgeShape),
-		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? X,
-		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? X,
-		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? X,
-		draggingPortDirectionResolver: Ct(e.dragPortDirection, t, r)
+		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Et(e.draggingEdgeShape),
+		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? Y,
+		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? Y,
+		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? Y,
+		draggingPortDirectionResolver: Tt(e.dragPortDirection, t, r),
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? G,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? G
 	};
-}, It = (e) => ({
+}, Rt = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), Lt = (e) => ({
-	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? X,
-	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? X
-}), Rt = class extends Error {
+}), zt = (e) => ({
+	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? Y,
+	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? Y
+}), Bt = class extends Error {
 	name = "CanvasBuilderError";
-}, zt = class {
+}, Vt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3664,7 +3669,7 @@ var ne = (e, t) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Bt = class {
+}, Ht = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3687,11 +3692,11 @@ var ne = (e, t) => {
 			d: a
 		};
 	}
-}, Vt = (e) => {
+}, Ut = (e) => {
 	if (e.distance === 0) return e.maxForce;
 	let t = e.coefficient * (e.sourceCharge * e.targetCharge / (e.distance * e.distance));
 	return Math.min(t, e.maxForce);
-}, Ht = class {
+}, Wt = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3703,7 +3708,7 @@ var ne = (e, t) => {
 		for (let i = 0; i < r; i++) {
 			let a = n[i];
 			for (let o = i + 1; o < r; o++) {
-				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Vt({
+				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Ut({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3714,7 +3719,7 @@ var ne = (e, t) => {
 			}
 		}
 	}
-}, Ut = (e) => {
+}, Gt = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3730,7 +3735,7 @@ var ne = (e, t) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, Wt = class {
+}, Kt = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -3886,7 +3891,7 @@ var ne = (e, t) => {
 			y: n / e.size
 		};
 	}
-}, Gt = class {
+}, qt = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -3898,8 +3903,8 @@ var ne = (e, t) => {
 		this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
 	}
 	apply(e, t) {
-		let n = new Wt({
-			box: Ut(e),
+		let n = new Kt({
+			box: Gt(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4009,7 +4014,7 @@ var ne = (e, t) => {
 		});
 	}
 	calculateNodeRepulsiveForce(e) {
-		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Vt({
+		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Ut({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4036,12 +4041,12 @@ var ne = (e, t) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, Kt = (e) => e.theta === 0 ? new Ht({
+}, Jt = (e) => e.theta === 0 ? new Wt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new Gt({
+}) : new qt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4049,7 +4054,7 @@ var ne = (e, t) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), qt = class {
+}), Yt = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4074,7 +4079,7 @@ var ne = (e, t) => {
 			});
 		}), r;
 	}
-}, Jt = class {
+}, Xt = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4085,7 +4090,7 @@ var ne = (e, t) => {
 	edgeStiffness;
 	convergenceVelocity;
 	constructor(e) {
-		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
+		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4093,7 +4098,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new Yt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4103,7 +4108,7 @@ var ne = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		for (let e = 0; e < this.maxIterations && !(new zt(t, r, {
+		for (let e = 0; e < this.maxIterations && !(new Vt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
@@ -4113,7 +4118,7 @@ var ne = (e, t) => {
 		}).apply() < this.convergenceVelocity); e++);
 		return r;
 	}
-}, Yt = class {
+}, Zt = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4157,7 +4162,7 @@ var ne = (e, t) => {
 			}), r = e;
 		}
 	}
-}, Xt = class {
+}, Qt = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4196,13 +4201,13 @@ var ne = (e, t) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, Zt = class {
+}, $t = class {
 	tree;
 	offsets = /* @__PURE__ */ new Map();
 	treeSpans = /* @__PURE__ */ new Map();
 	constructor(e, t) {
 		this.tree = e;
-		let n = t.spaceAroundRadius, r = new Xt({ spaceAroundRadius: n });
+		let n = t.spaceAroundRadius, r = new Qt({ spaceAroundRadius: n });
 		[...this.tree.sequence].reverse().forEach((e) => {
 			let t = Array.from(e.children).map((e) => this.treeSpans.get(e.nodeId)), i = r.generate(t), a = 0;
 			e.children.forEach((e) => {
@@ -4218,19 +4223,19 @@ var ne = (e, t) => {
 	generate() {
 		return this.offsets;
 	}
-}, Qt = class {
+}, en = class {
 	params;
 	constructor(e) {
 		this.params = e;
 	}
 	calculateCoordinates(e) {
-		let t = /* @__PURE__ */ new Map(), n = new Yt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
+		let t = /* @__PURE__ */ new Map(), n = new Zt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
 		return n.forEach((e) => {
 			t.set(e.root.nodeId, {
 				x: r,
 				y: 0
 			});
-			let n = new Zt(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
+			let n = new $t(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4247,7 +4252,7 @@ var ne = (e, t) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, $t = (e) => {
+}, tn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4256,19 +4261,19 @@ var ne = (e, t) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, en = (e) => {
+}, nn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
 	});
 	return new Set(r);
-}, tn = (e) => {
+}, rn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeIncomingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.from).nodeId;
 	});
 	return new Set(r);
-}, nn = class {
+}, an = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	convergenceVelocity;
@@ -4278,7 +4283,7 @@ var ne = (e, t) => {
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(e) {
-		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
+		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4286,7 +4291,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new Yt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4296,7 +4301,7 @@ var ne = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		return new zt(t, i, {
+		return new Vt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
@@ -4308,7 +4313,7 @@ var ne = (e, t) => {
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, rn = (e) => {
+}, on = (e) => {
 	let t = 1779033703, n = 3144134277, r = 1013904242, i = 2773480762;
 	for (let a = 0, o; a < e.length; a++) o = e.charCodeAt(a), t = n ^ Math.imul(t ^ o, 597399067), n = r ^ Math.imul(n ^ o, 2869860233), r = i ^ Math.imul(r ^ o, 951274213), i = t ^ Math.imul(i ^ o, 2716044179);
 	return t = Math.imul(r ^ t >>> 18, 597399067), n = Math.imul(i ^ n >>> 22, 2869860233), r = Math.imul(t ^ r >>> 17, 951274213), i = Math.imul(n ^ i >>> 19, 2716044179), t ^= n ^ r ^ i, n ^= t, r ^= t, i ^= t, [
@@ -4317,55 +4322,55 @@ var ne = (e, t) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, an = (e, t, n, r) => function() {
+}, sn = (e, t, n, r) => function() {
 	e |= 0, t |= 0, n |= 0, r |= 0;
 	let i = (e + t | 0) + r | 0;
 	return r = r + 1 | 0, e = t ^ t >>> 9, t = n + (n << 3) | 0, n = n << 21 | n >>> 11, n = n + i | 0, (i >>> 0) / 4294967296;
-}, on = (e) => {
+}, cn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			let t = rn(e?.seed ?? J.seed);
-			return new nn({
-				rand: an(t[0], t[1], t[2], t[3]),
-				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? J.maxTimeDeltaSec,
-				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
-				nodeMass: e?.nodeMass ?? J.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
-				maxForce: e?.maxForce ?? J.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
+			let t = on(e?.seed ?? q.seed);
+			return new an({
+				rand: sn(t[0], t[1], t[2], t[3]),
+				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? q.maxTimeDeltaSec,
+				nodeCharge: e?.nodeCharge ?? q.nodeCharge,
+				nodeMass: e?.nodeMass ?? q.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? q.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? q.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? q.convergenceVelocity,
+				maxForce: e?.maxForce ?? q.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? q.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? q.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? q.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, sn = { staticNodeResolver: () => !1 }, cn = (e) => ({
-	algorithm: on(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? sn.staticNodeResolver,
-	onBeforeApplied: e?.events?.onBeforeApplied ?? X,
-	onAfterApplied: e?.events?.onAfterApplied ?? X
-}), ln = (e) => e instanceof l ? {
+}, ln = { staticNodeResolver: () => !1 }, un = (e) => ({
+	algorithm: cn(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? ln.staticNodeResolver,
+	onBeforeApplied: e?.events?.onBeforeApplied ?? Y,
+	onAfterApplied: e?.events?.onAfterApplied ?? Y
+}), dn = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
 } : {
 	type: "topologyChangeSchedule",
-	schedule: We
-}, un = Object.freeze({
+	schedule: Ge
+}, fn = Object.freeze({
 	staticNodeResolver: () => !1,
 	hierarchicalLayout: {
 		layerWidth: 300,
 		layerSpace: 300
 	}
-}), $ = (e, t) => ({
+}), Q = (e, t) => ({
 	a: e.a * t.a + e.b * t.d,
 	b: e.a * t.b + e.b * t.e,
 	c: e.a * t.c + e.b * t.f + e.c,
 	d: e.d * t.a + e.e * t.d,
 	e: e.d * t.b + e.e * t.e,
 	f: e.d * t.c + e.e * t.f + e.f
-}), dn = (e) => {
+}), pn = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4375,7 +4380,7 @@ var ne = (e, t) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, fn = class {
+}, mn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4417,11 +4422,11 @@ var ne = (e, t) => {
 		return this.createRelativeTransform(n, r);
 	}
 	createMirrorRelativeMatrix(e, t) {
-		let n = this.createMirrorYBaseMatrix(), r = $(this.createShiftBaseMatrix(t), this.createRotateBaseMatrix(e));
+		let n = this.createMirrorYBaseMatrix(), r = Q(this.createShiftBaseMatrix(t), this.createRotateBaseMatrix(e));
 		return this.createRelativeTransform(n, r);
 	}
 	createRelativeTransform(e, t) {
-		return $($(t, e), dn(t));
+		return Q(Q(t, e), pn(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4464,7 +4469,7 @@ var ne = (e, t) => {
 			f: 0
 		};
 	}
-}, pn = (e) => {
+}, hn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4474,10 +4479,10 @@ var ne = (e, t) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new fn();
+	}, r = new mn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
-		n = $(n, t);
+		n = Q(n, t);
 	}), (e) => {
 		let { x: t, y: r } = e;
 		return {
@@ -4485,47 +4490,47 @@ var ne = (e, t) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, mn = (e) => {
+}, gn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return en;
-		case "incoming": return tn;
-		default: return $t;
+		case "outgoing": return nn;
+		case "incoming": return rn;
+		default: return tn;
 	}
-}, hn = (e) => {
+}, _n = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		case "hierarchical": return new Qt({
-			layerWidth: e.layerWidth ?? un.hierarchicalLayout.layerWidth,
-			layerSpace: e.layerSpace ?? un.hierarchicalLayout.layerSpace,
-			transform: pn(e.transform),
-			nextLayerNodesResolver: mn(e.nextLayerNodesResolver)
+		case "hierarchical": return new en({
+			layerWidth: e.layerWidth ?? fn.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? fn.hierarchicalLayout.layerSpace,
+			transform: hn(e.transform),
+			nextLayerNodesResolver: gn(e.nextLayerNodesResolver)
 		});
 		default: {
-			let t = rn(e?.seed ?? J.seed), n = an(t[0], t[1], t[2], t[3]);
-			return new Jt({
-				dtSec: e?.dtSec ?? J.dtSec,
-				maxIterations: e?.maxIterations ?? J.maxIterations,
+			let t = on(e?.seed ?? q.seed), n = sn(t[0], t[1], t[2], t[3]);
+			return new Xt({
+				dtSec: e?.dtSec ?? q.dtSec,
+				maxIterations: e?.maxIterations ?? q.maxIterations,
 				rand: n,
-				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
-				nodeMass: e?.nodeMass ?? J.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
-				maxForce: e?.maxForce ?? J.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
+				nodeCharge: e?.nodeCharge ?? q.nodeCharge,
+				nodeMass: e?.nodeMass ?? q.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? q.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? q.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? q.convergenceVelocity,
+				maxForce: e?.maxForce ?? q.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? q.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? q.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? q.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, gn = (e) => ({
-	algorithm: hn(e.algorithm),
-	applyOn: ln(e.applyOn),
-	staticNodeResolver: e.staticNodeResolver ?? un.staticNodeResolver,
-	onBeforeApplied: e.events?.onBeforeApplied ?? X,
-	onAfterApplied: e.events?.onAfterApplied ?? X
-}), _n = (e, t) => ({
+}, vn = (e) => ({
+	algorithm: _n(e.algorithm),
+	applyOn: dn(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? fn.staticNodeResolver,
+	onBeforeApplied: e.events?.onBeforeApplied ?? Y,
+	onAfterApplied: e.events?.onAfterApplied ?? Y
+}), yn = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4533,7 +4538,7 @@ var ne = (e, t) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), vn = (e, t) => {
+}), bn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4541,55 +4546,55 @@ var ne = (e, t) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, yn = (e, t) => ({
+}, xn = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), bn = (e) => () => e, xn = bn(0), Sn = () => {
+}), $ = (e) => () => e, Sn = $(0), Cn = () => {
 	let e = 0;
 	return () => e++;
-}, Cn = (e, t) => {
-	let n = xn, r = xn, i = Sn();
-	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = bn(e)), typeof t == "number" && (r = bn(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
+}, wn = (e, t) => {
+	let n = Sn, r = Sn, i = Cn();
+	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = $(e)), typeof t == "number" && (r = $(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
 		nodesPriorityFn: n,
 		edgesPriorityFn: r
 	};
-}, wn = (e) => {
-	let t = Cn(e.nodes?.priority, e.edges?.priority);
+}, Tn = (e) => {
+	let t = wn(e.nodes?.priority, e.edges?.priority);
 	return {
 		nodes: {
-			centerFn: e.nodes?.centerFn ?? re,
+			centerFn: e.nodes?.centerFn ?? ie,
 			priorityFn: t.nodesPriorityFn
 		},
 		ports: { direction: e.ports?.direction ?? 0 },
 		edges: {
-			shapeFactory: wt(e.edges?.shape ?? {}),
+			shapeFactory: Et(e.edges?.shape ?? {}),
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, Tn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, En = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? Tn(e.layoutParams) : B;
+}, En = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : z, Dn = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? En(e.layoutParams) : z;
 	return { focus: {
 		contentPadding: t.focus?.contentPadding ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, Dn = (e) => ({
+}, On = (e) => ({
 	onNodeSelected: e.onNodeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
-}), On = (e) => ({
-	onCanvasSelected: e.onCanvasSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
 }), kn = (e) => ({
+	onCanvasSelected: e.onCanvasSelected,
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
+}), An = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
-}), An = class {
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
+}), jn = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4616,9 +4621,9 @@ var ne = (e, t) => {
 	window = window;
 	animationStaticNodes = /* @__PURE__ */ new Set();
 	pointInsideVerifier;
-	eventTagger = new Qe();
+	eventTagger = new $e();
 	constructor(e) {
-		this.element = e, this.pointInsideVerifier = new C(e, this.window);
+		this.element = e, this.pointInsideVerifier = new ee(e, this.window);
 	}
 	setDefaults(e) {
 		return this.canvasDefaults = e, this;
@@ -4660,40 +4665,40 @@ var ne = (e, t) => {
 		return this.userSelectableCanvasConfig = e, this;
 	}
 	build() {
-		if (this.used) throw new Rt("Failed to build Canvas because CanvasBuilder is a single-use object");
+		if (this.used) throw new Bt("Failed to build Canvas because CanvasBuilder is a single-use object");
 		this.used = !0;
-		let e = new y(this.element), t = new h(), n = new St(this.element), r = this.createHtmlView(n.main, t, e), i = wn(this.canvasDefaults), a = new Ue(t, r, i), o = gn(this.layoutConfig), s = new Ye(t, e, En({
+		let e = new y(this.element), t = new h(), n = new wt(this.element), r = this.createHtmlView(n.main, t, e), i = Tn(this.canvasDefaults), a = new We(t, r, i), o = vn(this.layoutConfig), s = new Xe(t, e, Dn({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
-		}), this.window), c = new Ge(e), l = new d(new He(t), c, a, s);
-		if (this.hasBackground && st.configure(l, Nt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
-			let e = kn(this.userSelectableEdgesConfig);
-			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+		}), this.window), c = new Ke(e), l = new d(new Ue(t), c, a, s);
+		if (this.hasBackground && ct.configure(l, Ft(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = An(this.userSelectableEdgesConfig);
+			yt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = Dn(this.userSelectableNodesConfig);
-			_t.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = On(this.userSelectableNodesConfig);
+			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = On(this.userSelectableCanvasConfig);
-			yt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = kn(this.userSelectableCanvasConfig);
+			bt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Tt(this.dragConfig);
-			this.hasAnimatedLayout && (e = _n(e, this.animationStaticNodes)), tt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Dt(this.dragConfig);
+			this.hasAnimatedLayout && (e = yn(e, this.animationStaticNodes)), nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = Pt(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
-			ct.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = It(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
+			lt.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
 		if (this.hasUserDraggableEdges) {
-			let t = Ft(this.draggableEdgesConfig, l.graph);
-			lt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Lt(this.draggableEdgesConfig, l.graph);
+			ut.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, At(this.transformConfig)) : rt.configure(l, n.main, this.window, At(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, It(this.virtualScrollConfig)), this.hasLayout && pt.configure(l, o), this.hasAnimatedLayout) {
-			let e = cn(this.animatedLayoutConfig);
-			this.hasDraggableNodes && (vn(l, this.animationStaticNodes), e = yn(e, this.animationStaticNodes)), gt.configure(l, e, this.window);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && rt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, Mt(this.transformConfig)) : it.configure(l, n.main, this.window, Mt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Rt(this.virtualScrollConfig)), this.hasLayout && mt.configure(l, o), this.hasAnimatedLayout) {
+			let e = un(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (bn(l, this.animationStaticNodes), e = xn(e, this.animationStaticNodes)), _t.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4701,8 +4706,8 @@ var ne = (e, t) => {
 	}
 	createHtmlView(e, t, n) {
 		let r = new a(t, n, e);
-		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Lt(this.virtualScrollConfig))), r = new c(r, t), r;
+		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, zt(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-export { ke as BezierEdgeShape, An as CanvasBuilder, Rt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, ze as InteractiveEdgeError, Be as InteractiveEdgeShape, Ve as MidpointEdgeShape, Me as OrthogonalEdgeShape, Ae as StraightEdgeShape };
+export { Ae as BezierEdgeShape, jn as CanvasBuilder, Bt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, L as DirectEdgeShape, l as EventSubject, Be as InteractiveEdgeError, Ve as InteractiveEdgeShape, He as MidpointEdgeShape, Ne as OrthogonalEdgeShape, je as StraightEdgeShape };