Stopping events propagating into parent

[moyalmic]

Hello, I'm trying to create a "toolbar" where I would have nodes that I can drag and drop into the canvas but I'm having a problem making the VueFlow component not react to dragging when I drag over the sidebar.

I've tried using the .stop() modifier on the mousedown and dragstart events, but the canvas still moves around even when I click on the overlaying side panel. Is there a different type of event I need to stop in order to get the canvas to not move around when I click on the sidebar?

Many thanks for any advice!

[bcakmakoglu]

You can add the nopan class name to the sidebar.
Though I am wondering why you would want to add a sidebar into the zoom+pan area?
Instead you could use the <Panel> component to add something like the controls in the bottom right of your screenshot.
Or you could use a sidebar that's outside of VueFlow altogether.

[moyalmic]

I'm trying to create a minimalistic editor, so not having an extra panel to the side and having a panel show up over the zoom+pan area to drag in a node. I wasn't aware of the <Panel> component. I'm guessing I can fill that with anything I would like? If so, that would probably be the ideal solution. Thank you very much!

[bcakmakoglu]

Yeah your use-case sounds more like you want a <Panel> that isn't affected by zooming+panning but still visually part of the VueFlow container ^^