Implementing center node on click functionality (#381)

Author: kalebm1

src/Node/index.tsx

@@ -29,11 +29,13 @@ type NodeProps = {
   onNodeMouseOver: NodeEventHandler;
   onNodeMouseOut: NodeEventHandler;
   subscriptions: object;
+  centerNode: (hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>) => void;
 };
 
 type NodeState = {
   transform: string;
   initialStyle: { opacity: number };
+  wasClicked: boolean;
 };
 
 export default class Node extends React.Component<NodeProps, NodeState> {
@@ -49,13 +51,18 @@ export default class Node extends React.Component<NodeProps, NodeState> {
     initialStyle: {
       opacity: 0,
     },
+    wasClicked: false,
   };
 
   componentDidMount() {
     this.commitTransform();
   }
 
   componentDidUpdate() {
+    if (this.state.wasClicked) {
+      this.props.centerNode(this.props.hierarchyPointNode);
+      this.setState({ wasClicked: false });
+    }
     this.commitTransform();
   }
 
@@ -119,22 +126,27 @@ export default class Node extends React.Component<NodeProps, NodeState> {
   // TODO: needs tests
   renderNodeElement = () => {
     const { data, hierarchyPointNode, renderCustomNodeElement } = this.props;
-    const renderNode = typeof renderCustomNodeElement === 'function' ? renderCustomNodeElement : DefaultNodeElement;
+    const renderNode =
+      typeof renderCustomNodeElement === 'function' ? renderCustomNodeElement : DefaultNodeElement;
     const nodeProps = {
-        hierarchyPointNode: hierarchyPointNode,
-        nodeDatum: data,
-        toggleNode: this.handleNodeToggle,
-        onNodeClick: this.handleOnClick,
-        onNodeMouseOver: this.handleOnMouseOver,
-        onNodeMouseOut: this.handleOnMouseOut,
+      hierarchyPointNode: hierarchyPointNode,
+      nodeDatum: data,
+      toggleNode: this.handleNodeToggle,
+      onNodeClick: this.handleOnClick,
+      onNodeMouseOver: this.handleOnMouseOver,
+      onNodeMouseOut: this.handleOnMouseOut,
     };
 
-    return renderNode(nodeProps)
+    return renderNode(nodeProps);
   };
 
-  handleNodeToggle = () => this.props.onNodeToggle(this.props.data.__rd3t.id);
+  handleNodeToggle = () => {
+    this.setState({ wasClicked: true });
+    this.props.onNodeToggle(this.props.data.__rd3t.id);
+  };
 
   handleOnClick = evt => {
+    this.setState({ wasClicked: true });
     this.props.onNodeClick(this.props.hierarchyPointNode, evt);
   };
 

src/Tree/index.tsx

@@ -51,6 +51,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     renderCustomNodeElement: undefined,
     enableLegacyTransitions: false,
     hasInteractiveNodes: false,
+    dimensions: undefined,
   };
 
   state: TreeState = {
@@ -151,7 +152,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
         .scaleExtent(zoomable ? [scaleExtent.min, scaleExtent.max] : [zoom, zoom])
         // TODO: break this out into a separate zoom handler fn, rather than inlining it.
         .filter(() => {
-          if (hasInteractiveNodes) return event.target.classList.contains(this.svgInstanceRef) || event.target.classList.contains(this.gInstanceRef) || event.shiftKey;
+          if (hasInteractiveNodes)
+            return (
+              event.target.classList.contains(this.svgInstanceRef) ||
+              event.target.classList.contains(this.gInstanceRef) ||
+              event.shiftKey
+            );
           return true;
         })
         .on('zoom', () => {
@@ -377,6 +383,43 @@ class Tree extends React.Component<TreeProps, TreeState> {
     }
   };
 
+  /**
+   * Takes a hierarchy point node and centers the node on the screen
+   * if the dimensions parameter is passed to the tree.
+   *
+   * This code is adapted from Rob Schmuecker's centerNode method.
+   * Link: http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/
+   *
+   * @param hierarchyPointNode
+   */
+  centerNode = (hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>) => {
+    // if the dimensions are given
+    if (this.props.dimensions) {
+      const g = select(`.${this.gInstanceRef}`);
+      const svg = select(`.${this.svgInstanceRef}`);
+      const scale = this.state.d3.scale;
+
+      let x, y;
+      // if the orientation is horizontal, calculate the variables inverted (x->y, y->x)
+      if (this.props.orientation === 'horizontal') {
+        y = -hierarchyPointNode.x * scale + this.props.dimensions.width / 2;
+        x = -hierarchyPointNode.y * scale + this.props.dimensions.height / 2;
+      } else {
+        // else, calculate the variables normally (x->x, y->y)
+        x = -hierarchyPointNode.x * scale + this.props.dimensions.width / 2;
+        y = -hierarchyPointNode.y * scale + this.props.dimensions.height / 2;
+      }
+      //@ts-ignore
+      g.transition()
+        .duration(800)
+        .attr('transform', 'translate(' + x + ',' + y + ')scale(' + scale + ')');
+      // Sets the viewport to the new center so that it does not jump back to original
+      // coordinates when dragged/zoomed
+      //@ts-ignore
+      svg.call(d3zoom().transform, zoomIdentity.translate(x, y).scale(this.props.zoom));
+    }
+  };
+
   /**
    * Generates tree elements (`nodes` and `links`) by
    * grabbing the rootNode from `this.state.data[0]`.
@@ -525,6 +568,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
                   onNodeMouseOver={this.handleOnNodeMouseOverCb}
                   onNodeMouseOut={this.handleOnNodeMouseOutCb}
                   subscriptions={subscriptions}
+                  centerNode={this.centerNode}
                 />
               );
             })}

src/Tree/types.ts

@@ -285,4 +285,14 @@ export interface TreeProps {
    * {@link Tree.defaultProps.hasInteractiveNodes | Default value}
    */
   hasInteractiveNodes?: boolean;
+
+  /**
+   * Gives the user the ability to pass dimensions of the tree container to center a node on click
+   *
+   * If dimensions are given: node will center on click. If not, node will not center on click.
+   */
+  dimensions?: {
+    height: number;
+    width: number;
+  };
 }