@neo4j-nvl/interaction-handlers 0.2.53 → 0.2.55

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

@@ -19,6 +19,9 @@ const shapeShowTime = 500;
  * })
  */
 export class LassoInteraction extends BaseInteraction {
+    active;
+    points;
+    overlayRenderer;
     /**
      * Creates a new instance of the lasso interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -26,141 +29,103 @@ export class LassoInteraction extends BaseInteraction {
      */
     constructor(nvl, options = { selectOnRelease: false }) {
         super(nvl, options);
-        Object.defineProperty(this, "active", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "points", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "overlayRenderer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "startLasso", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.active = true;
-                this.points = [getCanvasPosition(this.containerInstance, event)];
-                this.callCallbackIfRegistered('onLassoStarted', event);
+        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+        this.active = false;
+        this.addEventListener('mousedown', this.handleMouseDown, true);
+        this.addEventListener('mousemove', this.handleDrag, true);
+        this.addEventListener('mouseup', this.handleMouseUp, true);
+        this.addEventListener('mouseleave', this.endLasso, true);
+    }
+    startLasso = (event) => {
+        this.active = true;
+        this.points = [getCanvasPosition(this.containerInstance, event)];
+        this.callCallbackIfRegistered('onLassoStarted', event);
+    };
+    handleMouseDown = (event) => {
+        if (event.button === 0 && !this.active) {
+            this.startLasso(event);
+        }
+    };
+    handleDrag = (event) => {
+        if (this.active) {
+            const lastPoint = this.points[this.points.length - 1];
+            if (lastPoint === undefined) {
+                return;
             }
-        });
-        Object.defineProperty(this, "handleMouseDown", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                if (event.button === 0 && !this.active) {
-                    this.startLasso(event);
-                }
+            const pos = getCanvasPosition(this.containerInstance, event);
+            const dx = Math.abs(lastPoint.x - pos.x);
+            const dy = Math.abs(lastPoint.y - pos.y);
+            if (dx > pointDist || dy > pointDist) {
+                this.points.push(pos);
+                this.overlayRenderer.drawLasso(this.points, true, false);
             }
-        });
-        Object.defineProperty(this, "handleDrag", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                if (this.active) {
-                    const lastPoint = this.points[this.points.length - 1];
-                    const pos = getCanvasPosition(this.containerInstance, event);
-                    const dx = Math.abs(lastPoint.x - pos.x);
-                    const dy = Math.abs(lastPoint.y - pos.y);
-                    if (dx > pointDist || dy > pointDist) {
-                        this.points.push(pos);
-                        this.overlayRenderer.drawLasso(this.points, true, false);
-                    }
+        }
+    };
+    handleMouseUp = (event) => {
+        this.points.push(getCanvasPosition(this.containerInstance, event));
+        this.endLasso(event);
+    };
+    getLassoItems = (points) => {
+        const inside = (x, y, vs) => {
+            // ray-casting algorithm based on
+            // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
+            let isInside = false;
+            for (let i = 0, j = vs.length - 1; i < vs.length; j = i, i += 1) {
+                const vsI = vs[i];
+                const vsJ = vs[j];
+                if (vsI === undefined || vsJ === undefined) {
+                    continue;
+                }
+                const { x: xi, y: yi } = vsI;
+                const { x: xj, y: yj } = vsJ;
+                const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+                if (intersect) {
+                    isInside = !isInside;
                 }
             }
-        });
-        Object.defineProperty(this, "handleMouseUp", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.points.push(getCanvasPosition(this.containerInstance, event));
-                this.endLasso(event);
+            return isInside;
+        };
+        const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
+        const nodePositions = this.nvlInstance.getNodePositions();
+        const hitNodes = new Set();
+        for (const pos of nodePositions) {
+            if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
+                continue;
             }
-        });
-        Object.defineProperty(this, "getLassoItems", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (points) => {
-                const inside = (x, y, vs) => {
-                    // ray-casting algorithm based on
-                    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
-                    let isInside = false;
-                    for (let i = 0, j = vs.length - 1; i < vs.length; j = i, i += 1) {
-                        const { x: xi, y: yi } = vs[i];
-                        const { x: xj, y: yj } = vs[j];
-                        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-                        if (intersect) {
-                            isInside = !isInside;
-                        }
-                    }
-                    return isInside;
-                };
-                const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
-                const nodePositions = this.nvlInstance.getNodePositions();
-                const hitNodes = new Set();
-                for (const pos of nodePositions) {
-                    if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
-                        continue;
-                    }
-                    if (inside(pos.x, pos.y, worldPoints)) {
-                        hitNodes.add(pos.id);
-                    }
-                }
-                const rels = this.nvlInstance.getRelationships();
-                const hitRels = [];
-                for (const rel of rels) {
-                    if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) {
-                        hitRels.push(rel);
-                    }
-                }
-                const hitNodeArray = Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id));
-                return {
-                    nodes: hitNodeArray,
-                    rels: hitRels
-                };
+            if (inside(pos.x, pos.y, worldPoints)) {
+                hitNodes.add(pos.id);
             }
-        });
-        Object.defineProperty(this, "endLasso", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                if (!this.active) {
-                    return;
-                }
-                this.active = false;
-                const pointArrays = this.points.map((p) => [p.x, p.y]);
-                const hull = concaveman(pointArrays, 3).map((p) => ({ x: p[0], y: p[1] }));
-                this.overlayRenderer.drawLasso(hull, false, true);
-                setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
-                const hitItems = this.getLassoItems(hull);
-                if (this.currentOptions.selectOnRelease) {
-                    this.nvlInstance.updateElementsInGraph(hitItems.nodes.map((node) => ({ id: node.id, selected: true })), hitItems.rels.map((rel) => ({ id: rel.id, selected: true })));
-                }
-                this.callCallbackIfRegistered('onLassoSelect', hitItems, event);
+        }
+        const rels = this.nvlInstance.getRelationships();
+        const hitRels = [];
+        for (const rel of rels) {
+            if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) {
+                hitRels.push(rel);
             }
-        });
-        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+        }
+        const hitNodeArray = Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id));
+        return {
+            nodes: hitNodeArray,
+            rels: hitRels
+        };
+    };
+    endLasso = (event) => {
+        if (!this.active) {
+            return;
+        }
         this.active = false;
-        this.addEventListener('mousedown', this.handleMouseDown, true);
-        this.addEventListener('mousemove', this.handleDrag, true);
-        this.addEventListener('mouseup', this.handleMouseUp, true);
-        this.addEventListener('mouseleave', this.endLasso, true);
-    }
+        const pointArrays = this.points.map((p) => [p.x, p.y]);
+        const hull = concaveman(pointArrays, 3)
+            .map((p) => ({ x: p[0], y: p[1] }))
+            .filter((point) => point.x !== undefined && point.y !== undefined);
+        this.overlayRenderer.drawLasso(hull, false, true);
+        setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
+        const hitItems = this.getLassoItems(hull);
+        if (this.currentOptions.selectOnRelease === true) {
+            this.nvlInstance.updateElementsInGraph(hitItems.nodes.map((node) => ({ id: node.id, selected: true })), hitItems.rels.map((rel) => ({ id: rel.id, selected: true })));
+        }
+        this.callCallbackIfRegistered('onLassoSelect', hitItems, event);
+    };
     /**
      * Removes all related event listeners and the overlay renderer for the box.
      */

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

@@ -15,93 +15,15 @@ import { BaseInteraction } from './base';
  * })
  */
 export class PanInteraction extends BaseInteraction {
+    mousePosition;
+    targets;
+    shouldPan;
     /**
      * Creates a new instance of the pan interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
      */
     constructor(nvl, options = { excludeNodeMargin: false }) {
         super(nvl, options);
-        Object.defineProperty(this, "mousePosition", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "targets", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "shouldPan", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        /**
-         * Updates which type of graph elements should hinder panning.
-         * @param targets - The graph elements that should hinder panning
-         * @param excludeNodeMargin - If true, the node margin will not hinder panning
-         * @note By default, panning is hindered by nodes and relationships.
-         *
-         * @example
-         * ```js
-         * // Pan canvas even when dragging on nodes and relationships
-         * panInteraction.updateTargets([], true)
-         * ```
-         */
-        Object.defineProperty(this, "updateTargets", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (targets, excludeNodeMargin) => {
-                this.targets = targets;
-                this.currentOptions.excludeNodeMargin = excludeNodeMargin;
-            }
-        });
-        Object.defineProperty(this, "handleMouseDown", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), {
-                    hitNodeMarginWidth: this.currentOptions.excludeNodeMargin ? NODE_EDGE_WIDTH : 0
-                });
-                if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) {
-                    this.shouldPan = false;
-                }
-                else {
-                    this.mousePosition = { x: event.clientX, y: event.clientY };
-                    this.shouldPan = true;
-                }
-            }
-        });
-        Object.defineProperty(this, "handleMouseMove", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (evt) => {
-                if (!this.shouldPan || evt.buttons !== 1) {
-                    return;
-                }
-                const zoom = this.nvlInstance.getScale();
-                const { x, y } = this.nvlInstance.getPan();
-                const dx = ((evt.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
-                const dy = ((evt.clientY - this.mousePosition.y) / zoom) * window.devicePixelRatio;
-                this.nvlInstance.setPan(x - dx, y - dy);
-                this.callCallbackIfRegistered('onPan', { x: x - dx, y: y - dy }, evt);
-                this.mousePosition = { x: evt.clientX, y: evt.clientY };
-            }
-        });
-        Object.defineProperty(this, "handleMouseUp", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.shouldPan = false;
-            }
-        });
         this.mousePosition = { x: 0, y: 0 };
         this.targets = [];
         this.shouldPan = false;
@@ -109,6 +31,49 @@ export class PanInteraction extends BaseInteraction {
         this.addEventListener('mousemove', this.handleMouseMove, true);
         this.addEventListener('mouseup', this.handleMouseUp, true);
     }
+    /**
+     * Updates which type of graph elements should hinder panning.
+     * @param targets - The graph elements that should hinder panning
+     * @param excludeNodeMargin - If true, the node margin will not hinder panning
+     * @note By default, panning is hindered by nodes and relationships.
+     *
+     * @example
+     * ```js
+     * // Pan canvas even when dragging on nodes and relationships
+     * panInteraction.updateTargets([], true)
+     * ```
+     */
+    updateTargets = (targets, excludeNodeMargin) => {
+        this.targets = targets;
+        this.currentOptions.excludeNodeMargin = excludeNodeMargin;
+    };
+    handleMouseDown = (event) => {
+        const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), {
+            hitNodeMarginWidth: this.currentOptions.excludeNodeMargin ? NODE_EDGE_WIDTH : 0
+        });
+        if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) {
+            this.shouldPan = false;
+        }
+        else {
+            this.mousePosition = { x: event.clientX, y: event.clientY };
+            this.shouldPan = true;
+        }
+    };
+    handleMouseMove = (evt) => {
+        if (!this.shouldPan || evt.buttons !== 1) {
+            return;
+        }
+        const zoom = this.nvlInstance.getScale();
+        const { x, y } = this.nvlInstance.getPan();
+        const dx = ((evt.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
+        const dy = ((evt.clientY - this.mousePosition.y) / zoom) * window.devicePixelRatio;
+        this.nvlInstance.setPan(x - dx, y - dy);
+        this.callCallbackIfRegistered('onPan', { x: x - dx, y: y - dy }, evt);
+        this.mousePosition = { x: evt.clientX, y: evt.clientY };
+    };
+    handleMouseUp = () => {
+        this.shouldPan = false;
+    };
     /**
      * Removes the related event listeners from the canvas.
      */

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

@@ -22,53 +22,38 @@ export class ZoomInteraction extends BaseInteraction {
      */
     constructor(nvl, options = {}) {
         super(nvl, options);
-        /**
-         * Throttled zoom function to avoid events happening too fast.
-         * @param event - The original mouse wheel event
-         * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
-         * especially a lot of very small values.
-         * However, updating values in NVL instance takes time.
-         * Sometimes it lost the track of multiple events happening too soon.
-         * As a result, the zoom might lose its anchor point under touch pad.
-         * Therefore, the throttle is needed to avoid events happening too fast.
-         * @note The throttle is set to 25ms.
-         */
-        Object.defineProperty(this, "throttledZoom", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: throttle((event) => {
-                const zoom = this.nvlInstance.getScale();
-                const { x, y } = this.nvlInstance.getPan();
-                const factor = event.deltaY / 500;
-                const newZoomTarget = zoom - factor * Math.min(1, zoom);
-                const offs = getCanvasCenterOffset(this.containerInstance, event);
-                const newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
-                const newPanY = y + (offs.y / zoom - offs.y / newZoomTarget);
-                this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
-                this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
-            }, 25, { leading: true })
-        });
-        Object.defineProperty(this, "handleWheel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (evt) => {
-                evt.preventDefault();
-                this.throttledZoom(evt);
-            }
-        });
-        /**
-         * Removes the relevant event listeners from the canvas.
-         */
-        Object.defineProperty(this, "destroy", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.removeEventListener('wheel', this.handleWheel);
-            }
-        });
         this.addEventListener('wheel', this.handleWheel);
     }
+    /**
+     * Throttled zoom function to avoid events happening too fast.
+     * @param event - The original mouse wheel event
+     * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
+     * especially a lot of very small values.
+     * However, updating values in NVL instance takes time.
+     * Sometimes it lost the track of multiple events happening too soon.
+     * As a result, the zoom might lose its anchor point under touch pad.
+     * Therefore, the throttle is needed to avoid events happening too fast.
+     * @note The throttle is set to 25ms.
+     */
+    throttledZoom = throttle((event) => {
+        const zoom = this.nvlInstance.getScale();
+        const { x, y } = this.nvlInstance.getPan();
+        const factor = event.deltaY / 500;
+        const newZoomTarget = zoom - factor * Math.min(1, zoom);
+        const offs = getCanvasCenterOffset(this.containerInstance, event);
+        const newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
+        const newPanY = y + (offs.y / zoom - offs.y / newZoomTarget);
+        this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
+        this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
+    }, 25, { leading: true });
+    handleWheel = (evt) => {
+        evt.preventDefault();
+        this.throttledZoom(evt);
+    };
+    /**
+     * Removes the relevant event listeners from the canvas.
+     */
+    destroy = () => {
+        this.removeEventListener('wheel', this.handleWheel);
+    };
 }

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

@@ -1,4 +1,3 @@
-import onResize from 'resizelistener';
 const marquee = {
     frameWidth: 2,
     frameColor: '#a9a9a9',
@@ -6,27 +5,11 @@ const marquee = {
     opacity: 0.5
 };
 export class OverlayRenderer {
+    ctx;
+    canvas;
+    removeResizeListener;
     constructor(canvasParent) {
-        Object.defineProperty(this, "ctx", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "canvas", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "removeResizeListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         const canvas = document.createElement('canvas');
-        canvas.id = 'OVERLAY';
         canvas.style.position = 'absolute';
         canvas.style.top = '0';
         canvas.style.bottom = '0';
@@ -38,13 +21,18 @@ export class OverlayRenderer {
         const context = canvas.getContext('2d');
         this.ctx = context;
         this.canvas = canvas;
-        this.removeResizeListener = onResize(canvasParent, () => {
+        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;
@@ -80,14 +68,16 @@ export class OverlayRenderer {
         ctx.save();
         this.clear();
         ctx.beginPath();
-        for (let i = 0; i < points.length; i++) {
-            const { x, y } = points[i];
+        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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "concaveman": "^1.2.1",
-    "lodash": "^4.17.21",
-    "resizelistener": "^1.1.0"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/lodash": "^4.14.184"
+    "@types/concaveman": "1.1.6",
+    "@types/lodash": "4.14.202"
   }
 }