@neo4j-nvl/interaction-handlers 0.2.22 → 0.2.24

package/lib/constants.d.ts

@@ -1 +1,2 @@
 export declare const NODE_EDGE_WIDTH = 10;
+export declare const DRAG_THRESHOLD = 10;

package/lib/constants.js

@@ -1 +1,2 @@
 export const NODE_EDGE_WIDTH = 10;
+export const DRAG_THRESHOLD = 10;

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

@@ -91,6 +91,7 @@ export type ClickInteractionCallbacks = {
 export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks> {
     private moved;
     private readonly options;
+    private mousePosition;
     /**
      * Creates a new click interaction handler.
      * @param nvl - The NVL instance to attach the interaction handler to
@@ -98,10 +99,9 @@ export declare class ClickInteraction extends BaseInteraction<ClickInteractionCa
      */
     constructor(nvl: NVL, options?: ClickInteractionOptions);
     private handleMouseDown;
-    private handleMouseMove;
     private handleRightClick;
     private handleDoubleClick;
-    private handleMouseUp;
+    private handleClick;
     /**
      * Removes all related event listeners from the container.
      */

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

@@ -1,4 +1,5 @@
 import { BaseInteraction } from './base';
+import { isDraggingMovement } from './utils';
 /**
  * Click interaction handler that handles click, double click and right click events on
  * nodes, relationships and canvas.
@@ -35,20 +36,18 @@ export class ClickInteraction extends BaseInteraction {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "handleMouseDown", {
+        Object.defineProperty(this, "mousePosition", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: () => {
-                this.moved = false;
-            }
+            value: void 0
         });
-        Object.defineProperty(this, "handleMouseMove", {
+        Object.defineProperty(this, "handleMouseDown", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: () => {
-                this.moved = true;
+            value: (event) => {
+                this.mousePosition = { x: event.clientX, y: event.clientY };
             }
         });
         Object.defineProperty(this, "handleRightClick", {
@@ -90,12 +89,12 @@ export class ClickInteraction extends BaseInteraction {
                 }
             }
         });
-        Object.defineProperty(this, "handleMouseUp", {
+        Object.defineProperty(this, "handleClick", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: (event) => {
-                if (this.moved || event.button !== 0) {
+                if (isDraggingMovement(event, this.mousePosition) || event.button !== 0) {
                     return;
                 }
                 const { nvlTargets } = this.nvlInstance.getHits(event);
@@ -146,16 +145,15 @@ export class ClickInteraction extends BaseInteraction {
             writable: true,
             value: () => {
                 this.removeEventListener('mousedown', this.handleMouseDown, true);
-                this.removeEventListener('mousemove', this.handleMouseMove, true);
-                this.removeEventListener('mouseup', this.handleMouseUp, true);
-                this.removeEventListener('dblclick', this.handleMouseUp, true);
+                this.removeEventListener('click', this.handleClick, true);
+                this.removeEventListener('dblclick', this.handleClick, true);
                 this.removeEventListener('contextmenu', this.handleRightClick, true);
             }
         });
         this.options = options;
+        this.mousePosition = { x: 0, y: 0 };
         this.addEventListener('mousedown', this.handleMouseDown, true);
-        this.addEventListener('mousemove', this.handleMouseMove, true);
-        this.addEventListener('mouseup', this.handleMouseUp, true);
+        this.addEventListener('click', this.handleClick, true);
         this.addEventListener('dblclick', this.handleDoubleClick, true);
         this.addEventListener('contextmenu', this.handleRightClick, true);
     }

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

@@ -1,6 +1,6 @@
 import { NODE_EDGE_WIDTH } from '../constants';
 import { BaseInteraction } from './base';
-const DragThreshold = 10;
+import { isDraggingMovement } from './utils';
 /**
  * Interaction handler for dragging nodes.
  * Dragging is achieved by clicking and dragging on the node.
@@ -96,10 +96,7 @@ export class DragNodeInteraction extends BaseInteraction {
                 if (this.mouseDownNode === null || evt.buttons !== 1 || this.isDrawing) {
                     return;
                 }
-                const diffX = Math.abs(evt.clientX - this.mousePosition.x);
-                const diffY = Math.abs(evt.clientY - this.mousePosition.y);
-                const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
-                if (distanceSquared < DragThreshold) {
+                if (!isDraggingMovement(evt, this.mousePosition)) {
                     return;
                 }
                 if (!this.isDragging) {

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

@@ -76,6 +76,7 @@ export class HoverInteraction extends BaseInteraction {
                 this.callCallbackIfRegistered('onHover', this.currentHoveredElement, nvlTargets, event);
                 // Use pure update API to avoid the previous removed node to be re-added to the scene.
                 this.options.drawShadowOnHover &&
+                    this.nvlInstance.nodes.length > 0 &&
                     this.nvlInstance.updateElementsInGraph(this.updates.nodes, this.updates.relationships);
                 this.clearUpdates();
             }

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

@@ -1 +1,5 @@
 export declare const generateUniqueId: (digit: number) => string;
+export declare const isDraggingMovement: (event: MouseEvent, originalPosition: {
+    x: number;
+    y: number;
+}) => boolean;

package/lib/interaction-handlers/utils.js

@@ -1 +1,11 @@
+import { DRAG_THRESHOLD } from '../constants';
 export const generateUniqueId = (digit) => Math.floor(Math.random() * Math.pow(10, digit)).toString();
+export const isDraggingMovement = (event, originalPosition) => {
+    const diffX = Math.abs(event.clientX - originalPosition.x);
+    const diffY = Math.abs(event.clientY - originalPosition.y);
+    if (diffX > DRAG_THRESHOLD || diffY > DRAG_THRESHOLD) {
+        return true;
+    }
+    const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
+    return distanceSquared > DRAG_THRESHOLD;
+};

package/package.json

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