diff --git a/src/composables/widgets/useMarkdownWidget.ts b/src/composables/widgets/useMarkdownWidget.ts index 350bacc8c..b19d3d9a0 100644 --- a/src/composables/widgets/useMarkdownWidget.ts +++ b/src/composables/widgets/useMarkdownWidget.ts @@ -8,15 +8,14 @@ import TiptapTableRow from '@tiptap/extension-table-row' import TiptapStarterKit from '@tiptap/starter-kit' import { Markdown as TiptapMarkdown } from 'tiptap-markdown' -import type { InputSpec } from '@/schemas/nodeDefSchema' -import type { ComfyWidgetConstructor } from '@/scripts/widgets' -import type { ComfyApp } from '@/types' +import { type InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' +import { app } from '@/scripts/app' +import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets' function addMarkdownWidget( node: LGraphNode, name: string, - opts: { defaultVal: string }, - app: ComfyApp + opts: { defaultVal: string } ) { TiptapMarkdown.configure({ html: false, @@ -52,6 +51,7 @@ function addMarkdownWidget( } }) widget.inputEl = inputEl + widget.options.minNodeSize = [400, 200] inputEl.addEventListener('pointerdown', (event: PointerEvent) => { if (event.button !== 0) { @@ -98,23 +98,17 @@ function addMarkdownWidget( } }) - return { minWidth: 400, minHeight: 200, widget } + return widget } export const useMarkdownWidget = () => { - const widgetConstructor: ComfyWidgetConstructor = ( + const widgetConstructor: ComfyWidgetConstructorV2 = ( node: LGraphNode, - inputName: string, - inputData: InputSpec, - app: ComfyApp + inputSpec: InputSpec ) => { - const defaultVal = inputData[1]?.default || '' - return addMarkdownWidget( - node, - inputName, - { defaultVal, ...inputData[1] }, - app - ) + return addMarkdownWidget(node, inputSpec.name, { + defaultVal: inputSpec.default ?? '' + }) } return widgetConstructor diff --git a/src/composables/widgets/useStringWidget.ts b/src/composables/widgets/useStringWidget.ts index 57ea8b130..f3bf67bac 100644 --- a/src/composables/widgets/useStringWidget.ts +++ b/src/composables/widgets/useStringWidget.ts @@ -1,25 +1,23 @@ -import type { IWidget, LGraphNode } from '@comfyorg/litegraph' +import type { LGraphNode } from '@comfyorg/litegraph' -import { type InputSpec, isStringInputSpec } from '@/schemas/nodeDefSchema' -import type { ComfyWidgetConstructor } from '@/scripts/widgets' +import { + type InputSpec, + isStringInputSpec +} from '@/schemas/nodeDef/nodeDefSchemaV2' +import { app } from '@/scripts/app' +import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets' import { useSettingStore } from '@/stores/settingStore' -import type { ComfyApp } from '@/types' function addMultilineWidget( node: LGraphNode, name: string, - opts: { defaultVal: string; placeholder?: string }, - app: ComfyApp + opts: { defaultVal: string; placeholder?: string } ) { const inputEl = document.createElement('textarea') inputEl.className = 'comfy-multiline-input' inputEl.value = opts.defaultVal inputEl.placeholder = opts.placeholder || name - if (app.vueAppReady) { - inputEl.spellcheck = useSettingStore().get( - 'Comfy.TextareaWidget.Spellcheck' - ) - } + inputEl.spellcheck = useSettingStore().get('Comfy.TextareaWidget.Spellcheck') const widget = node.addDOMWidget(name, 'customtext', inputEl, { getValue(): string { @@ -31,6 +29,7 @@ function addMultilineWidget( }) widget.inputEl = inputEl + widget.options.minNodeSize = [400, 200] inputEl.addEventListener('input', () => { widget.callback?.(widget.value) @@ -54,43 +53,33 @@ function addMultilineWidget( } }) - return { minWidth: 400, minHeight: 200, widget } + return widget } export const useStringWidget = () => { - const widgetConstructor: ComfyWidgetConstructor = ( + const widgetConstructor: ComfyWidgetConstructorV2 = ( node: LGraphNode, - inputName: string, - inputData: InputSpec, - app: ComfyApp + inputSpec: InputSpec ) => { - if (!isStringInputSpec(inputData)) { - throw new Error(`Invalid input data: ${inputData}`) + if (!isStringInputSpec(inputSpec)) { + throw new Error(`Invalid input data: ${inputSpec}`) } - const inputOptions = inputData[1] ?? {} - const defaultVal = inputOptions.default ?? '' - const multiline = inputOptions.multiline + const defaultVal = inputSpec.default ?? '' + const multiline = inputSpec.multiline - let res: { widget: IWidget } - if (multiline) { - res = addMultilineWidget( - node, - inputName, - { defaultVal, ...inputOptions }, - app - ) - } else { - res = { - widget: node.addWidget('text', inputName, defaultVal, () => {}, {}) - } + const widget = multiline + ? addMultilineWidget(node, inputSpec.name, { + defaultVal, + placeholder: inputSpec.placeholder + }) + : node.addWidget('text', inputSpec.name, defaultVal, () => {}, {}) + + if (typeof inputSpec.dynamicPrompts === 'boolean') { + widget.dynamicPrompts = inputSpec.dynamicPrompts } - if (typeof inputOptions.dynamicPrompts === 'boolean') { - res.widget.dynamicPrompts = inputOptions.dynamicPrompts - } - - return res + return widget } return widgetConstructor diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts index 3343a4c2e..86eea8f42 100644 --- a/src/scripts/widgets.ts +++ b/src/scripts/widgets.ts @@ -46,8 +46,11 @@ const transformWidgetConstructorV2ToV1 = ( const inputSpec = transformInputSpecV1ToV2(inputData, { name: inputName }) + const widget = widgetConstructorV2(node, inputSpec) return { - widget: widgetConstructorV2(node, inputSpec) + widget, + minWidth: widget.options.minNodeSize?.[0], + minHeight: widget.options.minNodeSize?.[1] } } } @@ -288,8 +291,8 @@ export const ComfyWidgets: Record = { INT: transformWidgetConstructorV2ToV1(useIntWidget()), FLOAT: transformWidgetConstructorV2ToV1(useFloatWidget()), BOOLEAN: transformWidgetConstructorV2ToV1(useBooleanWidget()), - STRING: useStringWidget(), - MARKDOWN: useMarkdownWidget(), + STRING: transformWidgetConstructorV2ToV1(useStringWidget()), + MARKDOWN: transformWidgetConstructorV2ToV1(useMarkdownWidget()), COMBO: useComboWidget(), IMAGEUPLOAD: useImageUploadWidget() } diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts index 70172770d..cf7db0289 100644 --- a/src/types/litegraph-augmentation.d.ts +++ b/src/types/litegraph-augmentation.d.ts @@ -22,6 +22,10 @@ declare module '@comfyorg/litegraph/dist/types/widgets' { * Rounding value for numeric float widgets. */ round?: number + /** + * The minimum size of the node if the widget is present. + */ + minNodeSize?: Size } interface IBaseWidget {