Merge branch 'feature/04-add-zoom-pan' into develop

Author: bkrem

README.md

@@ -1,9 +1,6 @@
 # React D3 Tree
 [![Build Status](https://travis-ci.org/bkrem/react-d3-tree.svg?branch=master)](https://travis-ci.org/bkrem/react-d3-tree)
-[![Coverage Status](https://coveralls.io/repos/github/bkrem/react-d3-tree/badge.svg?branch=master)](https://coveralls.io/github/bkrem/react-d3-tree?branch=master)
-
-> :construction: :construction:  
-> This library is work-in-progress, meaning breaking changes/major version bumps are likely until indicated otherwise.  
+[![Coverage Status](https://coveralls.io/repos/github/bkrem/react-d3-tree/badge.svg?branch=master)](https://coveralls.io/github/bkrem/react-d3-tree?branch=master) 
 
 React D3 Tree is a [React](http://facebook.github.io/react/) component that lets you represent hierarchical data (e.g. ancestor trees, organisational structure, package dependencies) as an animated & interactive tree graph by leveraging [D3](https://d3js.org/)'s `tree` layout.
 
@@ -62,11 +59,13 @@ class MyComponent extends Component {
 ```
 
 ## Props
-| Property       | Type            | Options                 | Required? | Default        | Description                                                                                                                                     |
-|----------------|-----------------|-------------------------|-----------|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
-| `data`         | `array`         |                         | required  | `undefined`    | Single-element array containing hierarchical object (see `myTreeData` above); contains (at least) `name` and `parent` keys.                                                                  |
-| `orientation`  | `string` (enum) | `horizontal` `vertical` |           | `horizontal`   | `horizontal` - Tree expands left-to-right. `vertical` - Tree expands top-to-bottom                                                              |
-| `translate`    | `object`        |                         |           | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner)          |
-| `pathFunc`     | `string` (enum) | `diagonal` `elbow`      |           | `diagonal`     | `diagonal` - Renders smooth, curved edges between parent-child nodes. `elbow` - Renders sharp edges at right angles between parent-child nodes |
-| `collapsible`  | `bool`          |                         |           | `true`         | Sets whether the tree's nodes can be collapsed by clicking them                                                                                 |
-| `initialDepth` | `number`        | `0` or greater          |           | `undefined`    | Sets the maximum node depth to which the tree is expanded on its initial render; tree renders to full depth if prop is omitted.                   |
+| Property       | Type            | Options                 | Required? | Default                 | Description                                                                                                                                     |
+|----------------|-----------------|-------------------------|-----------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data`         | `array`         |                         | required  | `undefined`             | Single-element array containing hierarchical object (see `myTreeData` above); contains (at least) `name` and `parent` keys.                     |
+| `orientation`  | `string` (enum) | `horizontal` `vertical` |           | `horizontal`            | `horizontal` - Tree expands left-to-right. `vertical` - Tree expands top-to-bottom                                                              |
+| `translate`    | `object`        |                         |           | `{x: 0, y: 0}`          | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner)          |
+| `pathFunc`     | `string` (enum) | `diagonal` `elbow`      |           | `diagonal`              | `diagonal` - Renders smooth, curved edges between parent-child nodes. `elbow` - Renders sharp edges at right angles between parent-child nodes  |
+| `collapsible`  | `bool`          |                         |           | `true`                  | Toggles ability to collapse/expand the tree's nodes by clicking them                                                                            |
+| `initialDepth` | `number`        | `0` or greater          |           | `undefined`             | Sets the maximum node depth to which the tree is expanded on its initial render; tree renders to full depth if prop is omitted.                 |
+| `zoomable`     | `bool`          |                         |           | `true`                  | Toggles ability to zoom in/out on the Tree by scaling the SVG element 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                                                     |

src/Tree/index.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { layout } from 'd3';
+import { layout, behavior, event, select } from 'd3';
 import clone from 'clone';
 import uuid from 'uuid';
 
@@ -13,45 +13,102 @@ export default class Tree extends React.Component {
     super(props);
     this.state = {
       initialRender: true,
-      data: this.assignCustomProperties(clone(this.props.data)),
+      data: this.assignInternalProperties(clone(this.props.data)),
+      zoom: undefined,
     };
     this.findTargetNode = this.findTargetNode.bind(this);
     this.collapseNode = this.collapseNode.bind(this);
     this.handleNodeToggle = this.handleNodeToggle.bind(this);
   }
 
   componentDidMount() {
+    this.bindZoomListener();
+
     // TODO find better way of setting initialDepth, re-render here is suboptimal
     this.setState({ initialRender: false }); // eslint-disable-line
   }
 
   componentWillReceiveProps(nextProps) {
+    // Clone new data & assign internal properties
     if (this.props.data !== nextProps.data) {
-      this.setState({ data: this.assignCustomProperties(clone(nextProps.data)) });
+      this.setState({
+        data: this.assignInternalProperties(clone(nextProps.data)),
+      });
     }
   }
 
+
+  /**
+   * setInitialTreeDepth - Description
+   *
+   * @param {array} nodeSet Array of nodes generated by `generateTree`
+   * @param {number} initialDepth Maximum initial depth the tree should render
+   *
+   * @return {void}
+   */
   setInitialTreeDepth(nodeSet, initialDepth) {
-    console.log('setInitialTreeDepth: ', initialDepth);
     nodeSet.forEach((n) => {
       n._collapsed = n.depth >= initialDepth;
     });
   }
 
-  assignCustomProperties(data) {
+
+  /**
+   * 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})` });
+        })
+      );
+    }
+  }
+
+
+  /**
+   * assignInternalProperties - Assigns internal properties to each node in the
+   * `data` set that are required for tree manipulation and returns
+   * a new `data` array.
+   *
+   * @param {array} data Hierarchical tree data
+   *
+   * @return {array} `data` array with internal properties added
+   */
+  assignInternalProperties(data) {
     return data.map((node) => {
       node.id = uuid.v4();
       node._collapsed = false;
       // if there are children, recursively assign properties to them too
       if (node.children && node.children.length > 0) {
-        node.children = this.assignCustomProperties(node.children);
+        node.children = this.assignInternalProperties(node.children);
         node._children = node.children;
       }
       return node;
     });
   }
 
-  // TODO Refactor this into a more readable/reasonable recursive depth-first walk.
+
+  /**
+   * findTargetNode - Recursively walks a set of nodes (`nodeSet`) and its
+   * children until a `node.id` that matches `nodeId` param is found.
+   *
+   * @param {string} nodeId  The `node.id` being searched for
+   * @param {array} nodeSet Array of `node` objects
+   *
+   * @return {object} Returns the targeted `node` object
+   */
+   // TODO Refactor this into a more readable/reasonable recursive depth-first walk.
   findTargetNode(nodeId, nodeSet) {
     const hits = nodeSet.filter((node) => node.id === nodeId);
 
@@ -68,6 +125,15 @@ export default class Tree extends React.Component {
     })[0];
   }
 
+
+  /**
+   * collapseNode - Recursively sets the `_collapsed` property of
+   * the passed `node` object and its children to `true`.
+   *
+   * @param {object} node Node object with custom properties
+   *
+   * @return {void}
+   */
   collapseNode(node) {
     node._collapsed = true;
     if (node._children && node._children.length > 0) {
@@ -77,10 +143,29 @@ export default class Tree extends React.Component {
     }
   }
 
+
+  /**
+   * expandNode - Sets the `_collapsed` property of
+   * the passed `node` object to `false`.
+   *
+   * @param {type} node Node object with custom properties
+   *
+   * @return {void}
+   */
   expandNode(node) {
     node._collapsed = false;
   }
 
+
+  /**
+   * handleNodeToggle - Finds the node matching `nodeId` and
+   * expands/collapses it, depending on the current state of
+   * its `_collapsed` property.
+   *
+   * @param {string} nodeId A node object's `id` field.
+   *
+   * @return {void}
+   */
   handleNodeToggle(nodeId) {
     if (this.props.collapsible) {
       const data = clone(this.state.data);
@@ -92,6 +177,15 @@ export default class Tree extends React.Component {
     }
   }
 
+
+  /**
+   * generateTree - Generates tree elements (`nodes` and `links`) by
+   * grabbing the rootNode from `this.state.data[0]`.
+   * Restricts tree depth to `props.initial` if defined and this is
+   * the initial render of the tree.
+   *
+   * @return {object} Object containing `nodes` and `links` fields.
+   */
   generateTree() {
     const { initialDepth } = this.props;
     const tree = layout.tree()
@@ -116,8 +210,16 @@ export default class Tree extends React.Component {
     const { nodes, links } = this.generateTree();
     return (
       <div className="treeContainer">
-        <svg width="100%" height="100%">
-          <g transform={`translate(${translate.x},${translate.y})`}>
+        <svg
+          className="svg"
+          width="100%"
+          height="100%"
+          transform={this.state.zoom}
+        >
+          <g
+            className="gWrapper"
+            transform={`translate(${translate.x},${translate.y})`}
+          >
 
             {nodes.map((nodeData) =>
               <Node
@@ -153,6 +255,8 @@ Tree.defaultProps = {
   pathFunc: 'diagonal',
   collapsible: true,
   initialDepth: undefined,
+  zoomable: true,
+  scaleExtent: { min: 0.1, max: 1 },
 };
 
 Tree.propTypes = {
@@ -171,4 +275,9 @@ Tree.propTypes = {
   ]),
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,
+  zoomable: PropTypes.bool,
+  scaleExtent: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+  }),
 };

src/Tree/tests/index.test.js

@@ -155,4 +155,23 @@ describe('<Tree />', () => {
 
     expect(Tree.prototype.setInitialTreeDepth).toHaveBeenCalled();
   });
+
+  it('allows zooming in/out according to `props.scaleExtent` if `props.zoomable`', () => {
+    const zoomableComponent = mount(
+      <Tree
+        data={mockData}
+      />
+    );
+    const nonZoomableComponent = mount(
+      <Tree
+        data={mockData}
+        zoomable={false}
+      />
+    );
+
+    zoomableComponent.find('svg').simulate('touchmove');
+
+    expect(zoomableComponent.find('svg').prop('transform')).toBeDefined();
+    expect(nonZoomableComponent.find('svg').prop('transform')).toBeUndefined();
+  });
 });