mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
Implement workflow progress panel (#6092)
Adds a workflow progress panel component underneath the `actionbar-container`. I suggest starting a review at the extraneous changes that were needed. Including but not limited to: - `get createTime()` in queueStore - `promptIdToWorkflowId`, `initializingPromptIds`, and `nodeProgressStatesByPrompt` in executionStore - `create_time` handling in v2ToV1Adapter - `pointer-events-auto` on ComfyActionbar.vue The rest of the changes should be contained under `QueueProgressOverlay.vue`, and has less of a blast radius in case something goes wrong. --------- Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Co-authored-by: GitHub Action <action@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: 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:
50
src/composables/queue/useQueueProgress.ts
Normal file
50
src/composables/queue/useQueueProgress.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useExecutionStore } from '@/stores/executionStore'
|
||||
import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
|
||||
|
||||
/**
|
||||
* Queue progress composable exposing total/current node progress values and styles.
|
||||
*/
|
||||
export function useQueueProgress() {
|
||||
const { locale } = useI18n()
|
||||
const executionStore = useExecutionStore()
|
||||
|
||||
const totalPercent = computed(() =>
|
||||
clampPercentInt(Math.round((executionStore.executionProgress ?? 0) * 100))
|
||||
)
|
||||
|
||||
const totalPercentFormatted = computed(() =>
|
||||
formatPercent0(locale.value, totalPercent.value)
|
||||
)
|
||||
|
||||
const currentNodePercent = computed(() =>
|
||||
clampPercentInt(
|
||||
Math.round((executionStore.executingNodeProgress ?? 0) * 100)
|
||||
)
|
||||
)
|
||||
|
||||
const currentNodePercentFormatted = computed(() =>
|
||||
formatPercent0(locale.value, currentNodePercent.value)
|
||||
)
|
||||
|
||||
const totalProgressStyle = computed(() => ({
|
||||
width: `${totalPercent.value}%`,
|
||||
background: 'var(--color-interface-panel-job-progress-primary)'
|
||||
}))
|
||||
|
||||
const currentNodeProgressStyle = computed(() => ({
|
||||
width: `${currentNodePercent.value}%`,
|
||||
background: 'var(--color-interface-panel-job-progress-secondary)'
|
||||
}))
|
||||
|
||||
return {
|
||||
totalPercent,
|
||||
totalPercentFormatted,
|
||||
currentNodePercent,
|
||||
currentNodePercentFormatted,
|
||||
totalProgressStyle,
|
||||
currentNodeProgressStyle
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user