mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-20 06:44:32 +00:00
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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user