@neo4j-nvl/interaction-handlers 0.3.7 → 0.3.8-15dd54ce

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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/).
 
+## [0.3.8] - 2025-03-18
+
+This release contains a fix for the [NVL result transformer](https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_base.nvlResultTransformer.html).
+
+### Fixed
+
+* NVL result transformer to be able to handle deeply nested records
+
+## [0.3.7] - 2025-02-28
+
+### Added
+
+* Export zoom functionalities as a named function
+* Add a `positions` prop to the react wrapper
+* Color custimzation options
+* Aria attributes for NVL canvas and option to disable them
+* Option to disable web workers
+
+### Changed
+
+* Change default threshold when relationship captions are displayed
+* update default selection color and default node color to be aligned with the Neo4j Design Library
+
+### Deprecated
+
+* `selectedBorderColor` - use `styling.selectedBorderColor` instead
+* `nodeDefaultBorderColor` - use `styling.nodeDefaultBorderColor` instead
+
+### Fixed
+
+* Fix icon colors not being inverted for dark node colors
+* fix bug where selected border color was not processed if a default border color was not provided in options
+* Address several warnings during initialization
+* Address multi-select callback inconsistencies
+* Canvas renderer performance improvements
+* ensure properties provided via `nvlOptions` are also updated on prop change in React wrappers
+
 ## [0.3.6] - 2025-02-21
 
 NVL 0.3.6 improves the API docs and adds a result transformer for the Neo4j JavaScript Driver, as well as small improvements and bug fixes.

package/lib/__tests__/drag-node-interaction.test.js

@@ -43,7 +43,7 @@ describe('DragNodeInteraction', () => {
         const container = myNVL.getContainer();
         container.dispatchEvent(mouseDownEvent);
         container.dispatchEvent(mouseMoveEvent);
-        container.dispatchEvent(mouseUpEvent);
+        document.body.dispatchEvent(mouseUpEvent);
         return new Promise((resolve) => {
             expect(dragStartCallbackMock).toHaveBeenCalledTimes(1);
             expect(dragStartCallbackMock).toHaveBeenCalledWith([{ id: '0', x: 10, y: 10 }], mouseMoveEvent);
@@ -79,7 +79,7 @@ describe('DragNodeInteraction', () => {
         const container = myNVL.getContainer();
         container.dispatchEvent(mouseDownEvent);
         container.dispatchEvent(mouseMoveEvent);
-        container.dispatchEvent(mouseUpEvent);
+        document.body.dispatchEvent(mouseUpEvent);
         return new Promise((resolve) => {
             expect(dragStartCallbackMock).toHaveBeenCalledTimes(1);
             expect(dragStartCallbackMock).toHaveBeenCalledWith([
@@ -99,6 +99,34 @@ describe('DragNodeInteraction', () => {
             resolve();
         });
     });
+    test('dragging should not be invoked when the mouse is not on a node', () => {
+        dragNodeInteraction.updateCallback('onDragStart', dragStartCallbackMock);
+        dragNodeInteraction.updateCallback('onDrag', dragCallbackMock);
+        dragNodeInteraction.updateCallback('onDragEnd', dragEndCallbackMock);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 150,
+            clientY: 150
+        });
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 150,
+            clientY: 150
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        document.body.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(dragStartCallbackMock).toHaveBeenCalledTimes(0);
+            expect(dragCallbackMock).toHaveBeenCalledTimes(0);
+            expect(dragEndCallbackMock).toHaveBeenCalledTimes(0);
+            resolve();
+        });
+    });
     test('dragging should not be invoked when the mouse is moved less than the drag threshold', () => {
         dragNodeInteraction.updateCallback('onDragStart', dragStartCallbackMock);
         dragNodeInteraction.updateCallback('onDrag', dragCallbackMock);
@@ -120,7 +148,7 @@ describe('DragNodeInteraction', () => {
         const container = myNVL.getContainer();
         container.dispatchEvent(mouseDownEvent);
         container.dispatchEvent(mouseMoveEvent);
-        container.dispatchEvent(mouseUpEvent);
+        document.body.dispatchEvent(mouseUpEvent);
         return new Promise((resolve) => {
             expect(dragStartCallbackMock).toHaveBeenCalledTimes(0);
             expect(dragCallbackMock).toHaveBeenCalledTimes(0);
@@ -128,4 +156,36 @@ describe('DragNodeInteraction', () => {
             resolve();
         });
     });
+    test('dragging outside the container should stop dragging but keep selection disabled until mouse release', () => {
+        dragNodeInteraction.updateCallback('onDragStart', dragStartCallbackMock);
+        dragNodeInteraction.updateCallback('onDrag', dragCallbackMock);
+        dragNodeInteraction.updateCallback('onDragEnd', dragEndCallbackMock);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 20,
+            clientY: 20
+        });
+        const mouseLeaveEvent = new MouseEvent('mouseleave', {
+            clientX: 1,
+            clientY: 1
+        });
+        const bodyMouseUpEvent = new MouseEvent('mouseup');
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseLeaveEvent);
+        return new Promise((resolve) => {
+            expect(dragStartCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragCallbackMock).toHaveBeenCalledTimes(1);
+            expect(document.body.style.getPropertyValue('user-select')).toBe('none');
+            document.body.dispatchEvent(bodyMouseUpEvent);
+            expect(document.body.style.getPropertyValue('user-select')).toBe('');
+            expect(dragEndCallbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
 });

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

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

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

@@ -0,0 +1,115 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { PanInteraction } from '../interaction-handlers/pan-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('PanInteraction', () => {
+    let panInteraction;
+    let myNVL;
+    const panCallbackMock = jest.fn();
+    beforeEach(() => {
+        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' });
+        panInteraction = new PanInteraction(myNVL);
+    });
+    afterEach(() => {
+        panInteraction.destroy();
+        myNVL.destroy();
+        panCallbackMock.mockReset();
+    });
+    test('performing a simple pan operation should invoke the expected callback', () => {
+        panInteraction.updateCallback('onPan', panCallbackMock);
+        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();
+        const initialPan = myNVL.getPan();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        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();
+        });
+    });
+    test('panning should not work when clicking on nodes by default', () => {
+        panInteraction.updateCallback('onPan', panCallbackMock);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 30,
+            clientY: 30
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        return new Promise((resolve) => {
+            expect(panCallbackMock).not.toHaveBeenCalled();
+            resolve();
+        });
+    });
+    test('should update targets to allow panning on nodes', () => {
+        panInteraction.updateCallback('onPan', panCallbackMock);
+        panInteraction.updateTargets(['node'], false);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 50,
+            clientY: 50
+        });
+        const container = myNVL.getContainer();
+        const initialPan = myNVL.getPan();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        return new Promise((resolve) => {
+            expect(panCallbackMock).toHaveBeenCalledTimes(1);
+            expect(panCallbackMock).toHaveBeenCalledWith({
+                x: initialPan.x - 40,
+                y: initialPan.y - 40
+            }, mouseMoveEvent);
+            resolve();
+        });
+    });
+    test('panning outside the container should disable text selection until mouse release', () => {
+        panInteraction.updateCallback('onPan', panCallbackMock);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 120,
+            clientY: 120
+        });
+        const bodyMouseUpEvent = new MouseEvent('mouseup');
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        expect(document.body.style.getPropertyValue('user-select')).toBe('none');
+        document.body.dispatchEvent(bodyMouseUpEvent);
+        expect(document.body.style.getPropertyValue('user-select')).toBe('');
+    });
+});

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/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

@@ -28,7 +28,6 @@ export class DragNodeInteraction extends BaseInteraction {
         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 };
@@ -62,6 +61,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 +89,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 +114,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/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

@@ -10,6 +10,7 @@ export class PanInteraction extends BaseInteraction {
     mousePosition;
     targets;
     shouldPan;
+    isPanning = false;
     /**
      * Creates a new instance of the pan interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -61,6 +62,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 +75,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.7",
+  "version": "0.3.8-15dd54ce",
   "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.7",
+    "@neo4j-nvl/base": "0.3.8-15dd54ce",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },
@@ -36,5 +36,6 @@
     "@testing-library/react": "^13.4.0",
     "@types/concaveman": "1.1.6",
     "@types/lodash": "4.14.202"
-  }
+  },
+  "stableVersion": "0.3.8"
 }