mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
4eded7c82b
- 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>
41 lines
882 B
Vue
41 lines
882 B
Vue
<template>
|
|
<span role="status" class="inline-flex">
|
|
<i
|
|
v-if="variant === 'loader'"
|
|
aria-hidden="true"
|
|
:class="cn('icon-[lucide--loader]', sizeClass)"
|
|
>
|
|
<div
|
|
class="size-full animate-spin bg-conic from-base-foreground from-10% to-muted-foreground to-10%"
|
|
/>
|
|
</i>
|
|
<i
|
|
v-else
|
|
aria-hidden="true"
|
|
:class="cn('icon-[lucide--loader-circle] animate-spin', sizeClass)"
|
|
/>
|
|
<span class="sr-only">{{ t('g.loading') }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { size } = defineProps<{
|
|
size?: 'sm' | 'md' | 'lg'
|
|
variant?: 'loader-circle' | 'loader'
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const sizeMap = {
|
|
sm: 'size-4',
|
|
md: 'size-8',
|
|
lg: 'size-12'
|
|
} as const
|
|
|
|
const sizeClass = size ? sizeMap[size] : ''
|
|
</script>
|