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 268 forks source link

Option to pan on trackpad 2-finger scroll, zoom on pinch #453

Open sam-btrt opened 1 year ago

sam-btrt commented 1 year ago

Thank you for taking the time to report an issue with react-d3-tree!

Feel free to delete any questions that do not apply.

Are you reporting a bug, or opening a feature request?

Feature request I'd be happy to contribute a PR if the requirements and outline implementation are agreed.

What is the actual behavior/output?

If zooming is enabled, it's triggered by scrolling. On a trackpad a 2-finger vertical scroll gesture triggers zoom in/out. 2-finger horizontal scroll does nothing. Pinch gesture also controls zoom. The only way to pan is with click and drag.

What is the behavior/output you expect?

It would be great to be able to emulate the behavior of popular whiteboard canvas tools like figma, miro etc. where 2-finger gesture pans and pinch zooms. Perhaps in this mode click and drag would no longer pan, and instead e.g. could be used to select multiple nodes within a selection rectangle, or whatever custom behavior was desired.

Perhaps this could be a simple boolean or enum prop field to toggle between different preset behaviors, or perhaps it would be better implemented as callback functions to optionally override parts of the zoom handler with arbitrary logic?

What version of react-d3-tree are you using?

3.5.1

jp1357 commented 1 year ago

On my trackpad this is already working like that. I think this is more a trackpad related thing - on my old laptop it's not working like that, but my newest laptop it is.