Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rework queue button #968

Merged
merged 12 commits into from
Sep 25, 2024
Merged

Rework queue button #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a40f43a
Move queue button to right side
huchenlei Sep 24, 2024
69ab005
Rework split button
huchenlei Sep 24, 2024
226a5ca
Group
huchenlei Sep 24, 2024
d7ebc56
Remove unused code
huchenlei Sep 24, 2024
20311fa
x2 buttons
huchenlei Sep 25, 2024
d8d096e
Use primevue divider
huchenlei Sep 25, 2024
11886ce
adjust style
huchenlei Sep 25, 2024
5515ebf
Add tooltip
huchenlei Sep 25, 2024
1f3b2bb
Update test
huchenlei Sep 25, 2024
0f394a8
Add clearing pending tasks button to queue bar
huchenlei Sep 25, 2024
72d9aab
Fix state
huchenlei Sep 25, 2024
2a80865
Dropdown list fix
huchenlei Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions browser_tests/appMenu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ test.describe('AppMenu', () => {
})

test.afterEach(async ({ comfyPage }) => {
const currentThemeId = await comfyPage.menu.getThemeId()
if (currentThemeId !== 'dark') {
await comfyPage.menu.toggleTheme()
}
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})

Expand All @@ -27,7 +23,7 @@ test.describe('AppMenu', () => {
ws
}) => {
// Enable change auto-queue mode
let queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
const queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
expect(await queueOpts.getMode()).toBe('disabled')
await queueOpts.setMode('change')
await comfyPage.nextFrame()
Expand Down
39 changes: 9 additions & 30 deletions browser_tests/helpers/appMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Page, Locator } from '@playwright/test'
import type { AutoQueueMode } from '../../src/stores/queueStore'

export class ComfyAppMenu {
public readonly root: Locator
Expand Down Expand Up @@ -27,39 +28,17 @@ class ComfyQueueButton {
}

class ComfyQueueButtonOptions {
public readonly popup: Locator
public readonly modes: {
disabled: { input: Locator; wrapper: Locator }
instant: { input: Locator; wrapper: Locator }
change: { input: Locator; wrapper: Locator }
}

constructor(public readonly page: Page) {
this.popup = page.getByTestId('queue-options')
this.modes = (['disabled', 'instant', 'change'] as const).reduce(
(modes, mode) => {
modes[mode] = {
input: page.locator(`#autoqueue-${mode}`),
wrapper: page.getByTestId(`autoqueue-${mode}`)
}
return modes
},
{} as ComfyQueueButtonOptions['modes']
)
}
constructor(public readonly page: Page) {}

public async setMode(mode: keyof ComfyQueueButtonOptions['modes']) {
await this.modes[mode].input.click()
public async setMode(mode: AutoQueueMode) {
await this.page.evaluate((mode) => {
window['app'].extensionManager.queueSettings.mode = mode
}, mode)
}

public async getMode() {
return (
await Promise.all(
Object.entries(this.modes).map(async ([mode, opt]) => [
mode,
await opt.wrapper.getAttribute('data-p-checked')
])
)
).find(([, checked]) => checked === 'true')?.[0]
return await this.page.evaluate(() => {
return window['app'].extensionManager.queueSettings.mode
})
}
}
224 changes: 87 additions & 137 deletions src/components/appMenu/AppMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,47 @@
<template>
<Panel v-if="visible" class="app-menu">
<div class="app-menu-content">
<Popover ref="queuePopover" data-testid="queue-options">
<div class="queue-options">
<p class="batch-count">
<FloatLabel v-tooltip="$t('menu.batchCountTooltip')">
<InputNumber id="batchCount" v-model="batchCount" :min="1" />
<label for="batchCount">{{ $t('menu.batchCount') }}</label>
</FloatLabel>

<Slider
v-model="batchCount"
:min="1"
:max="100"
v-tooltip="$t('menu.batchCountTooltip')"
<div class="app-menu-content flex align-center">
<div class="queue-button-group flex">
<SplitButton
class="comfyui-queue-button"
:label="activeQueueModeMenuItem.label"
:icon="activeQueueModeMenuItem.icon"
severity="primary"
@click="queuePrompt"
:model="queueModeMenuItems"
data-testid="queue-button"
v-tooltip.bottom="$t('menu.queueWorkflow')"
>
<template #item="{ item }">
<Button
:label="item.label"
:icon="item.icon"
:severity="item.key === queueMode ? 'primary' : 'secondary'"
text
v-tooltip="item.tooltip"
/>
</p>

<Divider layout="vertical" />

<p class="auto-queue">
<span class="label">{{ $t('menu.autoQueue') }}</span>
<template v-for="mode in queueModes" :key="mode">
<div
v-tooltip="$t(`menu.${mode}Tooltip`)"
class="auto-queue-mode"
>
<RadioButton
v-model="queueMode"
:inputId="`autoqueue-${mode}`"
name="dynamic"
:value="mode"
:data-testid="`autoqueue-${mode}`"
/>
<label :for="`autoqueue-${mode}`">{{
$t(`menu.${mode}`)
}}</label>
</div>
</template>
</p>
</div>
</Popover>
<SplitButton
v-tooltip.bottom="$t('menu.queueWorkflow')"
:label="$t('menu.generate')"
:icon="`pi pi-${icon}`"
severity="secondary"
@click="queuePrompt"
:model="[]"
:pt="{
pcDropdown: ({ instance }) => {
instance.onDropdownButtonClick = function (e: Event) {
e.preventDefault()
queuePopover.toggle(e)
}
}
}"
data-testid="queue-button"
>
</SplitButton>
<div class="separator"></div>
<Button
v-tooltip.bottom="$t('menu.interrupt')"
icon="pi pi-times"
severity="secondary"
:disabled="!executingPrompt"
@click="() => commandStore.getCommand('Comfy.Interrupt')()"
></Button>

</template>
</SplitButton>
<BatchCountEdit />
<ButtonGroup class="execution-actions ml-2">
<Button
v-tooltip.bottom="$t('menu.interrupt')"
icon="pi pi-times"
:severity="executingPrompt ? 'danger' : 'secondary'"
:disabled="!executingPrompt"
@click="() => commandStore.getCommand('Comfy.Interrupt')()"
>
</Button>
<Button
v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
icon="pi pi-stop"
:severity="hasPendingTasks ? 'danger' : 'secondary'"
:disabled="!hasPendingTasks"
@click="() => commandStore.getCommand('Comfy.ClearPendingTasks')()"
/>
</ButtonGroup>
</div>
<Divider layout="vertical" class="mx-2" />
<ButtonGroup>
<Button
v-tooltip.bottom="$t('menu.refresh')"
Expand All @@ -89,25 +63,24 @@
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { computed } from 'vue'
import Panel from 'primevue/panel'
import Divider from 'primevue/divider'
import SplitButton from 'primevue/splitbutton'
import Button from 'primevue/button'
import FloatLabel from 'primevue/floatlabel'
import InputNumber from 'primevue/inputnumber'
import Popover from 'primevue/popover'
import Divider from 'primevue/divider'
import Slider from 'primevue/slider'
import RadioButton from 'primevue/radiobutton'
import ButtonGroup from 'primevue/buttongroup'
import BatchCountEdit from './BatchCountEdit.vue'
import {
AutoQueueMode,
useQueuePendingTaskCountStore,
useQueueSettingsStore
} from '@/stores/queueStore'
import { app } from '@/scripts/app'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/stores/settingStore'
import { useCommandStore } from '@/stores/commandStore'
import { MenuItem } from 'primevue/menuitem'
import { useI18n } from 'vue-i18n'

const settingsStore = useSettingStore()
const commandStore = useCommandStore()
Expand All @@ -118,21 +91,46 @@ const visible = computed(
() => settingsStore.get('Comfy.UseNewMenu') === 'Floating'
)

const queuePopover = ref(null)
const queueModes = ['disabled', 'instant', 'change']

const icon = computed(() => {
switch (queueMode.value) {
case 'instant':
return 'forward'
case 'change':
return 'step-forward-alt'
default:
return 'play'
const { t } = useI18n()
const queueModeMenuItemLookup: Record<AutoQueueMode, MenuItem> = {
disabled: {
key: 'disabled',
label: 'Queue',
icon: 'pi pi-play',
tooltip: t('menu.disabledTooltip'),
command: () => {
queueMode.value = 'disabled'
}
},
instant: {
key: 'instant',
label: 'Queue (Instant)',
icon: 'pi pi-forward',
tooltip: t('menu.instantTooltip'),
command: () => {
queueMode.value = 'instant'
}
},
change: {
key: 'change',
label: 'Queue (Change)',
icon: 'pi pi-step-forward-alt',
tooltip: t('menu.changeTooltip'),
command: () => {
queueMode.value = 'change'
}
}
})
}

const activeQueueModeMenuItem = computed(
() => queueModeMenuItemLookup[queueMode.value]
)
const queueModeMenuItems = computed(() =>
Object.values(queueModeMenuItemLookup)
)

const executingPrompt = computed(() => !!queueCountStore.count.value)
const hasPendingTasks = computed(() => queueCountStore.count.value > 1)

const queuePrompt = (e: MouseEvent) => {
app.queuePrompt(e.shiftKey ? -1 : 0, batchCount.value)
Expand All @@ -149,12 +147,6 @@ const queuePrompt = (e: MouseEvent) => {
z-index: 1000;
}

.app-menu-content {
display: flex;
gap: 10px;
align-items: center;
}

:deep(.p-panel-content) {
padding: 10px;
}
Expand All @@ -163,50 +155,8 @@ const queuePrompt = (e: MouseEvent) => {
display: none;
}

.separator {
background-color: var(--p-content-border-color);
border-radius: 10px;
opacity: 0.75;
width: 5px;
height: 20px;
}

.queue-options {
display: flex;
}

.batch-count {
padding-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 1em;
}

.p-slider {
--p-slider-border-radius: 5px;
margin: 5px;
padding: 2px;
}

.p-floatlabel label {
left: 2px;
}

.label {
font-size: 12px;
color: var(--p-floatlabel-focus-color);
}

.auto-queue {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}

.auto-queue-mode {
display: flex;
align-items: center;
gap: 5px;
.comfyui-queue-button :deep(.p-splitbutton-dropdown) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
Loading
Loading