@html-graph/html-graph 9.1.0 → 9.2.0

package/dist/html-graph.d.ts

@@ -187,6 +187,7 @@ export declare class CanvasBuilder {
     private backgroundConfig;
     private connectablePortsConfig;
     private draggableEdgesConfig;
+    private rectangularSelectionConfig;
     private virtualScrollConfig;
     private layoutConfig;
     private animatedLayoutConfig;
@@ -199,6 +200,7 @@ export declare class CanvasBuilder {
     private hasBackground;
     private hasUserConnectablePorts;
     private hasUserDraggableEdges;
+    private hasRectangularSelection;
     private hasAnimatedLayout;
     private hasLayout;
     private readonly boxRenderingTrigger;
@@ -215,6 +217,7 @@ export declare class CanvasBuilder {
     enableBackground(config?: BackgroundConfig | undefined): CanvasBuilder;
     enableUserConnectablePorts(config?: ConnectablePortsConfig | undefined): CanvasBuilder;
     enableUserDraggableEdges(config?: DraggableEdgesConfig | undefined): CanvasBuilder;
+    enableRectangularSelection(config?: RectangularSelectionConfig | undefined): CanvasBuilder;
     enableLayout(config?: LayoutConfig | undefined): CanvasBuilder;
     enableAnimatedLayout(config?: AnimatedLayoutConfig | undefined): CanvasBuilder;
     enableUserSelectableNodes(config: UserSelectableNodesConfig): CanvasBuilder;
@@ -389,6 +392,8 @@ export declare interface EdgeCreationInProgressParams {
     readonly isDirect: boolean;
 }
 
+export declare type EdgeElement = HTMLElement | SVGSVGElement;
+
 declare interface EdgePath {
     readonly path: string;
     readonly midpoint: Point;
@@ -409,7 +414,7 @@ export declare interface EdgeRenderPort {
 }
 
 export declare interface EdgeShape {
-    readonly element: SVGSVGElement;
+    readonly element: EdgeElement;
     render(params: EdgeRenderParams): void;
 }
 
@@ -647,7 +652,7 @@ export declare interface InteractiveEdgeParams {
 
 export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     private readonly baseEdge;
-    readonly element: SVGSVGElement;
+    readonly element: EdgeElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
     readonly sourceArrow: SVGPathElement | null;
@@ -730,7 +735,7 @@ export declare class MidpointEdgeShape implements StructuredEdgeShape {
     readonly sourceArrow: SVGPathElement | null;
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
-    readonly element: SVGSVGElement;
+    readonly element: EdgeElement;
     constructor(baseShape: StructuredEdgeShape, midpointElement: SVGElement);
     render(params: EdgeRenderParams): void;
 }
@@ -826,6 +831,26 @@ export declare interface Radii {
     readonly vertical: number;
 }
 
+declare interface RectangularSelectionConfig {
+    readonly rectangleElement?: Element;
+    readonly mouseDownEventVerifier?: MouseEventVerifier;
+    readonly mouseUpEventVerifier?: MouseEventVerifier;
+    readonly onSelectionStarted?: () => void;
+    readonly onSelectionChange?: (selectionRectangle: DOMRect) => void;
+    readonly onSelectionInterrupted?: (selectionRectangle: DOMRect) => void;
+    readonly onSelectionFinished?: (selectionRectangle: DOMRect) => void;
+}
+
+export declare interface RectangularSelectionParams {
+    readonly rectangleElement: Element;
+    readonly mouseDownEventVerifier: MouseEventVerifier;
+    readonly mouseUpEventVerifier: MouseEventVerifier;
+    readonly onSelectionStarted: () => void;
+    readonly onSelectionChange: (selectionRectangle: DOMRect) => void;
+    readonly onSelectionInterrupted: (selectionRectangle: DOMRect) => void;
+    readonly onSelectionFinished: (selectionRectangle: DOMRect) => void;
+}
+
 export declare interface ScaleLimitPreprocessorParams {
     readonly minContentScale: number | null;
     readonly maxContentScale: number | null;
@@ -1050,7 +1075,7 @@ declare class ViewportController {
     constructor(graphStore: GraphStore, viewportStore: ViewportStore, params: ViewportControllerParams, win: Window);
     patchViewportMatrix(request: PatchMatrixRequest): void;
     patchContentMatrix(request: PatchMatrixRequest): void;
-    center(target: Point, config?: CenterConfig | undefined): void;
+    center(target: Point, config: CenterConfig | undefined): void;
     focus(config?: FocusConfig | undefined): void;
     destroy(): void;
     private navigate;

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);
@@ -4368,12 +4368,11 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 			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);
@@ -4871,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");
@@ -4881,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;
 };
@@ -4898,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;
@@ -4910,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);
 	}
 };
@@ -4930,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
@@ -5009,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
 	};
 };
@@ -5119,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
@@ -5183,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
@@ -5196,8 +5313,8 @@ 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,
@@ -5209,9 +5326,7 @@ var createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
 //#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
@@ -5225,8 +5340,8 @@ 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,
@@ -5892,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,
@@ -5928,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;
 	}
 };
@@ -6148,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;
@@ -6188,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;
@@ -6254,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,
@@ -6478,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,
@@ -6604,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
@@ -6614,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
@@ -6624,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
@@ -6640,6 +6778,7 @@ var CanvasBuilder = class {
 	backgroundConfig = {};
 	connectablePortsConfig = {};
 	draggableEdgesConfig = {};
+	rectangularSelectionConfig = void 0;
 	virtualScrollConfig = void 0;
 	layoutConfig = {};
 	animatedLayoutConfig = {};
@@ -6652,6 +6791,7 @@ var CanvasBuilder = class {
 	hasBackground = false;
 	hasUserConnectablePorts = false;
 	hasUserDraggableEdges = false;
+	hasRectangularSelection = false;
 	hasAnimatedLayout = false;
 	hasLayout = false;
 	boxRenderingTrigger = new EventSubject();
@@ -6700,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;
@@ -6770,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);