mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +00:00
[refactor] replace provide/inject with direct store ref access - addresses @DrJKL's architecture feedback
Replace the provide/inject pattern for execution errors with direct store access as suggested. Components now use executionStore.currentErrorNodeId computed ref directly, eliminating boilerplate and improving performance with a single source of truth. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -47,11 +47,6 @@
|
|||||||
:size="nodeSizes.get(nodeData.id)"
|
:size="nodeSizes.get(nodeData.id)"
|
||||||
:readonly="false"
|
:readonly="false"
|
||||||
:executing="executionStore.executingNodeId === nodeData.id"
|
:executing="executionStore.executingNodeId === nodeData.id"
|
||||||
:error="
|
|
||||||
executionStore.lastExecutionError?.node_id === nodeData.id
|
|
||||||
? 'Execution error'
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
:zoom-level="canvasStore.canvas?.ds?.scale || 1"
|
:zoom-level="canvasStore.canvas?.ds?.scale || 1"
|
||||||
:data-node-id="nodeData.id"
|
:data-node-id="nodeData.id"
|
||||||
@node-click="handleNodeSelect"
|
@node-click="handleNodeSelect"
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
// border
|
// border
|
||||||
'border border-solid border-sand-100 dark-theme:border-charcoal-300',
|
'border border-solid border-sand-100 dark-theme:border-charcoal-300',
|
||||||
!!executing && 'border-blue-500 dark-theme:border-blue-500',
|
!!executing && 'border-blue-500 dark-theme:border-blue-500',
|
||||||
!!(error || nodeData.hasErrors) && 'border-error',
|
!!hasAnyError && 'border-error',
|
||||||
// hover
|
// hover
|
||||||
'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
|
'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
|
||||||
// Selected
|
// Selected
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
!!isSelected && 'outline-black dark-theme:outline-white',
|
!!isSelected && 'outline-black dark-theme:outline-white',
|
||||||
!!(isSelected && executing) &&
|
!!(isSelected && executing) &&
|
||||||
'outline-blue-500 dark-theme:outline-blue-500',
|
'outline-blue-500 dark-theme:outline-blue-500',
|
||||||
!!(isSelected && (error || nodeData.hasErrors)) && 'outline-error',
|
!!(isSelected && hasAnyError) && 'outline-error',
|
||||||
{
|
{
|
||||||
'animate-pulse': executing,
|
'animate-pulse': executing,
|
||||||
'opacity-50': nodeData.mode === 4,
|
'opacity-50': nodeData.mode === 4,
|
||||||
@@ -134,6 +134,7 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
|
|||||||
import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
|
import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
|
||||||
import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
|
import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
|
||||||
import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
|
import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
|
||||||
|
import { useExecutionStore } from '@/stores/executionStore'
|
||||||
import { cn } from '@/utils/tailwindUtil'
|
import { cn } from '@/utils/tailwindUtil'
|
||||||
|
|
||||||
import { useVueElementTracking } from '../composables/useVueNodeResizeTracking'
|
import { useVueElementTracking } from '../composables/useVueNodeResizeTracking'
|
||||||
@@ -151,7 +152,6 @@ interface LGraphNodeProps {
|
|||||||
readonly?: boolean
|
readonly?: boolean
|
||||||
executing?: boolean
|
executing?: boolean
|
||||||
progress?: number
|
progress?: number
|
||||||
error?: string | null
|
|
||||||
zoomLevel?: number
|
zoomLevel?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -176,6 +176,17 @@ const emit = defineEmits<{
|
|||||||
|
|
||||||
useVueElementTracking(props.nodeData.id, 'node')
|
useVueElementTracking(props.nodeData.id, 'node')
|
||||||
|
|
||||||
|
// Execution error state from store (direct ref access as suggested by @DrJKL)
|
||||||
|
const executionStore = useExecutionStore()
|
||||||
|
const hasExecutionError = computed(
|
||||||
|
() => executionStore.currentErrorNodeId === props.nodeData.id
|
||||||
|
)
|
||||||
|
|
||||||
|
// Computed error states for styling
|
||||||
|
const hasAnyError = computed(
|
||||||
|
(): boolean => hasExecutionError.value || !!props.nodeData.hasErrors
|
||||||
|
)
|
||||||
|
|
||||||
// Inject selection state from parent
|
// Inject selection state from parent
|
||||||
const selectedNodeIds = inject(SelectedNodeIdsKey)
|
const selectedNodeIds = inject(SelectedNodeIdsKey)
|
||||||
if (!selectedNodeIds) {
|
if (!selectedNodeIds) {
|
||||||
|
|||||||
@@ -407,6 +407,20 @@ export const useExecutionStore = defineStore('execution', () => {
|
|||||||
return executionId
|
return executionId
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const lastExecutionErrorNodeLocatorId = computed(() => {
|
||||||
|
const err = lastExecutionError.value
|
||||||
|
if (!err) return null
|
||||||
|
return executionIdToNodeLocatorId(String(err.node_id))
|
||||||
|
})
|
||||||
|
|
||||||
|
// Computed ref for current error node ID - components can use this directly
|
||||||
|
const currentErrorNodeId = computed<string | null>(() => {
|
||||||
|
const locator = lastExecutionErrorNodeLocatorId.value
|
||||||
|
if (!locator) return null
|
||||||
|
const localId = workflowStore.nodeLocatorIdToNodeId(locator)
|
||||||
|
return localId != null ? String(localId) : null
|
||||||
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isIdle,
|
isIdle,
|
||||||
clientId,
|
clientId,
|
||||||
@@ -426,6 +440,10 @@ export const useExecutionStore = defineStore('execution', () => {
|
|||||||
* The error from the previous execution.
|
* The error from the previous execution.
|
||||||
*/
|
*/
|
||||||
lastExecutionError,
|
lastExecutionError,
|
||||||
|
/**
|
||||||
|
* NodeLocatorId for the most recent execution error.
|
||||||
|
*/
|
||||||
|
lastExecutionErrorNodeLocatorId,
|
||||||
/**
|
/**
|
||||||
* The id of the node that is currently being executed (backward compatibility)
|
* The id of the node that is currently being executed (backward compatibility)
|
||||||
*/
|
*/
|
||||||
@@ -470,6 +488,10 @@ export const useExecutionStore = defineStore('execution', () => {
|
|||||||
_executingNodeProgress,
|
_executingNodeProgress,
|
||||||
// NodeLocatorId conversion helpers
|
// NodeLocatorId conversion helpers
|
||||||
executionIdToNodeLocatorId,
|
executionIdToNodeLocatorId,
|
||||||
nodeLocatorIdToExecutionId
|
nodeLocatorIdToExecutionId,
|
||||||
|
/**
|
||||||
|
* The node ID that currently has an execution error (as string)
|
||||||
|
*/
|
||||||
|
currentErrorNodeId
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user