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

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

@@ -17,11 +17,12 @@ describe('ZoomInteraction', () => {
         myNVL.destroy();
         zoomCallbackMock.mockReset();
     });
-    const simulateWheelEvent = async (container, deltaY, delay = 50) => {
+    const simulateWheelEvent = async (container, deltaY, delay = 50, eventOptions = {}) => {
         const wheelEvent = new WheelEvent('wheel', {
             deltaY,
             clientX: 150,
-            clientY: 150
+            clientY: 150,
+            ...eventOptions
         });
         container.dispatchEvent(wheelEvent);
         await new Promise((resolve) => setTimeout(resolve, delay));
@@ -88,4 +89,16 @@ describe('ZoomInteraction', () => {
         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

@@ -38,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-dd6ab0e2",
+  "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-dd6ab0e2",
+    "@neo4j-nvl/base": "0.3.8-e4acdb02",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },