From fbaf14986b9d029b5fa1fd970ac326cf72aeaa38 Mon Sep 17 00:00:00 2001
From: Matthew Gould <gouldie70@gmail.com>
Date: Thu, 12 Jan 2023 07:14:53 +0000
Subject: [PATCH] add `draggable` prop (#433)

Co-authored-by: matthew.gould <matthew.gould@morneaushepell.com>
Fixes https://github.com/bkrem/react-d3-tree/issues/364
---
 demo/src/App.js    | 16 ++++++++++++++++
 src/Tree/index.tsx |  6 ++++++
 src/Tree/types.ts  |  7 +++++++
 3 files changed, 29 insertions(+)

diff --git a/demo/src/App.js b/demo/src/App.js
index 657a5d64..782471c7 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -90,6 +90,7 @@ class App extends Component {
       initialDepth: 1,
       depthFactor: undefined,
       zoomable: true,
+      draggable: true,
       zoom: 1,
       scaleExtent: { min: 0.1, max: 1 },
       separation: { siblings: 2, nonSiblings: 2 },
@@ -127,6 +128,7 @@ class App extends Component {
     this.handleFloatChange = this.handleFloatChange.bind(this);
     this.toggleCollapsible = this.toggleCollapsible.bind(this);
     this.toggleZoomable = this.toggleZoomable.bind(this);
+    this.toggleDraggable = this.toggleDraggable.bind(this);
     this.toggleCenterNodes = this.toggleCenterNodes.bind(this);
     this.setScaleExtent = this.setScaleExtent.bind(this);
     this.setSeparation = this.setSeparation.bind(this);
@@ -203,6 +205,10 @@ class App extends Component {
     this.setState(prevState => ({ zoomable: !prevState.zoomable }));
   }
 
+  toggleDraggable() {
+    this.setState(prevState => ({ draggable: !prevState.draggable }));
+  }
+
   toggleCenterNodes() {
     if (this.state.dimensions !== undefined) {
       this.setState({
@@ -414,6 +420,15 @@ class App extends Component {
                 />
               </div>
 
+              <div className="prop-container">
+                <h4 className="prop">Draggable</h4>
+                <Switch
+                  name="draggableBtn"
+                  checked={this.state.draggable}
+                  onChange={this.toggleDraggable}
+                />
+              </div>
+
               <div className="prop-container">
                 <h4 className="prop">
                   Center Nodes on Click (via <code>dimensions</code> prop)
@@ -662,6 +677,7 @@ class App extends Component {
                 collapsible={this.state.collapsible}
                 initialDepth={this.state.initialDepth}
                 zoomable={this.state.zoomable}
+                draggable={this.state.draggable}
                 zoom={this.state.zoom}
                 scaleExtent={this.state.scaleExtent}
                 nodeSize={this.state.nodeSize}
diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx
index 2e14dc28..8e7f538e 100644
--- a/src/Tree/index.tsx
+++ b/src/Tree/index.tsx
@@ -39,6 +39,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     collapsible: true,
     initialDepth: undefined,
     zoomable: true,
+    draggable: true,
     zoom: 1,
     scaleExtent: { min: 0.1, max: 1 },
     nodeSize: { x: 140, y: 140 },
@@ -104,6 +105,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
       !deepEqual(this.props.translate, prevProps.translate) ||
       !deepEqual(this.props.scaleExtent, prevProps.scaleExtent) ||
       this.props.zoomable !== prevProps.zoomable ||
+      this.props.draggable !== prevProps.draggable ||
       this.props.zoom !== prevProps.zoom ||
       this.props.enableLegacyTransitions !== prevProps.enableLegacyTransitions
     ) {
@@ -163,6 +165,10 @@ class Tree extends React.Component<TreeProps, TreeState> {
           return true;
         })
         .on('zoom', (event: any) => {
+          if (!this.props.draggable && (event.sourceEvent.type === 'mousemove')) {
+            return
+          }
+
           g.attr('transform', event.transform);
           if (typeof onUpdate === 'function') {
             // This callback is magically called not only on "zoom", but on "drag", as well,
diff --git a/src/Tree/types.ts b/src/Tree/types.ts
index 07f26fab..4c5681dd 100644
--- a/src/Tree/types.ts
+++ b/src/Tree/types.ts
@@ -200,6 +200,13 @@ export interface TreeProps {
    */
   zoomable?: boolean;
 
+   /**
+   * Toggles ability to drag the Tree.
+   *
+   * {@link Tree.defaultProps.draggable | Default value}
+   */
+   draggable?: boolean;
+
   /**
    * A floating point number to set the initial zoom level. It is constrained by `scaleExtent`.
    *