mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 09:27:41 +00:00
- Use exact tokens from Figma - Fix issue in which node is stuck in `executing` state after it errors ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6018-fix-Vue-node-border-styles-in-different-states-executing-error-selected-2896d73d365081f39000fc3e42811f0d) by [Unito](https://www.unito.io)
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { storeToRefs } from 'pinia'
|
|
import { computed, toValue } from 'vue'
|
|
import type { MaybeRefOrGetter } from 'vue'
|
|
|
|
import { useExecutionStore } from '@/stores/executionStore'
|
|
|
|
/**
|
|
* Composable for managing execution state of Vue-based nodes
|
|
*
|
|
* Provides reactive access to execution state and progress for a specific node
|
|
* by injecting execution data from the parent GraphCanvas provider.
|
|
*
|
|
* @param nodeLocatorIdMaybe - Locator ID (root or subgraph scoped) of the node to track
|
|
* @returns Object containing reactive execution state and progress
|
|
*/
|
|
export const useNodeExecutionState = (
|
|
nodeLocatorIdMaybe: MaybeRefOrGetter<string | undefined>
|
|
) => {
|
|
const locatorId = computed(() => toValue(nodeLocatorIdMaybe) ?? '')
|
|
const { nodeLocationProgressStates, isIdle } =
|
|
storeToRefs(useExecutionStore())
|
|
|
|
const progressState = computed(() => {
|
|
const id = locatorId.value
|
|
return id ? nodeLocationProgressStates.value[id] : undefined
|
|
})
|
|
|
|
const executing = computed(
|
|
() => !isIdle.value && progressState.value?.state === 'running'
|
|
)
|
|
|
|
const progress = computed(() => {
|
|
const state = progressState.value
|
|
return state && state.max > 0 ? state.value / state.max : undefined
|
|
})
|
|
|
|
const progressPercentage = computed(() => {
|
|
const prog = progress.value
|
|
return prog !== undefined ? Math.round(prog * 100) : undefined
|
|
})
|
|
|
|
const executionState = computed(() => {
|
|
const state = progressState.value
|
|
if (!state) return 'idle'
|
|
return state.state
|
|
})
|
|
|
|
return {
|
|
executing,
|
|
progress,
|
|
progressPercentage,
|
|
progressState,
|
|
executionState
|
|
}
|
|
}
|