connectable single on nested nodes works weird

[Milad0071]

hi. i am trying to use connectable= "single" prop on nested nodes. but it does not work as i expect. when i add the prop, if one of other handles(input or output) has an edge, the prop activates for nested nodes and i can not draw any edges from them. is there a solution for this?

[Milad0071]

I also tried the prop on the example in the site and the result was the same. maybe there is a code to prevent this?

[bcakmakoglu]

To be clear: Each Handle needs a unique id.
You can't have duplicates. You can't re-use ids between different Nodes and their Handles.
All Handle ids need to be unique and different from other Handle ids.

[bcakmakoglu]

Any news on your issue? :)

[Milad0071]

hello i am trying to further develop my project for now but i will be back to solve that issue. meanwhile i have another question for you. i need my flowchart to be touchable drag and drop on mobile app version. but for now the drag and drop does not work on mobile version. can you please help me on this issue ?

[bcakmakoglu]

What drag and drop are you talking about? Moving nodes should work. Adding connections can be enabled with connectOnClick (dragging connection lines isn't supported for mobile).

If you're talking about a dnd sidebar, that's up to you how to solve that for mobile 😅 it's not a built-in feature after all.

[Milad0071]

oh yes you are right. sorry :D

[Milad0071]

i took this code from your library drag and drop part:
const onDragStart = (event, nodeType) => { if (event.dataTransfer) { event.dataTransfer.setData("application/vueflow", nodeType); event.dataTransfer.effectAllowed = "move"; } };
i am using this code to make my elements in sidebar to be draggable. this wont work in mobile. do i need to write custom code for this?

[bcakmakoglu]

That's because it's a very basic example that's not meant for mobile usage.
Drag events aren't supported by most mobile browsers, or rather they just don't listen to them.

Furthermore the dataTransfer properties is inconsistent between browsers, so you'd also be better off replacing that with something that works across all browsers (like a ref you simply share across components).

You'd have to implement Drag and Drop for mobile yourself, or find a suitable library that already handles dragging on touch events, because the example I provided is not sufficient for that 😅

It's just an example after all.

[bcakmakoglu]

Here's a stackoverflow post to help with the touch-drag support: https://stackoverflow.com/questions/68000255/html-drag-and-drop-on-touchscreen

That should give you an idea on how to accomplish the mobile support

[Milad0071]

i really thank you

[bcakmakoglu]

By the way, with the upcoming plugin api, I'll add a basic DnD plugin as well (see this PR for progress: #363)

I'll add touch support in that one, though it's still going to be a very simple implementation - more complex workflows might have to still use a more custom DnD approach than what I would offer but I just wanted to let you know in case this could suffice for your needs ^^

[Milad0071]

that is wonderful news. i am looking forward to it. thank you very much