Fix dragging Vue nodes into canvas from library (#8118)

## Summary

Updates the node preview rendering to use the same app context as the
main app so it can access the same plugins

## Changes

Assigns manually created vnode app context to the current instances
context

## Review Focus

This is using somewhat advanced/almost-internal Vue functionality,
however I couldn't come up with a better alternative that didn't require
recreating an entirely new app and re-registering all dependencies or
redoing how draggable node previews are done.
The draggable image needs to be rendered synchronously, so rendering a
node in the active app and capturing that isn't possible to guarantee to
be done synchronously (afaik - suggestions welcome)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8118-Fix-dragging-Vue-nodes-into-canvas-from-library-2eb6d73d365081a0a956d8280e009592)
by [Unito](https://www.unito.io)
This commit is contained in:
pythongosssss
2026-01-16 21:50:54 -08:00
committed by GitHub
parent 7b3a9b40a5
commit 851e8beb29
2 changed files with 24 additions and 2 deletions

View File

@@ -22,7 +22,15 @@
</template>
<script setup lang="ts">
import { computed, h, nextTick, ref, render, watch } from 'vue'
import {
computed,
getCurrentInstance,
h,
nextTick,
ref,
render,
watch
} from 'vue'
import { useI18n } from 'vue-i18n'
import FolderCustomizationDialog from '@/components/common/CustomizationDialog.vue'
@@ -41,6 +49,8 @@ import type {
TreeNode
} from '@/types/treeExplorerTypes'
const instance = getCurrentInstance()!
const appContext = instance.appContext
const props = defineProps<{
filteredNodeDefs: ComfyNodeDefImpl[]
openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
@@ -154,6 +164,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
},
renderDragPreview(container) {
const vnode = h(NodePreview, { nodeDef: node.data })
vnode.appContext = appContext
render(vnode, container)
return () => {
render(null, container)