@neo4j-nvl/interaction-handlers 0.2.1

package/lib/interaction-handlers/draw-interaction.d.ts

@@ -0,0 +1,30 @@
+import { NVL, Node, Relationship } from '@neo4j-nvl/core';
+import { BaseInteraction } from './base';
+/**
+ * @internal
+ */
+export declare class DrawInteraction extends BaseInteraction<{
+    onDrawEnd: (newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null) => void;
+}> {
+    private overlayRenderer;
+    private isMoved;
+    private isDrawing;
+    private isDraggingNode;
+    private mouseDownNode;
+    private newTempTargetNode;
+    private newTempRegularRelationshipToNewTempTargetNode;
+    private newTempRegularRelationshipToExistingNode;
+    private newTempSelfReferredRelationship;
+    private newTargetNodeToAdd;
+    private newRelationshipToAdd;
+    constructor(nvl: NVL);
+    private handleMouseMove;
+    private handleWheel;
+    private setNewRegularRelationship;
+    private setNewRegularRelationshipToNewTempTargetNode;
+    private setNewRegularRelationshipToExistingNode;
+    private setNewSelfReferredRelationship;
+    private handleMouseDown;
+    private handleMouseUp;
+    destroy: () => void;
+}

package/lib/interaction-handlers/draw-interaction.js

@@ -0,0 +1,257 @@
+import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
+import { generateUniqueId } from './utils';
+import { NODE_EDGE_WIDTH } from '../constants';
+import { BaseInteraction } from './base';
+/**
+ * @internal
+ */
+export class DrawInteraction extends BaseInteraction {
+    constructor(nvl) {
+        super(nvl);
+        Object.defineProperty(this, "overlayRenderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isMoved", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isDrawing", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isDraggingNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mouseDownNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newTempTargetNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newTempRegularRelationshipToNewTempTargetNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newTempRegularRelationshipToExistingNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newTempSelfReferredRelationship", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newTargetNodeToAdd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "newRelationshipToAdd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "handleMouseMove", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                var _a, _b, _c, _d, _e, _f;
+                this.isMoved = true;
+                if (this.isDrawing) {
+                    this.overlayRenderer.clear();
+                    // Rename to getMousePosition in world coordinate
+                    const pos = this.nvlInstance.getMousePosition(event);
+                    const hits = this.nvlInstance.getHits(event, ['node']);
+                    const hitNode = hits.nvlTargets.nodes.filter(n => n.data.id !== this.newTempTargetNode.id)[0];
+                    const targetNode = hitNode ? { id: hitNode.data.id, x: hitNode.targetCoordinates.x, y: hitNode.targetCoordinates.y, size: hitNode.data.size } : undefined;
+                    // ArrowBundler has race-condition to update the dataset, if we remove the node with the same ID after mouse releases, the same node will be removed then be added again, which will cause the issue.
+                    // So always make sure the new node id to be added to the dataset after mouse releasing is a new id.
+                    const newTargetNodeId = generateUniqueId(13);
+                    const newTargetNode = targetNode ? null : { id: newTargetNodeId, size: 25, selected: false, x: pos.x, y: pos.y };
+                    const newRelationshipId = generateUniqueId(13);
+                    const relationship = { id: newRelationshipId, from: this.mouseDownNode.data.id, to: targetNode ? targetNode.id : newTargetNodeId, captions: [{ value: 'TEST' }] };
+                    let x = pos.x;
+                    let y = pos.y;
+                    let size = 25;
+                    if (hitNode) {
+                        x = hitNode.targetCoordinates.x;
+                        y = hitNode.targetCoordinates.y;
+                        size = hitNode.data.size;
+                        if (hitNode.data.id === this.mouseDownNode.data.id && !this.newTempSelfReferredRelationship) {
+                            this.nvlInstance.removeRelationshipsWithIds([(_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id, (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id]);
+                            this.newTempRegularRelationshipToNewTempTargetNode = null;
+                            this.newTempRegularRelationshipToExistingNode = null;
+                            this.setNewSelfReferredRelationship();
+                            this.nvlInstance.addElementsToGraph([], [this.newTempSelfReferredRelationship]);
+                        }
+                        else if (hitNode.data.id !== this.mouseDownNode.data.id && !this.newTempRegularRelationshipToExistingNode) {
+                            this.nvlInstance.removeRelationshipsWithIds([(_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id, (_d = this.newTempRegularRelationshipToNewTempTargetNode) === null || _d === void 0 ? void 0 : _d.id]);
+                            this.newTempSelfReferredRelationship = null;
+                            this.newTempRegularRelationshipToNewTempTargetNode = null;
+                            this.setNewRegularRelationshipToExistingNode(hitNode.data.id);
+                            this.nvlInstance.addElementsToGraph([], [this.newTempRegularRelationshipToExistingNode]);
+                        }
+                    }
+                    else if (!this.newTempRegularRelationshipToNewTempTargetNode) {
+                        this.nvlInstance.removeRelationshipsWithIds([(_e = this.newTempSelfReferredRelationship) === null || _e === void 0 ? void 0 : _e.id, (_f = this.newTempRegularRelationshipToExistingNode) === null || _f === void 0 ? void 0 : _f.id]);
+                        this.newTempSelfReferredRelationship = null;
+                        this.newTempRegularRelationshipToExistingNode = null;
+                        this.setNewRegularRelationshipToNewTempTargetNode();
+                        this.nvlInstance.addElementsToGraph([], [this.newTempRegularRelationshipToNewTempTargetNode]);
+                    }
+                    this.nvlInstance.setNodePositions([{ id: this.newTempTargetNode.id, x, y }]);
+                    this.nvlInstance.updateElementsInGraph([{ id: this.newTempTargetNode.id, x, y, size }], []);
+                    this.newRelationshipToAdd = relationship;
+                    this.newTargetNodeToAdd = newTargetNode;
+                }
+                else if (!this.isDraggingNode) {
+                    this.newRelationshipToAdd = null;
+                    this.newTargetNodeToAdd = null;
+                    const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
+                    const hitNodeEdges = hits.nvlTargets.nodes.filter(node => !node.insideNode);
+                    if (hitNodeEdges.length > 0) {
+                        const node = hitNodeEdges[0];
+                        const zoom = this.nvlInstance.getScale();
+                        const { x, y } = this.nvlInstance.getPan();
+                        this.overlayRenderer.drawNodeRing(node.targetCoordinates.x, node.targetCoordinates.y, node.data.size, zoom, x, y);
+                    }
+                    else {
+                        this.overlayRenderer.clear();
+                    }
+                }
+            }
+        });
+        Object.defineProperty(this, "handleWheel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.overlayRenderer.clear();
+            }
+        });
+        Object.defineProperty(this, "handleMouseDown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                this.isMoved = false;
+                this.newRelationshipToAdd = null;
+                this.newTargetNodeToAdd = null;
+                const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
+                const hitNodes = hits.nvlTargets.nodes.filter(node => node.insideNode);
+                const hitNodeEdges = hits.nvlTargets.nodes.filter(node => !node.insideNode);
+                if (hitNodes.length > 0) {
+                    this.isDraggingNode = true;
+                    this.isDrawing = false;
+                }
+                else if (hitNodeEdges.length > 0) {
+                    this.isDrawing = true;
+                    this.isDraggingNode = false;
+                    this.mouseDownNode = hitNodeEdges[0];
+                    const pos = this.nvlInstance.getMousePosition(event);
+                    this.newTempTargetNode = { id: generateUniqueId(13), size: 25, selected: false, x: pos.x, y: pos.y, color: 'black' };
+                    this.setNewRegularRelationshipToNewTempTargetNode();
+                    this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], [this.newTempRegularRelationshipToNewTempTargetNode]);
+                }
+                else {
+                    this.mouseDownNode = undefined;
+                    this.isDrawing = false;
+                    this.isDraggingNode = false;
+                }
+            }
+        });
+        Object.defineProperty(this, "handleMouseUp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b, _c, _d;
+                this.nvlInstance.removeRelationshipsWithIds([(_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id, (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id, (_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id]);
+                this.nvlInstance.removeNodesWithIds([(_d = this.newTempTargetNode) === null || _d === void 0 ? void 0 : _d.id]);
+                if (this.isDrawing && this.isMoved) {
+                    this.newTargetNodeToAdd && this.nvlInstance.setNodePositions([this.newTargetNodeToAdd]);
+                    // Avoid relationship glitch
+                    this.nvlInstance.addAndUpdateElementsInGraph(this.newTargetNodeToAdd ? [{ id: this.newTargetNodeToAdd.id }] : [], [this.newRelationshipToAdd]);
+                    this.callCallbackIfRegistered('onDrawEnd', this.newRelationshipToAdd, this.newTargetNodeToAdd);
+                }
+                this.newTempTargetNode = null;
+                this.newTempRegularRelationshipToNewTempTargetNode = null;
+                this.newTempRegularRelationshipToExistingNode = null;
+                this.newTempSelfReferredRelationship = null;
+                this.isMoved = false;
+                this.isDrawing = false;
+                this.isDraggingNode = false;
+                this.overlayRenderer.clear();
+            }
+        });
+        Object.defineProperty(this, "destroy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.removeEventListener('mousemove', this.handleMouseMove, true);
+                this.removeEventListener('wheel', this.handleWheel, true);
+                this.removeEventListener('mousedown', this.handleMouseDown, true);
+                this.removeEventListener('mouseup', this.handleMouseUp, true);
+                this.overlayRenderer.destroy();
+            }
+        });
+        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+        this.isMoved = false;
+        this.isDrawing = false;
+        this.isDraggingNode = false;
+        this.nvlInstance.setLayout('free');
+        this.addEventListener('mousemove', this.handleMouseMove, true);
+        this.addEventListener('wheel', this.handleWheel, true);
+        this.addEventListener('mousedown', this.handleMouseDown, true);
+        this.addEventListener('mouseup', this.handleMouseUp, true);
+    }
+    setNewRegularRelationship(targetId) {
+        if (!this.mouseDownNode) {
+            return;
+        }
+        return { id: generateUniqueId(13), from: this.mouseDownNode.data.id, to: targetId, captions: [{ value: 'TEST' }], color: 'red' };
+    }
+    setNewRegularRelationshipToNewTempTargetNode() {
+        if (!this.mouseDownNode || !this.newTempTargetNode) {
+            return;
+        }
+        this.newTempRegularRelationshipToNewTempTargetNode = this.setNewRegularRelationship(this.newTempTargetNode.id);
+    }
+    setNewRegularRelationshipToExistingNode(targetId) {
+        if (!this.mouseDownNode) {
+            return;
+        }
+        this.newTempRegularRelationshipToExistingNode = this.setNewRegularRelationship(targetId);
+    }
+    setNewSelfReferredRelationship() {
+        if (!this.mouseDownNode) {
+            return;
+        }
+        this.newTempSelfReferredRelationship = { id: generateUniqueId(13), from: this.mouseDownNode.data.id, to: this.mouseDownNode.data.id, captions: [{ value: 'TEST' }], color: 'red' };
+    }
+}

package/lib/interaction-handlers/hover-interaction.d.ts

@@ -0,0 +1,57 @@
+import type { HitTargets, NVL, Node, Relationship } from '@neo4j-nvl/core';
+import { BaseInteraction } from './base';
+/**
+ * Options for the click interaction handler to customize its behavior.
+ */
+export type HoverInteractionOptions = {
+    /**
+     * Whether to draw a shadow on hover
+     * @default false
+     */
+    drawShadowOnHover?: boolean;
+};
+/**
+ * Callbacks for the hover interaction handler.
+ */
+export type HoverInteractionCallbacks = {
+    /**
+     * Called when a node or relationship is hovered
+     * @param element - The node or relationship that was hovered
+     * @param hitElements - All elements that were hit by the hover
+     * @param event - The original mouse event
+     * @note This callback is called every time the mouse moves,
+     * even when no element is hovered or the current element is already hovered.
+     */
+    onHover: (element: Node | Relationship, hitElements: HitTargets, event: MouseEvent) => void;
+};
+/**
+ * Interaction handler for hovering nodes and relationships.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const hoverInteraction = new HoverInteraction(nvl)
+ *
+ * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
+ *  console.log('Hovered element:', element)
+ *  console.log('Hit elements:', hitElements)
+ *  console.log('Mouse event:', event)
+ * })
+ * ```
+ */
+export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks> {
+    private currentHoveredElement;
+    private currentHoveredElementIsNode;
+    private readonly updates;
+    private readonly options;
+    constructor(nvl: NVL, options?: HoverInteractionOptions);
+    /**
+     * Handle mouse hover events
+     * @param {MouseEvent} event - The mouse event
+     */
+    handleHover: (event: MouseEvent) => void;
+    private clearUpdates;
+    private currentElementNeedsUnHover;
+    private unHoverCurrentElement;
+    destroy(): void;
+}

package/lib/interaction-handlers/hover-interaction.js

@@ -0,0 +1,113 @@
+import { BaseInteraction } from './base';
+/**
+ * Interaction handler for hovering nodes and relationships.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const hoverInteraction = new HoverInteraction(nvl)
+ *
+ * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
+ *  console.log('Hovered element:', element)
+ *  console.log('Hit elements:', hitElements)
+ *  console.log('Mouse event:', event)
+ * })
+ * ```
+ */
+export class HoverInteraction extends BaseInteraction {
+    constructor(nvl, options = { drawShadowOnHover: false }) {
+        super(nvl);
+        Object.defineProperty(this, "currentHoveredElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentHoveredElementIsNode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "updates", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * Handle mouse hover events
+         * @param {MouseEvent} event - The mouse event
+         */
+        Object.defineProperty(this, "handleHover", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                const { nvlTargets } = this.nvlInstance.getHits(event);
+                const { nodes = [], relationships = [] } = nvlTargets;
+                const mainTarget = nodes[0] || relationships[0];
+                const hoveredElement = mainTarget === null || mainTarget === void 0 ? void 0 : mainTarget.data;
+                if (this.currentElementNeedsUnHover(hoveredElement === null || hoveredElement === void 0 ? void 0 : hoveredElement.id)) {
+                    this.unHoverCurrentElement();
+                }
+                const currentHoveredElementIsNode = hoveredElement && nodes[0] !== undefined;
+                if (currentHoveredElementIsNode) {
+                    this.updates.nodes.push({ id: hoveredElement.id, hovered: true });
+                    this.currentHoveredElement = hoveredElement;
+                    this.currentHoveredElementIsNode = true;
+                }
+                else if (mainTarget) {
+                    const { id, from, to } = hoveredElement;
+                    this.updates.relationships.push({ id, from, to, hovered: true });
+                    this.currentHoveredElement = hoveredElement;
+                    this.currentHoveredElementIsNode = false;
+                }
+                else {
+                    this.currentHoveredElement = undefined;
+                    this.currentHoveredElementIsNode = undefined;
+                }
+                this.callCallbackIfRegistered('onHover', this.currentHoveredElement, nvlTargets, event);
+                // Use pure update API to avoid the previous removed node to be re-added to the scene.
+                this.options.drawShadowOnHover &&
+                    this.nvlInstance.updateElementsInGraph(this.updates.nodes, this.updates.relationships);
+                this.clearUpdates();
+            }
+        });
+        this.updates = {
+            nodes: [],
+            relationships: []
+        };
+        this.options = options;
+        this.addEventListener('mousemove', this.handleHover, true);
+    }
+    clearUpdates() {
+        this.updates.nodes = [];
+        this.updates.relationships = [];
+    }
+    currentElementNeedsUnHover(newHoveredElementId) {
+        return this.currentHoveredElement !== undefined && this.currentHoveredElement.id !== newHoveredElementId;
+    }
+    unHoverCurrentElement() {
+        const update = {
+            id: this.currentHoveredElement.id,
+            hovered: false
+        };
+        if (this.currentHoveredElementIsNode) {
+            this.updates.nodes.push(update);
+        }
+        else {
+            const { from, to } = this.currentHoveredElement;
+            this.updates.relationships.push(Object.assign(Object.assign({}, update), { from, to }));
+        }
+    }
+    destroy() {
+        this.removeEventListener('mousemove', this.handleHover, true);
+    }
+}

package/lib/interaction-handlers/multi-select-interaction.d.ts

@@ -0,0 +1,58 @@
+import type { NVL, Node, Relationship } from '@neo4j-nvl/core';
+import { BaseInteraction } from './base';
+/**
+ * Options for the multi-select interaction handler to customize its behavior.
+ */
+export type MultiSelectInteractionOptions = {
+    /**
+     * If true, the selection will be applied when the mouse is released.
+     * @default false
+     */
+    selectOnRelease?: boolean;
+};
+export type MultiSelectInteractionCallbacks = {
+    /**
+     * Called after once the user releases the mouse after multi-selecting.
+     * @param nodes - The nodes that were selected
+     * @param rels - The relationships that were selected
+     */
+    onMultiSelect: ({ nodes, rels }: {
+        nodes: Node[];
+        rels: Relationship[];
+    }) => void;
+};
+/**
+ * Interaction handler for multi-selecting nodes and relationships.
+ * When dragging, draws a box on the canvas and selects all
+ * nodes and relationships that are inside the box.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const multiSelectInteraction = new MultiSelectInteraction(nvl)
+ *
+ * multiSelectInteraction.updateCallback('onMultiSelect', ({ nodes, rels }) => {
+ *  console.log('Selected elements:', nodes, rels)
+ * })
+ */
+export declare class MultiSelectInteraction extends BaseInteraction<MultiSelectInteractionCallbacks> {
+    private mousePosition;
+    private startWorldPosition;
+    private overlayRenderer;
+    private isMultiSelecting;
+    private readonly options;
+    /**
+     * Creates a new instance of the multi-select interaction handler.
+     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param options - Options for the multi-select interaction handler to customize its behavior
+     */
+    constructor(nvl: NVL, options?: MultiSelectInteractionOptions);
+    private handleMouseDown;
+    private handleDrag;
+    private endMultiSelect;
+    /**
+     * Removes all related event listeners and the overlay renderer for the box.
+     */
+    destroy(): void;
+    private turnOnMultiSelect;
+}

package/lib/interaction-handlers/multi-select-interaction.js

@@ -0,0 +1,133 @@
+import { NODE_EDGE_WIDTH } from '../constants';
+import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
+import { BaseInteraction } from './base';
+/**
+ * Interaction handler for multi-selecting nodes and relationships.
+ * When dragging, draws a box on the canvas and selects all
+ * nodes and relationships that are inside the box.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const multiSelectInteraction = new MultiSelectInteraction(nvl)
+ *
+ * multiSelectInteraction.updateCallback('onMultiSelect', ({ nodes, rels }) => {
+ *  console.log('Selected elements:', nodes, rels)
+ * })
+ */
+export class MultiSelectInteraction extends BaseInteraction {
+    /**
+     * Creates a new instance of the multi-select interaction handler.
+     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param options - Options for the multi-select interaction handler to customize its behavior
+     */
+    constructor(nvl, options = { selectOnRelease: false }) {
+        super(nvl);
+        Object.defineProperty(this, "mousePosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "startWorldPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "overlayRenderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isMultiSelecting", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "handleMouseDown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (event.button !== 0) {
+                    this.isMultiSelecting = false;
+                    return;
+                }
+                this.turnOnMultiSelect(event);
+            }
+        });
+        Object.defineProperty(this, "handleDrag", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (this.isMultiSelecting) {
+                    this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, event.clientX, event.clientY);
+                }
+                else if (event.buttons === 1) {
+                    this.turnOnMultiSelect(event);
+                }
+            }
+        });
+        Object.defineProperty(this, "endMultiSelect", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (!this.isMultiSelecting) {
+                    return;
+                }
+                this.isMultiSelecting = false;
+                this.overlayRenderer.clear();
+                const endWorldPosition = this.nvlInstance.getMousePosition(event);
+                const { nodes, rels } = this.nvlInstance.getHitsInBox(this.startWorldPosition.x, this.startWorldPosition.y, endWorldPosition.x, endWorldPosition.y, ['node', 'relationship']);
+                if (this.options.selectOnRelease) {
+                    this.nvlInstance.updateElementsInGraph(nodes.map((node) => ({ id: node.id, selected: true })), rels.map((rel) => ({ id: rel.id, selected: true })));
+                }
+                this.callCallbackIfRegistered('onMultiSelect', { nodes, rels });
+            }
+        });
+        this.mousePosition = { x: 0, y: 0 };
+        this.startWorldPosition = { x: 0, y: 0 };
+        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+        this.isMultiSelecting = false;
+        this.options = options;
+        this.addEventListener('mousedown', this.handleMouseDown, true);
+        this.addEventListener('mousemove', this.handleDrag, true);
+        this.addEventListener('mouseup', this.endMultiSelect, true);
+        this.addEventListener('mouseleave', this.endMultiSelect, true);
+    }
+    /**
+     * Removes all related event listeners and the overlay renderer for the box.
+     */
+    destroy() {
+        this.removeEventListener('mousedown', this.handleMouseDown, true);
+        this.removeEventListener('mousemove', this.handleDrag, true);
+        this.removeEventListener('mouseup', this.endMultiSelect, true);
+        this.removeEventListener('mouseleave', this.endMultiSelect, true);
+        this.overlayRenderer.destroy();
+    }
+    turnOnMultiSelect(event) {
+        this.mousePosition = { x: event.clientX, y: event.clientY };
+        this.startWorldPosition = this.nvlInstance.getMousePosition(event);
+        const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
+        if (hits.nvlTargets.nodes.length > 0) {
+            this.isMultiSelecting = false;
+        }
+        else {
+            this.isMultiSelecting = true;
+            if (this.options.selectOnRelease) {
+                this.nvlInstance.deselectAll();
+            }
+        }
+    }
+}