@neo4j-nvl/interaction-handlers 0.2.11 → 0.2.13

package/lib/index.d.ts

@@ -4,9 +4,9 @@ import { DragNodeInteraction } from './interaction-handlers/drag-node-interactio
 import type { DragNodeInteractionCallbacks } from './interaction-handlers/drag-node-interaction';
 import { DrawInteraction } from './interaction-handlers/draw-interaction';
 import type { DrawInteractionCallbacks } from './interaction-handlers/draw-interaction';
-import type { HoverInteractionOptions, HoverInteractionCallbacks } from './interaction-handlers/hover-interaction';
+import type { HoverInteractionCallbacks, HoverInteractionOptions } from './interaction-handlers/hover-interaction';
 import { HoverInteraction } from './interaction-handlers/hover-interaction';
-import type { MultiSelectInteractionOptions, MultiSelectInteractionCallbacks } from './interaction-handlers/multi-select-interaction';
+import type { MultiSelectInteractionCallbacks, MultiSelectInteractionOptions } from './interaction-handlers/multi-select-interaction';
 import { MultiSelectInteraction } from './interaction-handlers/multi-select-interaction';
 import type { PanInteractionCallbacks } from './interaction-handlers/pan-interaction';
 import { PanInteraction } from './interaction-handlers/pan-interaction';

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

@@ -7,8 +7,9 @@ export type DragNodeInteractionCallbacks = {
     /**
      * Called when node(s) are dragged
      * @param nodes - The node(s) being dragged
+     * @param event - The original mouse event
      */
-    onDrag?: ((nodes: Node[]) => void) | boolean;
+    onDrag?: ((nodes: Node[], event: MouseEvent) => void) | boolean;
 };
 /**
  * Interaction handler for dragging nodes.

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

@@ -59,8 +59,8 @@ export class DragNodeInteraction extends BaseInteraction {
             value: (event) => {
                 this.mousePosition = { x: event.clientX, y: event.clientY };
                 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);
+                const hitNodes = hits.nvlTargets.nodes.filter((node) => node.insideNode);
+                const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
                 if (hitNodeEdges.length > 0) {
                     this.isDrawing = true;
                     this.mouseDownNode = null;
@@ -72,7 +72,7 @@ export class DragNodeInteraction extends BaseInteraction {
                     this.mouseDownNode = null;
                 }
                 this.selectedNodes = this.nvlInstance.getSelectedNodes();
-                if (this.mouseDownNode && this.selectedNodes.map(node => node.id).includes(this.mouseDownNode.data.id)) {
+                if (this.mouseDownNode && this.selectedNodes.map((node) => node.id).includes(this.mouseDownNode.data.id)) {
                     this.moveSelectedNodes = true;
                 }
                 else {
@@ -89,16 +89,22 @@ export class DragNodeInteraction extends BaseInteraction {
                 if (!this.mouseDownNode || event.buttons !== 1 || this.isDrawing)
                     return;
                 const zoom = this.nvlInstance.getScale();
-                const dx = (event.clientX - this.mousePosition.x) / zoom * window.devicePixelRatio;
-                const dy = (event.clientY - this.mousePosition.y) / zoom * window.devicePixelRatio;
+                const dx = ((event.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
+                const dy = ((event.clientY - this.mousePosition.y) / zoom) * window.devicePixelRatio;
                 if (this.moveSelectedNodes) {
-                    this.nvlInstance.setNodePositions(this.selectedNodes.map((node) => ({ id: node.id, x: node.x +
-                            dx, y: node.y + dy, pinned: true })), true);
-                    this.callCallbackIfRegistered('onDrag', this.selectedNodes);
+                    this.nvlInstance.setNodePositions(this.selectedNodes.map((node) => ({ id: node.id, x: node.x + dx, y: node.y + dy, pinned: true })), true);
+                    this.callCallbackIfRegistered('onDrag', this.selectedNodes, event);
                 }
                 else {
-                    this.nvlInstance.setNodePositions([{ id: this.mouseDownNode.data.id, x: this.mouseDownNode.targetCoordinates.x + dx, y: this.mouseDownNode.targetCoordinates.y + dy, pinned: true }], true);
-                    this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data]);
+                    this.nvlInstance.setNodePositions([
+                        {
+                            id: this.mouseDownNode.data.id,
+                            x: this.mouseDownNode.targetCoordinates.x + dx,
+                            y: this.mouseDownNode.targetCoordinates.y + dy,
+                            pinned: true
+                        }
+                    ], true);
+                    this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], event);
                 }
             }
         });

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

@@ -5,7 +5,7 @@ import { BaseInteraction } from './base';
  * @experimental
  */
 export type DrawInteractionCallbacks = {
-    onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null) => void) | boolean;
+    onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
 };
 /**
  * @internal

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

@@ -1,7 +1,7 @@
-import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
-import { generateUniqueId } from './utils';
 import { NODE_EDGE_WIDTH } from '../constants';
+import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
 import { BaseInteraction } from './base';
+import { generateUniqueId } from './utils';
 /**
  * @internal
  * @experimental
@@ -87,14 +87,26 @@ export class DrawInteraction extends BaseInteraction {
                     // Rename to getMousePosition in world coordinate
                     const pos = this.nvlInstance.getMousePosition(event);
                     const hits = this.nvlInstance.getHits(event, ['node']);
-                    const hitNode = hits.nvlTargets.nodes.filter(n => n.data.id !== this.newTempTargetNode.id)[0];
-                    const targetNode = hitNode ? { id: hitNode.data.id, x: hitNode.targetCoordinates.x, y: hitNode.targetCoordinates.y, size: hitNode.data.size } : undefined;
+                    const hitNode = hits.nvlTargets.nodes.filter((n) => n.data.id !== this.newTempTargetNode.id)[0];
+                    const targetNode = hitNode
+                        ? {
+                            id: hitNode.data.id,
+                            x: hitNode.targetCoordinates.x,
+                            y: hitNode.targetCoordinates.y,
+                            size: hitNode.data.size
+                        }
+                        : undefined;
                     // ArrowBundler has race-condition to update the dataset, if we remove the node with the same ID after mouse releases, the same node will be removed then be added again, which will cause the issue.
                     // So always make sure the new node id to be added to the dataset after mouse releasing is a new id.
                     const newTargetNodeId = generateUniqueId(13);
                     const newTargetNode = targetNode ? null : { id: newTargetNodeId, size: 25, selected: false, x: pos.x, y: pos.y };
                     const newRelationshipId = generateUniqueId(13);
-                    const relationship = { id: newRelationshipId, from: this.mouseDownNode.data.id, to: targetNode ? targetNode.id : newTargetNodeId, captions: [{ value: 'TEST' }] };
+                    const relationship = {
+                        id: newRelationshipId,
+                        from: this.mouseDownNode.data.id,
+                        to: targetNode ? targetNode.id : newTargetNodeId,
+                        captions: [{ value: 'TEST' }]
+                    };
                     let x = pos.x;
                     let y = pos.y;
                     let size = 25;
@@ -103,14 +115,20 @@ export class DrawInteraction extends BaseInteraction {
                         y = hitNode.targetCoordinates.y;
                         size = hitNode.data.size;
                         if (hitNode.data.id === this.mouseDownNode.data.id && !this.newTempSelfReferredRelationship) {
-                            this.nvlInstance.removeRelationshipsWithIds([(_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id, (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id]);
+                            this.nvlInstance.removeRelationshipsWithIds([
+                                (_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id,
+                                (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id
+                            ]);
                             this.newTempRegularRelationshipToNewTempTargetNode = null;
                             this.newTempRegularRelationshipToExistingNode = null;
                             this.setNewSelfReferredRelationship();
                             this.nvlInstance.addElementsToGraph([], [this.newTempSelfReferredRelationship]);
                         }
                         else if (hitNode.data.id !== this.mouseDownNode.data.id && !this.newTempRegularRelationshipToExistingNode) {
-                            this.nvlInstance.removeRelationshipsWithIds([(_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id, (_d = this.newTempRegularRelationshipToNewTempTargetNode) === null || _d === void 0 ? void 0 : _d.id]);
+                            this.nvlInstance.removeRelationshipsWithIds([
+                                (_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id,
+                                (_d = this.newTempRegularRelationshipToNewTempTargetNode) === null || _d === void 0 ? void 0 : _d.id
+                            ]);
                             this.newTempSelfReferredRelationship = null;
                             this.newTempRegularRelationshipToNewTempTargetNode = null;
                             this.setNewRegularRelationshipToExistingNode(hitNode.data.id);
@@ -118,7 +136,10 @@ export class DrawInteraction extends BaseInteraction {
                         }
                     }
                     else if (!this.newTempRegularRelationshipToNewTempTargetNode) {
-                        this.nvlInstance.removeRelationshipsWithIds([(_e = this.newTempSelfReferredRelationship) === null || _e === void 0 ? void 0 : _e.id, (_f = this.newTempRegularRelationshipToExistingNode) === null || _f === void 0 ? void 0 : _f.id]);
+                        this.nvlInstance.removeRelationshipsWithIds([
+                            (_e = this.newTempSelfReferredRelationship) === null || _e === void 0 ? void 0 : _e.id,
+                            (_f = this.newTempRegularRelationshipToExistingNode) === null || _f === void 0 ? void 0 : _f.id
+                        ]);
                         this.newTempSelfReferredRelationship = null;
                         this.newTempRegularRelationshipToExistingNode = null;
                         this.setNewRegularRelationshipToNewTempTargetNode();
@@ -133,7 +154,7 @@ export class DrawInteraction extends BaseInteraction {
                     this.newRelationshipToAdd = null;
                     this.newTargetNodeToAdd = null;
                     const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
-                    const hitNodeEdges = hits.nvlTargets.nodes.filter(node => !node.insideNode);
+                    const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
                     if (hitNodeEdges.length > 0) {
                         const node = hitNodeEdges[0];
                         const zoom = this.nvlInstance.getScale();
@@ -163,8 +184,8 @@ export class DrawInteraction extends BaseInteraction {
                 this.newRelationshipToAdd = null;
                 this.newTargetNodeToAdd = null;
                 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);
+                const hitNodes = hits.nvlTargets.nodes.filter((node) => node.insideNode);
+                const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
                 if (hitNodes.length > 0) {
                     this.isDraggingNode = true;
                     this.isDrawing = false;
@@ -174,7 +195,14 @@ export class DrawInteraction extends BaseInteraction {
                     this.isDraggingNode = false;
                     this.mouseDownNode = hitNodeEdges[0];
                     const pos = this.nvlInstance.getMousePosition(event);
-                    this.newTempTargetNode = { id: generateUniqueId(13), size: 25, selected: false, x: pos.x, y: pos.y, color: 'black' };
+                    this.newTempTargetNode = {
+                        id: generateUniqueId(13),
+                        size: 25,
+                        selected: false,
+                        x: pos.x,
+                        y: pos.y,
+                        color: 'black'
+                    };
                     this.setNewRegularRelationshipToNewTempTargetNode();
                     this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], [this.newTempRegularRelationshipToNewTempTargetNode]);
                 }
@@ -189,15 +217,19 @@ export class DrawInteraction extends BaseInteraction {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: () => {
+            value: (event) => {
                 var _a, _b, _c, _d;
-                this.nvlInstance.removeRelationshipsWithIds([(_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id, (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id, (_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id]);
+                this.nvlInstance.removeRelationshipsWithIds([
+                    (_a = this.newTempRegularRelationshipToNewTempTargetNode) === null || _a === void 0 ? void 0 : _a.id,
+                    (_b = this.newTempRegularRelationshipToExistingNode) === null || _b === void 0 ? void 0 : _b.id,
+                    (_c = this.newTempSelfReferredRelationship) === null || _c === void 0 ? void 0 : _c.id
+                ]);
                 this.nvlInstance.removeNodesWithIds([(_d = this.newTempTargetNode) === null || _d === void 0 ? void 0 : _d.id]);
                 if (this.isDrawing && this.isMoved) {
                     this.newTargetNodeToAdd && this.nvlInstance.setNodePositions([this.newTargetNodeToAdd]);
                     // Avoid relationship glitch
                     this.nvlInstance.addAndUpdateElementsInGraph(this.newTargetNodeToAdd ? [{ id: this.newTargetNodeToAdd.id }] : [], [this.newRelationshipToAdd]);
-                    this.callCallbackIfRegistered('onDrawEnd', this.newRelationshipToAdd, this.newTargetNodeToAdd);
+                    this.callCallbackIfRegistered('onDrawEnd', this.newRelationshipToAdd, this.newTargetNodeToAdd, event);
                 }
                 this.newTempTargetNode = null;
                 this.newTempRegularRelationshipToNewTempTargetNode = null;
@@ -235,7 +267,13 @@ export class DrawInteraction extends BaseInteraction {
         if (!this.mouseDownNode) {
             return;
         }
-        return { id: generateUniqueId(13), from: this.mouseDownNode.data.id, to: targetId, captions: [{ value: 'TEST' }], color: 'red' };
+        return {
+            id: generateUniqueId(13),
+            from: this.mouseDownNode.data.id,
+            to: targetId,
+            captions: [{ value: 'TEST' }],
+            color: 'red'
+        };
     }
     setNewRegularRelationshipToNewTempTargetNode() {
         if (!this.mouseDownNode || !this.newTempTargetNode) {
@@ -253,6 +291,12 @@ export class DrawInteraction extends BaseInteraction {
         if (!this.mouseDownNode) {
             return;
         }
-        this.newTempSelfReferredRelationship = { id: generateUniqueId(13), from: this.mouseDownNode.data.id, to: this.mouseDownNode.data.id, captions: [{ value: 'TEST' }], color: 'red' };
+        this.newTempSelfReferredRelationship = {
+            id: generateUniqueId(13),
+            from: this.mouseDownNode.data.id,
+            to: this.mouseDownNode.data.id,
+            captions: [{ value: 'TEST' }],
+            color: 'red'
+        };
     }
 }

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

@@ -13,13 +13,13 @@ export type MultiSelectInteractionOptions = {
 export type MultiSelectInteractionCallbacks = {
     /**
      * Called after once the user releases the mouse after multi-selecting.
-     * @param nodes - The nodes that were selected
-     * @param rels - The relationships that were selected
+     * @param selectionObject - The selected nodes and relationships
+     * @param event - The original mouse event
      */
     onMultiSelect?: (({ nodes, rels }: {
         nodes: Node[];
         rels: Relationship[];
-    }) => void) | boolean;
+    }, event: MouseEvent) => void) | boolean;
 };
 /**
  * Interaction handler for multi-selecting nodes and relationships.

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

@@ -93,7 +93,7 @@ export class MultiSelectInteraction extends BaseInteraction {
                 if (this.options.selectOnRelease) {
                     this.nvlInstance.updateElementsInGraph(nodes.map((node) => ({ id: node.id, selected: true })), rels.map((rel) => ({ id: rel.id, selected: true })));
                 }
-                this.callCallbackIfRegistered('onMultiSelect', { nodes, rels });
+                this.callCallbackIfRegistered('onMultiSelect', { nodes, rels }, event);
             }
         });
         this.mousePosition = { x: 0, y: 0 };

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

@@ -7,11 +7,12 @@ export type PanInteractionCallbacks = {
     /**
      * Called when the canvas is panned.
      * @param panning - The panning coordinates
+     * @param event - The original mouse event
      */
     onPan?: ((panning: {
         x: number;
         y: number;
-    }) => void) | boolean;
+    }, event: MouseEvent) => void) | boolean;
 };
 /**
  * Interaction handler for panning the canvas.

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

@@ -71,7 +71,9 @@ export class PanInteraction extends BaseInteraction {
             configurable: true,
             writable: true,
             value: (event) => {
-                const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), { hitNodeMarginWidth: this.excludeNodeMargin ? NODE_EDGE_WIDTH : 0 });
+                const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), {
+                    hitNodeMarginWidth: this.excludeNodeMargin ? NODE_EDGE_WIDTH : 0
+                });
                 if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) {
                     this.shouldPan = false;
                 }
@@ -91,10 +93,10 @@ export class PanInteraction extends BaseInteraction {
                 }
                 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;
+                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 });
+                this.callCallbackIfRegistered('onPan', { x: x - dx, y: y - dy }, evt);
                 this.mousePosition = { x: evt.clientX, y: evt.clientY };
             }
         });

package/lib/interaction-handlers/utils.js

@@ -1 +1 @@
-export const generateUniqueId = (digit) => Math.floor((Math.random() * Math.pow(10, digit))).toString();
+export const generateUniqueId = (digit) => Math.floor(Math.random() * Math.pow(10, digit)).toString();

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

@@ -7,8 +7,9 @@ export type ZoomInteractionCallbacks = {
     /**
      * Called when the canvas is zoomed.
      * @param zoomLevel - The zoom level
+     * @param event - The original mouse wheel event
      */
-    onZoom?: (zoomLevel: number) => void | boolean;
+    onZoom?: (zoomLevel: number, event: WheelEvent) => void | boolean;
 };
 /**
  * Interaction handler for zooming the canvas.

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

@@ -60,7 +60,7 @@ export class ZoomInteraction extends BaseInteraction {
                 const newPanX = x + (offsetX / zoom - offsetX / newZoomTarget);
                 const newPanY = y + (offsetY / zoom - offsetY / newZoomTarget);
                 this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
-                this.callCallbackIfRegistered('onZoom', newZoomTarget);
+                this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
             }, 25, { leading: true })
         });
         Object.defineProperty(this, "handleWheel", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",