@html-graph/html-graph 8.22.0 → 8.24.0

package/dist/html-graph.min.js

@@ -35,7 +35,7 @@ var e = /* @__PURE__ */ function(e) {
 		i(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
 	}
 	attachEdge(e) {
-		let t = this.graphStore.getEdge(e).payload.shape.svg;
+		let t = this.graphStore.getEdge(e).payload.shape.element;
 		this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
 	}
 	detachEdge(e) {
@@ -63,7 +63,7 @@ var e = /* @__PURE__ */ function(e) {
 	updateEdgeShape(e) {
 		let t = this.edgeIdToElementMap.get(e);
 		this.container.removeChild(t);
-		let n = this.graphStore.getEdge(e).payload.shape.svg;
+		let n = this.graphStore.getEdge(e).payload.shape.element;
 		this.edgeIdToElementMap.set(e, n), this.container.appendChild(n);
 	}
 	renderEdge(t) {
@@ -76,7 +76,7 @@ var e = /* @__PURE__ */ function(e) {
 	}
 	updateEdgePriority(e) {
 		let t = this.graphStore.getEdge(e);
-		t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
+		t.payload.shape.element.style.zIndex = `${t.payload.priority}`;
 	}
 	createEdgeRenderPort(e, t, n, r) {
 		let i = this.viewportStore.createContentCoords({
@@ -513,7 +513,7 @@ var e = /* @__PURE__ */ function(e) {
 		if (this.hasEdge(e.id)) throw new p(m.addEdgeWithExistingId(e.id));
 		if (!this.hasPort(e.from)) throw new p(m.addEdgeFromNonexistentPort(e.id, e.from));
 		if (!this.hasPort(e.to)) throw new p(m.addEdgeToNonexistentPort(e.id, e.to));
-		let t = this.findEdgeIdByElement(e.shape.svg);
+		let t = this.findEdgeIdByElement(e.shape.element);
 		if (t !== void 0) throw new p(m.addEdgeWithElementInUse(e.id, t));
 		this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
 	}
@@ -621,11 +621,11 @@ var e = /* @__PURE__ */ function(e) {
 				shape: e.shape,
 				priority: e.priority
 			}
-		}), this.edgesElementsMap.set(e.shape.svg, e.id), e.from === e.to ? this.portCycleEdges.get(e.from).add(e.id) : (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id));
+		}), this.edgesElementsMap.set(e.shape.element, e.id), e.from === e.to ? this.portCycleEdges.get(e.from).add(e.id) : (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id));
 	}
 	removeEdgeInternal(e) {
 		let { from: t, to: n, payload: r } = this.getEdge(e);
-		this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(n).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(n).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(n).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(r.shape.svg);
+		this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(n).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(n).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(n).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(r.shape.element);
 	}
 }, g = (e) => ({
 	scale: 1 / e.scale,
@@ -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,7 +750,7 @@ var e = /* @__PURE__ */ function(e) {
 			direction: e.portDirection
 		}]
 	};
-}, ee = (e, t) => {
+}, te = (e, t) => {
 	let n = t;
 	for (; n !== null;) {
 		let t = e.findPortIdsByElement(n)[0] ?? null;
@@ -765,11 +765,11 @@ var e = /* @__PURE__ */ function(e) {
 };
 //#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);
+var re = (e, t) => {
+	let n = ne(document, t);
 	for (let t of n) {
-		let n = ee(e, t);
+		let n = te(e, t);
 		if (n.status === "portFound") return n.portId;
 		if (n.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,9 +917,9 @@ var ne = (e, t) => {
 		});
 	}
 	return n.join(" ");
-}, ue = (e, t) => {
-	let n = e.linePoint, r = t.linePoint, i = r.x - n.x >= 0, a = e.dirX >= 0;
-	if (a === t.dirX >= 0) {
+}, 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 = {
 			x: (n.x + r.x) / 2,
 			y: (n.y + r.y) / 2
@@ -991,50 +991,196 @@ var ne = (e, t) => {
 			y: s
 		}
 	};
-}, de = class {
+}, M = (e) => ({
+	x: e.y,
+	y: e.x
+}), fe = (e, t) => {
+	let n = de({
+		arrowPoint: M(e.arrowPoint),
+		linePoint: M(e.linePoint),
+		dir: M(e.dir)
+	}, {
+		arrowPoint: M(t.arrowPoint),
+		linePoint: M(t.linePoint),
+		dir: M(t.dir)
+	});
+	return {
+		points: n.points.map((e) => M(e)),
+		midpoint: M(n.midpoint)
+	};
+}, 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);
+		t.push({
+			start: r,
+			end: i,
+			distance: s
+		});
+	}
+	let n = t.reduce((e, t) => e + t.distance, 0) / 2, r = 0;
+	for (let e of t) {
+		let t = r + e.distance;
+		if (t >= n) {
+			let t = n - r, { start: i, end: a, distance: o } = e;
+			if (o === 0) continue;
+			let s = t / o, c = a.x - i.x, l = a.y - i.y;
+			return {
+				x: i.x + c * s,
+				y: i.y + l * s
+			};
+		}
+		r = t;
+	}
+	if (r === 0 && e.length > 0) return e[0];
+	throw Error("Failed to calculate midpoint");
+}, 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) {
+			let e = {
+				x: a.x,
+				y: r.y
+			};
+			return {
+				points: [
+					r,
+					e,
+					a
+				],
+				midpoint: N([
+					n,
+					e,
+					i
+				])
+			};
+		}
+		let e = (n.x + i.x) / 2, t = {
+			x: e,
+			y: n.y
+		}, o = {
+			x: e,
+			y: i.y
+		};
+		return {
+			points: [
+				r,
+				t,
+				o,
+				i,
+				a
+			],
+			midpoint: N([
+				n,
+				t,
+				o,
+				i
+			])
+		};
+	}
+	if (u) {
+		let e = (n.y + i.y) / 2, t = {
+			x: n.x,
+			y: e
+		}, o = {
+			x: i.x,
+			y: e
+		};
+		return {
+			points: [
+				r,
+				n,
+				t,
+				o,
+				a
+			],
+			midpoint: N([
+				n,
+				t,
+				o,
+				i
+			])
+		};
+	}
+	let d = {
+		x: n.x,
+		y: i.y
+	};
+	return {
+		points: [
+			r,
+			n,
+			d,
+			i,
+			a
+		],
+		midpoint: N([
+			n,
+			d,
+			i
+		])
+	};
+}, me = (e, t) => {
+	let n = pe({
+		arrowPoint: M(e.arrowPoint),
+		linePoint: M(e.linePoint),
+		dir: M(e.dir)
+	}, {
+		arrowPoint: M(t.arrowPoint),
+		linePoint: M(t.linePoint),
+		dir: M(t.dir)
+	});
+	return {
+		points: n.points.map((e) => M(e)),
+		midpoint: M(n.midpoint)
+	};
+}, he = (e, t) => {
+	let n = Math.abs(e.dir.y) < 1e-10, r = Math.abs(t.dir.y) < 1e-10;
+	return n ? r ? de(e, t) : pe(e, t) : r ? me(e, t) : fe(e, t);
+}, ge = 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 = ue({
+		}, i, n), h = de({
 			arrowPoint: u,
 			linePoint: p,
-			dirX: r.x
+			dir: r
 		}, {
 			arrowPoint: d,
 			linePoint: m,
-			dirX: i.x
+			dir: i
 		});
-		this.path = M(h.points, s), this.midpoint = h.midpoint;
+		this.path = j(h.points, s), this.midpoint = h.midpoint;
 	}
-}, fe = class {
+}, _e = 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 = {
@@ -1044,7 +1190,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,
@@ -1053,18 +1199,18 @@ var ne = (e, t) => {
 			p
 		], d);
 	}
-}, pe = class {
+}, ve = 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,
@@ -1077,113 +1223,66 @@ 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;
 	}
-}, me = (e, t) => {
-	let n = e.linePoint, r = t.linePoint, i = r.y - n.y >= 0, a = e.dirY >= 0;
-	if (a === t.dirY >= 0) {
-		let o = a === i, s = {
-			x: (n.x + r.x) / 2,
-			y: (n.y + r.y) / 2
-		};
-		return o ? {
-			points: [
-				e.arrowPoint,
-				{
-					x: n.x,
-					y: s.y
-				},
-				{
-					x: r.x,
-					y: s.y
-				},
-				t.arrowPoint
-			],
-			midpoint: s
-		} : {
-			points: [
-				e.arrowPoint,
-				n,
-				{
-					x: s.x,
-					y: n.y
-				},
-				{
-					x: s.x,
-					y: r.y
-				},
-				r,
-				t.arrowPoint
-			],
-			midpoint: s
-		};
-	}
-	let o = a === i, s = (n.x + r.x) / 2;
-	if (o) {
-		let i = {
-			x: n.x,
-			y: r.y
-		};
-		return {
-			points: [
-				e.arrowPoint,
-				i,
-				r,
-				t.arrowPoint
-			],
-			midpoint: {
-				x: s,
-				y: i.y
-			}
-		};
+}, ye = class {
+	path;
+	midpoint;
+	constructor(e) {
+		let { from: t, to: n, hasSourceArrow: r, hasTargetArrow: i, arrowLength: a, arrowOffset: o, fromDir: s, toDir: c, roundness: l } = e, u = r ? E({
+			x: t.x + a,
+			y: t.y
+		}, s, t) : t, d = i ? E({
+			x: n.x - a,
+			y: n.y
+		}, c, n) : n, f = a + o, p = E({
+			x: t.x + f,
+			y: t.y
+		}, s, t), m = E({
+			x: n.x - f,
+			y: n.y
+		}, c, n), h = fe({
+			arrowPoint: u,
+			linePoint: p,
+			dir: s
+		}, {
+			arrowPoint: d,
+			linePoint: m,
+			dir: c
+		});
+		this.path = j(h.points, l), this.midpoint = h.midpoint;
 	}
-	let c = {
-		x: r.x,
-		y: n.y
-	};
-	return {
-		points: [
-			e.arrowPoint,
-			n,
-			c,
-			t.arrowPoint
-		],
-		midpoint: {
-			x: s,
-			y: c.y
-		}
-	};
-}, he = class {
+}, be = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { from: t, to: n, hasSourceArrow: r, hasTargetArrow: i, arrowLength: a, arrowOffset: o, fromDir: s, toDir: c, roundness: l } = e, u = r ? 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
-		}, s, t) : t, d = i ? D({
+		}, r, t) : t, d = l ? E({
 			x: n.x - a,
 			y: n.y
-		}, c, n) : n, f = a + o, p = D({
+		}, i, n) : n, f = a + o, p = E({
 			x: t.x + f,
 			y: t.y
-		}, s, t), m = D({
+		}, r, t), m = E({
 			x: n.x - f,
 			y: n.y
-		}, c, n), h = me({
+		}, i, n), h = he({
 			arrowPoint: u,
 			linePoint: p,
-			dirY: s.y
+			dir: r
 		}, {
 			arrowPoint: d,
 			linePoint: m,
-			dirY: c.y
+			dir: i
 		});
-		this.path = M(h.points, l), this.midpoint = h.midpoint;
+		this.path = j(h.points, s), this.midpoint = h.midpoint;
 	}
-}, ge = class {
+}, P = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1220,19 +1319,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
 		};
 	}
-}, _e = class {
+}, xe = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1253,7 +1352,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) => ({
@@ -1267,30 +1366,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];
 	}
-}, ve = (e, t, n) => {
+}, Se = (e, t, n) => {
 	let r = Math.max(e.y, t.y), i = Math.min(e.y, t.y);
 	return (n >= 0 ? r : i) + n;
-}, ye = class {
+}, Ce = 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 = ve(m, h, u);
+		}, s, a), g = Se(m, h, u);
 		this.midpoint = {
 			x: (m.x + h.x) / 2,
 			y: g
-		}, this.path = M([
+		}, this.path = j([
 			d,
 			m,
 			{
@@ -1305,30 +1404,30 @@ var ne = (e, t) => {
 			f
 		], l);
 	}
-}, be = (e, t, n) => {
+}, we = (e, t, n) => {
 	let r = Math.max(e.x, t.x), i = Math.min(e.x, t.x);
 	return (n >= 0 ? r : i) + n;
-}, xe = class {
+}, Te = 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 = be(m, h, l);
+		}, a, s), g = we(m, h, l);
 		this.midpoint = {
 			x: g,
 			y: (m.y + h.y) / 2
-		}, this.path = M([
+		}, this.path = j([
 			d,
 			m,
 			{
@@ -1343,7 +1442,25 @@ var ne = (e, t) => {
 			f
 		], u);
 	}
-}, N = Object.freeze({
+}, Ee = 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 Ce(e);
+			this.path = t.path, this.midpoint = t.midpoint;
+			return;
+		}
+		if (!t && !n) {
+			let t = new Te(e);
+			this.path = t.path, this.midpoint = t.midpoint;
+			return;
+		}
+		let r = new be(e);
+		this.path = r.path, this.midpoint = r.midpoint;
+	}
+}, F = Object.freeze({
 	color: "#777777",
 	width: 1,
 	arrowLength: 20,
@@ -1365,11 +1482,12 @@ var ne = (e, t) => {
 	curvature: 90,
 	interactiveWidth: 10,
 	portOffset: 0
-}), Se = (e) => ({
+}), De = (e) => ({
 	x: Math.cos(e),
 	y: Math.sin(e)
-}), P = class {
+}), I = class {
 	params;
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1379,17 +1497,17 @@ var ne = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.svg = se(e.color), this.svg.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.svg = this.element, 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.svg, {
+		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 = Se(t.from.direction), l = Se(t.to.direction), u = {
+		let c = De(t.from.direction), l = De(t.to.direction), u = {
 			x: -l.x,
 			y: -l.y
 		}, d;
@@ -1413,7 +1531,7 @@ var ne = (e, t) => {
 			targetArrowPath: m
 		});
 	}
-}, Ce = (e) => (t) => {
+}, Oe = (e) => (t) => {
 	let n = [
 		{
 			x: 0,
@@ -1427,7 +1545,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) => ({
@@ -1435,7 +1553,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`;
-}, we = (e) => (t) => {
+}, ke = (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,
@@ -1449,7 +1567,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) => ({
@@ -1457,8 +1575,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}`}`;
-}, Te = (e) => (t) => {
-	let n = e.smallRadius, r = e.radius, i = D({
+}, Ae = (e) => (t) => {
+	let n = e.smallRadius, r = e.radius, i = E({
 		x: t.arrowLength,
 		y: 0
 	}, {
@@ -1477,7 +1595,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) => ({
@@ -1485,18 +1603,19 @@ 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}`}`;
-}, F = (e) => {
+}, L = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "triangle": return Ce({ radius: e.radius ?? N.polygonArrowRadius });
-		case "arc": return we({ radius: e.radius ?? N.circleArrowRadius });
-		default: return Te({
-			smallRadius: e.smallRadius ?? N.wedgeArrowSmallRadius,
-			angle: e.angle ?? N.wedgeArrowAngle,
-			radius: e.radius ?? N.wedgeArrowRadius
+		case "triangle": return Oe({ radius: e.radius ?? F.polygonArrowRadius });
+		case "arc": return ke({ radius: e.radius ?? F.circleArrowRadius });
+		default: return Ae({
+			smallRadius: e.smallRadius ?? F.wedgeArrowSmallRadius,
+			angle: e.angle ?? F.wedgeArrowAngle,
+			radius: e.radius ?? F.wedgeArrowRadius
 		});
 	}
-}, Ee = class {
+}, je = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1512,7 +1631,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new _e({
+	createCyclePath = (e, t, n) => new xe({
 		origin: e,
 		dir: n,
 		radius: this.portCycleRadius,
@@ -1520,7 +1639,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,
@@ -1532,7 +1651,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,
@@ -1543,10 +1662,10 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? N.arrowLength, this.curvature = e?.curvature ?? N.curvature, this.portCycleRadius = e?.cycleRadius ?? N.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? N.smallCycleRadius, this.detourDirection = e?.detourDirection ?? N.detourDirection, this.detourDistance = e?.detourDistance ?? N.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? N.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? N.hasTargetArrow, this.pathShape = new P({
-			color: e?.color ?? N.color,
-			width: e?.width ?? N.width,
-			arrowRenderer: F(e?.arrowRenderer ?? {}),
+		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 ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1554,12 +1673,13 @@ var ne = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, De = (e) => Math.cos(e) > 0 ? 0 : Math.PI, Oe = class {
+}, Me = (e) => Math.cos(e) > 0 ? 0 : Math.PI, Ne = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1574,7 +1694,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ge({
+	createCyclePath = (e, t, n) => new P({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1583,7 +1703,7 @@ var ne = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new ye({
+	createDetourPath = (e, t, n, r) => new Ce({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1595,7 +1715,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new de({
+	createLinePath = (e, t, n, r) => new ge({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1607,12 +1727,12 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? N.arrowLength, this.arrowOffset = e?.arrowOffset ?? N.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? N.cycleSquareSide;
-		let t = e?.roundness ?? N.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? N.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? N.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? N.hasTargetArrow, this.pathShape = new P({
-			color: e?.color ?? N.color,
-			width: e?.width ?? N.width,
-			arrowRenderer: F(e?.arrowRenderer ?? {}),
+		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 ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1620,7 +1740,7 @@ var ne = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1628,15 +1748,16 @@ var ne = (e, t) => {
 			category: r,
 			from: {
 				...t,
-				direction: De(t.direction)
+				direction: Me(t.direction)
 			},
 			to: {
 				...n,
-				direction: De(n.direction)
+				direction: Me(n.direction)
 			}
 		});
 	}
-}, ke = class {
+}, Pe = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1652,7 +1773,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ge({
+	createCyclePath = (e, t, n) => new P({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1661,7 +1782,7 @@ var ne = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new fe({
+	createDetourPath = (e, t, n, r) => new _e({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1674,7 +1795,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new pe({
+	createLinePath = (e, t, n, r) => new ve({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1686,12 +1807,12 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? N.arrowLength, this.arrowOffset = e?.arrowOffset ?? N.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? N.cycleSquareSide;
-		let t = e?.roundness ?? N.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? N.detourDirection, this.detourDistance = e?.detourDistance ?? N.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? N.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? N.hasTargetArrow, this.pathShape = new P({
-			color: e?.color ?? N.color,
-			width: e?.width ?? N.width,
-			arrowRenderer: F(e?.arrowRenderer ?? {}),
+		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 ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1699,12 +1820,13 @@ var ne = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, Ae = Math.PI / 2, je = (e) => Math.sin(e) > 0 ? Ae : -Ae, Me = class {
+}, Fe = Math.PI / 2, Ie = (e) => Math.sin(e) > 0 ? Fe : -Fe, Le = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1719,7 +1841,7 @@ var ne = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ge({
+	createCyclePath = (e, t, n) => new P({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1728,7 +1850,7 @@ var ne = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new xe({
+	createDetourPath = (e, t, n, r) => new Te({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1740,7 +1862,7 @@ var ne = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new he({
+	createLinePath = (e, t, n, r) => new ye({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1752,12 +1874,12 @@ var ne = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? N.arrowLength, this.arrowOffset = e?.arrowOffset ?? N.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? N.cycleSquareSide;
-		let t = e?.roundness ?? N.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? N.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? N.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? N.hasTargetArrow, this.pathShape = new P({
-			color: e?.color ?? N.color,
-			width: e?.width ?? N.width,
-			arrowRenderer: F(e?.arrowRenderer ?? {}),
+		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 ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1765,7 +1887,7 @@ var ne = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1773,18 +1895,100 @@ var ne = (e, t) => {
 			category: r,
 			from: {
 				...t,
-				direction: je(t.direction)
+				direction: Ie(t.direction)
 			},
 			to: {
 				...n,
-				direction: je(n.direction)
+				direction: Ie(n.direction)
 			}
 		});
 	}
-}, Ne = (e) => {
+}, Re = (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;
+}, ze = class {
+	element;
+	svg;
+	group;
+	line;
+	sourceArrow;
+	targetArrow;
+	onAfterRender;
+	arrowLength;
+	arrowOffset;
+	roundness;
+	cycleSquareSide;
+	detourDistance;
+	hasSourceArrow;
+	hasTargetArrow;
+	pathShape;
+	createCyclePath = (e, t, n) => new P({
+		origin: e,
+		dir: n,
+		arrowLength: this.arrowLength,
+		side: this.cycleSquareSide,
+		arrowOffset: this.arrowOffset,
+		roundness: this.roundness,
+		hasArrow: this.hasSourceArrow || this.hasTargetArrow
+	});
+	createDetourPath = (e, t, n, r) => new Ee({
+		from: e,
+		to: t,
+		fromDir: n,
+		toDir: r,
+		arrowLength: this.arrowLength,
+		arrowOffset: this.arrowOffset,
+		roundness: this.roundness,
+		detourDistance: this.detourDistance,
+		hasSourceArrow: this.hasSourceArrow,
+		hasTargetArrow: this.hasTargetArrow
+	});
+	createLinePath = (e, t, n, r) => new be({
+		from: e,
+		to: t,
+		fromDir: n,
+		toDir: r,
+		arrowLength: this.arrowLength,
+		arrowOffset: this.arrowOffset,
+		roundness: this.roundness,
+		hasSourceArrow: this.hasSourceArrow,
+		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 ?? {}),
+			arrowLength: this.arrowLength,
+			hasSourceArrow: this.hasSourceArrow,
+			hasTargetArrow: this.hasTargetArrow,
+			createCyclePath: this.createCyclePath,
+			createDetourPath: this.createDetourPath,
+			createLinePath: this.createLinePath,
+			padding: 50
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+	}
+	render(e) {
+		let { from: t, to: n, category: r } = e;
+		this.pathShape.render({
+			category: r,
+			from: {
+				...t,
+				direction: Re(t.direction)
+			},
+			to: {
+				...n,
+				direction: Re(n.direction)
+			}
+		});
+	}
+}, Be = (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 = N.portOffset, I = class {
+}, Ve = (e) => typeof e == "number" ? () => e : e === "box" ? Be : e, He = F.portOffset, R = class {
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1799,11 +2003,11 @@ var ne = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? N.color, this.width = e?.width ?? N.width, this.arrowLength = e?.arrowLength ?? N.arrowLength, this.arrowRenderer = F(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Pe(e?.sourceOffset ?? Fe), this.targetOffsetFn = Pe(e?.targetOffset ?? Fe), this.svg = se(this.color), this.svg.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 ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Ve(e?.sourceOffset ?? He), this.targetOffsetFn = Ve(e?.targetOffset ?? He), this.element = ce(this.color), this.svg = this.element, 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.svg, {
+		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,
@@ -1901,43 +2105,44 @@ var ne = (e, t) => {
 			targetArrowPath: n
 		});
 	}
-}, Ie = () => {
+}, Ue = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	return e.style.pointerEvents = "auto", e.style.cursor = "pointer", e;
-}, Le = (e) => {
+}, We = (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) => {
+}, Ge = (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 {
+}, Ke = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InteractiveEdgeError";
 	}
-}, Be = class e {
+}, qe = class e {
 	baseEdge;
+	element;
 	svg;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	handle = Ie();
+	handle = Ue();
 	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");
-		this.svg = this.baseEdge.svg, 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 ?? N.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) => {
+		if (this.baseEdge = t, t instanceof e) throw new Ke("interactive edge can be configured only once");
+		this.element = this.baseEdge.element, this.svg = this.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 = We(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Ge(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Ge(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 {
+}, Je = class {
 	baseShape;
 	midpointElement;
 	group;
@@ -1945,9 +2150,10 @@ var ne = (e, t) => {
 	sourceArrow;
 	targetArrow;
 	onAfterRender;
+	element;
 	svg;
 	constructor(e, t) {
-		this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
+		this.baseShape = e, this.midpointElement = t, this.element = this.baseShape.element, this.svg = this.element, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.element.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
 			let t = e.edgePath.midpoint, n = `translate(${t.x}px, ${t.y}px)`;
 			this.midpointElement.style.setProperty("transform", n);
 		});
@@ -1955,7 +2161,7 @@ var ne = (e, t) => {
 	render(e) {
 		this.baseShape.render(e);
 	}
-}, He = class {
+}, Ye = class {
 	graphStore;
 	onAfterNodeAdded;
 	onAfterNodeUpdated;
@@ -2054,7 +2260,7 @@ var ne = (e, t) => {
 	getNodeAdjacentEdgeIds(e) {
 		return this.graphStore.getNodeAdjacentEdgeIds(e);
 	}
-}, L = class {
+}, z = class {
 	checkExists;
 	counter = 0;
 	constructor(e) {
@@ -2068,13 +2274,13 @@ var ne = (e, t) => {
 	reset() {
 		this.counter = 0;
 	}
-}, Ue = class {
+}, Xe = class {
 	graphStore;
 	htmlView;
 	params;
-	nodeIdGenerator = new L((e) => this.graphStore.hasNode(e));
-	portIdGenerator = new L((e) => this.graphStore.hasPort(e));
-	edgeIdGenerator = new L((e) => this.graphStore.hasEdge(e));
+	nodeIdGenerator = new z((e) => this.graphStore.hasNode(e));
+	portIdGenerator = new z((e) => this.graphStore.hasPort(e));
+	edgeIdGenerator = new z((e) => this.graphStore.hasEdge(e));
 	onAfterNodeAdded = (e) => {
 		this.htmlView.attachNode(e);
 	};
@@ -2181,17 +2387,17 @@ 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) => {
+}, Ze = (e) => {
 	setTimeout(() => {
 		e();
 	});
-}, Ge = (e) => {
+}, Qe = (e) => {
 	queueMicrotask(() => {
 		e();
 	});
-}, R = (e) => {
+}, B = (e) => {
 	e();
-}, Ke = class {
+}, $e = class {
 	viewportStore;
 	onBeforeUpdated;
 	onAfterUpdated;
@@ -2214,7 +2420,7 @@ var ne = (e, t) => {
 	createViewportCoords(e) {
 		return this.viewportStore.createViewportCoords(e);
 	}
-}, qe = (e, t) => Symbol.iterator in e ? {
+}, et = (e, t) => Symbol.iterator in e ? {
 	minContentScale: t.focus.minContentScale,
 	nodes: e,
 	contentPadding: t.focus.contentPadding,
@@ -2224,15 +2430,15 @@ var ne = (e, t) => {
 	nodes: e.nodes ?? [],
 	contentPadding: e.contentPadding ?? e.contentOffset ?? t.focus.contentPadding,
 	animationDuration: e.animationDuration ?? t.focus.animationDuration
-}, Je = (e, t, n) => ({
+}, tt = (e, t, n) => ({
 	scale: e.scale,
 	x: e.x + e.scale * t,
 	y: e.y + e.scale * n
-}), Ye = (e, t, n, r) => ({
+}), nt = (e, t, n, r) => ({
 	scale: e.scale * t,
 	x: e.scale * (1 - t) * n + e.x,
 	y: e.scale * (1 - t) * r + e.y
-}), Xe = class {
+}), rt = class {
 	graphStore;
 	viewportStore;
 	params;
@@ -2250,16 +2456,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 = Je(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
+		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = tt(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
 		if (c !== void 0) {
 			let e = 1 / c;
-			s = Ye(s, e / a.scale, i.x, i.y);
+			s = nt(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 = qe(e ?? {}, this.params);
+		let t = et(e ?? {}, this.params);
 		this.params.focus.schedule(() => {
 			this.navigate(t);
 		});
@@ -2301,25 +2507,25 @@ var ne = (e, t) => {
 		};
 		this.win.requestAnimationFrame(a);
 	}
-}, Ze = (e, t, n) => {
+}, it = (e, t, n) => {
 	let r = new h();
-	return new d(new He(r), new Ke(t), new Ue(r, new a(r, t, e), {
+	return new d(new Ye(r), new $e(t), new Xe(r, new a(r, t, e), {
 		nodes: {
-			centerFn: re,
+			centerFn: ie,
 			priorityFn: () => 0
 		},
 		edges: {
-			shapeFactory: () => new I(),
+			shapeFactory: () => new R(),
 			priorityFn: () => 0
 		},
 		ports: { direction: 0 }
-	}), new Xe(r, t, { focus: {
+	}), new rt(r, t, { focus: {
 		contentPadding: 0,
 		minContentScale: 0,
-		schedule: R,
+		schedule: B,
 		animationDuration: 0
 	} }, n));
-}, z = Symbol(), Qe = class e {
+}, V = Symbol(), at = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -2340,7 +2546,7 @@ var ne = (e, t) => {
 		this.params.onPointerDownVerifier(r, {
 			x: t.clientX,
 			y: t.clientY
-		}) && (this.eventTagger.tag(e, z), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, V), 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)) {
@@ -2365,7 +2571,7 @@ var ne = (e, t) => {
 		this.params.onPointerDownVerifier(i, {
 			x: n.clientX,
 			y: n.clientY
-		}) && (this.eventTagger.tag(e, z), 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, 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 }));
 	};
 	onWindowTouchMove = (e) => {
 		let t = e.touches[0];
@@ -2413,16 +2619,16 @@ var ne = (e, t) => {
 	removeWindowTouchListeners() {
 		this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
 	}
-}, B = Symbol(), $e = class {
+}, H = Symbol(), ot = class {
 	has(e, t) {
-		let n = e[B];
+		let n = e[H];
 		return n !== void 0 && n.has(t);
 	}
 	tag(e, t) {
-		let n = e, r = n[B];
-		r === void 0 ? n[B] = /* @__PURE__ */ new Set([t]) : r.add(t);
+		let n = e, r = n[H];
+		r === void 0 ? n[H] = /* @__PURE__ */ new Set([t]) : r.add(t);
 	}
-}, V = Symbol(), H = class {
+}, U = Symbol(), W = class {
 	window;
 	pointInsideVerifier;
 	onSelected;
@@ -2503,10 +2709,10 @@ var ne = (e, t) => {
 		let r = Math.sqrt(e * e + t * t);
 		this.movedDistance += r, this.movedDistance > this.movementThreshold && n();
 	}
-}, U = (e, t) => ({
+}, st = (e, t) => ({
 	from: e.isDirect ? e.staticPortId : t,
 	to: e.isDirect ? t : e.staticPortId
-}), et = class {
+}), ct = class {
 	graph;
 	connectionAllowedVerifier;
 	constructor(e, t) {
@@ -2517,7 +2723,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 = U(e, i);
+			let u = st(e, i);
 			if (!this.connectionAllowedVerifier(u)) return;
 			let { top: d, left: f, width: p, height: m } = a.getBoundingClientRect(), h = {
 				x: f + p / 2,
@@ -2526,7 +2732,7 @@ var ne = (e, t) => {
 			v < n && (n = v, t = o);
 		}), t;
 	}
-}, tt = class {
+}, lt = class {
 	direction;
 	constructor(e) {
 		this.direction = e;
@@ -2534,7 +2740,7 @@ var ne = (e, t) => {
 	resolve() {
 		return this.direction;
 	}
-}, nt = class e {
+}, ut = class e {
 	canvas;
 	element;
 	window;
@@ -2557,12 +2763,12 @@ var ne = (e, t) => {
 		t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
 	};
 	onMouseDown = (e) => {
-		if (this.eventTagger.has(e, z)) return;
+		if (this.eventTagger.has(e, V)) 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, z), this.params.onNodeDragStarted(r);
+		this.eventTagger.tag(e, V), this.params.onNodeDragStarted(r);
 		let a = this.calculateContentPoint({
 			x: t.clientX,
 			y: t.clientY
@@ -2571,10 +2777,10 @@ 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, z)) return;
+		if (this.eventTagger.has(e, V)) 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);
@@ -2584,7 +2790,7 @@ var ne = (e, t) => {
 			x: a.x,
 			y: a.y
 		})) return;
-		this.eventTagger.tag(e, z);
+		this.eventTagger.tag(e, V);
 		let o = this.calculateContentPoint({
 			x: n.clientX,
 			y: n.clientY
@@ -2661,7 +2867,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);
@@ -2698,7 +2904,7 @@ var ne = (e, t) => {
 		let e = this.grabbedNodeState.nodeId;
 		this.graph.hasNode(e) && this.params.onNodeDragFinished(e), this.grabbedNodeState = null;
 	}
-}, W = (e) => {
+}, G = (e) => {
 	let t = [], n = e.touches.length;
 	for (let r = 0; r < n; r++) t.push([e.touches[r].clientX, e.touches[r].clientY]);
 	let r = t.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]), i = [r[0] / n, r[1] / n], a = t.map((e) => [e[0] - i[0], e[1] - i[1]]).reduce((e, t) => e + Math.sqrt(t[0] * t[0] + t[1] * t[1]), 0);
@@ -2709,7 +2915,7 @@ var ne = (e, t) => {
 		touchesCnt: n,
 		touches: t
 	};
-}, rt = class e {
+}, dt = class e {
 	canvas;
 	element;
 	window;
@@ -2724,7 +2930,7 @@ var ne = (e, t) => {
 		this.removeMouseDragListeners(), this.removeTouchDragListeners();
 	};
 	onMouseDown = (e) => {
-		this.eventTagger.has(e, z) || 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, V) || 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);
@@ -2746,16 +2952,16 @@ var ne = (e, t) => {
 		}, this.params.scaleWheelFinishTimeout);
 	};
 	onTouchStart = (e) => {
-		if (!this.eventTagger.has(e, z)) {
+		if (!this.eventTagger.has(e, V)) {
 			if (this.prevTouches !== null) {
-				this.prevTouches = W(e);
+				this.prevTouches = G(e);
 				return;
 			}
-			this.prevTouches = W(e), 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.startRegisteredTransform();
+			this.prevTouches = G(e), 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.startRegisteredTransform();
 		}
 	};
 	onWindowTouchMove = (e) => {
-		let t = W(e);
+		let t = G(e);
 		if (!t.touches.every((e) => this.pointInsideVerifier.verify(e[0], e[1]))) {
 			this.stopTouchDrag();
 			return;
@@ -2771,7 +2977,7 @@ var ne = (e, t) => {
 		this.prevTouches = t;
 	};
 	onWindowTouchFinish = (e) => {
-		e.touches.length > 0 ? this.prevTouches = W(e) : this.stopTouchDrag();
+		e.touches.length > 0 ? this.prevTouches = G(e) : this.stopTouchDrag();
 	};
 	preventWheelScaleListener = (e) => {
 		e.preventDefault();
@@ -2785,7 +2991,7 @@ var ne = (e, t) => {
 		new e(t, n, r, i, a, o);
 	}
 	moveViewport(e, t) {
-		let n = this.viewport.getViewportMatrix(), r = Je(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+		let n = this.viewport.getViewportMatrix(), r = tt(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
 			prevTransform: n,
 			nextTransform: r,
 			canvasWidth: i,
@@ -2794,7 +3000,7 @@ var ne = (e, t) => {
 		this.performTransform(o);
 	}
 	scaleViewport(e, t, n) {
-		let r = this.canvas.viewport.getViewportMatrix(), i = Ye(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+		let r = this.canvas.viewport.getViewportMatrix(), i = nt(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
 			prevTransform: r,
 			nextTransform: i,
 			canvasWidth: a,
@@ -2803,7 +3009,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);
@@ -2832,7 +3038,7 @@ var ne = (e, t) => {
 		});
 		this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(r), this.params.onResizeTransformFinished();
 	}
-}, it = class e {
+}, ft = class e {
 	canvas;
 	element;
 	window;
@@ -2885,7 +3091,7 @@ var ne = (e, t) => {
 				this.scheduleLoadAreaAroundViewport(), r.onTransformFinished();
 			}
 		};
-		rt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+		dt.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);
@@ -2910,21 +3116,21 @@ var ne = (e, t) => {
 			height: u
 		});
 	}
-}, at = () => {
+}, pt = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, ot = () => {
+}, mt = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	return e.setAttribute("fill", "url(#pattern)"), e;
-}, st = () => {
+}, ht = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
 	return e.setAttribute("id", "pattern"), e;
-}, ct = class e {
+}, gt = class e {
 	canvas;
 	backgroundHost;
-	svg = at();
-	patternRenderingRectangle = ot();
-	pattern = st();
+	svg = pt();
+	patternRenderingRectangle = mt();
+	pattern = ht();
 	patternContent;
 	tileWidth;
 	tileHeight;
@@ -2959,7 +3165,7 @@ var ne = (e, t) => {
 			this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${r}`);
 		}
 	}
-}, lt = class e {
+}, _t = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -2973,7 +3179,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 = Ze(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 = it(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -2992,7 +3198,7 @@ var ne = (e, t) => {
 				this.resetDragState(), this.params.onEdgeCreationInterrupted(e);
 			}
 		};
-		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		at.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);
@@ -3005,7 +3211,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";
@@ -3017,26 +3223,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);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = U(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
+		let n = st(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
 			from: n.from,
 			to: n.to
 		});
@@ -3050,12 +3256,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 });
 	}
-}, ut = class e {
+}, vt = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3070,7 +3276,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 = Ze(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 = it(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3092,7 +3298,7 @@ var ne = (e, t) => {
 				});
 			}
 		};
-		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		at.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);
@@ -3123,21 +3329,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
@@ -3154,14 +3360,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);
+		if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
 				id: e.id,
@@ -3172,7 +3378,7 @@ var ne = (e, t) => {
 			});
 			return;
 		}
-		let { from: n, to: r } = U(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
+		let { from: n, to: r } = st(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
 			id: i.id,
 			from: n,
 			to: r,
@@ -3194,7 +3400,7 @@ var ne = (e, t) => {
 			});
 		}
 	}
-}, dt = class e {
+}, yt = class e {
 	applier;
 	trigger;
 	constructor(e, t) {
@@ -3205,7 +3411,7 @@ var ne = (e, t) => {
 	static configure(t, n) {
 		new e(t, n);
 	}
-}, ft = class e {
+}, bt = class e {
 	graph;
 	applier;
 	defererFn;
@@ -3230,7 +3436,7 @@ var ne = (e, t) => {
 	scheduleApply() {
 		this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
 	}
-}, pt = class {
+}, xt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3246,23 +3452,23 @@ var ne = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, mt = class {
+}, St = class {
 	static configure(e, t) {
-		let n = t.applyOn, r = new pt(e, t.algorithm, {
+		let n = t.applyOn, r = new xt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
 		});
 		switch (n.type) {
 			case "trigger":
-				dt.configure(r, n.trigger);
+				yt.configure(r, n.trigger);
 				break;
 			case "topologyChangeSchedule":
-				ft.configure(e.graph, r, n.schedule);
+				bt.configure(e.graph, r, n.schedule);
 				break;
 		}
 	}
-}, ht = class {
+}, Ct = class {
 	win;
 	callback;
 	previousTimeStamp = void 0;
@@ -3277,7 +3483,7 @@ var ne = (e, t) => {
 	constructor(e, t) {
 		this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
 	}
-}, gt = class {
+}, wt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3294,30 +3500,30 @@ var ne = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, _t = class e {
+}, Tt = class e {
 	win;
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.win = n, this.applier = new gt(e, t.algorithm, {
+		this.win = n, this.applier = new wt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new ht(this.win, this.step);
+		}), new Ct(this.win, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
 	}
-}, vt = class e {
+}, Et = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
 	onNodeSelected;
-	eventHandledTag = V;
+	eventHandledTag = U;
 	onAfterNodeAdded = (e) => {
 		let { element: t } = this.canvas.graph.getNode(e);
 		this.configurator.enable(t);
@@ -3333,7 +3539,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 H(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findNodeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onNodeSelected(n);
@@ -3346,30 +3552,30 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, yt = class e {
+}, Dt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
-	eventHandledTag = V;
+	eventHandledTag = U;
 	onEdgeSelected;
 	onAfterEdgeAdded = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
-		this.configurator.enable(t.svg);
+		this.configurator.enable(t.element);
 	};
 	onBeforeEdgeRemoved = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
-		this.configurator.disable(t.svg);
+		this.configurator.disable(t.element);
 	};
 	reset = () => {
 		this.canvas.graph.getAllEdgeIds().forEach((e) => {
 			let { shape: t } = this.canvas.graph.getEdge(e);
-			this.configurator.disable(t.svg);
+			this.configurator.disable(t.element);
 		});
 	};
 	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 H(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findEdgeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onEdgeSelected(n);
@@ -3382,7 +3588,7 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, bt = class e {
+}, Ot = class e {
 	canvas;
 	element;
 	window;
@@ -3390,9 +3596,9 @@ var ne = (e, t) => {
 	eventTagger;
 	configurator;
 	onCanvasSelected;
-	eventHandledTag = V;
+	eventHandledTag = U;
 	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 H(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 W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				this.eventTagger.has(t, this.eventHandledTag) || this.onCanvasSelected();
 			},
@@ -3406,22 +3612,22 @@ var ne = (e, t) => {
 	static configure(t, n, r, i, a, o) {
 		new e(t, n, r, i, a, o);
 	}
-}, xt = () => {
+}, kt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, G = () => {
+}, At = () => {
 	let e = document.createElement("div");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, St = () => {
-	let e = G();
+}, jt = () => {
+	let e = At();
 	return e.style.pointerEvents = "none", e;
-}, Ct = class {
+}, Mt = class {
 	element;
-	background = G();
-	main = G();
-	overlayConnectablePorts = St();
-	overlayDraggableEdges = St();
-	host = xt();
+	background = At();
+	main = At();
+	overlayConnectablePorts = jt();
+	overlayDraggableEdges = jt();
+	host = kt();
 	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);
 	}
@@ -3446,10 +3652,10 @@ var ne = (e, t) => {
 	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0,
 	movementThreshold: 10
-}), J = () => {}, wt = (e, t, n) => e === "closest-connectable-port" || e === "nearest-connectable-port" ? new et(t, n) : new tt(e), Y = (e) => {
+}), J = () => {}, Nt = (e, t, n) => e === "closest-connectable-port" || e === "nearest-connectable-port" ? new ct(t, n) : new lt(e), Y = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "straight": return () => new ke({
+		case "straight": return () => new Pe({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3462,7 +3668,7 @@ var ne = (e, t) => {
 			detourDistance: e.detourDistance,
 			detourDirection: e.detourDirection
 		});
-		case "horizontal": return () => new Oe({
+		case "horizontal": return () => new Ne({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3474,7 +3680,7 @@ var ne = (e, t) => {
 			roundness: e.roundness,
 			detourDistance: e.detourDistance
 		});
-		case "vertical": return () => new Me({
+		case "vertical": return () => new Le({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3486,7 +3692,19 @@ var ne = (e, t) => {
 			roundness: e.roundness,
 			detourDistance: e.detourDistance
 		});
-		case "direct": return () => new I({
+		case "orthogonal": return () => new ze({
+			color: e.color,
+			width: e.width,
+			arrowLength: e.arrowLength,
+			arrowOffset: e.arrowOffset,
+			arrowRenderer: e.arrowRenderer,
+			hasSourceArrow: e.hasSourceArrow,
+			hasTargetArrow: e.hasTargetArrow,
+			cycleSquareSide: e.cycleSquareSide,
+			roundness: e.roundness,
+			detourDistance: e.detourDistance
+		});
+		case "direct": return () => new R({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3496,7 +3714,7 @@ var ne = (e, t) => {
 			sourceOffset: e.sourceOffset,
 			targetOffset: e.targetOffset
 		});
-		default: return () => new Ee({
+		default: return () => new je({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3510,7 +3728,7 @@ var ne = (e, t) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Tt = (e) => {
+}, Pt = (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,
@@ -3524,7 +3742,7 @@ var ne = (e, t) => {
 		nodeDragVerifier: t,
 		onNodeDragFinished: e.events?.onNodeDragFinished ?? J
 	};
-}, Et = (e) => {
+}, Ft = (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;
@@ -3538,17 +3756,17 @@ var ne = (e, t) => {
 			y: o
 		};
 	};
-}, Dt = (e) => {
+}, It = (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;
 		if (n.scale > i && n.scale > t.scale) {
-			a = Math.max(t.scale, i), o = t.x, s = t.y;
+			a = Math.max(t.scale, i);
 			let e = (a - t.scale) / (n.scale - t.scale);
 			o = t.x + (n.x - t.x) * e, s = t.y + (n.y - t.y) * e;
 		}
 		if (n.scale < r && n.scale < t.scale) {
-			a = Math.min(t.scale, r), o = t.x, s = t.y;
+			a = Math.min(t.scale, r);
 			let e = (a - t.scale) / (n.scale - t.scale);
 			o = t.x + (n.x - t.x) * e, s = t.y + (n.y - t.y) * e;
 		}
@@ -3558,28 +3776,28 @@ var ne = (e, t) => {
 			y: s
 		};
 	};
-}, Ot = (e) => (t) => e.reduce((e, n) => n({
+}, Lt = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
 	canvasWidth: t.canvasWidth,
 	canvasHeight: t.canvasHeight
-}), t.nextTransform), kt = (e) => {
+}), t.nextTransform), Rt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return Dt({
+		case "scale-limit": return It({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Et({
+		case "shift-limit": return Ft({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, At = (e) => {
+}, zt = (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) ? Lt(r.map((e) => Rt(e))) : Rt(r);
 	let a = e?.shift?.cursor === void 0 ? "grab" : e.shift.cursor, o = e?.shift?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.shift?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
 	return {
 		wheelSensitivity: n,
@@ -3596,15 +3814,15 @@ var ne = (e, t) => {
 		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? J,
 		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? J
 	};
-}, jt = (e, t) => {
+}, Bt = (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) => {
+}, Vt = (e) => e instanceof SVGElement ? e : Bt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ht = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Mt(e.renderer ?? {}),
+		renderer: Vt(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
 }, X = Object.freeze({
@@ -3612,12 +3830,12 @@ var ne = (e, t) => {
 	connectionPreprocessor: (e) => e,
 	connectionAllowedVerifier: () => !0,
 	mouseEventVerifier: (e) => e.button === 0
-}), Pt = (e, t, n) => {
+}), Ut = (e, t, n) => {
 	let r = e.connectionAllowedVerifier ?? X.connectionAllowedVerifier;
 	return {
 		connectionTypeResolver: e.connectionTypeResolver ?? X.connectionTypeResolver,
 		connectionAllowedVerifier: r,
-		draggingPortDirectionResolver: wt(e.dragPortDirection, n, r),
+		draggingPortDirectionResolver: Nt(e.dragPortDirection, n, r),
 		edgeShapeFactory: e.edgeShape === void 0 ? t : Y(e.edgeShape),
 		connectionPreprocessor: e.connectionPreprocessor ?? X.connectionPreprocessor,
 		mouseDownEventVerifier: e.mouseDownEventVerifier ?? X.mouseEventVerifier,
@@ -3631,7 +3849,7 @@ var ne = (e, t) => {
 	connectionPreprocessor: (e) => e,
 	mouseDownEventVerifier: (e) => e.button === 0 && e.ctrlKey,
 	mouseUpEventVerifier: (e) => e.button === 0
-}), Ft = (e, t) => {
+}), Wt = (e, t) => {
 	let n = (e) => {
 		let n = t.getPortAdjacentEdgeIds(e);
 		return n.length > 0 ? n[n.length - 1] : null;
@@ -3646,17 +3864,17 @@ var ne = (e, t) => {
 		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? J,
 		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? J,
 		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? J,
-		draggingPortDirectionResolver: wt(e.dragPortDirection, t, r)
+		draggingPortDirectionResolver: Nt(e.dragPortDirection, t, r)
 	};
-}, It = (e) => ({
+}, Gt = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), Lt = (e) => ({
+}), Kt = (e) => ({
 	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? J,
 	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? J
-}), Rt = class extends Error {
+}), qt = class extends Error {
 	name = "CanvasBuilderError";
-}, zt = class {
+}, Jt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3691,7 +3909,7 @@ var ne = (e, t) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Bt = class {
+}, Yt = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3714,11 +3932,11 @@ var ne = (e, t) => {
 			d: a
 		};
 	}
-}, Vt = (e) => {
+}, Xt = (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 {
+}, Zt = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3730,7 +3948,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 = Xt({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3741,7 +3959,7 @@ var ne = (e, t) => {
 			}
 		}
 	}
-}, Ut = (e) => {
+}, Qt = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3757,7 +3975,7 @@ var ne = (e, t) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, Wt = class {
+}, $t = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -3913,7 +4131,7 @@ var ne = (e, t) => {
 			y: n / e.size
 		};
 	}
-}, Gt = class {
+}, en = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -3925,8 +4143,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 $t({
+			box: Qt(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4036,7 +4254,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 = Xt({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4063,12 +4281,12 @@ var ne = (e, t) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, Kt = (e) => e.theta === 0 ? new Ht({
+}, tn = (e) => e.theta === 0 ? new Zt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new Gt({
+}) : new en({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4076,7 +4294,7 @@ var ne = (e, t) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), qt = class {
+}), nn = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4101,7 +4319,7 @@ var ne = (e, t) => {
 			});
 		}), r;
 	}
-}, Jt = class {
+}, rn = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4112,7 +4330,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.convergenceVelocity, 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.convergenceVelocity, this.distanceVectorGenerator = new Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4120,7 +4338,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new nn({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4130,7 +4348,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 Jt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
@@ -4140,7 +4358,7 @@ var ne = (e, t) => {
 		}).apply() < this.convergenceVelocity); e++);
 		return r;
 	}
-}, Yt = class {
+}, an = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4184,7 +4402,7 @@ var ne = (e, t) => {
 			}), r = e;
 		}
 	}
-}, Xt = class {
+}, on = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4223,13 +4441,13 @@ var ne = (e, t) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, Zt = class {
+}, sn = 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 on({ 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) => {
@@ -4245,19 +4463,19 @@ var ne = (e, t) => {
 	generate() {
 		return this.offsets;
 	}
-}, Qt = class {
+}, cn = 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 an(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 sn(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4274,7 +4492,7 @@ var ne = (e, t) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, $t = (e) => {
+}, ln = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4283,19 +4501,19 @@ var ne = (e, t) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, en = (e) => {
+}, un = (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) => {
+}, dn = (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 {
+}, fn = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	convergenceVelocity;
@@ -4305,7 +4523,7 @@ var ne = (e, t) => {
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(e) {
-		this.convergenceVelocity = e.convergenceVelocity, 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.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4313,7 +4531,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new nn({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4323,7 +4541,7 @@ var ne = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		return new zt(t, i, {
+		return new Jt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
@@ -4335,7 +4553,7 @@ var ne = (e, t) => {
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, rn = (e) => {
+}, pn = (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, [
@@ -4344,17 +4562,17 @@ var ne = (e, t) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, an = (e, t, n, r) => function() {
+}, mn = (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) => {
+}, hn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			let t = rn(e?.seed ?? K.seed);
-			return new nn({
-				rand: an(t[0], t[1], t[2], t[3]),
+			let t = pn(e?.seed ?? K.seed);
+			return new fn({
+				rand: mn(t[0], t[1], t[2], t[3]),
 				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? K.maxTimeDeltaSec,
 				nodeCharge: e?.nodeCharge ?? K.nodeCharge,
 				nodeMass: e?.nodeMass ?? K.nodeMass,
@@ -4368,37 +4586,37 @@ var ne = (e, t) => {
 			});
 		}
 	}
-}, sn = { staticNodeResolver: () => !1 }, cn = (e) => ({
-	algorithm: on(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? sn.staticNodeResolver,
+}, gn = { staticNodeResolver: () => !1 }, _n = (e) => ({
+	algorithm: hn(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? gn.staticNodeResolver,
 	onBeforeApplied: e?.events?.onBeforeApplied ?? J,
 	onAfterApplied: e?.events?.onAfterApplied ?? J
-}), ln = (e) => e instanceof l ? {
+}), vn = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
 } : e === "topologyChangeMicrotask" ? {
 	type: "topologyChangeSchedule",
-	schedule: Ge
+	schedule: Qe
 } : e?.type === "topologyChangeMacrotask" ? {
 	type: "topologyChangeSchedule",
-	schedule: We
+	schedule: Ze
 } : {
 	type: "topologyChangeSchedule",
-	schedule: Ge
-}, Q = Object.freeze({
+	schedule: Qe
+}, yn = 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
-}), un = (e) => {
+}), bn = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4408,7 +4626,7 @@ var ne = (e, t) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, dn = class {
+}, xn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4450,11 +4668,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), un(t));
+		return Q(Q(t, e), bn(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4497,7 +4715,7 @@ var ne = (e, t) => {
 			f: 0
 		};
 	}
-}, fn = (e) => {
+}, Sn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4507,10 +4725,10 @@ var ne = (e, t) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new dn();
+	}, r = new xn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
-		n = $(n, t);
+		n = Q(n, t);
 	}), (e) => {
 		let { x: t, y: r } = e;
 		return {
@@ -4518,25 +4736,25 @@ var ne = (e, t) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, pn = (e) => {
+}, Cn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return en;
-		case "incoming": return tn;
-		default: return $t;
+		case "outgoing": return un;
+		case "incoming": return dn;
+		default: return ln;
 	}
-}, mn = (e) => {
+}, wn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		case "hierarchical": return new Qt({
-			layerWidth: e.layerWidth ?? Q.hierarchicalLayout.layerWidth,
-			layerSpace: e.layerSpace ?? Q.hierarchicalLayout.layerSpace,
-			transform: fn(e.transform),
-			nextLayerNodesResolver: pn(e.nextLayerNodesResolver)
+		case "hierarchical": return new cn({
+			layerWidth: e.layerWidth ?? yn.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? yn.hierarchicalLayout.layerSpace,
+			transform: Sn(e.transform),
+			nextLayerNodesResolver: Cn(e.nextLayerNodesResolver)
 		});
 		default: {
-			let t = rn(e?.seed ?? K.seed), n = an(t[0], t[1], t[2], t[3]);
-			return new Jt({
+			let t = pn(e?.seed ?? K.seed), n = mn(t[0], t[1], t[2], t[3]);
+			return new rn({
 				dtSec: e?.dtSec ?? K.dtSec,
 				maxIterations: e?.maxIterations ?? K.maxIterations,
 				rand: n,
@@ -4552,13 +4770,13 @@ var ne = (e, t) => {
 			});
 		}
 	}
-}, hn = (e) => ({
-	algorithm: mn(e.algorithm),
-	applyOn: ln(e.applyOn),
-	staticNodeResolver: e.staticNodeResolver ?? Q.staticNodeResolver,
+}, Tn = (e) => ({
+	algorithm: wn(e.algorithm),
+	applyOn: vn(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? yn.staticNodeResolver,
 	onBeforeApplied: e.events?.onBeforeApplied ?? J,
 	onAfterApplied: e.events?.onAfterApplied ?? J
-}), gn = (e, t) => ({
+}), En = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4566,7 +4784,7 @@ var ne = (e, t) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), _n = (e, t) => {
+}), Dn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4574,23 +4792,23 @@ var ne = (e, t) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, vn = (e, t) => ({
+}, On = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), yn = (e) => () => e, bn = yn(0), xn = () => {
+}), $ = (e) => () => e, kn = $(0), An = () => {
 	let e = 0;
 	return () => e++;
-}, Sn = (e, t) => {
-	let n = bn, r = bn, i = xn();
-	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = yn(e)), typeof t == "number" && (r = yn(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
+}, jn = (e, t) => {
+	let n = kn, r = kn, i = An();
+	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
 	};
-}, Cn = (e) => {
-	let t = Sn(e.nodes?.priority, e.edges?.priority);
+}, Mn = (e) => {
+	let t = jn(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 },
@@ -4599,30 +4817,30 @@ var ne = (e, t) => {
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, wn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : R, Tn = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? wn(e.layoutParams) : R;
+}, Nn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, Pn = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? Nn(e.layoutParams) : B;
 	return { focus: {
 		contentPadding: t.focus?.contentPadding ?? t.focus?.contentOffset ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, En = (e) => ({
+}, Fn = (e) => ({
 	onNodeSelected: e.onNodeSelected,
 	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
 	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
 	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), Dn = (e) => ({
+}), In = (e) => ({
 	onCanvasSelected: e.onCanvasSelected,
 	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
 	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
 	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), On = (e) => ({
+}), Ln = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
 	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
 	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
 	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), kn = class {
+}), Rn = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4649,9 +4867,9 @@ var ne = (e, t) => {
 	window = window;
 	animationStaticNodes = /* @__PURE__ */ new Set();
 	pointInsideVerifier;
-	eventTagger = new $e();
+	eventTagger = new ot();
 	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;
@@ -4693,40 +4911,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 qt("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 Ct(this.element), r = this.createHtmlView(n.main, t, e), i = Cn(this.canvasDefaults), a = new Ue(t, r, i), o = hn(this.layoutConfig), s = new Xe(t, e, Tn({
+		let e = new y(this.element), t = new h(), n = new Mt(this.element), r = this.createHtmlView(n.main, t, e), i = Mn(this.canvasDefaults), a = new Xe(t, r, i), o = Tn(this.layoutConfig), s = new rt(t, e, Pn({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
-		}), this.window), c = new Ke(e), l = new d(new He(t), c, a, s);
-		if (this.hasBackground && ct.configure(l, Nt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
-			let e = On(this.userSelectableEdgesConfig);
-			yt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+		}), this.window), c = new $e(e), l = new d(new Ye(t), c, a, s);
+		if (this.hasBackground && gt.configure(l, Ht(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = Ln(this.userSelectableEdgesConfig);
+			Dt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = En(this.userSelectableNodesConfig);
-			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Fn(this.userSelectableNodesConfig);
+			Et.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = Dn(this.userSelectableCanvasConfig);
-			bt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = In(this.userSelectableCanvasConfig);
+			Ot.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Tt(this.dragConfig);
-			this.hasAnimatedLayout && (e = gn(e, this.animationStaticNodes)), nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Pt(this.dragConfig);
+			this.hasAnimatedLayout && (e = En(e, this.animationStaticNodes)), ut.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = Pt(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
-			lt.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Ut(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
+			_t.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
 		if (this.hasUserDraggableEdges) {
-			let t = Ft(this.draggableEdgesConfig, l.graph);
-			ut.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Wt(this.draggableEdgesConfig, l.graph);
+			vt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && rt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, At(this.transformConfig)) : it.configure(l, n.main, this.window, At(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, It(this.virtualScrollConfig)), this.hasLayout && mt.configure(l, o), this.hasAnimatedLayout) {
-			let e = cn(this.animatedLayoutConfig);
-			this.hasDraggableNodes && (_n(l, this.animationStaticNodes), e = vn(e, this.animationStaticNodes)), _t.configure(l, e, this.window);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && dt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, zt(this.transformConfig)) : ft.configure(l, n.main, this.window, zt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Gt(this.virtualScrollConfig)), this.hasLayout && St.configure(l, o), this.hasAnimatedLayout) {
+			let e = _n(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (Dn(l, this.animationStaticNodes), e = On(e, this.animationStaticNodes)), Tt.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4734,8 +4952,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, Kt(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-export { Ee as BezierEdgeShape, kn as CanvasBuilder, Rt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, I as DirectEdgeShape, l as EventSubject, Oe as HorizontalEdgeShape, ze as InteractiveEdgeError, Be as InteractiveEdgeShape, Ve as MidpointEdgeShape, ke as StraightEdgeShape, Me as VerticalEdgeShape, Ne as boxPortOffsetFn };
+export { je as BezierEdgeShape, Rn as CanvasBuilder, qt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, Ne as HorizontalEdgeShape, Ke as InteractiveEdgeError, qe as InteractiveEdgeShape, Je as MidpointEdgeShape, ze as OrthogonalEdgeShape, Pe as StraightEdgeShape, Le as VerticalEdgeShape, Be as boxPortOffsetFn };