isInteractive is preventing custom click handlers about xyflow

[moklick]

Hey,

we just released v.4.0.0. There we dropped isInteractive and added nodesDraggable, nodesConnectable and elementsSelectable. This use case should be working with nodesDraggable = false and nodesConnectable and elementsSelectable = true. You can see a working example here: https://react-flow.netlify.app/interaction. Can you confirm @bartvanremortele ?

[moklick]

Hey,

I disabled the pointer events for inactive graphs in order to be able to zoom and pan even if the pointer is above a node.

Maybe we could introduce another option like ‘disablePointerEventsWhenInactive’ or something like that.

What do you think about that?

[bartvanremortele]

Hey,

Yes, I did some further digging and now understand why it's implemented in the way it is. The zoom layer has a lower z-index than the nodes and the pointer-events: none makes it possible to trigger the handlers on the zoom layer because the node's events are disabled.

As far as I understood by reading this issue on d3-zoom, the UX I want is probably not a good idea.

That being said, I believe react-flow should still give a user the choice of enabling/disabling pointer-events in a straightforward manner. I'm not a fan of disablePointerEventsWhenInactive, I would inverse this by adding an option to disable the dragging. enableDragging which defaults to true seems like a better option in my opinion.

That being said, I have decided to take a different path for now and re-introducing the pointer-events: all inside of the node and improving the UX around the zooming/panning by highlighting the hovered node and changing to cursor to give a clearer indication as to which actions are accessible on his current cursor position.

[bartvanremortele]

perhaps we can figure out a better solution using d3-zoom's filter

[moklick]

Maybe enablePointerEvents would be a good option. And yes I would like to drop d3-zoom and d3-selection. But maybe you are right and we can figure out a better way how to use it for now

[bartvanremortele]

@moklick I did some searching to improve the zooming / panning behaviour in conjunction with click handlers on nodes and came across https://github.com/prc5/react-zoom-pan-pinch#readme this implementation. I believe this might be a good contender to replace d3-zoom.

Your thoughts?

[moklick]

I will have a look, thanks!

[dekelb]

Another feature that is related to this is an option to allow drag & drop the elements (nodes), but prevent creating new edges.
As far as I understand this is not possible atm.

@moklick is there an option for this out-of-the-box?

[moklick]

hey @dekelb

sorry I can't follow you. What do you want to achieve?

[dekelb]

thanks for the super fast reply @moklick !
I want to be able to move the nodes (drag and drop), but in my case - the creation of new edges (create new connection between nodes) should be disabled.

Maybe I missed something in the docs, but from what I understand there is no simple way to do this.

[moklick]

@dekelb can you open a new issue for this? thanks!

[dekelb]

@moklick just opened #291 - let me know what you think.

If you use nodesDraggable={false} then the onElementClick is not working anymore.

[moklick]

Good catch @emielwit! The bug should be fixed with version 4.2.2

[moklick]

hey @bartvanremortele I will close this issue for now. Feel free to open a new one for discussing the switch from d3-zoom to another zoom/pan library.

[pfidelus-dev]

Hi, I met issue similar to @emiel-betty but for onNodeDoubleClick event. I opened a bug #2525