force-graph 1.49.0 → 1.49.2

package/dist/force-graph.mjs

@@ -1,7 +1,7 @@
 import { select } from 'd3-selection';
 import { zoom, zoomTransform } from 'd3-zoom';
 import { drag } from 'd3-drag';
-import { min, max } from 'd3-array';
+import { sum, min, max } from 'd3-array';
 import { throttle } from 'lodash-es';
 import { Group, Tween, Easing } from '@tweenjs/tween.js';
 import Kapsule from 'kapsule';
@@ -940,6 +940,7 @@ function linkKapsule (kapsulePropNames, kapsuleType) {
 
 var HOVER_CANVAS_THROTTLE_DELAY = 800; // ms to throttle shadow canvas updates for perf improvement
 var ZOOM2NODES_FACTOR = 4;
+var DRAG_CLICK_TOLERANCE_PX = 5; // How many px can a node be accidentally dragged before disabling the click
 
 // Expose config from forceGraph
 var bindFG = linkKapsule('forceGraph', CanvasForceGraph);
@@ -1413,17 +1414,20 @@ var forceGraph = Kapsule({
       var initPos = obj.__initialDragPos;
       var dragPos = ev;
       var k = zoomTransform(state.canvas).k;
-      var translate = {
-        x: initPos.x + (dragPos.x - initPos.x) / k - obj.x,
-        y: initPos.y + (dragPos.y - initPos.y) / k - obj.y
-      };
 
       // Move fx/fy (and x/y) of nodes based on the scaled drag distance since the drag start
       ['x', 'y'].forEach(function (c) {
         return obj["f".concat(c)] = obj[c] = initPos[c] + (dragPos[c] - initPos[c]) / k;
       });
 
-      // prevent freeze while dragging
+      // Only engage full drag if distance reaches above threshold
+      if (!obj.__dragged && DRAG_CLICK_TOLERANCE_PX >= Math.sqrt(sum(['x', 'y'].map(function (k) {
+        return Math.pow(ev[k] - initPos[k], 2);
+      })))) return;
+      var translate = {
+        x: initPos.x + (dragPos.x - initPos.x) / k - obj.x,
+        y: initPos.y + (dragPos.y - initPos.y) / k - obj.y
+      };
       state.forceGraph.d3AlphaTarget(0.3) // keep engine running at low intensity throughout drag
       .resetCountdown(); // prevent freeze while dragging
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "force-graph",
-  "version": "1.49.0",
+  "version": "1.49.2",
   "description": "2D force-directed graph rendered on HTML5 canvas",
   "type": "module",
   "unpkg": "dist/force-graph.min.js",

package/src/force-graph.js

@@ -1,7 +1,7 @@
 import { select as d3Select } from 'd3-selection';
 import { zoom as d3Zoom, zoomTransform as d3ZoomTransform } from 'd3-zoom';
 import { drag as d3Drag } from 'd3-drag';
-import { max as d3Max, min as d3Min } from 'd3-array';
+import { max as d3Max, min as d3Min, sum as d3Sum } from 'd3-array';
 import { throttle } from 'lodash-es';
 import { Tween, Group as TweenGroup, Easing } from '@tweenjs/tween.js';
 import Kapsule from 'kapsule';
@@ -14,6 +14,7 @@ import linkKapsule from './kapsule-link.js';
 
 const HOVER_CANVAS_THROTTLE_DELAY = 800; // ms to throttle shadow canvas updates for perf improvement
 const ZOOM2NODES_FACTOR = 4;
+const DRAG_CLICK_TOLERANCE_PX = 5; // How many px can a node be accidentally dragged before disabling the click
 
 // Expose config from forceGraph
 const bindFG = linkKapsule('forceGraph', CanvasForceGraph);
@@ -398,7 +399,12 @@ export default Kapsule({
         })
         .on('start', ev => {
           const obj = ev.subject;
-          obj.__initialDragPos = { x: obj.x, y: obj.y, fx: obj.fx, fy: obj.fy };
+          obj.__initialDragPos = {
+            x: obj.x,
+            y: obj.y,
+            fx: obj.fx,
+            fy: obj.fy
+          };
 
           // keep engine running at low intensity throughout drag
           if (!ev.active) {
@@ -414,15 +420,19 @@ export default Kapsule({
           const dragPos = ev;
 
           const k = d3ZoomTransform(state.canvas).k;
+
+          // Move fx/fy (and x/y) of nodes based on the scaled drag distance since the drag start
+          ['x', 'y'].forEach(c => obj[`f${c}`] = obj[c] = initPos[c] + (dragPos[c] - initPos[c]) / k);
+
+          // Only engage full drag if distance reaches above threshold
+          if (!obj.__dragged && (DRAG_CLICK_TOLERANCE_PX >= Math.sqrt(d3Sum(['x', 'y'].map(k => (ev[k] - initPos[k])**2)))))
+            return;
+
           const translate = {
             x: (initPos.x + (dragPos.x - initPos.x) / k) - obj.x,
             y: (initPos.y + (dragPos.y - initPos.y) / k) - obj.y
           };
 
-          // Move fx/fy (and x/y) of nodes based on the scaled drag distance since the drag start
-          ['x', 'y'].forEach(c => obj[`f${c}`] = obj[c] = initPos[c] + (dragPos[c] - initPos[c]) / k);
-
-          // prevent freeze while dragging
           state.forceGraph
             .d3AlphaTarget(0.3) // keep engine running at low intensity throughout drag
             .resetCountdown();  // prevent freeze while dragging