@neo4j-nvl/interaction-handlers 0.3.8 → 0.3.9

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/base.d.ts

@@ -48,6 +48,12 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
      * @param name - The name of the event
      */
     removeCallback: (name: keyof T | string) => void;
+    /**
+     * Enables or disables global text selection during a drag or pan operation.
+     * @param enable - Whether to enable or disable global text selection
+     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled
+     */
+    toggleGlobalTextSelection: (enable: boolean, eventFunction?: ((this: HTMLElement, ev: MouseEvent) => void) | undefined) => void;
     /**
      * @internal
      */

package/lib/interaction-handlers/base.js

@@ -71,5 +71,24 @@ class BaseInteraction {
     removeCallback = (name) => {
         this.callbackMap.delete(name);
     };
+    /**
+     * Enables or disables global text selection during a drag or pan operation.
+     * @param enable - Whether to enable or disable global text selection
+     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled
+     */
+    toggleGlobalTextSelection = (enable, eventFunction) => {
+        if (enable) {
+            document.body.style.removeProperty('user-select');
+            if (eventFunction) {
+                document.body.removeEventListener('mouseup', eventFunction);
+            }
+        }
+        else {
+            document.body.style.setProperty('user-select', 'none', 'important');
+            if (eventFunction) {
+                document.body.addEventListener('mouseup', eventFunction);
+            }
+        }
+    };
 }
 export { BaseInteraction };

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,14 +20,10 @@ 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);
-        this.addEventListener('mouseleave', this.endBoxSelect, true);
     }
     handleMouseDown = (event) => {
         if (event.button !== 0) {
@@ -86,15 +82,16 @@ export class BoxSelectInteraction extends BaseInteraction {
             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);
+        this.toggleGlobalTextSelection(true, this.endBoxSelect);
     };
     /**
      * Removes all related event listeners and the overlay renderer for the box.
      */
     destroy() {
+        this.toggleGlobalTextSelection(true, this.endBoxSelect);
         this.removeEventListener('mousedown', this.handleMouseDown, true);
         this.removeEventListener('mousemove', this.handleDrag, true);
         this.removeEventListener('mouseup', this.endBoxSelect, true);
-        this.removeEventListener('mouseleave', this.endBoxSelect, true);
         this.overlayRenderer.destroy();
     }
     turnOnBoxSelect(event) {
@@ -106,6 +103,7 @@ export class BoxSelectInteraction extends BaseInteraction {
         }
         else {
             this.isBoxSelecting = true;
+            this.toggleGlobalTextSelection(false, this.endBoxSelect);
             this.callCallbackIfRegistered('onBoxStarted', event);
             if (this.currentOptions.selectOnRelease === true) {
                 this.nvlInstance.deselectAll();

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.d.ts

@@ -44,7 +44,8 @@ export declare class DragNodeInteraction extends BaseInteraction<DragNodeInterac
     constructor(nvl: NVL, options?: {});
     private handleMouseDown;
     private handleMouseMove;
-    private handleMouseUp;
+    private handleBodyMouseUp;
+    private resetState;
     /**
      * Removes all related event listeners from the container.
      */

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

@@ -9,26 +9,20 @@ 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.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);
-        this.addEventListener('mouseup', this.handleMouseUp);
     }
     handleMouseDown = (event) => {
         this.mousePosition = { x: event.clientX, y: event.clientY };
@@ -38,6 +32,7 @@ export class DragNodeInteraction extends BaseInteraction {
         if (hitNodeEdges.length > 0) {
             this.isDrawing = true;
             this.mouseDownNode = null;
+            this.addEventListener('mouseup', this.resetState, { once: true });
         }
         else if (hitNodes.length > 0) {
             this.mouseDownNode = hits.nvlTargets.nodes[0] ?? null;
@@ -62,6 +57,7 @@ export class DragNodeInteraction extends BaseInteraction {
             return;
         }
         if (!this.isDragging) {
+            this.toggleGlobalTextSelection(false, this.handleBodyMouseUp);
             if (this.moveSelectedNodes) {
                 this.callCallbackIfRegistered('onDragStart', this.selectedNodes, evt);
             }
@@ -89,15 +85,21 @@ export class DragNodeInteraction extends BaseInteraction {
             this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], evt);
         }
     };
-    handleMouseUp = (evt) => {
-        if (this.isDragging) {
+    handleBodyMouseUp = (evt) => {
+        this.toggleGlobalTextSelection(true, this.handleBodyMouseUp);
+        if (this.isDragging && this.mouseDownNode !== null) {
             if (this.moveSelectedNodes) {
                 this.callCallbackIfRegistered('onDragEnd', this.selectedNodes, evt);
             }
             else {
-                this.callCallbackIfRegistered('onDragEnd', [this.mouseDownNode?.data], evt);
+                this.callCallbackIfRegistered('onDragEnd', [this.mouseDownNode.data], evt);
             }
         }
+        if (this.isDragging) {
+            this.resetState();
+        }
+    };
+    resetState = () => {
         this.isDragging = false;
         this.mouseDownNode = null;
         this.isDrawing = false;
@@ -108,8 +110,8 @@ export class DragNodeInteraction extends BaseInteraction {
      * Removes all related event listeners from the container.
      */
     destroy = () => {
+        this.toggleGlobalTextSelection(true, this.handleBodyMouseUp);
         this.removeEventListener('mousedown', this.handleMouseDown);
         this.removeEventListener('mousemove', this.handleMouseMove);
-        this.removeEventListener('mouseup', this.handleMouseUp);
     };
 }

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.d.ts

@@ -30,7 +30,7 @@ export type HoverInteractionCallbacks = {
  * 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;
+    private currentHoveredElementId;
     private currentHoveredElementIsNode;
     private readonly updates;
     constructor(nvl: NVL, options?: HoverInteractionOptions);
@@ -39,8 +39,8 @@ export declare class HoverInteraction extends BaseInteraction<HoverInteractionCa
      * @param {MouseEvent} event - The mouse event
      */
     handleHover: (event: MouseEvent) => void;
+    private updateElementsInNVL;
     private clearUpdates;
-    private currentElementNeedsUnHover;
     private unHoverCurrentElement;
     destroy(): void;
 }

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 {
-    currentHoveredElement;
-    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);
     }
     /**
@@ -25,27 +24,39 @@ export class HoverInteraction extends BaseInteraction {
         const { nodes = [], relationships = [] } = nvlTargets;
         const mainTarget = nodes[0] ?? relationships[0];
         const hoveredElement = mainTarget?.data;
-        if (this.currentElementNeedsUnHover(hoveredElement?.id)) {
+        const newHoveredElementIsNode = hoveredElement !== undefined && nodes[0] !== undefined;
+        const nothingHasBeenHoveredOrUnHovered = this.currentHoveredElementId === undefined && hoveredElement === undefined;
+        const newHoveredElementIsTheSameAsCurrent = hoveredElement?.id !== undefined &&
+            this.currentHoveredElementId === hoveredElement.id &&
+            newHoveredElementIsNode === this.currentHoveredElementIsNode;
+        if (nothingHasBeenHoveredOrUnHovered || newHoveredElementIsTheSameAsCurrent) {
+            this.callCallbackIfRegistered('onHover', hoveredElement, nvlTargets, event);
+            return;
+        }
+        const currentElementNeedsUnHover = this.currentHoveredElementId !== undefined && this.currentHoveredElementId !== hoveredElement?.id;
+        if (currentElementNeedsUnHover) {
             this.unHoverCurrentElement();
         }
-        const currentHoveredElementIsNode = hoveredElement !== undefined && nodes[0] !== undefined;
-        if (currentHoveredElementIsNode) {
+        if (newHoveredElementIsNode) {
             this.updates.nodes.push({ id: hoveredElement.id, hovered: true });
-            this.currentHoveredElement = hoveredElement;
+            this.currentHoveredElementId = hoveredElement.id;
             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;
+        else if (hoveredElement !== undefined) {
+            const { id } = hoveredElement;
+            this.updates.relationships.push({ id, hovered: true });
+            this.currentHoveredElementId = hoveredElement.id;
             this.currentHoveredElementIsNode = false;
         }
         else {
-            this.currentHoveredElement = undefined;
+            this.currentHoveredElementId = undefined;
             this.currentHoveredElementIsNode = undefined;
         }
-        this.callCallbackIfRegistered('onHover', this.currentHoveredElement, nvlTargets, event);
+        this.callCallbackIfRegistered('onHover', hoveredElement, nvlTargets, event);
+        this.updateElementsInNVL();
+        this.clearUpdates();
+    };
+    updateElementsInNVL() {
         // Use pure update API to avoid the previous removed node to be re-added to the scene.
         if (this.currentOptions.drawShadowOnHover === true) {
             const currentNodes = this.nvlInstance.getNodes();
@@ -53,30 +64,24 @@ export class HoverInteraction extends BaseInteraction {
                 this.nvlInstance.updateElementsInGraph(this.updates.nodes, this.updates.relationships);
             }
         }
-        this.clearUpdates();
-    };
+    }
     clearUpdates() {
         this.updates.nodes = [];
         this.updates.relationships = [];
     }
-    currentElementNeedsUnHover(newHoveredElementId) {
-        return this.currentHoveredElement !== undefined && this.currentHoveredElement.id !== newHoveredElementId;
-    }
     unHoverCurrentElement() {
-        if (this.currentHoveredElement === undefined) {
+        if (this.currentHoveredElementId === undefined) {
             return;
         }
         const update = {
-            id: this.currentHoveredElement.id,
+            id: this.currentHoveredElementId,
             hovered: false
         };
         if (this.currentHoveredElementIsNode === true) {
             this.updates.nodes.push(update);
         }
         else {
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            const { from, to } = this.currentHoveredElement;
-            this.updates.relationships.push({ ...update, from, to });
+            this.updates.relationships.push({ ...update });
         }
     }
     destroy() {

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,12 +80,9 @@ 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);
-        this.addEventListener('mouseleave', this.endLasso, true);
     }
     startLasso = (event) => {
         const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
@@ -95,6 +92,7 @@ export class LassoInteraction extends BaseInteraction {
         else {
             this.active = true;
             this.points = [getCanvasPosition(this.containerInstance, event)];
+            this.toggleGlobalTextSelection(false, this.endLasso);
             this.callCallbackIfRegistered('onLassoStarted', event);
             if (this.currentOptions.selectOnRelease === true) {
                 this.nvlInstance.deselectAll();
@@ -155,6 +153,7 @@ export class LassoInteraction extends BaseInteraction {
             return;
         }
         this.active = false;
+        this.toggleGlobalTextSelection(true, this.endLasso);
         const pointArrays = this.points.map((p) => [p.x, p.y]);
         const hasCrossings = checkIntersection(pointArrays);
         const hull = (hasCrossings ? concaveman(pointArrays, 2) : pointArrays)
@@ -172,10 +171,10 @@ export class LassoInteraction extends BaseInteraction {
      * Removes all related event listeners and the overlay renderer for the box.
      */
     destroy() {
+        this.toggleGlobalTextSelection(true, this.endLasso);
         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.removeEventListener('mouseup', this.handleMouseUp, true);
         this.overlayRenderer.destroy();
     }
 }

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

@@ -33,6 +33,7 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallba
     private mousePosition;
     private targets;
     private shouldPan;
+    private isPanning;
     /**
      * Creates a new instance of the pan interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to

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

@@ -7,18 +7,16 @@ 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.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
     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);
@@ -61,6 +59,10 @@ export class PanInteraction extends BaseInteraction {
         if (!this.shouldPan || evt.buttons !== 1) {
             return;
         }
+        if (!this.isPanning) {
+            this.toggleGlobalTextSelection(false, this.handleMouseUp);
+            this.isPanning = true;
+        }
         const zoom = this.nvlInstance.getScale();
         const { x, y } = this.nvlInstance.getPan();
         const dx = ((evt.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
@@ -70,12 +72,17 @@ export class PanInteraction extends BaseInteraction {
         this.mousePosition = { x: evt.clientX, y: evt.clientY };
     };
     handleMouseUp = () => {
+        if (this.isPanning) {
+            this.toggleGlobalTextSelection(true, this.handleMouseUp);
+            this.isPanning = false;
+        }
         this.shouldPan = false;
     };
     /**
      * Removes the related event listeners from the canvas.
      */
     destroy() {
+        this.toggleGlobalTextSelection(true, this.handleMouseUp);
         this.removeEventListener('mousedown', this.handleMouseDown, true);
         this.removeEventListener('mousemove', this.handleMouseMove, true);
         this.removeEventListener('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",
+  "version": "0.3.9",
   "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",
+    "@neo4j-nvl/base": "0.3.9",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },