style: minor code style adjustments + comments (followup to #381)

Author: bkrem

src/Tree/index.tsx

@@ -385,29 +385,28 @@ 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.
+   * if the dimensions parameter is passed to `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
+   * Link: http://bl.ocks.org/robschmuecker/7880033
    */
   centerNode = (hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>) => {
-    // if the dimensions are given
-    if (this.props.dimensions) {
+    const { dimensions, orientation, zoom } = this.props;
+    if (dimensions) {
       const g = select(`.${this.gInstanceRef}`);
       const svg = select(`.${this.svgInstanceRef}`);
       const scale = this.state.d3.scale;
 
-      let x, y;
+      let x: number;
+      let y: number;
       // 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;
+      if (orientation === 'horizontal') {
+        y = -hierarchyPointNode.x * scale + dimensions.width / 2;
+        x = -hierarchyPointNode.y * scale + 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;
+        x = -hierarchyPointNode.x * scale + dimensions.width / 2;
+        y = -hierarchyPointNode.y * scale + dimensions.height / 2;
       }
       //@ts-ignore
       g.transition()
@@ -416,7 +415,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
       // 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));
+      svg.call(d3zoom().transform, zoomIdentity.translate(x, y).scale(zoom));
     }
   };
 
@@ -500,7 +499,6 @@ class Tree extends React.Component<TreeProps, TreeState> {
       orientation,
       pathFunc,
       transitionDuration,
-      zoomable,
       nodeSize,
       depthFactor,
       initialDepth,

src/Tree/types.ts

@@ -122,6 +122,17 @@ export interface TreeProps {
    */
   translate?: Point;
 
+  /**
+   * Enables the centering of nodes on click by providing the dimensions of the tree container,
+   * e.g. via {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect | `getBoundingClientRect()`}.
+   *
+   * If dimensions are given: node will center on click. If not, node will not center on click.
+   */
+  dimensions?: {
+    width: number;
+    height: number;
+  };
+
   /**
    * The draw function (or `d`) used to render `path`/`link` elements. Accepts a predefined
    * `PathFunctionOption` or a user-defined `PathFunction`.
@@ -285,14 +296,4 @@ 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;
-  };
 }