@html-graph/html-graph 9.1.0 → 9.2.0

package/dist/html-graph.min.js

@@ -522,7 +522,7 @@ var e = /* @__PURE__ */ function(e) {
 		if (t.from !== void 0 || t.to !== void 0) {
 			if (t.from !== void 0 && !this.hasPort(t.from)) throw new p(m.updateNonexistentEdgeSource(e, t.from));
 			if (t.to !== void 0 && !this.hasPort(t.to)) throw new p(m.updateNonexistentEdgeTarget(e, t.to));
-			let n = this.getEdge(e), r = n.payload;
+			let n = this.getEdge(e), { payload: r } = n;
 			this.removeEdgeInternal(e), this.addEdgeInternal({
 				id: e,
 				from: t.from ?? n.from,
@@ -531,7 +531,7 @@ var e = /* @__PURE__ */ function(e) {
 				priority: r.priority
 			});
 		}
-		let n = this.edges.get(e);
+		let n = this.getEdge(e);
 		t.shape !== void 0 && (n.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (n.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
 	}
 	getAllEdgeIds() {
@@ -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, n) => {
+}, ee = (e, t, n) => {
 	let r = t;
 	for (; r !== null;) {
 		let t = n(e.findPortIdsByElement(r));
@@ -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, n) => {
-	let r = ne(document, t);
+var ne = (e, t, n) => {
+	let r = te(document, t);
 	for (let t of r) {
-		let r = te(e, t, n);
+		let r = ee(e, t, n);
 		if (r.status === "portFound") return r.portId;
 		if (r.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, n) => {
 			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, n) => {
 		}, 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, n) => {
 		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, n) => {
 		}, 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, n) => {
 			`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, n) => {
 		});
 	}
 	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, n) => {
 			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, n) => {
 	}
 	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, n) => {
 					e,
 					a
 				],
-				midpoint: N([
+				midpoint: P([
 					n,
 					e,
 					i
@@ -1070,7 +1070,7 @@ var re = (e, t, n) => {
 				i,
 				a
 			],
-			midpoint: N([
+			midpoint: P([
 				n,
 				t,
 				o,
@@ -1094,7 +1094,7 @@ var re = (e, t, n) => {
 				o,
 				a
 			],
-			midpoint: N([
+			midpoint: P([
 				n,
 				t,
 				o,
@@ -1114,46 +1114,46 @@ var re = (e, t, n) => {
 			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 { 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 = {
@@ -1163,7 +1163,7 @@ var re = (e, t, n) => {
 		this.midpoint = {
 			x: (v.x + b.x) / 2,
 			y: (v.y + b.y) / 2
-		}, this.path = j([
+		}, this.path = M([
 			f,
 			_,
 			v,
@@ -1172,18 +1172,18 @@ var re = (e, t, n) => {
 			p
 		], d);
 	}
-}, _e = 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,
@@ -1196,28 +1196,28 @@ var re = (e, t, n) => {
 		};
 	}
 	createArrowPoint(e, t, n, r) {
-		return e ? E({
+		return e ? D({
 			x: n.x + r,
 			y: n.y
 		}, t, n) : n;
 	}
-}, ve = 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
@@ -1226,9 +1226,9 @@ var re = (e, t, n) => {
 			linePoint: m,
 			dir: i
 		});
-		this.path = j(h.points, s), this.midpoint = h.midpoint;
+		this.path = M(h.points, s), this.midpoint = h.midpoint;
 	}
-}, ye = class {
+}, ve = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1265,19 +1265,19 @@ var re = (e, t, n) => {
 				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
 		};
 	}
-}, be = class {
+}, ye = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1298,7 +1298,7 @@ var re = (e, t, n) => {
 				x: d,
 				y: 0
 			}
-		].map((e) => E(e, i, {
+		].map((e) => D(e, i, {
 			x: 0,
 			y: 0
 		})).map((e) => ({
@@ -1312,30 +1312,30 @@ var re = (e, t, n) => {
 		].join(" "), h = `M ${a.x} ${a.y} L ${p[0].x} ${p[0].y} `;
 		this.path = `${o ? "" : h}${m}`, this.midpoint = p[3];
 	}
-}, xe = (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;
-}, Se = 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 = xe(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,
 			{
@@ -1350,30 +1350,30 @@ var re = (e, t, n) => {
 			f
 		], l);
 	}
-}, Ce = (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;
-}, we = 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 = Ce(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,
 			{
@@ -1388,25 +1388,25 @@ var re = (e, t, n) => {
 			f
 		], u);
 	}
-}, Te = 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 Se(e);
+			let t = new xe(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
 		if (!t && !n) {
-			let t = new we(e);
+			let t = new Ce(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
-		let r = new ve(e);
+		let r = new _e(e);
 		this.path = r.path, this.midpoint = r.midpoint;
 	}
-}, P = Object.freeze({
+}, F = Object.freeze({
 	color: "#777777",
 	width: 1,
 	arrowLength: 20,
@@ -1428,10 +1428,10 @@ var re = (e, t, n) => {
 	curvature: 90,
 	interactiveWidth: 10,
 	portOffset: 0
-}), Ee = (e) => ({
+}), Te = (e) => ({
 	x: Math.cos(e),
 	y: Math.sin(e)
-}), F = class {
+}), I = class {
 	params;
 	element;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -1442,17 +1442,17 @@ var re = (e, t, n) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = ce(e.color), this.element.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		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.element, {
+		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 = Ee(t.from.direction), l = Ee(t.to.direction), u = {
+		let c = Te(t.from.direction), l = Te(t.to.direction), u = {
 			x: -l.x,
 			y: -l.y
 		}, d;
@@ -1476,7 +1476,7 @@ var re = (e, t, n) => {
 			targetArrowPath: m
 		});
 	}
-}, De = (e) => (t) => {
+}, Ee = (e) => (t) => {
 	let n = [
 		{
 			x: 0,
@@ -1490,7 +1490,7 @@ var re = (e, t, n) => {
 			x: t.arrowLength,
 			y: -e.radius
 		}
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1498,7 +1498,7 @@ var re = (e, t, n) => {
 		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`;
-}, Oe = (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,
@@ -1512,7 +1512,7 @@ var re = (e, t, n) => {
 			x: o,
 			y: s
 		}
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1520,8 +1520,8 @@ var re = (e, t, n) => {
 		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}`}`;
-}, ke = (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
 	}, {
@@ -1540,7 +1540,7 @@ var re = (e, t, n) => {
 			y: -i.y
 		},
 		i
-	].map((e) => E(e, t.direction, {
+	].map((e) => D(e, t.direction, {
 		x: 0,
 		y: 0
 	})).map((e) => ({
@@ -1548,18 +1548,18 @@ var re = (e, t, n) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${a[0].x} ${a[0].y}`} ${`A ${r} ${r} 0 0 1 ${a[1].x} ${a[1].y}`} ${`A ${n} ${n} 0 0 1 ${a[2].x} ${a[2].y}`} ${`A ${r} ${r} 0 0 1 ${a[0].x} ${a[0].y}`}`;
-}, I = (e) => {
+}, L = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "triangle": return De({ radius: e.radius ?? P.polygonArrowRadius });
-		case "arc": return Oe({ radius: e.radius ?? P.circleArrowRadius });
-		default: return ke({
-			smallRadius: e.smallRadius ?? P.wedgeArrowSmallRadius,
-			angle: e.angle ?? P.wedgeArrowAngle,
-			radius: e.radius ?? P.wedgeArrowRadius
+		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
 		});
 	}
-}, Ae = class {
+}, ke = class {
 	element;
 	group;
 	line;
@@ -1575,7 +1575,7 @@ var re = (e, t, n) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new be({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		radius: this.portCycleRadius,
@@ -1583,7 +1583,7 @@ var re = (e, t, n) => {
 		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,
@@ -1595,7 +1595,7 @@ var re = (e, t, n) => {
 		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,
@@ -1606,10 +1606,10 @@ var re = (e, t, n) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.curvature = e?.curvature ?? P.curvature, this.portCycleRadius = e?.cycleRadius ?? P.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? P.smallCycleRadius, this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
-			color: e?.color ?? P.color,
-			width: e?.width ?? P.width,
-			arrowRenderer: I(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.curvature = e?.curvature ?? F.curvature, this.portCycleRadius = e?.cycleRadius ?? F.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? F.smallCycleRadius, this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
+			color: e?.color ?? F.color,
+			width: e?.width ?? F.width,
+			arrowRenderer: L(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1622,7 +1622,7 @@ var re = (e, t, n) => {
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, je = class {
+}, Ae = class {
 	element;
 	group;
 	line;
@@ -1638,7 +1638,7 @@ var re = (e, t, n) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ye({
+	createCyclePath = (e, t, n) => new ve({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1647,7 +1647,7 @@ var re = (e, t, n) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new ge({
+	createDetourPath = (e, t, n, r) => new he({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1660,7 +1660,7 @@ var re = (e, t, n) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new _e({
+	createLinePath = (e, t, n, r) => new ge({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1672,12 +1672,12 @@ var re = (e, t, n) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
-		let t = e?.roundness ?? P.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
-			color: e?.color ?? P.color,
-			width: e?.width ?? P.width,
-			arrowRenderer: I(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
+		let t = e?.roundness ?? F.roundness;
+		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
+			color: e?.color ?? F.color,
+			width: e?.width ?? F.width,
+			arrowRenderer: L(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1690,10 +1690,10 @@ var re = (e, t, n) => {
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, Me = (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;
-}, Ne = class {
+}, Me = class {
 	element;
 	group;
 	line;
@@ -1708,7 +1708,7 @@ var re = (e, t, n) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new ye({
+	createCyclePath = (e, t, n) => new ve({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1717,7 +1717,7 @@ var re = (e, t, n) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new Te({
+	createDetourPath = (e, t, n, r) => new we({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1729,7 +1729,7 @@ var re = (e, t, n) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new ve({
+	createLinePath = (e, t, n, r) => new _e({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1741,12 +1741,12 @@ var re = (e, t, n) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
-		let t = e?.roundness ?? P.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
-			color: e?.color ?? P.color,
-			width: e?.width ?? P.width,
-			arrowRenderer: I(e?.arrowRenderer ?? {}),
+		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,
@@ -1762,18 +1762,18 @@ var re = (e, t, n) => {
 			category: r,
 			from: {
 				...t,
-				direction: Me(t.direction)
+				direction: je(t.direction)
 			},
 			to: {
 				...n,
-				direction: Me(n.direction)
+				direction: je(n.direction)
 			}
 		});
 	}
-}, Pe = (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);
-}, Fe = (e) => typeof e == "number" ? () => e : e === "box" ? Pe : e, Ie = P.portOffset, L = class {
+}, 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;
@@ -1788,11 +1788,11 @@ var re = (e, t, n) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? P.color, this.width = e?.width ?? P.width, this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowRenderer = I(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Fe(e?.sourceOffset ?? Ie), this.targetOffsetFn = Fe(e?.targetOffset ?? Ie), this.element = ce(this.color), this.element.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		[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.element, {
+		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,
@@ -1890,43 +1890,43 @@ var re = (e, t, n) => {
 			targetArrowPath: n
 		});
 	}
-}, Le = () => {
+}, Ie = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	return e.style.pointerEvents = "auto", e.style.cursor = "pointer", e;
-}, Re = (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;
-}, ze = (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;
-}, Be = class extends Error {
+}, ze = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InteractiveEdgeError";
 	}
-}, Ve = class e {
+}, Be = class e {
 	baseEdge;
 	element;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	handle = Le();
+	handle = Ie();
 	onAfterRender;
 	interactiveLine;
 	interactiveSourceArrow = null;
 	interactiveTargetArrow = null;
 	constructor(t, n) {
-		if (this.baseEdge = t, t instanceof e) throw new Be("interactive edge can be configured only once");
+		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 ?? P.interactiveWidth;
-		this.interactiveLine = Re(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ze(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ze(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
+		let r = n?.distance ?? F.interactiveWidth;
+		this.interactiveLine = Le(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Re(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Re(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
 			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);
 	}
-}, He = class {
+}, Ve = class {
 	baseShape;
 	midpointElement;
 	group;
@@ -1944,7 +1944,7 @@ var re = (e, t, n) => {
 	render(e) {
 		this.baseShape.render(e);
 	}
-}, Ue = class {
+}, He = class {
 	graphStore;
 	onAfterNodeAdded;
 	onAfterNodeUpdated;
@@ -2043,7 +2043,7 @@ var re = (e, t, n) => {
 	getNodeAdjacentEdgeIds(e) {
 		return this.graphStore.getNodeAdjacentEdgeIds(e);
 	}
-}, R = class {
+}, z = class {
 	checkExists;
 	counter = 0;
 	constructor(e) {
@@ -2057,13 +2057,13 @@ var re = (e, t, n) => {
 	reset() {
 		this.counter = 0;
 	}
-}, We = class {
+}, Ue = class {
 	graphStore;
 	htmlView;
 	params;
-	nodeIdGenerator = new R((e) => this.graphStore.hasNode(e));
-	portIdGenerator = new R((e) => this.graphStore.hasPort(e));
-	edgeIdGenerator = new R((e) => this.graphStore.hasEdge(e));
+	nodeIdGenerator = new z((e) => this.graphStore.hasNode(e));
+	portIdGenerator = new z((e) => this.graphStore.hasPort(e));
+	edgeIdGenerator = new z((e) => this.graphStore.hasEdge(e));
 	onAfterNodeAdded = (e) => {
 		this.htmlView.attachNode(e);
 	};
@@ -2170,13 +2170,13 @@ var re = (e, t, n) => {
 	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();
 	}
-}, Ge = (e) => {
+}, We = (e) => {
 	queueMicrotask(() => {
 		e();
 	});
-}, z = (e) => {
+}, B = (e) => {
 	e();
-}, Ke = class {
+}, Ge = class {
 	viewportStore;
 	onBeforeUpdated;
 	onAfterUpdated;
@@ -2199,7 +2199,7 @@ var re = (e, t, n) => {
 	createViewportCoords(e) {
 		return this.viewportStore.createViewportCoords(e);
 	}
-}, qe = (e, t) => Symbol.iterator in e ? {
+}, Ke = (e, t) => Symbol.iterator in e ? {
 	minContentScale: t.focus.minContentScale,
 	nodes: e,
 	contentPadding: t.focus.contentPadding,
@@ -2209,15 +2209,15 @@ var re = (e, t, n) => {
 	nodes: e.nodes ?? [],
 	contentPadding: e.contentPadding ?? t.focus.contentPadding,
 	animationDuration: e.animationDuration ?? t.focus.animationDuration
-}, Je = (e, t, n) => ({
+}, qe = (e, t, n) => ({
 	scale: e.scale,
 	x: e.x + e.scale * t,
 	y: e.y + e.scale * n
-}), Ye = (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
-}), Xe = class {
+}), Ye = class {
 	graphStore;
 	viewportStore;
 	params;
@@ -2235,16 +2235,16 @@ var re = (e, t, n) => {
 		let { width: n, height: r } = this.viewportStore.getDimensions(), i = {
 			x: n / 2,
 			y: r / 2
-		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = Je(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
+		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = qe(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
 		if (c !== void 0) {
 			let e = 1 / c;
-			s = Ye(s, e / a.scale, i.x, i.y);
+			s = 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 = qe(e ?? {}, this.params);
+		let t = Ke(e ?? {}, this.params);
 		this.params.focus.schedule(() => {
 			this.navigate(t);
 		});
@@ -2286,25 +2286,25 @@ var re = (e, t, n) => {
 		};
 		this.win.requestAnimationFrame(a);
 	}
-}, Ze = (e, t, n) => {
+}, Xe = (e, t, n) => {
 	let r = new h();
-	return new d(new Ue(r), new Ke(t), new We(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: {
-			shapeFactory: () => new L(),
+			shapeFactory: () => new R(),
 			priorityFn: () => 0
 		},
 		ports: { direction: 0 }
-	}), new Xe(r, t, { focus: {
+	}), new Ye(r, t, { focus: {
 		contentPadding: 0,
 		minContentScale: 0,
-		schedule: z,
+		schedule: B,
 		animationDuration: 0
 	} }, n));
-}, B = Symbol(), Qe = class e {
+}, V = Symbol(), Ze = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -2325,7 +2325,7 @@ var re = (e, t, n) => {
 		i !== null && this.params.onPointerDownVerifier(i, {
 			x: t.clientX,
 			y: t.clientY
-		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
 	};
 	onWindowMouseMove = (e) => {
 		if (!this.pointInsideVerifier.verify(e.clientX, e.clientY)) {
@@ -2350,7 +2350,7 @@ var re = (e, t, n) => {
 		this.params.onPointerDownVerifier(i, {
 			x: n.clientX,
 			y: n.clientY
-		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
 	};
 	onWindowTouchMove = (e) => {
 		let t = e.touches[0];
@@ -2398,16 +2398,16 @@ var re = (e, t, n) => {
 	removeWindowTouchListeners() {
 		this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
 	}
-}, V = Symbol(), $e = class {
+}, H = Symbol(), Qe = class {
 	has(e, t) {
-		let n = e[V];
+		let n = e[H];
 		return n !== void 0 && n.has(t);
 	}
 	tag(e, t) {
-		let n = e, r = n[V];
-		r === void 0 ? n[V] = /* @__PURE__ */ new Set([t]) : r.add(t);
+		let n = e, r = n[H];
+		r === void 0 ? n[H] = /* @__PURE__ */ new Set([t]) : r.add(t);
 	}
-}, H = Symbol(), U = class {
+}, U = Symbol(), W = class {
 	window;
 	pointInsideVerifier;
 	onSelected;
@@ -2488,10 +2488,10 @@ var re = (e, t, n) => {
 		let r = Math.sqrt(e * e + t * t);
 		this.movedDistance += r, this.movedDistance > this.movementThreshold && n();
 	}
-}, W = (e, t) => ({
+}, G = (e, t) => ({
 	from: e.isDirect ? e.staticPortId : t,
 	to: e.isDirect ? t : e.staticPortId
-}), et = class {
+}), $e = class {
 	graph;
 	connectionAllowedVerifier;
 	constructor(e, t) {
@@ -2502,7 +2502,7 @@ var re = (e, t, n) => {
 		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 = W(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,
@@ -2511,7 +2511,7 @@ var re = (e, t, n) => {
 			v < n && (n = v, t = o);
 		}), t;
 	}
-}, tt = class {
+}, et = class {
 	direction;
 	constructor(e) {
 		this.direction = e;
@@ -2519,7 +2519,7 @@ var re = (e, t, n) => {
 	resolve() {
 		return this.direction;
 	}
-}, G = (e) => e.length > 0 ? e[0] : null, nt = class e {
+}, K = (e) => e.length > 0 ? e[0] : null, tt = class e {
 	canvas;
 	element;
 	window;
@@ -2542,12 +2542,12 @@ var re = (e, t, n) => {
 		t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
 	};
 	onMouseDown = (e) => {
-		if (this.eventTagger.has(e, B)) return;
+		if (this.eventTagger.has(e, V)) return;
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
 		let n = e.currentTarget, r = this.graph.findNodeIdByElement(n), i = this.graph.getNode(r);
 		if (!this.params.nodeDragVerifier(r)) return;
-		this.eventTagger.tag(e, B), this.params.onNodeDragStarted(r);
+		this.eventTagger.tag(e, V), this.params.onNodeDragStarted(r);
 		let a = this.calculateContentPoint({
 			x: t.clientX,
 			y: t.clientY
@@ -2556,15 +2556,15 @@ var re = (e, t, n) => {
 			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, B)) return;
+		if (this.eventTagger.has(e, V)) return;
 		let t = e;
 		if (t.touches.length !== 1) return;
 		let n = t.touches[0], r = e.currentTarget, i = this.canvas.graph.findNodeIdByElement(r), a = this.graph.getNode(i);
 		if (!this.params.nodeDragVerifier(i)) return;
-		this.eventTagger.tag(e, B);
+		this.eventTagger.tag(e, V);
 		let o = this.calculateContentPoint({
 			x: n.clientX,
 			y: n.clientY
@@ -2641,7 +2641,7 @@ var re = (e, t, n) => {
 		}
 	}
 	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);
@@ -2678,7 +2678,7 @@ var re = (e, t, n) => {
 		let e = this.grabbedNodeState.nodeId;
 		this.graph.hasNode(e) && this.params.onNodeDragFinished(e), this.grabbedNodeState = null;
 	}
-}, K = (e) => {
+}, q = (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);
@@ -2689,7 +2689,7 @@ var re = (e, t, n) => {
 		touchesCnt: n,
 		touches: t
 	};
-}, rt = class e {
+}, nt = class e {
 	canvas;
 	element;
 	window;
@@ -2704,7 +2704,7 @@ var re = (e, t, n) => {
 		this.removeMouseDragListeners(), this.removeTouchDragListeners();
 	};
 	onMouseDown = (e) => {
-		this.eventTagger.has(e, B) || this.params.mouseDownEventVerifier(e) && (C(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
+		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);
@@ -2726,16 +2726,16 @@ var re = (e, t, n) => {
 		}, this.params.scaleWheelFinishTimeout);
 	};
 	onTouchStart = (e) => {
-		if (!this.eventTagger.has(e, B)) {
+		if (!this.eventTagger.has(e, V)) {
 			if (this.prevTouches !== null) {
-				this.prevTouches = K(e);
+				this.prevTouches = q(e);
 				return;
 			}
-			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();
+			this.prevTouches = q(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 = K(e);
+		let t = q(e);
 		if (!t.touches.every((e) => this.pointInsideVerifier.verify(e[0], e[1]))) {
 			this.stopTouchDrag();
 			return;
@@ -2751,7 +2751,7 @@ var re = (e, t, n) => {
 		this.prevTouches = t;
 	};
 	onWindowTouchFinish = (e) => {
-		e.touches.length > 0 ? this.prevTouches = K(e) : this.stopTouchDrag();
+		e.touches.length > 0 ? this.prevTouches = q(e) : this.stopTouchDrag();
 	};
 	preventWheelScaleListener = (e) => {
 		e.preventDefault();
@@ -2765,7 +2765,7 @@ var re = (e, t, n) => {
 		new e(t, n, r, i, a, o);
 	}
 	moveViewport(e, t) {
-		let n = this.viewport.getViewportMatrix(), r = Je(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+		let n = this.viewport.getViewportMatrix(), r = qe(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
 			prevTransform: n,
 			nextTransform: r,
 			viewport: {
@@ -2776,7 +2776,7 @@ var re = (e, t, n) => {
 		this.performTransform(o);
 	}
 	scaleViewport(e, t, n) {
-		let r = this.canvas.viewport.getViewportMatrix(), i = Ye(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+		let r = this.canvas.viewport.getViewportMatrix(), i = Je(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
 			prevTransform: r,
 			nextTransform: i,
 			viewport: {
@@ -2787,7 +2787,7 @@ var re = (e, t, n) => {
 		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);
@@ -2818,7 +2818,7 @@ var re = (e, t, n) => {
 		});
 		this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(r), this.params.onResizeTransformFinished();
 	}
-}, it = class e {
+}, rt = class e {
 	canvas;
 	element;
 	window;
@@ -2871,7 +2871,7 @@ var re = (e, t, n) => {
 				this.scheduleLoadAreaAroundViewport(), r.onTransformFinished();
 			}
 		};
-		rt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+		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);
@@ -2896,21 +2896,21 @@ var re = (e, t, n) => {
 			height: u
 		});
 	}
-}, at = () => {
+}, it = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, ot = () => {
+}, at = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	return e.setAttribute("fill", "url(#pattern)"), e;
-}, st = () => {
+}, ot = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
 	return e.setAttribute("id", "pattern"), e;
-}, ct = class e {
+}, st = class e {
 	canvas;
 	backgroundHost;
-	svg = at();
-	patternRenderingRectangle = ot();
-	pattern = st();
+	svg = it();
+	patternRenderingRectangle = at();
+	pattern = ot();
 	patternContent;
 	tileWidth;
 	tileHeight;
@@ -2945,7 +2945,7 @@ var re = (e, t, n) => {
 			this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${r}`);
 		}
 	}
-}, lt = class e {
+}, ct = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -2959,7 +2959,7 @@ var re = (e, t, n) => {
 		this.params.onAfterEdgeCreated(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Xe(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -2979,7 +2979,7 @@ var re = (e, t, n) => {
 			},
 			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		Qe.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);
@@ -2992,7 +2992,7 @@ var re = (e, t, n) => {
 			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";
@@ -3004,30 +3004,33 @@ var re = (e, t, n) => {
 			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, this.params.releasedPortIdResolver);
+		let t = ne(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = W(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
-			from: n.from,
-			to: n.to
-		});
-		r && i !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(i), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+		let n = G(this.edgeInProgress, t);
+		if (this.params.connectionAllowedVerifier(n)) {
+			let e = this.params.connectionPreprocessor({
+				from: n.from,
+				to: n.to
+			});
+			this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(e), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
+		} else this.params.onEdgeCreationPrevented(n);
 	}
 	moveDraggingPort(e) {
 		let t = this.overlayLayer.getBoundingClientRect(), n = this.canvas.viewport.createContentCoords({
@@ -3037,12 +3040,12 @@ var re = (e, t, n) => {
 			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 });
 	}
-}, ut = class e {
+}, lt = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3057,7 +3060,7 @@ var re = (e, t, n) => {
 		this.params.onAfterEdgeReattached(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Xe(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3080,7 +3083,7 @@ var re = (e, t, n) => {
 			},
 			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		Qe.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);
@@ -3111,21 +3114,21 @@ var re = (e, t, n) => {
 			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
@@ -3142,14 +3145,14 @@ var re = (e, t, n) => {
 			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, this.params.releasedPortIdResolver);
-		if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
+		let t = ne(this.canvas.graph, e, this.params.releasedPortIdResolver);
+		if (this.overlayCanvas.removeEdge(E.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
 				id: e.id,
@@ -3160,7 +3163,7 @@ var re = (e, t, n) => {
 			});
 			return;
 		}
-		let { from: n, to: r } = W(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,
@@ -3182,7 +3185,7 @@ var re = (e, t, n) => {
 			});
 		}
 	}
-}, dt = class e {
+}, ut = class e {
 	applier;
 	trigger;
 	constructor(e, t) {
@@ -3193,7 +3196,7 @@ var re = (e, t, n) => {
 	static configure(t, n) {
 		new e(t, n);
 	}
-}, ft = class e {
+}, dt = class e {
 	graph;
 	applier;
 	defererFn;
@@ -3218,7 +3221,7 @@ var re = (e, t, n) => {
 	scheduleApply() {
 		this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
 	}
-}, pt = class {
+}, ft = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3234,23 +3237,23 @@ var re = (e, t, n) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, mt = class {
+}, pt = class {
 	static configure(e, t) {
-		let n = t.applyOn, r = new pt(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":
-				dt.configure(r, n.trigger);
+				ut.configure(r, n.trigger);
 				break;
 			case "topologyChangeSchedule":
-				ft.configure(e.graph, r, n.schedule);
+				dt.configure(e.graph, r, n.schedule);
 				break;
 		}
 	}
-}, ht = class {
+}, mt = class {
 	win;
 	callback;
 	previousTimeStamp = void 0;
@@ -3265,7 +3268,7 @@ var re = (e, t, n) => {
 	constructor(e, t) {
 		this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
 	}
-}, gt = class {
+}, ht = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3282,29 +3285,29 @@ var re = (e, t, n) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, _t = class e {
+}, gt = class e {
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.applier = new gt(e, t.algorithm, {
+		this.applier = new ht(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new ht(n, this.step);
+		}), new mt(n, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
 	}
-}, vt = class e {
+}, _t = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
 	onNodeSelected;
-	eventHandledTag = H;
+	eventHandledTag = U;
 	onAfterNodeAdded = (e) => {
 		let { element: t } = this.canvas.graph.getNode(e);
 		this.configurator.enable(t);
@@ -3320,7 +3323,7 @@ var re = (e, t, n) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findNodeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onNodeSelected(n);
@@ -3333,13 +3336,13 @@ var re = (e, t, n) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, yt = class e {
+}, vt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
-	eventHandledTag = H;
+	eventHandledTag = U;
 	onEdgeSelected;
 	onAfterEdgeAdded = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
@@ -3356,7 +3359,7 @@ var re = (e, t, n) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findEdgeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onEdgeSelected(n);
@@ -3369,7 +3372,7 @@ var re = (e, t, n) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, bt = class e {
+}, yt = class e {
 	canvas;
 	element;
 	window;
@@ -3377,9 +3380,9 @@ var re = (e, t, n) => {
 	eventTagger;
 	configurator;
 	onCanvasSelected;
-	eventHandledTag = H;
+	eventHandledTag = U;
 	constructor(e, t, n, r, i, a) {
-		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				this.eventTagger.has(t, this.eventHandledTag) || this.onCanvasSelected();
 			},
@@ -3393,29 +3396,107 @@ var re = (e, t, n) => {
 	static configure(t, n, r, i, a, o) {
 		new e(t, n, r, i, a, o);
 	}
-}, xt = () => {
+}, bt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, St = () => {
+}, xt = () => {
 	let e = document.createElement("div");
-	return e.style.position = "absolute", e.style.inset = "0", e;
+	return e.style.position = "absolute", e;
+}, St = class e {
+	canvas;
+	mainElement;
+	overlayLayer;
+	pointInsideVerifier;
+	eventTagger;
+	win;
+	params;
+	host = bt();
+	selectionRectangleWrapper = xt();
+	initialContentPoint = null;
+	draggingViewportPoint = null;
+	eventHandledTag = V;
+	onAfterViewportUpdated = () => {
+		this.updateSelectionRectangle();
+	};
+	onCanvasMouseDown = (e) => {
+		let t = e;
+		if (!this.params.mouseDownEventVerifier(t) || this.eventTagger.has(e, this.eventHandledTag)) return;
+		this.params.onSelectionStarted();
+		let n = this.mainElement.getBoundingClientRect(), r = {
+			x: t.clientX - n.x,
+			y: t.clientY - n.y
+		};
+		this.initialContentPoint = this.canvas.viewport.createContentCoords(r), this.draggingViewportPoint = r, this.updateSelectionRectangle(), this.host.appendChild(this.selectionRectangleWrapper), this.win.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.win.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 });
+	};
+	onWindowMouseMove = (e) => {
+		let t = e;
+		if (!this.pointInsideVerifier.verify(t.clientX, t.clientY)) {
+			this.removeMouseListeners(), this.interruptSelection();
+			return;
+		}
+		let n = this.mainElement.getBoundingClientRect(), r = {
+			x: t.clientX - n.x,
+			y: t.clientY - n.y
+		};
+		this.draggingViewportPoint = r, this.updateSelectionRectangle();
+		let i = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.params.onSelectionChange(i);
+	};
+	onWindowMouseUp = (e) => {
+		let t = e;
+		this.params.mouseUpEventVerifier(t) && (this.removeMouseListeners(), this.finishSelection());
+	};
+	constructor(e, t, n, r, i, a, o) {
+		this.canvas = e, this.mainElement = t, this.overlayLayer = n, this.pointInsideVerifier = r, this.eventTagger = i, this.win = a, this.params = o, this.overlayLayer.appendChild(this.host), this.selectionRectangleWrapper.appendChild(this.params.rectangleElement), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.mainElement.addEventListener("mousedown", this.onCanvasMouseDown, { passive: !0 }), this.canvas.onBeforeDestroy.subscribe(() => {
+			this.mainElement.removeEventListener("mousedown", this.onCanvasMouseDown), this.removeMouseListeners();
+		});
+	}
+	static configure(t, n, r, i, a, o, s) {
+		new e(t, n, r, i, a, o, s);
+	}
+	updateSelectionRectangle() {
+		if (this.initialContentPoint === null || this.draggingViewportPoint === null) return;
+		let e = this.canvas.viewport.createViewportCoords(this.initialContentPoint), t = this.draggingViewportPoint, n = Math.min(e.x, t.x), r = Math.min(e.y, t.y), i = Math.abs(t.x - e.x), a = Math.abs(t.y - e.y), { style: o } = this.selectionRectangleWrapper;
+		o.left = `${n}px`, o.top = `${r}px`, o.width = `${i}px`, o.height = `${a}px`;
+	}
+	removeMouseListeners() {
+		this.win.removeEventListener("mousemove", this.onWindowMouseMove), this.win.removeEventListener("mouseup", this.onWindowMouseUp);
+	}
+	finishSelection() {
+		let e = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection(), this.params.onSelectionFinished(e);
+	}
+	interruptSelection() {
+		let e = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection(), this.params.onSelectionInterrupted(e);
+	}
+	terminateSelection() {
+		this.host.removeChild(this.selectionRectangleWrapper), this.initialContentPoint = null, this.draggingViewportPoint = null;
+	}
 }, Ct = () => {
-	let e = St();
-	return e.style.pointerEvents = "none", e;
-}, wt = class {
+	let e = document.createElement("div");
+	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
+}, J = (e) => {
+	let t = document.createElement("div");
+	return t.style.position = "absolute", t.style.inset = "0", t.style.zIndex = `${e}`, t;
+}, wt = (e) => {
+	let t = J(e);
+	return t.style.pointerEvents = "none", t;
+}, Tt = class {
 	element;
-	background = St();
-	main = St();
-	overlayConnectablePorts = Ct();
-	overlayDraggableEdges = Ct();
-	host = xt();
+	background = J(0);
+	main = J(1);
+	overlayConnectablePorts = wt(1);
+	overlayDraggableEdges = wt(1);
+	overlayRectangularSelection = wt(2);
+	host = Ct();
 	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);
+		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), this.host.appendChild(this.overlayRectangularSelection);
 	}
 	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);
+		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.host.removeChild(this.overlayRectangularSelection), this.element.removeChild(this.host);
 	}
-}, q = Object.freeze({
+}, Y = Object.freeze({
 	seed: "HTMLGraph is awesome",
 	maxTimeDeltaSec: .01,
 	nodeCharge: 1e5,
@@ -3424,19 +3505,15 @@ var re = (e, t, n) => {
 	edgeStiffness: 1e3,
 	dtSec: .01,
 	maxIterations: 1e3,
-	convergenceVelocity: 10,
+	stopVelocity: 10,
 	maxForce: 1e7,
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
-}), J = Object.freeze({
-	mouseDownEventVerifier: (e) => e.button === 0,
-	mouseUpEventVerifier: (e) => e.button === 0,
-	movementThreshold: 10
-}), Y = () => {}, Tt = (e, t, n) => e === "nearest-connectable-port" ? new et(t, n) : typeof e == "number" ? new tt(e) : new tt(void 0), Et = (e) => {
+}), X = () => {}, Et = (e, t, n) => e === "nearest-connectable-port" ? new $e(t, n) : typeof e == "number" ? new et(e) : new et(void 0), Dt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "straight": return () => new je({
+		case "straight": return () => new Ae({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3449,7 +3526,7 @@ var re = (e, t, n) => {
 			detourDistance: e.detourDistance,
 			detourDirection: e.detourDirection
 		});
-		case "orthogonal": return () => new Ne({
+		case "orthogonal": return () => new Me({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3461,7 +3538,7 @@ var re = (e, t, n) => {
 			roundness: e.roundness,
 			detourDistance: e.detourDistance
 		});
-		case "direct": return () => new L({
+		case "direct": return () => new R({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3471,7 +3548,7 @@ var re = (e, t, n) => {
 			sourceOffset: e.sourceOffset,
 			targetOffset: e.targetOffset
 		});
-		default: return () => new Ae({
+		default: return () => new ke({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3485,21 +3562,21 @@ var re = (e, t, n) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Dt = (e) => {
-	let t = e.nodeDragVerifier ?? (() => !0), n = e.moveOnTop !== !1, r = e.moveEdgesOnTop !== !1 && n, i = e.mouse?.dragCursor, a = i === void 0 ? "grab" : i, o = e.mouse?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e.mouse?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c;
+}, Ot = (e) => e.button === 0 && e.ctrlKey, Z = (e) => e.button === 0, Q = (e) => e.button === 0 && !e.ctrlKey, kt = (e) => {
+	let t = e.moveOnTop !== !1;
 	return {
-		moveOnTop: n,
-		moveEdgesOnTop: r,
-		dragCursor: a,
+		moveOnTop: t,
+		moveEdgesOnTop: e.moveEdgesOnTop !== !1 && t,
+		dragCursor: e.mouse?.dragCursor ?? "grab",
 		gridSize: e.gridSize ?? null,
-		mouseDownEventVerifier: s,
-		mouseUpEventVerifier: l,
-		onNodeDragStarted: e.events?.onNodeDragStarted ?? Y,
-		onNodeDrag: e.events?.onNodeDrag ?? Y,
-		nodeDragVerifier: t,
-		onNodeDragFinished: e.events?.onNodeDragFinished ?? Y
+		mouseDownEventVerifier: e.mouse?.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouse?.mouseUpEventVerifier ?? Z,
+		onNodeDragStarted: e.events?.onNodeDragStarted ?? X,
+		onNodeDrag: e.events?.onNodeDrag ?? X,
+		nodeDragVerifier: e.nodeDragVerifier ?? (() => !0),
+		onNodeDragFinished: e.events?.onNodeDragFinished ?? X
 	};
-}, Ot = (e) => {
+}, At = (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;
@@ -3513,7 +3590,7 @@ var re = (e, t, n) => {
 			y: o
 		};
 	};
-}, kt = (e) => {
+}, jt = (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;
@@ -3533,108 +3610,103 @@ var re = (e, t, n) => {
 			y: s
 		};
 	};
-}, At = (e) => (t) => e.reduce((e, n) => n({
+}, Mt = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
 	viewport: t.viewport
-}), t.nextTransform), jt = (e) => {
+}), t.nextTransform), Nt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return kt({
+		case "scale-limit": return jt({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Ot({
+		case "shift-limit": return At({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, Mt = (e) => {
-	let t = e?.scale?.mouseWheelSensitivity, n = t === void 0 ? 1.2 : t, r = e?.transformPreprocessor, i;
-	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? At(r.map((e) => jt(e))) : jt(r);
-	let a = e?.pan?.cursor === void 0 ? "grab" : e.pan.cursor, o = e?.pan?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.pan?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
-	return {
-		wheelSensitivity: n,
-		onTransformStarted: e?.events?.onTransformStarted ?? Y,
-		onTransformFinished: e?.events?.onTransformFinished ?? Y,
-		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? Y,
-		onTransformChange: e?.events?.onTransformChange ?? Y,
-		transformPreprocessor: i,
-		shiftCursor: a,
-		mouseDownEventVerifier: s,
-		mouseUpEventVerifier: l,
-		mouseWheelEventVerifier: d,
+}, Pt = (e) => {
+	let t = e?.transformPreprocessor, n;
+	return n = t === void 0 ? (e) => e.nextTransform : Array.isArray(t) ? Mt(t.map((e) => Nt(e))) : Nt(t), {
+		wheelSensitivity: e?.scale?.mouseWheelSensitivity ?? 1.2,
+		onTransformStarted: e?.events?.onTransformStarted ?? X,
+		onTransformFinished: e?.events?.onTransformFinished ?? X,
+		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? X,
+		onTransformChange: e?.events?.onTransformChange ?? X,
+		transformPreprocessor: n,
+		shiftCursor: e?.pan?.cursor ?? "grab",
+		mouseDownEventVerifier: e?.pan?.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e?.pan?.mouseUpEventVerifier ?? Z,
+		mouseWheelEventVerifier: e?.scale?.mouseWheelEventVerifier ?? (() => !0),
 		scaleWheelFinishTimeout: e?.scale?.wheelFinishTimeout ?? 500,
-		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? Y,
-		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? Y
+		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? X,
+		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? X
 	};
-}, Nt = (e, t) => {
+}, Ft = (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;
-}, Pt = (e) => e instanceof SVGElement ? e : Nt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ft = (e) => {
+}, It = (e) => e instanceof SVGElement ? e : Ft(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Lt = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Pt(e.renderer ?? {}),
+		renderer: It(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
-}, X = Object.freeze({
+}, Rt = Object.freeze({
 	connectionTypeResolver: () => "direct",
 	connectionPreprocessor: (e) => e,
-	connectionAllowedVerifier: () => !0,
-	mouseEventVerifier: (e) => e.button === 0
-}), It = (e, t, n) => {
-	let r = e.connectionAllowedVerifier ?? X.connectionAllowedVerifier;
+	connectionAllowedVerifier: () => !0
+}), zt = (e, t, n) => {
+	let r = e.connectionAllowedVerifier ?? Rt.connectionAllowedVerifier;
 	return {
-		connectionTypeResolver: e.connectionTypeResolver ?? X.connectionTypeResolver,
+		connectionTypeResolver: e.connectionTypeResolver ?? Rt.connectionTypeResolver,
 		connectionAllowedVerifier: r,
-		draggingPortDirectionResolver: Tt(e.dragPortDirection, n, r),
-		edgeShapeFactory: e.edgeShape === void 0 ? t : Et(e.edgeShape),
-		connectionPreprocessor: e.connectionPreprocessor ?? X.connectionPreprocessor,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? X.mouseEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? X.mouseEventVerifier,
-		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? Y,
-		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? Y,
-		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? Y,
-		grabbedPortIdResolver: e.grabbedPortIdResolver ?? G,
-		releasedPortIdResolver: e.releasedPortIdResolver ?? G
+		draggingPortDirectionResolver: Et(e.dragPortDirection, n, r),
+		edgeShapeFactory: e.edgeShape === void 0 ? t : Dt(e.edgeShape),
+		connectionPreprocessor: e.connectionPreprocessor ?? Rt.connectionPreprocessor,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? X,
+		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? X,
+		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? X,
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? K,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? K
 	};
-}, Z = Object.freeze({
+}, Bt = Object.freeze({
 	connectionAllowedVerifier: () => !0,
-	connectionPreprocessor: (e) => e,
-	mouseDownEventVerifier: (e) => e.button === 0,
-	mouseUpEventVerifier: (e) => e.button === 0
-}), Lt = (e, t) => {
+	connectionPreprocessor: (e) => e
+}), Vt = (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 ?? Bt.connectionAllowedVerifier;
 	return {
-		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
+		connectionPreprocessor: e.connectionPreprocessor ?? Bt.connectionPreprocessor,
 		connectionAllowedVerifier: r,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseDownEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseUpEventVerifier,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
 		draggingEdgeResolver: e.draggingEdgeResolver ?? n,
-		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Et(e.draggingEdgeShape),
-		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? Y,
-		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? Y,
-		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? Y,
-		draggingPortDirectionResolver: Tt(e.dragPortDirection, t, r),
-		grabbedPortIdResolver: e.grabbedPortIdResolver ?? G,
-		releasedPortIdResolver: e.releasedPortIdResolver ?? G
+		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Dt(e.draggingEdgeShape),
+		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? X,
+		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? X,
+		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? X,
+		draggingPortDirectionResolver: Et(e.dragPortDirection, t, r),
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? K,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? K
 	};
-}, Rt = (e) => ({
+}, Ht = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), zt = (e) => ({
-	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? Y,
-	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? Y
-}), Bt = class extends Error {
+}), Ut = (e) => ({
+	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? X,
+	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? X
+}), Wt = class extends Error {
 	name = "CanvasBuilderError";
-}, Vt = class {
+}, Gt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3669,7 +3741,7 @@ var re = (e, t, n) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Ht = class {
+}, Kt = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3692,11 +3764,11 @@ var re = (e, t, n) => {
 			d: a
 		};
 	}
-}, Ut = (e) => {
+}, qt = (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);
-}, Wt = class {
+}, Jt = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3708,7 +3780,7 @@ var re = (e, t, n) => {
 		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 = Ut({
+				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = qt({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3719,7 +3791,7 @@ var re = (e, t, n) => {
 			}
 		}
 	}
-}, Gt = (e) => {
+}, Yt = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3735,7 +3807,7 @@ var re = (e, t, n) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, Kt = class {
+}, Xt = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -3891,7 +3963,7 @@ var re = (e, t, n) => {
 			y: n / e.size
 		};
 	}
-}, qt = class {
+}, Zt = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -3903,8 +3975,8 @@ var re = (e, t, n) => {
 		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 Kt({
-			box: Gt(e),
+		let n = new Xt({
+			box: Yt(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4014,7 +4086,7 @@ var re = (e, t, n) => {
 		});
 	}
 	calculateNodeRepulsiveForce(e) {
-		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Ut({
+		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = qt({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4041,12 +4113,12 @@ var re = (e, t, n) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, Jt = (e) => e.theta === 0 ? new Wt({
+}, Qt = (e) => e.theta === 0 ? new Jt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new qt({
+}) : new Zt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4054,7 +4126,7 @@ var re = (e, t, n) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), Yt = class {
+}), $t = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4079,7 +4151,7 @@ var re = (e, t, n) => {
 			});
 		}), r;
 	}
-}, Xt = class {
+}, en = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4088,9 +4160,9 @@ var re = (e, t, n) => {
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
-	convergenceVelocity;
+	stopVelocity;
 	constructor(e) {
-		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
+		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.stopVelocity = e.stopVelocity, this.distanceVectorGenerator = new Kt(e.rand), this.nodeForcesApplicationStrategy = Qt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4098,7 +4170,7 @@ var re = (e, t, n) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new Yt({
+		}), this.fillerLayoutAlgorithm = new $t({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4108,17 +4180,17 @@ var re = (e, t, n) => {
 			graph: t,
 			viewport: n
 		});
-		for (let e = 0; e < this.maxIterations && !(new Vt(t, r, {
+		for (let e = 0; e < this.maxIterations && !(new Gt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity); e++);
+		}).apply() < this.stopVelocity); e++);
 		return r;
 	}
-}, Zt = class {
+}, tn = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4162,7 +4234,7 @@ var re = (e, t, n) => {
 			}), r = e;
 		}
 	}
-}, Qt = class {
+}, nn = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4201,13 +4273,13 @@ var re = (e, t, n) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, $t = class {
+}, rn = class {
 	tree;
 	offsets = /* @__PURE__ */ new Map();
 	treeSpans = /* @__PURE__ */ new Map();
 	constructor(e, t) {
 		this.tree = e;
-		let n = t.spaceAroundRadius, r = new Qt({ spaceAroundRadius: n });
+		let n = t.spaceAroundRadius, r = new nn({ 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) => {
@@ -4223,19 +4295,19 @@ var re = (e, t, n) => {
 	generate() {
 		return this.offsets;
 	}
-}, en = class {
+}, an = class {
 	params;
 	constructor(e) {
 		this.params = e;
 	}
 	calculateCoordinates(e) {
-		let t = /* @__PURE__ */ new Map(), n = new Zt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
+		let t = /* @__PURE__ */ new Map(), n = new tn(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
 		return n.forEach((e) => {
 			t.set(e.root.nodeId, {
 				x: r,
 				y: 0
 			});
-			let n = new $t(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
+			let n = new rn(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4252,7 +4324,7 @@ var re = (e, t, n) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, tn = (e) => {
+}, on = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4261,29 +4333,29 @@ var re = (e, t, n) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, nn = (e) => {
+}, sn = (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);
-}, rn = (e) => {
+}, cn = (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);
-}, an = class {
+}, ln = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
-	convergenceVelocity;
+	stopVelocity;
 	maxTimeDeltaSec;
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(e) {
-		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
+		this.stopVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Kt(e.rand), this.nodeForcesApplicationStrategy = Qt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4291,7 +4363,7 @@ var re = (e, t, n) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new Yt({
+		}), this.fillerLayoutAlgorithm = new $t({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4301,19 +4373,19 @@ var re = (e, t, n) => {
 			graph: t,
 			viewport: n
 		});
-		return new Vt(t, i, {
+		return new Gt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((e) => {
+		}).apply() < this.stopVelocity && !t.getAllNodeIds().some((e) => {
 			let n = t.getNode(e);
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, on = (e) => {
+}, un = (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, [
@@ -4322,55 +4394,55 @@ var re = (e, t, n) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, sn = (e, t, n, r) => function() {
+}, dn = (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;
-}, cn = (e) => {
+}, fn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			let t = on(e?.seed ?? q.seed);
-			return new an({
-				rand: sn(t[0], t[1], t[2], t[3]),
-				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? q.maxTimeDeltaSec,
-				nodeCharge: e?.nodeCharge ?? q.nodeCharge,
-				nodeMass: e?.nodeMass ?? q.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? q.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? q.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? q.convergenceVelocity,
-				maxForce: e?.maxForce ?? q.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? q.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? q.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? q.barnesHutAreaRadiusThreshold
+			let t = un(e?.seed ?? Y.seed);
+			return new ln({
+				rand: dn(t[0], t[1], t[2], t[3]),
+				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? Y.maxTimeDeltaSec,
+				nodeCharge: e?.nodeCharge ?? Y.nodeCharge,
+				nodeMass: e?.nodeMass ?? Y.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? Y.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? Y.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? Y.stopVelocity,
+				maxForce: e?.maxForce ?? Y.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? Y.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? Y.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? Y.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, ln = { staticNodeResolver: () => !1 }, un = (e) => ({
-	algorithm: cn(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? ln.staticNodeResolver,
-	onBeforeApplied: e?.events?.onBeforeApplied ?? Y,
-	onAfterApplied: e?.events?.onAfterApplied ?? Y
-}), dn = (e) => e instanceof l ? {
+}, pn = { staticNodeResolver: () => !1 }, mn = (e) => ({
+	algorithm: fn(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? pn.staticNodeResolver,
+	onBeforeApplied: e?.events?.onBeforeApplied ?? X,
+	onAfterApplied: e?.events?.onAfterApplied ?? X
+}), hn = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
 } : {
 	type: "topologyChangeSchedule",
-	schedule: Ge
-}, fn = Object.freeze({
+	schedule: We
+}, gn = 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
-}), pn = (e) => {
+}), _n = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4380,7 +4452,7 @@ var re = (e, t, n) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, mn = class {
+}, vn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4422,11 +4494,11 @@ var re = (e, t, n) => {
 		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), pn(t));
+		return $($(t, e), _n(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4469,7 +4541,7 @@ var re = (e, t, n) => {
 			f: 0
 		};
 	}
-}, hn = (e) => {
+}, yn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4479,10 +4551,10 @@ var re = (e, t, n) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new mn();
+	}, r = new vn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
-		n = Q(n, t);
+		n = $(n, t);
 	}), (e) => {
 		let { x: t, y: r } = e;
 		return {
@@ -4490,47 +4562,47 @@ var re = (e, t, n) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, gn = (e) => {
+}, bn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return nn;
-		case "incoming": return rn;
-		default: return tn;
+		case "outgoing": return sn;
+		case "incoming": return cn;
+		default: return on;
 	}
-}, _n = (e) => {
+}, xn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		case "hierarchical": return new en({
-			layerWidth: e.layerWidth ?? fn.hierarchicalLayout.layerWidth,
-			layerSpace: e.layerSpace ?? fn.hierarchicalLayout.layerSpace,
-			transform: hn(e.transform),
-			nextLayerNodesResolver: gn(e.nextLayerNodesResolver)
+		case "hierarchical": return new an({
+			layerWidth: e.layerWidth ?? gn.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? gn.hierarchicalLayout.layerSpace,
+			transform: yn(e.transform),
+			nextLayerNodesResolver: bn(e.nextLayerNodesResolver)
 		});
 		default: {
-			let t = on(e?.seed ?? q.seed), n = sn(t[0], t[1], t[2], t[3]);
-			return new Xt({
-				dtSec: e?.dtSec ?? q.dtSec,
-				maxIterations: e?.maxIterations ?? q.maxIterations,
+			let t = un(e?.seed ?? Y.seed), n = dn(t[0], t[1], t[2], t[3]);
+			return new en({
+				dtSec: e?.dtSec ?? Y.dtSec,
+				maxIterations: e?.maxIterations ?? Y.maxIterations,
 				rand: n,
-				nodeCharge: e?.nodeCharge ?? q.nodeCharge,
-				nodeMass: e?.nodeMass ?? q.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? q.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? q.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? q.convergenceVelocity,
-				maxForce: e?.maxForce ?? q.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? q.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? q.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? q.barnesHutAreaRadiusThreshold
+				nodeCharge: e?.nodeCharge ?? Y.nodeCharge,
+				nodeMass: e?.nodeMass ?? Y.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? Y.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? Y.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? Y.stopVelocity,
+				maxForce: e?.maxForce ?? Y.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? Y.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? Y.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? Y.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, vn = (e) => ({
-	algorithm: _n(e.algorithm),
-	applyOn: dn(e.applyOn),
-	staticNodeResolver: e.staticNodeResolver ?? fn.staticNodeResolver,
-	onBeforeApplied: e.events?.onBeforeApplied ?? Y,
-	onAfterApplied: e.events?.onAfterApplied ?? Y
-}), yn = (e, t) => ({
+}, Sn = (e) => ({
+	algorithm: xn(e.algorithm),
+	applyOn: hn(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? gn.staticNodeResolver,
+	onBeforeApplied: e.events?.onBeforeApplied ?? X,
+	onAfterApplied: e.events?.onAfterApplied ?? X
+}), Cn = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4538,7 +4610,7 @@ var re = (e, t, n) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), bn = (e, t) => {
+}), wn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4546,55 +4618,66 @@ var re = (e, t, n) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, xn = (e, t) => ({
+}, Tn = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), $ = (e) => () => e, Sn = $(0), Cn = () => {
+}), En = (e) => () => e, Dn = En(0), On = () => {
 	let e = 0;
 	return () => e++;
-}, wn = (e, t) => {
-	let n = Sn, r = Sn, i = Cn();
-	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = $(e)), typeof t == "number" && (r = $(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
+}, kn = (e, t) => {
+	let n = Dn, r = Dn, i = On();
+	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = En(e)), typeof t == "number" && (r = En(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
 		nodesPriorityFn: n,
 		edgesPriorityFn: r
 	};
-}, Tn = (e) => {
-	let t = wn(e.nodes?.priority, e.edges?.priority);
+}, An = (e) => {
+	let t = kn(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: Et(e.edges?.shape ?? {}),
+			shapeFactory: Dt(e.edges?.shape ?? {}),
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, En = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : z, Dn = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? En(e.layoutParams) : z;
+}, jn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, Mn = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? jn(e.layoutParams) : B;
 	return { focus: {
 		contentPadding: t.focus?.contentPadding ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, On = (e) => ({
+}, Nn = (e) => ({
 	onNodeSelected: e.onNodeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? J.movementThreshold
-}), kn = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), Pn = (e) => ({
 	onCanvasSelected: e.onCanvasSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? J.movementThreshold
-}), An = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), Fn = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? J.movementThreshold
-}), jn = class {
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), In = () => {
+	let e = document.createElement("div");
+	return e.style.width = "100%", e.style.height = "100%", e.style.background = "rgba(174, 238, 255, 0.34)", e.style.border = "1px dashed rgba(96, 96, 96, 0.47)", e;
+}, Ln = (e) => ({
+	rectangleElement: e?.rectangleElement ?? In(),
+	mouseDownEventVerifier: e?.mouseDownEventVerifier ?? Ot,
+	mouseUpEventVerifier: e?.mouseUpEventVerifier ?? Z,
+	onSelectionStarted: e?.onSelectionStarted ?? X,
+	onSelectionChange: e?.onSelectionChange ?? X,
+	onSelectionInterrupted: e?.onSelectionInterrupted ?? X,
+	onSelectionFinished: e?.onSelectionFinished ?? X
+}), Rn = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4603,6 +4686,7 @@ var re = (e, t, n) => {
 	backgroundConfig = {};
 	connectablePortsConfig = {};
 	draggableEdgesConfig = {};
+	rectangularSelectionConfig = void 0;
 	virtualScrollConfig = void 0;
 	layoutConfig = {};
 	animatedLayoutConfig = {};
@@ -4615,15 +4699,16 @@ var re = (e, t, n) => {
 	hasBackground = !1;
 	hasUserConnectablePorts = !1;
 	hasUserDraggableEdges = !1;
+	hasRectangularSelection = !1;
 	hasAnimatedLayout = !1;
 	hasLayout = !1;
 	boxRenderingTrigger = new l();
 	window = window;
 	animationStaticNodes = /* @__PURE__ */ new Set();
 	pointInsideVerifier;
-	eventTagger = new $e();
+	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;
@@ -4649,6 +4734,9 @@ var re = (e, t, n) => {
 	enableUserDraggableEdges(e) {
 		return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
 	}
+	enableRectangularSelection(e) {
+		return this.hasRectangularSelection = !0, this.rectangularSelectionConfig = e, this;
+	}
 	enableLayout(e) {
 		return this.layoutConfig = e ?? {}, this.hasLayout = !0, this.hasAnimatedLayout = !1, this;
 	}
@@ -4665,40 +4753,40 @@ var re = (e, t, n) => {
 		return this.userSelectableCanvasConfig = e, this;
 	}
 	build() {
-		if (this.used) throw new Bt("Failed to build Canvas because CanvasBuilder is a single-use object");
+		if (this.used) throw new Wt("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 wt(this.element), r = this.createHtmlView(n.main, t, e), i = Tn(this.canvasDefaults), a = new We(t, r, i), o = vn(this.layoutConfig), s = new Xe(t, e, Dn({
+		let e = new y(this.element), t = new h(), n = new Tt(this.element), r = this.createHtmlView(n.main, t, e), i = An(this.canvasDefaults), a = new Ue(t, r, i), o = Sn(this.layoutConfig), s = new Ye(t, e, Mn({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
-		}), this.window), c = new Ke(e), l = new d(new Ue(t), c, a, s);
-		if (this.hasBackground && ct.configure(l, Ft(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
-			let e = An(this.userSelectableEdgesConfig);
-			yt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+		}), this.window), c = new Ge(e), l = new d(new He(t), c, a, s);
+		if (this.hasBackground && st.configure(l, Lt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = Fn(this.userSelectableEdgesConfig);
+			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = On(this.userSelectableNodesConfig);
-			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Nn(this.userSelectableNodesConfig);
+			_t.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = kn(this.userSelectableCanvasConfig);
-			bt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Pn(this.userSelectableCanvasConfig);
+			yt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Dt(this.dragConfig);
-			this.hasAnimatedLayout && (e = yn(e, this.animationStaticNodes)), nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = kt(this.dragConfig);
+			this.hasAnimatedLayout && (e = Cn(e, this.animationStaticNodes)), tt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = It(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
-			lt.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = zt(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 = Lt(this.draggableEdgesConfig, l.graph);
-			ut.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Vt(this.draggableEdgesConfig, l.graph);
+			lt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && rt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, Mt(this.transformConfig)) : it.configure(l, n.main, this.window, Mt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Rt(this.virtualScrollConfig)), this.hasLayout && mt.configure(l, o), this.hasAnimatedLayout) {
-			let e = un(this.animatedLayoutConfig);
-			this.hasDraggableNodes && (bn(l, this.animationStaticNodes), e = xn(e, this.animationStaticNodes)), _t.configure(l, e, this.window);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, Pt(this.transformConfig)) : rt.configure(l, n.main, this.window, Pt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Ht(this.virtualScrollConfig)), this.hasRectangularSelection && St.configure(l, n.main, n.overlayRectangularSelection, this.pointInsideVerifier, this.eventTagger, this.window, Ln(this.rectangularSelectionConfig)), this.hasLayout && pt.configure(l, o), this.hasAnimatedLayout) {
+			let e = mn(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (wn(l, this.animationStaticNodes), e = Tn(e, this.animationStaticNodes)), gt.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4706,8 +4794,8 @@ var re = (e, t, n) => {
 	}
 	createHtmlView(e, t, n) {
 		let r = new a(t, n, e);
-		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, zt(this.virtualScrollConfig))), r = new c(r, t), r;
+		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Ut(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-export { Ae as BezierEdgeShape, jn as CanvasBuilder, Bt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, L as DirectEdgeShape, l as EventSubject, Be as InteractiveEdgeError, Ve as InteractiveEdgeShape, He as MidpointEdgeShape, Ne as OrthogonalEdgeShape, je as StraightEdgeShape };
+export { ke as BezierEdgeShape, Rn as CanvasBuilder, Wt 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 };