mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 10:42:44 +00:00
[refactor] introduce frontend type augmentation pattern (#4192)
This commit is contained in:
@@ -9,6 +9,7 @@ import type { ResultItem } from '@/schemas/apiSchema'
|
|||||||
import type { InputSpec } from '@/schemas/nodeDefSchema'
|
import type { InputSpec } from '@/schemas/nodeDefSchema'
|
||||||
import type { ComfyWidgetConstructor } from '@/scripts/widgets'
|
import type { ComfyWidgetConstructor } from '@/scripts/widgets'
|
||||||
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
|
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
|
||||||
|
import { isImageUploadInput } from '@/types/nodeDefAugmentation'
|
||||||
import { createAnnotatedPath } from '@/utils/formatUtil'
|
import { createAnnotatedPath } from '@/utils/formatUtil'
|
||||||
import { addToComboValues } from '@/utils/litegraphUtil'
|
import { addToComboValues } from '@/utils/litegraphUtil'
|
||||||
|
|
||||||
@@ -33,7 +34,13 @@ export const useImageUploadWidget = () => {
|
|||||||
inputName: string,
|
inputName: string,
|
||||||
inputData: InputSpec
|
inputData: InputSpec
|
||||||
) => {
|
) => {
|
||||||
const inputOptions = inputData[1] ?? {}
|
if (!isImageUploadInput(inputData)) {
|
||||||
|
throw new Error(
|
||||||
|
'Image upload widget requires imageInputName augmentation'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputOptions = inputData[1]
|
||||||
const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions
|
const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions
|
||||||
const nodeOutputStore = useNodeOutputStore()
|
const nodeOutputStore = useNodeOutputStore()
|
||||||
|
|
||||||
@@ -43,11 +50,9 @@ export const useImageUploadWidget = () => {
|
|||||||
const { showPreview } = isVideo ? useNodeVideo(node) : useNodeImage(node)
|
const { showPreview } = isVideo ? useNodeVideo(node) : useNodeImage(node)
|
||||||
|
|
||||||
const fileFilter = isVideo ? isVideoFile : isImageFile
|
const fileFilter = isVideo ? isVideoFile : isImageFile
|
||||||
// @ts-expect-error InputSpec is not typed correctly
|
|
||||||
const fileComboWidget = findFileComboWidget(node, imageInputName)
|
const fileComboWidget = findFileComboWidget(node, imageInputName)
|
||||||
const initialFile = `${fileComboWidget.value}`
|
const initialFile = `${fileComboWidget.value}`
|
||||||
const formatPath = (value: InternalFile) =>
|
const formatPath = (value: InternalFile) =>
|
||||||
// @ts-expect-error InputSpec is not typed correctly
|
|
||||||
createAnnotatedPath(value, { rootFolder: image_folder })
|
createAnnotatedPath(value, { rootFolder: image_folder })
|
||||||
|
|
||||||
const transform = (internalValue: InternalValue): ExposedValue => {
|
const transform = (internalValue: InternalValue): ExposedValue => {
|
||||||
@@ -67,7 +72,6 @@ export const useImageUploadWidget = () => {
|
|||||||
|
|
||||||
// Setup file upload handling
|
// Setup file upload handling
|
||||||
const { openFileSelection } = useNodeImageUpload(node, {
|
const { openFileSelection } = useNodeImageUpload(node, {
|
||||||
// @ts-expect-error InputSpec is not typed correctly
|
|
||||||
allow_batch,
|
allow_batch,
|
||||||
fileFilter,
|
fileFilter,
|
||||||
accept,
|
accept,
|
||||||
|
|||||||
38
src/types/nodeDefAugmentation.ts
Normal file
38
src/types/nodeDefAugmentation.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* Frontend augmentations for node definitions.
|
||||||
|
*
|
||||||
|
* This module defines type extensions that augment the backend node definition
|
||||||
|
* types with frontend-specific properties. These augmentations are applied at
|
||||||
|
* runtime and are not part of the backend API contract.
|
||||||
|
*/
|
||||||
|
import type { ComboInputOptions, InputSpec } from '@/schemas/nodeDefSchema'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Frontend augmentation for image upload combo inputs.
|
||||||
|
* This extends ComboInputOptions with properties injected by the uploadImage extension.
|
||||||
|
*/
|
||||||
|
export interface ImageUploadComboOptions extends ComboInputOptions {
|
||||||
|
/**
|
||||||
|
* Reference to the associated filename combo widget.
|
||||||
|
* Injected by uploadImage.ts to link upload buttons with their combo widgets.
|
||||||
|
*
|
||||||
|
* @remarks This property exists only in the frontend runtime.
|
||||||
|
*/
|
||||||
|
imageInputName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type guard to check if an InputSpec has image upload augmentations.
|
||||||
|
* Narrows from base InputSpec to augmented type.
|
||||||
|
*/
|
||||||
|
export function isImageUploadInput(
|
||||||
|
inputData: InputSpec
|
||||||
|
): inputData is [string, ImageUploadComboOptions] {
|
||||||
|
const options = inputData[1]
|
||||||
|
return (
|
||||||
|
options !== undefined &&
|
||||||
|
typeof options === 'object' &&
|
||||||
|
'imageInputName' in options &&
|
||||||
|
typeof options.imageInputName === 'string'
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user