@neo4j-nvl/interaction-handlers 0.2.45 → 0.2.47

package/lib/index.d.ts

@@ -1,3 +1,5 @@
+import type { BoxSelectInteractionCallbacks, BoxSelectInteractionOptions } from './interaction-handlers/box-select-interaction';
+import { BoxSelectInteraction } from './interaction-handlers/box-select-interaction';
 import type { ClickInteractionCallbacks, ClickInteractionOptions } from './interaction-handlers/click-interaction';
 import { ClickInteraction } from './interaction-handlers/click-interaction';
 import { DragNodeInteraction } from './interaction-handlers/drag-node-interaction';
@@ -6,11 +8,11 @@ import { DrawInteraction } from './interaction-handlers/draw-interaction';
 import type { DrawInteractionCallbacks } from './interaction-handlers/draw-interaction';
 import type { HoverInteractionCallbacks, HoverInteractionOptions } from './interaction-handlers/hover-interaction';
 import { HoverInteraction } from './interaction-handlers/hover-interaction';
-import type { MultiSelectInteractionCallbacks, MultiSelectInteractionOptions } from './interaction-handlers/multi-select-interaction';
-import { MultiSelectInteraction } from './interaction-handlers/multi-select-interaction';
+import { LassoInteraction } from './interaction-handlers/lasso-interaction';
+import type { LassoInteractionCallbacks, LassoInteractionOptions } from './interaction-handlers/lasso-interaction';
 import type { PanInteractionCallbacks, PanInteractionOptions } from './interaction-handlers/pan-interaction';
 import { PanInteraction } from './interaction-handlers/pan-interaction';
 import type { ZoomInteractionCallbacks } from './interaction-handlers/zoom-interaction';
 import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export type { MultiSelectInteractionOptions, MultiSelectInteractionCallbacks, ClickInteractionOptions, HoverInteractionOptions, HoverInteractionCallbacks, DragNodeInteractionCallbacks, ClickInteractionCallbacks, PanInteractionCallbacks, DrawInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks };
-export { ZoomInteraction, PanInteraction, MultiSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction };
+export type { BoxSelectInteractionOptions, BoxSelectInteractionCallbacks, ClickInteractionOptions, HoverInteractionOptions, HoverInteractionCallbacks, DragNodeInteractionCallbacks, ClickInteractionCallbacks, PanInteractionCallbacks, DrawInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks, LassoInteractionOptions, LassoInteractionCallbacks };
+export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction };

package/lib/index.js

@@ -1,8 +1,9 @@
+import { BoxSelectInteraction } from './interaction-handlers/box-select-interaction';
 import { ClickInteraction } from './interaction-handlers/click-interaction';
 import { DragNodeInteraction } from './interaction-handlers/drag-node-interaction';
 import { DrawInteraction } from './interaction-handlers/draw-interaction';
 import { HoverInteraction } from './interaction-handlers/hover-interaction';
-import { MultiSelectInteraction } from './interaction-handlers/multi-select-interaction';
+import { LassoInteraction } from './interaction-handlers/lasso-interaction';
 import { PanInteraction } from './interaction-handlers/pan-interaction';
 import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export { ZoomInteraction, PanInteraction, MultiSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction };
+export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction };

package/lib/interaction-handlers/{multi-select-interaction.d.ts → box-select-interaction.d.ts}

@@ -3,20 +3,25 @@ import { BaseInteraction } from './base';
 /**
  * Options for the multi-select interaction handler to customize its behavior.
  */
-export type MultiSelectInteractionOptions = {
+export type BoxSelectInteractionOptions = {
     /**
      * If true, the selection will be applied when the mouse is released.
      * @default false
      */
     selectOnRelease?: boolean;
 };
-export type MultiSelectInteractionCallbacks = {
+export type BoxSelectInteractionCallbacks = {
+    /**
+     * Called once when the user presses the mouse on the canvas, starting the box selection.
+     * @param event - The original mouse event
+     */
+    onBoxStarted?: (event: MouseEvent) => void;
     /**
      * Called after once the user releases the mouse after multi-selecting.
      * @param selectionObject - The selected nodes and relationships
      * @param event - The original mouse event
      */
-    onMultiSelect?: (({ nodes, rels }: {
+    onBoxSelect?: (({ nodes, rels }: {
         nodes: Node[];
         rels: Relationship[];
     }, event: MouseEvent) => void) | boolean;
@@ -29,30 +34,31 @@ export type MultiSelectInteractionCallbacks = {
  * @example
  * ```js
  * const nvl = new NVL(container, nodes, relationships)
- * const multiSelectInteraction = new MultiSelectInteraction(nvl)
+ * const boxSelectInteraction = new BoxSelectInteraction(nvl)
  *
- * multiSelectInteraction.updateCallback('onMultiSelect', ({ nodes, rels }) => {
+ * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
  */
-export declare class MultiSelectInteraction extends BaseInteraction<MultiSelectInteractionCallbacks> {
+export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks> {
     private mousePosition;
     private startWorldPosition;
     private overlayRenderer;
-    private isMultiSelecting;
+    private isBoxSelecting;
     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);
+    constructor(nvl: NVL, options?: BoxSelectInteractionOptions);
     private handleMouseDown;
     private handleDrag;
-    private endMultiSelect;
+    private getHitsInBox;
+    private endBoxSelect;
     /**
      * Removes all related event listeners and the overlay renderer for the box.
      */
     destroy(): void;
-    private turnOnMultiSelect;
+    private turnOnBoxSelect;
 }

package/lib/interaction-handlers/{multi-select-interaction.js → box-select-interaction.js}

@@ -1,6 +1,7 @@
 import { NODE_EDGE_WIDTH } from '../constants';
 import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
 import { BaseInteraction } from './base';
+import { getCanvasPosition, getWorldPosition } from './utils';
 /**
  * Interaction handler for multi-selecting nodes and relationships.
  * When dragging, draws a box on the canvas and selects all
@@ -9,13 +10,13 @@ import { BaseInteraction } from './base';
  * @example
  * ```js
  * const nvl = new NVL(container, nodes, relationships)
- * const multiSelectInteraction = new MultiSelectInteraction(nvl)
+ * const boxSelectInteraction = new BoxSelectInteraction(nvl)
  *
- * multiSelectInteraction.updateCallback('onMultiSelect', ({ nodes, rels }) => {
+ * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
  */
-export class MultiSelectInteraction extends BaseInteraction {
+export class BoxSelectInteraction extends BaseInteraction {
     /**
      * Creates a new instance of the multi-select interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -41,7 +42,7 @@ export class MultiSelectInteraction extends BaseInteraction {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "isMultiSelecting", {
+        Object.defineProperty(this, "isBoxSelecting", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -59,10 +60,10 @@ export class MultiSelectInteraction extends BaseInteraction {
             writable: true,
             value: (event) => {
                 if (event.button !== 0) {
-                    this.isMultiSelecting = false;
+                    this.isBoxSelecting = false;
                     return;
                 }
-                this.turnOnMultiSelect(event);
+                this.turnOnBoxSelect(event);
             }
         });
         Object.defineProperty(this, "handleDrag", {
@@ -70,41 +71,79 @@ export class MultiSelectInteraction extends BaseInteraction {
             configurable: true,
             writable: true,
             value: (event) => {
-                if (this.isMultiSelecting) {
-                    this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, event.clientX, event.clientY);
+                if (this.isBoxSelecting) {
+                    const curPos = getCanvasPosition(this.containerInstance, event);
+                    this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, curPos.x, curPos.y);
                 }
                 else if (event.buttons === 1) {
-                    this.turnOnMultiSelect(event);
+                    this.turnOnBoxSelect(event);
                 }
             }
         });
-        Object.defineProperty(this, "endMultiSelect", {
+        Object.defineProperty(this, "getHitsInBox", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (startPos, endPos) => {
+                const inside = (pos, start, end) => {
+                    const minX = Math.min(start.x, end.x);
+                    const maxX = Math.max(start.x, end.x);
+                    const minY = Math.min(start.y, end.y);
+                    const maxY = Math.max(start.y, end.y);
+                    return pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY;
+                };
+                const positions = this.nvlInstance.getNodePositions();
+                const hitNodes = new Set();
+                for (const pos of positions) {
+                    if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
+                        continue;
+                    }
+                    if (inside(pos, startPos, endPos)) {
+                        hitNodes.add(pos.id);
+                    }
+                }
+                const rels = this.nvlInstance.getRelationships();
+                const hitRels = [];
+                for (const rel of rels) {
+                    if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) {
+                        hitRels.push(rel);
+                    }
+                }
+                const hitNodeArray = Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id));
+                return {
+                    nodes: hitNodeArray,
+                    rels: hitRels
+                };
+            }
+        });
+        Object.defineProperty(this, "endBoxSelect", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: (event) => {
-                if (!this.isMultiSelecting) {
+                if (!this.isBoxSelecting) {
                     return;
                 }
-                this.isMultiSelecting = false;
+                this.isBoxSelecting = 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']);
+                const endPosition = getCanvasPosition(this.containerInstance, event);
+                const endWorldPosition = getWorldPosition(this.nvlInstance, endPosition);
+                const { nodes, rels } = this.getHitsInBox(this.startWorldPosition, endWorldPosition);
                 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 }, event);
+                this.callCallbackIfRegistered('onBoxSelect', { nodes, rels }, event);
             }
         });
         this.mousePosition = { x: 0, y: 0 };
         this.startWorldPosition = { x: 0, y: 0 };
         this.overlayRenderer = new OverlayRenderer(this.containerInstance);
-        this.isMultiSelecting = false;
+        this.isBoxSelecting = 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);
+        this.addEventListener('mouseup', this.endBoxSelect, true);
+        this.addEventListener('mouseleave', this.endBoxSelect, true);
     }
     /**
      * Removes all related event listeners and the overlay renderer for the box.
@@ -112,22 +151,23 @@ export class MultiSelectInteraction extends BaseInteraction {
     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.removeEventListener('mouseup', this.endBoxSelect, true);
+        this.removeEventListener('mouseleave', this.endBoxSelect, true);
         this.overlayRenderer.destroy();
     }
-    turnOnMultiSelect(event) {
-        this.mousePosition = { x: event.clientX, y: event.clientY };
-        this.startWorldPosition = this.nvlInstance.getMousePosition(event);
+    turnOnBoxSelect(event) {
+        this.mousePosition = getCanvasPosition(this.containerInstance, event);
+        this.startWorldPosition = getWorldPosition(this.nvlInstance, this.mousePosition);
         const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
         if (hits.nvlTargets.nodes.length > 0) {
-            this.isMultiSelecting = false;
+            this.isBoxSelecting = false;
         }
         else {
-            this.isMultiSelecting = true;
+            this.isBoxSelecting = true;
             if (this.options.selectOnRelease) {
                 this.nvlInstance.deselectAll();
             }
         }
+        this.callCallbackIfRegistered('onBoxStarted', event);
     }
 }

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

@@ -1,7 +1,7 @@
 import { NODE_EDGE_WIDTH } from '../constants';
 import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
 import { BaseInteraction } from './base';
-import { generateUniqueId } from './utils';
+import { generateUniqueId, getCanvasPosition, getWorldPosition } from './utils';
 /**
  * @internal
  * @experimental
@@ -84,8 +84,8 @@ export class DrawInteraction extends BaseInteraction {
                 this.isMoved = true;
                 if (this.isDrawing) {
                     this.overlayRenderer.clear();
-                    // Rename to getMousePosition in world coordinate
-                    const pos = this.nvlInstance.getMousePosition(event);
+                    const canvasPos = getCanvasPosition(this.containerInstance, event);
+                    const pos = getWorldPosition(this.nvlInstance, canvasPos);
                     const hits = this.nvlInstance.getHits(event, ['node']);
                     const hitNode = hits.nvlTargets.nodes.filter((n) => n.data.id !== this.newTempTargetNode.id)[0];
                     const targetNode = hitNode
@@ -193,7 +193,8 @@ export class DrawInteraction extends BaseInteraction {
                     this.isDrawing = true;
                     this.isDraggingNode = false;
                     this.mouseDownNode = hitNodeEdges[0];
-                    const pos = this.nvlInstance.getMousePosition(event);
+                    const canvasPos = getCanvasPosition(this.containerInstance, event);
+                    const pos = getWorldPosition(this.nvlInstance, canvasPos);
                     this.newTempTargetNode = {
                         id: generateUniqueId(13),
                         size: 25,

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

@@ -0,0 +1,64 @@
+import type { NVL, Node, Relationship } from '@neo4j-nvl/core';
+import { BaseInteraction } from './base';
+/**
+ * Options for the lasso interaction handler to customize its behavior.
+ */
+export type LassoInteractionOptions = {
+    /**
+     * If true, the selected items will be automatically selected when the gesture is finished.
+     * @default false
+     */
+    selectOnRelease?: boolean;
+};
+export type LassoInteractionCallbacks = {
+    /**
+     * Called once when the user presses the mouse on the canvas, starting the lasso.
+     * @param event - The original mouse event
+     */
+    onLassoStarted?: (event: MouseEvent) => void;
+    /**
+     * Called once when the user releases the mouse after lasso selecting.
+     * @param selectionObject - The selected node and relationship ids
+     * @param event - The original mouse event
+     */
+    onLassoSelect?: (({ nodes, rels }: {
+        nodes: Node[];
+        rels: Relationship[];
+    }, event: MouseEvent) => void) | boolean;
+};
+/**
+ * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn
+ * area will be selected.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const lassoInteraction = new LassoInteraction(nvl)
+ *
+ * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
+ *  console.log('Selected elements:', nodes, rels)
+ * })
+ */
+export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks> {
+    private active;
+    private points;
+    private overlayRenderer;
+    private readonly options;
+    /**
+     * Creates a new instance of the lasso interaction handler.
+     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param options - Options for the lasso interaction handler to customize its behavior
+     */
+    constructor(nvl: NVL, options?: LassoInteractionOptions);
+    private startLasso;
+    private handleMouseDown;
+    private handleDrag;
+    private handleMouseUp;
+    private getLassoItems;
+    private endLasso;
+    /**
+     * Removes all related event listeners and the overlay renderer for the box.
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,181 @@
+import concaveman from 'concaveman';
+import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
+import { BaseInteraction } from './base';
+import { getCanvasPosition, getWorldPosition } from './utils';
+const pointDist = 10;
+const shapeShowTime = 500;
+/**
+ * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn
+ * area will be selected.
+ *
+ * @example
+ * ```js
+ * const nvl = new NVL(container, nodes, relationships)
+ * const lassoInteraction = new LassoInteraction(nvl)
+ *
+ * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
+ *  console.log('Selected elements:', nodes, rels)
+ * })
+ */
+export class LassoInteraction extends BaseInteraction {
+    /**
+     * Creates a new instance of the lasso interaction handler.
+     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param options - Options for the lasso interaction handler to customize its behavior
+     */
+    constructor(nvl, options = { selectOnRelease: false }) {
+        super(nvl);
+        Object.defineProperty(this, "active", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "points", {
+            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, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "startLasso", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                this.active = true;
+                this.points = [getCanvasPosition(this.containerInstance, event)];
+                this.callCallbackIfRegistered('onLassoStarted', event);
+            }
+        });
+        Object.defineProperty(this, "handleMouseDown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (event.button === 0 && !this.active) {
+                    this.startLasso(event);
+                }
+            }
+        });
+        Object.defineProperty(this, "handleDrag", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (this.active) {
+                    const lastPoint = this.points[this.points.length - 1];
+                    const pos = getCanvasPosition(this.containerInstance, event);
+                    const dx = Math.abs(lastPoint.x - pos.x);
+                    const dy = Math.abs(lastPoint.y - pos.y);
+                    if (dx > pointDist || dy > pointDist) {
+                        this.points.push(pos);
+                        this.overlayRenderer.drawLasso(this.points, true, false);
+                    }
+                }
+            }
+        });
+        Object.defineProperty(this, "handleMouseUp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                this.points.push(getCanvasPosition(this.containerInstance, event));
+                this.endLasso(event);
+            }
+        });
+        Object.defineProperty(this, "getLassoItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points) => {
+                const inside = (x, y, vs) => {
+                    // ray-casting algorithm based on
+                    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
+                    let isInside = false;
+                    for (let i = 0, j = vs.length - 1; i < vs.length; j = i, i += 1) {
+                        const { x: xi, y: yi } = vs[i];
+                        const { x: xj, y: yj } = vs[j];
+                        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+                        if (intersect) {
+                            isInside = !isInside;
+                        }
+                    }
+                    return isInside;
+                };
+                const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
+                const nodePositions = this.nvlInstance.getNodePositions();
+                const hitNodes = new Set();
+                for (const pos of nodePositions) {
+                    if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
+                        continue;
+                    }
+                    if (inside(pos.x, pos.y, worldPoints)) {
+                        hitNodes.add(pos.id);
+                    }
+                }
+                const rels = this.nvlInstance.getRelationships();
+                const hitRels = [];
+                for (const rel of rels) {
+                    if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) {
+                        hitRels.push(rel);
+                    }
+                }
+                const hitNodeArray = Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id));
+                return {
+                    nodes: hitNodeArray,
+                    rels: hitRels
+                };
+            }
+        });
+        Object.defineProperty(this, "endLasso", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                if (!this.active) {
+                    return;
+                }
+                this.active = false;
+                const pointArrays = this.points.map((p) => [p.x, p.y]);
+                const hull = concaveman(pointArrays, 3).map((p) => ({ x: p[0], y: p[1] }));
+                this.overlayRenderer.drawLasso(hull, false, true);
+                setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
+                const hitItems = this.getLassoItems(hull);
+                if (this.options.selectOnRelease) {
+                    this.nvlInstance.updateElementsInGraph(hitItems.nodes.map((node) => ({ id: node.id, selected: true })), hitItems.rels.map((rel) => ({ id: rel.id, selected: true })));
+                }
+                this.callCallbackIfRegistered('onLassoSelect', hitItems, event);
+            }
+        });
+        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+        this.active = false;
+        this.options = options;
+        this.addEventListener('mousedown', this.handleMouseDown, true);
+        this.addEventListener('mousemove', this.handleDrag, true);
+        this.addEventListener('mouseup', this.handleMouseUp, true);
+        this.addEventListener('mouseleave', this.endLasso, 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.endLasso, true);
+        this.removeEventListener('mouseleave', this.endLasso, true);
+        this.overlayRenderer.destroy();
+    }
+}

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

@@ -1,5 +1,6 @@
+import type { NVL, Point } from '@neo4j-nvl/core';
 export declare const generateUniqueId: (digit: number) => string;
-export declare const isDraggingMovement: (event: MouseEvent, originalPosition: {
-    x: number;
-    y: number;
-}) => boolean;
+export declare const isDraggingMovement: (event: MouseEvent, originalPosition: Point) => boolean;
+export declare const getCanvasPosition: (canvas: HTMLElement, mouseEvent: MouseEvent) => Point;
+export declare const getCanvasCenterOffset: (canvas: HTMLElement, mouseEvent: MouseEvent) => Point;
+export declare const getWorldPosition: (nvl: NVL, pos: Point) => Point;

package/lib/interaction-handlers/utils.js

@@ -9,3 +9,32 @@ export const isDraggingMovement = (event, originalPosition) => {
     const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
     return distanceSquared > DRAG_THRESHOLD;
 };
+export const getCanvasPosition = (canvas, mouseEvent) => {
+    const rect = canvas.getBoundingClientRect();
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    return {
+        x: (mouseEvent.clientX - rect.left) * devicePixelRatio,
+        y: (mouseEvent.clientY - rect.top) * devicePixelRatio
+    };
+};
+export const getCanvasCenterOffset = (canvas, mouseEvent) => {
+    const rect = canvas.getBoundingClientRect();
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    return {
+        x: (mouseEvent.clientX - rect.left - rect.width * 0.5) * devicePixelRatio,
+        y: (mouseEvent.clientY - rect.top - rect.height * 0.5) * devicePixelRatio
+    };
+};
+export const getWorldPosition = (nvl, pos) => {
+    const scale = nvl.getScale();
+    const pan = nvl.getPan();
+    const container = nvl.getContainer();
+    const { width, height } = container.getBoundingClientRect();
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const x = pos.x - width * 0.5 * devicePixelRatio;
+    const y = pos.y - height * 0.5 * devicePixelRatio;
+    return {
+        x: pan.x + x / scale,
+        y: pan.y + y / scale
+    };
+};

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

@@ -1,5 +1,6 @@
 import { throttle } from 'lodash';
 import { BaseInteraction } from './base';
+import { getCanvasCenterOffset } from './utils';
 /**
  * Interaction handler for zooming the canvas.
  * Zooming is achieved by scrolling the mouse wheel on the canvas.
@@ -41,9 +42,9 @@ export class ZoomInteraction extends BaseInteraction {
                 const { x, y } = this.nvlInstance.getPan();
                 const factor = event.deltaY / 500;
                 const newZoomTarget = zoom - factor * Math.min(1, zoom);
-                const { offsetX, offsetY } = this.nvlInstance.getMouseElementCoordinates(event);
-                const newPanX = x + (offsetX / zoom - offsetX / newZoomTarget);
-                const newPanY = y + (offsetY / zoom - offsetY / newZoomTarget);
+                const offs = getCanvasCenterOffset(this.containerInstance, event);
+                const newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
+                const newPanY = y + (offs.y / zoom - offs.y / newZoomTarget);
                 this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
                 this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
             }, 25, { leading: true })

package/lib/overlay-renderer/overlay-renderer.d.ts

@@ -1,11 +1,15 @@
 export declare class OverlayRenderer {
-    private _ctx;
-    canvas: HTMLCanvasElement;
-    removeResizeListener: any;
+    private ctx;
+    private canvas;
+    private removeResizeListener;
     constructor(canvasParent: HTMLElement);
-    _fixCanvasSize(canvas: HTMLCanvasElement): void;
-    _zoomAndPan(zoom: number, panX: number, panY: number): void;
+    private fixCanvasSize;
+    private zoomAndPan;
     drawBox(startX: number, startY: number, endX: number, endY: number): void;
+    drawLasso(points: {
+        x: number;
+        y: number;
+    }[], stroke: boolean, fill: boolean): void;
     drawNodeRing(x: number, y: number, radius: number, zoom: number, panX: number, panY: number): void;
     clear(): void;
     destroy(): void;

package/lib/overlay-renderer/overlay-renderer.js

@@ -8,7 +8,7 @@ const marquee = {
 };
 export class OverlayRenderer {
     constructor(canvasParent) {
-        Object.defineProperty(this, "_ctx", {
+        Object.defineProperty(this, "ctx", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -39,14 +39,14 @@ export class OverlayRenderer {
         canvas.style.msTouchAction = 'none';
         canvasParent.appendChild(canvas);
         const context = canvas.getContext('2d');
-        this._ctx = context;
+        this.ctx = context;
         this.canvas = canvas;
         this.removeResizeListener = onResize(canvasParent, () => {
-            this._fixCanvasSize(canvas);
+            this.fixCanvasSize(canvas);
         });
-        this._fixCanvasSize(canvas);
+        this.fixCanvasSize(canvas);
     }
-    _fixCanvasSize(canvas) {
+    fixCanvasSize(canvas) {
         const parent = canvas.parentElement;
         const rect = parent.getBoundingClientRect();
         const { width } = rect;
@@ -58,56 +58,87 @@ export class OverlayRenderer {
         canvas.style.height = `${height}px`;
     }
     // Can be extracted as a util
-    _zoomAndPan(zoom, panX, panY) {
-        const { width, height } = this.canvas;
-        this._ctx.translate((-width / 2) * zoom, (-height / 2) * zoom);
-        this._ctx.translate(-panX * zoom, -panY * zoom);
-        this._ctx.scale(zoom, zoom);
-        this._ctx.translate(width / 2 / zoom, height / 2 / zoom);
-        this._ctx.translate(width / 2, height / 2);
+    zoomAndPan(zoom, panX, panY) {
+        const { ctx, canvas } = this;
+        const { width, height } = canvas;
+        ctx.translate((-width / 2) * zoom, (-height / 2) * zoom);
+        ctx.translate(-panX * zoom, -panY * zoom);
+        ctx.scale(zoom, zoom);
+        ctx.translate(width / 2 / zoom, height / 2 / zoom);
+        ctx.translate(width / 2, height / 2);
     }
     drawBox(startX, startY, endX, endY) {
+        const { ctx } = this;
+        if (ctx === null) {
+            return;
+        }
         this.clear();
-        this._ctx.save();
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(startX, startY, endX - startX, endY - startY);
+        ctx.closePath();
+        ctx.strokeStyle = marquee.frameColor;
         const devicePixelRatio = window.devicePixelRatio || 1;
-        const rect = this.canvas.getBoundingClientRect();
-        const localStartX = (startX - rect.left) * devicePixelRatio;
-        const localStartY = (startY - rect.top) * devicePixelRatio;
-        const localEndX = (endX - rect.left) * devicePixelRatio;
-        const localEndY = (endY - rect.top) * devicePixelRatio;
-        if (!this._ctx) {
+        ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
+        ctx.fillStyle = marquee.color;
+        ctx.globalAlpha = marquee.opacity;
+        ctx.stroke();
+        ctx.fill();
+    }
+    drawLasso(points, stroke, fill) {
+        const { ctx } = this;
+        if (ctx === null) {
             return;
         }
-        this._ctx.beginPath();
-        this._ctx.rect(localStartX, localStartY, localEndX - localStartX, localEndY - localStartY);
-        this._ctx.closePath();
-        this._ctx.strokeStyle = marquee.frameColor;
-        this._ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
-        this._ctx.fillStyle = marquee.color;
-        this._ctx.globalAlpha = marquee.opacity;
-        this._ctx.stroke();
-        this._ctx.fill();
+        ctx.save();
+        this.clear();
+        ctx.beginPath();
+        for (let i = 0; i < points.length; i++) {
+            const { x, y } = points[i];
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        }
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        ctx.strokeStyle = marquee.frameColor;
+        ctx.setLineDash([10, 15]);
+        ctx.lineWidth = 3 * devicePixelRatio;
+        ctx.fillStyle = marquee.color;
+        ctx.globalAlpha = 0.5;
+        if (stroke) {
+            ctx.stroke();
+        }
+        if (fill) {
+            ctx.fill();
+        }
+        ctx.restore();
     }
     drawNodeRing(x, y, radius, zoom, panX, panY) {
+        const { ctx } = this;
         this.clear();
-        this._ctx.save();
+        ctx.save();
         const devicePixelRatio = window.devicePixelRatio || 1;
-        this._zoomAndPan(zoom, panX, panY);
+        this.zoomAndPan(zoom, panX, panY);
         // TODO: make 0.2 configurable from state and same as colour
         const width = (radius !== null && radius !== void 0 ? radius : 25) * devicePixelRatio * 0.2;
-        drawCircleBand(this._ctx, x, y, (radius !== null && radius !== void 0 ? radius : 25) * devicePixelRatio, [{ width, color: 'blue' }]);
-        this._ctx.restore();
+        drawCircleBand(ctx, x, y, (radius !== null && radius !== void 0 ? radius : 25) * devicePixelRatio, [{ width, color: 'blue' }]);
+        ctx.restore();
     }
     clear() {
-        const rect = this.canvas.getBoundingClientRect();
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        if (!this._ctx) {
+        const { ctx, canvas } = this;
+        if (ctx === null) {
             return;
         }
-        this._ctx.clearRect(0, 0, rect.width * devicePixelRatio, rect.height * devicePixelRatio);
+        const rect = canvas.getBoundingClientRect();
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        ctx.clearRect(0, 0, rect.width * devicePixelRatio, rect.height * devicePixelRatio);
     }
     destroy() {
+        const { canvas } = this;
         this.removeResizeListener();
-        this.canvas.remove();
+        canvas.remove();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -25,6 +25,7 @@
     "yarn": "^1.10.1"
   },
   "dependencies": {
+    "concaveman": "^1.2.1",
     "lodash": "^4.17.21",
     "resizelistener": "^1.1.0"
   },