Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-25 08:49:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor node library drag and drop (#617)

Browse Source
This commit is contained in:
Chenlei Hu
2024-08-24 17:40:56 -04:00
committed by GitHub
parent f4242f8a66
commit bff1dc91fa
5 changed files with 45 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/graph/GraphCanvas.vue
View File

@@ -20,7 +20,7 @@ import { ref, computed, onUnmounted, watch, onMounted, watchEffect } from 'vue'
import { app as comfyApp } from '@/scripts/app'
import { useSettingStore } from '@/stores/settingStore'
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
import { useWorkspaceStore } from '@/stores/workspaceStateStore'
import {
LiteGraph,
@@ -113,14 +113,18 @@ onMounted(async () => {
element: canvasRef.value,
onDrop: (event) => {
const loc = event.location.current.input
// Add an offset on x to make sure after adding the node, the cursor
// is on the node (top left corner)
const pos = comfyApp.clientPosToCanvasPos([loc.clientX - 20, loc.clientY])
const comfyNodeName = event.source.element.getAttribute(
'data-comfy-node-name'
)
const nodeDef = nodeDefStore.nodeDefsByName[comfyNodeName]
comfyApp.addNodeOnGraph(nodeDef, { pos })
const dndData = event.source.data
if (dndData.type === 'add-node') {
const nodeDef = dndData.data as ComfyNodeDefImpl
// Add an offset on x to make sure after adding the node, the cursor
// is on the node (top left corner)
const pos = comfyApp.clientPosToCanvasPos([
loc.clientX - 20,
loc.clientY
])
comfyApp.addNodeOnGraph(nodeDef, { pos })
}
}
})
emit('ready')