Adds zoom capability and unit test, adds JSDocs for Tree (#4)

Author: bkrem

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