@html-graph/html-graph 9.0.0 → 9.2.0

package/dist/html-graph.min.js

@@ -522,7 +522,7 @@ var e = /* @__PURE__ */ function(e) {
 		if (t.from !== void 0 || t.to !== void 0) {
 			if (t.from !== void 0 && !this.hasPort(t.from)) throw new p(m.updateNonexistentEdgeSource(e, t.from));
 			if (t.to !== void 0 && !this.hasPort(t.to)) throw new p(m.updateNonexistentEdgeTarget(e, t.to));
-			let n = this.getEdge(e), r = n.payload;
+			let n = this.getEdge(e), { payload: r } = n;
 			this.removeEdgeInternal(e), this.addEdgeInternal({
 				id: e,
 				from: t.from ?? n.from,
@@ -531,7 +531,7 @@ var e = /* @__PURE__ */ function(e) {
 				priority: r.priority
 			});
 		}
-		let n = this.edges.get(e);
+		let n = this.getEdge(e);
 		t.shape !== void 0 && (n.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (n.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
 	}
 	getAllEdgeIds() {
@@ -750,16 +750,16 @@ var e = /* @__PURE__ */ function(e) {
 			direction: e.portDirection
 		}]
 	};
-}, ee = (e, t) => {
-	let n = t;
-	for (; n !== null;) {
-		let t = e.findPortIdsByElement(n)[0] ?? null;
+}, ee = (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* te(e, t) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var ne = (e, t) => {
-	let n = te(document, t);
-	for (let t of n) {
-		let n = ee(e, t);
-		if (n.status === "portFound") return n.portId;
-		if (n.status === "nodeEncountered") return null;
+var ne = (e, t, n) => {
+	let r = te(document, t);
+	for (let t of r) {
+		let r = ee(e, t, n);
+		if (r.status === "portFound") return r.portId;
+		if (r.status === "nodeEncountered") return null;
 	}
 	return null;
 }, E = /* @__PURE__ */ function(e) {
@@ -2321,8 +2321,8 @@ var ne = (e, t) => {
 	onPortMouseDown = (e) => {
 		let t = e;
 		if (!this.params.mouseDownEventVerifier(t)) return;
-		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n)[0];
-		this.params.onPointerDownVerifier(r, {
+		let n = e.currentTarget, r = this.canvas.graph.findPortIdsByElement(n), i = this.params.grabbedPortIdResolver(r);
+		i !== null && this.params.onPointerDownVerifier(i, {
 			x: t.clientX,
 			y: t.clientY
 		}) && (this.eventTagger.tag(e, V), this.window.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.window.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 }));
@@ -2519,7 +2519,7 @@ var ne = (e, t) => {
 	resolve() {
 		return this.direction;
 	}
-}, tt = class e {
+}, K = (e) => e.length > 0 ? e[0] : null, tt = class e {
 	canvas;
 	element;
 	window;
@@ -2678,7 +2678,7 @@ var ne = (e, t) => {
 		let e = this.grabbedNodeState.nodeId;
 		this.graph.hasNode(e) && this.params.onNodeDragFinished(e), this.grabbedNodeState = null;
 	}
-}, K = (e) => {
+}, q = (e) => {
 	let t = [], n = e.touches.length;
 	for (let r = 0; r < n; r++) t.push([e.touches[r].clientX, e.touches[r].clientY]);
 	let r = t.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]), i = [r[0] / n, r[1] / n], a = t.map((e) => [e[0] - i[0], e[1] - i[1]]).reduce((e, t) => e + Math.sqrt(t[0] * t[0] + t[1] * t[1]), 0);
@@ -2728,14 +2728,14 @@ var ne = (e, t) => {
 	onTouchStart = (e) => {
 		if (!this.eventTagger.has(e, V)) {
 			if (this.prevTouches !== null) {
-				this.prevTouches = K(e);
+				this.prevTouches = q(e);
 				return;
 			}
-			this.prevTouches = K(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }), this.startRegisteredTransform();
+			this.prevTouches = q(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, { passive: !0 }), this.window.addEventListener("touchend", this.onWindowTouchFinish, { passive: !0 }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, { passive: !0 }), this.startRegisteredTransform();
 		}
 	};
 	onWindowTouchMove = (e) => {
-		let t = K(e);
+		let t = q(e);
 		if (!t.touches.every((e) => this.pointInsideVerifier.verify(e[0], e[1]))) {
 			this.stopTouchDrag();
 			return;
@@ -2751,7 +2751,7 @@ var ne = (e, t) => {
 		this.prevTouches = t;
 	};
 	onWindowTouchFinish = (e) => {
-		e.touches.length > 0 ? this.prevTouches = K(e) : this.stopTouchDrag();
+		e.touches.length > 0 ? this.prevTouches = q(e) : this.stopTouchDrag();
 	};
 	preventWheelScaleListener = (e) => {
 		e.preventDefault();
@@ -2976,7 +2976,8 @@ var ne = (e, t) => {
 			onPointerOutside: () => {
 				let e = this.edgeInProgress;
 				this.resetDragState(), this.params.onEdgeCreationInterrupted(e);
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		Ze.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
@@ -3017,16 +3018,19 @@ var ne = (e, t) => {
 		this.edgeInProgress = null, this.overlayCanvas.clear();
 	}
 	tryCreateConnection(e) {
-		let t = ne(this.canvas.graph, e);
+		let t = ne(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (t === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
-		let n = G(this.edgeInProgress, t), r = this.params.connectionAllowedVerifier(n), i = this.params.connectionPreprocessor({
-			from: n.from,
-			to: n.to
-		});
-		r && i !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(i), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+		let n = G(this.edgeInProgress, t);
+		if (this.params.connectionAllowedVerifier(n)) {
+			let e = this.params.connectionPreprocessor({
+				from: n.from,
+				to: n.to
+			});
+			this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(e), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
+		} else this.params.onEdgeCreationPrevented(n);
 	}
 	moveDraggingPort(e) {
 		let t = this.overlayLayer.getBoundingClientRect(), n = this.canvas.viewport.createContentCoords({
@@ -3076,7 +3080,8 @@ var ne = (e, t) => {
 					shape: e.shape,
 					priority: e.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		Ze.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, s);
 	}
@@ -3146,7 +3151,7 @@ var ne = (e, t) => {
 		}).updatePort(E.DraggingNodeId, { direction: i });
 	}
 	tryCreateConnection(e) {
-		let t = ne(this.canvas.graph, e);
+		let t = ne(this.canvas.graph, e, this.params.releasedPortIdResolver);
 		if (this.overlayCanvas.removeEdge(E.EdgeId), t === null) {
 			let e = this.draggingEdgePayload;
 			this.params.onEdgeReattachInterrupted({
@@ -3281,17 +3286,16 @@ var ne = (e, t) => {
 		}), this.params.onAfterApplied();
 	}
 }, gt = class e {
-	win;
 	applier;
 	step = (e) => {
 		this.applier.apply(e);
 	};
 	constructor(e, t, n) {
-		this.win = n, this.applier = new ht(e, t.algorithm, {
+		this.applier = new ht(e, t.algorithm, {
 			staticNodeResolver: t.staticNodeResolver,
 			onBeforeApplied: t.onBeforeApplied,
 			onAfterApplied: t.onAfterApplied
-		}), new mt(this.win, this.step);
+		}), new mt(n, this.step);
 	}
 	static configure(t, n, r) {
 		new e(t, n, r);
@@ -3395,26 +3399,104 @@ var ne = (e, t) => {
 }, bt = () => {
 	let e = document.createElement("div");
 	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
-}, q = () => {
-	let e = document.createElement("div");
-	return e.style.position = "absolute", e.style.inset = "0", e;
 }, xt = () => {
-	let e = q();
-	return e.style.pointerEvents = "none", e;
-}, St = class {
-	element;
-	background = q();
-	main = q();
-	overlayConnectablePorts = xt();
-	overlayDraggableEdges = xt();
+	let e = document.createElement("div");
+	return e.style.position = "absolute", e;
+}, St = class e {
+	canvas;
+	mainElement;
+	overlayLayer;
+	pointInsideVerifier;
+	eventTagger;
+	win;
+	params;
 	host = bt();
+	selectionRectangleWrapper = xt();
+	initialContentPoint = null;
+	draggingViewportPoint = null;
+	eventHandledTag = V;
+	onAfterViewportUpdated = () => {
+		this.updateSelectionRectangle();
+	};
+	onCanvasMouseDown = (e) => {
+		let t = e;
+		if (!this.params.mouseDownEventVerifier(t) || this.eventTagger.has(e, this.eventHandledTag)) return;
+		this.params.onSelectionStarted();
+		let n = this.mainElement.getBoundingClientRect(), r = {
+			x: t.clientX - n.x,
+			y: t.clientY - n.y
+		};
+		this.initialContentPoint = this.canvas.viewport.createContentCoords(r), this.draggingViewportPoint = r, this.updateSelectionRectangle(), this.host.appendChild(this.selectionRectangleWrapper), this.win.addEventListener("mousemove", this.onWindowMouseMove, { passive: !0 }), this.win.addEventListener("mouseup", this.onWindowMouseUp, { passive: !0 });
+	};
+	onWindowMouseMove = (e) => {
+		let t = e;
+		if (!this.pointInsideVerifier.verify(t.clientX, t.clientY)) {
+			this.removeMouseListeners(), this.interruptSelection();
+			return;
+		}
+		let n = this.mainElement.getBoundingClientRect(), r = {
+			x: t.clientX - n.x,
+			y: t.clientY - n.y
+		};
+		this.draggingViewportPoint = r, this.updateSelectionRectangle();
+		let i = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.params.onSelectionChange(i);
+	};
+	onWindowMouseUp = (e) => {
+		let t = e;
+		this.params.mouseUpEventVerifier(t) && (this.removeMouseListeners(), this.finishSelection());
+	};
+	constructor(e, t, n, r, i, a, o) {
+		this.canvas = e, this.mainElement = t, this.overlayLayer = n, this.pointInsideVerifier = r, this.eventTagger = i, this.win = a, this.params = o, this.overlayLayer.appendChild(this.host), this.selectionRectangleWrapper.appendChild(this.params.rectangleElement), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.mainElement.addEventListener("mousedown", this.onCanvasMouseDown, { passive: !0 }), this.canvas.onBeforeDestroy.subscribe(() => {
+			this.mainElement.removeEventListener("mousedown", this.onCanvasMouseDown), this.removeMouseListeners();
+		});
+	}
+	static configure(t, n, r, i, a, o, s) {
+		new e(t, n, r, i, a, o, s);
+	}
+	updateSelectionRectangle() {
+		if (this.initialContentPoint === null || this.draggingViewportPoint === null) return;
+		let e = this.canvas.viewport.createViewportCoords(this.initialContentPoint), t = this.draggingViewportPoint, n = Math.min(e.x, t.x), r = Math.min(e.y, t.y), i = Math.abs(t.x - e.x), a = Math.abs(t.y - e.y), { style: o } = this.selectionRectangleWrapper;
+		o.left = `${n}px`, o.top = `${r}px`, o.width = `${i}px`, o.height = `${a}px`;
+	}
+	removeMouseListeners() {
+		this.win.removeEventListener("mousemove", this.onWindowMouseMove), this.win.removeEventListener("mouseup", this.onWindowMouseUp);
+	}
+	finishSelection() {
+		let e = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection(), this.params.onSelectionFinished(e);
+	}
+	interruptSelection() {
+		let e = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection(), this.params.onSelectionInterrupted(e);
+	}
+	terminateSelection() {
+		this.host.removeChild(this.selectionRectangleWrapper), this.initialContentPoint = null, this.draggingViewportPoint = null;
+	}
+}, Ct = () => {
+	let e = document.createElement("div");
+	return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e;
+}, J = (e) => {
+	let t = document.createElement("div");
+	return t.style.position = "absolute", t.style.inset = "0", t.style.zIndex = `${e}`, t;
+}, wt = (e) => {
+	let t = J(e);
+	return t.style.pointerEvents = "none", t;
+}, Tt = class {
+	element;
+	background = J(0);
+	main = J(1);
+	overlayConnectablePorts = wt(1);
+	overlayDraggableEdges = wt(1);
+	overlayRectangularSelection = wt(2);
+	host = Ct();
 	constructor(e) {
-		this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
+		this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges), this.host.appendChild(this.overlayRectangularSelection);
 	}
 	destroy() {
-		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
+		this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.host.removeChild(this.overlayRectangularSelection), this.element.removeChild(this.host);
 	}
-}, J = Object.freeze({
+}, Y = Object.freeze({
 	seed: "HTMLGraph is awesome",
 	maxTimeDeltaSec: .01,
 	nodeCharge: 1e5,
@@ -3423,16 +3505,12 @@ var ne = (e, t) => {
 	edgeStiffness: 1e3,
 	dtSec: .01,
 	maxIterations: 1e3,
-	convergenceVelocity: 10,
+	stopVelocity: 10,
 	maxForce: 1e7,
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
-}), Y = Object.freeze({
-	mouseDownEventVerifier: (e) => e.button === 0,
-	mouseUpEventVerifier: (e) => e.button === 0,
-	movementThreshold: 10
-}), X = () => {}, Ct = (e, t, n) => e === "nearest-connectable-port" ? new $e(t, n) : typeof e == "number" ? new et(e) : new et(void 0), wt = (e) => {
+}), X = () => {}, Et = (e, t, n) => e === "nearest-connectable-port" ? new $e(t, n) : typeof e == "number" ? new et(e) : new et(void 0), Dt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
 		case "straight": return () => new Ae({
@@ -3484,21 +3562,21 @@ var ne = (e, t) => {
 			detourDirection: e.detourDirection
 		});
 	}
-}, Tt = (e) => {
-	let t = e.nodeDragVerifier ?? (() => !0), n = e.moveOnTop !== !1, r = e.moveEdgesOnTop !== !1 && n, i = e.mouse?.dragCursor, a = i === void 0 ? "grab" : i, o = e.mouse?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e.mouse?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c;
+}, Ot = (e) => e.button === 0 && e.ctrlKey, Z = (e) => e.button === 0, Q = (e) => e.button === 0 && !e.ctrlKey, kt = (e) => {
+	let t = e.moveOnTop !== !1;
 	return {
-		moveOnTop: n,
-		moveEdgesOnTop: r,
-		dragCursor: a,
+		moveOnTop: t,
+		moveEdgesOnTop: e.moveEdgesOnTop !== !1 && t,
+		dragCursor: e.mouse?.dragCursor ?? "grab",
 		gridSize: e.gridSize ?? null,
-		mouseDownEventVerifier: s,
-		mouseUpEventVerifier: l,
+		mouseDownEventVerifier: e.mouse?.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouse?.mouseUpEventVerifier ?? Z,
 		onNodeDragStarted: e.events?.onNodeDragStarted ?? X,
 		onNodeDrag: e.events?.onNodeDrag ?? X,
-		nodeDragVerifier: t,
+		nodeDragVerifier: e.nodeDragVerifier ?? (() => !0),
 		onNodeDragFinished: e.events?.onNodeDragFinished ?? X
 	};
-}, Et = (e) => {
+}, At = (e) => {
 	let t = e.minX === null ? -Infinity : e.minX, n = e.maxX === null ? Infinity : e.maxX, r = e.minY === null ? -Infinity : e.minY, i = e.maxY === null ? Infinity : e.maxY;
 	return (e) => {
 		let a = e.nextTransform.x, o = e.nextTransform.y;
@@ -3512,7 +3590,7 @@ var ne = (e, t) => {
 			y: o
 		};
 	};
-}, Dt = (e) => {
+}, jt = (e) => {
 	let t = e.maxContentScale, n = e.minContentScale, r = t === null ? 0 : 1 / t, i = n === null ? Infinity : 1 / n;
 	return (e) => {
 		let t = e.prevTransform, n = e.nextTransform, a = n.scale, o = n.x, s = n.y;
@@ -3532,104 +3610,103 @@ var ne = (e, t) => {
 			y: s
 		};
 	};
-}, Ot = (e) => (t) => e.reduce((e, n) => n({
+}, Mt = (e) => (t) => e.reduce((e, n) => n({
 	prevTransform: t.prevTransform,
 	nextTransform: e,
 	viewport: t.viewport
-}), t.nextTransform), kt = (e) => {
+}), t.nextTransform), Nt = (e) => {
 	if (typeof e == "function") return e;
 	switch (e.type) {
-		case "scale-limit": return Dt({
+		case "scale-limit": return jt({
 			minContentScale: e.minContentScale ?? 0,
 			maxContentScale: e.maxContentScale ?? Infinity
 		});
-		case "shift-limit": return Et({
+		case "shift-limit": return At({
 			minX: e.minX ?? -Infinity,
 			maxX: e.maxX ?? Infinity,
 			minY: e.minY ?? -Infinity,
 			maxY: e.maxY ?? Infinity
 		});
 	}
-}, At = (e) => {
-	let t = e?.scale?.mouseWheelSensitivity, n = t === void 0 ? 1.2 : t, r = e?.transformPreprocessor, i;
-	i = r === void 0 ? (e) => e.nextTransform : Array.isArray(r) ? Ot(r.map((e) => kt(e))) : kt(r);
-	let a = e?.pan?.cursor === void 0 ? "grab" : e.pan.cursor, o = e?.pan?.mouseDownEventVerifier, s = o === void 0 ? (e) => e.button === 0 : o, c = e?.pan?.mouseUpEventVerifier, l = c === void 0 ? (e) => e.button === 0 : c, u = e?.scale?.mouseWheelEventVerifier, d = u === void 0 ? () => !0 : u;
-	return {
-		wheelSensitivity: n,
+}, Pt = (e) => {
+	let t = e?.transformPreprocessor, n;
+	return n = t === void 0 ? (e) => e.nextTransform : Array.isArray(t) ? Mt(t.map((e) => Nt(e))) : Nt(t), {
+		wheelSensitivity: e?.scale?.mouseWheelSensitivity ?? 1.2,
 		onTransformStarted: e?.events?.onTransformStarted ?? X,
 		onTransformFinished: e?.events?.onTransformFinished ?? X,
 		onBeforeTransformChange: e?.events?.onBeforeTransformChange ?? X,
 		onTransformChange: e?.events?.onTransformChange ?? X,
-		transformPreprocessor: i,
-		shiftCursor: a,
-		mouseDownEventVerifier: s,
-		mouseUpEventVerifier: l,
-		mouseWheelEventVerifier: d,
+		transformPreprocessor: n,
+		shiftCursor: e?.pan?.cursor ?? "grab",
+		mouseDownEventVerifier: e?.pan?.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e?.pan?.mouseUpEventVerifier ?? Z,
+		mouseWheelEventVerifier: e?.scale?.mouseWheelEventVerifier ?? (() => !0),
 		scaleWheelFinishTimeout: e?.scale?.wheelFinishTimeout ?? 500,
 		onResizeTransformStarted: e?.events?.onResizeTransformStarted ?? X,
 		onResizeTransformFinished: e?.events?.onResizeTransformFinished ?? X
 	};
-}, jt = (e, t) => {
+}, Ft = (e, t) => {
 	let n = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 	return n.setAttribute("cx", "0"), n.setAttribute("cy", "0"), n.setAttribute("r", `${e}`), n.setAttribute("fill", `${t}`), n;
-}, Mt = (e) => e instanceof SVGElement ? e : jt(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Nt = (e) => {
+}, It = (e) => e instanceof SVGElement ? e : Ft(e?.radius ?? 1.5, e?.color ?? "#d8d8d8"), Lt = (e) => {
 	let t = e.tileDimensions;
 	return {
 		tileWidth: t?.width ?? 25,
 		tileHeight: t?.height ?? 25,
-		renderer: Mt(e.renderer ?? {}),
+		renderer: It(e.renderer ?? {}),
 		maxViewportScale: e.maxViewportScale ?? 10
 	};
-}, Z = Object.freeze({
+}, Rt = Object.freeze({
 	connectionTypeResolver: () => "direct",
 	connectionPreprocessor: (e) => e,
-	connectionAllowedVerifier: () => !0,
-	mouseEventVerifier: (e) => e.button === 0
-}), Pt = (e, t, n) => {
-	let r = e.connectionAllowedVerifier ?? Z.connectionAllowedVerifier;
+	connectionAllowedVerifier: () => !0
+}), zt = (e, t, n) => {
+	let r = e.connectionAllowedVerifier ?? Rt.connectionAllowedVerifier;
 	return {
-		connectionTypeResolver: e.connectionTypeResolver ?? Z.connectionTypeResolver,
+		connectionTypeResolver: e.connectionTypeResolver ?? Rt.connectionTypeResolver,
 		connectionAllowedVerifier: r,
-		draggingPortDirectionResolver: Ct(e.dragPortDirection, n, r),
-		edgeShapeFactory: e.edgeShape === void 0 ? t : wt(e.edgeShape),
-		connectionPreprocessor: e.connectionPreprocessor ?? Z.connectionPreprocessor,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Z.mouseEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z.mouseEventVerifier,
+		draggingPortDirectionResolver: Et(e.dragPortDirection, n, r),
+		edgeShapeFactory: e.edgeShape === void 0 ? t : Dt(e.edgeShape),
+		connectionPreprocessor: e.connectionPreprocessor ?? Rt.connectionPreprocessor,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
 		onAfterEdgeCreated: e.events?.onAfterEdgeCreated ?? X,
 		onEdgeCreationInterrupted: e.events?.onEdgeCreationInterrupted ?? X,
-		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? X
+		onEdgeCreationPrevented: e.events?.onEdgeCreationPrevented ?? X,
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? K,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? K
 	};
-}, Q = Object.freeze({
+}, Bt = Object.freeze({
 	connectionAllowedVerifier: () => !0,
-	connectionPreprocessor: (e) => e,
-	mouseDownEventVerifier: (e) => e.button === 0,
-	mouseUpEventVerifier: (e) => e.button === 0
-}), Ft = (e, t) => {
+	connectionPreprocessor: (e) => e
+}), Vt = (e, t) => {
 	let n = (e) => {
 		let n = t.getPortAdjacentEdgeIds(e);
 		return n.length > 0 ? n[n.length - 1] : null;
-	}, r = e.connectionAllowedVerifier ?? Q.connectionAllowedVerifier;
+	}, r = e.connectionAllowedVerifier ?? Bt.connectionAllowedVerifier;
 	return {
-		connectionPreprocessor: e.connectionPreprocessor ?? Q.connectionPreprocessor,
+		connectionPreprocessor: e.connectionPreprocessor ?? Bt.connectionPreprocessor,
 		connectionAllowedVerifier: r,
-		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q.mouseDownEventVerifier,
-		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Q.mouseUpEventVerifier,
+		mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+		mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
 		draggingEdgeResolver: e.draggingEdgeResolver ?? n,
-		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : wt(e.draggingEdgeShape),
+		draggingEdgeShapeFactory: e.draggingEdgeShape === void 0 ? null : Dt(e.draggingEdgeShape),
 		onAfterEdgeReattached: e.events?.onAfterEdgeReattached ?? X,
 		onEdgeReattachInterrupted: e.events?.onEdgeReattachInterrupted ?? X,
 		onEdgeReattachPrevented: e.events?.onEdgeReattachPrevented ?? X,
-		draggingPortDirectionResolver: Ct(e.dragPortDirection, t, r)
+		draggingPortDirectionResolver: Et(e.dragPortDirection, t, r),
+		grabbedPortIdResolver: e.grabbedPortIdResolver ?? K,
+		releasedPortIdResolver: e.releasedPortIdResolver ?? K
 	};
-}, It = (e) => ({
+}, Ht = (e) => ({
 	nodeVerticalRadius: e.nodeContainingRadius.vertical,
 	nodeHorizontalRadius: e.nodeContainingRadius.horizontal
-}), Lt = (e) => ({
+}), Ut = (e) => ({
 	onAfterNodeDetached: e?.events?.onAfterNodeDetached ?? X,
 	onBeforeNodeAttached: e?.events?.onBeforeNodeAttached ?? X
-}), Rt = class extends Error {
+}), Wt = class extends Error {
 	name = "CanvasBuilderError";
-}, zt = class {
+}, Gt = class {
 	graph;
 	currentCoords;
 	dt;
@@ -3664,7 +3741,7 @@ var ne = (e, t) => {
 			d.x += l, d.y += u, f.x -= l, f.y -= u;
 		});
 	}
-}, Bt = class {
+}, Kt = class {
 	rand;
 	PI2 = 2 * Math.PI;
 	constructor(e) {
@@ -3687,11 +3764,11 @@ var ne = (e, t) => {
 			d: a
 		};
 	}
-}, Vt = (e) => {
+}, qt = (e) => {
 	if (e.distance === 0) return e.maxForce;
 	let t = e.coefficient * (e.sourceCharge * e.targetCharge / (e.distance * e.distance));
 	return Math.min(t, e.maxForce);
-}, Ht = class {
+}, Jt = class {
 	nodeCharge;
 	distanceVectorGenerator;
 	maxForce;
@@ -3703,7 +3780,7 @@ var ne = (e, t) => {
 		for (let i = 0; i < r; i++) {
 			let a = n[i];
 			for (let o = i + 1; o < r; o++) {
-				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = Vt({
+				let r = n[o], i = e.get(a), s = e.get(r), c = this.distanceVectorGenerator.create(i, s), l = qt({
 					coefficient: 1,
 					sourceCharge: this.nodeCharge,
 					targetCharge: this.nodeCharge,
@@ -3714,7 +3791,7 @@ var ne = (e, t) => {
 			}
 		}
 	}
-}, Ut = (e) => {
+}, Yt = (e) => {
 	if (e.size === 0) return {
 		centerX: 0,
 		centerY: 0,
@@ -3730,7 +3807,7 @@ var ne = (e, t) => {
 		centerY: (r + i) / 2,
 		radius: s / 2
 	};
-}, Wt = class {
+}, Xt = class {
 	root;
 	leaves = /* @__PURE__ */ new Map();
 	coords;
@@ -3886,7 +3963,7 @@ var ne = (e, t) => {
 			y: n / e.size
 		};
 	}
-}, Gt = class {
+}, Zt = class {
 	areaRadiusThreshold;
 	nodeMass;
 	nodeCharge;
@@ -3898,8 +3975,8 @@ var ne = (e, t) => {
 		this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
 	}
 	apply(e, t) {
-		let n = new Wt({
-			box: Ut(e),
+		let n = new Xt({
+			box: Yt(e),
 			coords: e,
 			areaRadiusThreshold: this.areaRadiusThreshold,
 			nodeMass: this.nodeMass,
@@ -4009,7 +4086,7 @@ var ne = (e, t) => {
 		});
 	}
 	calculateNodeRepulsiveForce(e) {
-		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = Vt({
+		let t = this.distanceVectorGenerator.create(e.sourceCoords, e.targetCoords), n = qt({
 			coefficient: this.nodeForceCoefficient,
 			sourceCharge: e.sourceCharge,
 			targetCharge: e.targetCharge,
@@ -4036,12 +4113,12 @@ var ne = (e, t) => {
 			this.applyForce(e.totalForce, t);
 		}
 	}
-}, Kt = (e) => e.theta === 0 ? new Ht({
+}, Qt = (e) => e.theta === 0 ? new Jt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
 	maxForce: e.maxForce
-}) : new Gt({
+}) : new Zt({
 	nodeCharge: e.nodeCharge,
 	nodeForceCoefficient: e.nodeForceCoefficient,
 	distanceVectorGenerator: e.distanceVectorGenerator,
@@ -4049,7 +4126,7 @@ var ne = (e, t) => {
 	theta: e.theta,
 	nodeMass: e.nodeMass,
 	areaRadiusThreshold: e.areaRadiusThreshold
-}), qt = class {
+}), $t = class {
 	rand;
 	sparsity;
 	constructor(e) {
@@ -4074,7 +4151,7 @@ var ne = (e, t) => {
 			});
 		}), r;
 	}
-}, Jt = class {
+}, en = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
 	fillerLayoutAlgorithm;
@@ -4083,9 +4160,9 @@ var ne = (e, t) => {
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
-	convergenceVelocity;
+	stopVelocity;
 	constructor(e) {
-		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.stopVelocity, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
+		this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.stopVelocity = e.stopVelocity, this.distanceVectorGenerator = new Kt(e.rand), this.nodeForcesApplicationStrategy = Qt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4093,7 +4170,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new $t({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4103,17 +4180,17 @@ var ne = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		for (let e = 0; e < this.maxIterations && !(new zt(t, r, {
+		for (let e = 0; e < this.maxIterations && !(new Gt(t, r, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: this.dtSec,
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity); e++);
+		}).apply() < this.stopVelocity); e++);
 		return r;
 	}
-}, Yt = class {
+}, tn = class {
 	graph;
 	nextLayerNodesResolver;
 	forest = /* @__PURE__ */ new Set();
@@ -4157,7 +4234,7 @@ var ne = (e, t) => {
 			}), r = e;
 		}
 	}
-}, Xt = class {
+}, nn = class {
 	params;
 	constructor(e) {
 		this.params = e;
@@ -4196,13 +4273,13 @@ var ne = (e, t) => {
 		}
 		return n - 2 * this.params.spaceAroundRadius;
 	}
-}, Zt = class {
+}, rn = class {
 	tree;
 	offsets = /* @__PURE__ */ new Map();
 	treeSpans = /* @__PURE__ */ new Map();
 	constructor(e, t) {
 		this.tree = e;
-		let n = t.spaceAroundRadius, r = new Xt({ spaceAroundRadius: n });
+		let n = t.spaceAroundRadius, r = new nn({ spaceAroundRadius: n });
 		[...this.tree.sequence].reverse().forEach((e) => {
 			let t = Array.from(e.children).map((e) => this.treeSpans.get(e.nodeId)), i = r.generate(t), a = 0;
 			e.children.forEach((e) => {
@@ -4218,19 +4295,19 @@ var ne = (e, t) => {
 	generate() {
 		return this.offsets;
 	}
-}, Qt = class {
+}, an = class {
 	params;
 	constructor(e) {
 		this.params = e;
 	}
 	calculateCoordinates(e) {
-		let t = /* @__PURE__ */ new Map(), n = new Yt(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
+		let t = /* @__PURE__ */ new Map(), n = new tn(e.graph, this.params.nextLayerNodesResolver).generate(), r = 0;
 		return n.forEach((e) => {
 			t.set(e.root.nodeId, {
 				x: r,
 				y: 0
 			});
-			let n = new Zt(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
+			let n = new rn(e, { spaceAroundRadius: this.params.layerSpace / 2 }).generate(), i = [e.root];
 			for (; i.length > 0;) {
 				let e = [];
 				r += this.params.layerWidth, i.forEach((i) => {
@@ -4247,7 +4324,7 @@ var ne = (e, t) => {
 			t.set(n, this.params.transform(e));
 		}), t;
 	}
-}, $t = (e) => {
+}, on = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
@@ -4256,29 +4333,29 @@ var ne = (e, t) => {
 		return t.getPort(n.from).nodeId;
 	});
 	return /* @__PURE__ */ new Set([...r, ...i]);
-}, en = (e) => {
+}, sn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeOutgoingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.to).nodeId;
 	});
 	return new Set(r);
-}, tn = (e) => {
+}, cn = (e) => {
 	let { graph: t, currentNodeId: n } = e, r = t.getNodeIncomingEdgeIds(n).map((e) => {
 		let n = t.getEdge(e);
 		return t.getPort(n.from).nodeId;
 	});
 	return new Set(r);
-}, nn = class {
+}, ln = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
-	convergenceVelocity;
+	stopVelocity;
 	maxTimeDeltaSec;
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(e) {
-		this.convergenceVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Bt(e.rand), this.nodeForcesApplicationStrategy = Kt({
+		this.stopVelocity = e.stopVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Kt(e.rand), this.nodeForcesApplicationStrategy = Qt({
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeCharge: e.nodeCharge,
 			maxForce: e.maxForce,
@@ -4286,7 +4363,7 @@ var ne = (e, t) => {
 			theta: e.barnesHutTheta,
 			areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
 			nodeMass: e.nodeMass
-		}), this.fillerLayoutAlgorithm = new qt({
+		}), this.fillerLayoutAlgorithm = new $t({
 			rand: e.rand,
 			sparsity: e.edgeEquilibriumLength
 		});
@@ -4296,19 +4373,19 @@ var ne = (e, t) => {
 			graph: t,
 			viewport: n
 		});
-		return new zt(t, i, {
+		return new Gt(t, i, {
 			distanceVectorGenerator: this.distanceVectorGenerator,
 			nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
 			dtSec: Math.min(r, this.maxTimeDeltaSec),
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((e) => {
+		}).apply() < this.stopVelocity && !t.getAllNodeIds().some((e) => {
 			let n = t.getNode(e);
 			return n.x === null || n.y === null;
 		}) ? /* @__PURE__ */ new Map() : i;
 	}
-}, rn = (e) => {
+}, un = (e) => {
 	let t = 1779033703, n = 3144134277, r = 1013904242, i = 2773480762;
 	for (let a = 0, o; a < e.length; a++) o = e.charCodeAt(a), t = n ^ Math.imul(t ^ o, 597399067), n = r ^ Math.imul(n ^ o, 2869860233), r = i ^ Math.imul(r ^ o, 951274213), i = t ^ Math.imul(i ^ o, 2716044179);
 	return t = Math.imul(r ^ t >>> 18, 597399067), n = Math.imul(i ^ n >>> 22, 2869860233), r = Math.imul(t ^ r >>> 17, 951274213), i = Math.imul(n ^ i >>> 19, 2716044179), t ^= n ^ r ^ i, n ^= t, r ^= t, i ^= t, [
@@ -4317,42 +4394,42 @@ var ne = (e, t) => {
 		r >>> 0,
 		i >>> 0
 	];
-}, an = (e, t, n, r) => function() {
+}, dn = (e, t, n, r) => function() {
 	e |= 0, t |= 0, n |= 0, r |= 0;
 	let i = (e + t | 0) + r | 0;
 	return r = r + 1 | 0, e = t ^ t >>> 9, t = n + (n << 3) | 0, n = n << 21 | n >>> 11, n = n + i | 0, (i >>> 0) / 4294967296;
-}, on = (e) => {
+}, fn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
 		default: {
-			let t = rn(e?.seed ?? J.seed);
-			return new nn({
-				rand: an(t[0], t[1], t[2], t[3]),
-				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? J.maxTimeDeltaSec,
-				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
-				nodeMass: e?.nodeMass ?? J.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
-				maxForce: e?.maxForce ?? J.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
+			let t = un(e?.seed ?? Y.seed);
+			return new ln({
+				rand: dn(t[0], t[1], t[2], t[3]),
+				maxTimeDeltaSec: e?.maxTimeDeltaSec ?? Y.maxTimeDeltaSec,
+				nodeCharge: e?.nodeCharge ?? Y.nodeCharge,
+				nodeMass: e?.nodeMass ?? Y.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? Y.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? Y.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? Y.stopVelocity,
+				maxForce: e?.maxForce ?? Y.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? Y.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? Y.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? Y.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, sn = { staticNodeResolver: () => !1 }, cn = (e) => ({
-	algorithm: on(e?.algorithm ?? {}),
-	staticNodeResolver: e?.staticNodeResolver ?? sn.staticNodeResolver,
+}, pn = { staticNodeResolver: () => !1 }, mn = (e) => ({
+	algorithm: fn(e?.algorithm ?? {}),
+	staticNodeResolver: e?.staticNodeResolver ?? pn.staticNodeResolver,
 	onBeforeApplied: e?.events?.onBeforeApplied ?? X,
 	onAfterApplied: e?.events?.onAfterApplied ?? X
-}), ln = (e) => e instanceof l ? {
+}), hn = (e) => e instanceof l ? {
 	type: "trigger",
 	trigger: e
 } : {
 	type: "topologyChangeSchedule",
 	schedule: We
-}, un = Object.freeze({
+}, gn = Object.freeze({
 	staticNodeResolver: () => !1,
 	hierarchicalLayout: {
 		layerWidth: 300,
@@ -4365,7 +4442,7 @@ var ne = (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
-}), dn = (e) => {
+}), _n = (e) => {
 	let { a: t, b: n, c: r, d: i, e: a, f: o } = e, s = t * a - n * i;
 	return {
 		a: a / s,
@@ -4375,7 +4452,7 @@ var ne = (e, t) => {
 		e: t / s,
 		f: (r * i - t * o) / s
 	};
-}, fn = class {
+}, vn = class {
 	resolve(e) {
 		if ("shift" in e) return this.createShiftBaseMatrix(e.shift);
 		if ("scale" in e) {
@@ -4421,7 +4498,7 @@ var ne = (e, t) => {
 		return this.createRelativeTransform(n, r);
 	}
 	createRelativeTransform(e, t) {
-		return $($(t, e), dn(t));
+		return $($(t, e), _n(t));
 	}
 	createShiftBaseMatrix(e) {
 		return {
@@ -4464,7 +4541,7 @@ var ne = (e, t) => {
 			f: 0
 		};
 	}
-}, pn = (e) => {
+}, yn = (e) => {
 	if (e === void 0) return (e) => e;
 	if (typeof e == "function") return e;
 	let t = Array.isArray(e) ? e : [e], n = {
@@ -4474,7 +4551,7 @@ var ne = (e, t) => {
 		d: 0,
 		e: 1,
 		f: 0
-	}, r = new fn();
+	}, r = new vn();
 	return t.forEach((e) => {
 		let t = r.resolve(e);
 		n = $(n, t);
@@ -4485,47 +4562,47 @@ var ne = (e, t) => {
 			y: n.d * t + n.e * r + n.f
 		};
 	};
-}, mn = (e) => {
+}, bn = (e) => {
 	if (typeof e == "function") return e;
 	switch (e) {
-		case "outgoing": return en;
-		case "incoming": return tn;
-		default: return $t;
+		case "outgoing": return sn;
+		case "incoming": return cn;
+		default: return on;
 	}
-}, hn = (e) => {
+}, xn = (e) => {
 	switch (e?.type) {
 		case "custom": return e.instance;
-		case "hierarchical": return new Qt({
-			layerWidth: e.layerWidth ?? un.hierarchicalLayout.layerWidth,
-			layerSpace: e.layerSpace ?? un.hierarchicalLayout.layerSpace,
-			transform: pn(e.transform),
-			nextLayerNodesResolver: mn(e.nextLayerNodesResolver)
+		case "hierarchical": return new an({
+			layerWidth: e.layerWidth ?? gn.hierarchicalLayout.layerWidth,
+			layerSpace: e.layerSpace ?? gn.hierarchicalLayout.layerSpace,
+			transform: yn(e.transform),
+			nextLayerNodesResolver: bn(e.nextLayerNodesResolver)
 		});
 		default: {
-			let t = rn(e?.seed ?? J.seed), n = an(t[0], t[1], t[2], t[3]);
-			return new Jt({
-				dtSec: e?.dtSec ?? J.dtSec,
-				maxIterations: e?.maxIterations ?? J.maxIterations,
+			let t = un(e?.seed ?? Y.seed), n = dn(t[0], t[1], t[2], t[3]);
+			return new en({
+				dtSec: e?.dtSec ?? Y.dtSec,
+				maxIterations: e?.maxIterations ?? Y.maxIterations,
 				rand: n,
-				nodeCharge: e?.nodeCharge ?? J.nodeCharge,
-				nodeMass: e?.nodeMass ?? J.nodeMass,
-				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? J.edgeEquilibriumLength,
-				edgeStiffness: e?.edgeStiffness ?? J.edgeStiffness,
-				stopVelocity: e?.stopVelocity ?? J.convergenceVelocity,
-				maxForce: e?.maxForce ?? J.maxForce,
-				nodeForceCoefficient: e?.nodeForceCoefficient ?? J.nodeForceCoefficient,
-				barnesHutTheta: e?.barnesHut?.theta ?? J.barnesHutTheta,
-				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? J.barnesHutAreaRadiusThreshold
+				nodeCharge: e?.nodeCharge ?? Y.nodeCharge,
+				nodeMass: e?.nodeMass ?? Y.nodeMass,
+				edgeEquilibriumLength: e?.edgeEquilibriumLength ?? Y.edgeEquilibriumLength,
+				edgeStiffness: e?.edgeStiffness ?? Y.edgeStiffness,
+				stopVelocity: e?.stopVelocity ?? Y.stopVelocity,
+				maxForce: e?.maxForce ?? Y.maxForce,
+				nodeForceCoefficient: e?.nodeForceCoefficient ?? Y.nodeForceCoefficient,
+				barnesHutTheta: e?.barnesHut?.theta ?? Y.barnesHutTheta,
+				barnesHutAreaRadiusThreshold: e?.barnesHut?.areaRadiusThreshold ?? Y.barnesHutAreaRadiusThreshold
 			});
 		}
 	}
-}, gn = (e) => ({
-	algorithm: hn(e.algorithm),
-	applyOn: ln(e.applyOn),
-	staticNodeResolver: e.staticNodeResolver ?? un.staticNodeResolver,
+}, Sn = (e) => ({
+	algorithm: xn(e.algorithm),
+	applyOn: hn(e.applyOn),
+	staticNodeResolver: e.staticNodeResolver ?? gn.staticNodeResolver,
 	onBeforeApplied: e.events?.onBeforeApplied ?? X,
 	onAfterApplied: e.events?.onAfterApplied ?? X
-}), _n = (e, t) => ({
+}), Cn = (e, t) => ({
 	...e,
 	onNodeDragStarted: (n) => {
 		t.add(n), e.onNodeDragStarted(n);
@@ -4533,7 +4610,7 @@ var ne = (e, t) => {
 	onNodeDragFinished: (n) => {
 		t.delete(n), e.onNodeDragFinished(n);
 	}
-}), vn = (e, t) => {
+}), wn = (e, t) => {
 	e.graph.onBeforeNodeRemoved.subscribe((e) => {
 		t.delete(e);
 	}), e.graph.onBeforeClear.subscribe(() => {
@@ -4541,20 +4618,20 @@ var ne = (e, t) => {
 	}), e.onBeforeDestroy.subscribe(() => {
 		t.clear();
 	});
-}, yn = (e, t) => ({
+}, Tn = (e, t) => ({
 	...e,
 	staticNodeResolver: (n) => e.staticNodeResolver(n) || t.has(n)
-}), bn = (e) => () => e, xn = bn(0), Sn = () => {
+}), En = (e) => () => e, Dn = En(0), On = () => {
 	let e = 0;
 	return () => e++;
-}, Cn = (e, t) => {
-	let n = xn, r = xn, i = Sn();
-	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = bn(e)), typeof t == "number" && (r = bn(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
+}, kn = (e, t) => {
+	let n = Dn, r = Dn, i = On();
+	return e === "incremental" && (n = i), t === "incremental" && (r = i), typeof e == "number" && (n = En(e)), typeof t == "number" && (r = En(t)), typeof e == "function" && (n = e), typeof t == "function" && (r = t), {
 		nodesPriorityFn: n,
 		edgesPriorityFn: r
 	};
-}, wn = (e) => {
-	let t = Cn(e.nodes?.priority, e.edges?.priority);
+}, An = (e) => {
+	let t = kn(e.nodes?.priority, e.edges?.priority);
 	return {
 		nodes: {
 			centerFn: e.nodes?.centerFn ?? re,
@@ -4562,34 +4639,45 @@ var ne = (e, t) => {
 		},
 		ports: { direction: e.ports?.direction ?? 0 },
 		edges: {
-			shapeFactory: wt(e.edges?.shape ?? {}),
+			shapeFactory: Dt(e.edges?.shape ?? {}),
 			priorityFn: t.edgesPriorityFn
 		}
 	};
-}, Tn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, En = (e) => {
-	let { canvasDefaults: t } = e, n = e.hasLayout ? Tn(e.layoutParams) : B;
+}, jn = (e) => e.applyOn.type === "topologyChangeSchedule" ? e.applyOn.schedule : B, Mn = (e) => {
+	let { canvasDefaults: t } = e, n = e.hasLayout ? jn(e.layoutParams) : B;
 	return { focus: {
 		contentPadding: t.focus?.contentPadding ?? 100,
 		minContentScale: t.focus?.minContentScale ?? 0,
 		schedule: n,
 		animationDuration: t.focus?.animationDuration ?? 0
 	} };
-}, Dn = (e) => ({
+}, Nn = (e) => ({
 	onNodeSelected: e.onNodeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
-}), On = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), Pn = (e) => ({
 	onCanvasSelected: e.onCanvasSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
-}), kn = (e) => ({
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), Fn = (e) => ({
 	onEdgeSelected: e.onEdgeSelected,
-	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Y.mouseDownEventVerifier,
-	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Y.mouseUpEventVerifier,
-	movementThreshold: e.movementThreshold ?? Y.movementThreshold
-}), An = class {
+	mouseDownEventVerifier: e.mouseDownEventVerifier ?? Q,
+	mouseUpEventVerifier: e.mouseUpEventVerifier ?? Z,
+	movementThreshold: e.movementThreshold ?? 10
+}), In = () => {
+	let e = document.createElement("div");
+	return e.style.width = "100%", e.style.height = "100%", e.style.background = "rgba(174, 238, 255, 0.34)", e.style.border = "1px dashed rgba(96, 96, 96, 0.47)", e;
+}, Ln = (e) => ({
+	rectangleElement: e?.rectangleElement ?? In(),
+	mouseDownEventVerifier: e?.mouseDownEventVerifier ?? Ot,
+	mouseUpEventVerifier: e?.mouseUpEventVerifier ?? Z,
+	onSelectionStarted: e?.onSelectionStarted ?? X,
+	onSelectionChange: e?.onSelectionChange ?? X,
+	onSelectionInterrupted: e?.onSelectionInterrupted ?? X,
+	onSelectionFinished: e?.onSelectionFinished ?? X
+}), Rn = class {
 	element;
 	used = !1;
 	canvasDefaults = {};
@@ -4598,6 +4686,7 @@ var ne = (e, t) => {
 	backgroundConfig = {};
 	connectablePortsConfig = {};
 	draggableEdgesConfig = {};
+	rectangularSelectionConfig = void 0;
 	virtualScrollConfig = void 0;
 	layoutConfig = {};
 	animatedLayoutConfig = {};
@@ -4610,6 +4699,7 @@ var ne = (e, t) => {
 	hasBackground = !1;
 	hasUserConnectablePorts = !1;
 	hasUserDraggableEdges = !1;
+	hasRectangularSelection = !1;
 	hasAnimatedLayout = !1;
 	hasLayout = !1;
 	boxRenderingTrigger = new l();
@@ -4644,6 +4734,9 @@ var ne = (e, t) => {
 	enableUserDraggableEdges(e) {
 		return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
 	}
+	enableRectangularSelection(e) {
+		return this.hasRectangularSelection = !0, this.rectangularSelectionConfig = e, this;
+	}
 	enableLayout(e) {
 		return this.layoutConfig = e ?? {}, this.hasLayout = !0, this.hasAnimatedLayout = !1, this;
 	}
@@ -4660,40 +4753,40 @@ var ne = (e, t) => {
 		return this.userSelectableCanvasConfig = e, this;
 	}
 	build() {
-		if (this.used) throw new Rt("Failed to build Canvas because CanvasBuilder is a single-use object");
+		if (this.used) throw new Wt("Failed to build Canvas because CanvasBuilder is a single-use object");
 		this.used = !0;
-		let e = new y(this.element), t = new h(), n = new St(this.element), r = this.createHtmlView(n.main, t, e), i = wn(this.canvasDefaults), a = new Ue(t, r, i), o = gn(this.layoutConfig), s = new Ye(t, e, En({
+		let e = new y(this.element), t = new h(), n = new Tt(this.element), r = this.createHtmlView(n.main, t, e), i = An(this.canvasDefaults), a = new Ue(t, r, i), o = Sn(this.layoutConfig), s = new Ye(t, e, Mn({
 			canvasDefaults: this.canvasDefaults,
 			hasLayout: this.hasLayout,
 			layoutParams: o
 		}), this.window), c = new Ge(e), l = new d(new He(t), c, a, s);
-		if (this.hasBackground && st.configure(l, Nt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
-			let e = kn(this.userSelectableEdgesConfig);
+		if (this.hasBackground && st.configure(l, Lt(this.backgroundConfig), n.background), this.hasNodeResizeReactiveEdges && b.configure(l), this.userSelectableEdgesConfig !== void 0) {
+			let e = Fn(this.userSelectableEdgesConfig);
 			vt.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableNodesConfig !== void 0) {
-			let e = Dn(this.userSelectableNodesConfig);
+			let e = Nn(this.userSelectableNodesConfig);
 			_t.configure(l, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.userSelectableCanvasConfig !== void 0) {
-			let e = On(this.userSelectableCanvasConfig);
+			let e = Pn(this.userSelectableCanvasConfig);
 			yt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasDraggableNodes) {
-			let e = Tt(this.dragConfig);
-			this.hasAnimatedLayout && (e = _n(e, this.animationStaticNodes)), tt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
+			let e = kt(this.dragConfig);
+			this.hasAnimatedLayout && (e = Cn(e, this.animationStaticNodes)), tt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, e);
 		}
 		if (this.hasUserConnectablePorts) {
-			let t = Pt(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
+			let t = zt(this.connectablePortsConfig, i.edges.shapeFactory, l.graph);
 			ct.configure(l, n.overlayConnectablePorts, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
 		if (this.hasUserDraggableEdges) {
-			let t = Ft(this.draggableEdgesConfig, l.graph);
+			let t = Vt(this.draggableEdgesConfig, l.graph);
 			lt.configure(l, n.overlayDraggableEdges, e, this.window, this.pointInsideVerifier, this.eventTagger, t);
 		}
-		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, At(this.transformConfig)) : rt.configure(l, n.main, this.window, At(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, It(this.virtualScrollConfig)), this.hasLayout && pt.configure(l, o), this.hasAnimatedLayout) {
-			let e = cn(this.animatedLayoutConfig);
-			this.hasDraggableNodes && (vn(l, this.animationStaticNodes), e = yn(e, this.animationStaticNodes)), gt.configure(l, e, this.window);
+		if (this.virtualScrollConfig === void 0 ? this.hasTransformableViewport && nt.configure(l, n.main, this.window, this.pointInsideVerifier, this.eventTagger, Pt(this.transformConfig)) : rt.configure(l, n.main, this.window, Pt(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, Ht(this.virtualScrollConfig)), this.hasRectangularSelection && St.configure(l, n.main, n.overlayRectangularSelection, this.pointInsideVerifier, this.eventTagger, this.window, Ln(this.rectangularSelectionConfig)), this.hasLayout && pt.configure(l, o), this.hasAnimatedLayout) {
+			let e = mn(this.animatedLayoutConfig);
+			this.hasDraggableNodes && (wn(l, this.animationStaticNodes), e = Tn(e, this.animationStaticNodes)), gt.configure(l, e, this.window);
 		}
 		return l.onBeforeDestroy.subscribe(() => {
 			n.destroy();
@@ -4701,8 +4794,8 @@ var ne = (e, t) => {
 	}
 	createHtmlView(e, t, n) {
 		let r = new a(t, n, e);
-		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Lt(this.virtualScrollConfig))), r = new c(r, t), r;
+		return this.virtualScrollConfig !== void 0 && (r = new s(r, t, this.boxRenderingTrigger, Ut(this.virtualScrollConfig))), r = new c(r, t), r;
 	}
 };
 //#endregion
-export { ke as BezierEdgeShape, An as CanvasBuilder, Rt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, ze as InteractiveEdgeError, Be as InteractiveEdgeShape, Ve as MidpointEdgeShape, Me as OrthogonalEdgeShape, Ae as StraightEdgeShape };
+export { ke as BezierEdgeShape, Rn as CanvasBuilder, Wt as CanvasBuilderError, p as CanvasError, e as ConnectionCategory, R as DirectEdgeShape, l as EventSubject, ze as InteractiveEdgeError, Be as InteractiveEdgeShape, Ve as MidpointEdgeShape, Me as OrthogonalEdgeShape, Ae as StraightEdgeShape };