mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
Update histroy for new outputs, spinner for active
A spinner is now displayed when a job is actively executing - Spinner has slightly incorrect sizing - Only one spinner is displayed regardless of output count History tracking change makes me very unhappy. I want to clean this up to correctly leverage vue reactivity in the future, but required functionality comes first
This commit is contained in:
@@ -211,7 +211,7 @@ const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
|
|||||||
await queueStore.update()
|
await queueStore.update()
|
||||||
// Only update assets if the assets sidebar is currently open
|
// Only update assets if the assets sidebar is currently open
|
||||||
// When sidebar is closed, AssetsSidebarTab.vue will refresh on mount
|
// When sidebar is closed, AssetsSidebarTab.vue will refresh on mount
|
||||||
if (sidebarTabStore.activeSidebarTabId === 'assets') {
|
if (sidebarTabStore.activeSidebarTabId === 'assets' || linearMode.value) {
|
||||||
await assetsStore.updateHistory()
|
await assetsStore.updateHistory()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,16 +34,19 @@ import { app } from '@/scripts/app'
|
|||||||
import { useCommandStore } from '@/stores/commandStore'
|
import { useCommandStore } from '@/stores/commandStore'
|
||||||
import { useExecutionStore } from '@/stores/executionStore'
|
import { useExecutionStore } from '@/stores/executionStore'
|
||||||
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
|
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
|
||||||
import { useQueueSettingsStore } from '@/stores/queueStore'
|
import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
|
||||||
import { cn } from '@/utils/tailwindUtil'
|
import { cn } from '@/utils/tailwindUtil'
|
||||||
|
|
||||||
const commandStore = useCommandStore()
|
const commandStore = useCommandStore()
|
||||||
const executionStore = useExecutionStore()
|
const executionStore = useExecutionStore()
|
||||||
const outputs = useMediaAssets('output')
|
const outputs = useMediaAssets('output')
|
||||||
const nodeOutputStore = useNodeOutputStore()
|
const nodeOutputStore = useNodeOutputStore()
|
||||||
|
const queueStore = useQueueStore()
|
||||||
const { isActiveSubscription } = useSubscription()
|
const { isActiveSubscription } = useSubscription()
|
||||||
const workflowStore = useWorkflowStore()
|
const workflowStore = useWorkflowStore()
|
||||||
|
|
||||||
|
const isRunning = computed(() => queueStore.runningTasks.length > 0)
|
||||||
|
|
||||||
const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
|
const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
|
||||||
useEventListener(
|
useEventListener(
|
||||||
app.rootGraph.events,
|
app.rootGraph.events,
|
||||||
@@ -327,15 +330,13 @@ function handleCenterWheel(e: WheelEvent) {
|
|||||||
ref="outputsRef"
|
ref="outputsRef"
|
||||||
class="h-full min-w-24 grow-1 p-3 overflow-y-auto border-r-1 border-node-component-border flex flex-col items-center"
|
class="h-full min-w-24 grow-1 p-3 overflow-y-auto border-r-1 border-node-component-border flex flex-col items-center"
|
||||||
>
|
>
|
||||||
|
<linear-job v-if="isRunning" class="py-3 w-full aspect-square px-1">
|
||||||
|
<ProgressSpinner class="size-full" />
|
||||||
|
</linear-job>
|
||||||
<linear-job
|
<linear-job
|
||||||
v-for="(item, index) in outputs.media.value"
|
v-for="(item, index) in outputs.media.value"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="
|
class="py-3 border-border-subtle flex flex-col w-full px-1 first:border-t-0 border-t-2"
|
||||||
cn(
|
|
||||||
'py-3 border-border-subtle flex flex-col w-full px-1',
|
|
||||||
index !== 0 && 'border-t-2'
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-for="(output, key) in allOutputs(item)"
|
v-for="(output, key) in allOutputs(item)"
|
||||||
@@ -393,7 +394,8 @@ function handleCenterWheel(e: WheelEvent) {
|
|||||||
v-if="
|
v-if="
|
||||||
activeLoad[0] === -1 &&
|
activeLoad[0] === -1 &&
|
||||||
activeLoad[1] === -1 &&
|
activeLoad[1] === -1 &&
|
||||||
nodeOutputStore.latestPreview[0]
|
nodeOutputStore.latestPreview[0] &&
|
||||||
|
isRunning
|
||||||
"
|
"
|
||||||
:src="nodeOutputStore.latestPreview[0]"
|
:src="nodeOutputStore.latestPreview[0]"
|
||||||
v-bind="slotProps"
|
v-bind="slotProps"
|
||||||
|
|||||||
Reference in New Issue
Block a user