[Refactor] Prefer canvas store over app.canvas

src/stores/executionStore.ts

@@ -20,8 +20,8 @@ import type {
   NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
 
+import { useCanvasStore } from './graphStore'
 import { ComfyWorkflow } from './workflowStore'
 
 export interface QueuedPrompt {
@@ -37,6 +37,8 @@ export interface QueuedPrompt {
 }
 
 export const useExecutionStore = defineStore('execution', () => {
+  const canvasStore = useCanvasStore()
+
   const clientId = ref<string | null>(null)
   const activePromptId = ref<string | null>(null)
   const queuedPrompts = ref<Record<NodeId, QueuedPrompt>>({})
@@ -54,9 +56,8 @@ export const useExecutionStore = defineStore('execution', () => {
     if (!canvasState) return null
 
     return (
-      canvasState.nodes.find(
-        (n: ComfyNode) => String(n.id) === executingNodeId.value
-      ) ?? null
+      canvasState.nodes.find((n) => String(n.id) === executingNodeId.value) ??
+      null
     )
   })
 
@@ -132,7 +133,7 @@ export const useExecutionStore = defineStore('execution', () => {
     activePrompt.value.nodes[e.detail.node] = true
   }
 
-  function handleExecuting(e: CustomEvent<NodeId | null>) {
+  function handleExecuting(e: CustomEvent<NodeId | null>): void {
     // Clear the current node progress when a new node starts executing
     _executingNodeProgress.value = null
 
@@ -172,7 +173,7 @@ export const useExecutionStore = defineStore('execution', () => {
     const { nodeId, text } = e.detail
     if (!text || !nodeId) return
 
-    const node = app.graph.getNodeById(nodeId)
+    const node = canvasStore.getCanvas().graph?.getNodeById(nodeId)
     if (!node) return
 
     useNodeProgressText().showTextPreview(node, text)
@@ -180,7 +181,7 @@ export const useExecutionStore = defineStore('execution', () => {
 
   function handleDisplayComponent(e: CustomEvent<DisplayComponentWsMessage>) {
     const { node_id, component, props = {} } = e.detail
-    const node = app.graph.getNodeById(node_id)
+    const node = canvasStore.getCanvas().graph?.getNodeById(node_id)
     if (!node) return
 
     if (component === 'ChatHistoryWidget') {

src/stores/workflowStore.ts

@@ -442,6 +442,14 @@ export const useWorkflowStore = defineStore('workflow', () => {
     isSubgraphActive.value = isSubgraph(subgraph)
   }
 
+  const executionIdToCurrentId = (id: string) => {
+    const subgraph = activeSubgraph.value
+
+    if (!id.includes(':')) {
+      return subgraph
+    }
+  }
+
   watch(activeWorkflow, updateActiveGraph)
 
   return {
@@ -469,7 +477,8 @@ export const useWorkflowStore = defineStore('workflow', () => {
 
     isSubgraphActive,
     activeSubgraph,
-    updateActiveGraph
+    updateActiveGraph,
+    executionIdToCurrentId
   }
 }) satisfies () => WorkflowStore