@neo4j-nvl/interaction-handlers 0.3.3 → 0.3.4-b33c5deb

package/README.md

@@ -1,8 +1,8 @@
 # Neo4j Visualization Library
 
-Welcome to NVL (Neo4j Visualization Library). NVL is a collection of libraries that can be used to build custom graph visualizations like [Neo4j Bloom](https://neo4j.com/product/bloom/). The NVL library is also available as a React component that can be used in React applications.
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. It is also available as a React component that can be used in React applications.
 
-This module is a collection of decorator classes that can be used to add interaction events to an NVL instance. The decorators are applied to the NVL class. You can find more information about the NVL class in the base library documentation.
+This module is a collection of decorator classes that can be used to add interaction events to an NVL instance. The decorators are applied to the NVL class. You can find more information about the NVL class in the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
 
 ## Consuming the library
 
@@ -14,13 +14,12 @@ You can install the interaction handlers with your preferred package manager, fo
 npm install @neo4j-nvl/interaction-handlers
 ```
 
-If you are planning to use NVL in a React app, be sure to check out the NVL React wrappers.
+If you are planning to use NVL in a React app, be sure to check out the [NVL React wrappers](https://www.npmjs.com/package/@neo4j-nvl/react).
 
 ### Using the library
 
 Heres is an example on how to use an interaction handler with the NVL class:
 
-
 ```ts
 import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
 import { NVL } from '@neo4j-nvl/base'
@@ -34,4 +33,4 @@ clickInteraction.updateCallback('onNodeClick', (node) => {
 
 If you are using React and want to add interactivity to your graph, you can also make use of the InteractiveReactWrapper.
 
-You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/).
+You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/).

package/lib/__tests__/lasso-interaction.test.js

@@ -1,6 +1,6 @@
 import NVL from '@neo4j-nvl/base';
 import '@testing-library/jest-dom';
-import { LassoInteraction } from '../interaction-handlers/lasso-interaction';
+import { LassoInteraction, checkIntersection, checkLinesCrossing, checkPointInside } from '../interaction-handlers/lasso-interaction';
 jest.mock('@neo4j-nvl/layout-workers');
 const testNodes = [
     { id: '0', x: 10, y: 10 },
@@ -64,7 +64,7 @@ describe('LassoInteraction', () => {
             createMouseEvent('mousemove', 250, 0),
             createMouseEvent('mousemove', 240, 240),
             createMouseEvent('mousemove', 100, 200),
-            createMouseEvent('mousemove', 50, 0),
+            createMouseEvent('mousemove', 0, 50),
             createMouseEvent('mouseup', 0, 0)
         ];
         const container = myNVL.getContainer();
@@ -76,4 +76,49 @@ describe('LassoInteraction', () => {
             resolve();
         });
     });
+    test('test for line crossing utility function', () => {
+        const res1 = checkLinesCrossing([0, 0], [10, 10], [10, 0], [0, 10]);
+        expect(res1).toBeTruthy();
+        const res2 = checkLinesCrossing([10, 10], [227, 182], [390, 10], [100, 100]);
+        expect(res2).toBeTruthy();
+        const res3 = checkLinesCrossing([5, 5], [5, 20], [10, 10], [20, 10]);
+        expect(res3).toBeFalsy();
+        const res4 = checkLinesCrossing([10, 10], [20, 10], [15, 10], [25, 10]);
+        expect(res4).toBeFalsy();
+        const res5 = checkLinesCrossing([880, 416], [872, 404], [868, 392], [856, 378]);
+        expect(res5).toBeFalsy();
+    });
+    test('test for line segment crossing utility function', () => {
+        const res1 = checkIntersection([
+            [0, 0],
+            [10, 0],
+            [100, 10],
+            [50, 10],
+            [50, -10]
+        ]);
+        expect(res1).toBeTruthy();
+        const res2 = checkIntersection([
+            [10, 10],
+            [227, 182],
+            [390, 10],
+            [500, 100]
+        ]);
+        expect(res2).toBeFalsy();
+    });
+    test('test for point inside polygon utility function', () => {
+        const res1 = checkPointInside(10, 10, [
+            { x: 0, y: 0 },
+            { x: 10, y: -10 },
+            { x: 20, y: 0 },
+            { x: 10, y: 20 }
+        ]);
+        expect(res1).toBeTruthy();
+        const res2 = checkPointInside(10, 10, [
+            { x: 0, y: 0 },
+            { x: 10, y: -10 },
+            { x: 20, y: 0 },
+            { x: 10, y: 5 }
+        ]);
+        expect(res2).toBeFalsy();
+    });
 });

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

@@ -27,22 +27,10 @@ export type BoxSelectInteractionCallbacks = {
     }, event: MouseEvent) => void) | boolean;
 };
 /**
- * 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.
+ * An interaction handler for multi-selecting nodes and relationships.
+ * When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
  *
- * @example
- * ```js
- * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const boxSelectInteraction = new BoxSelectInteraction(nvl)
- *
- * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
  */
 export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks, BoxSelectInteractionOptions> {
     private mousePosition;

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

@@ -3,22 +3,10 @@ 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
- * nodes and relationships that are inside the box.
+ * An interaction handler for multi-selecting nodes and relationships.
+ * When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
  *
- * @example
- * ```js
- * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const boxSelectInteraction = new BoxSelectInteraction(nvl)
- *
- * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
  */
 export class BoxSelectInteraction extends BaseInteraction {
     mousePosition;

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

@@ -74,19 +74,9 @@ export type ClickInteractionCallbacks = {
 };
 /**
  * Click interaction handler that handles click, double click and right click events on
- * nodes, relationships and canvas.
+ * nodes, relationships, and the scene.
  *
- * @example
- * ```ts
- * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const clickInteraction = new ClickInteraction(nvl)
- * clickInteraction.updateCallback('onNodeClick', (node) => {
- *   console.log('Node clicked', node)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_clickinteraction Click Interaction documentation page}.
  */
 export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks, ClickInteractionOptions> {
     private moved;

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

@@ -2,19 +2,9 @@ import { BaseInteraction } from './base';
 import { isDraggingMovement } from './utils';
 /**
  * Click interaction handler that handles click, double click and right click events on
- * nodes, relationships and canvas.
+ * nodes, relationships, and the scene.
  *
- * @example
- * ```ts
- * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const clickInteraction = new ClickInteraction(nvl)
- * clickInteraction.updateCallback('onNodeClick', (node) => {
- *   console.log('Node clicked', node)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_clickinteraction Click Interaction documentation page}.
  */
 export class ClickInteraction extends BaseInteraction {
     moved;

package/lib/interaction-handlers/drag-node-interaction.d.ts

@@ -24,22 +24,11 @@ export type DragNodeInteractionCallbacks = {
     onDragEnd?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
 };
 /**
- * Interaction handler for dragging nodes.
- * Dragging is achieved by clicking and dragging on the node.
- * @note When more than one node is selected, all selected nodes will be dragged.
+ * Interaction handler for dragging nodes,
+ * which is achieved by clicking and moving the node.
+ * When multiple nodes are selected, they are all dragged.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const dragNodeInteraction = new DragNodeInteraction(nvl)
- *
- * dragNodeInteraction.updateCallback('onDrag', (nodes) => {
- *   console.log('Dragged nodes:', nodes)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_dragnodeinteraction Drag Node Interaction documentation page}.
  */
 export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks, Record<string, never>> {
     private mousePosition;

package/lib/interaction-handlers/drag-node-interaction.js

@@ -2,22 +2,11 @@ import { NODE_EDGE_WIDTH } from '../constants';
 import { BaseInteraction } from './base';
 import { isDraggingMovement } from './utils';
 /**
- * Interaction handler for dragging nodes.
- * Dragging is achieved by clicking and dragging on the node.
- * @note When more than one node is selected, all selected nodes will be dragged.
+ * Interaction handler for dragging nodes,
+ * which is achieved by clicking and moving the node.
+ * When multiple nodes are selected, they are all dragged.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const dragNodeInteraction = new DragNodeInteraction(nvl)
- *
- * dragNodeInteraction.updateCallback('onDrag', (nodes) => {
- *   console.log('Dragged nodes:', nodes)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_dragnodeinteraction Drag Node Interaction documentation page}.
  */
 export class DragNodeInteraction extends BaseInteraction {
     mousePosition;

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

@@ -2,11 +2,11 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
 import { BaseInteraction } from './base';
 /**
  * @internal
- * @experimental
  */
 export type DrawInteractionCallbacks = {
     onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
-    onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
+    onDrawEnded?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
+    onDrawStarted?: ((event: MouseEvent) => void) | boolean;
 };
 export type DrawInteractionOptions = {
     ghostGraphStyling?: {
@@ -16,7 +16,6 @@ export type DrawInteractionOptions = {
 };
 /**
  * @internal
- * @experimental
  */
 export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks, DrawInteractionOptions> {
     private isMoved;

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

@@ -14,7 +14,6 @@ const DefaultGhostGraphStyling = {
 };
 /**
  * @internal
- * @experimental
  */
 export class DrawInteraction extends BaseInteraction {
     isMoved;
@@ -242,6 +241,7 @@ export class DrawInteraction extends BaseInteraction {
             };
             this.setNewRegularRelationshipToNewTempTargetNode();
             this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], this.newTempRegularRelationshipToNewTempTargetNode ? [this.newTempRegularRelationshipToNewTempTargetNode] : []);
+            this.callCallbackIfRegistered('onDrawStarted', event);
         }
         else {
             this.mouseDownNode = undefined;
@@ -262,7 +262,7 @@ export class DrawInteraction extends BaseInteraction {
             }
             // Avoid relationship glitch.
             this.nvlInstance.addAndUpdateElementsInGraph(this.newTargetNodeToAdd ? [{ id: this.newTargetNodeToAdd.id }] : [], this.newRelationshipToAdd ? [this.newRelationshipToAdd] : []);
-            this.callCallbackIfRegistered('onDrawEnd', this.newRelationshipToAdd, this.newTargetNodeToAdd, event);
+            this.callCallbackIfRegistered('onDrawEnded', this.newRelationshipToAdd, this.newTargetNodeToAdd, event);
         }
         this.newTempTargetNode = null;
         this.newTempRegularRelationshipToNewTempTargetNode = null;

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

@@ -19,7 +19,7 @@ export type HoverInteractionCallbacks = {
      * @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,
+     * 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) | boolean;
@@ -27,20 +27,7 @@ export type HoverInteractionCallbacks = {
 /**
  * Interaction handler for hovering nodes and relationships.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * 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)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_hoverinteraction Hover Interaction documentation page}.
  */
 export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks, HoverInteractionOptions> {
     private currentHoveredElement;

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

@@ -2,20 +2,7 @@ import { BaseInteraction } from './base';
 /**
  * Interaction handler for hovering nodes and relationships.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * 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)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_hoverinteraction Hover Interaction documentation page}.
  */
 export class HoverInteraction extends BaseInteraction {
     currentHoveredElement;

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

@@ -1,4 +1,4 @@
-import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
+import type { NVL, Node, Point, Relationship } from '@neo4j-nvl/base';
 import { BaseInteraction } from './base';
 /**
  * Options for the lasso interaction handler to customize its behavior.
@@ -27,22 +27,29 @@ export type LassoInteractionCallbacks = {
     }, 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
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const lassoInteraction = new LassoInteraction(nvl)
+ * @internal
+ */
+export type Coords = [number, number];
+/**
+ * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
+ * @internal
+ */
+export declare const checkLinesCrossing: (p1: Coords, p2: Coords, p3: Coords, p4: Coords) => boolean;
+/**
+ * Checks if any line segments in the polygon intersect.
+ * @internal
+ */
+export declare const checkIntersection: (polygon: Coords[]) => boolean;
+/**
+ * Checks if the point (x, y) is inside the polygon defined by vs.
+ * @internal
+ */
+export declare const checkPointInside: (x: number, y: number, vs: Point[]) => boolean;
+/**
+ * An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn on the scene and all elements inside are selected.
  *
- * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
  */
 export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks, LassoInteractionOptions> {
     private active;

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

@@ -5,22 +5,65 @@ 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
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const lassoInteraction = new LassoInteraction(nvl)
+ * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
+ * @internal
+ */
+export const checkLinesCrossing = (p1, p2, p3, p4) => {
+    const denom = (p4[1] - p3[1]) * (p2[0] - p1[0]) - (p4[0] - p3[0]) * (p2[1] - p1[1]);
+    if (denom === 0) {
+        // This means lines are parallell
+        return false;
+    }
+    const t1 = ((p1[1] - p3[1]) * (p4[0] - p3[0]) - (p1[0] - p3[0]) * (p4[1] - p3[1])) / denom;
+    const t2 = ((p3[0] - p1[0]) * (p2[1] - p1[1]) - (p3[1] - p1[1]) * (p2[0] - p1[0])) / denom;
+    return t1 > 0 && t1 < 1 && t2 > 0 && t2 < 1;
+};
+/**
+ * Checks if any line segments in the polygon intersect.
+ * @internal
+ */
+export const checkIntersection = (polygon) => {
+    for (let i = 0; i < polygon.length - 1; i++) {
+        for (let j = i + 2; j < polygon.length - 1; j++) {
+            const line1p1 = polygon[i] ?? [0, 0];
+            const line1p2 = polygon[i + 1] ?? [0, 0];
+            const line2p1 = polygon[j] ?? [0, 0];
+            const line2p2 = polygon[j + 1] ?? [0, 0];
+            if (checkLinesCrossing(line1p1, line1p2, line2p1, line2p2)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+/**
+ * Checks if the point (x, y) is inside the polygon defined by vs.
+ * @internal
+ */
+export const checkPointInside = (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 vsI = vs[i];
+        const vsJ = vs[j];
+        if (vsI === undefined || vsJ === undefined) {
+            continue;
+        }
+        const { x: xi, y: yi } = vsI;
+        const { x: xj, y: yj } = vsJ;
+        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+};
+/**
+ * An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn on the scene and all elements inside are selected.
  *
- * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
  */
 export class LassoInteraction extends BaseInteraction {
     active;
@@ -70,25 +113,6 @@ export class LassoInteraction extends BaseInteraction {
         this.endLasso(event);
     };
     getLassoItems = (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 vsI = vs[i];
-                const vsJ = vs[j];
-                if (vsI === undefined || vsJ === undefined) {
-                    continue;
-                }
-                const { x: xi, y: yi } = vsI;
-                const { x: xj, y: yj } = vsJ;
-                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();
@@ -96,7 +120,7 @@ export class LassoInteraction extends BaseInteraction {
             if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
                 continue;
             }
-            if (inside(pos.x, pos.y, worldPoints)) {
+            if (checkPointInside(pos.x, pos.y, worldPoints)) {
                 hitNodes.add(pos.id);
             }
         }
@@ -119,7 +143,8 @@ export class LassoInteraction extends BaseInteraction {
         }
         this.active = false;
         const pointArrays = this.points.map((p) => [p.x, p.y]);
-        const hull = concaveman(pointArrays, 3)
+        const hasCrossings = checkIntersection(pointArrays);
+        const hull = (hasCrossings ? concaveman(pointArrays, 2) : pointArrays)
             .map((p) => ({ x: p[0], y: p[1] }))
             .filter((point) => point.x !== undefined && point.y !== undefined);
         this.overlayRenderer.drawLasso(hull, false, true);

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

@@ -25,21 +25,9 @@ export type PanInteractionCallbacks = {
     }, event: MouseEvent) => void) | boolean;
 };
 /**
- * Interaction handler for panning the canvas.
- * Panning is achieved by clicking and dragging on the canvas.
+ * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const panInteraction = new PanInteraction(nvl)
- *
- * panInteraction.updateCallback('onPan', (panning) => {
- *   console.log('Panning:', panning)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
  */
 export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks, PanInteractionOptions> {
     private mousePosition;
@@ -54,7 +42,7 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallba
      * Updates which type of graph elements should hinder panning.
      * @param targets - The graph elements that should hinder panning
      * @param excludeNodeMargin - If true, the node margin will not hinder panning
-     * @note By default, panning is hindered by nodes and relationships.
+     * By default, panning is hindered by nodes and relationships.
      *
      * @example
      * ```js

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

@@ -2,21 +2,9 @@ import { difference } from 'lodash';
 import { NODE_EDGE_WIDTH } from '../constants';
 import { BaseInteraction } from './base';
 /**
- * Interaction handler for panning the canvas.
- * Panning is achieved by clicking and dragging on the canvas.
+ * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const panInteraction = new PanInteraction(nvl)
- *
- * panInteraction.updateCallback('onPan', (panning) => {
- *   console.log('Panning:', panning)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
  */
 export class PanInteraction extends BaseInteraction {
     mousePosition;
@@ -39,7 +27,7 @@ export class PanInteraction extends BaseInteraction {
      * Updates which type of graph elements should hinder panning.
      * @param targets - The graph elements that should hinder panning
      * @param excludeNodeMargin - If true, the node margin will not hinder panning
-     * @note By default, panning is hindered by nodes and relationships.
+     * By default, panning is hindered by nodes and relationships.
      *
      * @example
      * ```js

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

@@ -12,21 +12,9 @@ export type ZoomInteractionCallbacks = {
     onZoom?: ((zoomLevel: number, event: WheelEvent) => void) | boolean;
 };
 /**
- * Interaction handler for zooming the canvas.
- * Zooming is achieved by scrolling the mouse wheel on the canvas.
+ * Interaction handler for zooming the canvas, which is achieved by scrolling the mouse wheel on the canvas.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const zoomInteraction = new ZoomInteraction(nvl)
- *
- * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
- *   console.log('Zoom level:', zoomLevel)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
  */
 export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks, Record<string, never>> {
     /**
@@ -37,13 +25,13 @@ export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCall
     /**
      * Throttled zoom function to avoid events happening too fast.
      * @param event - The original mouse wheel event
-     * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
+     * "Wheel" with a touchpad, the wheel is triggered event a lot,
      * especially a lot of very small values.
      * However, updating values in NVL instance takes time.
      * Sometimes it lost the track of multiple events happening too soon.
      * As a result, the zoom might lose its anchor point under touch pad.
      * Therefore, the throttle is needed to avoid events happening too fast.
-     * @note The throttle is set to 25ms.
+     * The throttle is set to 25ms.
      */
     private throttledZoom;
     private handleWheel;

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

@@ -2,21 +2,9 @@ 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.
+ * Interaction handler for zooming the canvas, which is achieved by scrolling the mouse wheel on the canvas.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const zoomInteraction = new ZoomInteraction(nvl)
- *
- * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
- *   console.log('Zoom level:', zoomLevel)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
  */
 export class ZoomInteraction extends BaseInteraction {
     /**
@@ -30,13 +18,13 @@ export class ZoomInteraction extends BaseInteraction {
     /**
      * Throttled zoom function to avoid events happening too fast.
      * @param event - The original mouse wheel event
-     * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
+     * "Wheel" with a touchpad, the wheel is triggered event a lot,
      * especially a lot of very small values.
      * However, updating values in NVL instance takes time.
      * Sometimes it lost the track of multiple events happening too soon.
      * As a result, the zoom might lose its anchor point under touch pad.
      * Therefore, the throttle is needed to avoid events happening too fast.
-     * @note The throttle is set to 25ms.
+     * The throttle is set to 25ms.
      */
     throttledZoom = throttle((event) => {
         const zoom = this.nvlInstance.getScale();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.3",
+  "version": "0.3.4-b33c5deb",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -26,14 +26,8 @@
     "postpack": "rm LICENSE.txt",
     "eslint": "eslint ./src/"
   },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "Interaction Handlers",
-    "tsconfig": "./tsconfig.json"
-  },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.3",
+    "@neo4j-nvl/base": "0.3.4-b33c5deb",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },
@@ -50,5 +44,6 @@
     "eslint": "*",
     "jest": "*",
     "typescript": "*"
-  }
+  },
+  "stableVersion": "0.3.4"
 }