@neo4j-nvl/interaction-handlers 1.0.0 → 1.1.0-151c52c8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to NVL will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.1.0] - 2026-02-16
+
+This 1.1.0 release introduces new rendering capabilities with the addition of a new SVG export method, alongside a new Circular Layout algorithm and touchpad gestures for zooming. It also includes performance improvements for the renderer and physics engine, as well as various fixes for the React wrappers and Minimap.
+
+### Added
+
+- new SVG export functionality.
+- new circular layout option.
+- two-finger pinch gesture to zoom with touchpads.
+- onCanvasDoubleClick callback to the interactive NVL React wrapper.
+
+### Changed
+
+- improved minimap handling for React components.
+- rendering performance improvements.
+- physics layout performance and gravity improvements.
+
+### Fixed
+
+- seed radius calculation in D3 layout for large graphs.
+- forceDirected layout unnecessarily reheating on switch without changes.
+- ensure drag operations are always correctly ended on mouse up.
+- minimap positioning issues.
+- background color for the 'os' theme in api documentation.
+
 ## [1.0.0] - 2025-09-30
 This 1.0.0 release is our first major release, with NVL's release strategy fully adopting semantic versioning going forward. Updates in this release include React 19 support for the React wrappers, a UI overhaul of the [examples app](https://neo4j.com/docs/api/nvl/current/examples.html).
 

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

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

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

@@ -0,0 +1,322 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { KeyboardInteraction } from '../interaction-handlers/keyboard-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('KeyboardInteraction', () => {
+    let keyboardInteraction;
+    let myNVL;
+    const callbackMock = jest.fn();
+    beforeEach(() => {
+        myNVL = new NVL(document.createElement('div'), [
+            { id: '0', x: 100, y: 100 },
+            { id: '1', x: 200, y: 200 }
+        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free', renderer: 'webgl' });
+        keyboardInteraction = new KeyboardInteraction(myNVL);
+    });
+    afterEach(() => {
+        keyboardInteraction.destroy();
+        myNVL.destroy();
+        callbackMock.mockReset();
+    });
+    test('sets tabindex on the container if not already present', () => {
+        expect(myNVL.getContainer().getAttribute('tabindex')).toBe('0');
+    });
+    test('does not override existing tabindex', () => {
+        keyboardInteraction.destroy();
+        const container = myNVL.getContainer();
+        container.setAttribute('tabindex', '-1');
+        keyboardInteraction = new KeyboardInteraction(myNVL);
+        expect(container.getAttribute('tabindex')).toBe('-1');
+    });
+    test('removes tabindex on destroy only if it was added by the interaction', () => {
+        keyboardInteraction.destroy();
+        expect(myNVL.getContainer().getAttribute('tabindex')).toBeNull();
+    });
+    test('does not remove tabindex on destroy if it was pre-existing', () => {
+        keyboardInteraction.destroy();
+        const container = myNVL.getContainer();
+        container.setAttribute('tabindex', '-1');
+        const interaction = new KeyboardInteraction(myNVL);
+        interaction.destroy();
+        expect(container.getAttribute('tabindex')).toBe('-1');
+    });
+    test('keydown event triggers onKeyDown callback', () => {
+        keyboardInteraction.updateCallback('onKeyDown', callbackMock);
+        const event = new KeyboardEvent('keydown', { key: 'a' });
+        myNVL.getContainer().dispatchEvent(event);
+        expect(callbackMock).toHaveBeenCalledWith(event, undefined);
+        expect(callbackMock).toHaveBeenCalledTimes(1);
+    });
+    test('keyup event triggers onKeyUp callback', () => {
+        keyboardInteraction.updateCallback('onKeyUp', callbackMock);
+        const event = new KeyboardEvent('keyup', { key: 'a' });
+        myNVL.getContainer().dispatchEvent(event);
+        expect(callbackMock).toHaveBeenCalledWith(event, undefined);
+        expect(callbackMock).toHaveBeenCalledTimes(1);
+    });
+    test('focusin event triggers onCanvasFocus callback', () => {
+        keyboardInteraction.updateCallback('onCanvasFocus', callbackMock);
+        const event = new FocusEvent('focusin');
+        myNVL.getContainer().dispatchEvent(event);
+        expect(callbackMock).toHaveBeenCalledWith(event);
+        expect(callbackMock).toHaveBeenCalledTimes(1);
+    });
+    test('focusout event triggers onCanvasBlur callback', () => {
+        keyboardInteraction.updateCallback('onCanvasBlur', callbackMock);
+        const event = new FocusEvent('focusout');
+        myNVL.getContainer().dispatchEvent(event);
+        expect(callbackMock).toHaveBeenCalledWith(event);
+        expect(callbackMock).toHaveBeenCalledTimes(1);
+    });
+    describe('automatic navigation via key mappings', () => {
+        test('Enter key enters the graph and focuses the first element', () => {
+            keyboardInteraction.updateCallback('onNodeFocus', callbackMock);
+            const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+            myNVL.getContainer().dispatchEvent(event);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            expect(callbackMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), event);
+        });
+        test('Enter key does nothing when an element is already focused', () => {
+            const nodeFocusMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', nodeFocusMock);
+            const container = myNVL.getContainer();
+            // Enter the graph first
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(nodeFocusMock).toHaveBeenCalledTimes(1);
+            // Press Enter again — should not navigate
+            nodeFocusMock.mockClear();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(nodeFocusMock).not.toHaveBeenCalled();
+        });
+        test('Tab does nothing when the graph has not been entered', () => {
+            keyboardInteraction.updateCallback('onNodeFocus', callbackMock);
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(callbackMock).not.toHaveBeenCalled();
+        });
+        test('Tab key navigates focus forward after entering the graph', () => {
+            const nodeFocusMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', nodeFocusMock);
+            const container = myNVL.getContainer();
+            // Enter the graph first
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(nodeFocusMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+            // Tab to next element
+            const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+            container.dispatchEvent(event);
+            expect(nodeFocusMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '1' }), event);
+        });
+        test('Shift+Tab does nothing when the graph has not been entered', () => {
+            keyboardInteraction.updateCallback('onRelationshipFocus', callbackMock);
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true }));
+            expect(callbackMock).not.toHaveBeenCalled();
+        });
+        test('Shift+Tab navigates focus backward after entering the graph', () => {
+            const nodeFocusMock = jest.fn();
+            const relFocusMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', nodeFocusMock);
+            keyboardInteraction.updateCallback('onRelationshipFocus', relFocusMock);
+            const container = myNVL.getContainer();
+            // Enter the graph first
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            // Shift+Tab to go backward
+            const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true });
+            container.dispatchEvent(event);
+            expect(relFocusMock).toHaveBeenCalledWith(expect.objectContaining({ id: '10' }), event);
+        });
+        test('Tab cycles through nodes and relationships', () => {
+            const nodeFocusMock = jest.fn();
+            const relFocusMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', nodeFocusMock);
+            keyboardInteraction.updateCallback('onRelationshipFocus', relFocusMock);
+            const container = myNVL.getContainer();
+            // Enter the graph: node '0'
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(nodeFocusMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+            // First Tab: node '1'
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(nodeFocusMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '1' }), expect.any(KeyboardEvent));
+            // Second Tab: relationship '10'
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(relFocusMock).toHaveBeenCalledWith(expect.objectContaining({ id: '10' }), expect.any(KeyboardEvent));
+        });
+        test('Tab wraps around from last to first element', () => {
+            const nodeFocusMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', nodeFocusMock);
+            keyboardInteraction.updateCallback('onRelationshipFocus', jest.fn());
+            const container = myNVL.getContainer();
+            // Enter the graph, then navigate to the last element (relationship '10')
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            // Wrap around to first element
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(nodeFocusMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+        });
+        test('Tab fires blur callback when moving away from a node', () => {
+            const nodeBlurMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onNodeBlur', nodeBlurMock);
+            const container = myNVL.getContainer();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(nodeBlurMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+        });
+        test('Tab fires onRelationshipBlur when moving away from a relationship', () => {
+            const relBlurMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onRelationshipFocus', jest.fn());
+            keyboardInteraction.updateCallback('onRelationshipBlur', relBlurMock);
+            const container = myNVL.getContainer();
+            // Enter the graph, then navigate to relationship
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            // Move away from relationship
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+            expect(relBlurMock).toHaveBeenCalledWith(expect.objectContaining({ id: '10' }), expect.any(KeyboardEvent));
+        });
+        test('does nothing when there are no elements', () => {
+            keyboardInteraction.destroy();
+            myNVL.destroy();
+            myNVL = new NVL(document.createElement('div'), [], [], {
+                disableWebGL: true,
+                initialZoom: 1,
+                layout: 'free',
+                renderer: 'webgl'
+            });
+            keyboardInteraction = new KeyboardInteraction(myNVL);
+            keyboardInteraction.updateCallback('onNodeFocus', callbackMock);
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(callbackMock).not.toHaveBeenCalled();
+        });
+        test('Escape clears element focus but keeps canvas focused', () => {
+            const nodeBlurMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onNodeBlur', nodeBlurMock);
+            const container = myNVL.getContainer();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            expect(nodeBlurMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+            expect(keyboardInteraction.getFocused()).toBeUndefined();
+        });
+        test('Escape does nothing when nothing is focused', () => {
+            keyboardInteraction.updateCallback('onNodeBlur', callbackMock);
+            keyboardInteraction.updateCallback('onRelationshipBlur', callbackMock);
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            expect(callbackMock).not.toHaveBeenCalled();
+        });
+        test('Shift+F10 fires onContextMenu with focused element', () => {
+            const contextMenuMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onContextMenu', contextMenuMock);
+            const container = myNVL.getContainer();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            const event = new KeyboardEvent('keydown', { key: 'F10', shiftKey: true, bubbles: true });
+            container.dispatchEvent(event);
+            expect(contextMenuMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), event);
+        });
+        test('Shift+F10 fires onContextMenu with undefined when nothing is focused', () => {
+            const contextMenuMock = jest.fn();
+            keyboardInteraction.updateCallback('onContextMenu', contextMenuMock);
+            const event = new KeyboardEvent('keydown', { key: 'F10', shiftKey: true, bubbles: true });
+            myNVL.getContainer().dispatchEvent(event);
+            expect(contextMenuMock).toHaveBeenCalledWith(undefined, event);
+        });
+    });
+    describe('custom key mappings', () => {
+        test('respects custom enterGraphKey', () => {
+            keyboardInteraction.destroy();
+            keyboardInteraction = new KeyboardInteraction(myNVL, { enterGraphKey: ['Space'] });
+            keyboardInteraction.updateCallback('onNodeFocus', callbackMock);
+            // Default Enter should not enter the graph
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(callbackMock).not.toHaveBeenCalled();
+            // Custom key should enter the graph
+            myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Space', bubbles: true }));
+            expect(callbackMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+        });
+        test('respects custom navigateForwardKey', () => {
+            keyboardInteraction.destroy();
+            keyboardInteraction = new KeyboardInteraction(myNVL, { navigateForwardKey: ['ArrowDown'] });
+            keyboardInteraction.updateCallback('onNodeFocus', callbackMock);
+            const container = myNVL.getContainer();
+            // Enter the graph first
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            // Custom forward key should navigate to the next element
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+            expect(callbackMock).toHaveBeenLastCalledWith(expect.objectContaining({ id: '1' }), expect.any(KeyboardEvent));
+        });
+        test('respects custom navigateBackwardKey', () => {
+            keyboardInteraction.destroy();
+            keyboardInteraction = new KeyboardInteraction(myNVL, { navigateBackwardKey: ['ArrowUp'] });
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onRelationshipFocus', callbackMock);
+            const container = myNVL.getContainer();
+            // Enter the graph first
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            // Custom backward key should navigate to the previous (last) element
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+            expect(callbackMock).toHaveBeenCalledWith(expect.objectContaining({ id: '10' }), expect.any(KeyboardEvent));
+        });
+        test('respects custom exitGraphKey', () => {
+            keyboardInteraction.destroy();
+            keyboardInteraction = new KeyboardInteraction(myNVL, { exitGraphKey: ['q'] });
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onNodeBlur', callbackMock);
+            const container = myNVL.getContainer();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'q', bubbles: true }));
+            expect(callbackMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), expect.any(KeyboardEvent));
+        });
+        test('respects custom contextMenuKey', () => {
+            keyboardInteraction.destroy();
+            keyboardInteraction = new KeyboardInteraction(myNVL, { contextMenuKey: ['Ctrl', 'm'] });
+            const contextMenuMock = jest.fn();
+            keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+            keyboardInteraction.updateCallback('onContextMenu', contextMenuMock);
+            const container = myNVL.getContainer();
+            container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            const event = new KeyboardEvent('keydown', { key: 'm', ctrlKey: true, bubbles: true });
+            container.dispatchEvent(event);
+            expect(contextMenuMock).toHaveBeenCalledWith(expect.objectContaining({ id: '0' }), event);
+        });
+    });
+    test('getFocused returns the currently focused node', () => {
+        keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+        expect(keyboardInteraction.getFocused()).toBeUndefined();
+        myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        expect(keyboardInteraction.getFocused()).toEqual(expect.objectContaining({ id: '0' }));
+    });
+    test('getFocused returns the currently focused relationship', () => {
+        keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+        keyboardInteraction.updateCallback('onRelationshipFocus', jest.fn());
+        const container = myNVL.getContainer();
+        container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+        container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+        expect(keyboardInteraction.getFocused()).toEqual(expect.objectContaining({ id: '10' }));
+    });
+    test('onKeyDown callback receives the currently focused element', () => {
+        keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+        keyboardInteraction.updateCallback('onKeyDown', callbackMock);
+        const container = myNVL.getContainer();
+        container.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        const event = new KeyboardEvent('keydown', { key: 'a', bubbles: true });
+        container.dispatchEvent(event);
+        expect(callbackMock).toHaveBeenLastCalledWith(event, expect.objectContaining({ id: '0' }));
+    });
+    test('destroy removes event listeners', () => {
+        keyboardInteraction.updateCallback('onKeyDown', callbackMock);
+        keyboardInteraction.destroy();
+        const event = new KeyboardEvent('keydown', { key: 'Tab' });
+        myNVL.getContainer().dispatchEvent(event);
+        expect(callbackMock).not.toHaveBeenCalled();
+    });
+    test('destroy clears focus state', () => {
+        keyboardInteraction.updateCallback('onNodeFocus', jest.fn());
+        myNVL.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        expect(keyboardInteraction.getFocused()).toBeDefined();
+        keyboardInteraction.destroy();
+        expect(keyboardInteraction.getFocused()).toBeUndefined();
+    });
+});

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

@@ -112,4 +112,109 @@ describe('PanInteraction', () => {
         document.body.dispatchEvent(bodyMouseUpEvent);
         expect(document.body.style.getPropertyValue('user-select')).toBe('');
     });
+    test('when controlledPan is true, should not update NVL instance', () => {
+        panInteraction.destroy();
+        myNVL.destroy();
+        myNVL = new NVL(document.createElement('div'), [
+            { id: '0', x: 10, y: 10 },
+            { id: '1', x: 200, y: 200 }
+        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
+        const panInteractionNoUpdate = new PanInteraction(myNVL, { controlledPan: true });
+        panInteractionNoUpdate.updateCallback('onPan', panCallbackMock);
+        const initialPan = myNVL.getPan();
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 120,
+            clientY: 120
+        });
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 120,
+            clientY: 120
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(myNVL.getPan()).toEqual(initialPan);
+            expect(panCallbackMock).toHaveBeenCalledTimes(1);
+            expect(panCallbackMock).toHaveBeenCalledWith({
+                x: initialPan.x - 20,
+                y: initialPan.y - 20
+            }, mouseMoveEvent);
+            panInteractionNoUpdate.destroy();
+            resolve();
+        });
+    });
+    test('when controlledPan is false, should update NVL instance normally', () => {
+        panInteraction.destroy();
+        myNVL.destroy();
+        myNVL = new NVL(document.createElement('div'), [
+            { id: '0', x: 10, y: 10 },
+            { id: '1', x: 200, y: 200 }
+        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
+        const panInteractionWithUpdate = new PanInteraction(myNVL, { controlledPan: false });
+        panInteractionWithUpdate.updateCallback('onPan', panCallbackMock);
+        const initialPan = myNVL.getPan();
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 120,
+            clientY: 120
+        });
+        const mouseUpEvent = new MouseEvent('mouseup');
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(myNVL.getPan()).not.toEqual(initialPan);
+            expect(myNVL.getPan()).toEqual({
+                x: initialPan.x - 20,
+                y: initialPan.y - 20
+            });
+            expect(panCallbackMock).toHaveBeenCalledTimes(1);
+            panInteractionWithUpdate.destroy();
+            resolve();
+        });
+    });
+    test('when controlledPan is true, should provide correct callback values for multiple operations', () => {
+        panInteraction.destroy();
+        myNVL.destroy();
+        myNVL = new NVL(document.createElement('div'), [
+            { id: '0', x: 10, y: 10 },
+            { id: '1', x: 200, y: 200 }
+        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
+        const panInteractionNoUpdate = new PanInteraction(myNVL, { controlledPan: true });
+        panInteractionNoUpdate.updateCallback('onPan', panCallbackMock);
+        const initialPan = myNVL.getPan();
+        const container = myNVL.getContainer();
+        container.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 100 }));
+        container.dispatchEvent(new MouseEvent('mousemove', { buttons: 1, clientX: 120, clientY: 120 }));
+        container.dispatchEvent(new MouseEvent('mouseup'));
+        container.dispatchEvent(new MouseEvent('mousedown', { clientX: 120, clientY: 120 }));
+        container.dispatchEvent(new MouseEvent('mousemove', { buttons: 1, clientX: 140, clientY: 140 }));
+        container.dispatchEvent(new MouseEvent('mouseup'));
+        return new Promise((resolve) => {
+            expect(panCallbackMock).toHaveBeenCalledTimes(2);
+            expect(panCallbackMock).toHaveBeenNthCalledWith(1, {
+                x: initialPan.x - 20,
+                y: initialPan.y - 20
+            }, expect.anything());
+            expect(panCallbackMock).toHaveBeenNthCalledWith(2, {
+                x: initialPan.x - 20,
+                y: initialPan.y - 20
+            }, expect.anything());
+            expect(myNVL.getPan()).toEqual(initialPan);
+            panInteractionNoUpdate.destroy();
+            resolve();
+        });
+    });
 });