search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.06k stars 269 forks source link

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

Closed kalebm1 closed 2 years ago

kalebm1 commented 2 years ago

This PR fixes two issues

Add Center Nodes on Click button to demo application

image

I used the same Switch component as the other toggle buttons to create this addition. When clicked, the tree will be centered on a node when it is clicked using the dimensions tree prop.

Fixed the horizontal orientation centering bug

After testing the new centerNode function more thoroughly, I noticed a slight bug with the way we calculate the new x,y coordinates for the horizontal orientation.

Before, we were simply flipping x and y if the orientation was horizontal, but still adding width and height the same. But if we flip x and y, we must also flip the dimension we are adding the original coordinate.

So instead of this for horizontal:

        y = -hierarchyPointNode.x * scale + dimensions.width / 2;
        x = -hierarchyPointNode.y * scale + dimensions.height / 2;

we must do this for horizontal:

        y = -hierarchyPointNode.x * scale + dimensions.height / 2;
        x = -hierarchyPointNode.y * scale + dimensions.width / 2;

This PR takes care of those two issues.

bkrem commented 2 years ago

Add Center Nodes on Click button to demo application

Amazing thank you for already doing this. I ran out of time yesterday but wanted to get the actual changes published so hadn't yet updated the demo with this option.

After testing the new centerNode function more thoroughly, I noticed a slight bug with the way we calculate the new x,y coordinates for the horizontal orientation.

Great catch, thanks for this rapid fix 💯 Weird that I didn't see this during my own testing yesterday, maybe because I had devTools open and that skewed/obscured the miscalculation bug 🤔

bkrem commented 2 years ago

Followup fix for issue #151, PR #381

bkrem commented 2 years ago

Shipped as https://github.com/bkrem/react-d3-tree/releases/tag/v3.3.1 🚢

Thanks again for the rapid followup fix :)