fix: add centerNode to demo, fix 'horizontal' Orientation bug (#384)

Author: kalebm1

demo/src/App.js

@@ -94,6 +94,7 @@ class App extends Component {
       nodeSize: { x: 200, y: 200 },
       enableLegacyTransitions: false,
       transitionDuration: 500,
+      dimensions: undefined,
       renderCustomNodeElement: customNodeFnMapping['svg'].fn,
       styles: {
         nodes: {
@@ -125,6 +126,7 @@ class App extends Component {
     this.handleFloatChange = this.handleFloatChange.bind(this);
     this.toggleCollapsible = this.toggleCollapsible.bind(this);
     this.toggleZoomable = this.toggleZoomable.bind(this);
+    this.toggleCenterNodes = this.toggleCenterNodes.bind(this);
     this.setScaleExtent = this.setScaleExtent.bind(this);
     this.setSeparation = this.setSeparation.bind(this);
     this.setNodeSize = this.setNodeSize.bind(this);
@@ -200,6 +202,24 @@ class App extends Component {
     this.setState(prevState => ({ zoomable: !prevState.zoomable }));
   }
 
+  toggleCenterNodes() {
+    if (this.state.dimensions !== undefined) {
+      this.setState({
+        dimensions: undefined,
+      });
+    } else {
+      if (this.treeContainer) {
+        const dimensions = this.treeContainer.getBoundingClientRect();
+        this.setState({
+          dimensions: {
+            width: dimensions.width,
+            height: dimensions.height,
+          },
+        });
+      }
+    }
+  }
+
   setScaleExtent(scaleExtent) {
     this.setState({ scaleExtent });
   }
@@ -393,6 +413,15 @@ class App extends Component {
                 />
               </div>
 
+              <div className="prop-container">
+                <h4 className="prop">Center Nodes on Click</h4>
+                <Switch
+                  name="centerNodesBtn"
+                  checked={this.state.dimensions !== undefined}
+                  onChange={this.toggleCenterNodes}
+                />
+              </div>
+
               <div className="prop-container">
                 <h4 className="prop">Collapse neighbor nodes</h4>
                 <Switch
@@ -645,6 +674,7 @@ class App extends Component {
                 onLinkMouseOut={(...args) => {
                   console.log('onLinkMouseOut', args);
                 }}
+                dimensions={this.state.dimensions}
               />
             </div>
           </div>

src/Tree/index.tsx

@@ -400,9 +400,10 @@ class Tree extends React.Component<TreeProps, TreeState> {
       let x: number;
       let y: number;
       // if the orientation is horizontal, calculate the variables inverted (x->y, y->x)
-      if (orientation === 'horizontal') {
-        y = -hierarchyPointNode.x * scale + dimensions.width / 2;
-        x = -hierarchyPointNode.y * scale + dimensions.height / 2;
+      if (this.props.orientation === 'horizontal') {
+        //The width and height must also be added inverted to the x and y as well.
+        y = -hierarchyPointNode.x * scale + dimensions.height / 2;
+        x = -hierarchyPointNode.y * scale + dimensions.width / 2;
       } else {
         // else, calculate the variables normally (x->x, y->y)
         x = -hierarchyPointNode.x * scale + dimensions.width / 2;