Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 18:52:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable/Disable the drawing of image size (#3200)

Browse Source
This commit is contained in:
MohammadAboulEla
2025-03-24 19:47:55 +02:00
committed by GitHub
parent a4b0f5ab5e
commit 5bee36a73e
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/composables/widgets/useImagePreviewWidget.ts
View File

@@ -8,6 +8,7 @@ import type {
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
import { calculateImageGrid } from '@/scripts/ui/imagePreview' import { calculateImageGrid } from '@/scripts/ui/imagePreview'
import { ComfyWidgetConstructorV2 } from '@/scripts/widgets' import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
import { useSettingStore } from '@/stores/settingStore'
import { is_all_same_aspect_ratio } from '@/utils/imageUtil' import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
const renderPreview = ( const renderPreview = (
@@ -36,7 +37,9 @@ const renderPreview = (
node.imageIndex = imageIndex = 0 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 dw = node.size[0]
const dh = node.size[1] - shiftY - IMAGE_TEXT_SIZE_TEXT_HEIGHT const dh = node.size[1] - shiftY - IMAGE_TEXT_SIZE_TEXT_HEIGHT
@@ -165,12 +168,14 @@ const renderPreview = (
ctx.drawImage(img, x, y, w, h) ctx.drawImage(img, x, y, w, h)
// Draw image size text below the image // Draw image size text below the image
ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR if (allowImageSizeDraw) {
ctx.textAlign = 'center' ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
ctx.font = '10px sans-serif' ctx.textAlign = 'center'
const sizeText = `${Math.round(img.naturalWidth)} × ${Math.round(img.naturalHeight)}` ctx.font = '10px sans-serif'
const textY = y + h + 10 const sizeText = `${Math.round(img.naturalWidth)} × ${Math.round(img.naturalHeight)}`
ctx.fillText(sizeText, x + w / 2, textY) const textY = y + h + 10
ctx.fillText(sizeText, x + w / 2, textY)
}
const drawButton = ( const drawButton = (
x: number, x: number,

7
src/constants/coreSettings.ts
View File

@@ -219,6 +219,13 @@ export const CORE_SETTINGS: SettingParams[] = [
type: 'boolean', type: 'boolean',
defaultValue: true 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', id: 'Comfy.Group.DoubleClickTitleToEdit',
category: ['LiteGraph', 'Group', 'DoubleClickTitleToEdit'], category: ['LiteGraph', 'Group', 'DoubleClickTitleToEdit'],