mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 13:41:59 +00:00
App Mode dragAndDrop, text output, and scroll shadows (#10122)
- When in app mode, workflows can be loaded by dragging and dropping as elsewhere. - Dragging a file which is supported by a selected app input to the center panel will apply drop effects on the specific input - This overrides the loading of workflows - There's not currently an indicator for where the image will go. This is being considered for a followup PR - Outputs can be dragged from the assets panel onto nodes - This fixes behaviour outside of app mode as well - Has some thorny implementation specifics - Non-core nodes may not be able to accept these inputs without an update - Node DragOver filtering has reduced functionality when dragging from the assets pane. Nodes may have the blue border without being able to accept a drag operation. - When dropped onto the canvas, the workflow will load (a fix), but the workflow name will be the url of the image preview - The entire card is used for the drag preview <img width="329" height="380" alt="image" src="https://github.com/user-attachments/assets/2945f9a3-3e77-4e14-a812-4a361976390d" /> - Adds a new scroll-shadows tailwind util as an indicator that more content is available by scrolling. - Since a primary goal was preventing API costs overflowing, I've made the indicator fairly strong. This can be tuned later if needed  - Initial support for text outputs in App Mode - Also causes jobs with text outputs to incorrectly display in the assets panel with a generic 'check' icon instead of a text specific icon. This will need a dedicated pass, but shouldn't be overly onerous in the interim. <img width="1209" height="735" alt="text output" src="https://github.com/user-attachments/assets/fcd1cf9f-5d5c-434c-acd0-58d248237b99" /> NOTE: Displaying text outputs conflicted with the changes in #9622. I'll leave text output still disabled in this PR and open a new PR for reconciling text as an output so it can go through dedicated review. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10122-App-Mode-dragAndDrop-text-output-and-scroll-shadows-3256d73d3650810caaf8d75de94388c9) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
@@ -137,6 +137,21 @@ function nodeToNodeData(node: LGraphNode) {
|
||||
onDragOver: node.onDragOver
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDragDrop(e: DragEvent) {
|
||||
for (const { nodeData } of mappedSelections.value) {
|
||||
if (!nodeData?.onDragOver?.(e)) continue
|
||||
|
||||
const rawResult = nodeData?.onDragDrop?.(e)
|
||||
if (rawResult === false) continue
|
||||
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if ((await rawResult) === true) return
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ handleDragDrop })
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user