@neo4j-nvl/interaction-handlers - npm Package Compare versions

Comparing version 0.2.12 to 0.2.13

lib/index.d.ts

@@ -7,5 +7,5 @@ import type { ClickInteractionCallbacks, ClickInteractionOptions } from './interaction-handlers/click-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';
@@ -12,0 +12,0 @@ import type { PanInteractionCallbacks } from './interaction-handlers/pan-interaction';

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

@@ -10,4 +10,5 @@ import type { NVL, Node } from '@neo4j-nvl/core';
      * @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;
 };
@@ -14,0 +15,0 @@ /**

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

@@ -62,4 +62,4 @@ import { NODE_EDGE_WIDTH } from '../constants';
                 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) {
@@ -76,3 +76,3 @@ this.isDrawing = true;
                 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;
@@ -94,12 +94,18 @@ }
                 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);
                 }
@@ -106,0 +112,0 @@ }

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

@@ -8,3 +8,3 @@ import { NVL, Node, Relationship } from '@neo4j-nvl/core';
 export type DrawInteractionCallbacks = {
-    onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null) => void) | boolean;
+    onDrawEnd?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
 };
@@ -11,0 +11,0 @@ /**

lib/interaction-handlers/draw-interaction.js

@@ -0,5 +1,5 @@
+import { NODE_EDGE_WIDTH } from '../constants';
 import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
+import { BaseInteraction } from './base';
 import { generateUniqueId } from './utils';
-import { NODE_EDGE_WIDTH } from '../constants';
-import { BaseInteraction } from './base';
 /**
@@ -90,4 +90,11 @@ * @internal
                     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.
@@ -98,3 +105,8 @@ // So always make sure the new node id to be added to the dataset after mouse releasing is a new id.
                     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;
@@ -108,3 +120,6 @@ let y = pos.y;
                         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;
@@ -116,3 +131,6 @@ this.newTempRegularRelationshipToExistingNode = null;
                         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;
@@ -125,3 +143,6 @@ this.newTempRegularRelationshipToNewTempTargetNode = null;
                     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;
@@ -141,3 +162,3 @@ this.newTempRegularRelationshipToExistingNode = 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) {
@@ -172,4 +193,4 @@ const node = hitNodeEdges[0];
                 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) {
@@ -184,3 +205,10 @@ this.isDraggingNode = true;
                     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();
@@ -200,5 +228,9 @@ this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], [this.newTempRegularRelationshipToNewTempTargetNode]);
             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]);
@@ -209,3 +241,3 @@ if (this.isDrawing && this.isMoved) {
                     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);
                 }
@@ -248,3 +280,9 @@ this.newTempTargetNode = null;
         }
-        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'
+        };
     }
@@ -267,4 +305,10 @@ setNewRegularRelationshipToNewTempTargetNode() {
         }
-        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'
+        };
     }
 }

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

@@ -16,4 +16,4 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/core';
      * 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
      */
@@ -23,3 +23,3 @@ onMultiSelect?: (({ nodes, rels }: {
         rels: Relationship[];
-    }) => void) | boolean;
+    }, event: MouseEvent) => void) | boolean;
 };
@@ -26,0 +26,0 @@ /**

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

@@ -96,3 +96,3 @@ import { NODE_EDGE_WIDTH } from '../constants';
                 }
-                this.callCallbackIfRegistered('onMultiSelect', { nodes, rels });
+                this.callCallbackIfRegistered('onMultiSelect', { nodes, rels }, event);
             }
@@ -99,0 +99,0 @@ });

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

@@ -10,2 +10,3 @@ import { NVL } from '@neo4j-nvl/core';
      * @param panning - The panning coordinates
+     * @param event - The original mouse event
      */
@@ -15,3 +16,3 @@ onPan?: ((panning: {
         y: number;
-    }) => void) | boolean;
+    }, event: MouseEvent) => void) | boolean;
 };
@@ -18,0 +19,0 @@ /**

lib/interaction-handlers/pan-interaction.js

@@ -74,3 +74,5 @@ import { difference } from 'lodash';
             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) {
@@ -95,6 +97,6 @@ this.shouldPan = false;
                 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 };
@@ -101,0 +103,0 @@ }

lib/interaction-handlers/utils.js

@@ -1,1 +0,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();

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

@@ -10,4 +10,5 @@ import { NVL } from '@neo4j-nvl/core';
      * @param zoomLevel - The zoom level
+     * @param event - The original mouse wheel event
      */
-    onZoom?: (zoomLevel: number) => void | boolean;
+    onZoom?: (zoomLevel: number, event: WheelEvent) => void | boolean;
 };
@@ -14,0 +15,0 @@ /**

lib/interaction-handlers/zoom-interaction.js

@@ -63,3 +63,3 @@ import { throttle } from 'lodash';
                 this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
-                this.callCallbackIfRegistered('onZoom', newZoomTarget);
+                this.callCallbackIfRegistered('onZoom', newZoomTarget, event);
             }, 25, { leading: true })
@@ -66,0 +66,0 @@ });

package.json

 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

268461

increased by0.54%

Lines of code

1795

increased by3.1%

No dependency changes