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

Update litegraph (Batch link move with shift + drag) (#268)

Browse Source 
* Refactor based on new event data format

* nit

* Add playwright tests

* Update test expectations [skip ci]

* nit

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Chenlei Hu
2024-07-30 19:06:58 -04:00
committed by GitHub
parent 7d2d6df57b
commit 0e3590d017
10 changed files with 352 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/NodeSearchBoxPopover.vue
View File

@@ -25,14 +25,10 @@ import { app } from '@/scripts/app'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import NodeSearchBox from './NodeSearchBox.vue'
import Dialog from 'primevue/dialog'
import {
INodeSlot,
LiteGraphCanvasEvent,
LGraphNode,
LinkReleaseContext
} from '@comfyorg/litegraph'
import { LiteGraphCanvasEvent, ConnectingLink } from '@comfyorg/litegraph'
import { FilterAndValue } from '@/services/nodeSearchService'
import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
import { ConnectingLinkImpl } from '@/types/litegraphTypes'
interface LiteGraphPointerEvent extends Event {
canvasX: number
@@ -67,36 +63,7 @@ const clearFilters = () => {
const closeDialog = () => {
visible.value = false
}
const connectNodeOnLinkRelease = (
node: LGraphNode,
context: LinkReleaseContext
) => {
const destIsInput = context.node_from !== undefined
const srcNode = (
destIsInput ? context.node_from : context.node_to
) as LGraphNode
const srcSlotIndex: number = context.slot_from.slot_index
const linkDataType = destIsInput
? context.type_filter_in
: context.type_filter_out
const destSlots = destIsInput ? node.inputs : node.outputs
const destSlotIndex = destSlots.findIndex(
(slot: INodeSlot) => slot.type === linkDataType
)
if (destSlotIndex === -1) {
console.warn(
`Could not find slot with type ${linkDataType} on node ${node.title}`
)
return
}
if (destIsInput) {
srcNode.connect(srcSlotIndex, node, destSlotIndex)
} else {
node.connect(destSlotIndex, srcNode, srcSlotIndex)
}
}
const addNode = (nodeDef: ComfyNodeDefImpl) => {
closeDialog()
@@ -104,7 +71,9 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
const eventDetail = triggerEvent.value.detail
if (eventDetail.subType === 'empty-release') {
connectNodeOnLinkRelease(node, eventDetail.linkReleaseContext)
eventDetail.linkReleaseContext.links.forEach((link: ConnectingLink) => {
ConnectingLinkImpl.createFromPlainObject(link).connectTo(node)
})
}
}
@@ -117,16 +86,17 @@ const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
}
if (e.detail.subType === 'empty-release') {
const destIsInput = e.detail.linkReleaseContext.node_from !== undefined
const context = e.detail.linkReleaseContext
if (context.links.length === 0) {
console.warn('Empty release with no links! This should never happen')
return
}
const firstLink = ConnectingLinkImpl.createFromPlainObject(context.links[0])
const filter = useNodeDefStore().nodeSearchService.getFilterById(
destIsInput ? 'input' : 'output'
firstLink.releaseSlotType
)
const value = destIsInput
? e.detail.linkReleaseContext.type_filter_in
: e.detail.linkReleaseContext.type_filter_out
addFilter([filter, value])
const dataType = firstLink.type
addFilter([filter, dataType])
}
triggerEvent.value = e
visible.value = true