fix: Refactor previewParam and rand to use URLSearchParams in imagePreviewStore (#9346)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/stores/nodeOutputStore.test.ts

@@ -7,18 +7,11 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import * as litegraphUtil from '@/utils/litegraphUtil'
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isAnimatedOutput: vi.fn(),
-  isVideoNode: vi.fn()
-}))
 
 const mockGetNodeById = vi.fn()
 
 vi.mock('@/scripts/app', () => ({
   app: {
-    getPreviewFormatParam: vi.fn(() => '&format=test_webp'),
     rootGraph: {
       getNodeById: (...args: unknown[]) => mockGetNodeById(...args)
     },
@@ -151,76 +144,6 @@ describe('nodeOutputStore restoreOutputs', () => {
   })
 })
 
-describe('nodeOutputStore getPreviewParam', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    vi.clearAllMocks()
-    vi.mocked(litegraphUtil.isAnimatedOutput).mockReturnValue(false)
-    vi.mocked(litegraphUtil.isVideoNode).mockReturnValue(false)
-  })
-
-  it('should return empty string if output is animated', () => {
-    const store = useNodeOutputStore()
-    vi.mocked(litegraphUtil.isAnimatedOutput).mockReturnValue(true)
-    const node = createMockNode()
-    const outputs = createMockOutputs([{ filename: 'img.png' }])
-    expect(store.getPreviewParam(node, outputs)).toBe('')
-    expect(vi.mocked(app).getPreviewFormatParam).not.toHaveBeenCalled()
-  })
-
-  it('should return empty string if isVideoNode returns true', () => {
-    const store = useNodeOutputStore()
-    vi.mocked(litegraphUtil.isVideoNode).mockReturnValue(true)
-    const node = createMockNode()
-    const outputs = createMockOutputs([{ filename: 'img.png' }])
-    expect(store.getPreviewParam(node, outputs)).toBe('')
-    expect(vi.mocked(app).getPreviewFormatParam).not.toHaveBeenCalled()
-  })
-
-  it('should return empty string if outputs.images is undefined', () => {
-    const store = useNodeOutputStore()
-    const node = createMockNode()
-    const outputs: ExecutedWsMessage['output'] = {}
-    expect(store.getPreviewParam(node, outputs)).toBe('')
-    expect(vi.mocked(app).getPreviewFormatParam).not.toHaveBeenCalled()
-  })
-
-  it('should return empty string if outputs.images is empty', () => {
-    const store = useNodeOutputStore()
-    const node = createMockNode()
-    const outputs = createMockOutputs([])
-    expect(store.getPreviewParam(node, outputs)).toBe('')
-    expect(vi.mocked(app).getPreviewFormatParam).not.toHaveBeenCalled()
-  })
-
-  it('should return empty string if outputs.images contains SVG images', () => {
-    const store = useNodeOutputStore()
-    const node = createMockNode()
-    const outputs = createMockOutputs([{ filename: 'img.svg' }])
-    expect(store.getPreviewParam(node, outputs)).toBe('')
-    expect(vi.mocked(app).getPreviewFormatParam).not.toHaveBeenCalled()
-  })
-
-  it('should return format param for standard image outputs', () => {
-    const store = useNodeOutputStore()
-    const node = createMockNode()
-    const outputs = createMockOutputs([{ filename: 'img.png' }])
-    expect(store.getPreviewParam(node, outputs)).toBe('&format=test_webp')
-    expect(vi.mocked(app).getPreviewFormatParam).toHaveBeenCalledTimes(1)
-  })
-
-  it('should return format param for multiple standard images', () => {
-    const store = useNodeOutputStore()
-    const node = createMockNode()
-    const outputs = createMockOutputs([
-      { filename: 'img1.png' },
-      { filename: 'img2.jpg' }
-    ])
-    expect(store.getPreviewParam(node, outputs)).toBe('&format=test_webp')
-    expect(vi.mocked(app).getPreviewFormatParam).toHaveBeenCalledTimes(1)
-  })
-})
-
 describe('nodeOutputStore syncLegacyNodeImgs', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))

src/stores/nodeOutputStore.ts

@@ -11,6 +11,8 @@ import type {
   ResultItemType
 } from '@/schemas/apiSchema'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { clone } from '@/scripts/utils'
@@ -97,20 +99,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     return true
   }
 
-  /**
-   * Get the preview param for the node's outputs.
-   *
-   * If the output is an image, use the user's preferred format (from settings).
-   * For non-image outputs, return an empty string, as including the preview param
-   * will force the server to load the output file as an image.
-   */
-  function getPreviewParam(
-    node: LGraphNode,
-    outputs: ExecutedWsMessage['output']
-  ): string {
-    return isImageOutputs(node, outputs) ? app.getPreviewFormatParam() : ''
-  }
-
   function getNodeImageUrls(node: LGraphNode): string[] | undefined {
     const previews = getNodePreviews(node)
     if (previews?.length) return previews
@@ -118,14 +106,17 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     const outputs = getNodeOutputs(node)
     if (!outputs?.images?.length) return
 
-    const rand = app.getRandParam()
-    const previewParam = getPreviewParam(node, outputs)
     const isImage = isImageOutputs(node, outputs)
 
     return outputs.images.map((image) => {
       const params = new URLSearchParams(image)
-      if (isImage) appendCloudResParam(params, image.filename)
-      return api.apiURL(`/view?${params}${previewParam}${rand}`)
+      if (isImage) {
+        appendCloudResParam(params, image.filename)
+        const previewFormat = useSettingStore().get('Comfy.PreviewFormat')
+        if (previewFormat) params.set('preview', previewFormat)
+      }
+      if (!isCloud) params.set('rand', String(Math.random()))
+      return api.apiURL(`/view?${params}`)
     })
   }
 
@@ -443,8 +434,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     getNodeOutputs,
     getNodeImageUrls,
     getNodePreviews,
-    getPreviewParam,
-
     // Setters
     setNodeOutputs,
     setNodeOutputsByExecutionId,