From a1b96375aee6b1ace221ab4e15e5f3e503857e50 Mon Sep 17 00:00:00 2001
From: JP <jp1357@gmail.com>
Date: Fri, 9 Jun 2023 18:29:14 +0200
Subject: [PATCH] Add a missing parameter clickDistance this one useful to set
 when you have a very sensitive mouse - such that small mouse movements can
 still count as a click event

---
 src/Tree/index.tsx | 12 +++++++++++-
 src/Tree/types.ts  | 13 +++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx
index cc36898a..36619340 100644
--- a/src/Tree/index.tsx
+++ b/src/Tree/index.tsx
@@ -43,6 +43,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     draggable: true,
     zoom: 1,
     scaleExtent: { min: 0.1, max: 1 },
+    clickDistance: 0,
     nodeSize: { x: 140, y: 140 },
     separation: { siblings: 1, nonSiblings: 2 },
     shouldCollapseNeighborNodes: false,
@@ -149,7 +150,15 @@ class Tree extends React.Component<TreeProps, TreeState> {
    * specified in `props.scaleExtent`.
    */
   bindZoomListener(props: TreeProps) {
-    const { zoomable, scaleExtent, translate, zoom, onUpdate, hasInteractiveNodes } = props;
+    const {
+      zoomable,
+      scaleExtent,
+      translate,
+      zoom,
+      clickDistance,
+      onUpdate,
+      hasInteractiveNodes,
+    } = props;
     const svg = select(`.${this.svgInstanceRef}`);
     const g = select(`.${this.gInstanceRef}`);
 
@@ -158,6 +167,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     svg.call(d3zoom().transform, zoomIdentity.translate(translate.x, translate.y).scale(zoom));
     svg.call(
       d3zoom()
+        .clickDistance(clickDistance)
         .scaleExtent(zoomable ? [scaleExtent.min, scaleExtent.max] : [zoom, zoom])
         // TODO: break this out into a separate zoom handler fn, rather than inlining it.
         .filter((event: any) => {
diff --git a/src/Tree/types.ts b/src/Tree/types.ts
index c631ae5a..71163871 100644
--- a/src/Tree/types.ts
+++ b/src/Tree/types.ts
@@ -200,12 +200,12 @@ export interface TreeProps {
    */
   zoomable?: boolean;
 
-   /**
+  /**
    * Toggles ability to drag the Tree.
    *
    * {@link Tree.defaultProps.draggable | Default value}
    */
-   draggable?: boolean;
+  draggable?: boolean;
 
   /**
    * A floating point number to set the initial zoom level. It is constrained by `scaleExtent`.
@@ -224,6 +224,15 @@ export interface TreeProps {
     max?: number;
   };
 
+  /**
+   * Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger
+   * a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to
+   * distance from its position on mousedown, the click event following mouseup will be suppressed.
+   *
+   * {@link Tree.defaultProps.clickDistance | Default value}
+   */
+  clickDistance?: number;
+
   /**
    * The amount of space each node element occupies.
    *