merge main into rh-test

src/stores/imagePreviewStore.ts

@@ -1,7 +1,11 @@
+import { useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-import { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
-import {
+import type { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type {
   ExecutedWsMessage,
   ResultItem,
   ResultItemType
@@ -9,11 +13,12 @@ import {
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
 
+const PREVIEW_REVOKE_DELAY_MS = 400
+
 const createOutputs = (
   filenames: string[],
   type: ResultItemType,
@@ -35,6 +40,25 @@ interface SetOutputOptions {
 export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const { nodeIdToNodeLocatorId } = useWorkflowStore()
   const { executionIdToNodeLocatorId } = useExecutionStore()
+  const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
+
+  function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
+    scheduledRevoke[locator]?.stop()
+
+    const { stop } = useTimeoutFn(() => {
+      delete scheduledRevoke[locator]
+      cb()
+    }, PREVIEW_REVOKE_DELAY_MS)
+
+    scheduledRevoke[locator] = { stop }
+  }
+
+  const nodeOutputs = ref<Record<string, ExecutedWsMessage['output']>>({})
+
+  // Reactive state for node preview images - mirrors app.nodePreviewImages
+  const nodePreviewImages = ref<Record<string, string[]>>(
+    app.nodePreviewImages || {}
+  )
 
   function getNodeOutputs(
     node: LGraphNode
@@ -127,6 +151,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
 
     app.nodeOutputs[nodeLocatorId] = outputs
+    nodeOutputs.value[nodeLocatorId] = outputs
   }
 
   function setNodeOutputs(
@@ -139,17 +164,22 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     if (!filenames || !node) return
 
+    const locatorId =
+      node.graph instanceof Subgraph
+        ? nodeIdToNodeLocatorId(node.id, node.graph ?? undefined)
+        : `${node.id}`
+    if (!locatorId) return
     if (typeof filenames === 'string') {
-      setNodeOutputsByNodeId(
-        node.id,
+      setOutputsByLocatorId(
+        locatorId,
         createOutputs([filenames], folder, isAnimated)
       )
     } else if (!Array.isArray(filenames)) {
-      setNodeOutputsByNodeId(node.id, filenames)
+      setOutputsByLocatorId(locatorId, filenames)
     } else {
       const resultItems = createOutputs(filenames, folder, isAnimated)
       if (!resultItems?.images?.length) return
-      setNodeOutputsByNodeId(node.id, resultItems)
+      setOutputsByLocatorId(locatorId, resultItems)
     }
   }
 
@@ -173,26 +203,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setOutputsByLocatorId(nodeLocatorId, outputs, options)
   }
 
-  /**
-   * Set node outputs by node ID.
-   * Uses the current graph context to create the appropriate NodeLocatorId.
-   *
-   * @param nodeId - The node ID
-   * @param outputs - The outputs to store
-   * @param options - Options for setting outputs
-   * @param options.merge - If true, merge with existing outputs (arrays are concatenated)
-   */
-  function setNodeOutputsByNodeId(
-    nodeId: string | number,
-    outputs: ExecutedWsMessage['output'] | ResultItem,
-    options: SetOutputOptions = {}
-  ) {
-    const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
-    if (!nodeLocatorId) return
-
-    setOutputsByLocatorId(nodeLocatorId, outputs, options)
-  }
-
   /**
    * Set node preview images by execution ID (hierarchical ID from backend).
    * Converts the execution ID to a NodeLocatorId before storing.
@@ -206,8 +216,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -222,7 +236,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     previewImages: string[]
   ) {
     const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -234,8 +253,9 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   function revokePreviewsByExecutionId(executionId: string) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
-    revokePreviewsByLocatorId(nodeLocatorId)
+    scheduleRevoke(nodeLocatorId, () =>
+      revokePreviewsByLocatorId(nodeLocatorId)
+    )
   }
 
   /**
@@ -253,6 +273,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
 
     delete app.nodePreviewImages[nodeLocatorId]
+    delete nodePreviewImages.value[nodeLocatorId]
   }
 
   /**
@@ -269,6 +290,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       }
     }
     app.nodePreviewImages = {}
+    nodePreviewImages.value = {}
   }
 
   /**
@@ -285,18 +307,66 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
   }
 
+  /**
+   * Remove node outputs for a specific node
+   * Clears both outputs and preview images
+   */
+  function removeNodeOutputs(nodeId: number | string) {
+    const nodeLocatorId = nodeIdToNodeLocatorId(Number(nodeId))
+    if (!nodeLocatorId) return false
+
+    // Clear from app.nodeOutputs
+    const hadOutputs = !!app.nodeOutputs[nodeLocatorId]
+    delete app.nodeOutputs[nodeLocatorId]
+
+    // Clear from reactive state
+    delete nodeOutputs.value[nodeLocatorId]
+
+    // Clear preview images
+    if (app.nodePreviewImages[nodeLocatorId]) {
+      delete app.nodePreviewImages[nodeLocatorId]
+      delete nodePreviewImages.value[nodeLocatorId]
+    }
+
+    return hadOutputs
+  }
+
+  function restoreOutputs(
+    outputs: Record<string, ExecutedWsMessage['output']>
+  ) {
+    app.nodeOutputs = outputs
+    nodeOutputs.value = outputs
+  }
+
+  function resetAllOutputsAndPreviews() {
+    app.nodeOutputs = {}
+    nodeOutputs.value = {}
+    revokeAllPreviews()
+  }
+
   return {
+    // Getters
     getNodeOutputs,
     getNodeImageUrls,
     getNodePreviews,
+    getPreviewParam,
+
+    // Setters
     setNodeOutputs,
     setNodeOutputsByExecutionId,
-    setNodeOutputsByNodeId,
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
+
+    // Cleanup
     revokePreviewsByExecutionId,
     revokeAllPreviews,
     revokeSubgraphPreviews,
-    getPreviewParam
+    removeNodeOutputs,
+    restoreOutputs,
+    resetAllOutputsAndPreviews,
+
+    // State
+    nodeOutputs,
+    nodePreviewImages
   }
 })