mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
Add progress bars on Vue Nodes (#5469)
* track execution progress in vue nodes * add test * remove pointless execution state test The test was mocking everything including the provide/inject mechanism, so it wasn't testing real behavior. The execution progress feature works correctly as verified through manual testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * remove accidentally committed PR_TEMPLATE.md 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] address PR review feedback from @DrJKL - Replace hardcoded #0B8CE9 color with blue-100 class for consistency - Replace magic number 56px with top-14 class for progress bar positioning - Use storeToRefs() for better Pinia reactivity - Reduce heavy commenting per maintainer preference * fix: update LGraphNode test to mock useNodeExecutionState properly The test was failing because it passed executing as a prop, but the component uses the useNodeExecutionState composable. Added proper mock for the composable to test the animate-pulse class application during execution. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, provide } from 'vue'
|
||||
|
||||
import {
|
||||
ExecutingNodeIdsKey,
|
||||
NodeProgressStatesKey
|
||||
} from '@/renderer/core/canvas/injectionKeys'
|
||||
import { useExecutionStore } from '@/stores/executionStore'
|
||||
|
||||
/**
|
||||
* Composable for providing execution state to Vue node children
|
||||
*
|
||||
* This composable sets up the execution state providers that can be injected
|
||||
* by child Vue nodes using useNodeExecutionState.
|
||||
*
|
||||
* Should be used in the parent component that manages Vue nodes (e.g., GraphCanvas).
|
||||
*/
|
||||
export const useExecutionStateProvider = () => {
|
||||
const executionStore = useExecutionStore()
|
||||
const { executingNodeIds: storeExecutingNodeIds, nodeProgressStates } =
|
||||
storeToRefs(executionStore)
|
||||
|
||||
// Convert execution store data to the format expected by Vue nodes
|
||||
const executingNodeIds = computed(
|
||||
() => new Set(storeExecutingNodeIds.value.map(String))
|
||||
)
|
||||
|
||||
// Provide the execution state to all child Vue nodes
|
||||
provide(ExecutingNodeIdsKey, executingNodeIds)
|
||||
provide(NodeProgressStatesKey, nodeProgressStates)
|
||||
|
||||
return {
|
||||
executingNodeIds,
|
||||
nodeProgressStates
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user