@neo4j-nvl/interaction-handlers 0.2.51 → 0.2.52

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

@@ -4,8 +4,9 @@ import type { NVL } from '@neo4j-nvl/core';
  * @abstract
  * @internal
  */
-declare abstract class BaseInteraction<T extends Record<string, ((...args: unknown[]) => void) | boolean>> {
+declare abstract class BaseInteraction<T extends Record<string, ((...args: unknown[]) => void) | boolean>, P extends Record<string, unknown>> {
     private readonly nvl;
+    private readonly options;
     private readonly container;
     /**
      * @internal
@@ -14,11 +15,12 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
     /**
      * @internal
      */
-    constructor(nvl: NVL);
+    constructor(nvl: NVL, options: P);
     /**
      * @internal
      */
     get nvlInstance(): NVL;
+    get currentOptions(): P;
     /**
      * @internal
      */
@@ -34,7 +36,7 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
     /**
      * @internal
      */
-    callCallbackIfRegistered: (name: keyof T | string, ...args: unknown[]) => void;
+    callCallbackIfRegistered: (name: keyof T, ...args: unknown[]) => void;
     /**
      * Add or update a callback for a given event of type.
      * @param name - The name of the event

package/lib/interaction-handlers/base.js

@@ -7,13 +7,19 @@ class BaseInteraction {
     /**
      * @internal
      */
-    constructor(nvl) {
+    constructor(nvl, options) {
         Object.defineProperty(this, "nvl", {
             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, "container", {
             enumerable: true,
             configurable: true,
@@ -91,6 +97,7 @@ class BaseInteraction {
             }
         });
         this.nvl = nvl;
+        this.options = options;
         this.container = this.nvl.getContainer();
         this.callbackMap = new Map();
     }
@@ -100,6 +107,9 @@ class BaseInteraction {
     get nvlInstance() {
         return this.nvl;
     }
+    get currentOptions() {
+        return this.options;
+    }
     /**
      * @internal
      */

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

@@ -15,7 +15,7 @@ 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;
+    onBoxStarted?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called after once the user releases the mouse after multi-selecting.
      * @param selectionObject - The selected nodes and relationships
@@ -40,12 +40,11 @@ export type BoxSelectInteractionCallbacks = {
  *  console.log('Selected elements:', nodes, rels)
  * })
  */
-export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks> {
+export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks, BoxSelectInteractionOptions> {
     private mousePosition;
     private startWorldPosition;
     private overlayRenderer;
     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

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

@@ -23,7 +23,7 @@ export class BoxSelectInteraction extends BaseInteraction {
      * @param options - Options for the multi-select interaction handler to customize its behavior
      */
     constructor(nvl, options = { selectOnRelease: false }) {
-        super(nvl);
+        super(nvl, options);
         Object.defineProperty(this, "mousePosition", {
             enumerable: true,
             configurable: true,
@@ -48,12 +48,6 @@ export class BoxSelectInteraction extends BaseInteraction {
             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,
@@ -129,7 +123,7 @@ export class BoxSelectInteraction extends BaseInteraction {
                 const endPosition = getCanvasPosition(this.containerInstance, event);
                 const endWorldPosition = getWorldPosition(this.nvlInstance, endPosition);
                 const { nodes, rels } = this.getHitsInBox(this.startWorldPosition, endWorldPosition);
-                if (this.options.selectOnRelease) {
+                if (this.currentOptions.selectOnRelease) {
                     this.nvlInstance.updateElementsInGraph(nodes.map((node) => ({ id: node.id, selected: true })), rels.map((rel) => ({ id: rel.id, selected: true })));
                 }
                 this.callCallbackIfRegistered('onBoxSelect', { nodes, rels }, event);
@@ -139,7 +133,6 @@ export class BoxSelectInteraction extends BaseInteraction {
         this.startWorldPosition = { x: 0, y: 0 };
         this.overlayRenderer = new OverlayRenderer(this.containerInstance);
         this.isBoxSelecting = false;
-        this.options = options;
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mousemove', this.handleDrag, true);
         this.addEventListener('mouseup', this.endBoxSelect, true);
@@ -164,7 +157,7 @@ export class BoxSelectInteraction extends BaseInteraction {
         }
         else {
             this.isBoxSelecting = true;
-            if (this.options.selectOnRelease) {
+            if (this.currentOptions.selectOnRelease) {
                 this.nvlInstance.deselectAll();
             }
         }

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

@@ -88,9 +88,8 @@ export type ClickInteractionCallbacks = {
  * })
  * ```
  */
-export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks> {
+export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks, ClickInteractionOptions> {
     private moved;
-    private readonly options;
     private mousePosition;
     /**
      * Creates a new click interaction handler.

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

@@ -23,19 +23,13 @@ export class ClickInteraction extends BaseInteraction {
      * @param options - Options for the click interaction handler
      */
     constructor(nvl, options = { selectOnClick: false }) {
-        super(nvl);
+        super(nvl, options);
         Object.defineProperty(this, "moved", {
             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, "mousePosition", {
             enumerable: true,
             configurable: true,
@@ -100,7 +94,7 @@ export class ClickInteraction extends BaseInteraction {
                 const { nvlTargets } = this.nvlInstance.getHits(event);
                 const { nodes = [], relationships = [] } = nvlTargets;
                 if (nodes.length === 0 && relationships.length === 0) {
-                    if (this.options.selectOnClick) {
+                    if (this.currentOptions.selectOnClick) {
                         this.nvlInstance.deselectAll();
                     }
                     this.callCallbackIfRegistered('onCanvasClick', event);
@@ -108,7 +102,7 @@ export class ClickInteraction extends BaseInteraction {
                 }
                 if (nodes.length > 0) {
                     const hitNodeData = nodes.map((node) => node.data);
-                    if (this.options.selectOnClick) {
+                    if (this.currentOptions.selectOnClick) {
                         const selectedNodes = this.nvlInstance.getSelectedNodes();
                         const selectedRelationships = this.nvlInstance.getSelectedRelationships();
                         const nodeUpdates = [
@@ -122,7 +116,7 @@ export class ClickInteraction extends BaseInteraction {
                 }
                 else if (relationships.length > 0) {
                     const hitRelationshipData = relationships.map((relationship) => relationship.data);
-                    if (this.options.selectOnClick) {
+                    if (this.currentOptions.selectOnClick) {
                         const selectedNodes = this.nvlInstance.getSelectedNodes();
                         const selectedRelationships = this.nvlInstance.getSelectedRelationships();
                         const nodeUpdates = selectedNodes.map((node) => ({ id: node.id, selected: false }));
@@ -150,7 +144,6 @@ export class ClickInteraction extends BaseInteraction {
                 this.removeEventListener('contextmenu', this.handleRightClick, true);
             }
         });
-        this.options = options;
         this.mousePosition = { x: 0, y: 0 };
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('click', this.handleClick, true);

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

@@ -15,13 +15,13 @@ export type DragNodeInteractionCallbacks = {
      * @param nodes - The node(s) being dragged
      * @param event - The original mouse event
      */
-    onDragStart?: (nodes: Node[], evt: MouseEvent) => void;
+    onDragStart?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
     /**
      * Called once when node(s) are finished being dragged
      * @param nodes - The node(s) being dragged
      * @param event - The original mouse event
      */
-    onDragEnd?: (nodes: Node[], evt: MouseEvent) => void;
+    onDragEnd?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
 };
 /**
  * Interaction handler for dragging nodes.
@@ -38,7 +38,7 @@ export type DragNodeInteractionCallbacks = {
  * })
  * ```
  */
-export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks> {
+export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks, Record<string, never>> {
     private mousePosition;
     private mouseDownNode;
     private isDragging;
@@ -49,7 +49,7 @@ export declare class DragNodeInteraction extends BaseInteraction<DragNodeInterac
      * Creates a new instance of the drag node interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
-    constructor(nvl: NVL);
+    constructor(nvl: NVL, options?: {});
     private handleMouseDown;
     private handleMouseMove;
     private handleMouseUp;

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

@@ -21,8 +21,8 @@ export class DragNodeInteraction extends BaseInteraction {
      * Creates a new instance of the drag node interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
-    constructor(nvl) {
-        super(nvl);
+    constructor(nvl, options = {}) {
+        super(nvl, options);
         Object.defineProperty(this, "mousePosition", {
             enumerable: true,
             configurable: true,

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

@@ -5,14 +5,14 @@ import { BaseInteraction } from './base';
  * @experimental
  */
 export type DrawInteractionCallbacks = {
+    onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
     onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
 };
 /**
  * @internal
  * @experimental
  */
-export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks> {
-    private overlayRenderer;
+export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks, Record<string, never>> {
     private isMoved;
     private isDrawing;
     private isDraggingNode;
@@ -23,9 +23,8 @@ export declare class DrawInteraction extends BaseInteraction<DrawInteractionCall
     private newTempSelfReferredRelationship;
     private newTargetNodeToAdd;
     private newRelationshipToAdd;
-    constructor(nvl: NVL);
+    constructor(nvl: NVL, options?: {});
     private handleMouseMove;
-    private handleWheel;
     private setNewRegularRelationship;
     private setNewRegularRelationshipToNewTempTargetNode;
     private setNewRegularRelationshipToExistingNode;

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

@@ -1,5 +1,5 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { NODE_EDGE_WIDTH } from '../constants';
-import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
 import { BaseInteraction } from './base';
 import { generateUniqueId, getCanvasPosition, getWorldPosition } from './utils';
 /**
@@ -7,14 +7,8 @@ import { generateUniqueId, getCanvasPosition, getWorldPosition } from './utils';
  * @experimental
  */
 export class DrawInteraction extends BaseInteraction {
-    constructor(nvl) {
-        super(nvl);
-        Object.defineProperty(this, "overlayRenderer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
+    constructor(nvl, options = {}) {
+        super(nvl, options);
         Object.defineProperty(this, "isMoved", {
             enumerable: true,
             configurable: true,
@@ -83,11 +77,10 @@ export class DrawInteraction extends BaseInteraction {
                 var _a, _b, _c, _d, _e, _f;
                 this.isMoved = true;
                 if (this.isDrawing) {
-                    this.overlayRenderer.clear();
                     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 [hitNode] = hits.nvlTargets.nodes.filter((n) => n.data.id !== this.newTempTargetNode.id);
                     const targetNode = hitNode
                         ? {
                             id: hitNode.data.id,
@@ -96,7 +89,9 @@ export class DrawInteraction extends BaseInteraction {
                             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.
+                    // 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 };
@@ -155,30 +150,21 @@ export class DrawInteraction extends BaseInteraction {
                     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);
+                        const [node] = hitNodeEdges;
+                        this.callCallbackIfRegistered('onHoverNodeMargin', node.data);
                     }
                     else {
-                        this.overlayRenderer.clear();
+                        this.callCallbackIfRegistered('onHoverNodeMargin', null);
                     }
                 }
             }
         });
-        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.callCallbackIfRegistered('onHoverNodeMargin', null);
                 this.isMoved = false;
                 this.newRelationshipToAdd = null;
                 this.newTargetNodeToAdd = null;
@@ -226,8 +212,10 @@ export class DrawInteraction extends BaseInteraction {
                 ]);
                 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
+                    if (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, event);
                 }
@@ -238,7 +226,6 @@ export class DrawInteraction extends BaseInteraction {
                 this.isMoved = false;
                 this.isDrawing = false;
                 this.isDraggingNode = false;
-                this.overlayRenderer.clear();
             }
         });
         Object.defineProperty(this, "destroy", {
@@ -247,25 +234,21 @@ export class DrawInteraction extends BaseInteraction {
             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 null;
         }
         return {
             id: generateUniqueId(13),

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

@@ -39,11 +39,10 @@ export type HoverInteractionCallbacks = {
  * })
  * ```
  */
-export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks> {
+export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks, HoverInteractionOptions> {
     private currentHoveredElement;
     private currentHoveredElementIsNode;
     private readonly updates;
-    private readonly options;
     constructor(nvl: NVL, options?: HoverInteractionOptions);
     /**
      * Handle mouse hover events

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

@@ -16,7 +16,7 @@ import { BaseInteraction } from './base';
  */
 export class HoverInteraction extends BaseInteraction {
     constructor(nvl, options = { drawShadowOnHover: false }) {
-        super(nvl);
+        super(nvl, options);
         Object.defineProperty(this, "currentHoveredElement", {
             enumerable: true,
             configurable: true,
@@ -35,12 +35,6 @@ export class HoverInteraction extends BaseInteraction {
             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
@@ -64,6 +58,7 @@ export class HoverInteraction extends BaseInteraction {
                     this.currentHoveredElementIsNode = true;
                 }
                 else if (mainTarget !== undefined) {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     const { id, from, to } = hoveredElement;
                     this.updates.relationships.push({ id, from, to, hovered: true });
                     this.currentHoveredElement = hoveredElement;
@@ -75,7 +70,7 @@ export class HoverInteraction extends BaseInteraction {
                 }
                 this.callCallbackIfRegistered('onHover', this.currentHoveredElement, nvlTargets, event);
                 // Use pure update API to avoid the previous removed node to be re-added to the scene.
-                if (this.options.drawShadowOnHover) {
+                if (this.currentOptions.drawShadowOnHover) {
                     const currentNodes = this.nvlInstance.getNodes();
                     if (currentNodes.length > 0) {
                         this.nvlInstance.updateElementsInGraph(this.updates.nodes, this.updates.relationships);
@@ -88,7 +83,6 @@ export class HoverInteraction extends BaseInteraction {
             nodes: [],
             relationships: []
         };
-        this.options = options;
         this.addEventListener('mousemove', this.handleHover, true);
     }
     clearUpdates() {
@@ -107,6 +101,7 @@ export class HoverInteraction extends BaseInteraction {
             this.updates.nodes.push(update);
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             const { from, to } = this.currentHoveredElement;
             this.updates.relationships.push(Object.assign(Object.assign({}, update), { from, to }));
         }

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

@@ -15,7 +15,7 @@ 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;
+    onLassoStarted?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called once when the user releases the mouse after lasso selecting.
      * @param selectionObject - The selected node and relationship ids
@@ -40,11 +40,10 @@ export type LassoInteractionCallbacks = {
  *  console.log('Selected elements:', nodes, rels)
  * })
  */
-export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks> {
+export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks, LassoInteractionOptions> {
     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

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

@@ -25,7 +25,7 @@ export class LassoInteraction extends BaseInteraction {
      * @param options - Options for the lasso interaction handler to customize its behavior
      */
     constructor(nvl, options = { selectOnRelease: false }) {
-        super(nvl);
+        super(nvl, options);
         Object.defineProperty(this, "active", {
             enumerable: true,
             configurable: true,
@@ -44,12 +44,6 @@ export class LassoInteraction extends BaseInteraction {
             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,
@@ -154,7 +148,7 @@ export class LassoInteraction extends BaseInteraction {
                 this.overlayRenderer.drawLasso(hull, false, true);
                 setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
                 const hitItems = this.getLassoItems(hull);
-                if (this.options.selectOnRelease) {
+                if (this.currentOptions.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);
@@ -162,7 +156,6 @@ export class LassoInteraction extends BaseInteraction {
         });
         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);

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

@@ -37,10 +37,9 @@ export type PanInteractionCallbacks = {
  *   console.log('Panning:', panning)
  * })
  */
-export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks> {
+export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks, PanInteractionOptions> {
     private mousePosition;
     private targets;
-    private readonly options;
     private shouldPan;
     /**
      * Creates a new instance of the pan interaction handler.

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

@@ -20,7 +20,7 @@ export class PanInteraction extends BaseInteraction {
      * @param nvl - The NVL instance to attach the interaction handler to
      */
     constructor(nvl, options = { excludeNodeMargin: false }) {
-        super(nvl);
+        super(nvl, options);
         Object.defineProperty(this, "mousePosition", {
             enumerable: true,
             configurable: true,
@@ -33,12 +33,6 @@ export class PanInteraction extends BaseInteraction {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "options", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "shouldPan", {
             enumerable: true,
             configurable: true,
@@ -63,7 +57,7 @@ export class PanInteraction extends BaseInteraction {
             writable: true,
             value: (targets, excludeNodeMargin) => {
                 this.targets = targets;
-                this.options.excludeNodeMargin = excludeNodeMargin;
+                this.currentOptions.excludeNodeMargin = excludeNodeMargin;
             }
         });
         Object.defineProperty(this, "handleMouseDown", {
@@ -72,7 +66,7 @@ export class PanInteraction extends BaseInteraction {
             writable: true,
             value: (event) => {
                 const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), {
-                    hitNodeMarginWidth: this.options.excludeNodeMargin ? NODE_EDGE_WIDTH : 0
+                    hitNodeMarginWidth: this.currentOptions.excludeNodeMargin ? NODE_EDGE_WIDTH : 0
                 });
                 if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) {
                     this.shouldPan = false;
@@ -110,7 +104,6 @@ export class PanInteraction extends BaseInteraction {
         });
         this.mousePosition = { x: 0, y: 0 };
         this.targets = [];
-        this.options = options;
         this.shouldPan = false;
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mousemove', this.handleMouseMove, true);

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

@@ -25,12 +25,12 @@ export type ZoomInteractionCallbacks = {
  * })
  * ```
  */
-export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks> {
+export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks, Record<string, never>> {
     /**
      * Creates a new instance of the zoom interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
-    constructor(nvl: NVL);
+    constructor(nvl: NVL, options?: {});
     /**
      * Throttled zoom function to avoid events happening too fast.
      * @param event - The original mouse wheel event

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

@@ -20,8 +20,8 @@ export class ZoomInteraction extends BaseInteraction {
      * Creates a new instance of the zoom interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
-    constructor(nvl) {
-        super(nvl);
+    constructor(nvl, options = {}) {
+        super(nvl, options);
         /**
          * Throttled zoom function to avoid events happening too fast.
          * @param event - The original mouse wheel event

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

@@ -4,13 +4,11 @@ export declare class OverlayRenderer {
     private removeResizeListener;
     constructor(canvasParent: HTMLElement);
     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

@@ -1,4 +1,3 @@
-import { drawCircleBand } from '@neo4j-nvl/core';
 import onResize from 'resizelistener';
 const marquee = {
     frameWidth: 2,
@@ -35,8 +34,6 @@ export class OverlayRenderer {
         canvas.style.right = '0';
         // These are needed for touchpad zoom on Edge
         canvas.style.touchAction = 'none';
-        // @ts-expect-error revisit later
-        canvas.style.msTouchAction = 'none';
         canvasParent.appendChild(canvas);
         const context = canvas.getContext('2d');
         this.ctx = context;
@@ -57,16 +54,6 @@ export class OverlayRenderer {
         canvas.style.width = `${width}px`;
         canvas.style.height = `${height}px`;
     }
-    // Can be extracted as a util
-    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) {
@@ -116,17 +103,6 @@ export class OverlayRenderer {
         }
         ctx.restore();
     }
-    drawNodeRing(x, y, radius, zoom, panX, panY) {
-        const { ctx } = this;
-        this.clear();
-        ctx.save();
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        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(ctx, x, y, (radius !== null && radius !== void 0 ? radius : 25) * devicePixelRatio, [{ width, color: 'blue' }]);
-        ctx.restore();
-    }
     clear() {
         const { ctx, canvas } = this;
         if (ctx === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.2.51",
+  "version": "0.2.52",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",