@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

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

@@ -1,113 +1,98 @@
+// src/overlay-renderer/overlay-renderer.ts
 const marquee = {
-    frameWidth: 3,
-    frameColor: '#a9a9a9',
-    color: '#e0e0e0',
-    lineDash: [10, 15],
-    opacity: 0.5
+	frameWidth: 3,
+	frameColor: "#a9a9a9",
+	color: "#e0e0e0",
+	lineDash: [10, 15],
+	opacity: .5
 };
-export class OverlayRenderer {
-    ctx;
-    canvas;
-    removeResizeListener;
-    constructor(canvasParent) {
-        const canvas = document.createElement('canvas');
-        canvas.style.position = 'absolute';
-        canvas.style.top = '0';
-        canvas.style.bottom = '0';
-        canvas.style.left = '0';
-        canvas.style.right = '0';
-        // These are needed for touchpad zoom on Edge
-        canvas.style.touchAction = 'none';
-        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);
-        this.fixCanvasSize(canvas);
-    }
-    fixCanvasSize(canvas) {
-        const parent = canvas.parentElement;
-        if (!parent) {
-            return;
-        }
-        const rect = parent.getBoundingClientRect();
-        const { width } = rect;
-        const { height } = rect;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        canvas.width = width * devicePixelRatio;
-        canvas.height = height * devicePixelRatio;
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-    }
-    drawBox(startX, startY, endX, endY) {
-        const { ctx } = this;
-        if (ctx === null) {
-            return;
-        }
-        this.clear();
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(startX, startY, endX - startX, endY - startY);
-        ctx.closePath();
-        ctx.strokeStyle = marquee.frameColor;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
-        ctx.fillStyle = marquee.color;
-        ctx.globalAlpha = marquee.opacity;
-        ctx.setLineDash(marquee.lineDash);
-        ctx.stroke();
-        ctx.fill();
-        ctx.restore();
-    }
-    drawLasso(points, stroke, fill) {
-        const { ctx } = this;
-        if (ctx === null) {
-            return;
-        }
-        ctx.save();
-        this.clear();
-        ctx.beginPath();
-        let i = 0;
-        for (const point of points) {
-            const { x, y } = point;
-            if (i === 0) {
-                ctx.moveTo(x, y);
-            }
-            else {
-                ctx.lineTo(x, y);
-            }
-            i += 1;
-        }
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        ctx.strokeStyle = marquee.frameColor;
-        ctx.setLineDash(marquee.lineDash);
-        ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
-        ctx.fillStyle = marquee.color;
-        ctx.globalAlpha = marquee.opacity;
-        if (stroke) {
-            ctx.stroke();
-        }
-        if (fill) {
-            ctx.fill();
-        }
-        ctx.restore();
-    }
-    clear() {
-        const { ctx, canvas } = this;
-        if (ctx === null) {
-            return;
-        }
-        const rect = canvas.getBoundingClientRect();
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        ctx.clearRect(0, 0, rect.width * devicePixelRatio, rect.height * devicePixelRatio);
-    }
-    destroy() {
-        const { canvas } = this;
-        this.removeResizeListener();
-        canvas.remove();
-    }
-}
+var OverlayRenderer = class {
+	ctx;
+	canvas;
+	removeResizeListener;
+	constructor(canvasParent) {
+		const canvas = document.createElement("canvas");
+		canvas.style.position = "absolute";
+		canvas.style.top = "0";
+		canvas.style.bottom = "0";
+		canvas.style.left = "0";
+		canvas.style.right = "0";
+		canvas.style.touchAction = "none";
+		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);
+		this.fixCanvasSize(canvas);
+	}
+	fixCanvasSize(canvas) {
+		const parent = canvas.parentElement;
+		if (!parent) return;
+		const rect = parent.getBoundingClientRect();
+		const { width } = rect;
+		const { height } = rect;
+		const devicePixelRatio = window.devicePixelRatio || 1;
+		canvas.width = width * devicePixelRatio;
+		canvas.height = height * devicePixelRatio;
+		canvas.style.width = `${width}px`;
+		canvas.style.height = `${height}px`;
+	}
+	drawBox(startX, startY, endX, endY) {
+		const { ctx } = this;
+		if (ctx === null) return;
+		this.clear();
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(startX, startY, endX - startX, endY - startY);
+		ctx.closePath();
+		ctx.strokeStyle = marquee.frameColor;
+		const devicePixelRatio = window.devicePixelRatio || 1;
+		ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
+		ctx.fillStyle = marquee.color;
+		ctx.globalAlpha = marquee.opacity;
+		ctx.setLineDash(marquee.lineDash);
+		ctx.stroke();
+		ctx.fill();
+		ctx.restore();
+	}
+	drawLasso(points, stroke, fill) {
+		const { ctx } = this;
+		if (ctx === null) return;
+		ctx.save();
+		this.clear();
+		ctx.beginPath();
+		let i = 0;
+		for (const point of points) {
+			const { x, y } = point;
+			if (i === 0) ctx.moveTo(x, y);
+			else ctx.lineTo(x, y);
+			i += 1;
+		}
+		const devicePixelRatio = window.devicePixelRatio || 1;
+		ctx.strokeStyle = marquee.frameColor;
+		ctx.setLineDash(marquee.lineDash);
+		ctx.lineWidth = marquee.frameWidth * devicePixelRatio;
+		ctx.fillStyle = marquee.color;
+		ctx.globalAlpha = marquee.opacity;
+		if (stroke) ctx.stroke();
+		if (fill) ctx.fill();
+		ctx.restore();
+	}
+	clear() {
+		const { ctx, canvas } = this;
+		if (ctx === null) return;
+		const rect = canvas.getBoundingClientRect();
+		const devicePixelRatio = window.devicePixelRatio || 1;
+		ctx.clearRect(0, 0, rect.width * devicePixelRatio, rect.height * devicePixelRatio);
+	}
+	destroy() {
+		const { canvas } = this;
+		this.removeResizeListener();
+		canvas.remove();
+	}
+};
+export { OverlayRenderer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -12,28 +12,41 @@
   "bugs": {
     "url": "https://community.neo4j.com/c/neo4j-graph-platform/neo4j-bloom"
   },
+  "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "LICENSE.txt",
     "lib"
   ],
+  "skills": [
+    "npm:@neo4j-nvl/base"
+  ],
   "scripts": {
-    "build": "yarn global:tsc",
-    "watch": "yarn global:tsc -w",
+    "build": "yarn global:tsc --noEmit && tsdown",
+    "watch": "tsdown --watch",
     "test": "yarn global:jest",
     "prepack": "cp ../../LICENSE.txt ./ && cp ../../CHANGELOG.md ./",
     "postpack": "rm LICENSE.txt && rm CHANGELOG.md",
     "eslint": "yarn global:eslint ./src/"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "2.0.0",
+    "@neo4j-nvl/base": "2.1.0",
     "concaveman": "1.2.1",
-    "lodash": "4.18.1"
+    "lodash-es": "4.18.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.17.0",
     "@types/concaveman": "1.1.6",
-    "@types/lodash": "4.17.21"
+    "@types/lodash-es": "4.17.12",
+    "tsdown": "0.23.1"
   }
 }

package/lib/__tests__/box-select-interaction.test.d.ts

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

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

@@ -1,149 +0,0 @@
-import NVL from '@neo4j-nvl/base';
-import '@testing-library/jest-dom';
-import { BoxSelectInteraction } from '../interaction-handlers/box-select-interaction';
-jest.mock('@neo4j-nvl/layout-workers');
-const testNodes = [
-    { id: '0', x: 25, y: 25 },
-    { 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('BoxSelectInteraction', () => {
-    let boxSelectInteraction;
-    let myNVL;
-    const startCallback = jest.fn();
-    const selectCallback = jest.fn();
-    const boxSelectCallbackMock = jest.fn();
-    beforeEach(() => {
-        myNVL = new NVL(document.createElement('div'), testNodes, testRels, {
-            disableWebGL: true,
-            initialZoom: 1,
-            layout: 'free'
-        });
-        boxSelectInteraction = new BoxSelectInteraction(myNVL);
-    });
-    afterEach(() => {
-        boxSelectInteraction.destroy();
-        myNVL.destroy();
-        startCallback.mockReset();
-        selectCallback.mockReset();
-        boxSelectCallbackMock.mockReset();
-    });
-    test('can select relationships by selecting both connected nodes', () => {
-        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        expect(myNVL.getSelectedNodes()).toHaveLength(0);
-        // Box that contains both nodes
-        const gesture = [
-            createMouseEvent('mousedown', 0, 0),
-            createMouseEvent('mousemove', 250, 250),
-            createMouseEvent('mouseup', 250, 250)
-        ];
-        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[2]);
-            resolve();
-        });
-    });
-    test('will not start when node is below pointer when dragging', () => {
-        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        expect(myNVL.getSelectedNodes()).toHaveLength(0);
-        const gesture = [
-            createMouseEvent('mousedown', 25, 25),
-            createMouseEvent('mousemove', 50, 50),
-            createMouseEvent('mousemove', 200, 200),
-            createMouseEvent('mouseup', 200, 200)
-        ];
-        const container = myNVL.getContainer();
-        gesture.forEach((e) => container.dispatchEvent(e));
-        return new Promise((resolve) => {
-            expect(startCallback).not.toHaveBeenCalled();
-            expect(selectCallback).not.toHaveBeenCalled();
-            resolve();
-        });
-    });
-    test('can start box select when only a relationship is under the pointer', () => {
-        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        const gesture = [
-            createMouseEvent('mousedown', 100, 100),
-            createMouseEvent('mousemove', 150, 100),
-            createMouseEvent('mouseup', 150, 100)
-        ];
-        const container = myNVL.getContainer();
-        gesture.forEach((e) => container.dispatchEvent(e));
-        return new Promise((resolve) => {
-            expect(startCallback).toHaveBeenCalledTimes(1);
-            expect(selectCallback).toHaveBeenCalledTimes(1);
-            resolve();
-        });
-    });
-    test('does not fire callbacks when clicking directly on a relationship without dragging', () => {
-        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        const container = myNVL.getContainer();
-        container.dispatchEvent(createMouseEvent('mousedown', 112, 112));
-        container.dispatchEvent(createMouseEvent('mouseup', 112, 112));
-        expect(startCallback).not.toHaveBeenCalled();
-        expect(selectCallback).not.toHaveBeenCalled();
-    });
-    test('box selection should disable text selection until mouse release', () => {
-        const container = myNVL.getContainer();
-        boxSelectInteraction.updateCallback('onBoxSelect', boxSelectCallbackMock);
-        const gesture = [createMouseEvent('mousedown', 0, 0), createMouseEvent('mousemove', 150, 150)];
-        gesture.forEach((e) => container.dispatchEvent(e));
-        expect(document.body.style.getPropertyValue('user-select')).toBe('none');
-        const bodyMouseUpEvent = createMouseEvent('mouseup', 150, 150);
-        document.body.dispatchEvent(bodyMouseUpEvent);
-        expect(document.body.style.getPropertyValue('user-select')).toBe('');
-    });
-    test('can automatically select nodes when selectOnRelease is true', () => {
-        boxSelectInteraction.destroy();
-        boxSelectInteraction = new BoxSelectInteraction(myNVL, { selectOnRelease: true });
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        const gesture = [
-            createMouseEvent('mousedown', 0, 0),
-            createMouseEvent('mousemove', 50, 50),
-            createMouseEvent('mouseup', 50, 50)
-        ];
-        const container = myNVL.getContainer();
-        gesture.forEach((e) => container.dispatchEvent(e));
-        return new Promise((resolve) => {
-            expect(selectCallback).toHaveBeenCalledTimes(1);
-            const selectedNodes = myNVL.getSelectedNodes();
-            expect(selectedNodes).toHaveLength(1);
-            expect(selectedNodes[0]?.id).toBe('0');
-            resolve();
-        });
-    });
-    test('box selection should work after leaving and re-entering the app area', () => {
-        const container = myNVL.getContainer();
-        boxSelectInteraction.updateCallback('onBoxStarted', startCallback);
-        boxSelectInteraction.updateCallback('onBoxSelect', selectCallback);
-        const exitGesture = [
-            createMouseEvent('mousedown', 0, 0),
-            createMouseEvent('mousemove', 50, 50),
-            createMouseEvent('mouseleave', 99, 99)
-        ];
-        exitGesture.forEach((e) => container.dispatchEvent(e));
-        const moveOutsideEvent = createMouseEvent('mousemove', 100, 100);
-        document.body.dispatchEvent(moveOutsideEvent);
-        const reEnterGesture = [createMouseEvent('mousemove', 150, 150), createMouseEvent('mouseup', 50, 50)];
-        reEnterGesture.forEach((e) => container.dispatchEvent(e));
-        return new Promise((resolve) => {
-            expect(startCallback).toHaveBeenCalledTimes(1);
-            expect(selectCallback).toHaveBeenCalledTimes(1);
-            expect(selectCallback).toHaveBeenCalledWith({
-                nodes: [testNodes[0]],
-                rels: []
-            }, reEnterGesture[1]);
-            resolve();
-        });
-    });
-});

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

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