From e7588c33e1b4cb84a30a601ccef1277186585d3d Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Thu, 5 Mar 2026 13:52:50 -0800 Subject: [PATCH] refactor: rename imagePreviewStore to nodeOutputStore (#9416) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Rename `imagePreviewStore.ts` → `nodeOutputStore.ts` to match the store it houses (`useNodeOutputStore`, Pinia ID `nodeOutput`). ## Changes - **What**: Rename file + test file, update all 21 import paths, mock paths, and describe labels - **Breaking**: None — exported symbol (`useNodeOutputStore`) and Pinia store ID (`nodeOutput`) are unchanged ## Custom Node Ecosystem Audit Searched the ComfyUI custom node ecosystem for `imagePreviewStore` and `useNodeOutputStore`: - **Not part of the public API** — neither filename nor export appear in `comfyui_frontend_package` or `vite.types.config.mts` - **1 external repo found:** `wallen0322/ComfyUI-AE-Animation` — contains a full fork of the frontend source tree; it copies the file internally and does not import from the published package. **No breakage.** - **No custom nodes import this store via the extension API.** This is a safe internal-only rename. ## Review Focus Pure mechanical rename — no logic changes. Verify no stale `imagePreviewStore` references remain. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9416-refactor-rename-imagePreviewStore-to-nodeOutputStore-31a6d73d3650816086c5e62959861ddb) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown --- src/composables/graph/useSubgraphOperations.test.ts | 2 +- src/composables/graph/useSubgraphOperations.ts | 2 +- src/composables/maskeditor/useMaskEditorLoader.ts | 2 +- src/composables/maskeditor/useMaskEditorSaver.ts | 2 +- src/composables/node/useNodeImage.ts | 2 +- src/composables/node/usePromotedPreviews.test.ts | 4 ++-- src/composables/node/usePromotedPreviews.ts | 2 +- src/composables/painter/usePainter.ts | 2 +- src/composables/useImageCrop.ts | 2 +- src/renderer/extensions/vueNodes/VideoPreview.vue | 2 +- .../extensions/vueNodes/components/ImagePreview.vue | 2 +- .../extensions/vueNodes/components/LGraphNode.vue | 2 +- .../extensions/vueNodes/preview/useNodePreviewState.ts | 2 +- .../widgets/composables/useImageUploadWidget.ts | 2 +- src/scripts/app.ts | 2 +- src/scripts/changeTracker.ts | 2 +- src/services/litegraphService.ts | 2 +- src/stores/README.md | 2 +- src/stores/executionStore.ts | 2 +- ...agePreviewStore.test.ts => nodeOutputStore.test.ts} | 10 +++++----- .../{imagePreviewStore.ts => nodeOutputStore.ts} | 0 src/stores/queueStore.ts | 2 +- 22 files changed, 26 insertions(+), 26 deletions(-) rename src/stores/{imagePreviewStore.test.ts => nodeOutputStore.test.ts} (97%) rename src/stores/{imagePreviewStore.ts => nodeOutputStore.ts} (100%) diff --git a/src/composables/graph/useSubgraphOperations.test.ts b/src/composables/graph/useSubgraphOperations.test.ts index 2f502b3359..9ed4c66f1e 100644 --- a/src/composables/graph/useSubgraphOperations.test.ts +++ b/src/composables/graph/useSubgraphOperations.test.ts @@ -29,7 +29,7 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({ }) })) -vi.mock('@/stores/imagePreviewStore', () => ({ +vi.mock('@/stores/nodeOutputStore', () => ({ useNodeOutputStore: () => ({ revokeSubgraphPreviews: vi.fn() }) diff --git a/src/composables/graph/useSubgraphOperations.ts b/src/composables/graph/useSubgraphOperations.ts index ac834db1d6..3df39d3fac 100644 --- a/src/composables/graph/useSubgraphOperations.ts +++ b/src/composables/graph/useSubgraphOperations.ts @@ -2,7 +2,7 @@ import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteG import { SubgraphNode } from '@/lib/litegraph/src/litegraph' import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore' import { useCanvasStore } from '@/renderer/core/canvas/canvasStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useSubgraphStore } from '@/stores/subgraphStore' /** diff --git a/src/composables/maskeditor/useMaskEditorLoader.ts b/src/composables/maskeditor/useMaskEditorLoader.ts index 74d39a5a28..2d8206af11 100644 --- a/src/composables/maskeditor/useMaskEditorLoader.ts +++ b/src/composables/maskeditor/useMaskEditorLoader.ts @@ -1,7 +1,7 @@ import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore' import type { ImageRef, ImageLayer } from '@/stores/maskEditorDataStore' import type { LGraphNode } from '@/lib/litegraph/src/litegraph' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { isCloud } from '@/platform/distribution/types' import { api } from '@/scripts/api' import { app } from '@/scripts/app' diff --git a/src/composables/maskeditor/useMaskEditorSaver.ts b/src/composables/maskeditor/useMaskEditorSaver.ts index 8aa6bb0da8..8f5bc5c468 100644 --- a/src/composables/maskeditor/useMaskEditorSaver.ts +++ b/src/composables/maskeditor/useMaskEditorSaver.ts @@ -1,6 +1,6 @@ import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore' import { useMaskEditorStore } from '@/stores/maskEditorStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import type { EditorOutputData, EditorOutputLayer, diff --git a/src/composables/node/useNodeImage.ts b/src/composables/node/useNodeImage.ts index 7927207249..ea3d1d0099 100644 --- a/src/composables/node/useNodeImage.ts +++ b/src/composables/node/useNodeImage.ts @@ -1,6 +1,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph' import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { fitDimensionsToNodeWidth } from '@/utils/imageUtil' const VIDEO_WIDGET_NAME = 'video-preview' diff --git a/src/composables/node/usePromotedPreviews.test.ts b/src/composables/node/usePromotedPreviews.test.ts index f3b4237d9d..e054dd289d 100644 --- a/src/composables/node/usePromotedPreviews.test.ts +++ b/src/composables/node/usePromotedPreviews.test.ts @@ -8,7 +8,7 @@ import { createTestSubgraph, createTestSubgraphNode } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { usePromotionStore } from '@/stores/promotionStore' import { createNodeLocatorId } from '@/types/nodeIdentification' @@ -26,7 +26,7 @@ const useNodeOutputStoreMock = vi.hoisted(() => vi.fn<() => MockNodeOutputStore>() ) -vi.mock('@/stores/imagePreviewStore', () => { +vi.mock('@/stores/nodeOutputStore', () => { return { useNodeOutputStore: useNodeOutputStoreMock } diff --git a/src/composables/node/usePromotedPreviews.ts b/src/composables/node/usePromotedPreviews.ts index 12f3a0d631..6345f283f5 100644 --- a/src/composables/node/usePromotedPreviews.ts +++ b/src/composables/node/usePromotedPreviews.ts @@ -3,7 +3,7 @@ import { computed, toValue } from 'vue' import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode' import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { usePromotionStore } from '@/stores/promotionStore' import { createNodeLocatorId } from '@/types/nodeIdentification' diff --git a/src/composables/painter/usePainter.ts b/src/composables/painter/usePainter.ts index fefb014cef..79b9a24c30 100644 --- a/src/composables/painter/usePainter.ts +++ b/src/composables/painter/usePainter.ts @@ -16,7 +16,7 @@ import { isCloud } from '@/platform/distribution/types' import { useToastStore } from '@/platform/updates/common/toastStore' import { api } from '@/scripts/api' import { app } from '@/scripts/app' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' type PainterTool = 'brush' | 'eraser' diff --git a/src/composables/useImageCrop.ts b/src/composables/useImageCrop.ts index 6722c34a0f..dd88d6de45 100644 --- a/src/composables/useImageCrop.ts +++ b/src/composables/useImageCrop.ts @@ -5,7 +5,7 @@ import { computed, onMounted, ref, watch } from 'vue' import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode' import type { Bounds } from '@/renderer/core/layout/types' import { app } from '@/scripts/app' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' type ResizeDirection = | 'top' diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue index 16a51417f1..798f159e88 100644 --- a/src/renderer/extensions/vueNodes/VideoPreview.vue +++ b/src/renderer/extensions/vueNodes/VideoPreview.vue @@ -123,7 +123,7 @@ import { computed, ref, watch } from 'vue' import { useI18n } from 'vue-i18n' import { downloadFile } from '@/base/common/downloadUtil' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { cn } from '@/utils/tailwindUtil' interface VideoPreviewProps { diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue index a1b35f87a1..8a6f7c7ff2 100644 --- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue +++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue @@ -129,7 +129,7 @@ import { useI18n } from 'vue-i18n' import { downloadFile } from '@/base/common/downloadUtil' import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor' import { app } from '@/scripts/app' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' interface ImagePreviewProps { /** Array of image URLs to display */ diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index 4b2087b7c3..703c82da92 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -308,7 +308,7 @@ import { nonWidgetedInputs } from '@/renderer/extensions/vueNodes/utils/nodeData import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils' import { app } from '@/scripts/app' import { useExecutionErrorStore } from '@/stores/executionErrorStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore' import { isTransparent } from '@/utils/colorUtil' import { isVideoOutput } from '@/utils/litegraphUtil' diff --git a/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts index 05afb86346..88dba2aaac 100644 --- a/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts +++ b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts @@ -3,7 +3,7 @@ import { computed, toValue } from 'vue' import type { MaybeRefOrGetter, Ref } from 'vue' import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' export const useNodePreviewState = ( nodeIdMaybe: MaybeRefOrGetter, diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts index 4ced75dad4..b1ebd90815 100644 --- a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts +++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts @@ -6,7 +6,7 @@ import type { IComboWidget } from '@/lib/litegraph/src/types/widgets' import type { ResultItemType } from '@/schemas/apiSchema' import type { InputSpec } from '@/schemas/nodeDefSchema' import type { ComfyWidgetConstructor } from '@/scripts/widgets' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { isImageUploadInput } from '@/types/nodeDefAugmentation' import { createAnnotatedPath } from '@/utils/createAnnotatedPath' import { addToComboValues } from '@/utils/litegraphUtil' diff --git a/src/scripts/app.ts b/src/scripts/app.ts index b21ae96ea5..d2b0679071 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -65,7 +65,7 @@ import { useExecutionStore } from '@/stores/executionStore' import { useExecutionErrorStore } from '@/stores/executionErrorStore' import { useExtensionStore } from '@/stores/extensionStore' import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useJobPreviewStore } from '@/stores/jobPreviewStore' import { KeyComboImpl } from '@/platform/keybindings/keyCombo' import { useKeybindingStore } from '@/platform/keybindings/keybindingStore' diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts index d098ce763b..0d7d87c8e3 100644 --- a/src/scripts/changeTracker.ts +++ b/src/scripts/changeTracker.ts @@ -11,7 +11,7 @@ import { import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema' import type { ExecutedWsMessage } from '@/schemas/apiSchema' import { useExecutionStore } from '@/stores/executionStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore' import { api } from './api' diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts index 55491cb251..92205ab442 100644 --- a/src/services/litegraphService.ts +++ b/src/services/litegraphService.ts @@ -55,7 +55,7 @@ import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget' import { $el } from '@/scripts/ui' import { useDomWidgetStore } from '@/stores/domWidgetStore' import { useExecutionStore } from '@/stores/executionStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { ComfyNodeDefImpl } from '@/stores/nodeDefStore' import { usePromotionStore } from '@/stores/promotionStore' import { useSubgraphStore } from '@/stores/subgraphStore' diff --git a/src/stores/README.md b/src/stores/README.md index 6708f84c2b..22603239b0 100644 --- a/src/stores/README.md +++ b/src/stores/README.md @@ -122,7 +122,7 @@ The following table lists ALL 46 store instances in the system as of 2026-01-29: | graphStore.ts | useTitleEditorStore | Manages title editing for nodes and groups | UI | | graphStore.ts | useCanvasStore | Manages the graph canvas state and interactions | Core | | helpCenterStore.ts | useHelpCenterStore | Manages help center visibility and state | UI | -| imagePreviewStore.ts | useNodeOutputStore | Manages node outputs and execution results | Media | +| nodeOutputStore.ts | useNodeOutputStore | Manages node outputs and execution results | Media | | maintenanceTaskStore.ts | useMaintenanceTaskStore | Handles system maintenance tasks | System | | menuItemStore.ts | useMenuItemStore | Handles menu items and their state | UI | | modelStore.ts | useModelStore | Manages AI models information | Models | diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts index e9589e3c03..81f505c67b 100644 --- a/src/stores/executionStore.ts +++ b/src/stores/executionStore.ts @@ -27,7 +27,7 @@ import type { } from '@/schemas/apiSchema' import { api } from '@/scripts/api' import { app } from '@/scripts/app' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useJobPreviewStore } from '@/stores/jobPreviewStore' import { useExecutionErrorStore } from '@/stores/executionErrorStore' import type { NodeLocatorId } from '@/types/nodeIdentification' diff --git a/src/stores/imagePreviewStore.test.ts b/src/stores/nodeOutputStore.test.ts similarity index 97% rename from src/stores/imagePreviewStore.test.ts rename to src/stores/nodeOutputStore.test.ts index a6397c5543..a8d1785480 100644 --- a/src/stores/imagePreviewStore.test.ts +++ b/src/stores/nodeOutputStore.test.ts @@ -6,7 +6,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph' import { LiteGraph } from '@/lib/litegraph/src/litegraph' import type { ExecutedWsMessage } from '@/schemas/apiSchema' import { app } from '@/scripts/app' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import * as litegraphUtil from '@/utils/litegraphUtil' vi.mock('@/utils/litegraphUtil', () => ({ @@ -49,7 +49,7 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({ })) })) -describe('imagePreviewStore setNodeOutputsByExecutionId with merge', () => { +describe('nodeOutputStore setNodeOutputsByExecutionId with merge', () => { beforeEach(() => { setActivePinia(createTestingPinia({ stubActions: false })) vi.clearAllMocks() @@ -110,7 +110,7 @@ describe('imagePreviewStore setNodeOutputsByExecutionId with merge', () => { }) }) -describe('imagePreviewStore restoreOutputs', () => { +describe('nodeOutputStore restoreOutputs', () => { beforeEach(() => { setActivePinia(createTestingPinia({ stubActions: false })) vi.clearAllMocks() @@ -151,7 +151,7 @@ describe('imagePreviewStore restoreOutputs', () => { }) }) -describe('imagePreviewStore getPreviewParam', () => { +describe('nodeOutputStore getPreviewParam', () => { beforeEach(() => { setActivePinia(createTestingPinia({ stubActions: false })) vi.clearAllMocks() @@ -221,7 +221,7 @@ describe('imagePreviewStore getPreviewParam', () => { }) }) -describe('imagePreviewStore syncLegacyNodeImgs', () => { +describe('nodeOutputStore syncLegacyNodeImgs', () => { beforeEach(() => { setActivePinia(createTestingPinia({ stubActions: false })) vi.clearAllMocks() diff --git a/src/stores/imagePreviewStore.ts b/src/stores/nodeOutputStore.ts similarity index 100% rename from src/stores/imagePreviewStore.ts rename to src/stores/nodeOutputStore.ts diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts index 0a877c63c2..ff69c36ae3 100644 --- a/src/stores/queueStore.ts +++ b/src/stores/queueStore.ts @@ -19,7 +19,7 @@ import { api } from '@/scripts/api' import type { ComfyApp } from '@/scripts/app' import { useExtensionService } from '@/services/extensionService' import { getJobDetail } from '@/services/jobOutputCache' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' +import { useNodeOutputStore } from '@/stores/nodeOutputStore' import { useExecutionStore } from '@/stores/executionStore' import { useSettingStore } from '@/platform/settings/settingStore' import { getMediaTypeFromFilename } from '@/utils/formatUtil'