@neo4j-nvl/interaction-handlers 1.1.0 → 1.2.0-090ec876

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.2.0] - 2026-05-27
+
+This 1.2.0 release introduces a new keyboard interaction handler and SVG support for the static image wrapper React component. It also includes several performance improvements for clustering and text/icon rendering, as well as several bug fixes.
+
+### Added
+* SVG format support in the static image wrapper.
+* Keyboard interaction handlers.
+
+### Changed
+* Boost performance of graph clustering for force directed layouts.
+* Optimize Canvas rendering performance by caching expensive operations.
+* Deprecate Cytoscape support.
+
+### Fixed
+* Fix Arabic text rendering issues to ensure characters stay connected.
+* Prevent arrow ends from bouncing by removing position rounding.
+* Fix issue where D3 layout would occasionally fail to display.
+* Fix node position loss during a restart when the device pixel ratio changes.
+* Add missing support for relationship overlay icons within the SVG renderer.
+* Fix bug where reactive zoom values were not consistently applied.
+* Correct the pinch-to-zoom speed scaling on the minimap.
+* Add safety guards against non-finite values to prevent runtime rendering errors.
+* Ensure fit targets respect `maxZoom` constraints even when omitted from `zoomOptions`.
+* Force canvas repaint when icon images finish asynchronous loading.
+
 ## [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.

package/lib/__tests__/box-select-interaction.test.js

@@ -50,14 +50,15 @@ describe('BoxSelectInteraction', () => {
             resolve();
         });
     });
-    test.failing('will not start when node is below pointer when dragging', () => {
+    test('will not start when node is below pointer when dragging', () => {
         boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
         boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
         expect(myNVL.getSelectedNodes()).toHaveLength(0);
         const gesture = [
             createMouseEvent('mousedown', 25, 25),
             createMouseEvent('mousemove', 50, 50),
-            createMouseEvent('mouseup', 50, 50)
+            createMouseEvent('mousemove', 200, 200),
+            createMouseEvent('mouseup', 200, 200)
         ];
         const container = myNVL.getContainer();
         gesture.forEach((e) => container.dispatchEvent(e));
@@ -67,6 +68,31 @@ describe('BoxSelectInteraction', () => {
             resolve();
         });
     });
+    test('can start box select when only a relationship is under the pointer', () => {
+        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
+        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
+        const gesture = [
+            createMouseEvent('mousedown', 100, 100),
+            createMouseEvent('mousemove', 150, 100),
+            createMouseEvent('mouseup', 150, 100)
+        ];
+        const container = myNVL.getContainer();
+        gesture.forEach((e) => container.dispatchEvent(e));
+        return new Promise((resolve) => {
+            expect(startCallback).toHaveBeenCalledTimes(1);
+            expect(selectCallback).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('does not fire callbacks when clicking directly on a relationship without dragging', () => {
+        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
+        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
+        const container = myNVL.getContainer();
+        container.dispatchEvent(createMouseEvent('mousedown', 112, 112));
+        container.dispatchEvent(createMouseEvent('mouseup', 112, 112));
+        expect(startCallback).not.toHaveBeenCalled();
+        expect(selectCallback).not.toHaveBeenCalled();
+    });
     test('box selection should disable text selection until mouse release', () => {
         const container = myNVL.getContainer();
         boxSelectInteraction.updateCallback('onBoxSelect', boxSelectCallbackMock);

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__/lasso-interaction.test.js

@@ -78,12 +78,39 @@ describe('LassoInteraction', () => {
             resolve();
         });
     });
+    test('does not fire started or select callbacks when movement stays below drag threshold', () => {
+        lassoInteraction.updateCallback('onLassoStarted', startCallback);
+        lassoInteraction.updateCallback('onLassoSelect', selectCallback);
+        const container = myNVL.getContainer();
+        container.dispatchEvent(createMouseEvent('mousedown', 100, 100));
+        container.dispatchEvent(createMouseEvent('mousemove', 100, 103));
+        container.dispatchEvent(createMouseEvent('mouseup', 100, 103));
+        expect(startCallback).not.toHaveBeenCalled();
+        expect(selectCallback).not.toHaveBeenCalled();
+    });
+    test('can start lasso when only a relationship is under the pointer', () => {
+        lassoInteraction.updateCallback('onLassoStarted', startCallback);
+        lassoInteraction.updateCallback('onLassoSelect', selectCallback);
+        const gesture = [
+            createMouseEvent('mousedown', 100, 100),
+            createMouseEvent('mousemove', 150, 100),
+            createMouseEvent('mousemove', 50, 150),
+            createMouseEvent('mouseup', 100, 100)
+        ];
+        const container = myNVL.getContainer();
+        gesture.forEach((e) => container.dispatchEvent(e));
+        return new Promise((resolve) => {
+            expect(startCallback).toHaveBeenCalledTimes(1);
+            expect(selectCallback).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
     test('will not start when node is below pointer when dragging', () => {
         lassoInteraction.updateCallback('onLassoStarted', startCallback);
         lassoInteraction.updateCallback('onLassoSelect', selectCallback);
         expect(myNVL.getSelectedNodes()).toHaveLength(0);
         const gesture1 = [
-            createMouseEvent('mousedown', 10, 10),
+            createMouseEvent('mousedown', 25, 25),
             createMouseEvent('mousemove', 50, 0),
             createMouseEvent('mousemove', 20, 50),
             createMouseEvent('mouseup', 0, 0)
@@ -95,6 +122,15 @@ describe('LassoInteraction', () => {
             resolve();
         });
     });
+    test('does not fire callbacks when clicking directly on a relationship without dragging', () => {
+        lassoInteraction.updateCallback('onLassoStarted', startCallback);
+        lassoInteraction.updateCallback('onLassoSelect', selectCallback);
+        const container = myNVL.getContainer();
+        container.dispatchEvent(createMouseEvent('mousedown', 112, 112));
+        container.dispatchEvent(createMouseEvent('mouseup', 112, 112));
+        expect(startCallback).not.toHaveBeenCalled();
+        expect(selectCallback).not.toHaveBeenCalled();
+    });
     test('test for line crossing utility function', () => {
         const res1 = checkLinesCrossing([0, 0], [10, 10], [10, 0], [0, 10]);
         expect(res1).toBeTruthy();

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

@@ -2,6 +2,11 @@ import NVL from '@neo4j-nvl/base';
 import '@testing-library/jest-dom';
 import { PanInteraction } from '../interaction-handlers/pan-interaction';
 jest.mock('@neo4j-nvl/layout-workers');
+const waitForAnimationFrame = async () => {
+    await new Promise((resolve) => {
+        window.requestAnimationFrame(() => resolve());
+    });
+};
 describe('PanInteraction', () => {
     let panInteraction;
     let myNVL;
@@ -18,7 +23,7 @@ describe('PanInteraction', () => {
         myNVL.destroy();
         panCallbackMock.mockReset();
     });
-    test('performing a simple pan operation should invoke the expected callback', () => {
+    test('performing a simple pan operation should invoke the expected callback', async () => {
         panInteraction.updateCallback('onPan', panCallbackMock);
         const mouseDownEvent = new MouseEvent('mousedown', {
             clientX: 100,
@@ -36,18 +41,17 @@ describe('PanInteraction', () => {
         const container = myNVL.getContainer();
         const initialPan = myNVL.getPan();
         container.dispatchEvent(mouseDownEvent);
+        await waitForAnimationFrame();
         container.dispatchEvent(mouseMoveEvent);
+        await waitForAnimationFrame();
         container.dispatchEvent(mouseUpEvent);
-        return new Promise((resolve) => {
-            expect(panCallbackMock).toHaveBeenCalledTimes(1);
-            expect(panCallbackMock).toHaveBeenCalledWith({
-                x: initialPan.x - 20,
-                y: initialPan.y - 20
-            }, mouseMoveEvent);
-            const newPan = myNVL.getPan();
-            expect(newPan).not.toEqual(initialPan);
-            resolve();
-        });
+        expect(panCallbackMock).toHaveBeenCalledTimes(1);
+        expect(panCallbackMock).toHaveBeenCalledWith({
+            x: initialPan.x - 20,
+            y: initialPan.y - 20
+        }, mouseMoveEvent);
+        const newPan = myNVL.getPan();
+        expect(newPan).not.toEqual(initialPan);
     });
     test('panning should not work when clicking on nodes by default', () => {
         panInteraction.updateCallback('onPan', panCallbackMock);
@@ -150,7 +154,7 @@ describe('PanInteraction', () => {
             resolve();
         });
     });
-    test('when controlledPan is false, should update NVL instance normally', () => {
+    test('when controlledPan is false, should update NVL instance normally', async () => {
         panInteraction.destroy();
         myNVL.destroy();
         myNVL = new NVL(document.createElement('div'), [
@@ -172,18 +176,17 @@ describe('PanInteraction', () => {
         const mouseUpEvent = new MouseEvent('mouseup');
         const container = myNVL.getContainer();
         container.dispatchEvent(mouseDownEvent);
+        await waitForAnimationFrame();
         container.dispatchEvent(mouseMoveEvent);
+        await waitForAnimationFrame();
         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();
+        expect(myNVL.getPan()).not.toEqual(initialPan);
+        expect(myNVL.getPan()).toEqual({
+            x: initialPan.x - 20,
+            y: initialPan.y - 20
         });
+        expect(panCallbackMock).toHaveBeenCalledTimes(1);
+        panInteractionWithUpdate.destroy();
     });
     test('when controlledPan is true, should provide correct callback values for multiple operations', () => {
         panInteraction.destroy();

package/lib/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/utils.test.js

@@ -0,0 +1,19 @@
+import { isDraggingDistance, isDraggingMovement } from '../interaction-handlers/utils';
+describe('interaction utils', () => {
+    test('returns true when movement reaches threshold on either axis', () => {
+        expect(isDraggingDistance({ x: 0, y: 0 }, { x: 10, y: 0 })).toBe(true);
+        expect(isDraggingDistance({ x: 0, y: 0 }, { x: 0, y: 10 })).toBe(true);
+    });
+    test('returns true for diagonal movement whose combined movement reaches threshold', () => {
+        expect(isDraggingDistance({ x: 0, y: 0 }, { x: 2, y: 2 })).toBe(false);
+        expect(isDraggingDistance({ x: 0, y: 0 }, { x: 7, y: 7 })).toBe(true);
+        expect(isDraggingDistance({ x: 0, y: 0 }, { x: 8, y: 8 })).toBe(true);
+    });
+    test('applies the same threshold logic to mouse events', () => {
+        expect(isDraggingMovement(new MouseEvent('mousemove', { clientX: 10, clientY: 0 }), { x: 0, y: 0 })).toBe(true);
+        expect(isDraggingMovement(new MouseEvent('mousemove', { clientX: 0, clientY: 10 }), { x: 0, y: 0 })).toBe(true);
+        expect(isDraggingMovement(new MouseEvent('mousemove', { clientX: 2, clientY: 2 }), { x: 0, y: 0 })).toBe(false);
+        expect(isDraggingMovement(new MouseEvent('mousemove', { clientX: 7, clientY: 7 }), { x: 0, y: 0 })).toBe(true);
+        expect(isDraggingMovement(new MouseEvent('mousemove', { clientX: 8, clientY: 8 }), { x: 0, y: 0 })).toBe(true);
+    });
+});

package/lib/index.d.ts

@@ -8,11 +8,13 @@ import { DrawInteraction } from './interaction-handlers/draw-interaction';
 import type { DrawInteractionCallbacks, DrawInteractionOptions } from './interaction-handlers/draw-interaction';
 import type { HoverInteractionCallbacks, HoverInteractionOptions } from './interaction-handlers/hover-interaction';
 import { HoverInteraction } from './interaction-handlers/hover-interaction';
+import type { KeyboardInteractionCallbacks, KeyboardInteractionOptions } from './interaction-handlers/keyboard-interaction';
+import { KeyboardInteraction } from './interaction-handlers/keyboard-interaction';
 import { LassoInteraction } from './interaction-handlers/lasso-interaction';
 import type { LassoInteractionCallbacks, LassoInteractionOptions } from './interaction-handlers/lasso-interaction';
 import type { PanInteractionCallbacks, PanInteractionOptions } from './interaction-handlers/pan-interaction';
 import { PanInteraction } from './interaction-handlers/pan-interaction';
 import type { ZoomInteractionCallbacks, ZoomInteractionOptions } from './interaction-handlers/zoom-interaction';
 import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export type { BoxSelectInteractionOptions, BoxSelectInteractionCallbacks, ClickInteractionOptions, HoverInteractionOptions, HoverInteractionCallbacks, DragNodeInteractionCallbacks, ClickInteractionCallbacks, PanInteractionCallbacks, DrawInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks, ZoomInteractionOptions, LassoInteractionOptions, LassoInteractionCallbacks, DrawInteractionOptions };
-export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction };
+export type { BoxSelectInteractionOptions, BoxSelectInteractionCallbacks, ClickInteractionOptions, HoverInteractionOptions, HoverInteractionCallbacks, DragNodeInteractionCallbacks, ClickInteractionCallbacks, KeyboardInteractionCallbacks, KeyboardInteractionOptions, PanInteractionCallbacks, DrawInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks, ZoomInteractionOptions, LassoInteractionOptions, LassoInteractionCallbacks, DrawInteractionOptions };
+export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction, KeyboardInteraction };

package/lib/index.js

@@ -3,7 +3,8 @@ import { ClickInteraction } from './interaction-handlers/click-interaction';
 import { DragNodeInteraction } from './interaction-handlers/drag-node-interaction';
 import { DrawInteraction } from './interaction-handlers/draw-interaction';
 import { HoverInteraction } from './interaction-handlers/hover-interaction';
+import { KeyboardInteraction } from './interaction-handlers/keyboard-interaction';
 import { LassoInteraction } from './interaction-handlers/lasso-interaction';
 import { PanInteraction } from './interaction-handlers/pan-interaction';
 import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction };
+export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction, KeyboardInteraction };

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

@@ -5,7 +5,7 @@ import type { NVL } from '@neo4j-nvl/base';
  * @internal
  * @hidden
  */
-declare abstract class BaseInteraction<T extends Record<string, ((...args: unknown[]) => void) | boolean>, P extends Record<string, unknown>> {
+declare abstract class BaseInteraction<P extends Record<string, unknown>> {
     private readonly nvl;
     private readonly options;
     private readonly container;
@@ -13,7 +13,7 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
      * @internal
      * @hidden
      */
-    callbackMap: Map<keyof T, T[keyof T]>;
+    callbackMap: Map<string, ((...args: unknown[]) => void) | boolean>;
     /**
      * @internal
      * @hidden
@@ -48,18 +48,18 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
      * @internal
      * @hidden
      */
-    callCallbackIfRegistered: (name: keyof T, ...args: unknown[]) => void;
+    callCallbackIfRegistered: (name: string, ...args: unknown[]) => void;
     /**
      * Add or update a callback for a given event of type.
      * @param name - The name of the event.
      * @param callback - The callback to be called when the event is triggered.
      */
-    updateCallback: (name: keyof T | string, callback: T[keyof T]) => void;
+    updateCallback: (name: string, callback: ((...args: unknown[]) => void) | boolean) => void;
     /**
      * Remove a callback for a given event of type.
      * @param name - The name of the event.
      */
-    removeCallback: (name: keyof T | string) => void;
+    removeCallback: (name: string) => void;
     /**
      * Enables or disables global text selection during a drag or pan operation.
      * @param enable - Whether to enable or disable global text selection.