@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

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

@@ -1,223 +0,0 @@
-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;
-    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', async () => {
-        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);
-        await waitForAnimationFrame();
-        container.dispatchEvent(mouseMoveEvent);
-        await waitForAnimationFrame();
-        container.dispatchEvent(mouseUpEvent);
-        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);
-        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('');
-    });
-    test('when controlledPan is true, should not update NVL instance', () => {
-        panInteraction.destroy();
-        myNVL.destroy();
-        myNVL = new NVL(document.createElement('div'), [
-            { id: '0', x: 10, y: 10 },
-            { id: '1', x: 200, y: 200 }
-        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-        const panInteractionNoUpdate = new PanInteraction(myNVL, { controlledPan: true });
-        panInteractionNoUpdate.updateCallback('onPan', panCallbackMock);
-        const initialPan = myNVL.getPan();
-        const mouseDownEvent = new MouseEvent('mousedown', {
-            clientX: 100,
-            clientY: 100
-        });
-        const mouseMoveEvent = new MouseEvent('mousemove', {
-            buttons: 1,
-            clientX: 120,
-            clientY: 120
-        });
-        const mouseUpEvent = new MouseEvent('mouseup', {
-            clientX: 120,
-            clientY: 120
-        });
-        const container = myNVL.getContainer();
-        container.dispatchEvent(mouseDownEvent);
-        container.dispatchEvent(mouseMoveEvent);
-        container.dispatchEvent(mouseUpEvent);
-        return new Promise((resolve) => {
-            expect(myNVL.getPan()).toEqual(initialPan);
-            expect(panCallbackMock).toHaveBeenCalledTimes(1);
-            expect(panCallbackMock).toHaveBeenCalledWith({
-                x: initialPan.x - 20,
-                y: initialPan.y - 20
-            }, mouseMoveEvent);
-            panInteractionNoUpdate.destroy();
-            resolve();
-        });
-    });
-    test('when controlledPan is false, should update NVL instance normally', async () => {
-        panInteraction.destroy();
-        myNVL.destroy();
-        myNVL = new NVL(document.createElement('div'), [
-            { id: '0', x: 10, y: 10 },
-            { id: '1', x: 200, y: 200 }
-        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-        const panInteractionWithUpdate = new PanInteraction(myNVL, { controlledPan: false });
-        panInteractionWithUpdate.updateCallback('onPan', panCallbackMock);
-        const initialPan = myNVL.getPan();
-        const mouseDownEvent = new MouseEvent('mousedown', {
-            clientX: 100,
-            clientY: 100
-        });
-        const mouseMoveEvent = new MouseEvent('mousemove', {
-            buttons: 1,
-            clientX: 120,
-            clientY: 120
-        });
-        const mouseUpEvent = new MouseEvent('mouseup');
-        const container = myNVL.getContainer();
-        container.dispatchEvent(mouseDownEvent);
-        await waitForAnimationFrame();
-        container.dispatchEvent(mouseMoveEvent);
-        await waitForAnimationFrame();
-        container.dispatchEvent(mouseUpEvent);
-        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();
-        myNVL.destroy();
-        myNVL = new NVL(document.createElement('div'), [
-            { id: '0', x: 10, y: 10 },
-            { id: '1', x: 200, y: 200 }
-        ], [{ id: '10', from: '0', to: '1' }], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-        const panInteractionNoUpdate = new PanInteraction(myNVL, { controlledPan: true });
-        panInteractionNoUpdate.updateCallback('onPan', panCallbackMock);
-        const initialPan = myNVL.getPan();
-        const container = myNVL.getContainer();
-        container.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 100 }));
-        container.dispatchEvent(new MouseEvent('mousemove', { buttons: 1, clientX: 120, clientY: 120 }));
-        container.dispatchEvent(new MouseEvent('mouseup'));
-        container.dispatchEvent(new MouseEvent('mousedown', { clientX: 120, clientY: 120 }));
-        container.dispatchEvent(new MouseEvent('mousemove', { buttons: 1, clientX: 140, clientY: 140 }));
-        container.dispatchEvent(new MouseEvent('mouseup'));
-        return new Promise((resolve) => {
-            expect(panCallbackMock).toHaveBeenCalledTimes(2);
-            expect(panCallbackMock).toHaveBeenNthCalledWith(1, {
-                x: initialPan.x - 20,
-                y: initialPan.y - 20
-            }, expect.anything());
-            expect(panCallbackMock).toHaveBeenNthCalledWith(2, {
-                x: initialPan.x - 20,
-                y: initialPan.y - 20
-            }, expect.anything());
-            expect(myNVL.getPan()).toEqual(initialPan);
-            panInteractionNoUpdate.destroy();
-            resolve();
-        });
-    });
-});

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

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

package/lib/__tests__/utils.test.js

@@ -1,19 +0,0 @@
-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/__tests__/zoom-interaction.test.d.ts

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

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

@@ -1,185 +0,0 @@
-import NVL from '@neo4j-nvl/base';
-import '@testing-library/jest-dom';
-import { ZoomInteraction } from '../interaction-handlers/zoom-interaction';
-jest.mock('@neo4j-nvl/layout-workers');
-describe('ZoomInteraction', () => {
-    let zoomInteraction;
-    let myNVL;
-    let myNvlContainer;
-    const zoomAndPanCallbackMock = jest.fn();
-    beforeEach(() => {
-        myNVL = new NVL(document.createElement('div'), [], [], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-        myNvlContainer = myNVL.getContainer();
-        zoomInteraction = new ZoomInteraction(myNVL);
-    });
-    afterEach(() => {
-        zoomInteraction.destroy();
-        myNVL.destroy();
-        zoomAndPanCallbackMock.mockReset();
-    });
-    const simulateWheelEvent = async (container, deltaY, delay = 50, eventOptions = {}) => {
-        const wheelEvent = new WheelEvent('wheel', {
-            deltaY,
-            clientX: 150,
-            clientY: 150,
-            ...eventOptions
-        });
-        container.dispatchEvent(wheelEvent);
-        await new Promise((resolve) => setTimeout(resolve, delay));
-        return wheelEvent;
-    };
-    const simulateSequentialWheelEvents = async (container, events) => {
-        for (const event of events) {
-            // eslint-disable-next-line no-await-in-loop
-            await simulateWheelEvent(container, event.deltaY, event.delay);
-        }
-    };
-    describe('Scrolling', () => {
-        test('zooming in should increase the scale', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const initialScale = myNVL.getScale();
-            const container = myNVL.getContainer();
-            await simulateWheelEvent(container, -100);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBeGreaterThan(initialScale);
-            expect(newScale).toBe(1.2);
-        });
-        test('zooming out should decrease the scale', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const initialScale = myNVL.getScale();
-            await simulateWheelEvent(myNvlContainer, 100);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBeLessThan(initialScale);
-            expect(newScale).toBe(0.8);
-        });
-        test('zoom callback should be called with the correct zoom level and pan values', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const wheelEvent = await simulateWheelEvent(myNvlContainer, -100);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const zoomAndPanCallbackMockArguments = zoomAndPanCallbackMock.mock.calls[0] ?? [];
-            expect(zoomAndPanCallbackMockArguments[0]).toBe(1.2);
-            expect(zoomAndPanCallbackMockArguments[1]).toBe(25);
-            expect(zoomAndPanCallbackMockArguments[2]).toBe(25);
-            expect(zoomAndPanCallbackMockArguments[3]).toBe(wheelEvent);
-        });
-        test('zooming should adjust pan to mouse position', async () => {
-            const initialPan = myNVL.getPan();
-            const initialScale = myNVL.getScale();
-            await simulateWheelEvent(myNvlContainer, -100);
-            const newPan = myNVL.getPan();
-            const newScale = myNVL.getScale();
-            expect(newPan).not.toEqual(initialPan);
-            expect(newPan.x).toBe(25);
-            expect(newPan.y).toBe(25);
-            expect(newScale).toBeGreaterThan(initialScale);
-            expect(newScale).toBe(1.2);
-        });
-        test('zooming should be progressively faster at higher zoom levels', async () => {
-            const sequentialWheelEvents = Array(8).fill({ deltaY: -100 });
-            await simulateSequentialWheelEvents(myNvlContainer, sequentialWheelEvents);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBeGreaterThan(3.0);
-            expect(newScale).toBeCloseTo(4.299);
-        });
-        test('handles touchpad-like small incremental scrolling', async () => {
-            const initialScale = myNVL.getScale();
-            const touchpadEvents = Array(25).fill({ deltaY: -20, delay: 25 });
-            await simulateSequentialWheelEvents(myNvlContainer, touchpadEvents);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBeGreaterThan(initialScale);
-            expect(newScale).toBeGreaterThan(2.5);
-            expect(newScale).toBeLessThan(2.7);
-        });
-    });
-    describe('Trackpad pinch gestures', () => {
-        test('trackpad pinch out should zoom in', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            await simulateWheelEvent(myNvlContainer, -75, 50, { ctrlKey: true });
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBe(2);
-        });
-        test('trackpad pinch in should zoom out', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            await simulateWheelEvent(myNvlContainer, 100, 50, { ctrlKey: true });
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBe(0.075);
-        });
-        test('trackpad pinch should work with meta key (macOS)', async () => {
-            zoomInteraction.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const initialScale = myNVL.getScale();
-            await simulateWheelEvent(myNvlContainer, -50, 50, { metaKey: true });
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const newScale = myNVL.getScale();
-            expect(newScale).toBeGreaterThan(initialScale);
-        });
-        test('trackpad pinch should adjust pan to cursor position', async () => {
-            const initialPan = myNVL.getPan();
-            const initialScale = myNVL.getScale();
-            await simulateWheelEvent(myNvlContainer, -50, 50, {
-                ctrlKey: true,
-                clientX: 200,
-                clientY: 100
-            });
-            const newPan = myNVL.getPan();
-            const newScale = myNVL.getScale();
-            expect(newPan).not.toEqual(initialPan);
-            expect(newScale).toBeGreaterThan(initialScale);
-        });
-    });
-    describe('Controlled Zoom', () => {
-        test('when controlledZoom is true, should not update NVL instance', async () => {
-            zoomInteraction.destroy();
-            myNVL.destroy();
-            myNVL = new NVL(document.createElement('div'), [], [], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-            myNvlContainer = myNVL.getContainer();
-            const zoomInteractionNoUpdate = new ZoomInteraction(myNVL, { controlledZoom: true });
-            zoomInteractionNoUpdate.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const initialScale = myNVL.getScale();
-            const initialPan = myNVL.getPan();
-            await simulateWheelEvent(myNvlContainer, -100);
-            expect(myNVL.getScale()).toBe(initialScale);
-            expect(myNVL.getPan()).toEqual(initialPan);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            const [newZoom, newPanX, newPanY, event] = zoomAndPanCallbackMock.mock.calls[0] ?? [];
-            expect(newZoom).toBe(1.2);
-            expect(newPanX).toBe(25);
-            expect(newPanY).toBe(25);
-            expect(event).toBeInstanceOf(WheelEvent);
-            zoomInteractionNoUpdate.destroy();
-        });
-        test('when controlledZoom is false, should update NVL instance normally', async () => {
-            zoomInteraction.destroy();
-            myNVL.destroy();
-            myNVL = new NVL(document.createElement('div'), [], [], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-            myNvlContainer = myNVL.getContainer();
-            const zoomInteractionWithUpdate = new ZoomInteraction(myNVL, { controlledZoom: false });
-            zoomInteractionWithUpdate.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            const initialScale = myNVL.getScale();
-            await simulateWheelEvent(myNvlContainer, -100);
-            expect(myNVL.getScale()).not.toBe(initialScale);
-            expect(myNVL.getScale()).toBe(1.2);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(1);
-            zoomInteractionWithUpdate.destroy();
-        });
-        test('when controlledZoom is true, should provide correct callback values for multiple operations', async () => {
-            zoomInteraction.destroy();
-            myNVL.destroy();
-            myNVL = new NVL(document.createElement('div'), [], [], { disableWebGL: true, initialZoom: 1, layout: 'free' });
-            myNvlContainer = myNVL.getContainer();
-            const zoomInteractionNoUpdate = new ZoomInteraction(myNVL, { controlledZoom: true });
-            zoomInteractionNoUpdate.updateCallback('onZoomAndPan', zoomAndPanCallbackMock);
-            await simulateWheelEvent(myNvlContainer, -100);
-            await simulateWheelEvent(myNvlContainer, 100);
-            expect(zoomAndPanCallbackMock).toHaveBeenCalledTimes(2);
-            const [zoom1] = zoomAndPanCallbackMock.mock.calls[0] ?? [];
-            expect(zoom1).toBe(1.2);
-            const [zoom2] = zoomAndPanCallbackMock.mock.calls[1] ?? [];
-            expect(zoom2).toBe(0.8);
-            zoomInteractionNoUpdate.destroy();
-        });
-    });
-});