🐛 [BUG]: Drag functionality does not work in VS Code's extension webview

[Aevarkan]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

Dragging with the mouse does not pan the background, or move nodes in VS Code's extension webview environment.

I tested it with Tauri's webview, and it did work. It seems to just be VS Code's extension environment that causes it.

Expected Behavior

Clicking and dragging with the mouse should move the background, or move the node in VS Code's extension webview.

Steps To Reproduce

Open VueFlow in VS Code's extension webview environment.

I've made this repository to demonstrate https://github.com/Aevarkan/webview-vueflow

1. Fork the repository on GitHub
2. Make a codespace for the repository
3. Wait an uncomfortable while for the codespace to start (it took around a minute).
4. Run the VS Code extension debugger
5. Open the extension debugger window
6. The webview should open automatically after an uncomfortable while (around a minute or two). If it doesn't, run the command Open Webview
7. Attempt to drag nodes and pan the background. It should give an error in the webview browser console.

Here's a video of that process:

vscode-webview.mp4

Minimal reproduction of the issue with CodeSandbox

No response

Relevant log output

runtime-dom.esm-bundler.js:681 Uncaught TypeError: el.addEventListener is not a function
    at addEventListener (runtime-dom.esm-bundler.js:681:6)
    at vue-flow-core.mjs:1138:10
    at Selection$1$1.selection_each$1 [as each] (vue-flow-core.mjs:844:18)
    at Selection$1$1.selection_on$1 [as on] (vue-flow-core.mjs:1162:10)
    at HTMLDivElement.mousedowned (vue-flow-core.mjs:3163:113)
    at HTMLDivElement.<anonymous> (vue-flow-core.mjs:1097:14)
addEventListener @ runtime-dom.esm-bundler.js:681
(anonymous) @ vue-flow-core.mjs:1138
selection_each$1 @ vue-flow-core.mjs:844
selection_on$1 @ vue-flow-core.mjs:1162
mousedowned @ vue-flow-core.mjs:3163
(anonymous) @ vue-flow-core.mjs:1097

Anything else?

Using these settings stopped the errors from happening when panning and dragging nodes, whilst also disabling that functionality completely.

:pan-on-drag="false"
:nodes-draggable="false"

I suspect the error has something to do with the useDrag composable. That is, of course, only my best guess at it.

I hope it's fine that there's no code sandbox link for this. This bug only shows up in the VS Code extension environment. I don't know a way to share it without having to clone or fork the repository. 🙂

[Aevarkan]

Actually, I've had a more thorough look, and it seems to not even be an issue with VueFlow, but instead Vue itself inside of web-views. I'll see if I can find any work-arounds to it.

[Aevarkan]

I ended up adding drag behaviour manually, using a custom composable.

Vue's event listener seems to work when put inside the template.

<template>
  <div class="custom-node-container" @mousedown="drag.onMouseDown">
    // rest of component
  </div>
</template>

Adding event listeners elsewhere needed this lovely thing:

document.addEventListener.call(window, "mousemove", onMouseMove)
document.addEventListener.call(window, "mouseup", onMouseUp)

Which I found in this stack overflow answer: https://stackoverflow.com/a/65394870

In case there's anyone else facing a similar problem, you can find the real code I used in my project here:
https://github.com/Aevarkan/dialogue-node-editor/blob/a70a60e1ed2465835e03670a074435e383569171/packages/app/src/composables/manualDrag.ts