bkrem / react-d3-tree

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

Disable zoom when mouse is on node #450

Open Sooraj-beep opened 1 year ago

Sooraj-beep commented 1 year ago

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

More likely a feature request

What is the actual behavior/output?

I want to disable zoom using the scroll wheel when my mouse is on top of a custom node that is a scrollable list.

What is the behavior/output you expect?

scrolling on the list node would scroll the list instead of zooming in and out of the tree

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

3.5.0

I also want to share how I am currently achieving this.

    const handleMouseOver = (event) => {
      if (zoomable) {
        setZoomable(false)
      }
    }

    const handleMouseOut = (event) => {
      if (!zoomable) {
        setZoomable(true)
      }
    }

handleMouseOver gets called when the mouse is over the list (which is a MUI list) and handleMouseOut is called when the mouse is outside that list. This solution works but there is a side-effect of the graph being rendered every time zoomable is set. When the graph gets rendered, it gets recentered which is annoying for the user. zoomable is used as a property for the Tree element.

Please feel free to reach out if any additional details are required.

Thanks.