@html-graph/html-graph 9.0.0 → 9.2.0

package/dist/html-graph.js

@@ -7,7 +7,7 @@ var ConnectionCategory = /* @__PURE__ */ function(ConnectionCategory) {
 }({});
 //#endregion
 //#region src/html-view/core-html-view/create-host/create-host.ts
-var createHost$1 = () => {
+var createHost$2 = () => {
 	const host = document.createElement("div");
 	host.style.width = "100%";
 	host.style.height = "100%";
@@ -49,7 +49,7 @@ var CoreHtmlView = class {
 	graphStore;
 	viewportStore;
 	element;
-	host = createHost$1();
+	host = createHost$2();
 	container = createContainer();
 	edgeIdToElementMap = /* @__PURE__ */ new Map();
 	attachedNodeIds = /* @__PURE__ */ new Set();
@@ -768,7 +768,7 @@ var GraphStore = class {
 			if (request.from !== void 0 && !this.hasPort(request.from)) throw new CanvasError(canvasErrorText.updateNonexistentEdgeSource(edgeId, request.from));
 			if (request.to !== void 0 && !this.hasPort(request.to)) throw new CanvasError(canvasErrorText.updateNonexistentEdgeTarget(edgeId, request.to));
 			const edge = this.getEdge(edgeId);
-			const payload = edge.payload;
+			const { payload } = edge;
 			this.removeEdgeInternal(edgeId);
 			this.addEdgeInternal({
 				id: edgeId,
@@ -778,7 +778,7 @@ var GraphStore = class {
 				priority: payload.priority
 			});
 		}
-		const edge = this.edges.get(edgeId);
+		const edge = this.getEdge(edgeId);
 		if (request.shape !== void 0) {
 			edge.payload.shape = request.shape;
 			this.afterEdgeShapeUpdatedEmitter.emit(edgeId);
@@ -1097,10 +1097,10 @@ var createAddNodeOverlayRequest = (payload) => {
 };
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-for-element/find-port-for-element.ts
-var findPortForElement = (graph, element) => {
+var findPortForElement = (graph, element, portIdResolver) => {
 	let elementBuf = element;
 	while (elementBuf !== null) {
-		const portId = graph.findPortIdsByElement(elementBuf)[0] ?? null;
+		const portId = portIdResolver(graph.findPortIdsByElement(elementBuf));
 		if (portId !== null) return {
 			status: "portFound",
 			portId
@@ -1124,10 +1124,10 @@ function* getElementsAtPoint(root, point) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var findPortAtPoint = (graph, point) => {
+var findPortAtPoint = (graph, point, portIdResolver) => {
 	const elements = getElementsAtPoint(document, point);
 	for (const element of elements) {
-		const result = findPortForElement(graph, element);
+		const result = findPortForElement(graph, element, portIdResolver);
 		if (result.status === "portFound") return result.portId;
 		if (result.status === "nodeEncountered") return null;
 	}
@@ -3333,7 +3333,9 @@ var DraggablePortsConfigurator = class DraggablePortsConfigurator {
 		const mouseEvent = event;
 		if (!this.params.mouseDownEventVerifier(mouseEvent)) return;
 		const target = event.currentTarget;
-		const portId = this.canvas.graph.findPortIdsByElement(target)[0];
+		const portIds = this.canvas.graph.findPortIdsByElement(target);
+		const portId = this.params.grabbedPortIdResolver(portIds);
+		if (portId === null) return;
 		if (!this.params.onPointerDownVerifier(portId, {
 			x: mouseEvent.clientX,
 			y: mouseEvent.clientY
@@ -3634,6 +3636,12 @@ var ConstantDraggingPortDirectionResolver = class {
 	}
 };
 //#endregion
+//#region src/configurators/shared/port-id-resolver/default-port-id-resolver/default-port-id-resolver.ts
+var defaultPortIdResolver = (portIds) => {
+	if (portIds.length > 0) return portIds[0];
+	return null;
+};
+//#endregion
 //#region src/configurators/user-draggable-nodes-configurator/user-draggable-nodes-configurator.ts
 var UserDraggableNodesConfigurator = class UserDraggableNodesConfigurator {
 	canvas;
@@ -4299,7 +4307,8 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 				const params = this.edgeInProgress;
 				this.resetDragState();
 				this.params.onEdgeCreationInterrupted(params);
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 	}
@@ -4353,18 +4362,17 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 		this.overlayCanvas.clear();
 	}
 	tryCreateConnection(cursor) {
-		const targetPortId = findPortAtPoint(this.canvas.graph, cursor);
+		const targetPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 		if (targetPortId === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
 		}
 		const request = resolveCreateEdgeRequest(this.edgeInProgress, targetPortId);
-		const connectionAllowed = this.params.connectionAllowedVerifier(request);
-		const processedRequest = this.params.connectionPreprocessor({
-			from: request.from,
-			to: request.to
-		});
-		if (connectionAllowed && processedRequest !== null) {
+		if (this.params.connectionAllowedVerifier(request)) {
+			const processedRequest = this.params.connectionPreprocessor({
+				from: request.from,
+				to: request.to
+			});
 			this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated);
 			this.canvas.addEdge(processedRequest);
 			this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
@@ -4434,7 +4442,8 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 					shape: edge.shape,
 					priority: edge.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 	}
@@ -4524,7 +4533,7 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 		}).updatePort(OverlayId.DraggingNodeId, { direction });
 	}
 	tryCreateConnection(cursor) {
-		const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
+		const draggingPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 		this.overlayCanvas.removeEdge(OverlayId.EdgeId);
 		if (draggingPortId === null) {
 			const edge = this.draggingEdgePayload;
@@ -4711,19 +4720,17 @@ var AnimatedLayoutApplier = class {
 //#endregion
 //#region src/configurators/animated-layout-configurator/animated-layout-configurator.ts
 var AnimatedLayoutConfigurator = class AnimatedLayoutConfigurator {
-	win;
 	applier;
 	step = (dt) => {
 		this.applier.apply(dt);
 	};
 	constructor(canvas, params, win) {
-		this.win = win;
 		this.applier = new AnimatedLayoutApplier(canvas, params.algorithm, {
 			staticNodeResolver: params.staticNodeResolver,
 			onBeforeApplied: params.onBeforeApplied,
 			onAfterApplied: params.onAfterApplied
 		});
-		new AnimationSeries(this.win, this.step);
+		new AnimationSeries(win, this.step);
 	}
 	static configure(canvas, params, win) {
 		new AnimatedLayoutConfigurator(canvas, params, win);
@@ -4863,6 +4870,134 @@ var UserSelectableCanvasConfigurator = class UserSelectableCanvasConfigurator {
 	}
 };
 //#endregion
+//#region src/configurators/rectangular-selection-configurator/create-host/create-host.ts
+var createHost$1 = () => {
+	const element = document.createElement("div");
+	element.style.width = "100%";
+	element.style.height = "100%";
+	element.style.position = "relative";
+	return element;
+};
+//#endregion
+//#region src/configurators/rectangular-selection-configurator/create-selection-rectangle-wrapper/create-selection-rectangle-wrapper.ts
+var createSelectionRectangleWrapper = () => {
+	const element = document.createElement("div");
+	element.style.position = "absolute";
+	return element;
+};
+//#endregion
+//#region src/configurators/rectangular-selection-configurator/rectangular-selection-configurator.ts
+var RectangularSelectionConfigurator = class RectangularSelectionConfigurator {
+	canvas;
+	mainElement;
+	overlayLayer;
+	pointInsideVerifier;
+	eventTagger;
+	win;
+	params;
+	host = createHost$1();
+	selectionRectangleWrapper = createSelectionRectangleWrapper();
+	initialContentPoint = null;
+	draggingViewportPoint = null;
+	eventHandledTag = dragEventHandledTag;
+	onAfterViewportUpdated = () => {
+		this.updateSelectionRectangle();
+	};
+	onCanvasMouseDown = (event) => {
+		const mouseEvent = event;
+		if (!this.params.mouseDownEventVerifier(mouseEvent)) return;
+		if (this.eventTagger.has(event, this.eventHandledTag)) return;
+		this.params.onSelectionStarted();
+		const rect = this.mainElement.getBoundingClientRect();
+		const cursorViewportCoords = {
+			x: mouseEvent.clientX - rect.x,
+			y: mouseEvent.clientY - rect.y
+		};
+		this.initialContentPoint = this.canvas.viewport.createContentCoords(cursorViewportCoords);
+		this.draggingViewportPoint = cursorViewportCoords;
+		this.updateSelectionRectangle();
+		this.host.appendChild(this.selectionRectangleWrapper);
+		this.win.addEventListener("mousemove", this.onWindowMouseMove, { passive: true });
+		this.win.addEventListener("mouseup", this.onWindowMouseUp, { passive: true });
+	};
+	onWindowMouseMove = (event) => {
+		const mouseEvent = event;
+		if (!this.pointInsideVerifier.verify(mouseEvent.clientX, mouseEvent.clientY)) {
+			this.removeMouseListeners();
+			this.interruptSelection();
+			return;
+		}
+		const rect = this.mainElement.getBoundingClientRect();
+		const cursorViewportCoords = {
+			x: mouseEvent.clientX - rect.x,
+			y: mouseEvent.clientY - rect.y
+		};
+		this.draggingViewportPoint = cursorViewportCoords;
+		this.updateSelectionRectangle();
+		const selectionRect = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.params.onSelectionChange(selectionRect);
+	};
+	onWindowMouseUp = (event) => {
+		const mouseEvent = event;
+		if (!this.params.mouseUpEventVerifier(mouseEvent)) return;
+		this.removeMouseListeners();
+		this.finishSelection();
+	};
+	constructor(canvas, mainElement, overlayLayer, pointInsideVerifier, eventTagger, win, params) {
+		this.canvas = canvas;
+		this.mainElement = mainElement;
+		this.overlayLayer = overlayLayer;
+		this.pointInsideVerifier = pointInsideVerifier;
+		this.eventTagger = eventTagger;
+		this.win = win;
+		this.params = params;
+		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: true });
+		this.canvas.onBeforeDestroy.subscribe(() => {
+			this.mainElement.removeEventListener("mousedown", this.onCanvasMouseDown);
+			this.removeMouseListeners();
+		});
+	}
+	static configure(canvas, mainElement, overlayLayer, pointInsideVerifier, eventTagger, win, params) {
+		new RectangularSelectionConfigurator(canvas, mainElement, overlayLayer, pointInsideVerifier, eventTagger, win, params);
+	}
+	updateSelectionRectangle() {
+		if (this.initialContentPoint === null || this.draggingViewportPoint === null) return;
+		const initialViewportPoint = this.canvas.viewport.createViewportCoords(this.initialContentPoint);
+		const draggingViewportPoint = this.draggingViewportPoint;
+		const x = Math.min(initialViewportPoint.x, draggingViewportPoint.x);
+		const y = Math.min(initialViewportPoint.y, draggingViewportPoint.y);
+		const width = Math.abs(draggingViewportPoint.x - initialViewportPoint.x);
+		const height = Math.abs(draggingViewportPoint.y - initialViewportPoint.y);
+		const { style } = this.selectionRectangleWrapper;
+		style.left = `${x}px`;
+		style.top = `${y}px`;
+		style.width = `${width}px`;
+		style.height = `${height}px`;
+	}
+	removeMouseListeners() {
+		this.win.removeEventListener("mousemove", this.onWindowMouseMove);
+		this.win.removeEventListener("mouseup", this.onWindowMouseUp);
+	}
+	finishSelection() {
+		const selectionRect = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection();
+		this.params.onSelectionFinished(selectionRect);
+	}
+	interruptSelection() {
+		const selectionRect = this.selectionRectangleWrapper.getBoundingClientRect();
+		this.terminateSelection();
+		this.params.onSelectionInterrupted(selectionRect);
+	}
+	terminateSelection() {
+		this.host.removeChild(this.selectionRectangleWrapper);
+		this.initialContentPoint = null;
+		this.draggingViewportPoint = null;
+	}
+};
+//#endregion
 //#region src/canvas-builder/layers/create-host/create-host.ts
 var createHost = () => {
 	const host = document.createElement("div");
@@ -4873,16 +5008,17 @@ var createHost = () => {
 };
 //#endregion
 //#region src/canvas-builder/layers/create-layer/create-layer.ts
-var createLayer = () => {
+var createLayer = (zIndex) => {
 	const host = document.createElement("div");
 	host.style.position = "absolute";
 	host.style.inset = "0";
+	host.style.zIndex = `${zIndex}`;
 	return host;
 };
 //#endregion
 //#region src/canvas-builder/layers/create-overlay-layer/create-overlay-layer.ts
-var createOverlayLayer = () => {
-	const layer = createLayer();
+var createOverlayLayer = (zIndex) => {
+	const layer = createLayer(zIndex);
 	layer.style.pointerEvents = "none";
 	return layer;
 };
@@ -4890,10 +5026,11 @@ var createOverlayLayer = () => {
 //#region src/canvas-builder/layers/layers.ts
 var Layers = class {
 	element;
-	background = createLayer();
-	main = createLayer();
-	overlayConnectablePorts = createOverlayLayer();
-	overlayDraggableEdges = createOverlayLayer();
+	background = createLayer(0);
+	main = createLayer(1);
+	overlayConnectablePorts = createOverlayLayer(1);
+	overlayDraggableEdges = createOverlayLayer(1);
+	overlayRectangularSelection = createOverlayLayer(2);
 	host = createHost();
 	constructor(element) {
 		this.element = element;
@@ -4902,12 +5039,14 @@ var Layers = class {
 		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.host.removeChild(this.overlayRectangularSelection);
 		this.element.removeChild(this.host);
 	}
 };
@@ -4922,20 +5061,13 @@ var forceDirectedDefaults = Object.freeze({
 	edgeStiffness: 1e3,
 	dtSec: .01,
 	maxIterations: 1e3,
-	convergenceVelocity: 10,
+	stopVelocity: 10,
 	maxForce: 1e7,
 	nodeForceCoefficient: 1,
 	barnesHutAreaRadiusThreshold: .01,
 	barnesHutTheta: 1
 });
 //#endregion
-//#region src/canvas-builder/shared/selection-defaults.ts
-var selectionDefaults = Object.freeze({
-	mouseDownEventVerifier: (event) => event.button === 0,
-	mouseUpEventVerifier: (event) => event.button === 0,
-	movementThreshold: 10
-});
-//#endregion
 //#region src/canvas-builder/shared/noop-fn/noop-fn.ts
 var noopFn = () => {};
 //#endregion
@@ -5001,27 +5133,28 @@ var resolveEdgeShapeFactory = (config) => {
 	}
 };
 //#endregion
+//#region src/canvas-builder/shared/lmb-ctrl-mouse-event-verifier/lmb-ctrl-mouse-event-verifier.ts
+var lmbCtrlMouseEventVerifier = (event) => event.button === 0 && event.ctrlKey;
+//#endregion
+//#region src/canvas-builder/shared/lmb-mouse-event-verifier/lmb-mouse-event-verifier.ts
+var lmbMouseEventVerifier = (event) => event.button === 0;
+//#endregion
+//#region src/canvas-builder/shared/lmb-no-ctrl-mouse-event-verifier/lmb-no-ctrl-mouse-event-verifier.ts
+var lmbNoCtrlMouseEventVerifier = (event) => event.button === 0 && !event.ctrlKey;
+//#endregion
 //#region src/canvas-builder/create-draggable-nodes-params/create-draggable-nodes-params.ts
 var createDraggableNodesParams = (config) => {
-	const nodeDragVerifier = config.nodeDragVerifier ?? (() => true);
 	const moveOnTop = config.moveOnTop !== false;
-	const moveEdgesOnTop = config.moveEdgesOnTop !== false && moveOnTop;
-	const cursor = config.mouse?.dragCursor;
-	const dragCursor = cursor !== void 0 ? cursor : "grab";
-	const defaultMouseDownEventVerifier = config.mouse?.mouseDownEventVerifier;
-	const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-	const defaultMouseUpEventVerifier = config.mouse?.mouseUpEventVerifier;
-	const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
 	return {
 		moveOnTop,
-		moveEdgesOnTop,
-		dragCursor,
+		moveEdgesOnTop: config.moveEdgesOnTop !== false && moveOnTop,
+		dragCursor: config.mouse?.dragCursor ?? "grab",
 		gridSize: config.gridSize ?? null,
-		mouseDownEventVerifier,
-		mouseUpEventVerifier,
+		mouseDownEventVerifier: config.mouse?.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouse?.mouseUpEventVerifier ?? lmbMouseEventVerifier,
 		onNodeDragStarted: config.events?.onNodeDragStarted ?? noopFn,
 		onNodeDrag: config.events?.onNodeDrag ?? noopFn,
-		nodeDragVerifier,
+		nodeDragVerifier: config.nodeDragVerifier ?? (() => true),
 		onNodeDragFinished: config.events?.onNodeDragFinished ?? noopFn
 	};
 };
@@ -5111,33 +5244,26 @@ var resolveTransformPreprocessor = (option) => {
 //#endregion
 //#region src/canvas-builder/create-transformable-viewport-params/create-transformable-viewport-params.ts
 var createTransformableViewportParams = (transformConfig) => {
-	const configWheelSensitivity = transformConfig?.scale?.mouseWheelSensitivity;
-	const wheelSensitivity = configWheelSensitivity !== void 0 ? configWheelSensitivity : 1.2;
 	const preprocessors = transformConfig?.transformPreprocessor;
 	let transformPreprocessor;
-	if (preprocessors !== void 0) if (Array.isArray(preprocessors)) transformPreprocessor = createCombinedTransformPreprocessor(preprocessors.map((preprocessor) => resolveTransformPreprocessor(preprocessor)));
+	if (preprocessors !== void 0) if (Array.isArray(preprocessors)) transformPreprocessor = createCombinedTransformPreprocessor(preprocessors.map((preprocessor) => {
+		return resolveTransformPreprocessor(preprocessor);
+	}));
 	else transformPreprocessor = resolveTransformPreprocessor(preprocessors);
 	else transformPreprocessor = (params) => {
 		return params.nextTransform;
 	};
-	const shiftCursor = transformConfig?.pan?.cursor !== void 0 ? transformConfig.pan.cursor : "grab";
-	const defaultMouseDownEventVerifier = transformConfig?.pan?.mouseDownEventVerifier;
-	const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-	const defaultMouseUpEventVerifier = transformConfig?.pan?.mouseUpEventVerifier;
-	const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
-	const defaultMouseWheelEventVerifier = transformConfig?.scale?.mouseWheelEventVerifier;
-	const mouseWheelEventVerifier = defaultMouseWheelEventVerifier !== void 0 ? defaultMouseWheelEventVerifier : () => true;
 	return {
-		wheelSensitivity,
+		wheelSensitivity: transformConfig?.scale?.mouseWheelSensitivity ?? 1.2,
 		onTransformStarted: transformConfig?.events?.onTransformStarted ?? noopFn,
 		onTransformFinished: transformConfig?.events?.onTransformFinished ?? noopFn,
 		onBeforeTransformChange: transformConfig?.events?.onBeforeTransformChange ?? noopFn,
 		onTransformChange: transformConfig?.events?.onTransformChange ?? noopFn,
 		transformPreprocessor,
-		shiftCursor,
-		mouseDownEventVerifier,
-		mouseUpEventVerifier,
-		mouseWheelEventVerifier,
+		shiftCursor: transformConfig?.pan?.cursor ?? "grab",
+		mouseDownEventVerifier: transformConfig?.pan?.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: transformConfig?.pan?.mouseUpEventVerifier ?? lmbMouseEventVerifier,
+		mouseWheelEventVerifier: transformConfig?.scale?.mouseWheelEventVerifier ?? (() => true),
 		scaleWheelFinishTimeout: transformConfig?.scale?.wheelFinishTimeout ?? 500,
 		onResizeTransformStarted: transformConfig?.events?.onResizeTransformStarted ?? noopFn,
 		onResizeTransformFinished: transformConfig?.events?.onResizeTransformFinished ?? noopFn
@@ -5175,8 +5301,7 @@ var createBackgroundParams = (backgroundConfig) => {
 var defaults$3 = Object.freeze({
 	connectionTypeResolver: () => "direct",
 	connectionPreprocessor: (request) => request,
-	connectionAllowedVerifier: () => true,
-	mouseEventVerifier: (event) => event.button === 0
+	connectionAllowedVerifier: () => true
 });
 //#endregion
 //#region src/canvas-builder/create-connectable-ports-params/create-connectable-ports-params.ts
@@ -5188,20 +5313,20 @@ var createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
 		draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier),
 		edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory,
 		connectionPreprocessor: config.connectionPreprocessor ?? defaults$3.connectionPreprocessor,
-		mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$3.mouseEventVerifier,
-		mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
+		mouseDownEventVerifier: config.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouseUpEventVerifier ?? lmbMouseEventVerifier,
 		onAfterEdgeCreated: config.events?.onAfterEdgeCreated ?? noopFn,
 		onEdgeCreationInterrupted: config.events?.onEdgeCreationInterrupted ?? noopFn,
-		onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn
+		onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn,
+		grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+		releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 	};
 };
 //#endregion
 //#region src/canvas-builder/create-draggable-edges-params/defaults.ts
 var defaults$2 = Object.freeze({
 	connectionAllowedVerifier: () => true,
-	connectionPreprocessor: (request) => request,
-	mouseDownEventVerifier: (event) => event.button === 0,
-	mouseUpEventVerifier: (event) => event.button === 0
+	connectionPreprocessor: (request) => request
 });
 //#endregion
 //#region src/canvas-builder/create-draggable-edges-params/create-draggable-edges-params.ts
@@ -5215,14 +5340,16 @@ var createDraggableEdgeParams = (config, graph) => {
 	return {
 		connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
 		connectionAllowedVerifier,
-		mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$2.mouseDownEventVerifier,
-		mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$2.mouseUpEventVerifier,
+		mouseDownEventVerifier: config.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouseUpEventVerifier ?? lmbMouseEventVerifier,
 		draggingEdgeResolver: config.draggingEdgeResolver ?? defaultDraggingEdgeResolver,
 		draggingEdgeShapeFactory: config.draggingEdgeShape !== void 0 ? resolveEdgeShapeFactory(config.draggingEdgeShape) : null,
 		onAfterEdgeReattached: config.events?.onAfterEdgeReattached ?? noopFn,
 		onEdgeReattachInterrupted: config.events?.onEdgeReattachInterrupted ?? noopFn,
 		onEdgeReattachPrevented: config.events?.onEdgeReattachPrevented ?? noopFn,
-		draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier)
+		draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier),
+		grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+		releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 	};
 };
 //#endregion
@@ -5880,14 +6007,14 @@ var ForceDirectedLayoutAlgorithm = class {
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
-	convergenceVelocity;
+	stopVelocity;
 	constructor(params) {
 		this.maxIterations = params.maxIterations;
 		this.dtSec = params.dtSec;
 		this.nodeMass = params.nodeMass;
 		this.edgeEquilibriumLength = params.edgeEquilibriumLength;
 		this.edgeStiffness = params.edgeStiffness;
-		this.convergenceVelocity = params.stopVelocity;
+		this.stopVelocity = params.stopVelocity;
 		this.distanceVectorGenerator = new DistanceVectorGenerator(params.rand);
 		this.nodeForcesApplicationStrategy = resolveNodeForcesApplicationStrategy({
 			distanceVectorGenerator: this.distanceVectorGenerator,
@@ -5916,7 +6043,7 @@ var ForceDirectedLayoutAlgorithm = class {
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity) break;
+		}).apply() < this.stopVelocity) break;
 		return currentCoords;
 	}
 };
@@ -6136,14 +6263,14 @@ var incomingNextLayerNodesResolver = (params) => {
 var ForceDirectedAnimatedLayoutAlgorithm = class {
 	distanceVectorGenerator;
 	nodeForcesApplicationStrategy;
-	convergenceVelocity;
+	stopVelocity;
 	maxTimeDeltaSec;
 	nodeMass;
 	edgeEquilibriumLength;
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(params) {
-		this.convergenceVelocity = params.stopVelocity;
+		this.stopVelocity = params.stopVelocity;
 		this.maxTimeDeltaSec = params.maxTimeDeltaSec;
 		this.nodeMass = params.nodeMass;
 		this.edgeEquilibriumLength = params.edgeEquilibriumLength;
@@ -6176,7 +6303,7 @@ var ForceDirectedAnimatedLayoutAlgorithm = class {
 			nodeMass: this.nodeMass,
 			edgeEquilibriumLength: this.edgeEquilibriumLength,
 			edgeStiffness: this.edgeStiffness
-		}).apply() < this.convergenceVelocity) {
+		}).apply() < this.stopVelocity) {
 			if (!graph.getAllNodeIds().some((nodeId) => {
 				const node = graph.getNode(nodeId);
 				return node.x === null || node.y === null;
@@ -6242,7 +6369,7 @@ var resolveAnimatedLayoutAlgorithm = (config) => {
 				nodeMass: config?.nodeMass ?? forceDirectedDefaults.nodeMass,
 				edgeEquilibriumLength: config?.edgeEquilibriumLength ?? forceDirectedDefaults.edgeEquilibriumLength,
 				edgeStiffness: config?.edgeStiffness ?? forceDirectedDefaults.edgeStiffness,
-				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.convergenceVelocity,
+				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.stopVelocity,
 				maxForce: config?.maxForce ?? forceDirectedDefaults.maxForce,
 				nodeForceCoefficient: config?.nodeForceCoefficient ?? forceDirectedDefaults.nodeForceCoefficient,
 				barnesHutTheta: config?.barnesHut?.theta ?? forceDirectedDefaults.barnesHutTheta,
@@ -6466,7 +6593,7 @@ var resolveLayoutAlgorithm = (config) => {
 				nodeMass: config?.nodeMass ?? forceDirectedDefaults.nodeMass,
 				edgeEquilibriumLength: config?.edgeEquilibriumLength ?? forceDirectedDefaults.edgeEquilibriumLength,
 				edgeStiffness: config?.edgeStiffness ?? forceDirectedDefaults.edgeStiffness,
-				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.convergenceVelocity,
+				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.stopVelocity,
 				maxForce: config?.maxForce ?? forceDirectedDefaults.maxForce,
 				nodeForceCoefficient: config?.nodeForceCoefficient ?? forceDirectedDefaults.nodeForceCoefficient,
 				barnesHutTheta: config?.barnesHut?.theta ?? forceDirectedDefaults.barnesHutTheta,
@@ -6592,9 +6719,9 @@ var createViewportControllerParams = (params) => {
 var createUserSelectableNodesParams = (config) => {
 	return {
 		onNodeSelected: config.onNodeSelected,
-		mouseDownEventVerifier: config.mouseDownEventVerifier ?? selectionDefaults.mouseDownEventVerifier,
-		mouseUpEventVerifier: config.mouseUpEventVerifier ?? selectionDefaults.mouseUpEventVerifier,
-		movementThreshold: config.movementThreshold ?? selectionDefaults.movementThreshold
+		mouseDownEventVerifier: config.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouseUpEventVerifier ?? lmbMouseEventVerifier,
+		movementThreshold: config.movementThreshold ?? 10
 	};
 };
 //#endregion
@@ -6602,9 +6729,9 @@ var createUserSelectableNodesParams = (config) => {
 var createUserSelectableCanvasParams = (config) => {
 	return {
 		onCanvasSelected: config.onCanvasSelected,
-		mouseDownEventVerifier: config.mouseDownEventVerifier ?? selectionDefaults.mouseDownEventVerifier,
-		mouseUpEventVerifier: config.mouseUpEventVerifier ?? selectionDefaults.mouseUpEventVerifier,
-		movementThreshold: config.movementThreshold ?? selectionDefaults.movementThreshold
+		mouseDownEventVerifier: config.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouseUpEventVerifier ?? lmbMouseEventVerifier,
+		movementThreshold: config.movementThreshold ?? 10
 	};
 };
 //#endregion
@@ -6612,9 +6739,32 @@ var createUserSelectableCanvasParams = (config) => {
 var createUserSelectableEdgesParams = (config) => {
 	return {
 		onEdgeSelected: config.onEdgeSelected,
-		mouseDownEventVerifier: config.mouseDownEventVerifier ?? selectionDefaults.mouseDownEventVerifier,
-		mouseUpEventVerifier: config.mouseUpEventVerifier ?? selectionDefaults.mouseUpEventVerifier,
-		movementThreshold: config.movementThreshold ?? selectionDefaults.movementThreshold
+		mouseDownEventVerifier: config.mouseDownEventVerifier ?? lmbNoCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config.mouseUpEventVerifier ?? lmbMouseEventVerifier,
+		movementThreshold: config.movementThreshold ?? 10
+	};
+};
+//#endregion
+//#region src/canvas-builder/create-rectangular-selection-params/create-default-rectangle-element/create-default-rectangle-element.ts
+var createDefaultRectangleElement = () => {
+	const element = document.createElement("div");
+	element.style.width = "100%";
+	element.style.height = "100%";
+	element.style.background = "rgba(174, 238, 255, 0.34)";
+	element.style.border = "1px dashed rgba(96, 96, 96, 0.47)";
+	return element;
+};
+//#endregion
+//#region src/canvas-builder/create-rectangular-selection-params/create-rectangular-selection-params.ts
+var createRectangularSelectionParams = (config) => {
+	return {
+		rectangleElement: config?.rectangleElement ?? createDefaultRectangleElement(),
+		mouseDownEventVerifier: config?.mouseDownEventVerifier ?? lmbCtrlMouseEventVerifier,
+		mouseUpEventVerifier: config?.mouseUpEventVerifier ?? lmbMouseEventVerifier,
+		onSelectionStarted: config?.onSelectionStarted ?? noopFn,
+		onSelectionChange: config?.onSelectionChange ?? noopFn,
+		onSelectionInterrupted: config?.onSelectionInterrupted ?? noopFn,
+		onSelectionFinished: config?.onSelectionFinished ?? noopFn
 	};
 };
 //#endregion
@@ -6628,6 +6778,7 @@ var CanvasBuilder = class {
 	backgroundConfig = {};
 	connectablePortsConfig = {};
 	draggableEdgesConfig = {};
+	rectangularSelectionConfig = void 0;
 	virtualScrollConfig = void 0;
 	layoutConfig = {};
 	animatedLayoutConfig = {};
@@ -6640,6 +6791,7 @@ var CanvasBuilder = class {
 	hasBackground = false;
 	hasUserConnectablePorts = false;
 	hasUserDraggableEdges = false;
+	hasRectangularSelection = false;
 	hasAnimatedLayout = false;
 	hasLayout = false;
 	boxRenderingTrigger = new EventSubject();
@@ -6688,6 +6840,11 @@ var CanvasBuilder = class {
 		this.draggableEdgesConfig = config ?? {};
 		return this;
 	}
+	enableRectangularSelection(config) {
+		this.hasRectangularSelection = true;
+		this.rectangularSelectionConfig = config;
+		return this;
+	}
 	enableLayout(config) {
 		this.layoutConfig = config ?? {};
 		this.hasLayout = true;
@@ -6758,6 +6915,7 @@ var CanvasBuilder = class {
 		}
 		if (this.virtualScrollConfig !== void 0) UserTransformableViewportVirtualScrollConfigurator.configure(canvas, layers.main, this.window, createTransformableViewportParams(this.transformConfig), this.boxRenderingTrigger, this.pointInsideVerifier, this.eventTagger, createVirtualScrollParams(this.virtualScrollConfig));
 		else if (this.hasTransformableViewport) UserTransformableViewportConfigurator.configure(canvas, layers.main, this.window, this.pointInsideVerifier, this.eventTagger, createTransformableViewportParams(this.transformConfig));
+		if (this.hasRectangularSelection) RectangularSelectionConfigurator.configure(canvas, layers.main, layers.overlayRectangularSelection, this.pointInsideVerifier, this.eventTagger, this.window, createRectangularSelectionParams(this.rectangularSelectionConfig));
 		if (this.hasLayout) LayoutConfigurator.configure(canvas, layoutParams);
 		if (this.hasAnimatedLayout) {
 			let config = createAnimatedLayoutParams(this.animatedLayoutConfig);