[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:
bymyself
2025-09-13 22:18:01 -07:00
parent fed177eaf4
commit 4f8a794382
3 changed files with 37 additions and 9 deletions

View File

@@ -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"

View File

@@ -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) {

View File

@@ -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
} }
}) })