@html-graph/html-graph 8.24.0 → 9.1.0

package/dist/html-graph.min.js

@@ -63,7 +63,7 @@ var e = /* @__PURE__ */ function(e) {
 	updateEdgeShape(e) {
 		let t = this.edgeIdToElementMap.get(e);
 		this.container.removeChild(t);
-		let n = this.graphStore.getEdge(e).payload.shape.element;
+		let { element: n } = this.graphStore.getEdge(e).payload.shape;
 		this.edgeIdToElementMap.set(e, n), this.container.appendChild(n);
 	}
 	renderEdge(t) {
@@ -750,16 +750,16 @@ var e = /* @__PURE__ */ function(e) {
 			direction: e.portDirection
 		}]
 	};
-}, te = (e, t) => {
-	let n = t;
-	for (; n !== null;) {
-		let t = e.findPortIdsByElement(n)[0] ?? null;
+}, te = (e, t, n) => {
+	let r = t;
+	for (; r !== null;) {
+		let t = n(e.findPortIdsByElement(r));
 		if (t !== null) return {
 			status: "portFound",
 			portId: t
 		};
-		if (e.findNodeIdByElement(n) !== void 0) return { status: "nodeEncountered" };
-		n = n.parentElement;
+		if (e.findNodeIdByElement(r) !== void 0) return { status: "nodeEncountered" };
+		r = r.parentElement;
 	}
 	return { status: "notFound" };
 };
@@ -777,12 +777,12 @@ function* ne(e, t) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var re = (e, t) => {
-	let n = ne(document, t);
-	for (let t of n) {
-		let n = te(e, t);
-		if (n.status === "portFound") return n.portId;
-		if (n.status === "nodeEncountered") return null;
+var re = (e, t, n) => {
+	let r = ne(document, t);
+	for (let t of r) {
+		let r = te(e, t, n);
+		if (r.status === "portFound") return r.portId;
+		if (r.status === "nodeEncountered") return null;
 	}
 	return null;
 }, T = /* @__PURE__ */ function(e) {
@@ -1138,33 +1138,6 @@ var re = (e, t) => {
 	let n = Math.abs(e.dir.y) < 1e-10, r = Math.abs(t.dir.y) < 1e-10;
 	return n ? r ? de(e, t) : pe(e, t) : r ? me(e, t) : fe(e, t);
 }, ge = class {
-	path;
-	midpoint;
-	constructor(e) {
-		let { from: t, to: n, fromDir: r, toDir: i, arrowLength: a, arrowOffset: o, roundness: s, hasSourceArrow: c, hasTargetArrow: l } = e, u = c ? E({
-			x: t.x + a,
-			y: t.y
-		}, r, t) : t, d = l ? E({
-			x: n.x - a,
-			y: n.y
-		}, i, n) : n, f = a + o, p = E({
-			x: t.x + f,
-			y: t.y
-		}, r, t), m = E({
-			x: n.x - f,
-			y: n.y
-		}, i, n), h = de({
-			arrowPoint: u,
-			linePoint: p,
-			dir: r
-		}, {
-			arrowPoint: d,
-			linePoint: m,
-			dir: i
-		});
-		this.path = j(h.points, s), this.midpoint = h.midpoint;
-	}
-}, _e = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1199,7 +1172,7 @@ var re = (e, t) => {
 			p
 		], d);
 	}
-}, ve = class {
+}, _e = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1228,34 +1201,7 @@ var re = (e, t) => {
 			y: n.y
 		}, t, n) : n;
 	}
-}, ye = class {
-	path;
-	midpoint;
-	constructor(e) {
-		let { from: t, to: n, hasSourceArrow: r, hasTargetArrow: i, arrowLength: a, arrowOffset: o, fromDir: s, toDir: c, roundness: l } = e, u = r ? E({
-			x: t.x + a,
-			y: t.y
-		}, s, t) : t, d = i ? E({
-			x: n.x - a,
-			y: n.y
-		}, c, n) : n, f = a + o, p = E({
-			x: t.x + f,
-			y: t.y
-		}, s, t), m = E({
-			x: n.x - f,
-			y: n.y
-		}, c, n), h = fe({
-			arrowPoint: u,
-			linePoint: p,
-			dir: s
-		}, {
-			arrowPoint: d,
-			linePoint: m,
-			dir: c
-		});
-		this.path = j(h.points, l), this.midpoint = h.midpoint;
-	}
-}, be = class {
+}, ve = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1282,7 +1228,7 @@ var re = (e, t) => {
 		});
 		this.path = j(h.points, s), this.midpoint = h.midpoint;
 	}
-}, P = class {
+}, ye = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1331,7 +1277,7 @@ var re = (e, t) => {
 			y: (l[3].y + l[4].y) / 2
 		};
 	}
-}, xe = class {
+}, be = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1366,10 +1312,10 @@ var re = (e, t) => {
 		].join(" "), h = `M ${a.x} ${a.y} L ${p[0].x} ${p[0].y} `;
 		this.path = `${o ? "" : h}${m}`, this.midpoint = p[3];
 	}
-}, Se = (e, t, n) => {
+}, xe = (e, t, n) => {
 	let r = Math.max(e.y, t.y), i = Math.min(e.y, t.y);
 	return (n >= 0 ? r : i) + n;
-}, Ce = class {
+}, Se = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1385,7 +1331,7 @@ var re = (e, t) => {
 		}, o, i), h = E({
 			x: a.x - p,
 			y: a.y
-		}, s, a), g = Se(m, h, u);
+		}, s, a), g = xe(m, h, u);
 		this.midpoint = {
 			x: (m.x + h.x) / 2,
 			y: g
@@ -1404,10 +1350,10 @@ var re = (e, t) => {
 			f
 		], l);
 	}
-}, we = (e, t, n) => {
+}, Ce = (e, t, n) => {
 	let r = Math.max(e.x, t.x), i = Math.min(e.x, t.x);
 	return (n >= 0 ? r : i) + n;
-}, Te = class {
+}, we = class {
 	path;
 	midpoint;
 	constructor(e) {
@@ -1423,7 +1369,7 @@ var re = (e, t) => {
 		}, i, o), h = E({
 			x: s.x - p,
 			y: s.y
-		}, a, s), g = we(m, h, l);
+		}, a, s), g = Ce(m, h, l);
 		this.midpoint = {
 			x: g,
 			y: (m.y + h.y) / 2
@@ -1442,25 +1388,25 @@ var re = (e, t) => {
 			f
 		], u);
 	}
-}, Ee = class {
+}, Te = class {
 	path;
 	midpoint;
 	constructor(e) {
 		let t = Math.abs(e.fromDir.y) < 1e-10, n = Math.abs(e.toDir.y) < 1e-10;
 		if (t && n) {
-			let t = new Ce(e);
+			let t = new Se(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
 		if (!t && !n) {
-			let t = new Te(e);
+			let t = new we(e);
 			this.path = t.path, this.midpoint = t.midpoint;
 			return;
 		}
-		let r = new be(e);
+		let r = new ve(e);
 		this.path = r.path, this.midpoint = r.midpoint;
 	}
-}, F = Object.freeze({
+}, P = Object.freeze({
 	color: "#777777",
 	width: 1,
 	arrowLength: 20,
@@ -1482,13 +1428,12 @@ var re = (e, t) => {
 	curvature: 90,
 	interactiveWidth: 10,
 	portOffset: 0
-}), De = (e) => ({
+}), Ee = (e) => ({
 	x: Math.cos(e),
 	y: Math.sin(e)
-}), I = class {
+}), F = class {
 	params;
 	element;
-	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -1497,7 +1442,7 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = ce(e.color), this.svg = this.element, this.element.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = ce(e.color), this.element.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(t) {
 		let { x: n, y: r, width: i, height: a, from: o, to: s } = ae(t.from, t.to, this.params.padding);
@@ -1507,7 +1452,7 @@ var re = (e, t) => {
 			width: i,
 			height: a
 		});
-		let c = De(t.from.direction), l = De(t.to.direction), u = {
+		let c = Ee(t.from.direction), l = Ee(t.to.direction), u = {
 			x: -l.x,
 			y: -l.y
 		}, d;
@@ -1531,7 +1476,7 @@ var re = (e, t) => {
 			targetArrowPath: m
 		});
 	}
-}, Oe = (e) => (t) => {
+}, De = (e) => (t) => {
 	let n = [
 		{
 			x: 0,
@@ -1553,7 +1498,7 @@ var re = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${n[0].x} ${n[0].y}`} ${`L ${n[1].x} ${n[1].y}`} ${`L ${n[2].x} ${n[2].y}`} Z`;
-}, ke = (e) => (t) => {
+}, Oe = (e) => (t) => {
 	let n = e.radius, r = t.arrowLength, i = (r * r + 2 * r * n) / (2 * n), a = i + n, o = r + n - n * (r + n) / a, s = n * i / a, c = [
 		{
 			x: 0,
@@ -1575,7 +1520,7 @@ var re = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${c[0].x} ${c[0].y}`} ${`A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`} ${`A ${n} ${n} 0 0 0 ${c[2].x} ${c[2].y}`} ${`A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`}`;
-}, Ae = (e) => (t) => {
+}, ke = (e) => (t) => {
 	let n = e.smallRadius, r = e.radius, i = E({
 		x: t.arrowLength,
 		y: 0
@@ -1603,20 +1548,19 @@ var re = (e, t) => {
 		y: e.y + t.shift.y
 	}));
 	return `${`M ${a[0].x} ${a[0].y}`} ${`A ${r} ${r} 0 0 1 ${a[1].x} ${a[1].y}`} ${`A ${n} ${n} 0 0 1 ${a[2].x} ${a[2].y}`} ${`A ${r} ${r} 0 0 1 ${a[0].x} ${a[0].y}`}`;
-}, L = (e) => {
+}, I = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "triangle": return Oe({ radius: e.radius ?? F.polygonArrowRadius });
-		case "arc": return ke({ radius: e.radius ?? F.circleArrowRadius });
-		default: return Ae({
-			smallRadius: e.smallRadius ?? F.wedgeArrowSmallRadius,
-			angle: e.angle ?? F.wedgeArrowAngle,
-			radius: e.radius ?? F.wedgeArrowRadius
+		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
 		});
 	}
-}, je = class {
+}, Ae = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -1631,7 +1575,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new xe({
+	createCyclePath = (e, t, n) => new be({
 		origin: e,
 		dir: n,
 		radius: this.portCycleRadius,
@@ -1662,10 +1606,10 @@ var re = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.curvature = e?.curvature ?? F.curvature, this.portCycleRadius = e?.cycleRadius ?? F.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? F.smallCycleRadius, this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.curvature = e?.curvature ?? P.curvature, this.portCycleRadius = e?.cycleRadius ?? P.cycleRadius, this.portCycleSmallRadius = e?.smallCycleRadius ?? P.smallCycleRadius, this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1673,92 +1617,13 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, Me = (e) => Math.cos(e) > 0 ? 0 : Math.PI, Ne = class {
-	element;
-	svg;
-	group;
-	line;
-	sourceArrow;
-	targetArrow;
-	onAfterRender;
-	arrowLength;
-	arrowOffset;
-	roundness;
-	cycleSquareSide;
-	detourDistance;
-	hasSourceArrow;
-	hasTargetArrow;
-	pathShape;
-	createCyclePath = (e, t, n) => new P({
-		origin: e,
-		dir: n,
-		arrowLength: this.arrowLength,
-		side: this.cycleSquareSide,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasArrow: this.hasSourceArrow || this.hasTargetArrow
-	});
-	createDetourPath = (e, t, n, r) => new Ce({
-		from: e,
-		to: t,
-		fromDir: n,
-		toDir: r,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		detourDistance: this.detourDistance,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	createLinePath = (e, t, n, r) => new ge({
-		from: e,
-		to: t,
-		fromDir: n,
-		toDir: r,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
-			arrowLength: this.arrowLength,
-			hasSourceArrow: this.hasSourceArrow,
-			hasTargetArrow: this.hasTargetArrow,
-			createCyclePath: this.createCyclePath,
-			createDetourPath: this.createDetourPath,
-			createLinePath: this.createLinePath,
-			padding: 50
-		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
-	}
-	render(e) {
-		let { from: t, to: n, category: r } = e;
-		this.pathShape.render({
-			category: r,
-			from: {
-				...t,
-				direction: Me(t.direction)
-			},
-			to: {
-				...n,
-				direction: Me(n.direction)
-			}
-		});
-	}
-}, Pe = class {
+}, je = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -1773,7 +1638,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new P({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1782,7 +1647,7 @@ var re = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new _e({
+	createDetourPath = (e, t, n, r) => new ge({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1795,7 +1660,7 @@ var re = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new ve({
+	createLinePath = (e, t, n, r) => new _e({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1807,12 +1672,12 @@ var re = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? F.detourDirection, this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
+		let t = e?.roundness ?? P.roundness;
+		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDirection = e?.detourDirection ?? P.detourDirection, this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1820,95 +1685,16 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
-}, Fe = Math.PI / 2, Ie = (e) => Math.sin(e) > 0 ? Fe : -Fe, Le = class {
-	element;
-	svg;
-	group;
-	line;
-	sourceArrow;
-	targetArrow;
-	onAfterRender;
-	arrowLength;
-	arrowOffset;
-	roundness;
-	cycleSquareSide;
-	detourDistance;
-	hasSourceArrow;
-	hasTargetArrow;
-	pathShape;
-	createCyclePath = (e, t, n) => new P({
-		origin: e,
-		dir: n,
-		arrowLength: this.arrowLength,
-		side: this.cycleSquareSide,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasArrow: this.hasSourceArrow || this.hasTargetArrow
-	});
-	createDetourPath = (e, t, n, r) => new Te({
-		from: e,
-		to: t,
-		fromDir: n,
-		toDir: r,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		detourDistance: this.detourDistance,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	createLinePath = (e, t, n, r) => new ye({
-		from: e,
-		to: t,
-		fromDir: n,
-		toDir: r,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
-			arrowLength: this.arrowLength,
-			hasSourceArrow: this.hasSourceArrow,
-			hasTargetArrow: this.hasTargetArrow,
-			createCyclePath: this.createCyclePath,
-			createDetourPath: this.createDetourPath,
-			createLinePath: this.createLinePath,
-			padding: 50
-		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
-	}
-	render(e) {
-		let { from: t, to: n, category: r } = e;
-		this.pathShape.render({
-			category: r,
-			from: {
-				...t,
-				direction: Ie(t.direction)
-			},
-			to: {
-				...n,
-				direction: Ie(n.direction)
-			}
-		});
-	}
-}, Re = (e) => {
+}, Me = (e) => {
 	let t = e + Math.PI / 4, n = Math.cos(t), r = Math.sin(t);
 	return n > 0 ? r > 0 ? 0 : -Math.PI / 2 : r > 0 ? Math.PI / 2 : Math.PI;
-}, ze = class {
+}, Ne = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -1922,7 +1708,7 @@ var re = (e, t) => {
 	hasSourceArrow;
 	hasTargetArrow;
 	pathShape;
-	createCyclePath = (e, t, n) => new P({
+	createCyclePath = (e, t, n) => new ye({
 		origin: e,
 		dir: n,
 		arrowLength: this.arrowLength,
@@ -1931,7 +1717,7 @@ var re = (e, t) => {
 		roundness: this.roundness,
 		hasArrow: this.hasSourceArrow || this.hasTargetArrow
 	});
-	createDetourPath = (e, t, n, r) => new Ee({
+	createDetourPath = (e, t, n, r) => new Te({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1943,7 +1729,7 @@ var re = (e, t) => {
 		hasSourceArrow: this.hasSourceArrow,
 		hasTargetArrow: this.hasTargetArrow
 	});
-	createLinePath = (e, t, n, r) => new be({
+	createLinePath = (e, t, n, r) => new ve({
 		from: e,
 		to: t,
 		fromDir: n,
@@ -1955,12 +1741,12 @@ var re = (e, t) => {
 		hasTargetArrow: this.hasTargetArrow
 	});
 	constructor(e) {
-		this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowOffset = e?.arrowOffset ?? F.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? F.cycleSquareSide;
-		let t = e?.roundness ?? F.roundness;
-		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? F.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? F.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? F.hasTargetArrow, this.pathShape = new I({
-			color: e?.color ?? F.color,
-			width: e?.width ?? F.width,
-			arrowRenderer: L(e?.arrowRenderer ?? {}),
+		this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowOffset = e?.arrowOffset ?? P.arrowOffset, this.cycleSquareSide = e?.cycleSquareSide ?? P.cycleSquareSide;
+		let t = e?.roundness ?? P.roundness;
+		this.roundness = Math.min(t, this.arrowOffset, this.cycleSquareSide / 2), this.detourDistance = e?.detourDistance ?? P.detourDistance, this.hasSourceArrow = e?.hasSourceArrow ?? P.hasSourceArrow, this.hasTargetArrow = e?.hasTargetArrow ?? P.hasTargetArrow, this.pathShape = new F({
+			color: e?.color ?? P.color,
+			width: e?.width ?? P.width,
+			arrowRenderer: I(e?.arrowRenderer ?? {}),
 			arrowLength: this.arrowLength,
 			hasSourceArrow: this.hasSourceArrow,
 			hasTargetArrow: this.hasTargetArrow,
@@ -1968,7 +1754,7 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1976,20 +1762,19 @@ var re = (e, t) => {
 			category: r,
 			from: {
 				...t,
-				direction: Re(t.direction)
+				direction: Me(t.direction)
 			},
 			to: {
 				...n,
-				direction: Re(n.direction)
+				direction: Me(n.direction)
 			}
 		});
 	}
-}, Be = (e) => {
+}, Pe = (e) => {
 	let { direction: t, radius: n } = e, { x: r, y: i } = t, { horizontal: a, vertical: o } = n, s = i / r, c = Math.abs(o / s), l = Math.abs(a * s), u = Math.min(a, c), d = Math.min(o, l);
 	return Math.sqrt(u * u + d * d);
-}, Ve = (e) => typeof e == "number" ? () => e : e === "box" ? Be : e, He = F.portOffset, R = class {
+}, Fe = (e) => typeof e == "number" ? () => e : e === "box" ? Pe : e, Ie = P.portOffset, L = class {
 	element;
-	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -2003,7 +1788,7 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Ve(e?.sourceOffset ?? He), this.targetOffsetFn = Ve(e?.targetOffset ?? He), this.element = ce(this.color), this.svg = this.element, this.element.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? P.color, this.width = e?.width ?? P.width, this.arrowLength = e?.arrowLength ?? P.arrowLength, this.arrowRenderer = I(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Fe(e?.sourceOffset ?? Ie), this.targetOffsetFn = Fe(e?.targetOffset ?? Ie), this.element = ce(this.color), this.element.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(e) {
 		let { x: t, y: n, width: r, height: i, from: a, to: o } = ae(e.from, e.to, 50);
@@ -2105,44 +1890,43 @@ var re = (e, t) => {
 			targetArrowPath: n
 		});
 	}
-}, Ue = () => {
+}, Le = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	return e.style.pointerEvents = "auto", e.style.cursor = "pointer", e;
-}, We = (e) => {
+}, Re = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	return t.setAttribute("stroke", "transparent"), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "none"), t.setAttribute("stroke-linecap", "round"), t;
-}, Ge = (e) => {
+}, ze = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	return t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", `${e}`), t.setAttribute("fill", "transparent"), t.setAttribute("stroke", "transparent"), t;
-}, Ke = class extends Error {
+}, Be = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InteractiveEdgeError";
 	}
-}, qe = class e {
+}, Ve = class e {
 	baseEdge;
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	handle = Ue();
+	handle = Le();
 	onAfterRender;
 	interactiveLine;
 	interactiveSourceArrow = null;
 	interactiveTargetArrow = null;
 	constructor(t, n) {
-		if (this.baseEdge = t, t instanceof e) throw new Ke("interactive edge can be configured only once");
-		this.element = this.baseEdge.element, this.svg = this.element, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-		let r = n?.distance ?? F.interactiveWidth;
-		this.interactiveLine = We(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Ge(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Ge(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
+		if (this.baseEdge = t, t instanceof e) throw new Be("interactive edge can be configured only once");
+		this.element = this.baseEdge.element, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
+		let r = n?.distance ?? P.interactiveWidth;
+		this.interactiveLine = Re(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ze(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ze(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
 			this.interactiveLine.setAttribute("d", e.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", e.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", e.targetArrowPath);
 		});
 	}
 	render(e) {
 		this.baseEdge.render(e);
 	}
-}, Je = class {
+}, He = class {
 	baseShape;
 	midpointElement;
 	group;
@@ -2151,9 +1935,8 @@ var re = (e, t) => {
 	targetArrow;
 	onAfterRender;
 	element;
-	svg;
 	constructor(e, t) {
-		this.baseShape = e, this.midpointElement = t, this.element = this.baseShape.element, this.svg = this.element, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.element.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
+		this.baseShape = e, this.midpointElement = t, this.element = this.baseShape.element, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.element.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
 			let t = e.edgePath.midpoint, n = `translate(${t.x}px, ${t.y}px)`;
 			this.midpointElement.style.setProperty("transform", n);
 		});
@@ -2161,7 +1944,7 @@ var re = (e, t) => {
 	render(e) {
 		this.baseShape.render(e);
 	}
-}, Ye = class {
+}, Ue = class {
 	graphStore;
 	onAfterNodeAdded;
 	onAfterNodeUpdated;
@@ -2260,7 +2043,7 @@ var re = (e, t) => {
 	getNodeAdjacentEdgeIds(e) {
 		return this.graphStore.getNodeAdjacentEdgeIds(e);
 	}
-}, z = class {
+}, R = class {
 	checkExists;
 	counter = 0;
 	constructor(e) {
@@ -2274,13 +2057,13 @@ var re = (e, t) => {
 	reset() {
 		this.counter = 0;
 	}
-}, Xe = class {
+}, We = class {
 	graphStore;
 	htmlView;
 	params;
-	nodeIdGenerator = new z((e) => this.graphStore.hasNode(e));
-	portIdGenerator = new z((e) => this.graphStore.hasPort(e));
-	edgeIdGenerator = new z((e) => this.graphStore.hasEdge(e));
+	nodeIdGenerator = new R((e) => this.graphStore.hasNode(e));
+	portIdGenerator = new R((e) => this.graphStore.hasPort(e));
+	edgeIdGenerator = new R((e) => this.graphStore.hasEdge(e));
 	onAfterNodeAdded = (e) => {
 		this.htmlView.attachNode(e);
 	};
@@ -2387,17 +2170,13 @@ var re = (e, t) => {
 	destroy() {
 		this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
 	}
-}, Ze = (e) => {
-	setTimeout(() => {
-		e();
-	});
-}, Qe = (e) => {
+}, Ge = (e) => {
 	queueMicrotask(() => {
 		e();
 	});
-}, B = (e) => {
+}, z = (e) => {
 	e();
-}, $e = class {
+}, Ke = class {
 	viewportStore;
 	onBeforeUpdated;
 	onAfterUpdated;
@@ -2420,7 +2199,7 @@ var re = (e, t) => {
 	createViewportCoords(e) {
 		return this.viewportStore.createViewportCoords(e);
 	}
-}, et = (e, t) => Symbol.iterator in e ? {
+}, qe = (e, t) => Symbol.iterator in e ? {
 	minContentScale: t.focus.minContentScale,
 	nodes: e,
 	contentPadding: t.focus.contentPadding,
@@ -2428,17 +2207,17 @@ var re = (e, t) => {
 } : {
 	minContentScale: e.minContentScale ?? t.focus.minContentScale,
 	nodes: e.nodes ?? [],
-	contentPadding: e.contentPadding ?? e.contentOffset ?? t.focus.contentPadding,
+	contentPadding: e.contentPadding ?? t.focus.contentPadding,
 	animationDuration: e.animationDuration ?? t.focus.animationDuration
-}, tt = (e, t, n) => ({
+}, Je = (e, t, n) => ({
 	scale: e.scale,
 	x: e.x + e.scale * t,
 	y: e.y + e.scale * n
-}), nt = (e, t, n, r) => ({
+}), Ye = (e, t, n, r) => ({
 	scale: e.scale * t,
 	x: e.scale * (1 - t) * n + e.x,
 	y: e.scale * (1 - t) * r + e.y
-}), rt = class {
+}), Xe = class {
 	graphStore;
 	viewportStore;
 	params;
@@ -2456,16 +2235,16 @@ var re = (e, t) => {
 		let { width: n, height: r } = this.viewportStore.getDimensions(), i = {
 			x: n / 2,
 			y: r / 2
-		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = tt(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
+		}, a = this.viewportStore.getViewportMatrix(), o = this.viewportStore.createViewportCoords(e), s = Je(a, o.x - i.x, o.y - i.y), c = t?.contentScale;
 		if (c !== void 0) {
 			let e = 1 / c;
-			s = nt(s, e / a.scale, i.x, i.y);
+			s = Ye(s, e / a.scale, i.x, i.y);
 		}
 		let l = t?.animationDuration ?? 0;
 		l > 0 ? this.animateNavigation(a, s, l) : this.viewportStore.patchViewportMatrix(s);
 	}
 	focus(e) {
-		let t = et(e ?? {}, this.params);
+		let t = qe(e ?? {}, this.params);
 		this.params.focus.schedule(() => {
 			this.navigate(t);
 		});
@@ -2507,25 +2286,25 @@ var re = (e, t) => {
 		};
 		this.win.requestAnimationFrame(a);
 	}
-}, it = (e, t, n) => {
+}, Ze = (e, t, n) => {
 	let r = new h();
-	return new d(new Ye(r), new $e(t), new Xe(r, new a(r, t, e), {
+	return new d(new Ue(r), new Ke(t), new We(r, new a(r, t, e), {
 		nodes: {
 			centerFn: ie,
 			priorityFn: () => 0
 		},
 		edges: {
-			shapeFactory: () => new R(),
+			shapeFactory: () => new L(),
 			priorityFn: () => 0
 		},
 		ports: { direction: 0 }
-	}), new rt(r, t, { focus: {
+	}), new Xe(r, t, { focus: {
 		contentPadding: 0,
 		minContentScale: 0,
-		schedule: B,
+		schedule: z,
 		animationDuration: 0
 	} }, n));
-}, V = Symbol(), at = class e {
+}, B = Symbol(), Qe = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
@@ -2542,11 +2321,11 @@ var re = (e, t) => {
 	onPortMouseDown = (e) => {
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
-		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n)[0];
-		this.params.onPointerDownVerifier(r, {
+		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n), i = this.params.grabbedPortIdResolver(r);
+		i !== null && this.params.onPointerDownVerifier(i, {
 			x: t.clientX,
 			y: t.clientY
-		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
 	};
 	onWindowMouseMove = (e) => {
 		if (!this.pointInsideVerifier.verify(e.clientX, e.clientY)) {
@@ -2571,7 +2350,7 @@ var re = (e, t) => {
 		this.params.onPointerDownVerifier(i, {
 			x: n.clientX,
 			y: n.clientY
-		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
+		}) && (this.eventTagger.tag(e, B), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }));
 	};
 	onWindowTouchMove = (e) => {
 		let t = e.touches[0];
@@ -2619,16 +2398,16 @@ var re = (e, t) => {
 	removeWindowTouchListeners() {
 		this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
 	}
-}, H = Symbol(), ot = class {
+}, V = Symbol(), $e = class {
 	has(e, t) {
-		let n = e[H];
+		let n = e[V];
 		return n !== void 0 && n.has(t);
 	}
 	tag(e, t) {
-		let n = e, r = n[H];
-		r === void 0 ? n[H] = /* @__PURE__ */ new Set([t]) : r.add(t);
+		let n = e, r = n[V];
+		r === void 0 ? n[V] = /* @__PURE__ */ new Set([t]) : r.add(t);
 	}
-}, U = Symbol(), W = class {
+}, H = Symbol(), U = class {
 	window;
 	pointInsideVerifier;
 	onSelected;
@@ -2709,10 +2488,10 @@ var re = (e, t) => {
 		let r = Math.sqrt(e * e + t * t);
 		this.movedDistance += r, this.movedDistance > this.movementThreshold && n();
 	}
-}, st = (e, t) => ({
+}, W = (e, t) => ({
 	from: e.isDirect ? e.staticPortId : t,
 	to: e.isDirect ? t : e.staticPortId
-}), ct = class {
+}), et = class {
 	graph;
 	connectionAllowedVerifier;
 	constructor(e, t) {
@@ -2723,7 +2502,7 @@ var re = (e, t) => {
 		return this.graph.getAllPortIds().forEach((i) => {
 			let { element: a, direction: o, nodeId: s } = this.graph.getPort(i), { x: c, y: l } = this.graph.getNode(s);
 			if (c === null || l === null) return;
-			let u = st(e, i);
+			let u = W(e, i);
 			if (!this.connectionAllowedVerifier(u)) return;
 			let { top: d, left: f, width: p, height: m } = a.getBoundingClientRect(), h = {
 				x: f + p / 2,
@@ -2732,7 +2511,7 @@ var re = (e, t) => {
 			v < n && (n = v, t = o);
 		}), t;
 	}
-}, lt = class {
+}, tt = class {
 	direction;
 	constructor(e) {
 		this.direction = e;
@@ -2740,7 +2519,7 @@ var re = (e, t) => {
 	resolve() {
 		return this.direction;
 	}
-}, ut = class e {
+}, G = (e) => e.length > 0 ? e[0] : null, nt = class e {
 	canvas;
 	element;
 	window;
@@ -2763,12 +2542,12 @@ var re = (e, t) => {
 		t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
 	};
 	onMouseDown = (e) => {
-		if (this.eventTagger.has(e, V)) return;
+		if (this.eventTagger.has(e, B)) return;
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
 		let n = e.currentTarget, r = this.graph.findNodeIdByElement(n), i = this.graph.getNode(r);
 		if (!this.params.nodeDragVerifier(r)) return;
-		this.eventTagger.tag(e, V), this.params.onNodeDragStarted(r);
+		this.eventTagger.tag(e, B), this.params.onNodeDragStarted(r);
 		let a = this.calculateContentPoint({
 			x: t.clientX,
 			y: t.clientY
@@ -2780,17 +2559,12 @@ var re = (e, t) => {
 		}, C(this.element, this.params.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 });
 	};
 	onTouchStart = (e) => {
-		if (this.eventTagger.has(e, V)) return;
+		if (this.eventTagger.has(e, B)) return;
 		let t = e;
 		if (t.touches.length !== 1) return;
 		let n = t.touches[0], r = e.currentTarget, i = this.canvas.graph.findNodeIdByElement(r), a = this.graph.getNode(i);
-		if (!this.params.nodeDragVerifier({
-			nodeId: i,
-			element: a.element,
-			x: a.x,
-			y: a.y
-		})) return;
-		this.eventTagger.tag(e, V);
+		if (!this.params.nodeDragVerifier(i)) return;
+		this.eventTagger.tag(e, B);
 		let o = this.calculateContentPoint({
 			x: n.clientX,
 			y: n.clientY
@@ -2904,7 +2678,7 @@ var re = (e, t) => {
 		let e = this.grabbedNodeState.nodeId;
 		this.graph.hasNode(e) && this.params.onNodeDragFinished(e), this.grabbedNodeState = null;
 	}
-}, G = (e) => {
+}, K = (e) => {
 	let t = [], n = e.touches.length;
 	for (let r = 0; r < n; r++) t.push([e.touches[r].clientX, e.touches[r].clientY]);
 	let r = t.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]), i = [r[0] / n, r[1] / n], a = t.map((e) => [e[0] - i[0], e[1] - i[1]]).reduce((e, t) => e + Math.sqrt(t[0] * t[0] + t[1] * t[1]), 0);
@@ -2915,7 +2689,7 @@ var re = (e, t) => {
 		touchesCnt: n,
 		touches: t
 	};
-}, dt = class e {
+}, rt = class e {
 	canvas;
 	element;
 	window;
@@ -2930,7 +2704,7 @@ var re = (e, t) => {
 		this.removeMouseDragListeners(), this.removeTouchDragListeners();
 	};
 	onMouseDown = (e) => {
-		this.eventTagger.has(e, V) || this.params.mouseDownEventVerifier(e) && (C(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
+		this.eventTagger.has(e, B) || this.params.mouseDownEventVerifier(e) && (C(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }), this.startRegisteredTransform());
 	};
 	onWindowMouseMove = (e) => {
 		let t = this.pointInsideVerifier.verify(e.clientX, e.clientY);
@@ -2952,16 +2726,16 @@ var re = (e, t) => {
 		}, this.params.scaleWheelFinishTimeout);
 	};
 	onTouchStart = (e) => {
-		if (!this.eventTagger.has(e, V)) {
+		if (!this.eventTagger.has(e, B)) {
 			if (this.prevTouches !== null) {
-				this.prevTouches = G(e);
+				this.prevTouches = K(e);
 				return;
 			}
-			this.prevTouches = G(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }), this.startRegisteredTransform();
+			this.prevTouches = K(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }), this.startRegisteredTransform();
 		}
 	};
 	onWindowTouchMove = (e) => {
-		let t = G(e);
+		let t = K(e);
 		if (!t.touches.every((e) => this.pointInsideVerifier.verify(e[0], e[1]))) {
 			this.stopTouchDrag();
 			return;
@@ -2977,7 +2751,7 @@ var re = (e, t) => {
 		this.prevTouches = t;
 	};
 	onWindowTouchFinish = (e) => {
-		e.touches.length > 0 ? this.prevTouches = G(e) : this.stopTouchDrag();
+		e.touches.length > 0 ? this.prevTouches = K(e) : this.stopTouchDrag();
 	};
 	preventWheelScaleListener = (e) => {
 		e.preventDefault();
@@ -2991,20 +2765,24 @@ var re = (e, t) => {
 		new e(t, n, r, i, a, o);
 	}
 	moveViewport(e, t) {
-		let n = this.viewport.getViewportMatrix(), r = tt(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+		let n = this.viewport.getViewportMatrix(), r = Je(n, e, t), { width: i, height: a } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
 			prevTransform: n,
 			nextTransform: r,
-			canvasWidth: i,
-			canvasHeight: a
+			viewport: {
+				width: i,
+				height: a
+			}
 		});
 		this.performTransform(o);
 	}
 	scaleViewport(e, t, n) {
-		let r = this.canvas.viewport.getViewportMatrix(), i = nt(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+		let r = this.canvas.viewport.getViewportMatrix(), i = Ye(r, e, t, n), { width: a, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
 			prevTransform: r,
 			nextTransform: i,
-			canvasWidth: a,
-			canvasHeight: o
+			viewport: {
+				width: a,
+				height: o
+			}
 		});
 		this.performTransform(s);
 	}
@@ -3033,12 +2811,14 @@ var re = (e, t) => {
 		let e = this.viewport.getViewportMatrix(), { width: t, height: n } = this.viewport.getDimensions(), r = this.params.transformPreprocessor({
 			prevTransform: e,
 			nextTransform: e,
-			canvasWidth: t,
-			canvasHeight: n
+			viewport: {
+				width: t,
+				height: n
+			}
 		});
 		this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(r), this.params.onResizeTransformFinished();
 	}
-}, ft = class e {
+}, it = class e {
 	canvas;
 	element;
 	window;
@@ -3091,7 +2871,7 @@ var re = (e, t) => {
 				this.scheduleLoadAreaAroundViewport(), r.onTransformFinished();
 			}
 		};
-		dt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+		rt.configure(e, this.element, this.window, this.pointInsideVerifier, o, c), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
 	}
 	static configure(t, n, r, i, a, o, s, c) {
 		new e(t, n, r, i, a, o, s, c);
@@ -3116,21 +2896,21 @@ var re = (e, t) => {
 			height: u
 		});
 	}
-}, pt = () => {
+}, at = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, mt = () => {
+}, ot = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	return e.setAttribute("fill", "url(#pattern)"), e;
-}, ht = () => {
+}, st = () => {
 	let e = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
 	return e.setAttribute("id", "pattern"), e;
-}, gt = class e {
+}, ct = class e {
 	canvas;
 	backgroundHost;
-	svg = pt();
-	patternRenderingRectangle = mt();
-	pattern = ht();
+	svg = at();
+	patternRenderingRectangle = ot();
+	pattern = st();
 	patternContent;
 	tileWidth;
 	tileHeight;
@@ -3165,7 +2945,7 @@ var re = (e, t) => {
 			this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${r}`);
 		}
 	}
-}, _t = class e {
+}, lt = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3179,7 +2959,7 @@ var re = (e, t) => {
 		this.params.onAfterEdgeCreated(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = it(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3196,9 +2976,10 @@ var re = (e, t) => {
 			onPointerOutside: () => {
 				let e = this.edgeInProgress;
 				this.resetDragState(), this.params.onEdgeCreationInterrupted(e);
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		at.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
 	static configure(t, n, r, i, a, o, s) {
 		new e(t, n, r, i, a, o, s);
@@ -3237,12 +3018,12 @@ var re = (e, t) => {
 		this.edgeInProgress = null, this.overlayCanvas.clear();
 	}
 	tryCreateConnection(e) {
-		let t = re(this.canvas.graph, e);
+		let t = re(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = st(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
+		let n = W(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
 			from: n.from,
 			to: n.to
 		});
@@ -3261,7 +3042,7 @@ var re = (e, t) => {
 			y: n.y
 		}).updatePort(T.DraggingNodeId, { direction: r });
 	}
-}, vt = class e {
+}, ut = class e {
 	canvas;
 	overlayLayer;
 	viewportStore;
@@ -3276,7 +3057,7 @@ var re = (e, t) => {
 		this.params.onAfterEdgeReattached(e);
 	};
 	constructor(e, t, n, r, i, a, o) {
-		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = it(this.overlayLayer, this.viewportStore, this.window);
+		this.canvas = e, this.overlayLayer = t, this.viewportStore = n, this.window = r, this.pointInsideVerifier = i, this.eventTagger = a, this.params = o, this.overlayCanvas = Ze(this.overlayLayer, this.viewportStore, this.window);
 		let s = {
 			mouseDownEventVerifier: this.params.mouseDownEventVerifier,
 			mouseUpEventVerifier: this.params.mouseUpEventVerifier,
@@ -3296,9 +3077,10 @@ var re = (e, t) => {
 					shape: e.shape,
 					priority: e.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
-		at.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
+		Qe.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
 	static configure(t, n, r, i, a, o, s) {
 		new e(t, n, r, i, a, o, s);
@@ -3366,7 +3148,7 @@ var re = (e, t) => {
 		}).updatePort(T.DraggingNodeId, { direction: i });
 	}
 	tryCreateConnection(e) {
-		let t = re(this.canvas.graph, e);
+		let t = re(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
@@ -3378,7 +3160,7 @@ var re = (e, t) => {
 			});
 			return;
 		}
-		let { from: n, to: r } = st(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
+		let { from: n, to: r } = W(this.edgeInProgress, t), i = this.draggingEdgePayload, a = {
 			id: i.id,
 			from: n,
 			to: r,
@@ -3400,7 +3182,7 @@ var re = (e, t) => {
 			});
 		}
 	}
-}, yt = class e {
+}, dt = class e {
 	applier;
 	trigger;
 	constructor(e, t) {
@@ -3411,7 +3193,7 @@ var re = (e, t) => {
 	static configure(t, n) {
 		new e(t, n);
 	}
-}, bt = class e {
+}, ft = class e {
 	graph;
 	applier;
 	defererFn;
@@ -3436,7 +3218,7 @@ var re = (e, t) => {
 	scheduleApply() {
 		this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
 	}
-}, xt = class {
+}, pt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3452,23 +3234,23 @@ var re = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, St = class {
+}, mt = class {
 	static configure(e, t) {
-		let n = t.applyOn, r = new xt(e, t.algorithm, {
+		let n = t.applyOn, r = new pt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
 		});
 		switch (n.type) {
 			case "trigger":
-				yt.configure(r, n.trigger);
+				dt.configure(r, n.trigger);
 				break;
 			case "topologyChangeSchedule":
-				bt.configure(e.graph, r, n.schedule);
+				ft.configure(e.graph, r, n.schedule);
 				break;
 		}
 	}
-}, Ct = class {
+}, ht = class {
 	win;
 	callback;
 	previousTimeStamp = void 0;
@@ -3483,7 +3265,7 @@ var re = (e, t) => {
 	constructor(e, t) {
 		this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
 	}
-}, wt = class {
+}, gt = class {
 	canvas;
 	layoutAlgorithm;
 	params;
@@ -3500,30 +3282,29 @@ var re = (e, t) => {
 			this.params.staticNodeResolver(t) || this.canvas.updateNode(t, e);
 		}), this.params.onAfterApplied();
 	}
-}, Tt = class e {
-	win;
+}, _t = class e {
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.win = n, this.applier = new wt(e, t.algorithm, {
+		this.applier = new gt(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new Ct(this.win, this.step);
+		}), new ht(n, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
 	}
-}, Et = class e {
+}, vt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
 	onNodeSelected;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	onAfterNodeAdded = (e) => {
 		let { element: t } = this.canvas.graph.getNode(e);
 		this.configurator.enable(t);
@@ -3539,7 +3320,7 @@ var re = (e, t) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onNodeSelected = i.onNodeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findNodeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onNodeSelected(n);
@@ -3552,13 +3333,13 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, Dt = class e {
+}, yt = class e {
 	canvas;
 	window;
 	pointInsideVerifier;
 	eventTagger;
 	configurator;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	onEdgeSelected;
 	onAfterEdgeAdded = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
@@ -3575,7 +3356,7 @@ var re = (e, t) => {
 		});
 	};
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.window = t, this.pointInsideVerifier = n, this.eventTagger = r, this.onEdgeSelected = i.onEdgeSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				let n = this.canvas.graph.findEdgeIdByElement(e);
 				this.eventTagger.tag(t, this.eventHandledTag), this.onEdgeSelected(n);
@@ -3588,7 +3369,7 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a) {
 		new e(t, n, r, i, a);
 	}
-}, Ot = class e {
+}, bt = class e {
 	canvas;
 	element;
 	window;
@@ -3596,9 +3377,9 @@ var re = (e, t) => {
 	eventTagger;
 	configurator;
 	onCanvasSelected;
-	eventHandledTag = U;
+	eventHandledTag = H;
 	constructor(e, t, n, r, i, a) {
-		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new W(this.window, this.pointInsideVerifier, {
+		this.canvas = e, this.element = t, this.window = n, this.pointInsideVerifier = r, this.eventTagger = i, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new U(this.window, this.pointInsideVerifier, {
 			onSelected: (e, t) => {
 				this.eventTagger.has(t, this.eventHandledTag) || this.onCanvasSelected();
 			},
@@ -3612,29 +3393,29 @@ var re = (e, t) => {
 	static configure(t, n, r, i, a, o) {
 		new e(t, n, r, i, a, o);
 	}
-}, kt = () => {
+}, xt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, At = () => {
+}, St = () => {
 	let e = document.createElement("div");
 	return e.style.position = "absolute", e.style.inset = "0", e;
-}, jt = () => {
-	let e = At();
+}, Ct = () => {
+	let e = St();
 	return e.style.pointerEvents = "none", e;
-}, Mt = class {
+}, wt = class {
 	element;
-	background = At();
-	main = At();
-	overlayConnectablePorts = jt();
-	overlayDraggableEdges = jt();
-	host = kt();
+	background = St();
+	main = St();
+	overlayConnectablePorts = Ct();
+	overlayDraggableEdges = Ct();
+	host = xt();
 	constructor(e) {
 		this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
 	}
 	destroy() {
 		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
 	}
-}, K = Object.freeze({
+}, q = Object.freeze({
 	seed: "HTMLGraph is awesome",
 	maxTimeDeltaSec: .01,
 	nodeCharge: 1e5,
@@ -3648,14 +3429,14 @@ var re = (e, t) => {
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
-}), q = Object.freeze({
+}), J = Object.freeze({
 	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0,
 	movementThreshold: 10
-}), J = () => {}, Nt = (e, t, n) => e === "closest-connectable-port" || e === "nearest-connectable-port" ? new ct(t, n) : new lt(e), Y = (e) => {
+}), Y = () => {}, Tt = (e, t, n) => e === "nearest-connectable-port" ? new et(t, n) : typeof e == "number" ? new tt(e) : new tt(void 0), Et = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "straight": return () => new Pe({
+		case "straight": return () => new je({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3668,7 +3449,7 @@ var re = (e, t) => {
 			detourDistance: e.detourDistance,
 			detourDirection: e.detourDirection
 		});
-		case "horizontal": return () => new Ne({
+		case "orthogonal": return () => new Ne({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3680,31 +3461,7 @@ var re = (e, t) => {
 			roundness: e.roundness,
 			detourDistance: e.detourDistance
 		});
-		case "vertical": return () => new Le({
-			color: e.color,
-			width: e.width,
-			arrowLength: e.arrowLength,
-			arrowOffset: e.arrowOffset,
-			arrowRenderer: e.arrowRenderer,
-			hasSourceArrow: e.hasSourceArrow,
-			hasTargetArrow: e.hasTargetArrow,
-			cycleSquareSide: e.cycleSquareSide,
-			roundness: e.roundness,
-			detourDistance: e.detourDistance
-		});
-		case "orthogonal": return () => new ze({
-			color: e.color,
-			width: e.width,
-			arrowLength: e.arrowLength,
-			arrowOffset: e.arrowOffset,
-			arrowRenderer: e.arrowRenderer,
-			hasSourceArrow: e.hasSourceArrow,
-			hasTargetArrow: e.hasTargetArrow,
-			cycleSquareSide: e.cycleSquareSide,
-			roundness: e.roundness,
-			detourDistance: e.detourDistance
-		});
-		case "direct": return () => new R({
+		case "direct": return () => new L({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3714,7 +3471,7 @@ var re = (e, t) => {
 			sourceOffset: e.sourceOffset,
 			targetOffset: e.targetOffset
 		});
-		default: return () => new je({
+		default: return () => new Ae({
 			color: e.color,
 			width: e.width,
 			arrowLength: e.arrowLength,
@@ -3728,7 +3485,7 @@ var re = (e, t) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Pt = (e) => {
+}, Dt = (e) => {
 	let t = e.nodeDragVerifier ?? (() => !0), n = e.moveOnTop !== !1, r = e.moveEdgesOnTop !== !1 && n, i = e.mouse?.dragCursor, a = i === void 0 ? "grab" : i, o = e.mouse?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e.mouse?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c;
 	return {
 		moveOnTop: n,
@@ -3737,26 +3494,26 @@ var re = (e, t) => {
 		gridSize: e.gridSize ?? null,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
-		onNodeDragStarted: e.events?.onNodeDragStarted ?? J,
-		onNodeDrag: e.events?.onNodeDrag ?? J,
+		onNodeDragStarted: e.events?.onNodeDragStarted ?? Y,
+		onNodeDrag: e.events?.onNodeDrag ?? Y,
 		nodeDragVerifier: t,
-		onNodeDragFinished: e.events?.onNodeDragFinished ?? J
+		onNodeDragFinished: e.events?.onNodeDragFinished ?? Y
 	};
-}, Ft = (e) => {
+}, Ot = (e) => {
 	let t = e.minX === null ? -Infinity : e.minX, n = e.maxX === null ? Infinity : e.maxX, r = e.minY === null ? -Infinity : e.minY, i = e.maxY === null ? Infinity : e.maxY;
 	return (e) => {
 		let a = e.nextTransform.x, o = e.nextTransform.y;
 		a < t && a < e.prevTransform.x && (a = Math.min(e.prevTransform.x, t));
-		let s = n - e.canvasWidth * e.prevTransform.scale;
+		let s = n - e.viewport.width * e.prevTransform.scale;
 		a > s && a > e.prevTransform.x && (a = Math.max(e.prevTransform.x, s)), o < r && o < e.prevTransform.y && (o = Math.min(e.prevTransform.y, r));
-		let c = i - e.canvasHeight * e.prevTransform.scale;
+		let c = i - e.viewport.height * e.prevTransform.scale;
 		return o > c && o > e.prevTransform.y && (o = Math.max(e.prevTransform.y, c)), {
 			scale: e.nextTransform.scale,
 			x: a,
 			y: o
 		};
 	};
-}, It = (e) => {
+}, kt = (e) => {
 	let t = e.maxContentScale, n = e.minContentScale, r = t === null ? 0 : 1 / t, i = n === null ? Infinity : 1 / n;
 	return (e) => {
 		let t = e.prevTransform, n = e.nextTransform, a = n.scale, o = n.x, s = n.y;
@@ -3776,53 +3533,52 @@ var re = (e, t) => {
 			y: s
 		};
 	};
-}, Lt = (e) => (t) => e.reduce((e, n) => n({
+}, At = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
-	canvasWidth: t.canvasWidth,
-	canvasHeight: t.canvasHeight
-}), t.nextTransform), Rt = (e) => {
+	viewport: t.viewport
+}), t.nextTransform), jt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return It({
+		case "scale-limit": return kt({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Ft({
+		case "shift-limit": return Ot({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, zt = (e) => {
+}, Mt = (e) => {
 	let t = e?.scale?.mouseWheelSensitivity, n = t === void 0 ? 1.2 : t, r = e?.transformPreprocessor, i;
-	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? Lt(r.map((e) => Rt(e))) : Rt(r);
-	let a = e?.shift?.cursor === void 0 ? "grab" : e.shift.cursor, o = e?.shift?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.shift?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
+	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? 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 ?? J,
-		onTransformFinished: e?.events?.onTransformFinished ?? J,
-		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? J,
-		onTransformChange: e?.events?.onTransformChange ?? J,
+		onTransformStarted: e?.events?.onTransformStarted ?? Y,
+		onTransformFinished: e?.events?.onTransformFinished ?? Y,
+		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? Y,
+		onTransformChange: e?.events?.onTransformChange ?? Y,
 		transformPreprocessor: i,
 		shiftCursor: a,
 		mouseDownEventVerifier: s,
 		mouseUpEventVerifier: l,
 		mouseWheelEventVerifier: d,
 		scaleWheelFinishTimeout: e?.scale?.wheelFinishTimeout ?? 500,
-		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? J,
-		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? J
+		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? Y,
+		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? Y
 	};
-}, Bt = (e, t) => {
+}, Nt = (e, t) => {
 	let n = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 	return n.setAttribute("cx", "0"), n.setAttribute("cy", "0"), n.setAttribute("r", `${e}`), n.setAttribute("fill", `${t}`), n;
-}, Vt = (e) => e instanceof SVGElement ? e : Bt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ht = (e) => {
+}, Pt = (e) => e instanceof SVGElement ? e : Nt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Ft = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Vt(e.renderer ?? {}),
+		renderer: Pt(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
 }, X = Object.freeze({
@@ -3830,26 +3586,28 @@ var re = (e, t) => {
 	connectionPreprocessor: (e) => e,
 	connectionAllowedVerifier: () => !0,
 	mouseEventVerifier: (e) => e.button === 0
-}), Ut = (e, t, n) => {
+}), It = (e, t, n) => {
 	let r = e.connectionAllowedVerifier ?? X.connectionAllowedVerifier;
 	return {
 		connectionTypeResolver: e.connectionTypeResolver ?? X.connectionTypeResolver,
 		connectionAllowedVerifier: r,
-		draggingPortDirectionResolver: Nt(e.dragPortDirection, n, r),
-		edgeShapeFactory: e.edgeShape === void 0 ? t : Y(e.edgeShape),
+		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 ?? J,
-		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? J,
-		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? J
+		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? Y,
+		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? Y,
+		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? Y,
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? G,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? G
 	};
 }, Z = Object.freeze({
 	connectionAllowedVerifier: () => !0,
 	connectionPreprocessor: (e) => e,
-	mouseDownEventVerifier: (e) => e.button === 0 && e.ctrlKey,
+	mouseDownEventVerifier: (e) => e.button === 0,
 	mouseUpEventVerifier: (e) => e.button === 0
-}), Wt = (e, t) => {
+}), Lt = (e, t) => {
 	let n = (e) => {
 		let n = t.getPortAdjacentEdgeIds(e);
 		return n.length > 0 ? n[n.length - 1] : null;
@@ -3860,21 +3618,23 @@ var re = (e, t) => {
 		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseDownEventVerifier,
 		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseUpEventVerifier,
 		draggingEdgeResolver: e.draggingEdgeResolver ?? n,
-		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Y(e.draggingEdgeShape),
-		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? J,
-		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? J,
-		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? J,
-		draggingPortDirectionResolver: Nt(e.dragPortDirection, t, r)
+		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : 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
 	};
-}, Gt = (e) => ({
+}, Rt = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), Kt = (e) => ({
-	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? J,
-	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? J
-}), qt = class extends Error {
+}), zt = (e) => ({
+	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? Y,
+	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? Y
+}), Bt = class extends Error {
 	name = "CanvasBuilderError";
-}, Jt = class {
+}, Vt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3909,7 +3669,7 @@ var re = (e, t) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Yt = class {
+}, Ht = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3932,11 +3692,11 @@ var re = (e, t) => {
 			d: a
 		};
 	}
-}, Xt = (e) => {
+}, Ut = (e) => {
 	if (e.distance === 0) return e.maxForce;
 	let t = e.coefficient * (e.sourceCharge * e.targetCharge / (e.distance * e.distance));
 	return Math.min(t, e.maxForce);
-}, Zt = class {
+}, Wt = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3948,7 +3708,7 @@ var re = (e, t) => {
 		for (let i = 0; i < r; i++) {
 			let a = n[i];
 			for (let o = i + 1; o < r; o++) {
-				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Xt({
+				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Ut({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3959,7 +3719,7 @@ var re = (e, t) => {
 			}
 		}
 	}
-}, Qt = (e) => {
+}, Gt = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3975,7 +3735,7 @@ var re = (e, t) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, $t = class {
+}, Kt = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -4131,7 +3891,7 @@ var re = (e, t) => {
 			y: n / e.size
 		};
 	}
-}, en = class {
+}, qt = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -4143,8 +3903,8 @@ var re = (e, t) => {
 		this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
 	}
 	apply(e, t) {
-		let n = new $t({
-			box: Qt(e),
+		let n = new Kt({
+			box: Gt(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4254,7 +4014,7 @@ var re = (e, t) => {
 		});
 	}
 	calculateNodeRepulsiveForce(e) {
-		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Xt({
+		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Ut({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4281,12 +4041,12 @@ var re = (e, t) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, tn = (e) => e.theta === 0 ? new Zt({
+}, Jt = (e) => e.theta === 0 ? new Wt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new en({
+}) : new qt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4294,7 +4054,7 @@ var re = (e, t) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), nn = class {
+}), Yt = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4319,7 +4079,7 @@ var re = (e, t) => {
 			});
 		}), r;
 	}
-}, rn = class {
+}, Xt = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4330,7 +4090,7 @@ var re = (e, t) => {
 	edgeStiffness;
 	convergenceVelocity;
 	constructor(e) {
-		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
+		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4338,7 +4098,7 @@ var re = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new nn({
+		}), this.fillerLayoutAlgorithm = new Yt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4348,7 +4108,7 @@ var re = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		for (let e = 0; e < this.maxIterations && !(new Jt(t, r, {
+		for (let e = 0; e < this.maxIterations && !(new Vt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
@@ -4358,7 +4118,7 @@ var re = (e, t) => {
 		}).apply() < this.convergenceVelocity); e++);
 		return r;
 	}
-}, an = class {
+}, Zt = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4402,7 +4162,7 @@ var re = (e, t) => {
 			}), r = e;
 		}
 	}
-}, on = class {
+}, Qt = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4441,13 +4201,13 @@ var re = (e, t) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, sn = class {
+}, $t = class {
 	tree;
 	offsets = /* @__PURE__ */ new Map();
 	treeSpans = /* @__PURE__ */ new Map();
 	constructor(e, t) {
 		this.tree = e;
-		let n = t.spaceAroundRadius, r = new on({ spaceAroundRadius: n });
+		let n = t.spaceAroundRadius, r = new Qt({ spaceAroundRadius: n });
 		[...this.tree.sequence].reverse().forEach((e) => {
 			let t = Array.from(e.children).map((e) => this.treeSpans.get(e.nodeId)), i = r.generate(t), a = 0;
 			e.children.forEach((e) => {
@@ -4463,19 +4223,19 @@ var re = (e, t) => {
 	generate() {
 		return this.offsets;
 	}
-}, cn = class {
+}, en = class {
 	params;
 	constructor(e) {
 		this.params = e;
 	}
 	calculateCoordinates(e) {
-		let t = /* @__PURE__ */ new Map(), n = new an(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
+		let t = /* @__PURE__ */ new Map(), n = new Zt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
 		return n.forEach((e) => {
 			t.set(e.root.nodeId, {
 				x: r,
 				y: 0
 			});
-			let n = new sn(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
+			let n = new $t(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4492,7 +4252,7 @@ var re = (e, t) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, ln = (e) => {
+}, tn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4501,19 +4261,19 @@ var re = (e, t) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, un = (e) => {
+}, nn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
 	});
 	return new Set(r);
-}, dn = (e) => {
+}, rn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeIncomingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.from).nodeId;
 	});
 	return new Set(r);
-}, fn = class {
+}, an = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	convergenceVelocity;
@@ -4523,7 +4283,7 @@ var re = (e, t) => {
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(e) {
-		this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Yt(e.rand), this.nodeForcesApplicationStrategy = tn({
+		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ht(e.rand), this.nodeForcesApplicationStrategy = Jt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4531,7 +4291,7 @@ var re = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new nn({
+		}), this.fillerLayoutAlgorithm = new Yt({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4541,7 +4301,7 @@ var re = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		return new Jt(t, i, {
+		return new Vt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
@@ -4553,7 +4313,7 @@ var re = (e, t) => {
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, pn = (e) => {
+}, on = (e) => {
 	let t = 1779033703, n = 3144134277, r = 1013904242, i = 2773480762;
 	for (let a = 0, o; a < e.length; a++) o = e.charCodeAt(a), t = n ^ Math.imul(t ^ o, 597399067), n = r ^ Math.imul(n ^ o, 2869860233), r = i ^ Math.imul(r ^ o, 951274213), i = t ^ Math.imul(i ^ o, 2716044179);
 	return t = Math.imul(r ^ t >>> 18, 597399067), n = Math.imul(i ^ n >>> 22, 2869860233), r = Math.imul(t ^ r >>> 17, 951274213), i = Math.imul(n ^ i >>> 19, 2716044179), t ^= n ^ r ^ i, n ^= t, r ^= t, i ^= t, [
@@ -4562,48 +4322,42 @@ var re = (e, t) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, mn = (e, t, n, r) => function() {
+}, sn = (e, t, n, r) => function() {
 	e |= 0, t |= 0, n |= 0, r |= 0;
 	let i = (e + t | 0) + r | 0;
 	return r = r + 1 | 0, e = t ^ t >>> 9, t = n + (n << 3) | 0, n = n << 21 | n >>> 11, n = n + i | 0, (i >>> 0) / 4294967296;
-}, hn = (e) => {
+}, cn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			let t = pn(e?.seed ?? K.seed);
-			return new fn({
-				rand: mn(t[0], t[1], t[2], t[3]),
-				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? K.maxTimeDeltaSec,
-				nodeCharge: e?.nodeCharge ?? K.nodeCharge,
-				nodeMass: e?.nodeMass ?? K.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? K.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? K.edgeStiffness,
-				convergenceVelocity: e?.convergenceVelocity ?? K.convergenceVelocity,
-				maxForce: e?.maxForce ?? K.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? K.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? K.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? K.barnesHutAreaRadiusThreshold
+			let t = 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
 			});
 		}
 	}
-}, gn = { staticNodeResolver: () => !1 }, _n = (e) => ({
-	algorithm: hn(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? gn.staticNodeResolver,
-	onBeforeApplied: e?.events?.onBeforeApplied ?? J,
-	onAfterApplied: e?.events?.onAfterApplied ?? J
-}), vn = (e) => e instanceof l ? {
+}, ln = { staticNodeResolver: () => !1 }, un = (e) => ({
+	algorithm: cn(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? ln.staticNodeResolver,
+	onBeforeApplied: e?.events?.onBeforeApplied ?? Y,
+	onAfterApplied: e?.events?.onAfterApplied ?? Y
+}), dn = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
-} : e === "topologyChangeMicrotask" ? {
-	type: "topologyChangeSchedule",
-	schedule: Qe
-} : e?.type === "topologyChangeMacrotask" ? {
-	type: "topologyChangeSchedule",
-	schedule: Ze
 } : {
 	type: "topologyChangeSchedule",
-	schedule: Qe
-}, yn = Object.freeze({
+	schedule: Ge
+}, fn = Object.freeze({
 	staticNodeResolver: () => !1,
 	hierarchicalLayout: {
 		layerWidth: 300,
@@ -4616,7 +4370,7 @@ var re = (e, t) => {
 	d: e.d * t.a + e.e * t.d,
 	e: e.d * t.b + e.e * t.e,
 	f: e.d * t.c + e.e * t.f + e.f
-}), bn = (e) => {
+}), pn = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4626,7 +4380,7 @@ var re = (e, t) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, xn = class {
+}, mn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4672,7 +4426,7 @@ var re = (e, t) => {
 		return this.createRelativeTransform(n, r);
 	}
 	createRelativeTransform(e, t) {
-		return Q(Q(t, e), bn(t));
+		return Q(Q(t, e), pn(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4715,7 +4469,7 @@ var re = (e, t) => {
 			f: 0
 		};
 	}
-}, Sn = (e) => {
+}, hn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4725,7 +4479,7 @@ var re = (e, t) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new xn();
+	}, r = new mn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
 		n = Q(n, t);
@@ -4736,47 +4490,47 @@ var re = (e, t) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, Cn = (e) => {
+}, gn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return un;
-		case "incoming": return dn;
-		default: return ln;
+		case "outgoing": return nn;
+		case "incoming": return rn;
+		default: return tn;
 	}
-}, wn = (e) => {
+}, _n = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		case "hierarchical": return new cn({
-			layerWidth: e.layerWidth ?? yn.hierarchicalLayout.layerWidth,
-			layerSpace: e.layerSpace ?? yn.hierarchicalLayout.layerSpace,
-			transform: Sn(e.transform),
-			nextLayerNodesResolver: Cn(e.nextLayerNodesResolver)
+		case "hierarchical": return new en({
+			layerWidth: e.layerWidth ?? fn.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? fn.hierarchicalLayout.layerSpace,
+			transform: hn(e.transform),
+			nextLayerNodesResolver: gn(e.nextLayerNodesResolver)
 		});
 		default: {
-			let t = pn(e?.seed ?? K.seed), n = mn(t[0], t[1], t[2], t[3]);
-			return new rn({
-				dtSec: e?.dtSec ?? K.dtSec,
-				maxIterations: e?.maxIterations ?? K.maxIterations,
+			let t = on(e?.seed ?? q.seed), n = sn(t[0], t[1], t[2], t[3]);
+			return new Xt({
+				dtSec: e?.dtSec ?? q.dtSec,
+				maxIterations: e?.maxIterations ?? q.maxIterations,
 				rand: n,
-				nodeCharge: e?.nodeCharge ?? K.nodeCharge,
-				nodeMass: e?.nodeMass ?? K.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? K.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? K.edgeStiffness,
-				convergenceVelocity: e?.convergenceVelocity ?? K.convergenceVelocity,
-				maxForce: e?.maxForce ?? K.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? K.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? K.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? K.barnesHutAreaRadiusThreshold
+				nodeCharge: e?.nodeCharge ?? 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
 			});
 		}
 	}
-}, Tn = (e) => ({
-	algorithm: wn(e.algorithm),
-	applyOn: vn(e.applyOn),
-	staticNodeResolver: e.staticNodeResolver ?? yn.staticNodeResolver,
-	onBeforeApplied: e.events?.onBeforeApplied ?? J,
-	onAfterApplied: e.events?.onAfterApplied ?? J
-}), En = (e, t) => ({
+}, vn = (e) => ({
+	algorithm: _n(e.algorithm),
+	applyOn: dn(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? fn.staticNodeResolver,
+	onBeforeApplied: e.events?.onBeforeApplied ?? Y,
+	onAfterApplied: e.events?.onAfterApplied ?? Y
+}), yn = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4784,7 +4538,7 @@ var re = (e, t) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), Dn = (e, t) => {
+}), bn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4792,20 +4546,20 @@ var re = (e, t) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, On = (e, t) => ({
+}, xn = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), $ = (e) => () => e, kn = $(0), An = () => {
+}), $ = (e) => () => e, Sn = $(0), Cn = () => {
 	let e = 0;
 	return () => e++;
-}, jn = (e, t) => {
-	let n = kn, r = kn, i = An();
+}, wn = (e, t) => {
+	let n = Sn, r = Sn, i = Cn();
 	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = $(e)), typeof t == "number" && (r = $(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
 		nodesPriorityFn: n,
 		edgesPriorityFn: r
 	};
-}, Mn = (e) => {
-	let t = jn(e.nodes?.priority, e.edges?.priority);
+}, Tn = (e) => {
+	let t = wn(e.nodes?.priority, e.edges?.priority);
 	return {
 		nodes: {
 			centerFn: e.nodes?.centerFn ?? ie,
@@ -4813,34 +4567,34 @@ var re = (e, t) => {
 		},
 		ports: { direction: e.ports?.direction ?? 0 },
 		edges: {
-			shapeFactory: Y(e.edges?.shape ?? {}),
+			shapeFactory: Et(e.edges?.shape ?? {}),
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, Nn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, Pn = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? Nn(e.layoutParams) : B;
+}, En = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : z, Dn = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? En(e.layoutParams) : z;
 	return { focus: {
-		contentPadding: t.focus?.contentPadding ?? t.focus?.contentOffset ?? 100,
+		contentPadding: t.focus?.contentPadding ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, Fn = (e) => ({
+}, On = (e) => ({
 	onNodeSelected: e.onNodeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), In = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
+}), kn = (e) => ({
 	onCanvasSelected: e.onCanvasSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), Ln = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
+}), An = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? q.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? q.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? q.movementThreshold
-}), Rn = class {
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? J.mouseDownEventVerifier,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? J.mouseUpEventVerifier,
+	movementThreshold: e.movementThreshold ?? J.movementThreshold
+}), jn = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4867,7 +4621,7 @@ var re = (e, t) => {
 	window = window;
 	animationStaticNodes = /* @__PURE__ */ new Set();
 	pointInsideVerifier;
-	eventTagger = new ot();
+	eventTagger = new $e();
 	constructor(e) {
 		this.element = e, this.pointInsideVerifier = new ee(e, this.window);
 	}
@@ -4911,40 +4665,40 @@ var re = (e, t) => {
 		return this.userSelectableCanvasConfig = e, this;
 	}
 	build() {
-		if (this.used) throw new qt("Failed to build Canvas because CanvasBuilder is a single-use object");
+		if (this.used) throw new Bt("Failed to build Canvas because CanvasBuilder is a single-use object");
 		this.used = !0;
-		let e = new y(this.element), t = new h(), n = new Mt(this.element), r = this.createHtmlView(n.main, t, e), i = Mn(this.canvasDefaults), a = new Xe(t, r, i), o = Tn(this.layoutConfig), s = new rt(t, e, Pn({
+		let e = new y(this.element), t = new h(), n = new wt(this.element), r = this.createHtmlView(n.main, t, e), i = Tn(this.canvasDefaults), a = new We(t, r, i), o = vn(this.layoutConfig), s = new Xe(t, e, Dn({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
-		}), this.window), c = new $e(e), l = new d(new Ye(t), c, a, s);
-		if (this.hasBackground && gt.configure(l, Ht(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
-			let e = Ln(this.userSelectableEdgesConfig);
-			Dt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+		}), this.window), c = new Ke(e), l = new d(new Ue(t), c, a, s);
+		if (this.hasBackground && ct.configure(l, Ft(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = An(this.userSelectableEdgesConfig);
+			yt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = Fn(this.userSelectableNodesConfig);
-			Et.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = On(this.userSelectableNodesConfig);
+			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = In(this.userSelectableCanvasConfig);
-			Ot.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = kn(this.userSelectableCanvasConfig);
+			bt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Pt(this.dragConfig);
-			this.hasAnimatedLayout && (e = En(e, this.animationStaticNodes)), ut.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = Dt(this.dragConfig);
+			this.hasAnimatedLayout && (e = yn(e, this.animationStaticNodes)), nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = Ut(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
-			_t.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = It(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
+			lt.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
 		if (this.hasUserDraggableEdges) {
-			let t = Wt(this.draggableEdgesConfig, l.graph);
-			vt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
+			let t = Lt(this.draggableEdgesConfig, l.graph);
+			ut.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && dt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, zt(this.transformConfig)) : ft.configure(l, n.main, this.window, zt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Gt(this.virtualScrollConfig)), this.hasLayout && St.configure(l, o), this.hasAnimatedLayout) {
-			let e = _n(this.animatedLayoutConfig);
-			this.hasDraggableNodes && (Dn(l, this.animationStaticNodes), e = On(e, this.animationStaticNodes)), Tt.configure(l, e, this.window);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && rt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, Mt(this.transformConfig)) : it.configure(l, n.main, this.window, Mt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Rt(this.virtualScrollConfig)), this.hasLayout && mt.configure(l, o), this.hasAnimatedLayout) {
+			let e = un(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (bn(l, this.animationStaticNodes), e = xn(e, this.animationStaticNodes)), _t.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4952,8 +4706,8 @@ var re = (e, t) => {
 	}
 	createHtmlView(e, t, n) {
 		let r = new a(t, n, e);
-		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Kt(this.virtualScrollConfig))), r = new c(r, t), r;
+		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, zt(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-export { je as BezierEdgeShape, Rn as CanvasBuilder, qt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, Ne as HorizontalEdgeShape, Ke as InteractiveEdgeError, qe as InteractiveEdgeShape, Je as MidpointEdgeShape, ze as OrthogonalEdgeShape, Pe as StraightEdgeShape, Le as VerticalEdgeShape, Be as boxPortOffsetFn };
+export { 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 };