Use cursor: grab for diagram if props.zoomable

Author: bkrem

src/Tree/index.js

@@ -219,11 +219,18 @@ export default class Tree extends React.Component {
   }
 
   render() {
-    const { orientation, translate, pathFunc, depthFactor, transitionDuration } = this.props;
     const { nodes, links } = this.generateTree();
+    const {
+      orientation,
+      translate,
+      pathFunc,
+      depthFactor,
+      transitionDuration,
+      zoomable,
+    } = this.props;
 
     return (
-      <div className="rd3t-tree-container">
+      <div className={`rd3t-tree-container ${zoomable ? 'grabbable' : undefined}`}>
         <svg className="rd3t-svg" width="100%" height="100%">
           <TransitionGroup
             component="g"

src/Tree/style.css

@@ -2,3 +2,15 @@
   width: 100%;
   height: 100%;
 }
+
+.grabbable {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+.grabbable:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}