@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

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

@@ -1,505 +0,0 @@
-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', renderer: 'webgl' });
-        clickInteraction = new ClickInteraction(myNVL, { selectOnClick: true });
-    });
-    afterEach(() => {
-        clickInteraction.destroy();
-        myNVL.destroy();
-        callbackMock.mockReset();
-        jest.restoreAllMocks();
-    });
-    describe('clicks on empty canvas', () => {
-        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('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('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();
-            });
-        });
-    });
-    describe('clicks on nodes', () => {
-        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 }
-                        }
-                    ],
-                    clusters: []
-                }, 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 }
-                        }
-                    ],
-                    clusters: []
-                }, 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 }
-                        }
-                    ],
-                    clusters: []
-                }, mouseEvent);
-                expect(callbackMock).toHaveBeenCalledTimes(1);
-                expect(myNVL.getSelectedNodes()).toEqual([{ id: '0', selected: true, x: 100, y: 100 }]);
-                resolve();
-            });
-        });
-        test('clicking an already selected node should de-select it', () => {
-            clickInteraction.updateCallback('onNodeClick', callbackMock);
-            myNVL.updateElementsInGraph([{ id: '0', selected: true }], []);
-            expect(myNVL.getSelectedNodes().map((node) => node.id)).toEqual(['0']);
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 100 }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('click', { clientX: 100, clientY: 100 }));
-            expect(myNVL.getSelectedNodes()).toHaveLength(0);
-        });
-        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 }
-                        }
-                    ],
-                    clusters: []
-                }, mouseEvent);
-                expect(callbackMock).toHaveBeenCalledTimes(1);
-                resolve();
-            });
-        });
-    });
-    describe('clicks on relationships', () => {
-        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 }
-                        }
-                    ],
-                    clusters: []
-                }, mouseEvent);
-                expect(callbackMock).toHaveBeenCalledTimes(1);
-                resolve();
-            });
-        });
-        test('clicking an already selected relationship should de-select it', () => {
-            clickInteraction.updateCallback('onRelationshipClick', callbackMock);
-            myNVL.updateElementsInGraph([], [{ id: '10', from: '0', to: '1', selected: true }]);
-            expect(myNVL.getSelectedRelationships().map((relationship) => relationship.id)).toEqual(['10']);
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', { clientX: 150, clientY: 150 }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('click', { clientX: 150, clientY: 150 }));
-            expect(myNVL.getSelectedRelationships()).toHaveLength(0);
-        });
-        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 }
-                        }
-                    ],
-                    clusters: []
-                }, mouseEvent);
-                expect(callbackMock).toHaveBeenCalledTimes(1);
-                resolve();
-            });
-        });
-    });
-    describe('clicks on cluster hulls', () => {
-        test('clicking a cluster hull should trigger onClusterClick and select member nodes', () => {
-            clickInteraction.updateCallback('onClusterClick', callbackMock);
-            const cluster = { id: 'group-a', nodeIds: ['0', '1'] };
-            const nvlTargets = {
-                nodes: [],
-                relationships: [],
-                clusters: [
-                    {
-                        data: cluster,
-                        pointerCoordinates: { x: 50, y: 50 },
-                        hull: [
-                            { x: 0, y: 0 },
-                            { x: 100, y: 0 },
-                            { x: 100, y: 100 },
-                            { x: 0, y: 100 }
-                        ]
-                    }
-                ]
-            };
-            jest.spyOn(myNVL, 'getHits').mockImplementation((event) => Object.assign(event, { nvlTargets }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', {
-                clientX: 50,
-                clientY: 50
-            }));
-            const mouseEvent = new MouseEvent('click', {
-                clientX: 50,
-                clientY: 50
-            });
-            myNVL.getContainer().dispatchEvent(mouseEvent);
-            expect(callbackMock).toHaveBeenCalledWith(cluster, nvlTargets, mouseEvent);
-            expect(myNVL
-                .getSelectedNodes()
-                .map((n) => n.id)
-                .sort()).toEqual(['0', '1']);
-        });
-        test('clicking a cluster hull whose members are all selected should de-select them', () => {
-            clickInteraction.updateCallback('onClusterClick', callbackMock);
-            const cluster = { id: 'group-a', nodeIds: ['0', '1'] };
-            const nvlTargets = {
-                nodes: [],
-                relationships: [],
-                clusters: [
-                    {
-                        data: cluster,
-                        pointerCoordinates: { x: 50, y: 50 },
-                        hull: [
-                            { x: 0, y: 0 },
-                            { x: 100, y: 0 },
-                            { x: 100, y: 100 },
-                            { x: 0, y: 100 }
-                        ]
-                    }
-                ]
-            };
-            jest.spyOn(myNVL, 'getHits').mockImplementation((event) => Object.assign(event, { nvlTargets }));
-            myNVL.updateElementsInGraph([
-                { id: '0', selected: true },
-                { id: '1', selected: true }
-            ], []);
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', { clientX: 50, clientY: 50 }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 50 }));
-            expect(myNVL.getSelectedNodes()).toHaveLength(0);
-        });
-        test('clicking a cluster hull with only some members selected should select all of them', () => {
-            clickInteraction.updateCallback('onClusterClick', callbackMock);
-            const cluster = { id: 'group-a', nodeIds: ['0', '1'] };
-            const nvlTargets = {
-                nodes: [],
-                relationships: [],
-                clusters: [
-                    {
-                        data: cluster,
-                        pointerCoordinates: { x: 50, y: 50 },
-                        hull: [
-                            { x: 0, y: 0 },
-                            { x: 100, y: 0 },
-                            { x: 100, y: 100 },
-                            { x: 0, y: 100 }
-                        ]
-                    }
-                ]
-            };
-            jest.spyOn(myNVL, 'getHits').mockImplementation((event) => Object.assign(event, { nvlTargets }));
-            myNVL.updateElementsInGraph([{ id: '0', selected: true }], []);
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', { clientX: 50, clientY: 50 }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 50 }));
-            expect(myNVL
-                .getSelectedNodes()
-                .map((node) => node.id)
-                .sort()).toEqual(['0', '1']);
-        });
-        test.each([
-            ['onClusterDoubleClick', 'dblclick'],
-            ['onClusterRightClick', 'contextmenu']
-        ])('%s is triggered for a cluster hull', (callbackName, eventName) => {
-            clickInteraction.updateCallback(callbackName, callbackMock);
-            const cluster = { id: 'group-a', nodeIds: ['0', '1'] };
-            const nvlTargets = {
-                nodes: [],
-                relationships: [],
-                clusters: [
-                    {
-                        data: cluster,
-                        pointerCoordinates: { x: 50, y: 50 },
-                        hull: [
-                            { x: 0, y: 0 },
-                            { x: 100, y: 0 },
-                            { x: 100, y: 100 },
-                            { x: 0, y: 100 }
-                        ]
-                    }
-                ]
-            };
-            jest.spyOn(myNVL, 'getHits').mockImplementation((event) => Object.assign(event, { nvlTargets }));
-            const mouseEvent = new MouseEvent(eventName, { clientX: 50, clientY: 50 });
-            myNVL.getContainer().dispatchEvent(mouseEvent);
-            expect(callbackMock).toHaveBeenCalledWith(cluster, nvlTargets, mouseEvent);
-        });
-        test('node hits take priority over cluster hits', () => {
-            clickInteraction.updateCallback('onNodeClick', callbackMock);
-            clickInteraction.updateCallback('onClusterClick', jest.fn());
-            const clusterCallback = jest.fn();
-            clickInteraction.updateCallback('onClusterClick', clusterCallback);
-            jest.spyOn(myNVL, 'getHits').mockImplementation((event) => Object.assign(event, {
-                nvlTargets: {
-                    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: [],
-                    clusters: [
-                        {
-                            data: { id: 'group-a', nodeIds: ['0', '1'] },
-                            pointerCoordinates: { x: 100, y: 100 },
-                            hull: [
-                                { x: 0, y: 0 },
-                                { x: 200, y: 0 },
-                                { x: 200, y: 200 },
-                                { x: 0, y: 200 }
-                            ]
-                        }
-                    ]
-                }
-            }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 100 }));
-            myNVL.getContainer().dispatchEvent(new MouseEvent('click', { clientX: 100, clientY: 100 }));
-            expect(callbackMock).toHaveBeenCalledTimes(1);
-            expect(clusterCallback).not.toHaveBeenCalled();
-        });
-    });
-});

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

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