Merge branch 'feature/09-reimplement-zoom' into develop

Author: bkrem

README.md

@@ -83,6 +83,8 @@ class MyComponent extends Component {
 | `collapsible`         | `bool`          |                         |           | `true`                  | Toggles ability to collapse/expand the tree's nodes by clicking them.                                                                                                           |
 | `initialDepth`        | `number`        | `0..n`                  |           | `undefined`             | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted.                                          |
 | `depthFactor`         | `number`        | `-n..0..n`              |           | `undefined`             | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |
+| `zoomable`            | `bool`          |                         |           | `true`                  | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`.                                                                                      |
+| `scaleExtent`         | `object`        |                         |           | `{min: 0.1, max: 1}`    | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true.                                                                                    |
 | `transitionDuration`  | `number`        | `0..n`                  |           | `500`                   | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely.                                |
 
 ## External data sources

src/Tree/index.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { TransitionGroup } from 'react-transition-group';
-import { layout } from 'd3';
+import { layout, select, behavior, event } from 'd3';
 import clone from 'clone';
 import uuid from 'uuid';
 
@@ -15,7 +15,6 @@ export default class Tree extends React.Component {
     this.state = {
       initialRender: true,
       data: this.assignInternalProperties(clone(props.data)),
-      zoom: undefined,
     };
     this.findNodesById = this.findNodesById.bind(this);
     this.collapseNode = this.collapseNode.bind(this);
@@ -24,6 +23,7 @@ export default class Tree extends React.Component {
 
 
   componentDidMount() {
+    this.bindZoomListener();
     // TODO find better way of setting initialDepth, re-render here is suboptimal
     this.setState({ initialRender: false }); // eslint-disable-line
   }
@@ -54,28 +54,31 @@ export default class Tree extends React.Component {
   }
 
 
-  // TODO Refactor zoom functionality & reimplement
   /**
    * bindZoomListener - If `props.zoomable`, binds a listener for
    * "zoom" events to the SVG and sets scaleExtent to min/max
    * specified in `props.scaleExtent`.
    *
    * @return {void}
    */
-  // bindZoomListener() {
-  //   const { zoomable, scaleExtent } = this.props;
-  //   const svg = select('.svg');
-  //
-  //   if (zoomable) {
-  //     this.setState({ zoom: 'scale(1)' });
-  //     svg.call(behavior.zoom()
-  //       .scaleExtent([scaleExtent.min, scaleExtent.max])
-  //       .on('zoom', () => {
-  //         this.setState({ zoom: `scale(${event.scale})` });
-  //       })
-  //     );
-  //   }
-  // }
+  bindZoomListener() {
+    const { zoomable, scaleExtent, translate } = this.props;
+    const svg = select('.rd3t-svg');
+    const g = select('.rd3t-g');
+
+    if (zoomable) {
+      svg.call(behavior.zoom()
+        .scaleExtent([scaleExtent.min, scaleExtent.max])
+        .on('zoom', () => {
+          g.attr('transform',
+            `translate(${event.translate}) scale(${event.scale})`
+          );
+        })
+        // Offset so that first pan and zoom does not jump back to [0,0] coords
+        .translate([translate.x, translate.y])
+      );
+    }
+  }
 
 
   /**
@@ -215,14 +218,22 @@ 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"
+            className="rd3t-g"
             transform={`translate(${translate.x},${translate.y})`}
           >
             {nodes.map((nodeData) =>
@@ -263,8 +274,8 @@ Tree.defaultProps = {
   depthFactor: undefined,
   collapsible: true,
   initialDepth: undefined,
-  // zoomable: true,
-  // scaleExtent: { min: 0.1, max: 1 },
+  zoomable: true,
+  scaleExtent: { min: 0.1, max: 1 },
 };
 
 Tree.propTypes = {
@@ -285,9 +296,9 @@ Tree.propTypes = {
   depthFactor: PropTypes.number,
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,
-  // zoomable: PropTypes.bool,
-  // scaleExtent: PropTypes.shape({
-  //   min: PropTypes.number,
-  //   max: PropTypes.number,
-  // }),
+  zoomable: PropTypes.bool,
+  scaleExtent: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+  }),
 };

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;
+}