noDragClassName should allow multiple class names

[jdaudier]

Please describe the feature that you want to propose

It would be great if noDragClassName could support multiple classnames.

I have a component that's dynamically created and I need a way to make it not draggable, but when I added that component's selelctor to noDragClassName, it broke the Handle's nodrag class.

I tried noDragClassName="nodrag, lb-composer-editor p", but it only worked for the nodrag class.

[moklick]

That's not how that prop is supposed to work. By default the noDragClassName is "nodrag". That means if you add "nodrag" to an element, the built-in drag handler wouldn't apply. You can change that by setting another class name via noDragClassName.

If you want to make an element inside a node not draggable, you could add the class name "nodrag" to that element. If it's the node itself, you can set node.draggable. Does that work for you?

[jdaudier]

@moklick For my scenario, I need to be able to make lb-composer-editor > p and nodrag both work. This is because I'm using a third party component and it's dynamic, so I don't have a easy way to add nodrag to those components. I was hoping noDragClassName can support comma separate string with multiple classes in this line https://github.com/xyflow/xyflow/blob/main/packages/system/src/xydrag/XYDrag.ts#L333-L338

[moklick]

Could you solve it with CSS?

.lb-composer-editor > p {
  pointer-events: none;
}

[jdaudier]

@moklick That didn't work, but I solved it with noDragClassName="nodrag, .lb-composer-editor > p".

TIL Your matches(selector) function will match either of the classes. matches works like CSS selectors, so the comma means either, like how div, p { color: red; } would work in CSS.

Thanks for your help!

[moklick]

Interesting! Thanks for sharing your solution.