@neo4j-nvl/interaction-handlers 0.3.8-dfca089f → 0.3.8-e4acdb02

package/lib/__tests__/zoom-interaction.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,104 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { ZoomInteraction } from '../interaction-handlers/zoom-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('ZoomInteraction', () => {
+    let zoomInteraction;
+    let myNVL;
+    let myNvlContainer;
+    const zoomCallbackMock = jest.fn();
+    beforeEach(() => {
+        myNVL = new NVL(document.createElement('div'), [], [], { disableWebGL: true, initialZoom: 1, layout: 'free' });
+        myNvlContainer = myNVL.getContainer();
+        zoomInteraction = new ZoomInteraction(myNVL);
+    });
+    afterEach(() => {
+        zoomInteraction.destroy();
+        myNVL.destroy();
+        zoomCallbackMock.mockReset();
+    });
+    const simulateWheelEvent = async (container, deltaY, delay = 50, eventOptions = {}) => {
+        const wheelEvent = new WheelEvent('wheel', {
+            deltaY,
+            clientX: 150,
+            clientY: 150,
+            ...eventOptions
+        });
+        container.dispatchEvent(wheelEvent);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        return wheelEvent;
+    };
+    const simulateSequentialWheelEvents = async (container, events) => {
+        for (const event of events) {
+            // eslint-disable-next-line no-await-in-loop
+            await simulateWheelEvent(container, event.deltaY, event.delay);
+        }
+    };
+    test('zooming in should increase the scale', async () => {
+        zoomInteraction.updateCallback('onZoom', zoomCallbackMock);
+        const initialScale = myNVL.getScale();
+        const container = myNVL.getContainer();
+        await simulateWheelEvent(container, -100);
+        expect(zoomCallbackMock).toHaveBeenCalledTimes(1);
+        const newScale = myNVL.getScale();
+        expect(newScale).toBeGreaterThan(initialScale);
+        expect(newScale).toBe(1.2);
+    });
+    test('zooming out should decrease the scale', async () => {
+        zoomInteraction.updateCallback('onZoom', zoomCallbackMock);
+        const initialScale = myNVL.getScale();
+        await simulateWheelEvent(myNvlContainer, 100);
+        expect(zoomCallbackMock).toHaveBeenCalledTimes(1);
+        const newScale = myNVL.getScale();
+        expect(newScale).toBeLessThan(initialScale);
+        expect(newScale).toBe(0.8);
+    });
+    test('zoom callback should be called with the correct zoom level', async () => {
+        zoomInteraction.updateCallback('onZoom', zoomCallbackMock);
+        const wheelEvent = await simulateWheelEvent(myNvlContainer, -100);
+        expect(zoomCallbackMock).toHaveBeenCalledTimes(1);
+        const zoomCallbackMockArguments = zoomCallbackMock.mock.calls[0] ?? [];
+        expect(zoomCallbackMockArguments[0]).toBe(1.2);
+        expect(zoomCallbackMockArguments[1]).toBe(wheelEvent);
+    });
+    test('zooming should adjust pan to mouse position', async () => {
+        const initialPan = myNVL.getPan();
+        const initialScale = myNVL.getScale();
+        await simulateWheelEvent(myNvlContainer, -100);
+        const newPan = myNVL.getPan();
+        const newScale = myNVL.getScale();
+        expect(newPan).not.toEqual(initialPan);
+        expect(newPan.x).toBe(25);
+        expect(newPan.y).toBe(25);
+        expect(newScale).toBeGreaterThan(initialScale);
+        expect(newScale).toBe(1.2);
+    });
+    test('zooming should be progressively faster at higher zoom levels', async () => {
+        const sequentialWheelEvents = Array(8).fill({ deltaY: -100 });
+        await simulateSequentialWheelEvents(myNvlContainer, sequentialWheelEvents);
+        const newScale = myNVL.getScale();
+        expect(newScale).toBeGreaterThan(3.0);
+        expect(newScale).toBeCloseTo(4.299);
+    });
+    test('handles touchpad-like small incremental scrolling', async () => {
+        const initialScale = myNVL.getScale();
+        const touchpadEvents = Array(25).fill({ deltaY: -20, delay: 25 });
+        await simulateSequentialWheelEvents(myNvlContainer, touchpadEvents);
+        const newScale = myNVL.getScale();
+        expect(newScale).toBeGreaterThan(initialScale);
+        expect(newScale).toBeGreaterThan(2.5);
+        expect(newScale).toBeLessThan(2.7);
+    });
+    test('should not zoom when ctrl key is pressed', async () => {
+        const initialScale = myNVL.getScale();
+        await simulateWheelEvent(myNvlContainer, -100, 50, { ctrlKey: true });
+        expect(zoomCallbackMock).toHaveBeenCalledTimes(0);
+        expect(myNVL.getScale()).toBe(initialScale);
+    });
+    test('should not zoom when meta key is pressed', async () => {
+        const initialScale = myNVL.getScale();
+        await simulateWheelEvent(myNvlContainer, -100, 50, { metaKey: true });
+        expect(zoomCallbackMock).toHaveBeenCalledTimes(0);
+        expect(myNVL.getScale()).toBe(initialScale);
+    });
+});

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

@@ -9,10 +9,10 @@ import { getCanvasPosition, getWorldPosition } from './utils';
  * 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;
-    startWorldPosition;
+    mousePosition = { x: 0, y: 0 };
+    startWorldPosition = { x: 0, y: 0 };
     overlayRenderer;
-    isBoxSelecting;
+    isBoxSelecting = false;
     /**
      * Creates a new instance of the multi-select interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -20,10 +20,7 @@ export class BoxSelectInteraction extends BaseInteraction {
      */
     constructor(nvl, options = { selectOnRelease: false }) {
         super(nvl, options);
-        this.mousePosition = { x: 0, y: 0 };
-        this.startWorldPosition = { x: 0, y: 0 };
         this.overlayRenderer = new OverlayRenderer(this.containerInstance);
-        this.isBoxSelecting = false;
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mousemove', this.handleDrag, true);
         this.addEventListener('mouseup', this.endBoxSelect, true);

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

@@ -7,8 +7,8 @@ import { isDraggingMovement } from './utils';
  * 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;
-    mousePosition;
+    moved = false;
+    mousePosition = { x: 0, y: 0 };
     /**
      * Creates a new click interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -16,7 +16,6 @@ export class ClickInteraction extends BaseInteraction {
      */
     constructor(nvl, options = { selectOnClick: false }) {
         super(nvl, options);
-        this.mousePosition = { x: 0, y: 0 };
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('click', this.handleClick, true);
         this.addEventListener('dblclick', this.handleDoubleClick, true);

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

@@ -9,24 +9,18 @@ import { isDraggingMovement } from './utils';
  * 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;
-    mouseDownNode;
-    isDragging;
-    isDrawing;
-    selectedNodes;
-    moveSelectedNodes;
+    mousePosition = { x: 0, y: 0 };
+    mouseDownNode = null;
+    isDragging = false;
+    isDrawing = false;
+    selectedNodes = [];
+    moveSelectedNodes = false;
     /**
      * Creates a new instance of the drag node interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
     constructor(nvl, options = {}) {
         super(nvl, options);
-        this.mouseDownNode = null;
-        this.mousePosition = { x: 0, y: 0 };
-        this.isDragging = false;
-        this.isDrawing = false;
-        this.selectedNodes = [];
-        this.moveSelectedNodes = false;
         this.addEventListener('mousedown', this.handleMouseDown);
         this.addEventListener('mousemove', this.handleMouseMove);
     }

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

@@ -16,22 +16,19 @@ const DefaultGhostGraphStyling = {
  * @internal
  */
 export class DrawInteraction extends BaseInteraction {
-    isMoved;
-    isDrawing;
-    isDraggingNode;
-    mouseDownNode;
-    newTempTargetNode;
-    newTempRegularRelationshipToNewTempTargetNode;
-    newTempRegularRelationshipToExistingNode;
-    newTempSelfReferredRelationship;
-    newTargetNodeToAdd;
-    newRelationshipToAdd;
-    mouseOutsideOfNvlArea;
+    isMoved = false;
+    isDrawing = false;
+    isDraggingNode = false;
+    mouseDownNode = undefined;
+    newTempTargetNode = null;
+    newTempRegularRelationshipToNewTempTargetNode = null;
+    newTempRegularRelationshipToExistingNode = null;
+    newTempSelfReferredRelationship = null;
+    newTargetNodeToAdd = null;
+    newRelationshipToAdd = null;
+    mouseOutsideOfNvlArea = false;
     constructor(nvl, options = {}) {
         super(nvl, options);
-        this.isMoved = false;
-        this.isDrawing = false;
-        this.isDraggingNode = false;
         this.nvlInstance.setLayout('free');
         this.addEventListener('mousemove', this.handleMouseMove, true);
         this.addEventListener('mousedown', this.handleMouseDown, true);

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

@@ -5,15 +5,14 @@ import { BaseInteraction } from './base';
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_hoverinteraction Hover Interaction documentation page}.
  */
 export class HoverInteraction extends BaseInteraction {
-    currentHoveredElementId;
-    currentHoveredElementIsNode;
-    updates;
+    currentHoveredElementId = undefined;
+    currentHoveredElementIsNode = undefined;
+    updates = {
+        nodes: [],
+        relationships: []
+    };
     constructor(nvl, options = { drawShadowOnHover: false }) {
         super(nvl, options);
-        this.updates = {
-            nodes: [],
-            relationships: []
-        };
         this.addEventListener('mousemove', this.handleHover, true);
     }
     /**

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

@@ -69,8 +69,8 @@ export const checkPointInside = (x, y, vs) => {
  * 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;
-    points;
+    active = false;
+    points = [];
     overlayRenderer;
     /**
      * Creates a new instance of the lasso interaction handler.
@@ -80,8 +80,6 @@ export class LassoInteraction extends BaseInteraction {
     constructor(nvl, options = { selectOnRelease: false }) {
         super(nvl, options);
         this.overlayRenderer = new OverlayRenderer(this.containerInstance);
-        this.active = false;
-        this.points = [];
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mousemove', this.handleDrag, true);
         this.addEventListener('mouseup', this.handleMouseUp, true);

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

@@ -7,9 +7,9 @@ import { BaseInteraction } from './base';
  * 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;
-    targets;
-    shouldPan;
+    mousePosition = { x: 0, y: 0 };
+    targets = [];
+    shouldPan = false;
     isPanning = false;
     /**
      * Creates a new instance of the pan interaction handler.
@@ -17,9 +17,6 @@ export class PanInteraction extends BaseInteraction {
      */
     constructor(nvl, options = { excludeNodeMargin: false }) {
         super(nvl, options);
-        this.mousePosition = { x: 0, y: 0 };
-        this.targets = [];
-        this.shouldPan = false;
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mousemove', this.handleMouseMove, true);
         this.addEventListener('mouseup', this.handleMouseUp, true);

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

@@ -34,6 +34,11 @@ export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCall
      * The throttle is set to 25ms.
      */
     private throttledZoom;
+    /**
+     * The function to be called on mouse wheel event on the canvas.
+     * @param evt - The mouse wheel event
+     * @note If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
+     */
     private handleWheel;
     /**
      * Removes the relevant event listeners from the canvas.

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

@@ -29,7 +29,8 @@ export class ZoomInteraction extends BaseInteraction {
     throttledZoom = throttle((event) => {
         const zoom = this.nvlInstance.getScale();
         const { x, y } = this.nvlInstance.getPan();
-        const factor = event.deltaY / 500;
+        const baseSpeed = event.deltaY / 500;
+        const factor = zoom >= 1 ? baseSpeed * Math.pow(zoom, 1) : baseSpeed;
         const newZoomTarget = zoom - factor * Math.min(1, zoom);
         const offs = getCanvasCenterOffset(this.containerInstance, event);
         const newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
@@ -37,7 +38,15 @@ export class ZoomInteraction extends BaseInteraction {
         this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
         this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
     }, 25, { leading: true });
+    /**
+     * The function to be called on mouse wheel event on the canvas.
+     * @param evt - The mouse wheel event
+     * @note If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
+     */
     handleWheel = (evt) => {
+        if (evt.ctrlKey || evt.metaKey) {
+            return;
+        }
         evt.preventDefault();
         this.throttledZoom(evt);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.8-dfca089f",
+  "version": "0.3.8-e4acdb02",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -27,7 +27,7 @@
     "eslint": "yarn global:eslint ./src/"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.8-dfca089f",
+    "@neo4j-nvl/base": "0.3.8-e4acdb02",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },