diff --git a/src/composables/widgets/useImagePreviewWidget.ts b/src/composables/widgets/useImagePreviewWidget.ts index df1682a74..eec7e678e 100644 --- a/src/composables/widgets/useImagePreviewWidget.ts +++ b/src/composables/widgets/useImagePreviewWidget.ts @@ -8,6 +8,7 @@ import type { import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' import { calculateImageGrid } from '@/scripts/ui/imagePreview' import { ComfyWidgetConstructorV2 } from '@/scripts/widgets' +import { useSettingStore } from '@/stores/settingStore' import { is_all_same_aspect_ratio } from '@/utils/imageUtil' const renderPreview = ( @@ -36,7 +37,9 @@ const renderPreview = ( node.imageIndex = imageIndex = 0 } - const IMAGE_TEXT_SIZE_TEXT_HEIGHT = 15 + const settingStore = useSettingStore() + const allowImageSizeDraw = settingStore.get('Comfy.Node.AllowImageSizeDraw') + const IMAGE_TEXT_SIZE_TEXT_HEIGHT = allowImageSizeDraw ? 15 : 0 const dw = node.size[0] const dh = node.size[1] - shiftY - IMAGE_TEXT_SIZE_TEXT_HEIGHT @@ -165,12 +168,14 @@ const renderPreview = ( ctx.drawImage(img, x, y, w, h) // Draw image size text below the image - ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR - ctx.textAlign = 'center' - ctx.font = '10px sans-serif' - const sizeText = `${Math.round(img.naturalWidth)} × ${Math.round(img.naturalHeight)}` - const textY = y + h + 10 - ctx.fillText(sizeText, x + w / 2, textY) + if (allowImageSizeDraw) { + ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR + ctx.textAlign = 'center' + ctx.font = '10px sans-serif' + const sizeText = `${Math.round(img.naturalWidth)} × ${Math.round(img.naturalHeight)}` + const textY = y + h + 10 + ctx.fillText(sizeText, x + w / 2, textY) + } const drawButton = ( x: number, diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts index 1718b80e3..f34cf5cf8 100644 --- a/src/constants/coreSettings.ts +++ b/src/constants/coreSettings.ts @@ -219,6 +219,13 @@ export const CORE_SETTINGS: SettingParams[] = [ type: 'boolean', defaultValue: true }, + { + id: 'Comfy.Node.AllowImageSizeDraw', + category: ['LiteGraph', 'Node Widget', 'AllowImageSizeDraw'], + name: 'Show width × height below the image preview', + type: 'boolean', + defaultValue: true + }, { id: 'Comfy.Group.DoubleClickTitleToEdit', category: ['LiteGraph', 'Group', 'DoubleClickTitleToEdit'],