mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-21 23:09:39 +00:00
Remove queue sidebar tab (#6724)
## Summary - drop the queue sidebar entry, its component, and the supporting composable so only the overlay-based queue UI remains - clean up the related tests and keybindings so nothing references the removed tab - prune the unused queue task card components to keep the repo tidy - remove unused queue sidebar translations and command strings across all locales ## Testing - pnpm typecheck - pnpm lint:fix ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6724-Remove-queue-sidebar-tab-2ae6d73d3650811db0d4c5ad4c5ffc8d) by [Unito](https://www.unito.io) --------- Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
This commit is contained in:
Benjamin Lu
@@ -16,7 +16,6 @@ import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
|
||||
import { SettingDialog } from './components/SettingDialog'
|
||||
import {
|
||||
NodeLibrarySidebarTab,
|
||||
QueueSidebarTab,
|
||||
WorkflowsSidebarTab
|
||||
} from './components/SidebarTab'
|
||||
import { Topbar } from './components/Topbar'
|
||||
@@ -31,7 +30,6 @@ type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
|
||||
class ComfyMenu {
|
||||
private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
|
||||
private _workflowsTab: WorkflowsSidebarTab | null = null
|
||||
private _queueTab: QueueSidebarTab | null = null
|
||||
private _topbar: Topbar | null = null
|
||||
|
||||
public readonly sideToolbar: Locator
|
||||
@@ -60,11 +58,6 @@ class ComfyMenu {
|
||||
return this._workflowsTab
|
||||
}
|
||||
|
||||
get queueTab() {
|
||||
this._queueTab ??= new QueueSidebarTab(this.page)
|
||||
return this._queueTab
|
||||
}
|
||||
|
||||
get topbar() {
|
||||
this._topbar ??= new Topbar(this.page)
|
||||
return this._topbar
|
||||
|
||||
@@ -148,124 +148,3 @@ export class WorkflowsSidebarTab extends SidebarTab {
|
||||
.click()
|
||||
}
|
||||
}
|
||||
|
||||
export class QueueSidebarTab extends SidebarTab {
|
||||
constructor(public readonly page: Page) {
|
||||
super(page, 'queue')
|
||||
}
|
||||
|
||||
get root() {
|
||||
return this.page.locator('.sidebar-content-container', { hasText: 'Queue' })
|
||||
}
|
||||
|
||||
get tasks() {
|
||||
return this.root.locator('[data-virtual-grid-item]')
|
||||
}
|
||||
|
||||
get visibleTasks() {
|
||||
return this.tasks.locator('visible=true')
|
||||
}
|
||||
|
||||
get clearButton() {
|
||||
return this.root.locator('.clear-all-button')
|
||||
}
|
||||
|
||||
get collapseTasksButton() {
|
||||
return this.getToggleExpandButton(false)
|
||||
}
|
||||
|
||||
get expandTasksButton() {
|
||||
return this.getToggleExpandButton(true)
|
||||
}
|
||||
|
||||
get noResultsPlaceholder() {
|
||||
return this.root.locator('.no-results-placeholder')
|
||||
}
|
||||
|
||||
get galleryImage() {
|
||||
return this.page.locator('.galleria-image')
|
||||
}
|
||||
|
||||
private getToggleExpandButton(isExpanded: boolean) {
|
||||
const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
|
||||
return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
|
||||
}
|
||||
|
||||
async open() {
|
||||
await super.open()
|
||||
return this.root.waitFor({ state: 'visible' })
|
||||
}
|
||||
|
||||
async close() {
|
||||
await super.close()
|
||||
await this.root.waitFor({ state: 'hidden' })
|
||||
}
|
||||
|
||||
async expandTasks() {
|
||||
await this.expandTasksButton.click()
|
||||
await this.collapseTasksButton.waitFor({ state: 'visible' })
|
||||
}
|
||||
|
||||
async collapseTasks() {
|
||||
await this.collapseTasksButton.click()
|
||||
await this.expandTasksButton.waitFor({ state: 'visible' })
|
||||
}
|
||||
|
||||
async waitForTasks() {
|
||||
return Promise.all([
|
||||
this.tasks.first().waitFor({ state: 'visible' }),
|
||||
this.tasks.last().waitFor({ state: 'visible' })
|
||||
])
|
||||
}
|
||||
|
||||
async scrollTasks(direction: 'up' | 'down') {
|
||||
const scrollToEl =
|
||||
direction === 'up' ? this.tasks.last() : this.tasks.first()
|
||||
await scrollToEl.scrollIntoViewIfNeeded()
|
||||
await this.waitForTasks()
|
||||
}
|
||||
|
||||
async clearTasks() {
|
||||
await this.clearButton.click()
|
||||
const confirmButton = this.page.getByLabel('Delete')
|
||||
await confirmButton.click()
|
||||
await this.noResultsPlaceholder.waitFor({ state: 'visible' })
|
||||
}
|
||||
|
||||
/** Set the width of the tab (out of 100). Must call before opening the tab */
|
||||
async setTabWidth(width: number) {
|
||||
if (width < 0 || width > 100) {
|
||||
throw new Error('Width must be between 0 and 100')
|
||||
}
|
||||
return this.page.evaluate((width) => {
|
||||
localStorage.setItem('queue', JSON.stringify([width, 100 - width]))
|
||||
}, width)
|
||||
}
|
||||
|
||||
getTaskPreviewButton(taskIndex: number) {
|
||||
return this.tasks.nth(taskIndex).getByRole('button')
|
||||
}
|
||||
|
||||
async openTaskPreview(taskIndex: number) {
|
||||
const previewButton = this.getTaskPreviewButton(taskIndex)
|
||||
await previewButton.click()
|
||||
return this.galleryImage.waitFor({ state: 'visible' })
|
||||
}
|
||||
|
||||
getGalleryImage(imageFilename: string) {
|
||||
return this.galleryImage.and(this.page.getByAltText(imageFilename))
|
||||
}
|
||||
|
||||
getTaskImage(imageFilename: string) {
|
||||
return this.tasks.getByAltText(imageFilename)
|
||||
}
|
||||
|
||||
/** Trigger the queue store and tasks to update */
|
||||
async triggerTasksUpdate() {
|
||||
await this.page.evaluate(() => {
|
||||
window['app']['api'].dispatchCustomEvent('status', {
|
||||
exec_info: { queue_remaining: 0 }
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,210 +0,0 @@
|
||||
import { expect } from '@playwright/test'
|
||||
|
||||
import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
|
||||
|
||||
test.describe.skip('Queue sidebar', () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
})
|
||||
|
||||
test('can display tasks', async ({ comfyPage }) => {
|
||||
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
||||
})
|
||||
|
||||
test('can display tasks after closing then opening', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.close()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
||||
})
|
||||
|
||||
test.describe('Virtual scroll', () => {
|
||||
const layouts = [
|
||||
{ description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
|
||||
{ description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
|
||||
{ description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
|
||||
]
|
||||
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage
|
||||
.setupHistory()
|
||||
.withTask(['example.webp'])
|
||||
.repeat(50)
|
||||
.setupRoutes()
|
||||
})
|
||||
|
||||
layouts.forEach(({ description, width, rows, cols }) => {
|
||||
const preRenderedRows = 1
|
||||
const preRenderedTasks = preRenderedRows * cols * 2
|
||||
const visibleTasks = rows * cols
|
||||
const expectRenderLimit = visibleTasks + preRenderedTasks
|
||||
|
||||
test.describe(description, () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.menu.queueTab.setTabWidth(width)
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
})
|
||||
|
||||
test('should not render items outside of view', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const renderedCount =
|
||||
await comfyPage.menu.queueTab.visibleTasks.count()
|
||||
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
||||
})
|
||||
|
||||
test('should teardown items after scrolling away', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.menu.queueTab.scrollTasks('down')
|
||||
const renderedCount =
|
||||
await comfyPage.menu.queueTab.visibleTasks.count()
|
||||
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
||||
})
|
||||
|
||||
test('should re-render items after scrolling away then back', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.menu.queueTab.scrollTasks('down')
|
||||
await comfyPage.menu.queueTab.scrollTasks('up')
|
||||
const renderedCount =
|
||||
await comfyPage.menu.queueTab.visibleTasks.count()
|
||||
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Expand tasks', () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
// 2-item batch and 3-item batch -> 3 additional items when expanded
|
||||
await comfyPage
|
||||
.setupHistory()
|
||||
.withTask(['example.webp', 'example.webp', 'example.webp'])
|
||||
.withTask(['example.webp', 'example.webp'])
|
||||
.setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
})
|
||||
|
||||
test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
|
||||
const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
|
||||
await comfyPage.menu.queueTab.expandTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
|
||||
initialCount + 3
|
||||
)
|
||||
})
|
||||
|
||||
test('can collapse flat tasks', async ({ comfyPage }) => {
|
||||
const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
|
||||
await comfyPage.menu.queueTab.expandTasks()
|
||||
await comfyPage.menu.queueTab.collapseTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
|
||||
initialCount
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Clear tasks', () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage
|
||||
.setupHistory()
|
||||
.withTask(['example.webp'])
|
||||
.repeat(6)
|
||||
.setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
})
|
||||
|
||||
test('can clear all tasks', async ({ comfyPage }) => {
|
||||
await comfyPage.menu.queueTab.clearTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
|
||||
expect(
|
||||
await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
|
||||
).toBe(true)
|
||||
})
|
||||
|
||||
test('can load new tasks after clearing all', async ({ comfyPage }) => {
|
||||
await comfyPage.menu.queueTab.clearTasks()
|
||||
await comfyPage.menu.queueTab.close()
|
||||
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Gallery', () => {
|
||||
const firstImage = 'example.webp'
|
||||
const secondImage = 'image32x32.webp'
|
||||
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage
|
||||
.setupHistory()
|
||||
.withTask([secondImage])
|
||||
.withTask([firstImage])
|
||||
.setupRoutes()
|
||||
await comfyPage.menu.queueTab.open()
|
||||
await comfyPage.menu.queueTab.waitForTasks()
|
||||
await comfyPage.menu.queueTab.openTaskPreview(0)
|
||||
})
|
||||
|
||||
test('displays gallery image after opening task preview', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.nextFrame()
|
||||
await expect(
|
||||
comfyPage.menu.queueTab.getGalleryImage(firstImage)
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
test('maintains active gallery item when new tasks are added', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
// Add a new task while the gallery is still open
|
||||
const newImage = 'image64x64.webp'
|
||||
comfyPage.setupHistory().withTask([newImage])
|
||||
await comfyPage.menu.queueTab.triggerTasksUpdate()
|
||||
await comfyPage.page.waitForTimeout(500)
|
||||
const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
|
||||
await newTask.waitFor({ state: 'visible' })
|
||||
// The active gallery item should still be the initial image
|
||||
await expect(
|
||||
comfyPage.menu.queueTab.getGalleryImage(firstImage)
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
test.describe('Gallery navigation', () => {
|
||||
const paths: {
|
||||
description: string
|
||||
path: ('Right' | 'Left')[]
|
||||
end: string
|
||||
}[] = [
|
||||
{ description: 'Right', path: ['Right'], end: secondImage },
|
||||
{ description: 'Left', path: ['Right', 'Left'], end: firstImage },
|
||||
{ description: 'Left wrap', path: ['Left'], end: secondImage },
|
||||
{ description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
|
||||
]
|
||||
|
||||
paths.forEach(({ description, path, end }) => {
|
||||
test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
|
||||
for (const direction of path)
|
||||
await comfyPage.page.keyboard.press(`Arrow${direction}`, {
|
||||
delay: 256
|
||||
})
|
||||
await comfyPage.nextFrame()
|
||||
await expect(
|
||||
comfyPage.menu.queueTab.getGalleryImage(end)
|
||||
).toBeVisible()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
@@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<SidebarTabTemplate :title="$t('sideToolbar.queue')">
|
||||
<template #tool-buttons>
|
||||
<Button
|
||||
v-tooltip.bottom="$t(`sideToolbar.queueTab.${imageFit}ImagePreview`)"
|
||||
:icon="
|
||||
imageFit === 'cover'
|
||||
? 'pi pi-arrow-down-left-and-arrow-up-right-to-center'
|
||||
: 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
|
||||
"
|
||||
text
|
||||
severity="secondary"
|
||||
class="toggle-expanded-button"
|
||||
@click="toggleImageFit"
|
||||
/>
|
||||
<Button
|
||||
v-if="isInFolderView"
|
||||
v-tooltip.bottom="$t('sideToolbar.queueTab.backToAllTasks')"
|
||||
icon="pi pi-arrow-left"
|
||||
text
|
||||
severity="secondary"
|
||||
class="back-button"
|
||||
@click="exitFolderView"
|
||||
/>
|
||||
<template v-else>
|
||||
<Button
|
||||
v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
|
||||
:icon="isExpanded ? 'pi pi-images' : 'pi pi-image'"
|
||||
text
|
||||
severity="secondary"
|
||||
class="toggle-expanded-button"
|
||||
@click="toggleExpanded"
|
||||
/>
|
||||
<Button
|
||||
v-if="queueStore.hasPendingTasks"
|
||||
v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
|
||||
icon="pi pi-stop"
|
||||
severity="danger"
|
||||
text
|
||||
@click="() => commandStore.execute('Comfy.ClearPendingTasks')"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
severity="primary"
|
||||
class="clear-all-button"
|
||||
@click="confirmRemoveAll($event)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<template #body>
|
||||
<VirtualGrid
|
||||
v-if="allTasks?.length"
|
||||
:items="allTasks"
|
||||
:grid-style="{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
|
||||
padding: '0.5rem',
|
||||
gap: '0.5rem'
|
||||
}"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<TaskItem
|
||||
:task="item"
|
||||
:is-flat-task="isExpanded || isInFolderView"
|
||||
@contextmenu="handleContextMenu"
|
||||
@preview="handlePreview"
|
||||
@task-output-length-clicked="enterFolderView($event)"
|
||||
/>
|
||||
</template>
|
||||
</VirtualGrid>
|
||||
<div v-else-if="queueStore.isLoading">
|
||||
<ProgressSpinner
|
||||
style="width: 50px; left: 50%; transform: translateX(-50%)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<NoResultsPlaceholder
|
||||
icon="pi pi-info-circle"
|
||||
:title="$t('g.noTasksFound')"
|
||||
:message="$t('g.noTasksFoundMessage')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SidebarTabTemplate>
|
||||
<ConfirmPopup />
|
||||
<ContextMenu ref="menu" :model="menuItems" />
|
||||
<ResultGallery
|
||||
v-model:active-index="galleryActiveIndex"
|
||||
:all-gallery-items="allGalleryItems"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from 'primevue/button'
|
||||
import ConfirmPopup from 'primevue/confirmpopup'
|
||||
import ContextMenu from 'primevue/contextmenu'
|
||||
import type { MenuItem } from 'primevue/menuitem'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import { useConfirm } from 'primevue/useconfirm'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { computed, ref, shallowRef, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
|
||||
import VirtualGrid from '@/components/common/VirtualGrid.vue'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
|
||||
import { api } from '@/scripts/api'
|
||||
import { app } from '@/scripts/app'
|
||||
import { useLitegraphService } from '@/services/litegraphService'
|
||||
import { useCommandStore } from '@/stores/commandStore'
|
||||
import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
|
||||
import { useQueueStore } from '@/stores/queueStore'
|
||||
|
||||
import SidebarTabTemplate from './SidebarTabTemplate.vue'
|
||||
import ResultGallery from './queue/ResultGallery.vue'
|
||||
import TaskItem from './queue/TaskItem.vue'
|
||||
|
||||
const IMAGE_FIT = 'Comfy.Queue.ImageFit'
|
||||
const confirm = useConfirm()
|
||||
const toast = useToast()
|
||||
const queueStore = useQueueStore()
|
||||
const settingStore = useSettingStore()
|
||||
const commandStore = useCommandStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// Expanded view: show all outputs in a flat list.
|
||||
const isExpanded = ref(false)
|
||||
const galleryActiveIndex = ref(-1)
|
||||
const allGalleryItems = shallowRef<ResultItemImpl[]>([])
|
||||
// Folder view: only show outputs from a single selected task.
|
||||
const folderTask = ref<TaskItemImpl | null>(null)
|
||||
const isInFolderView = computed(() => folderTask.value !== null)
|
||||
const imageFit = computed<string>(() => settingStore.get(IMAGE_FIT))
|
||||
|
||||
const allTasks = computed(() =>
|
||||
isInFolderView.value
|
||||
? folderTask.value
|
||||
? folderTask.value.flatten()
|
||||
: []
|
||||
: isExpanded.value
|
||||
? queueStore.flatTasks
|
||||
: queueStore.tasks
|
||||
)
|
||||
const updateGalleryItems = () => {
|
||||
allGalleryItems.value = allTasks.value.flatMap((task: TaskItemImpl) => {
|
||||
const previewOutput = task.previewOutput
|
||||
return previewOutput ? [previewOutput] : []
|
||||
})
|
||||
}
|
||||
|
||||
const toggleExpanded = () => {
|
||||
isExpanded.value = !isExpanded.value
|
||||
}
|
||||
|
||||
const removeTask = async (task: TaskItemImpl) => {
|
||||
if (task.isRunning) {
|
||||
await api.interrupt(task.promptId)
|
||||
}
|
||||
await queueStore.delete(task)
|
||||
}
|
||||
|
||||
const removeAllTasks = async () => {
|
||||
await queueStore.clear()
|
||||
}
|
||||
|
||||
const confirmRemoveAll = (event: Event) => {
|
||||
confirm.require({
|
||||
target: event.currentTarget as HTMLElement,
|
||||
message: 'Do you want to delete all tasks?',
|
||||
icon: 'pi pi-info-circle',
|
||||
rejectProps: {
|
||||
label: 'Cancel',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Delete',
|
||||
severity: 'danger'
|
||||
},
|
||||
accept: async () => {
|
||||
await removeAllTasks()
|
||||
toast.add({
|
||||
severity: 'info',
|
||||
summary: 'Confirmed',
|
||||
detail: 'Tasks deleted',
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
|
||||
const menuTargetTask = ref<TaskItemImpl | null>(null)
|
||||
const menuTargetNode = ref<ComfyNode | null>(null)
|
||||
const menuItems = computed<MenuItem[]>(() => {
|
||||
const items: MenuItem[] = [
|
||||
{
|
||||
label: t('g.delete'),
|
||||
icon: 'pi pi-trash',
|
||||
command: () => menuTargetTask.value && removeTask(menuTargetTask.value),
|
||||
disabled: isExpanded.value || isInFolderView.value
|
||||
},
|
||||
{
|
||||
label: t('g.loadWorkflow'),
|
||||
icon: 'pi pi-file-export',
|
||||
command: () => menuTargetTask.value?.loadWorkflow(app),
|
||||
disabled: isCloud
|
||||
? !menuTargetTask.value?.isHistory
|
||||
: !menuTargetTask.value?.workflow
|
||||
},
|
||||
{
|
||||
label: t('g.goToNode'),
|
||||
icon: 'pi pi-arrow-circle-right',
|
||||
command: () => {
|
||||
if (!menuTargetNode.value) return
|
||||
useLitegraphService().goToNode(menuTargetNode.value.id)
|
||||
},
|
||||
visible: !!menuTargetNode.value
|
||||
}
|
||||
]
|
||||
|
||||
if (menuTargetTask.value?.previewOutput?.mediaType === 'images') {
|
||||
items.push({
|
||||
label: t('g.setAsBackground'),
|
||||
icon: 'pi pi-image',
|
||||
command: () => {
|
||||
const url = menuTargetTask.value?.previewOutput?.url
|
||||
if (url) {
|
||||
void settingStore.set('Comfy.Canvas.BackgroundImage', url)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const handleContextMenu = ({
|
||||
task,
|
||||
event,
|
||||
node
|
||||
}: {
|
||||
task: TaskItemImpl
|
||||
event: Event
|
||||
node: ComfyNode | null
|
||||
}) => {
|
||||
menuTargetTask.value = task
|
||||
menuTargetNode.value = node
|
||||
menu.value?.show(event)
|
||||
}
|
||||
|
||||
const handlePreview = (task: TaskItemImpl) => {
|
||||
updateGalleryItems()
|
||||
galleryActiveIndex.value = allGalleryItems.value.findIndex(
|
||||
(item) => item.url === task.previewOutput?.url
|
||||
)
|
||||
}
|
||||
|
||||
const enterFolderView = (task: TaskItemImpl) => {
|
||||
folderTask.value = task
|
||||
}
|
||||
|
||||
const exitFolderView = () => {
|
||||
folderTask.value = null
|
||||
}
|
||||
|
||||
const toggleImageFit = async () => {
|
||||
await settingStore.set(
|
||||
IMAGE_FIT,
|
||||
imageFit.value === 'cover' ? 'contain' : 'cover'
|
||||
)
|
||||
}
|
||||
|
||||
watch(allTasks, () => {
|
||||
const isGalleryOpen = galleryActiveIndex.value !== -1
|
||||
if (!isGalleryOpen) return
|
||||
|
||||
const prevLength = allGalleryItems.value.length
|
||||
updateGalleryItems()
|
||||
const lengthChange = allGalleryItems.value.length - prevLength
|
||||
if (!lengthChange) return
|
||||
|
||||
const newIndex = galleryActiveIndex.value + lengthChange
|
||||
galleryActiveIndex.value = Math.max(0, newIndex)
|
||||
})
|
||||
</script>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="resultContainer"
|
||||
class="result-container"
|
||||
@click="handlePreviewClick"
|
||||
>
|
||||
<ComfyImage
|
||||
v-if="result.isImage"
|
||||
:src="result.url"
|
||||
class="task-output-image"
|
||||
:contain="imageFit === 'contain'"
|
||||
:alt="result.filename"
|
||||
/>
|
||||
<ResultVideo v-else-if="result.isVideo" :result="result" />
|
||||
<ResultAudio v-else-if="result.isAudio" :result="result" />
|
||||
<div v-else class="task-result-preview">
|
||||
<i class="pi pi-file" />
|
||||
<span>{{ result.mediaType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import ComfyImage from '@/components/common/ComfyImage.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import type { ResultItemImpl } from '@/stores/queueStore'
|
||||
|
||||
import ResultAudio from './ResultAudio.vue'
|
||||
import ResultVideo from './ResultVideo.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
result: ResultItemImpl
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'preview', result: ResultItemImpl): void
|
||||
}>()
|
||||
|
||||
const resultContainer = ref<HTMLElement | null>(null)
|
||||
const settingStore = useSettingStore()
|
||||
const imageFit = computed<string>(() =>
|
||||
settingStore.get('Comfy.Queue.ImageFit')
|
||||
)
|
||||
|
||||
const handlePreviewClick = () => {
|
||||
if (props.result.supportsPreview) {
|
||||
emit('preview', props.result)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.result.mediaType === 'images') {
|
||||
resultContainer.value?.querySelectorAll('img').forEach((img) => {
|
||||
img.draggable = true
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.result-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.result-container:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
@@ -1,271 +0,0 @@
|
||||
<template>
|
||||
<div class="task-item" @contextmenu="handleContextMenu">
|
||||
<div class="task-result-preview">
|
||||
<template
|
||||
v-if="
|
||||
task.displayStatus === TaskItemDisplayStatus.Completed ||
|
||||
cancelledWithResults
|
||||
"
|
||||
>
|
||||
<ResultItem
|
||||
v-if="flatOutputs.length && coverResult"
|
||||
:result="coverResult"
|
||||
@preview="handlePreview"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="task.displayStatus === TaskItemDisplayStatus.Running">
|
||||
<i v-if="!progressPreviewBlobUrl" class="pi pi-spin pi-spinner" />
|
||||
<img
|
||||
v-else
|
||||
:src="progressPreviewBlobUrl"
|
||||
class="progress-preview-img"
|
||||
/>
|
||||
</template>
|
||||
<span v-else-if="task.displayStatus === TaskItemDisplayStatus.Pending"
|
||||
>...</span
|
||||
>
|
||||
<i
|
||||
v-else-if="cancelledWithoutResults"
|
||||
class="pi pi-exclamation-triangle"
|
||||
/>
|
||||
<i
|
||||
v-else-if="task.displayStatus === TaskItemDisplayStatus.Failed"
|
||||
class="pi pi-exclamation-circle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="task-item-details">
|
||||
<div class="tag-wrapper status-tag-group">
|
||||
<Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
|
||||
<Button
|
||||
class="task-node-link"
|
||||
:label="`${node?.type} (#${node?.id})`"
|
||||
link
|
||||
size="small"
|
||||
@click="
|
||||
() => {
|
||||
if (!node) return
|
||||
litegraphService.goToNode(node.id)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Tag>
|
||||
<Tag :severity="taskTagSeverity(task.displayStatus)">
|
||||
<span v-html="taskStatusText(task.displayStatus)" />
|
||||
<span v-if="task.isHistory" class="task-time">
|
||||
{{ formatTime(task.executionTimeInSeconds) }}
|
||||
</span>
|
||||
<span v-if="isFlatTask" class="task-prompt-id">
|
||||
{{ task.promptId.split('-')[0] }}
|
||||
</span>
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="tag-wrapper">
|
||||
<Button
|
||||
v-if="task.isHistory && flatOutputs.length > 1"
|
||||
outlined
|
||||
@click="handleOutputLengthClick"
|
||||
>
|
||||
<span style="font-weight: 700">{{ flatOutputs.length }}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from 'primevue/button'
|
||||
import Tag from 'primevue/tag'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
|
||||
import { api } from '@/scripts/api'
|
||||
import { useLitegraphService } from '@/services/litegraphService'
|
||||
import { TaskItemDisplayStatus } from '@/stores/queueStore'
|
||||
import type { TaskItemImpl } from '@/stores/queueStore'
|
||||
|
||||
import ResultItem from './ResultItem.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
task: TaskItemImpl
|
||||
isFlatTask: boolean
|
||||
}>()
|
||||
|
||||
const litegraphService = useLitegraphService()
|
||||
|
||||
const flatOutputs = props.task.flatOutputs
|
||||
const coverResult = flatOutputs.length
|
||||
? props.task.previewOutput || flatOutputs[0]
|
||||
: null
|
||||
// Using `==` instead of `===` because NodeId can be a string or a number
|
||||
const node: ComfyNode | null =
|
||||
flatOutputs.length && props.task.workflow
|
||||
? (props.task.workflow.nodes.find(
|
||||
(n: ComfyNode) => n.id == coverResult?.nodeId
|
||||
) ?? null)
|
||||
: null
|
||||
const progressPreviewBlobUrl = ref('')
|
||||
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: 'contextmenu',
|
||||
value: { task: TaskItemImpl; event: MouseEvent; node: ComfyNode | null }
|
||||
): void
|
||||
(e: 'preview', value: TaskItemImpl): void
|
||||
(e: 'task-output-length-clicked', value: TaskItemImpl): void
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
api.addEventListener('b_preview', onProgressPreviewReceived)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (progressPreviewBlobUrl.value) {
|
||||
URL.revokeObjectURL(progressPreviewBlobUrl.value)
|
||||
}
|
||||
api.removeEventListener('b_preview', onProgressPreviewReceived)
|
||||
})
|
||||
|
||||
const handleContextMenu = (e: MouseEvent) => {
|
||||
emit('contextmenu', { task: props.task, event: e, node })
|
||||
}
|
||||
|
||||
const handlePreview = () => {
|
||||
emit('preview', props.task)
|
||||
}
|
||||
|
||||
const handleOutputLengthClick = () => {
|
||||
emit('task-output-length-clicked', props.task)
|
||||
}
|
||||
|
||||
const taskTagSeverity = (status: TaskItemDisplayStatus) => {
|
||||
switch (status) {
|
||||
case TaskItemDisplayStatus.Pending:
|
||||
return 'secondary'
|
||||
case TaskItemDisplayStatus.Running:
|
||||
return 'info'
|
||||
case TaskItemDisplayStatus.Completed:
|
||||
return 'success'
|
||||
case TaskItemDisplayStatus.Failed:
|
||||
return 'danger'
|
||||
case TaskItemDisplayStatus.Cancelled:
|
||||
return 'warn'
|
||||
}
|
||||
}
|
||||
|
||||
const taskStatusText = (status: TaskItemDisplayStatus) => {
|
||||
switch (status) {
|
||||
case TaskItemDisplayStatus.Pending:
|
||||
return 'Pending'
|
||||
case TaskItemDisplayStatus.Running:
|
||||
return '<i class="pi pi-spin pi-spinner" style="font-weight: bold"></i> Running'
|
||||
case TaskItemDisplayStatus.Completed:
|
||||
return '<i class="pi pi-check" style="font-weight: bold"></i>'
|
||||
case TaskItemDisplayStatus.Failed:
|
||||
return 'Failed'
|
||||
case TaskItemDisplayStatus.Cancelled:
|
||||
return 'Cancelled'
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (time?: number) => {
|
||||
if (time === undefined) {
|
||||
return ''
|
||||
}
|
||||
return `${time.toFixed(2)}s`
|
||||
}
|
||||
|
||||
const onProgressPreviewReceived = async ({ detail }: CustomEvent) => {
|
||||
if (props.task.displayStatus === TaskItemDisplayStatus.Running) {
|
||||
if (progressPreviewBlobUrl.value) {
|
||||
URL.revokeObjectURL(progressPreviewBlobUrl.value)
|
||||
}
|
||||
progressPreviewBlobUrl.value = URL.createObjectURL(detail)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelledWithResults = computed(() => {
|
||||
return (
|
||||
props.task.displayStatus === TaskItemDisplayStatus.Cancelled &&
|
||||
flatOutputs.length
|
||||
)
|
||||
})
|
||||
|
||||
const cancelledWithoutResults = computed(() => {
|
||||
return (
|
||||
props.task.displayStatus === TaskItemDisplayStatus.Cancelled &&
|
||||
flatOutputs.length === 0
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-result-preview {
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.task-result-preview i,
|
||||
.task-result-preview span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task-item-details {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none; /* Allow clicks to pass through this div */
|
||||
}
|
||||
|
||||
/* Make individual controls clickable again by restoring pointer events */
|
||||
.task-item-details .tag-wrapper,
|
||||
.task-item-details button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.task-node-link {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* In dark mode, transparent background color for tags is not ideal for tags that
|
||||
are floating on top of images. */
|
||||
.tag-wrapper {
|
||||
background-color: var(--p-primary-contrast-color);
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.node-name-tag {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.status-tag-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.progress-preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
</style>
|
||||
@@ -181,7 +181,6 @@ Composables for sidebar functionality:
|
||||
|------------|-------------|
|
||||
| `useModelLibrarySidebarTab` | Manages the model library sidebar tab |
|
||||
| `useNodeLibrarySidebarTab` | Manages the node library sidebar tab |
|
||||
| `useQueueSidebarTab` | Manages the queue sidebar tab |
|
||||
| `useWorkflowsSidebarTab` | Manages the workflows sidebar tab |
|
||||
|
||||
### Tree
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { markRaw } from 'vue'
|
||||
|
||||
import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
|
||||
import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
|
||||
import type { SidebarTabExtension } from '@/types/extensionTypes'
|
||||
|
||||
export const useQueueSidebarTab = (): SidebarTabExtension => {
|
||||
const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
|
||||
return {
|
||||
id: 'queue',
|
||||
icon: 'pi pi-history',
|
||||
iconBadge: () => {
|
||||
const value = queuePendingTaskCountStore.count.toString()
|
||||
return value === '0' ? null : value
|
||||
},
|
||||
title: 'sideToolbar.queue',
|
||||
tooltip: 'sideToolbar.queue',
|
||||
label: 'sideToolbar.labels.queue',
|
||||
component: markRaw(QueueSidebarTab),
|
||||
type: 'vue'
|
||||
}
|
||||
}
|
||||
@@ -30,12 +30,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
|
||||
},
|
||||
commandId: 'Comfy.RefreshNodeDefinitions'
|
||||
},
|
||||
{
|
||||
combo: {
|
||||
key: 'q'
|
||||
},
|
||||
commandId: 'Workspace.ToggleSidebarTab.queue'
|
||||
},
|
||||
{
|
||||
combo: {
|
||||
key: 'w'
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "تبديل الشريط الجانبي لمكتبة العقد",
|
||||
"tooltip": "مكتبة العقد"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "تبديل الشريط الجانبي لقائمة الانتظار",
|
||||
"tooltip": "قائمة الانتظار"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "تبديل الشريط الجانبي لسير العمل",
|
||||
"tooltip": "سير العمل"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "فتح سير العمل من نظام الملفات المحلي",
|
||||
"queue": "قائمة الانتظار",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "العودة إلى جميع المهام",
|
||||
"clearPendingTasks": "مسح المهام المعلقة",
|
||||
"containImagePreview": "ملء معاينة الصورة",
|
||||
"coverImagePreview": "تكييف معاينة الصورة",
|
||||
"filter": "تصفية النتائج",
|
||||
"filters": {
|
||||
"hideCached": "إخفاء المخزنة مؤقتًا",
|
||||
"hideCanceled": "إخفاء الملغاة"
|
||||
},
|
||||
"showFlatList": "عرض القائمة المسطحة"
|
||||
},
|
||||
"templates": "القوالب",
|
||||
"themeToggle": "تبديل المظهر",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -284,12 +284,8 @@
|
||||
"label": "Toggle Node Library Sidebar",
|
||||
"tooltip": "Node Library"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "Toggle Queue Sidebar",
|
||||
"tooltip": "Queue"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "Toggle Workflows Sidebar",
|
||||
"tooltip": "Workflows"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -682,18 +682,6 @@
|
||||
},
|
||||
"modelLibrary": "Model Library",
|
||||
"downloads": "Downloads",
|
||||
"queueTab": {
|
||||
"showFlatList": "Show Flat List",
|
||||
"backToAllTasks": "Back to All Tasks",
|
||||
"containImagePreview": "Fill Image Preview",
|
||||
"coverImagePreview": "Fit Image Preview",
|
||||
"clearPendingTasks": "Clear Pending Tasks",
|
||||
"filter": "Filter Outputs",
|
||||
"filters": {
|
||||
"hideCached": "Hide Cached",
|
||||
"hideCanceled": "Hide Canceled"
|
||||
}
|
||||
},
|
||||
"queueProgressOverlay": {
|
||||
"title": "Queue Progress",
|
||||
"total": "Total: {percent}",
|
||||
@@ -2188,4 +2176,4 @@
|
||||
"replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "Alternar Barra Lateral de Biblioteca de Nodos",
|
||||
"tooltip": "Biblioteca de Nodos"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "Alternar Barra Lateral de Cola",
|
||||
"tooltip": "Cola"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "Alternar Barra Lateral de Flujos de Trabajo",
|
||||
"tooltip": "Flujos de Trabajo"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "Abrir flujo de trabajo en el sistema de archivos local",
|
||||
"queue": "Cola",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "Volver a todas las tareas",
|
||||
"clearPendingTasks": "Borrar tareas pendientes",
|
||||
"containImagePreview": "Llenar vista previa de la imagen",
|
||||
"coverImagePreview": "Ajustar vista previa de la imagen",
|
||||
"filter": "Filtrar salidas",
|
||||
"filters": {
|
||||
"hideCached": "Ocultar en caché",
|
||||
"hideCanceled": "Ocultar cancelados"
|
||||
},
|
||||
"showFlatList": "Mostrar lista plana"
|
||||
},
|
||||
"templates": "Plantillas",
|
||||
"themeToggle": "Cambiar tema",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "Basculer la barre latérale de la bibliothèque de nœuds",
|
||||
"tooltip": "Bibliothèque de nœuds"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "Basculer la barre latérale de la file d'attente",
|
||||
"tooltip": "File d'attente"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "Basculer la barre latérale des flux de travail",
|
||||
"tooltip": "Flux de travail"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "Ouvrir le flux de travail dans le système de fichiers local",
|
||||
"queue": "File d'attente",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "Retour à toutes les tâches",
|
||||
"clearPendingTasks": "Effacer les tâches en attente",
|
||||
"containImagePreview": "Remplir l'aperçu de l'image",
|
||||
"coverImagePreview": "Adapter l'aperçu de l'image",
|
||||
"filter": "Filtrer les sorties",
|
||||
"filters": {
|
||||
"hideCached": "Masquer le cache",
|
||||
"hideCanceled": "Masquer les annulations"
|
||||
},
|
||||
"showFlatList": "Afficher la liste plate"
|
||||
},
|
||||
"templates": "Modèles",
|
||||
"themeToggle": "Basculer le thème",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "ノードライブラリサイドバーの切り替え",
|
||||
"tooltip": "ノードライブラリ"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "キューサイドバーの切り替え",
|
||||
"tooltip": "キュー"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "ワークフローサイドバーの切り替え",
|
||||
"tooltip": "ワークフロー"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "ローカルでワークフローを開く",
|
||||
"queue": "キュー",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "すべてのタスクに戻る",
|
||||
"clearPendingTasks": "保留中のタスクをクリア",
|
||||
"containImagePreview": "画像プレビューを含める",
|
||||
"coverImagePreview": "画像プレビューに合わせる",
|
||||
"filter": "出力をフィルタ",
|
||||
"filters": {
|
||||
"hideCached": "キャッシュを非表示",
|
||||
"hideCanceled": "キャンセル済みを非表示"
|
||||
},
|
||||
"showFlatList": "フラットリストを表示"
|
||||
},
|
||||
"templates": "テンプレート",
|
||||
"themeToggle": "テーマを切り替え",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "노드 라이브러리 사이드바 토글",
|
||||
"tooltip": "노드 라이브러리"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "실행 큐 사이드바 토글",
|
||||
"tooltip": "실행 큐"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "워크플로 사이드바 토글",
|
||||
"tooltip": "워크플로"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "로컬 파일 시스템에서 워크플로 열기",
|
||||
"queue": "실행 대기열",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "모든 작업으로 돌아가기",
|
||||
"clearPendingTasks": "보류 중인 작업 지우기",
|
||||
"containImagePreview": "이미지 미리보기 채우기",
|
||||
"coverImagePreview": "이미지 미리보기 맞추기",
|
||||
"filter": "출력 필터",
|
||||
"filters": {
|
||||
"hideCached": "캐시 숨기기",
|
||||
"hideCanceled": "취소된 작업 숨기기"
|
||||
},
|
||||
"showFlatList": "평면 목록 표시"
|
||||
},
|
||||
"templates": "템플릿",
|
||||
"themeToggle": "테마 전환",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "Переключить боковую панель библиотеки нод",
|
||||
"tooltip": "Библиотека нод"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "Переключить боковую панель очереди",
|
||||
"tooltip": "Очередь"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "Переключить боковую панель рабочих процессов",
|
||||
"tooltip": "Рабочие процессы"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "Открыть рабочий процесс в локальной файловой системе",
|
||||
"queue": "Очередь",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "Вернуться ко всем задачам",
|
||||
"clearPendingTasks": "Очистить отложенные задачи",
|
||||
"containImagePreview": "Предпросмотр заливающего изображения",
|
||||
"coverImagePreview": "Предпросмотр подходящего изображения",
|
||||
"filter": "Фильтровать выводы",
|
||||
"filters": {
|
||||
"hideCached": "Скрыть кэшированные",
|
||||
"hideCanceled": "Скрыть отмененные"
|
||||
},
|
||||
"showFlatList": "Показать плоский список"
|
||||
},
|
||||
"templates": "Шаблоны",
|
||||
"themeToggle": "Переключить тему",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "Düğüm Kütüphanesi Kenar Çubuğunu Aç/Kapat",
|
||||
"tooltip": "Düğüm Kütüphanesi"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "Kuyruk Kenar Çubuğunu Aç/Kapat",
|
||||
"tooltip": "Kuyruk"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "İş Akışları Kenar Çubuğunu Aç/Kapat",
|
||||
"tooltip": "İş Akışları"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "Yerel dosya sisteminde iş akışını aç",
|
||||
"queue": "Kuyruk",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "Tüm Görevlere Geri Dön",
|
||||
"clearPendingTasks": "Bekleyen Görevleri Temizle",
|
||||
"containImagePreview": "Resim Önizlemesini Doldur",
|
||||
"coverImagePreview": "Resim Önizlemesine Sığdır",
|
||||
"filter": "Çıktıları Filtrele",
|
||||
"filters": {
|
||||
"hideCached": "Önbelleğe Alınanları Gizle",
|
||||
"hideCanceled": "İptal Edilenleri Gizle"
|
||||
},
|
||||
"showFlatList": "Düz Listeyi Göster"
|
||||
},
|
||||
"templates": "Şablonlar",
|
||||
"themeToggle": "Temayı Değiştir",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "切換節點庫側邊欄",
|
||||
"tooltip": "節點庫"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "切換佇列側邊欄",
|
||||
"tooltip": "佇列"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "切換工作流程側邊欄",
|
||||
"tooltip": "工作流程"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "在本機檔案系統中開啟工作流程",
|
||||
"queue": "佇列",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "返回所有任務",
|
||||
"clearPendingTasks": "清除待處理任務",
|
||||
"containImagePreview": "填滿圖片預覽",
|
||||
"coverImagePreview": "適合圖片預覽",
|
||||
"filter": "篩選輸出",
|
||||
"filters": {
|
||||
"hideCached": "隱藏快取",
|
||||
"hideCanceled": "隱藏已取消"
|
||||
},
|
||||
"showFlatList": "顯示平面清單"
|
||||
},
|
||||
"templates": "範本",
|
||||
"themeToggle": "切換主題",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -281,10 +281,6 @@
|
||||
"label": "切换节点库侧边栏",
|
||||
"tooltip": "节点库"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_queue": {
|
||||
"label": "切换执行队列侧边栏",
|
||||
"tooltip": "执行队列"
|
||||
},
|
||||
"Workspace_ToggleSidebarTab_workflows": {
|
||||
"label": "切换工作流侧边栏",
|
||||
"tooltip": "工作流"
|
||||
|
||||
@@ -1670,18 +1670,6 @@
|
||||
},
|
||||
"openWorkflow": "在本地文件系统中打开工作流",
|
||||
"queue": "队列",
|
||||
"queueTab": {
|
||||
"backToAllTasks": "返回",
|
||||
"clearPendingTasks": "清除待处理任务",
|
||||
"containImagePreview": "填充图像预览",
|
||||
"coverImagePreview": "适应图像预览",
|
||||
"filter": "过滤输出",
|
||||
"filters": {
|
||||
"hideCached": "隐藏缓存",
|
||||
"hideCanceled": "隐藏已取消"
|
||||
},
|
||||
"showFlatList": "平铺结果"
|
||||
},
|
||||
"templates": "模板",
|
||||
"themeToggle": "切换主题",
|
||||
"workflowTab": {
|
||||
|
||||
@@ -29,7 +29,7 @@ import { getMediaTypeFromFilename } from '@/utils/formatUtil'
|
||||
// Task type used in the API.
|
||||
type APITaskType = 'queue' | 'history'
|
||||
|
||||
export enum TaskItemDisplayStatus {
|
||||
enum TaskItemDisplayStatus {
|
||||
Running = 'Running',
|
||||
Pending = 'Pending',
|
||||
Completed = 'Completed',
|
||||
|
||||
@@ -4,7 +4,6 @@ import { computed, ref } from 'vue'
|
||||
import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
|
||||
import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLibrarySidebarTab'
|
||||
import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
|
||||
import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
|
||||
import { t, te } from '@/i18n'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useWorkflowsSidebarTab } from '@/platform/workflow/management/composables/useWorkflowsSidebarTab'
|
||||
@@ -43,7 +42,6 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
|
||||
|
||||
const menubarLabelFunction = () => {
|
||||
const menubarLabelKeys: Record<string, string> = {
|
||||
queue: 'menu.queue',
|
||||
'node-library': 'sideToolbar.nodeLibrary',
|
||||
'model-library': 'sideToolbar.modelLibrary',
|
||||
workflows: 'sideToolbar.workflows',
|
||||
@@ -105,7 +103,6 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
|
||||
*/
|
||||
const registerCoreSidebarTabs = () => {
|
||||
registerSidebarTab(useAssetsSidebarTab())
|
||||
registerSidebarTab(useQueueSidebarTab())
|
||||
registerSidebarTab(useNodeLibrarySidebarTab())
|
||||
registerSidebarTab(useModelLibrarySidebarTab())
|
||||
registerSidebarTab(useWorkflowsSidebarTab())
|
||||
|
||||
@@ -5,7 +5,6 @@ import Splitter from 'primevue/splitter'
|
||||
import SplitterPanel from 'primevue/splitterpanel'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
|
||||
import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
|
||||
import LoginButton from '@/components/topbar/LoginButton.vue'
|
||||
import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
|
||||
@@ -15,7 +14,6 @@ import {
|
||||
isValidWidgetValue,
|
||||
safeWidgetMapper
|
||||
} from '@/composables/graph/useGraphNodeManager'
|
||||
import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
|
||||
import { t } from '@/i18n'
|
||||
import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
@@ -116,15 +114,8 @@ function openFeedback() {
|
||||
class="h-[calc(100%-38px)] w-full bg-comfy-menu-secondary-bg"
|
||||
:pt="{ gutter: { class: 'bg-transparent w-4 -mx-3' } }"
|
||||
>
|
||||
<SplitterPanel :size="1" class="min-w-min bg-comfy-menu-bg">
|
||||
<div
|
||||
class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto border-r-1 border-node-component-border"
|
||||
>
|
||||
<ExtensionSlot :extension="useQueueSidebarTab()" />
|
||||
</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel
|
||||
:size="98"
|
||||
:size="99"
|
||||
class="flex flex-row overflow-y-auto flex-wrap min-w-min gap-4"
|
||||
>
|
||||
<img
|
||||
|
||||
Reference in New Issue
Block a user