@html-graph/html-graph 9.0.0 → 9.2.0

package/dist/html-graph.umd.cjs

@@ -11,7 +11,7 @@
 	}({});
 	//#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%";
@@ -53,7 +53,7 @@
 		graphStore;
 		viewportStore;
 		element;
-		host = createHost$1();
+		host = createHost$2();
 		container = createContainer();
 		edgeIdToElementMap = /* @__PURE__ */ new Map();
 		attachedNodeIds = /* @__PURE__ */ new Set();
@@ -772,7 +772,7 @@
 				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,
@@ -782,7 +782,7 @@
 					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);
@@ -1101,10 +1101,10 @@
 	};
 	//#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
@@ -1128,10 +1128,10 @@
 	}
 	//#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;
 		}
@@ -3337,7 +3337,9 @@
 			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
@@ -3638,6 +3640,12 @@
 		}
 	};
 	//#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;
@@ -4303,7 +4311,8 @@
 					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);
 		}
@@ -4357,18 +4366,17 @@
 			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);
@@ -4438,7 +4446,8 @@
 						shape: edge.shape,
 						priority: edge.priority
 					});
-				}
+				},
+				grabbedPortIdResolver: this.params.grabbedPortIdResolver
 			};
 			DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 		}
@@ -4528,7 +4537,7 @@
 			}).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;
@@ -4715,19 +4724,17 @@
 	//#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);
@@ -4867,6 +4874,134 @@
 		}
 	};
 	//#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");
@@ -4877,16 +5012,17 @@
 	};
 	//#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;
 	};
@@ -4894,10 +5030,11 @@
 	//#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;
@@ -4906,12 +5043,14 @@
 			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);
 		}
 	};
@@ -4926,20 +5065,13 @@
 		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
@@ -5005,27 +5137,28 @@
 		}
 	};
 	//#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
 		};
 	};
@@ -5115,33 +5248,26 @@
 	//#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
@@ -5179,8 +5305,7 @@
 	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
@@ -5192,20 +5317,20 @@
 			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
@@ -5219,14 +5344,16 @@
 		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
@@ -5884,14 +6011,14 @@
 		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,
@@ -5920,7 +6047,7 @@
 				nodeMass: this.nodeMass,
 				edgeEquilibriumLength: this.edgeEquilibriumLength,
 				edgeStiffness: this.edgeStiffness
-			}).apply() < this.convergenceVelocity) break;
+			}).apply() < this.stopVelocity) break;
 			return currentCoords;
 		}
 	};
@@ -6140,14 +6267,14 @@
 	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;
@@ -6180,7 +6307,7 @@
 				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;
@@ -6246,7 +6373,7 @@
 					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,
@@ -6470,7 +6597,7 @@
 					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,
@@ -6596,9 +6723,9 @@
 	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
@@ -6606,9 +6733,9 @@
 	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
@@ -6616,9 +6743,32 @@
 	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
@@ -6632,6 +6782,7 @@
 		backgroundConfig = {};
 		connectablePortsConfig = {};
 		draggableEdgesConfig = {};
+		rectangularSelectionConfig = void 0;
 		virtualScrollConfig = void 0;
 		layoutConfig = {};
 		animatedLayoutConfig = {};
@@ -6644,6 +6795,7 @@
 		hasBackground = false;
 		hasUserConnectablePorts = false;
 		hasUserDraggableEdges = false;
+		hasRectangularSelection = false;
 		hasAnimatedLayout = false;
 		hasLayout = false;
 		boxRenderingTrigger = new EventSubject();
@@ -6692,6 +6844,11 @@
 			this.draggableEdgesConfig = config ?? {};
 			return this;
 		}
+		enableRectangularSelection(config) {
+			this.hasRectangularSelection = true;
+			this.rectangularSelectionConfig = config;
+			return this;
+		}
 		enableLayout(config) {
 			this.layoutConfig = config ?? {};
 			this.hasLayout = true;
@@ -6762,6 +6919,7 @@
 			}
 			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);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "9.0.0",
+  "version": "9.2.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",