Allow drag selection inside nodes

[hiepnguyen3001]

Please describe the feature that you want to propose

Currently, it is not possible to start a drag selection box inside a node. May I suggest a new property like enableDragSelect?

I'm aware this behavior means that you cannot drag the node itself anymore. But in that case, we can make it so that drag selection is only enabled inside node when it has a specified dragHandle. Then both dragging node by its drag handle and drag selection inside node is possible.

[bcakmakoglu]

You might wanna read this section of the docs.

TL;DR: add the nodrag class name to elements that should not initiate a drag action inside a node.

[hiepnguyen3001]

But that only prevents dragging the node, and you still cannot start drag selection from inside the node.

[bcakmakoglu]

Well, add some css to the element user-select: text; or all and you're good.

[hiepnguyen3001]

I did and it still doesn't work.

https://github.com/xyflow/xyflow/assets/139328005/c8e81e0f-6259-458f-b839-e15efb395da6

[bcakmakoglu]

Mh... not quite sure what the video is supposed to tell me? What exactly are you trying to achieve with "dragging" here?

[hiepnguyen3001]

In the video I start dragging outside of the box it triggers drag selection but when I do it from inside the box nothing happens.

[bcakmakoglu]

Aha! Well that's quite different from the original issue I assumed you had (thought you were trying to use some input text selection or whatever inside of a node, which the above class name + css would've allowed). So the problem is using the RF built-in selection box while having the mouse on a node, is that correct?

[bcakmakoglu]

If that's the case, I don't think that works out of the box sadly - so your initial request might make sense although that's for the maintainers to decide and not me 😄

At least we were able to clarify what the exact issue here is ^^

[moklick]

That's a good question @hiepnguyen3001. Unfortunately this is only possible with a workaround. You could listen to the selection key and set nodesDraggable={false} for example. Would that work?

[hiepnguyen3001]

That's a good question @hiepnguyen3001. Unfortunately this is only possible with a workaround. You could listen to the selection key and set nodesDraggable={false} for example. Would that work?

I don't think so @moklick. Even when I set nodesDraggable={false}, it's still not possible to start a selection box from inside a node.

[moklick]

Damn.. The only way I see then is to add a class or set a style directly that prevents all pointer events.