@html-graph/html-graph 8.23.0 → 9.0.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 { element: n } = this.graphStore.getEdge(e).payload.shape;
 		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, ee = class {
+}, S = (e, t, n) => t >= 0 && t <= e.innerWidth && n >= 0 && n <= e.innerHeight, C = 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);
 	}
-}, C = (e, t) => {
+}, w = (e, t) => {
 	t === null ? e.style.removeProperty("cursor") : e.style.cursor = t;
-}, w = (e) => {
+}, T = (e) => {
 	let t = document.createElement("div");
 	return {
 		id: e.overlayNodeId,
@@ -750,7 +750,7 @@ var e = /* @__PURE__ */ function(e) {
 			direction: e.portDirection
 		}]
 	};
-}, te = (e, t) => {
+}, ee = (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* ne(e, t) {
+function* te(e, t) {
 	let n = e.elementsFromPoint(t.x, t.y);
 	for (let e of n) {
 		if (e.shadowRoot !== null) {
-			let n = ne(e.shadowRoot, t);
+			let n = te(e.shadowRoot, t);
 			for (let e of n) yield e;
 		}
 		yield e;
@@ -777,23 +777,23 @@ function* ne(e, t) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var re = (e, t) => {
-	let n = ne(document, t);
+var ne = (e, t) => {
+	let n = te(document, t);
 	for (let t of n) {
-		let n = te(e, t);
+		let n = ee(e, t);
 		if (n.status === "portFound") return n.portId;
 		if (n.status === "nodeEncountered") return null;
 	}
 	return null;
-}, T = /* @__PURE__ */ function(e) {
+}, E = /* @__PURE__ */ function(e) {
 	return e.StaticNodeId = "static", e.DraggingNodeId = "dragging", e.EdgeId = "edge", e;
-}({}), ie = (e, t) => ({
+}({}), re = (e, t) => ({
 	x: e / 2,
 	y: t / 2
-}), E = (e, t, n) => ({
+}), D = (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)
-}), ae = (e, t, n) => {
+}), ie = (e, t, n) => {
 	let r = {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
@@ -815,14 +815,14 @@ var re = (e, t) => {
 			y: i.y - o
 		}
 	};
-}, D = .5 * .5 * .5, O = 3 * D, oe = class {
+}, O = .5 * .5 * .5, k = 3 * O, ae = class {
 	path;
 	midpoint;
 	constructor(e) {
-		let { from: t, to: n, arrowLength: r, fromDir: i, toDir: a, curvature: o, hasSourceArrow: s, hasTargetArrow: c } = e, l = E({
+		let { from: t, to: n, arrowLength: r, fromDir: i, toDir: a, curvature: o, hasSourceArrow: s, hasTargetArrow: c } = e, l = D({
 			x: t.x + r,
 			y: t.y
-		}, i, t), u = E({
+		}, i, t), u = D({
 			x: n.x - r,
 			y: n.y
 		}, a, n), d = {
@@ -831,7 +831,7 @@ var re = (e, t) => {
 		}, f = {
 			x: u.x - a.x * o,
 			y: u.y - a.y * o
-		}, 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;
+		}, 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;
 		this.midpoint = {
 			x: p,
 			y: m
@@ -839,23 +839,23 @@ var re = (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}${_}`;
 	}
-}, se = class {
+}, oe = 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 ? 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({
 			x: s.x + l,
 			y: s.y
-		}, i, s) : s, f = n ? E({
+		}, i, s) : s, f = n ? D({
 			x: c.x - l,
 			y: c.y
-		}, a, c) : c, p = Math.cos(o) * u, m = Math.sin(o) * u, h = E({
+		}, a, c) : c, p = Math.cos(o) * u, m = Math.sin(o) * u, h = D({
 			x: s.x + l,
 			y: s.y
 		}, i, s), g = {
 			x: h.x + p,
 			y: h.y + m
-		}, _ = E({
+		}, _ = D({
 			x: c.x - l,
 			y: c.y
 		}, a, c), v = {
@@ -873,7 +873,7 @@ var re = (e, t) => {
 		}, S = {
 			x: h.x + p,
 			y: h.y + m
-		}, ee = {
+		}, C = {
 			x: _.x + p,
 			y: _.y + m
 		};
@@ -881,22 +881,22 @@ var re = (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 ${ee.x} ${ee.y} ${x.x} ${x.y} ${_.x} ${_.y}`,
+			`C ${C.x} ${C.y} ${x.x} ${x.y} ${_.x} ${_.y}`,
 			`L ${f.x} ${f.y}`
 		].join(" "), this.midpoint = y;
 	}
-}, k = Object.freeze({ edgeColor: "--edge-color" }), ce = (e) => {
+}, A = Object.freeze({ edgeColor: "--edge-color" }), se = (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(k.edgeColor, e), t;
-}, le = (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(A.edgeColor, e), t;
+}, ce = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	return t.setAttribute("stroke", `var(${k.edgeColor})`), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t;
-}, A = () => {
+	return t.setAttribute("stroke", `var(${A.edgeColor})`), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t;
+}, j = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	return e.setAttribute("fill", `var(${k.edgeColor})`), e;
-}, ue = (e, t) => {
+	return e.setAttribute("fill", `var(${A.edgeColor})`), e;
+}, le = (e, t) => {
 	e.style.transform = `translate(${t.x}px, ${t.y}px)`, e.style.width = `${t.width}px`, e.style.height = `${t.height}px`;
-}, j = (e, t) => {
+}, M = (e, t) => {
 	let n = [];
 	if (e.length > 0 && n.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && n.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
 		let r = e.length - 1, i = 0, a = 0, o = 0;
@@ -917,7 +917,7 @@ var re = (e, t) => {
 		});
 	}
 	return n.join(" ");
-}, de = (e, t) => {
+}, ue = (e, t) => {
 	let n = e.linePoint, r = t.linePoint, i = r.x - n.x >= 0, a = e.dir.x >= 0;
 	if (a === t.dir.x >= 0) {
 		let o = a === i, s = {
@@ -991,24 +991,24 @@ var re = (e, t) => {
 			y: s
 		}
 	};
-}, M = (e) => ({
+}, N = (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)
+}), de = (e, t) => {
+	let n = ue({
+		arrowPoint: N(e.arrowPoint),
+		linePoint: N(e.linePoint),
+		dir: N(e.dir)
 	}, {
-		arrowPoint: M(t.arrowPoint),
-		linePoint: M(t.linePoint),
-		dir: M(t.dir)
+		arrowPoint: N(t.arrowPoint),
+		linePoint: N(t.linePoint),
+		dir: N(t.dir)
 	});
 	return {
-		points: n.points.map((e) => M(e)),
-		midpoint: M(n.midpoint)
+		points: n.points.map((e) => N(e)),
+		midpoint: N(n.midpoint)
 	};
-}, N = (e) => {
+}, P = (e) => {
 	let t = [];
 	for (let n = 1; n < e.length; n++) {
 		let r = e[n - 1], i = e[n], a = i.x - r.x, o = i.y - r.y, s = Math.sqrt(a * a + o * o);
@@ -1034,7 +1034,7 @@ var re = (e, t) => {
 	}
 	if (r === 0 && e.length > 0) return e[0];
 	throw Error("Failed to calculate midpoint");
-}, pe = (e, t) => {
+}, fe = (e, t) => {
 	let n = e.linePoint, r = e.arrowPoint, i = t.linePoint, a = t.arrowPoint, o = t.dir.y >= 0, s = e.dir.x >= 0, c = i.y - n.y >= 0, l = s === i.x - n.x >= 0, u = o === c;
 	if (l) {
 		if (u) {
@@ -1048,7 +1048,7 @@ var re = (e, t) => {
 					e,
 					a
 				],
-				midpoint: N([
+				midpoint: P([
 					n,
 					e,
 					i
@@ -1070,7 +1070,7 @@ var re = (e, t) => {
 				i,
 				a
 			],
-			midpoint: N([
+			midpoint: P([
 				n,
 				t,
 				o,
@@ -1094,7 +1094,7 @@ var re = (e, t) => {
 				o,
 				a
 			],
-			midpoint: N([
+			midpoint: P([
 				n,
 				t,
 				o,
@@ -1114,73 +1114,46 @@ var re = (e, t) => {
 			i,
 			a
 		],
-		midpoint: N([
+		midpoint: P([
 			n,
 			d,
 			i
 		])
 	};
-}, me = (e, t) => {
-	let n = pe({
-		arrowPoint: M(e.arrowPoint),
-		linePoint: M(e.linePoint),
-		dir: M(e.dir)
+}, pe = (e, t) => {
+	let n = fe({
+		arrowPoint: N(e.arrowPoint),
+		linePoint: N(e.linePoint),
+		dir: N(e.dir)
 	}, {
-		arrowPoint: M(t.arrowPoint),
-		linePoint: M(t.linePoint),
-		dir: M(t.dir)
+		arrowPoint: N(t.arrowPoint),
+		linePoint: N(t.linePoint),
+		dir: N(t.dir)
 	});
 	return {
-		points: n.points.map((e) => M(e)),
-		midpoint: M(n.midpoint)
+		points: n.points.map((e) => N(e)),
+		midpoint: N(n.midpoint)
 	};
-}, he = (e, t) => {
+}, me = (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 {
+	return n ? r ? ue(e, t) : fe(e, t) : r ? pe(e, t) : de(e, t);
+}, he = 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 ? E({
-			x: t.x + a,
-			y: t.y
-		}, r, t) : t, d = l ? E({
-			x: n.x - a,
-			y: n.y
-		}, i, n) : n, f = a + o, p = E({
-			x: t.x + f,
-			y: t.y
-		}, r, t), m = E({
-			x: n.x - f,
-			y: n.y
-		}, i, n), h = de({
-			arrowPoint: u,
-			linePoint: p,
-			dir: r
-		}, {
-			arrowPoint: d,
-			linePoint: m,
-			dir: i
-		});
-		this.path = j(h.points, s), this.midpoint = h.midpoint;
-	}
-}, _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 ? 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({
 			x: r.x + a,
 			y: r.y
-		}, o, r) : r, p = n ? E({
+		}, o, r) : r, p = n ? D({
 			x: i.x - a,
 			y: i.y
-		}, s, i) : i, m = a + c, h = Math.cos(l) * u, g = Math.sin(l) * u, _ = E({
+		}, s, i) : i, m = a + c, h = Math.cos(l) * u, g = Math.sin(l) * u, _ = D({
 			x: r.x + m,
 			y: r.y
 		}, o, r), v = {
 			x: _.x + h,
 			y: _.y + g
-		}, y = E({
+		}, y = D({
 			x: i.x - m,
 			y: i.y
 		}, s, i), b = {
@@ -1190,7 +1163,7 @@ var re = (e, t) => {
 		this.midpoint = {
 			x: (v.x + b.x) / 2,
 			y: (v.y + b.y) / 2
-		}, this.path = j([
+		}, this.path = M([
 			f,
 			_,
 			v,
@@ -1199,18 +1172,18 @@ var re = (e, t) => {
 			p
 		], d);
 	}
-}, ve = class {
+}, ge = 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 = 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({
 			x: t.x + f,
 			y: t.y
-		}, o, t), m = E({
+		}, o, t), m = D({
 			x: n.x - f,
 			y: n.y
 		}, s, n);
-		this.path = j([
+		this.path = M([
 			u,
 			p,
 			m,
@@ -1223,55 +1196,28 @@ var re = (e, t) => {
 		};
 	}
 	createArrowPoint(e, t, n, r) {
-		return e ? E({
+		return e ? D({
 			x: n.x + r,
 			y: n.y
 		}, t, n) : n;
 	}
-}, 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;
-	}
-}, be = class {
+}, _e = 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 ? E({
+		let { from: t, to: n, fromDir: r, toDir: i, arrowLength: a, arrowOffset: o, roundness: s, hasSourceArrow: c, hasTargetArrow: l } = e, u = c ? D({
 			x: t.x + a,
 			y: t.y
-		}, r, t) : t, d = l ? E({
+		}, r, t) : t, d = l ? D({
 			x: n.x - a,
 			y: n.y
-		}, i, n) : n, f = a + o, p = E({
+		}, i, n) : n, f = a + o, p = D({
 			x: t.x + f,
 			y: t.y
-		}, r, t), m = E({
+		}, r, t), m = D({
 			x: n.x - f,
 			y: n.y
-		}, i, n), h = he({
+		}, i, n), h = me({
 			arrowPoint: u,
 			linePoint: p,
 			dir: r
@@ -1280,9 +1226,9 @@ var re = (e, t) => {
 			linePoint: m,
 			dir: i
 		});
-		this.path = j(h.points, s), this.midpoint = h.midpoint;
+		this.path = M(h.points, s), this.midpoint = h.midpoint;
 	}
-}, P = class {
+}, ve = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1319,19 +1265,19 @@ var re = (e, t) => {
 				x: n,
 				y: 0
 			}
-		].map((e) => E(e, i, {
+		].map((e) => D(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}${j(l, e.roundness)}`, this.midpoint = {
+		this.path = `${o ? "" : u}${M(l, e.roundness)}`, this.midpoint = {
 			x: (l[3].x + l[4].x) / 2,
 			y: (l[3].y + l[4].y) / 2
 		};
 	}
-}, xe = class {
+}, ye = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1352,7 +1298,7 @@ var re = (e, t) => {
 				x: d,
 				y: 0
 			}
-		].map((e) => E(e, i, {
+		].map((e) => D(e, i, {
 			x: 0,
 			y: 0
 		})).map((e) => ({
@@ -1366,30 +1312,30 @@ var re = (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];
 	}
-}, Se = (e, t, n) => {
+}, be = (e, t, n) => {
 	let r = Math.max(e.y, t.y), i = Math.min(e.y, t.y);
 	return (n >= 0 ? r : i) + n;
-}, Ce = class {
+}, xe = 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 ? 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({
 			x: i.x + r,
 			y: i.y
-		}, o, i) : i, f = n ? E({
+		}, o, i) : i, f = n ? D({
 			x: a.x - r,
 			y: a.y
-		}, s, a) : a, p = r + c, m = E({
+		}, s, a) : a, p = r + c, m = D({
 			x: i.x + p,
 			y: i.y
-		}, o, i), h = E({
+		}, o, i), h = D({
 			x: a.x - p,
 			y: a.y
-		}, s, a), g = Se(m, h, u);
+		}, s, a), g = be(m, h, u);
 		this.midpoint = {
 			x: (m.x + h.x) / 2,
 			y: g
-		}, this.path = j([
+		}, this.path = M([
 			d,
 			m,
 			{
@@ -1404,30 +1350,30 @@ var re = (e, t) => {
 			f
 		], l);
 	}
-}, we = (e, t, n) => {
+}, Se = (e, t, n) => {
 	let r = Math.max(e.x, t.x), i = Math.min(e.x, t.x);
 	return (n >= 0 ? r : i) + n;
-}, Te = class {
+}, Ce = 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 ? 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({
 			x: o.x + r,
 			y: o.y
-		}, i, o) : o, f = n ? E({
+		}, i, o) : o, f = n ? D({
 			x: s.x - r,
 			y: s.y
-		}, a, s) : s, p = r + c, m = E({
+		}, a, s) : s, p = r + c, m = D({
 			x: o.x + p,
 			y: o.y
-		}, i, o), h = E({
+		}, i, o), h = D({
 			x: s.x - p,
 			y: s.y
-		}, a, s), g = we(m, h, l);
+		}, a, s), g = Se(m, h, l);
 		this.midpoint = {
 			x: g,
 			y: (m.y + h.y) / 2
-		}, this.path = j([
+		}, this.path = M([
 			d,
 			m,
 			{
@@ -1442,22 +1388,22 @@ var re = (e, t) => {
 			f
 		], u);
 	}
-}, Ee = class {
+}, we = 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);
+			let t = new xe(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
 		if (!t && !n) {
-			let t = new Te(e);
+			let t = new Ce(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
-		let r = new be(e);
+		let r = new _e(e);
 		this.path = r.path, this.midpoint = r.midpoint;
 	}
 }, F = Object.freeze({
@@ -1482,12 +1428,12 @@ var re = (e, t) => {
 	curvature: 90,
 	interactiveWidth: 10,
 	portOffset: 0
-}), De = (e) => ({
+}), Te = (e) => ({
 	x: Math.cos(e),
 	y: Math.sin(e)
 }), I = class {
 	params;
-	svg;
+	element;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -1496,17 +1442,17 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.svg = ce(e.color), this.svg.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));
+		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = se(e.color), this.element.appendChild(this.group), this.line = ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
 	}
 	render(t) {
-		let { x: n, y: r, width: i, height: a, from: o, to: s } = ae(t.from, t.to, this.params.padding);
-		ue(this.svg, {
+		let { x: n, y: r, width: i, height: a, from: o, to: s } = ie(t.from, t.to, this.params.padding);
+		le(this.element, {
 			x: n,
 			y: r,
 			width: i,
 			height: a
 		});
-		let c = De(t.from.direction), l = De(t.to.direction), u = {
+		let c = Te(t.from.direction), l = Te(t.to.direction), u = {
 			x: -l.x,
 			y: -l.y
 		}, d;
@@ -1530,7 +1476,7 @@ var re = (e, t) => {
 			targetArrowPath: m
 		});
 	}
-}, Oe = (e) => (t) => {
+}, Ee = (e) => (t) => {
 	let n = [
 		{
 			x: 0,
@@ -1544,7 +1490,7 @@ var re = (e, t) => {
 			x: t.arrowLength,
 			y: -e.radius
 		}
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1552,7 +1498,7 @@ var re = (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`;
-}, ke = (e) => (t) => {
+}, De = (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,
@@ -1566,7 +1512,7 @@ var re = (e, t) => {
 			x: o,
 			y: s
 		}
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1574,8 +1520,8 @@ var re = (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}`}`;
-}, Ae = (e) => (t) => {
-	let n = e.smallRadius, r = e.radius, i = E({
+}, Oe = (e) => (t) => {
+	let n = e.smallRadius, r = e.radius, i = D({
 		x: t.arrowLength,
 		y: 0
 	}, {
@@ -1594,7 +1540,7 @@ var re = (e, t) => {
 			y: -i.y
 		},
 		i
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1605,16 +1551,16 @@ var re = (e, t) => {
 }, L = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "triangle": return Oe({ radius: e.radius ?? F.polygonArrowRadius });
-		case "arc": return ke({ radius: e.radius ?? F.circleArrowRadius });
-		default: return Ae({
+		case "triangle": return Ee({ radius: e.radius ?? F.polygonArrowRadius });
+		case "arc": return De({ radius: e.radius ?? F.circleArrowRadius });
+		default: return Oe({
 			smallRadius: e.smallRadius ?? F.wedgeArrowSmallRadius,
 			angle: e.angle ?? F.wedgeArrowAngle,
 			radius: e.radius ?? F.wedgeArrowRadius
 		});
 	}
-}, je = class {
-	svg;
+}, ke = class {
+	element;
 	group;
 	line;
 	sourceArrow;
@@ -1629,7 +1575,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new xe({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		radius: this.portCycleRadius,
@@ -1637,7 +1583,7 @@ var re = (e, t) => {
 		arrowLength: this.arrowLength,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new se({
+	createDetourPath = (e, t, n, r) => new oe({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1649,7 +1595,7 @@ var re = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new oe({
+	createLinePath = (e, t, n, r) => new ae({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1671,90 +1617,13 @@ var re = (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.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);
 	}
-}, Me = (e) => Math.cos(e) > 0 ? 0 : Math.PI, Ne = class {
-	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 Ce({
-		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 ge({
-		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.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;
-	}
-	render(e) {
-		let { from: t, to: n, category: r } = e;
-		this.pathShape.render({
-			category: r,
-			from: {
-				...t,
-				direction: Me(t.direction)
-			},
-			to: {
-				...n,
-				direction: Me(n.direction)
-			}
-		});
-	}
-}, Pe = class {
-	svg;
+}, Ae = class {
+	element;
 	group;
 	line;
 	sourceArrow;
@@ -1769,7 +1638,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new P({
+	createCyclePath = (e, t, n) => new ve({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1778,7 +1647,7 @@ var re = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new _e({
+	createDetourPath = (e, t, n, r) => new he({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1791,7 +1660,7 @@ var re = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new ve({
+	createLinePath = (e, t, n, r) => new ge({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1816,93 +1685,16 @@ var re = (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.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);
 	}
-}, Fe = Math.PI / 2, Ie = (e) => Math.sin(e) > 0 ? Fe : -Fe, Le = class {
-	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 Te({
-		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 ye({
-		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.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;
-	}
-	render(e) {
-		let { from: t, to: n, category: r } = e;
-		this.pathShape.render({
-			category: r,
-			from: {
-				...t,
-				direction: Ie(t.direction)
-			},
-			to: {
-				...n,
-				direction: Ie(n.direction)
-			}
-		});
-	}
-}, Re = (e) => {
+}, je = (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 {
-	svg;
+}, Me = class {
+	element;
 	group;
 	line;
 	sourceArrow;
@@ -1916,7 +1708,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new P({
+	createCyclePath = (e, t, n) => new ve({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1925,7 +1717,7 @@ var re = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new Ee({
+	createDetourPath = (e, t, n, r) => new we({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1937,7 +1729,7 @@ var re = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new be({
+	createLinePath = (e, t, n, r) => new _e({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1962,7 +1754,7 @@ var re = (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.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;
@@ -1970,19 +1762,19 @@ var re = (e, t) => {
 			category: r,
 			from: {
 				...t,
-				direction: Re(t.direction)
+				direction: je(t.direction)
 			},
 			to: {
 				...n,
-				direction: Re(n.direction)
+				direction: je(n.direction)
 			}
 		});
 	}
-}, Be = (e) => {
+}, Ne = (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);
-}, Ve = (e) => typeof e == "number" ? () => e : e === "box" ? Be : e, He = F.portOffset, R = class {
-	svg;
+}, Pe = (e) => typeof e == "number" ? () => e : e === "box" ? Ne : e, Fe = F.portOffset, R = class {
+	element;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -1996,11 +1788,11 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Ve(e?.sourceOffset ?? He), this.targetOffsetFn = Ve(e?.targetOffset ?? He), this.svg = ce(this.color), this.svg.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));
+		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Pe(e?.sourceOffset ?? Fe), this.targetOffsetFn = Pe(e?.targetOffset ?? Fe), this.element = se(this.color), this.element.appendChild(this.group), this.line = ce(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
 	}
 	render(e) {
-		let { x: t, y: n, width: r, height: i, from: a, to: o } = ae(e.from, e.to, 50);
-		ue(this.svg, {
+		let { x: t, y: n, width: r, height: i, from: a, to: o } = ie(e.from, e.to, 50);
+		le(this.element, {
 			x: t,
 			y: n,
 			width: r,
@@ -2098,43 +1890,43 @@ var re = (e, t) => {
 			targetArrowPath: n
 		});
 	}
-}, Ue = () => {
+}, Ie = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	return e.style.pointerEvents = "auto", e.style.cursor = "pointer", e;
-}, We = (e) => {
+}, Le = (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;
-}, Ge = (e) => {
+}, Re = (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;
-}, Ke = class extends Error {
+}, ze = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InteractiveEdgeError";
 	}
-}, qe = class e {
+}, Be = class e {
 	baseEdge;
-	svg;
+	element;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	handle = Ue();
+	handle = Ie();
 	onAfterRender;
 	interactiveLine;
 	interactiveSourceArrow = null;
 	interactiveTargetArrow = null;
 	constructor(t, n) {
-		if (this.baseEdge = t, t instanceof e) throw new Ke("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;
+		if (this.baseEdge = t, t instanceof e) throw new ze("interactive edge can be configured only once");
+		this.element = this.baseEdge.element, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
 		let r = n?.distance ?? F.interactiveWidth;
-		this.interactiveLine = 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 = 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) => {
 			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);
 	}
-}, Je = class {
+}, Ve = class {
 	baseShape;
 	midpointElement;
 	group;
@@ -2142,9 +1934,9 @@ var re = (e, t) => {
 	sourceArrow;
 	targetArrow;
 	onAfterRender;
-	svg;
+	element;
 	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.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);
 		});
@@ -2152,7 +1944,7 @@ var re = (e, t) => {
 	render(e) {
 		this.baseShape.render(e);
 	}
-}, Ye = class {
+}, He = class {
 	graphStore;
 	onAfterNodeAdded;
 	onAfterNodeUpdated;
@@ -2265,7 +2057,7 @@ var re = (e, t) => {
 	reset() {
 		this.counter = 0;
 	}
-}, Xe = class {
+}, Ue = class {
 	graphStore;
 	htmlView;
 	params;
@@ -2378,17 +2170,13 @@ var re = (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();
 	}
-}, Ze = (e) => {
-	setTimeout(() => {
-		e();
-	});
-}, Qe = (e) => {
+}, We = (e) => {
 	queueMicrotask(() => {
 		e();
 	});
 }, B = (e) => {
 	e();
-}, $e = class {
+}, Ge = class {
 	viewportStore;
 	onBeforeUpdated;
 	onAfterUpdated;
@@ -2411,7 +2199,7 @@ var re = (e, t) => {
 	createViewportCoords(e) {
 		return this.viewportStore.createViewportCoords(e);
 	}
-}, et = (e, t) => Symbol.iterator in e ? {
+}, Ke = (e, t) => Symbol.iterator in e ? {
 	minContentScale: t.focus.minContentScale,
 	nodes: e,
 	contentPadding: t.focus.contentPadding,
@@ -2419,17 +2207,17 @@ var re = (e, t) => {
 } : {
 	minContentScale: e.minContentScale ?? t.focus.minContentScale,
 	nodes: e.nodes ?? [],
-	contentPadding: e.contentPadding ?? e.contentOffset ?? t.focus.contentPadding,
+	contentPadding: e.contentPadding ?? t.focus.contentPadding,
 	animationDuration: e.animationDuration ?? t.focus.animationDuration
-}, tt = (e, t, n) => ({
+}, qe = (e, t, n) => ({
 	scale: e.scale,
 	x: e.x + e.scale * t,
 	y: e.y + e.scale * n
-}), nt = (e, t, n, r) => ({
+}), Je = (e, t, n, r) => ({
 	scale: e.scale * t,
 	x: e.scale * (1 - t) * n + e.x,
 	y: e.scale * (1 - t) * r + e.y
-}), rt = class {
+}), Ye = class {
 	graphStore;
 	viewportStore;
 	params;
@@ -2447,16 +2235,16 @@ var re = (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 = tt(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
+		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = qe(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
 		if (c !== void 0) {
 			let e = 1 / c;
-			s = nt(s, e / a.scale, i.x, i.y);
+			s = Je(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 = et(e ?? {}, this.params);
+		let t = Ke(e ?? {}, this.params);
 		this.params.focus.schedule(() => {
 			this.navigate(t);
 		});
@@ -2498,11 +2286,11 @@ var re = (e, t) => {
 		};
 		this.win.requestAnimationFrame(a);
 	}
-}, it = (e, t, n) => {
+}, Xe = (e, t, n) => {
 	let r = new h();
-	return new d(new Ye(r), new $e(t), new Xe(r, new a(r, t, e), {
+	return new d(new He(r), new Ge(t), new Ue(r, new a(r, t, e), {
 		nodes: {
-			centerFn: ie,
+			centerFn: re,
 			priorityFn: () => 0
 		},
 		edges: {
@@ -2510,13 +2298,13 @@ var re = (e, t) => {
 			priorityFn: () => 0
 		},
 		ports: { direction: 0 }
-	}), new rt(r, t, { focus: {
+	}), new Ye(r, t, { focus: {
 		contentPadding: 0,
 		minContentScale: 0,
 		schedule: B,
 		animationDuration: 0
 	} }, n));
-}, V = Symbol(), at = class e {
+}, V = Symbol(), Ze = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -2610,7 +2398,7 @@ var re = (e, t) => {
 	removeWindowTouchListeners() {
 		this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
 	}
-}, H = Symbol(), ot = class {
+}, H = Symbol(), Qe = class {
 	has(e, t) {
 		let n = e[H];
 		return n !== void 0 && n.has(t);
@@ -2700,10 +2488,10 @@ var re = (e, t) => {
 		let r = Math.sqrt(e * e + t * t);
 		this.movedDistance += r, this.movedDistance > this.movementThreshold && n();
 	}
-}, st = (e, t) => ({
+}, G = (e, t) => ({
 	from: e.isDirect ? e.staticPortId : t,
 	to: e.isDirect ? t : e.staticPortId
-}), ct = class {
+}), $e = class {
 	graph;
 	connectionAllowedVerifier;
 	constructor(e, t) {
@@ -2714,7 +2502,7 @@ var re = (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 = st(e, i);
+			let u = G(e, i);
 			if (!this.connectionAllowedVerifier(u)) return;
 			let { top: d, left: f, width: p, height: m } = a.getBoundingClientRect(), h = {
 				x: f + p / 2,
@@ -2723,7 +2511,7 @@ var re = (e, t) => {
 			v < n && (n = v, t = o);
 		}), t;
 	}
-}, lt = class {
+}, et = class {
 	direction;
 	constructor(e) {
 		this.direction = e;
@@ -2731,7 +2519,7 @@ var re = (e, t) => {
 	resolve() {
 		return this.direction;
 	}
-}, ut = class e {
+}, tt = class e {
 	canvas;
 	element;
 	window;
@@ -2768,19 +2556,14 @@ var re = (e, t) => {
 			nodeId: r,
 			dx: a.x - i.x,
 			dy: a.y - i.y
-		}, 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 });
+		}, 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 });
 	};
 	onTouchStart = (e) => {
 		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);
-		if (!this.params.nodeDragVerifier({
-			nodeId: i,
-			element: a.element,
-			x: a.x,
-			y: a.y
-		})) return;
+		if (!this.params.nodeDragVerifier(i)) return;
 		this.eventTagger.tag(e, V);
 		let o = this.calculateContentPoint({
 			x: n.clientX,
@@ -2858,7 +2641,7 @@ var re = (e, t) => {
 		}
 	}
 	stopMouseDrag() {
-		this.finishDrag(), C(this.element, null), this.removeMouseDragListeners();
+		this.finishDrag(), w(this.element, null), this.removeMouseDragListeners();
 	}
 	removeMouseDragListeners() {
 		this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2895,7 +2678,7 @@ var re = (e, t) => {
 		let e = this.grabbedNodeState.nodeId;
 		this.graph.hasNode(e) && this.params.onNodeDragFinished(e), this.grabbedNodeState = null;
 	}
-}, G = (e) => {
+}, K = (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);
@@ -2906,7 +2689,7 @@ var re = (e, t) => {
 		touchesCnt: n,
 		touches: t
 	};
-}, dt = class e {
+}, nt = class e {
 	canvas;
 	element;
 	window;
@@ -2921,7 +2704,7 @@ var re = (e, t) => {
 		this.removeMouseDragListeners(), this.removeTouchDragListeners();
 	};
 	onMouseDown = (e) => {
-		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());
+		this.eventTagger.has(e, V) || this.params.mouseDownEventVerifier(e) && (w(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
 	};
 	onWindowMouseMove = (e) => {
 		let t = this.pointInsideVerifier.verify(e.clientX, e.clientY);
@@ -2945,14 +2728,14 @@ var re = (e, t) => {
 	onTouchStart = (e) => {
 		if (!this.eventTagger.has(e, V)) {
 			if (this.prevTouches !== null) {
-				this.prevTouches = G(e);
+				this.prevTouches = K(e);
 				return;
 			}
-			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();
+			this.prevTouches = K(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 = G(e);
+		let t = K(e);
 		if (!t.touches.every((e) => this.pointInsideVerifier.verify(e[0], e[1]))) {
 			this.stopTouchDrag();
 			return;
@@ -2968,7 +2751,7 @@ var re = (e, t) => {
 		this.prevTouches = t;
 	};
 	onWindowTouchFinish = (e) => {
-		e.touches.length > 0 ? this.prevTouches = G(e) : this.stopTouchDrag();
+		e.touches.length > 0 ? this.prevTouches = K(e) : this.stopTouchDrag();
 	};
 	preventWheelScaleListener = (e) => {
 		e.preventDefault();
@@ -2982,25 +2765,29 @@ var re = (e, t) => {
 		new e(t, n, r, i, a, o);
 	}
 	moveViewport(e, t) {
-		let n = this.viewport.getViewportMatrix(), r = tt(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+		let n = this.viewport.getViewportMatrix(), r = qe(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
 			prevTransform: n,
 			nextTransform: r,
-			canvasWidth: i,
-			canvasHeight: a
+			viewport: {
+				width: i,
+				height: a
+			}
 		});
 		this.performTransform(o);
 	}
 	scaleViewport(e, t, n) {
-		let r = this.canvas.viewport.getViewportMatrix(), i = nt(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+		let r = this.canvas.viewport.getViewportMatrix(), i = Je(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
 			prevTransform: r,
 			nextTransform: i,
-			canvasWidth: a,
-			canvasHeight: o
+			viewport: {
+				width: a,
+				height: o
+			}
 		});
 		this.performTransform(s);
 	}
 	stopMouseDrag() {
-		C(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+		w(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
 	}
 	removeMouseDragListeners() {
 		this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3024,12 +2811,14 @@ var re = (e, t) => {
 		let e = this.viewport.getViewportMatrix(), { width: t, height: n } = this.viewport.getDimensions(), r = this.params.transformPreprocessor({
 			prevTransform: e,
 			nextTransform: e,
-			canvasWidth: t,
-			canvasHeight: n
+			viewport: {
+				width: t,
+				height: n
+			}
 		});
 		this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(r), this.params.onResizeTransformFinished();
 	}
-}, ft = class e {
+}, rt = class e {
 	canvas;
 	element;
 	window;
@@ -3082,7 +2871,7 @@ var re = (e, t) => {
 				this.scheduleLoadAreaAroundViewport(), r.onTransformFinished();
 			}
 		};
-		dt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+		nt.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);
@@ -3107,21 +2896,21 @@ var re = (e, t) => {
 			height: u
 		});
 	}
-}, pt = () => {
+}, it = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, mt = () => {
+}, at = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	return e.setAttribute("fill", "url(#pattern)"), e;
-}, ht = () => {
+}, ot = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
 	return e.setAttribute("id", "pattern"), e;
-}, gt = class e {
+}, st = class e {
 	canvas;
 	backgroundHost;
-	svg = pt();
-	patternRenderingRectangle = mt();
-	pattern = ht();
+	svg = it();
+	patternRenderingRectangle = at();
+	pattern = ot();
 	patternContent;
 	tileWidth;
 	tileHeight;
@@ -3156,7 +2945,7 @@ var re = (e, t) => {
 			this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${r}`);
 		}
 	}
-}, _t = class e {
+}, ct = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3170,7 +2959,7 @@ var re = (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 = it(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 = Xe(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3189,7 +2978,7 @@ var re = (e, t) => {
 				this.resetDragState(), this.params.onEdgeCreationInterrupted(e);
 			}
 		};
-		at.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Ze.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);
@@ -3202,7 +2991,7 @@ var re = (e, t) => {
 			x: t.x - s.x,
 			y: t.y - s.y
 		}), u = {
-			overlayNodeId: T.StaticNodeId,
+			overlayNodeId: E.StaticNodeId,
 			portCoords: c,
 			portDirection: r.direction
 		}, d = n === "direct";
@@ -3214,26 +3003,26 @@ var re = (e, t) => {
 			cursor: t,
 			...this.edgeInProgress
 		}), p = {
-			overlayNodeId: T.DraggingNodeId,
+			overlayNodeId: E.DraggingNodeId,
 			portCoords: l,
 			portDirection: f ?? r.direction
 		}, [m, h] = d ? [u, p] : [p, u];
-		this.overlayCanvas.addNode(w(m)), this.overlayCanvas.addNode(w(h)), this.overlayCanvas.addEdge({
+		this.overlayCanvas.addNode(T(m)), this.overlayCanvas.addNode(T(h)), this.overlayCanvas.addEdge({
 			from: m.overlayNodeId,
 			to: h.overlayNodeId,
-			shape: this.params.edgeShapeFactory(T.EdgeId)
+			shape: this.params.edgeShapeFactory(E.EdgeId)
 		});
 	}
 	resetDragState() {
 		this.edgeInProgress = null, this.overlayCanvas.clear();
 	}
 	tryCreateConnection(e) {
-		let t = re(this.canvas.graph, e);
+		let t = ne(this.canvas.graph, e);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = st(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
+		let n = G(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
 			from: n.from,
 			to: n.to
 		});
@@ -3247,12 +3036,12 @@ var re = (e, t) => {
 			cursor: e,
 			...this.edgeInProgress
 		});
-		this.overlayCanvas.updateNode(T.DraggingNodeId, {
+		this.overlayCanvas.updateNode(E.DraggingNodeId, {
 			x: n.x,
 			y: n.y
-		}).updatePort(T.DraggingNodeId, { direction: r });
+		}).updatePort(E.DraggingNodeId, { direction: r });
 	}
-}, vt = class e {
+}, lt = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3267,7 +3056,7 @@ var re = (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 = it(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 = Xe(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3289,7 +3078,7 @@ var re = (e, t) => {
 				});
 			}
 		};
-		at.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Ze.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);
@@ -3320,21 +3109,21 @@ var re = (e, t) => {
 			priority: r.priority
 		}, this.canvas.removeEdge(n);
 		let m = {
-			overlayNodeId: T.StaticNodeId,
+			overlayNodeId: E.StaticNodeId,
 			portCoords: f,
 			portDirection: c.direction
 		}, h = this.params.draggingPortDirectionResolver.resolve({
 			cursor: t,
 			...this.edgeInProgress
 		}), g = {
-			overlayNodeId: T.DraggingNodeId,
+			overlayNodeId: E.DraggingNodeId,
 			portCoords: p,
 			portDirection: h ?? s.direction
 		}, [_, v] = a ? [m, g] : [g, m];
-		this.overlayCanvas.addNode(w(_)), this.overlayCanvas.addNode(w(v));
-		let y = this.params.draggingEdgeShapeFactory === null ? r.shape : this.params.draggingEdgeShapeFactory(T.EdgeId);
+		this.overlayCanvas.addNode(T(_)), this.overlayCanvas.addNode(T(v));
+		let y = this.params.draggingEdgeShapeFactory === null ? r.shape : this.params.draggingEdgeShapeFactory(E.EdgeId);
 		return this.overlayCanvas.addEdge({
-			id: T.EdgeId,
+			id: E.EdgeId,
 			from: _.overlayNodeId,
 			to: v.overlayNodeId,
 			shape: y
@@ -3351,14 +3140,14 @@ var re = (e, t) => {
 			cursor: e,
 			...this.edgeInProgress
 		});
-		this.overlayCanvas.updateNode(T.DraggingNodeId, {
+		this.overlayCanvas.updateNode(E.DraggingNodeId, {
 			x: r.x,
 			y: r.y
-		}).updatePort(T.DraggingNodeId, { direction: i });
+		}).updatePort(E.DraggingNodeId, { direction: i });
 	}
 	tryCreateConnection(e) {
-		let t = re(this.canvas.graph, e);
-		if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
+		let t = ne(this.canvas.graph, e);
+		if (this.overlayCanvas.removeEdge(E.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
 				id: e.id,
@@ -3369,7 +3158,7 @@ var re = (e, t) => {
 			});
 			return;
 		}
-		let { from: n, to: r } = st(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
+		let { from: n, to: r } = G(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
 			id: i.id,
 			from: n,
 			to: r,
@@ -3391,7 +3180,7 @@ var re = (e, t) => {
 			});
 		}
 	}
-}, yt = class e {
+}, ut = class e {
 	applier;
 	trigger;
 	constructor(e, t) {
@@ -3402,7 +3191,7 @@ var re = (e, t) => {
 	static configure(t, n) {
 		new e(t, n);
 	}
-}, bt = class e {
+}, dt = class e {
 	graph;
 	applier;
 	defererFn;
@@ -3427,7 +3216,7 @@ var re = (e, t) => {
 	scheduleApply() {
 		this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
 	}
-}, xt = class {
+}, ft = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3443,23 +3232,23 @@ var re = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, St = class {
+}, pt = class {
 	static configure(e, t) {
-		let n = t.applyOn, r = new xt(e, t.algorithm, {
+		let n = t.applyOn, r = new ft(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
 		});
 		switch (n.type) {
 			case "trigger":
-				yt.configure(r, n.trigger);
+				ut.configure(r, n.trigger);
 				break;
 			case "topologyChangeSchedule":
-				bt.configure(e.graph, r, n.schedule);
+				dt.configure(e.graph, r, n.schedule);
 				break;
 		}
 	}
-}, Ct = class {
+}, mt = class {
 	win;
 	callback;
 	previousTimeStamp = void 0;
@@ -3474,7 +3263,7 @@ var re = (e, t) => {
 	constructor(e, t) {
 		this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
 	}
-}, wt = class {
+}, ht = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3491,23 +3280,23 @@ var re = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, Tt = class e {
+}, gt = class e {
 	win;
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.win = n, this.applier = new wt(e, t.algorithm, {
+		this.win = n, this.applier = new ht(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new Ct(this.win, this.step);
+		}), new mt(this.win, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
 	}
-}, Et = class e {
+}, _t = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -3543,7 +3332,7 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, Dt = class e {
+}, vt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -3553,16 +3342,16 @@ var re = (e, t) => {
 	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) {
@@ -3579,7 +3368,7 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, Ot = class e {
+}, yt = class e {
 	canvas;
 	element;
 	window;
@@ -3603,29 +3392,29 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a, o) {
 		new e(t, n, r, i, a, o);
 	}
-}, kt = () => {
+}, bt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, At = () => {
+}, q = () => {
 	let e = document.createElement("div");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, jt = () => {
-	let e = At();
+}, xt = () => {
+	let e = q();
 	return e.style.pointerEvents = "none", e;
-}, Mt = class {
+}, St = class {
 	element;
-	background = At();
-	main = At();
-	overlayConnectablePorts = jt();
-	overlayDraggableEdges = jt();
-	host = kt();
+	background = q();
+	main = q();
+	overlayConnectablePorts = xt();
+	overlayDraggableEdges = xt();
+	host = bt();
 	constructor(e) {
 		this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
 	}
 	destroy() {
 		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
 	}
-}, K = Object.freeze({
+}, J = Object.freeze({
 	seed: "HTMLGraph is awesome",
 	maxTimeDeltaSec: .01,
 	nodeCharge: 1e5,
@@ -3639,14 +3428,14 @@ var re = (e, t) => {
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
-}), q = Object.freeze({
+}), Y = Object.freeze({
 	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0,
 	movementThreshold: 10
-}), J = () => {}, Nt = (e, t, n) => e === "closest-connectable-port" || e === "nearest-connectable-port" ? new ct(t, n) : new lt(e), Y = (e) => {
+}), X = () => {}, Ct = (e, t, n) => e === "nearest-connectable-port" ? new $e(t, n) : typeof e == "number" ? new et(e) : new et(void 0), wt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "straight": return () => new Pe({
+		case "straight": return () => new Ae({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3659,31 +3448,7 @@ var re = (e, t) => {
 			detourDistance: e.detourDistance,
 			detourDirection: e.detourDirection
 		});
-		case "horizontal": return () => new Ne({
-			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 "vertical": return () => new Le({
-			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 "orthogonal": return () => new ze({
+		case "orthogonal": return () => new Me({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3705,7 +3470,7 @@ var re = (e, t) => {
 			sourceOffset: e.sourceOffset,
 			targetOffset: e.targetOffset
 		});
-		default: return () => new je({
+		default: return () => new ke({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3719,7 +3484,7 @@ var re = (e, t) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Pt = (e) => {
+}, Tt = (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,
@@ -3728,26 +3493,26 @@ var re = (e, t) => {
 		gridSize: e.gridSize ?? null,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
-		onNodeDragStarted: e.events?.onNodeDragStarted ?? J,
-		onNodeDrag: e.events?.onNodeDrag ?? J,
+		onNodeDragStarted: e.events?.onNodeDragStarted ?? X,
+		onNodeDrag: e.events?.onNodeDrag ?? X,
 		nodeDragVerifier: t,
-		onNodeDragFinished: e.events?.onNodeDragFinished ?? J
+		onNodeDragFinished: e.events?.onNodeDragFinished ?? X
 	};
-}, Ft = (e) => {
+}, Et = (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;
 		a < t && a < e.prevTransform.x && (a = Math.min(e.prevTransform.x, t));
-		let s = n - e.canvasWidth * e.prevTransform.scale;
+		let s = n - e.viewport.width * e.prevTransform.scale;
 		a > s && a > e.prevTransform.x && (a = Math.max(e.prevTransform.x, s)), o < r && o < e.prevTransform.y && (o = Math.min(e.prevTransform.y, r));
-		let c = i - e.canvasHeight * e.prevTransform.scale;
+		let c = i - e.viewport.height * e.prevTransform.scale;
 		return o > c && o > e.prevTransform.y && (o = Math.max(e.prevTransform.y, c)), {
 			scale: e.nextTransform.scale,
 			x: a,
 			y: o
 		};
 	};
-}, It = (e) => {
+}, Dt = (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;
@@ -3767,105 +3532,104 @@ var re = (e, t) => {
 			y: s
 		};
 	};
-}, Lt = (e) => (t) => e.reduce((e, n) => n({
+}, Ot = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
-	canvasWidth: t.canvasWidth,
-	canvasHeight: t.canvasHeight
-}), t.nextTransform), Rt = (e) => {
+	viewport: t.viewport
+}), t.nextTransform), kt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return It({
+		case "scale-limit": return Dt({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Ft({
+		case "shift-limit": return Et({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, zt = (e) => {
+}, At = (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) ? 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;
+	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? Ot(r.map((e) => kt(e))) : kt(r);
+	let a = e?.pan?.cursor === void 0 ? "grab" : e.pan.cursor, o = e?.pan?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.pan?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
 	return {
 		wheelSensitivity: n,
-		onTransformStarted: e?.events?.onTransformStarted ?? J,
-		onTransformFinished: e?.events?.onTransformFinished ?? J,
-		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? J,
-		onTransformChange: e?.events?.onTransformChange ?? J,
+		onTransformStarted: e?.events?.onTransformStarted ?? X,
+		onTransformFinished: e?.events?.onTransformFinished ?? X,
+		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? X,
+		onTransformChange: e?.events?.onTransformChange ?? X,
 		transformPreprocessor: i,
 		shiftCursor: a,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
 		mouseWheelEventVerifier: d,
 		scaleWheelFinishTimeout: e?.scale?.wheelFinishTimeout ?? 500,
-		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? J,
-		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? J
+		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? X,
+		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? X
 	};
-}, Bt = (e, t) => {
+}, jt = (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;
-}, Vt = (e) => e instanceof SVGElement ? e : Bt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ht = (e) => {
+}, Mt = (e) => e instanceof SVGElement ? e : jt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Nt = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Vt(e.renderer ?? {}),
+		renderer: Mt(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
-}, X = Object.freeze({
+}, Z = Object.freeze({
 	connectionTypeResolver: () => "direct",
 	connectionPreprocessor: (e) => e,
 	connectionAllowedVerifier: () => !0,
 	mouseEventVerifier: (e) => e.button === 0
-}), Ut = (e, t, n) => {
-	let r = e.connectionAllowedVerifier ?? X.connectionAllowedVerifier;
+}), Pt = (e, t, n) => {
+	let r = e.connectionAllowedVerifier ?? Z.connectionAllowedVerifier;
 	return {
-		connectionTypeResolver: e.connectionTypeResolver ?? X.connectionTypeResolver,
+		connectionTypeResolver: e.connectionTypeResolver ?? Z.connectionTypeResolver,
 		connectionAllowedVerifier: 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,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? X.mouseEventVerifier,
-		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? J,
-		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? J,
-		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? J
+		draggingPortDirectionResolver: Ct(e.dragPortDirection, n, r),
+		edgeShapeFactory: e.edgeShape === void 0 ? t : wt(e.edgeShape),
+		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseEventVerifier,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseEventVerifier,
+		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? X,
+		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? X,
+		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? X
 	};
-}, Z = Object.freeze({
+}, Q = Object.freeze({
 	connectionAllowedVerifier: () => !0,
 	connectionPreprocessor: (e) => e,
-	mouseDownEventVerifier: (e) => e.button === 0 && e.ctrlKey,
+	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0
-}), Wt = (e, t) => {
+}), Ft = (e, t) => {
 	let n = (e) => {
 		let n = t.getPortAdjacentEdgeIds(e);
 		return n.length > 0 ? n[n.length - 1] : null;
-	}, r = e.connectionAllowedVerifier ?? Z.connectionAllowedVerifier;
+	}, r = e.connectionAllowedVerifier ?? Q.connectionAllowedVerifier;
 	return {
-		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
+		connectionPreprocessor: e.connectionPreprocessor ?? Q.connectionPreprocessor,
 		connectionAllowedVerifier: r,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseDownEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseUpEventVerifier,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q.mouseDownEventVerifier,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Q.mouseUpEventVerifier,
 		draggingEdgeResolver: e.draggingEdgeResolver ?? n,
-		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Y(e.draggingEdgeShape),
-		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? J,
-		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? J,
-		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? J,
-		draggingPortDirectionResolver: Nt(e.dragPortDirection, t, r)
+		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : wt(e.draggingEdgeShape),
+		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? X,
+		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? X,
+		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? X,
+		draggingPortDirectionResolver: Ct(e.dragPortDirection, t, r)
 	};
-}, Gt = (e) => ({
+}, It = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), Kt = (e) => ({
-	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? J,
-	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? J
-}), qt = class extends Error {
+}), Lt = (e) => ({
+	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? X,
+	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? X
+}), Rt = class extends Error {
 	name = "CanvasBuilderError";
-}, Jt = class {
+}, zt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3900,7 +3664,7 @@ var re = (e, t) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Yt = class {
+}, Bt = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3923,11 +3687,11 @@ var re = (e, t) => {
 			d: a
 		};
 	}
-}, Xt = (e) => {
+}, Vt = (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);
-}, Zt = class {
+}, Ht = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3939,7 +3703,7 @@ var re = (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 = Xt({
+				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Vt({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3950,7 +3714,7 @@ var re = (e, t) => {
 			}
 		}
 	}
-}, Qt = (e) => {
+}, Ut = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3966,7 +3730,7 @@ var re = (e, t) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, $t = class {
+}, Wt = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -4122,7 +3886,7 @@ var re = (e, t) => {
 			y: n / e.size
 		};
 	}
-}, en = class {
+}, Gt = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -4134,8 +3898,8 @@ var re = (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 $t({
-			box: Qt(e),
+		let n = new Wt({
+			box: Ut(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4245,7 +4009,7 @@ var re = (e, t) => {
 		});
 	}
 	calculateNodeRepulsiveForce(e) {
-		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Xt({
+		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Vt({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4272,12 +4036,12 @@ var re = (e, t) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, tn = (e) => e.theta === 0 ? new Zt({
+}, Kt = (e) => e.theta === 0 ? new Ht({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new en({
+}) : new Gt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4285,7 +4049,7 @@ var re = (e, t) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), nn = class {
+}), qt = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4310,7 +4074,7 @@ var re = (e, t) => {
 			});
 		}), r;
 	}
-}, rn = class {
+}, Jt = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4321,7 +4085,7 @@ var re = (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 Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
+		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4329,7 +4093,7 @@ var re = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new nn({
+		}), this.fillerLayoutAlgorithm = new qt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4339,7 +4103,7 @@ var re = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		for (let e = 0; e < this.maxIterations && !(new Jt(t, r, {
+		for (let e = 0; e < this.maxIterations && !(new zt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
@@ -4349,7 +4113,7 @@ var re = (e, t) => {
 		}).apply() < this.convergenceVelocity); e++);
 		return r;
 	}
-}, an = class {
+}, Yt = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4393,7 +4157,7 @@ var re = (e, t) => {
 			}), r = e;
 		}
 	}
-}, on = class {
+}, Xt = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4432,13 +4196,13 @@ var re = (e, t) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, sn = class {
+}, Zt = class {
 	tree;
 	offsets = /* @__PURE__ */ new Map();
 	treeSpans = /* @__PURE__ */ new Map();
 	constructor(e, t) {
 		this.tree = e;
-		let n = t.spaceAroundRadius, r = new on({ spaceAroundRadius: n });
+		let n = t.spaceAroundRadius, r = new Xt({ 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) => {
@@ -4454,19 +4218,19 @@ var re = (e, t) => {
 	generate() {
 		return this.offsets;
 	}
-}, cn = class {
+}, Qt = class {
 	params;
 	constructor(e) {
 		this.params = e;
 	}
 	calculateCoordinates(e) {
-		let t = /* @__PURE__ */ new Map(), n = new an(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
+		let t = /* @__PURE__ */ new Map(), n = new Yt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
 		return n.forEach((e) => {
 			t.set(e.root.nodeId, {
 				x: r,
 				y: 0
 			});
-			let n = new sn(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
+			let n = new Zt(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4483,7 +4247,7 @@ var re = (e, t) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, ln = (e) => {
+}, $t = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4492,19 +4256,19 @@ var re = (e, t) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, un = (e) => {
+}, en = (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);
-}, dn = (e) => {
+}, tn = (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);
-}, fn = class {
+}, nn = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	convergenceVelocity;
@@ -4514,7 +4278,7 @@ var re = (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 Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
+		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4522,7 +4286,7 @@ var re = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new nn({
+		}), this.fillerLayoutAlgorithm = new qt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4532,7 +4296,7 @@ var re = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		return new Jt(t, i, {
+		return new zt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
@@ -4544,7 +4308,7 @@ var re = (e, t) => {
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, pn = (e) => {
+}, rn = (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, [
@@ -4553,61 +4317,55 @@ var re = (e, t) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, mn = (e, t, n, r) => function() {
+}, an = (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;
-}, hn = (e) => {
+}, on = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			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,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? K.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? K.edgeStiffness,
-				convergenceVelocity: e?.convergenceVelocity ?? K.convergenceVelocity,
-				maxForce: e?.maxForce ?? K.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? K.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? K.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? K.barnesHutAreaRadiusThreshold
+			let t = rn(e?.seed ?? J.seed);
+			return new nn({
+				rand: an(t[0], t[1], t[2], t[3]),
+				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? J.maxTimeDeltaSec,
+				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
+				nodeMass: e?.nodeMass ?? J.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
+				maxForce: e?.maxForce ?? J.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, gn = { staticNodeResolver: () => !1 }, _n = (e) => ({
-	algorithm: hn(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? gn.staticNodeResolver,
-	onBeforeApplied: e?.events?.onBeforeApplied ?? J,
-	onAfterApplied: e?.events?.onAfterApplied ?? J
-}), vn = (e) => e instanceof l ? {
+}, sn = { staticNodeResolver: () => !1 }, cn = (e) => ({
+	algorithm: on(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? sn.staticNodeResolver,
+	onBeforeApplied: e?.events?.onBeforeApplied ?? X,
+	onAfterApplied: e?.events?.onAfterApplied ?? X
+}), ln = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
-} : e === "topologyChangeMicrotask" ? {
-	type: "topologyChangeSchedule",
-	schedule: Qe
-} : e?.type === "topologyChangeMacrotask" ? {
-	type: "topologyChangeSchedule",
-	schedule: Ze
 } : {
 	type: "topologyChangeSchedule",
-	schedule: Qe
-}, yn = Object.freeze({
+	schedule: We
+}, un = Object.freeze({
 	staticNodeResolver: () => !1,
 	hierarchicalLayout: {
 		layerWidth: 300,
 		layerSpace: 300
 	}
-}), Q = (e, t) => ({
+}), $ = (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
-}), bn = (e) => {
+}), dn = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4617,7 +4375,7 @@ var re = (e, t) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, xn = class {
+}, fn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4659,11 +4417,11 @@ var re = (e, t) => {
 		return this.createRelativeTransform(n, r);
 	}
 	createMirrorRelativeMatrix(e, t) {
-		let n = this.createMirrorYBaseMatrix(), r = Q(this.createShiftBaseMatrix(t), this.createRotateBaseMatrix(e));
+		let n = this.createMirrorYBaseMatrix(), r = $(this.createShiftBaseMatrix(t), this.createRotateBaseMatrix(e));
 		return this.createRelativeTransform(n, r);
 	}
 	createRelativeTransform(e, t) {
-		return Q(Q(t, e), bn(t));
+		return $($(t, e), dn(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4706,7 +4464,7 @@ var re = (e, t) => {
 			f: 0
 		};
 	}
-}, Sn = (e) => {
+}, pn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4716,10 +4474,10 @@ var re = (e, t) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new xn();
+	}, r = new fn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
-		n = Q(n, t);
+		n = $(n, t);
 	}), (e) => {
 		let { x: t, y: r } = e;
 		return {
@@ -4727,47 +4485,47 @@ var re = (e, t) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, Cn = (e) => {
+}, mn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return un;
-		case "incoming": return dn;
-		default: return ln;
+		case "outgoing": return en;
+		case "incoming": return tn;
+		default: return $t;
 	}
-}, wn = (e) => {
+}, hn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		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)
+		case "hierarchical": return new Qt({
+			layerWidth: e.layerWidth ?? un.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? un.hierarchicalLayout.layerSpace,
+			transform: pn(e.transform),
+			nextLayerNodesResolver: mn(e.nextLayerNodesResolver)
 		});
 		default: {
-			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,
+			let t = rn(e?.seed ?? J.seed), n = an(t[0], t[1], t[2], t[3]);
+			return new Jt({
+				dtSec: e?.dtSec ?? J.dtSec,
+				maxIterations: e?.maxIterations ?? J.maxIterations,
 				rand: n,
-				nodeCharge: e?.nodeCharge ?? K.nodeCharge,
-				nodeMass: e?.nodeMass ?? K.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? K.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? K.edgeStiffness,
-				convergenceVelocity: e?.convergenceVelocity ?? K.convergenceVelocity,
-				maxForce: e?.maxForce ?? K.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? K.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? K.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? K.barnesHutAreaRadiusThreshold
+				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
+				nodeMass: e?.nodeMass ?? J.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
+				maxForce: e?.maxForce ?? J.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, 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
-}), En = (e, t) => ({
+}, gn = (e) => ({
+	algorithm: hn(e.algorithm),
+	applyOn: ln(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? un.staticNodeResolver,
+	onBeforeApplied: e.events?.onBeforeApplied ?? X,
+	onAfterApplied: e.events?.onAfterApplied ?? X
+}), _n = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4775,7 +4533,7 @@ var re = (e, t) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), Dn = (e, t) => {
+}), vn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4783,55 +4541,55 @@ var re = (e, t) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, On = (e, t) => ({
+}, yn = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), $ = (e) => () => e, kn = $(0), An = () => {
+}), bn = (e) => () => e, xn = bn(0), Sn = () => {
 	let e = 0;
 	return () => e++;
-}, 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), {
+}, Cn = (e, t) => {
+	let n = xn, r = xn, i = Sn();
+	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = bn(e)), typeof t == "number" && (r = bn(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
 		nodesPriorityFn: n,
 		edgesPriorityFn: r
 	};
-}, Mn = (e) => {
-	let t = jn(e.nodes?.priority, e.edges?.priority);
+}, wn = (e) => {
+	let t = Cn(e.nodes?.priority, e.edges?.priority);
 	return {
 		nodes: {
-			centerFn: e.nodes?.centerFn ?? ie,
+			centerFn: e.nodes?.centerFn ?? re,
 			priorityFn: t.nodesPriorityFn
 		},
 		ports: { direction: e.ports?.direction ?? 0 },
 		edges: {
-			shapeFactory: Y(e.edges?.shape ?? {}),
+			shapeFactory: wt(e.edges?.shape ?? {}),
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, Nn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, Pn = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? Nn(e.layoutParams) : B;
+}, Tn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, En = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? Tn(e.layoutParams) : B;
 	return { focus: {
-		contentPadding: t.focus?.contentPadding ?? t.focus?.contentOffset ?? 100,
+		contentPadding: t.focus?.contentPadding ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, Fn = (e) => ({
+}, Dn = (e) => ({
 	onNodeSelected: e.onNodeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), In = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? Y.movementThreshold
+}), On = (e) => ({
 	onCanvasSelected: e.onCanvasSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), Ln = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? Y.movementThreshold
+}), kn = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), Rn = class {
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? Y.movementThreshold
+}), An = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4858,9 +4616,9 @@ var re = (e, t) => {
 	window = window;
 	animationStaticNodes = /* @__PURE__ */ new Set();
 	pointInsideVerifier;
-	eventTagger = new ot();
+	eventTagger = new Qe();
 	constructor(e) {
-		this.element = e, this.pointInsideVerifier = new ee(e, this.window);
+		this.element = e, this.pointInsideVerifier = new C(e, this.window);
 	}
 	setDefaults(e) {
 		return this.canvasDefaults = e, this;
@@ -4902,40 +4660,40 @@ var re = (e, t) => {
 		return this.userSelectableCanvasConfig = e, this;
 	}
 	build() {
-		if (this.used) throw new qt("Failed to build Canvas because CanvasBuilder is a single-use object");
+		if (this.used) throw new Rt("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 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({
+		let e = new y(this.element), t = new h(), n = new St(this.element), r = this.createHtmlView(n.main, t, e), i = wn(this.canvasDefaults), a = new Ue(t, r, i), o = gn(this.layoutConfig), s = new Ye(t, e, En({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
-		}), 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);
+		}), this.window), c = new Ge(e), l = new d(new He(t), c, a, s);
+		if (this.hasBackground && st.configure(l, Nt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = kn(this.userSelectableEdgesConfig);
+			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = Fn(this.userSelectableNodesConfig);
-			Et.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Dn(this.userSelectableNodesConfig);
+			_t.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = In(this.userSelectableCanvasConfig);
-			Ot.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = On(this.userSelectableCanvasConfig);
+			yt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Pt(this.dragConfig);
-			this.hasAnimatedLayout && (e = En(e, this.animationStaticNodes)), ut.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Tt(this.dragConfig);
+			this.hasAnimatedLayout && (e = _n(e, this.animationStaticNodes)), tt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = Ut(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
-			_t.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Pt(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
+			ct.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
 		if (this.hasUserDraggableEdges) {
-			let t = Wt(this.draggableEdgesConfig, l.graph);
-			vt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Ft(this.draggableEdgesConfig, l.graph);
+			lt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		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);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, At(this.transformConfig)) : rt.configure(l, n.main, this.window, At(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, It(this.virtualScrollConfig)), this.hasLayout && pt.configure(l, o), this.hasAnimatedLayout) {
+			let e = cn(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (vn(l, this.animationStaticNodes), e = yn(e, this.animationStaticNodes)), gt.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4943,8 +4701,8 @@ var re = (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, Kt(this.virtualScrollConfig))), r = new c(r, t), r;
+		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Lt(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-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 };
+export { ke as BezierEdgeShape, An as CanvasBuilder, Rt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, ze as InteractiveEdgeError, Be as InteractiveEdgeShape, Ve as MidpointEdgeShape, Me as OrthogonalEdgeShape, Ae as StraightEdgeShape };