@neo4j-nvl/interaction-handlers 0.3.1 → 0.3.2-e0e72a58

package/README.md

@@ -34,4 +34,4 @@ clickInteraction.updateCallback('onNodeClick', (node) => {
 
 If you are using React and want to add interactivity to your graph, you can also make use of the InteractiveReactWrapper.
 
-You can find more instructions and examples on how to use NVL in the docs.
+You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/).

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

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

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

@@ -0,0 +1,319 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { ClickInteraction } from '../interaction-handlers/click-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('ClickInteraction', () => {
+    let clickInteraction;
+    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' });
+        clickInteraction = new ClickInteraction(myNVL, { selectOnClick: true });
+    });
+    afterEach(() => {
+        clickInteraction.destroy();
+        myNVL.destroy();
+        callbackMock.mockReset();
+    });
+    test('clicking outside of nodes and relationships should not select anything', () => {
+        clickInteraction.updateCallback('onCanvasClick', callbackMock);
+        expect(myNVL.getSelectedNodes()).toHaveLength(0);
+        let mouseEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        mouseEvent = new MouseEvent('click', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            expect(myNVL.getSelectedNodes()).toHaveLength(0);
+            resolve();
+        });
+    });
+    test('clicking outside of nodes and relationships should de-select everything', () => {
+        clickInteraction.updateCallback('onCanvasClick', callbackMock);
+        myNVL.updateElementsInGraph([
+            { id: '0', selected: true },
+            { id: '1', selected: true }
+        ], []);
+        expect(myNVL.getSelectedNodes()).toHaveLength(2);
+        let mouseEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        mouseEvent = new MouseEvent('click', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            expect(myNVL.getSelectedNodes()).toHaveLength(0);
+            resolve();
+        });
+    });
+    test(`clicking outside of nodes and relationships should not de-select anything 
+  when selection mode is turned off but still trigger callback`, () => {
+        clickInteraction.destroy();
+        clickInteraction = new ClickInteraction(myNVL, { selectOnClick: false });
+        clickInteraction.updateCallback('onCanvasClick', callbackMock);
+        myNVL.updateElementsInGraph([
+            { id: '0', selected: true },
+            { id: '1', selected: true }
+        ], []);
+        expect(myNVL.getSelectedNodes()).toHaveLength(2);
+        let mouseEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        mouseEvent = new MouseEvent('click', {
+            clientX: 10,
+            clientY: 10
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            expect(myNVL.getSelectedNodes()).toHaveLength(2);
+            resolve();
+        });
+    });
+    test('clicking on a node should select it and trigger callback', () => {
+        clickInteraction.updateCallback('onNodeClick', callbackMock);
+        myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        }));
+        const mouseEvent = new MouseEvent('click', {
+            clientX: 100,
+            clientY: 100
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', selected: true, x: 100, y: 100 }, {
+                nodes: [
+                    {
+                        data: { id: '0', selected: true, x: 100, y: 100 },
+                        distance: 0,
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        targetCoordinates: { x: 100, y: 100 }
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('clicking on a relationship should select it and trigger callback', () => {
+        clickInteraction.updateCallback('onRelationshipClick', callbackMock);
+        myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', {
+            clientX: 150,
+            clientY: 150
+        }));
+        const mouseEvent = new MouseEvent('click', {
+            clientX: 150,
+            clientY: 150
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', selected: true, from: '0', to: '1' }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', selected: true, from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 150, y: 150 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('clicking on a node should not select it if selection mode is off but still trigger callback', () => {
+        clickInteraction.destroy();
+        clickInteraction = new ClickInteraction(myNVL, { selectOnClick: false });
+        clickInteraction.updateCallback('onNodeClick', callbackMock);
+        myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        }));
+        const mouseEvent = new MouseEvent('click', {
+            clientX: 100,
+            clientY: 100
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100 }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100 },
+                        distance: 0,
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        targetCoordinates: { x: 100, y: 100 }
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('clicking on a node should de-select other selected nodes and trigger callback', () => {
+        clickInteraction.updateCallback('onNodeClick', callbackMock);
+        myNVL.updateElementsInGraph([{ id: '0' }, { id: '1', selected: true }], []);
+        expect(myNVL.getSelectedNodes()).toEqual([{ id: '1', selected: true, x: 200, y: 200 }]);
+        myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100
+        }));
+        const mouseEvent = new MouseEvent('click', {
+            clientX: 100,
+            clientY: 100
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', selected: true, x: 100, y: 100 }, {
+                nodes: [
+                    {
+                        data: { id: '0', selected: true, x: 100, y: 100 },
+                        distance: 0,
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        targetCoordinates: { x: 100, y: 100 }
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            expect(myNVL.getSelectedNodes()).toEqual([{ id: '0', selected: true, x: 100, y: 100 }]);
+            resolve();
+        });
+    });
+    test('context menu event on canvas should trigger canvas right-click callback', () => {
+        clickInteraction.updateCallback('onCanvasRightClick', callbackMock);
+        const mouseEvent = new MouseEvent('contextmenu', {
+            clientX: 50,
+            clientY: 50
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('context menu event on a node should trigger node right-click callback', () => {
+        clickInteraction.updateCallback('onNodeRightClick', callbackMock);
+        const mouseEvent = new MouseEvent('contextmenu', {
+            clientX: 100,
+            clientY: 100
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100 }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100 },
+                        distance: 0,
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        targetCoordinates: { x: 100, y: 100 }
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 100, y: 100 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('context menu event on a relationship should trigger relationship right-click callback', () => {
+        clickInteraction.updateCallback('onRelationshipRightClick', callbackMock);
+        const mouseEvent = new MouseEvent('contextmenu', {
+            clientX: 150,
+            clientY: 150
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1' }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        pointerCoordinates: { x: 150, y: 150 },
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            resolve();
+        });
+    });
+    test('releasing right mouse button should not select anything and trigger no callbacks', () => {
+        clickInteraction.updateCallback('onNodeClick', callbackMock);
+        const mouseEvent = new MouseEvent('mouseup', {
+            clientX: 10,
+            clientY: 10,
+            button: 2
+        });
+        myNVL.getContainer().dispatchEvent(mouseEvent);
+        return new Promise((resolve) => {
+            expect(callbackMock).toHaveBeenCalledTimes(0);
+            resolve();
+        });
+    });
+});

package/lib/__tests__/drag-node-interaction.test.d.ts

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

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

@@ -0,0 +1,131 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { DragNodeInteraction } from '../interaction-handlers/drag-node-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('DragNodeInteraction', () => {
+    let dragNodeInteraction;
+    let myNVL;
+    const dragStartCallbackMock = jest.fn();
+    const dragCallbackMock = jest.fn();
+    const dragEndCallbackMock = 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' });
+        dragNodeInteraction = new DragNodeInteraction(myNVL);
+    });
+    afterEach(() => {
+        dragNodeInteraction.destroy();
+        myNVL.destroy();
+        dragStartCallbackMock.mockReset();
+        dragCallbackMock.mockReset();
+        dragEndCallbackMock.mockReset();
+    });
+    test('performing a simple drag operation should invoke all expected callbacks', () => {
+        dragNodeInteraction.updateCallback('onDragStart', dragStartCallbackMock);
+        dragNodeInteraction.updateCallback('onDrag', dragCallbackMock);
+        dragNodeInteraction.updateCallback('onDragEnd', dragEndCallbackMock);
+        expect(myNVL.getSelectedNodes()).toHaveLength(0);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 20,
+            clientY: 20
+        });
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 20,
+            clientY: 20
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(dragStartCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragStartCallbackMock).toHaveBeenCalledWith([{ id: '0', x: 10, y: 10 }], mouseMoveEvent);
+            expect(dragCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragCallbackMock).toHaveBeenCalledWith([{ id: '0', x: 10, y: 10 }], mouseMoveEvent);
+            expect(dragEndCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragEndCallbackMock).toHaveBeenCalledWith([{ id: '0', x: 10, y: 10 }], mouseUpEvent);
+            resolve();
+        });
+    });
+    test('performing dragging on selection of nodes should invoke all expected callbacks', () => {
+        dragNodeInteraction.updateCallback('onDragStart', dragStartCallbackMock);
+        dragNodeInteraction.updateCallback('onDrag', dragCallbackMock);
+        dragNodeInteraction.updateCallback('onDragEnd', dragEndCallbackMock);
+        myNVL.updateElementsInGraph([
+            { id: '0', selected: true },
+            { id: '1', selected: true }
+        ], []);
+        expect(myNVL.getSelectedNodes()).toHaveLength(2);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 20,
+            clientY: 20
+        });
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 20,
+            clientY: 20
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(dragStartCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragStartCallbackMock).toHaveBeenCalledWith([
+                { id: '0', selected: true, x: 10, y: 10 },
+                { id: '1', selected: true, x: 200, y: 200 }
+            ], mouseMoveEvent);
+            expect(dragCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragCallbackMock).toHaveBeenCalledWith([
+                { id: '0', selected: true, x: 10, y: 10 },
+                { id: '1', selected: true, x: 200, y: 200 }
+            ], mouseMoveEvent);
+            expect(dragEndCallbackMock).toHaveBeenCalledTimes(1);
+            expect(dragEndCallbackMock).toHaveBeenCalledWith([
+                { id: '0', selected: true, x: 10, y: 10 },
+                { id: '1', selected: true, x: 200, y: 200 }
+            ], mouseUpEvent);
+            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);
+        dragNodeInteraction.updateCallback('onDragEnd', dragEndCallbackMock);
+        expect(myNVL.getSelectedNodes()).toHaveLength(0);
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 10,
+            clientY: 10
+        });
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            buttons: 1,
+            clientX: 12,
+            clientY: 12
+        });
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 12,
+            clientY: 12
+        });
+        const container = myNVL.getContainer();
+        container.dispatchEvent(mouseDownEvent);
+        container.dispatchEvent(mouseMoveEvent);
+        container.dispatchEvent(mouseUpEvent);
+        return new Promise((resolve) => {
+            expect(dragStartCallbackMock).toHaveBeenCalledTimes(0);
+            expect(dragCallbackMock).toHaveBeenCalledTimes(0);
+            expect(dragEndCallbackMock).toHaveBeenCalledTimes(0);
+            resolve();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,306 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { HoverInteraction } from '../interaction-handlers/hover-interaction';
+// jest.mock('@neo4j-nvl/base')
+jest.mock('@neo4j-nvl/layout-workers');
+describe('HoverInteraction', () => {
+    let hoverInteraction;
+    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 });
+        hoverInteraction = new HoverInteraction(myNVL, { drawShadowOnHover: true });
+        hoverInteraction.updateCallback('onHover', callbackMock);
+    });
+    afterEach(() => {
+        hoverInteraction.destroy();
+        myNVL.destroy();
+        callbackMock.mockReset();
+    });
+    describe('handleHover', () => {
+        it('should register hover event on canvas', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 10,
+                clientY: 10
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith(undefined, { nodes: [], relationships: [] }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+        });
+        it('should register hover event for node', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 100,
+                clientY: 100
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: true }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: true },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+        });
+        it('should register hover event for relationship', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 150,
+                clientY: 150
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: true }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: true },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+        });
+        it('should register un-hover event for node', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 100,
+                clientY: 100
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: true }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: true },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            const mouseEvent2 = new MouseEvent('mousemove', {
+                clientX: 10,
+                clientY: 10
+            });
+            hoverInteraction.handleHover(mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: false }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: false },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith(undefined, { nodes: [], relationships: [] }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledTimes(2);
+        });
+        it('should register un-hover event for relationship', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 150,
+                clientY: 150
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: true }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: true },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            const mouseEvent2 = new MouseEvent('mousemove', {
+                clientX: 10,
+                clientY: 10
+            });
+            hoverInteraction.handleHover(mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: false }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: false },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith(undefined, { nodes: [], relationships: [] }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledTimes(2);
+        });
+        it('should un-hover node and hover relationships when moving mouse from node to relationship', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 100,
+                clientY: 100
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: true }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: true },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1' },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            const mouseEvent2 = new MouseEvent('mousemove', {
+                clientX: 150,
+                clientY: 150
+            });
+            hoverInteraction.handleHover(mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: false }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: false },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: true },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: true }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: true },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledTimes(2);
+        });
+        it('should un-hover relationship and hover node when moving mouse from relationship to node', () => {
+            const mouseEvent = new MouseEvent('mousemove', {
+                clientX: 150,
+                clientY: 150
+            });
+            hoverInteraction.handleHover(mouseEvent);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: true }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: true },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent);
+            expect(callbackMock).toHaveBeenCalledTimes(1);
+            const mouseEvent2 = new MouseEvent('mousemove', {
+                clientX: 100,
+                clientY: 100
+            });
+            hoverInteraction.handleHover(mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '0', x: 100, y: 100, hovered: true }, {
+                nodes: [
+                    {
+                        data: { id: '0', x: 100, y: 100, hovered: true },
+                        distance: 0,
+                        targetCoordinates: { x: 100, y: 100 },
+                        pointerCoordinates: { x: 100, y: 100 },
+                        distanceVector: { x: 0, y: 0 },
+                        insideNode: true
+                    }
+                ],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: false },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 100, y: 100 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledWith({ id: '10', from: '0', to: '1', hovered: false }, {
+                nodes: [],
+                relationships: [
+                    {
+                        data: { id: '10', from: '0', to: '1', hovered: false },
+                        distance: 0,
+                        fromTargetCoordinates: { x: 100, y: 100 },
+                        toTargetCoordinates: { x: 200, y: 200 },
+                        pointerCoordinates: { x: 150, y: 150 }
+                    }
+                ]
+            }, mouseEvent2);
+            expect(callbackMock).toHaveBeenCalledTimes(2);
+        });
+    });
+});

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

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

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

@@ -0,0 +1,79 @@
+import NVL from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { LassoInteraction } from '../interaction-handlers/lasso-interaction';
+jest.mock('@neo4j-nvl/layout-workers');
+const testNodes = [
+    { id: '0', x: 10, y: 10 },
+    { id: '1', x: 200, y: 200 }
+];
+const testRels = [{ id: '10', from: '0', to: '1' }];
+const createMouseEvent = (type, x, y) => {
+    return new MouseEvent(type, { button: 0, buttons: 1, clientX: x, clientY: y });
+};
+describe('LassoInteraction', () => {
+    let lassoInteraction;
+    let myNVL;
+    const startCallback = jest.fn();
+    const selectCallback = jest.fn();
+    beforeEach(() => {
+        myNVL = new NVL(document.createElement('div'), testNodes, testRels, {
+            disableWebGL: true,
+            initialZoom: 1,
+            layout: 'free'
+        });
+        lassoInteraction = new LassoInteraction(myNVL);
+    });
+    afterEach(() => {
+        lassoInteraction.destroy();
+        myNVL.destroy();
+        startCallback.mockReset();
+        selectCallback.mockReset();
+    });
+    test('can select individual nodes', () => {
+        lassoInteraction.updateCallback('onLassoStarted', startCallback);
+        lassoInteraction.updateCallback('onLassoSelect', selectCallback);
+        expect(myNVL.getSelectedNodes()).toHaveLength(0);
+        const gesture1 = [
+            createMouseEvent('mousedown', 0, 0),
+            createMouseEvent('mousemove', 30, 0),
+            createMouseEvent('mousemove', 20, 20),
+            createMouseEvent('mouseup', 0, 0)
+        ];
+        const gesture2 = [
+            createMouseEvent('mousedown', 200, 180),
+            createMouseEvent('mousemove', 210, 210),
+            createMouseEvent('mouseup', 190, 210)
+        ];
+        const container = myNVL.getContainer();
+        gesture1.forEach((e) => container.dispatchEvent(e));
+        gesture2.forEach((e) => container.dispatchEvent(e));
+        return new Promise((resolve) => {
+            expect(startCallback).toHaveBeenCalledTimes(2);
+            expect(selectCallback).toHaveBeenCalledTimes(2);
+            expect(selectCallback).toHaveBeenNthCalledWith(1, { nodes: [testNodes[0]], rels: [] }, gesture1[3]);
+            expect(selectCallback).toHaveBeenNthCalledWith(2, { nodes: [testNodes[1]], rels: [] }, gesture2[2]);
+            resolve();
+        });
+    });
+    test('can select relationships', () => {
+        lassoInteraction.updateCallback('onLassoStarted', startCallback);
+        lassoInteraction.updateCallback('onLassoSelect', selectCallback);
+        expect(myNVL.getSelectedNodes()).toHaveLength(0);
+        const gesture = [
+            createMouseEvent('mousedown', 0, 0),
+            createMouseEvent('mousemove', 250, 0),
+            createMouseEvent('mousemove', 240, 240),
+            createMouseEvent('mousemove', 100, 200),
+            createMouseEvent('mousemove', 50, 0),
+            createMouseEvent('mouseup', 0, 0)
+        ];
+        const container = myNVL.getContainer();
+        gesture.forEach((e) => container.dispatchEvent(e));
+        return new Promise((resolve) => {
+            expect(startCallback).toHaveBeenCalledTimes(1);
+            expect(selectCallback).toHaveBeenCalledTimes(1);
+            expect(selectCallback).toHaveBeenCalledWith({ nodes: [testNodes[0], testNodes[1]], rels: [testRels[0]] }, gesture[5]);
+            resolve();
+        });
+    });
+});

package/lib/interaction-handlers/base.js

@@ -39,13 +39,13 @@ class BaseInteraction {
      * @internal
      */
     addEventListener = (type, listener, options) => {
-        this.container.addEventListener(type, listener, options);
+        this.container?.addEventListener(type, listener, options);
     };
     /**
      * @internal
      */
     removeEventListener = (type, listener, options) => {
-        this.container.removeEventListener(type, listener, options);
+        this.container?.removeEventListener(type, listener, options);
     };
     /**
      * @internal

package/lib/interaction-handlers/box-select-interaction.d.ts

@@ -33,12 +33,16 @@ export type BoxSelectInteractionCallbacks = {
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
+ * import { NVL } from '@neo4j-nvl/base'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const boxSelectInteraction = new BoxSelectInteraction(nvl)
  *
  * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
+ * ```
  */
 export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks, BoxSelectInteractionOptions> {
     private mousePosition;

package/lib/interaction-handlers/box-select-interaction.js

@@ -9,12 +9,16 @@ import { getCanvasPosition, getWorldPosition } from './utils';
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
+ * import { NVL } from '@neo4j-nvl/base'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const boxSelectInteraction = new BoxSelectInteraction(nvl)
  *
  * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
+ * ```
  */
 export class BoxSelectInteraction extends BaseInteraction {
     mousePosition;

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

@@ -81,7 +81,7 @@ export type ClickInteractionCallbacks = {
  * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
  * import { NVL } from '@neo4j-nvl/base'
  *
- * const nvl = new NVL(nodes, relationships, options)
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const clickInteraction = new ClickInteraction(nvl)
  * clickInteraction.updateCallback('onNodeClick', (node) => {
  *   console.log('Node clicked', node)

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

@@ -9,7 +9,7 @@ import { isDraggingMovement } from './utils';
  * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
  * import { NVL } from '@neo4j-nvl/base'
  *
- * const nvl = new NVL(nodes, relationships, options)
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const clickInteraction = new ClickInteraction(nvl)
  * clickInteraction.updateCallback('onNodeClick', (node) => {
  *   console.log('Node clicked', node)

package/lib/interaction-handlers/drag-node-interaction.d.ts

@@ -30,7 +30,10 @@ export type DragNodeInteractionCallbacks = {
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const dragNodeInteraction = new DragNodeInteraction(nvl)
  *
  * dragNodeInteraction.updateCallback('onDrag', (nodes) => {

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

@@ -8,7 +8,10 @@ import { isDraggingMovement } from './utils';
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const dragNodeInteraction = new DragNodeInteraction(nvl)
  *
  * dragNodeInteraction.updateCallback('onDrag', (nodes) => {

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

@@ -29,7 +29,12 @@ export declare class DrawInteraction extends BaseInteraction<DrawInteractionCall
     private newTempSelfReferredRelationship;
     private newTargetNodeToAdd;
     private newRelationshipToAdd;
+    private mouseOutsideOfNvlArea;
     constructor(nvl: NVL, options?: DrawInteractionOptions);
+    private cancelDrawing;
+    private handleMouseUpGlobal;
+    private handleMouseLeaveNvl;
+    private handleMouseEnterNvl;
     private handleMouseMove;
     private setNewRegularRelationship;
     private setNewRegularRelationshipToNewTempTargetNode;

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

@@ -27,6 +27,7 @@ export class DrawInteraction extends BaseInteraction {
     newTempSelfReferredRelationship;
     newTargetNodeToAdd;
     newRelationshipToAdd;
+    mouseOutsideOfNvlArea;
     constructor(nvl, options = {}) {
         super(nvl, options);
         this.isMoved = false;
@@ -36,7 +37,37 @@ export class DrawInteraction extends BaseInteraction {
         this.addEventListener('mousemove', this.handleMouseMove, true);
         this.addEventListener('mousedown', this.handleMouseDown, true);
         this.addEventListener('mouseup', this.handleMouseUp, true);
+        this.containerInstance?.addEventListener('mouseleave', this.handleMouseLeaveNvl);
+        this.containerInstance?.addEventListener('mouseenter', this.handleMouseEnterNvl);
+        document.addEventListener('mouseup', this.handleMouseUpGlobal, true);
     }
+    cancelDrawing = () => {
+        this.nvlInstance.removeRelationshipsWithIds([
+            this.newTempRegularRelationshipToNewTempTargetNode?.id,
+            this.newTempRegularRelationshipToExistingNode?.id,
+            this.newTempSelfReferredRelationship?.id
+        ].filter((id) => Boolean(id)));
+        this.nvlInstance.removeNodesWithIds(this.newTempTargetNode?.id ? [this.newTempTargetNode?.id] : []);
+        this.newTempTargetNode = null;
+        this.newTempRegularRelationshipToNewTempTargetNode = null;
+        this.newTempRegularRelationshipToExistingNode = null;
+        this.newTempSelfReferredRelationship = null;
+        this.isMoved = false;
+        this.isDrawing = false;
+        this.isDraggingNode = false;
+    };
+    handleMouseUpGlobal = (event) => {
+        // If mouse up outside of nvl area while drawing, cancel drawing.
+        if (this.isDrawing && this.mouseOutsideOfNvlArea) {
+            this.cancelDrawing();
+        }
+    };
+    handleMouseLeaveNvl = () => {
+        this.mouseOutsideOfNvlArea = true;
+    };
+    handleMouseEnterNvl = () => {
+        this.mouseOutsideOfNvlArea = false;
+    };
     handleMouseMove = (event) => {
         this.isMoved = true;
         if (this.isDrawing) {
@@ -174,11 +205,19 @@ export class DrawInteraction extends BaseInteraction {
         const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
         const hitNodes = hits.nvlTargets.nodes.filter((node) => node.insideNode);
         const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
-        if (hitNodes.length > 0) {
+        const startDragging = hitNodes.length > 0;
+        const startDrawing = hitNodeEdges.length > 0;
+        if (startDragging || startDrawing) {
+            // Prevent default behavior to avoid interactions with other elements outside of nvl, like text selection,
+            // but still assign focus to nvl container on click
+            event.preventDefault();
+            this.containerInstance?.focus();
+        }
+        if (startDragging) {
             this.isDraggingNode = true;
             this.isDrawing = false;
         }
-        else if (hitNodeEdges.length > 0) {
+        else if (startDrawing) {
             this.isDrawing = true;
             this.isDraggingNode = false;
             this.mouseDownNode = hitNodeEdges[0];
@@ -237,5 +276,8 @@ export class DrawInteraction extends BaseInteraction {
         this.removeEventListener('mousemove', this.handleMouseMove, true);
         this.removeEventListener('mousedown', this.handleMouseDown, true);
         this.removeEventListener('mouseup', this.handleMouseUp, true);
+        this.containerInstance?.removeEventListener('mouseleave', this.handleMouseLeaveNvl);
+        this.containerInstance?.removeEventListener('mouseenter', this.handleMouseEnterNvl);
+        document.removeEventListener('mouseup', this.handleMouseUpGlobal, true);
     };
 }

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

@@ -28,8 +28,11 @@ export type HoverInteractionCallbacks = {
  * Interaction handler for hovering nodes and relationships.
  *
  * @example
- * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * ```ts
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const hoverInteraction = new HoverInteraction(nvl)
  *
  * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {

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

@@ -3,8 +3,11 @@ import { BaseInteraction } from './base';
  * Interaction handler for hovering nodes and relationships.
  *
  * @example
- * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * ```ts
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const hoverInteraction = new HoverInteraction(nvl)
  *
  * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
@@ -33,7 +36,7 @@ export class HoverInteraction extends BaseInteraction {
     handleHover = (event) => {
         const { nvlTargets } = this.nvlInstance.getHits(event);
         const { nodes = [], relationships = [] } = nvlTargets;
-        const mainTarget = nodes[0] !== undefined ? nodes[0] : relationships[0];
+        const mainTarget = nodes[0] ?? relationships[0];
         const hoveredElement = mainTarget?.data;
         if (this.currentElementNeedsUnHover(hoveredElement?.id)) {
             this.unHoverCurrentElement();

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

@@ -32,13 +32,17 @@ export type LassoInteractionCallbacks = {
  * area will be selected.
  *
  * @example
- * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * ```ts
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const lassoInteraction = new LassoInteraction(nvl)
  *
  * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
+ * ```
  */
 export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks, LassoInteractionOptions> {
     private active;

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

@@ -10,13 +10,17 @@ const shapeShowTime = 500;
  * area will be selected.
  *
  * @example
- * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * ```ts
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const lassoInteraction = new LassoInteraction(nvl)
  *
  * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
  *  console.log('Selected elements:', nodes, rels)
  * })
+ * ```
  */
 export class LassoInteraction extends BaseInteraction {
     active;

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

@@ -30,12 +30,16 @@ export type PanInteractionCallbacks = {
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const panInteraction = new PanInteraction(nvl)
  *
  * panInteraction.updateCallback('onPan', (panning) => {
  *   console.log('Panning:', panning)
  * })
+ * ```
  */
 export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks, PanInteractionOptions> {
     private mousePosition;
@@ -54,6 +58,12 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallba
      *
      * @example
      * ```js
+     * import { NVL } from '@neo4j-nvl/base'
+     * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+     *
+     * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
+     * const panInteraction = new PanInteraction(nvl)
+     *
      * // Pan canvas even when dragging on nodes and relationships
      * panInteraction.updateTargets([], true)
      * ```

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

@@ -7,12 +7,16 @@ import { BaseInteraction } from './base';
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const panInteraction = new PanInteraction(nvl)
  *
  * panInteraction.updateCallback('onPan', (panning) => {
  *   console.log('Panning:', panning)
  * })
+ * ```
  */
 export class PanInteraction extends BaseInteraction {
     mousePosition;
@@ -39,6 +43,12 @@ export class PanInteraction extends BaseInteraction {
      *
      * @example
      * ```js
+     * import { NVL } from '@neo4j-nvl/base'
+     * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+     *
+     * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
+     * const panInteraction = new PanInteraction(nvl)
+     *
      * // Pan canvas even when dragging on nodes and relationships
      * panInteraction.updateTargets([], true)
      * ```

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

@@ -17,7 +17,10 @@ export type ZoomInteractionCallbacks = {
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const zoomInteraction = new ZoomInteraction(nvl)
  *
  * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {

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

@@ -7,7 +7,10 @@ import { getCanvasCenterOffset } from './utils';
  *
  * @example
  * ```js
- * const nvl = new NVL(container, nodes, relationships)
+ * import { NVL } from '@neo4j-nvl/base'
+ * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
+ *
+ * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
  * const zoomInteraction = new ZoomInteraction(nvl)
  *
  * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {

package/lib/overlay-renderer/overlay-renderer.js

@@ -18,15 +18,15 @@ export class OverlayRenderer {
         canvas.style.right = '0';
         // These are needed for touchpad zoom on Edge
         canvas.style.touchAction = 'none';
-        canvasParent.appendChild(canvas);
+        canvasParent?.appendChild(canvas);
         const context = canvas.getContext('2d');
         this.ctx = context;
         this.canvas = canvas;
         const handleResize = () => {
             this.fixCanvasSize(canvas);
         };
-        canvasParent.addEventListener('resize', handleResize);
-        this.removeResizeListener = () => canvasParent.removeEventListener('resize', handleResize);
+        canvasParent?.addEventListener('resize', handleResize);
+        this.removeResizeListener = () => canvasParent?.removeEventListener('resize', handleResize);
         this.fixCanvasSize(canvas);
     }
     fixCanvasSize(canvas) {

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.1",
+  "version": "0.3.2-e0e72a58",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
+  "homepage": "https://neo4j.com/docs/nvl/current/",
+  "description": "Interaction handlers for the Neo4j Visualization Library",
+  "keywords": [
+    "neo4j",
+    "visualization",
+    "graph"
+  ],
+  "bugs": {
+    "url": "https://community.neo4j.com/c/neo4j-graph-platform/neo4j-bloom"
+  },
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -10,9 +20,11 @@
   ],
   "scripts": {
     "build": "tsc",
+    "watch": "tsc -w",
     "test": "jest",
     "prepack": "cp ../../LICENSE.txt ./",
-    "postpack": "rm LICENSE.txt"
+    "postpack": "rm LICENSE.txt",
+    "eslint": "eslint ./src/"
   },
   "typedoc": {
     "entryPoint": "./src/index.ts",
@@ -21,7 +33,7 @@
     "tsconfig": "./tsconfig.json"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "^0.3.1",
+    "@neo4j-nvl/base": "^0.3.2-e0e72a58",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },
@@ -30,11 +42,14 @@
     "@testing-library/react": "^13.4.0",
     "@types/concaveman": "1.1.6",
     "@types/lodash": "4.14.202",
+    "eslint": "8.38.0",
     "jest": "^29.7.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
+    "eslint": "*",
     "jest": "*",
     "typescript": "*"
-  }
+  },
+  "stableVersion": "0.3.2"
 }