add draggable prop (#433)

Co-authored-by: matthew.gould <[email protected]>
Fixes #364

Author: gouldie

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}

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,

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`.
    *