From 49400c69b66cd18c4832f641d36c99f3b66d0a36 Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Wed, 21 May 2025 09:15:15 -0700 Subject: [PATCH] Set output as background (#3079) Co-authored-by: github-actions --- src/components/graph/GraphCanvas.vue | 14 ++++++++++++++ src/components/sidebar/tabs/QueueSidebarTab.vue | 10 ++++++++++ src/constants/coreSettings.ts | 14 ++++++++++++++ src/locales/en/main.json | 2 ++ src/locales/en/settings.json | 4 ++++ src/locales/es/main.json | 2 ++ src/locales/es/settings.json | 4 ++++ src/locales/fr/main.json | 2 ++ src/locales/fr/settings.json | 4 ++++ src/locales/ja/main.json | 2 ++ src/locales/ja/settings.json | 4 ++++ src/locales/ko/main.json | 2 ++ src/locales/ko/settings.json | 4 ++++ src/locales/ru/main.json | 2 ++ src/locales/ru/settings.json | 4 ++++ src/locales/zh/main.json | 2 ++ src/locales/zh/settings.json | 4 ++++ src/schemas/apiSchema.ts | 1 + src/services/colorPaletteService.ts | 16 ++++++++++++++-- 19 files changed, 95 insertions(+), 2 deletions(-) diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index 40e53e581..e4db7b6be 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -168,6 +168,20 @@ watch( await colorPaletteService.loadColorPalette(currentPaletteId) } ) + +watch( + () => settingStore.get('Comfy.Canvas.BackgroundImage'), + async () => { + if (!canvasStore.canvas) return + const currentPaletteId = colorPaletteStore.activePaletteId + if (!currentPaletteId) return + + // Reload color palette to apply background image + await colorPaletteService.loadColorPalette(currentPaletteId) + // Mark background canvas as dirty + canvasStore.canvas.setDirty(false, true) + } +) watch( () => colorPaletteStore.activePaletteId, async (newValue) => { diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue index 0f2957c29..ee921fdac 100644 --- a/src/components/sidebar/tabs/QueueSidebarTab.vue +++ b/src/components/sidebar/tabs/QueueSidebarTab.vue @@ -219,6 +219,16 @@ const menuItems = computed(() => [ useLitegraphService().goToNode(menuTargetNode.value.id) }, visible: !!menuTargetNode.value + }, + { + label: t('g.setAsBackground'), + icon: 'pi pi-image', + command: () => { + const url = menuTargetTask.value?.previewOutput?.url + if (url) { + void settingStore.set('Comfy.Canvas.BackgroundImage', url) + } + } } ]) diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts index daa187870..b9ffac64d 100644 --- a/src/constants/coreSettings.ts +++ b/src/constants/coreSettings.ts @@ -826,6 +826,20 @@ export const CORE_SETTINGS: SettingParams[] = [ defaultValue: false, versionAdded: '1.18.0' }, + { + id: 'Comfy.Canvas.BackgroundImage', + category: ['Appearance', 'Canvas', 'Background'], + name: 'Canvas background image', + type: 'text', + tooltip: + 'Image URL for the canvas background. You can right-click an image in the outputs panel and select "Set as Background" to use it.', + defaultValue: '', + versionAdded: '1.20.4', + attrs: { + inputmode: 'url', + placeholder: 'https://example.com/image.png' + } + }, { id: 'LiteGraph.Pointer.TrackpadGestures', category: ['LiteGraph', 'Pointer', 'Trackpad Gestures'], diff --git a/src/locales/en/main.json b/src/locales/en/main.json index 45a1c7bad..d404694d6 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -57,6 +57,8 @@ "deprecated": "DEPR", "loadWorkflow": "Load Workflow", "goToNode": "Go to Node", + "setAsBackground": "Set as Background", + "customBackground": "Custom Background", "settings": "Settings", "searchWorkflows": "Search Workflows", "searchSettings": "Search Settings", diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json index f370bfab8..a18f28383 100644 --- a/src/locales/en/settings.json +++ b/src/locales/en/settings.json @@ -25,6 +25,10 @@ "custom": "custom" } }, + "Comfy_Canvas_BackgroundImage": { + "name": "Canvas background image", + "tooltip": "Image URL for the canvas background. You can right-click an image in the outputs panel and select \"Set as Background\" to use it." + }, "Comfy_Canvas_SelectionToolbox": { "name": "Show selection toolbox" }, diff --git a/src/locales/es/main.json b/src/locales/es/main.json index b073fd919..d5e2a4313 100644 --- a/src/locales/es/main.json +++ b/src/locales/es/main.json @@ -267,6 +267,7 @@ "copy": "Copiar", "copyToClipboard": "Copiar al portapapeles", "currentUser": "Usuario actual", + "customBackground": "Fondo personalizado", "customize": "Personalizar", "customizeFolder": "Personalizar carpeta", "delete": "Eliminar", @@ -342,6 +343,7 @@ "searchNodes": "Buscar nodos", "searchSettings": "Buscar configuraciones", "searchWorkflows": "Buscar flujos de trabajo", + "setAsBackground": "Establecer como fondo", "settings": "Configuraciones", "showReport": "Mostrar informe", "sort": "Ordenar", diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json index ae2a2e957..15dbfd1ac 100644 --- a/src/locales/es/settings.json +++ b/src/locales/es/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "Personalizado: Reemplace la barra de título del sistema con el menú superior de ComfyUI" }, + "Comfy_Canvas_BackgroundImage": { + "name": "Imagen de fondo del lienzo", + "tooltip": "URL de la imagen para el fondo del lienzo. Puedes hacer clic derecho en una imagen del panel de resultados y seleccionar \"Establecer como fondo\" para usarla." + }, "Comfy_Canvas_SelectionToolbox": { "name": "Mostrar caja de herramientas de selección" }, diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json index 319be4d03..c88495664 100644 --- a/src/locales/fr/main.json +++ b/src/locales/fr/main.json @@ -267,6 +267,7 @@ "copy": "Copier", "copyToClipboard": "Copier dans le presse-papiers", "currentUser": "Utilisateur actuel", + "customBackground": "Arrière-plan personnalisé", "customize": "Personnaliser", "customizeFolder": "Personnaliser le dossier", "delete": "Supprimer", @@ -342,6 +343,7 @@ "searchNodes": "Rechercher des nœuds", "searchSettings": "Rechercher des paramètres", "searchWorkflows": "Rechercher des flux de travail", + "setAsBackground": "Définir comme arrière-plan", "settings": "Paramètres", "showReport": "Afficher le rapport", "sort": "Trier", diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json index 756c0cdde..e80f57a5d 100644 --- a/src/locales/fr/settings.json +++ b/src/locales/fr/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "Choisissez l'option personnalisée pour masquer la barre de titre du système" }, + "Comfy_Canvas_BackgroundImage": { + "name": "Image de fond du canevas", + "tooltip": "URL de l'image pour le fond du canevas. Vous pouvez faire un clic droit sur une image dans le panneau de sortie et sélectionner « Définir comme fond » pour l'utiliser." + }, "Comfy_Canvas_SelectionToolbox": { "name": "Afficher la boîte à outils de sélection" }, diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json index e9031e653..d140b972e 100644 --- a/src/locales/ja/main.json +++ b/src/locales/ja/main.json @@ -267,6 +267,7 @@ "copy": "コピー", "copyToClipboard": "クリップボードにコピー", "currentUser": "現在のユーザー", + "customBackground": "カスタム背景", "customize": "カスタマイズ", "customizeFolder": "フォルダーをカスタマイズ", "delete": "削除", @@ -342,6 +343,7 @@ "searchNodes": "ノードを検索", "searchSettings": "設定を検索", "searchWorkflows": "ワークフローを検索", + "setAsBackground": "背景として設定", "settings": "設定", "showReport": "レポートを表示", "sort": "並び替え", diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json index 400ef71dc..3f4f68ed6 100644 --- a/src/locales/ja/settings.json +++ b/src/locales/ja/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "システムタイトルバーを非表示にするにはカスタムオプションを選択してください" }, + "Comfy_Canvas_BackgroundImage": { + "name": "キャンバス背景画像", + "tooltip": "キャンバスの背景画像のURLです。出力パネルで画像を右クリックし、「背景として設定」を選択すると使用できます。" + }, "Comfy_Canvas_SelectionToolbox": { "name": "選択ツールボックスを表示" }, diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json index 8cd1f252c..58d97798f 100644 --- a/src/locales/ko/main.json +++ b/src/locales/ko/main.json @@ -267,6 +267,7 @@ "copy": "복사", "copyToClipboard": "클립보드에 복사", "currentUser": "현재 사용자", + "customBackground": "맞춤 배경", "customize": "사용자 정의", "customizeFolder": "폴더 사용자 정의", "delete": "삭제", @@ -342,6 +343,7 @@ "searchNodes": "노드 검색", "searchSettings": "설정 검색", "searchWorkflows": "워크플로 검색", + "setAsBackground": "배경으로 설정", "settings": "설정", "showReport": "보고서 보기", "sort": "정렬", diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json index 4a857e9a0..c3b51c843 100644 --- a/src/locales/ko/settings.json +++ b/src/locales/ko/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "시스템 제목 표시 줄을 숨기려면 사용자 정의 옵션을 선택하세요" }, + "Comfy_Canvas_BackgroundImage": { + "name": "캔버스 배경 이미지", + "tooltip": "캔버스 배경에 사용할 이미지 URL입니다. 출력 패널에서 이미지를 마우스 오른쪽 버튼으로 클릭한 후 \"배경으로 설정\"을 선택해 사용할 수 있습니다." + }, "Comfy_Canvas_SelectionToolbox": { "name": "선택 도구 상자 표시" }, diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json index 53c11eee9..f9b08d985 100644 --- a/src/locales/ru/main.json +++ b/src/locales/ru/main.json @@ -267,6 +267,7 @@ "copy": "Копировать", "copyToClipboard": "Скопировать в буфер обмена", "currentUser": "Текущий пользователь", + "customBackground": "Пользовательский фон", "customize": "Настроить", "customizeFolder": "Настроить папку", "delete": "Удалить", @@ -342,6 +343,7 @@ "searchNodes": "Поиск нод", "searchSettings": "Поиск настроек", "searchWorkflows": "Поиск рабочих процессов", + "setAsBackground": "Установить как фон", "settings": "Настройки", "showReport": "Показать отчёт", "sort": "Сортировать", diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json index 175bd1455..2fe962498 100644 --- a/src/locales/ru/settings.json +++ b/src/locales/ru/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "Выберите пользовательский вариант, чтобы скрыть системную строку заголовка" }, + "Comfy_Canvas_BackgroundImage": { + "name": "Фоновое изображение холста", + "tooltip": "URL изображения для фона холста. Вы можете кликнуть правой кнопкой мыши на изображении в панели результатов и выбрать «Установить как фон», чтобы использовать его." + }, "Comfy_Canvas_SelectionToolbox": { "name": "Показать панель инструментов выбора" }, diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json index 744976f24..ef874afc4 100644 --- a/src/locales/zh/main.json +++ b/src/locales/zh/main.json @@ -267,6 +267,7 @@ "copy": "复制", "copyToClipboard": "复制到剪贴板", "currentUser": "当前用户", + "customBackground": "自定义背景", "customize": "自定义", "customizeFolder": "自定义文件夹", "delete": "删除", @@ -342,6 +343,7 @@ "searchNodes": "搜索节点", "searchSettings": "搜索设置", "searchWorkflows": "搜索工作流", + "setAsBackground": "设为背景", "settings": "设置", "showReport": "显示报告", "sort": "排序", diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json index 1d1ebeb01..abb4627bf 100644 --- a/src/locales/zh/settings.json +++ b/src/locales/zh/settings.json @@ -25,6 +25,10 @@ }, "tooltip": "选择自定义选项以隐藏系统标题栏" }, + "Comfy_Canvas_BackgroundImage": { + "name": "画布背景图像", + "tooltip": "画布背景的图像 URL。你可以在输出面板中右键点击一张图片，并选择“设为背景”来使用它。" + }, "Comfy_Canvas_SelectionToolbox": { "name": "显示选择工具箱" }, diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts index b0615f9b4..a6d8eee27 100644 --- a/src/schemas/apiSchema.ts +++ b/src/schemas/apiSchema.ts @@ -350,6 +350,7 @@ const zNodeBadgeMode = z.enum( const zSettings = z.object({ 'Comfy.ColorPalette': z.string(), 'Comfy.CustomColorPalettes': colorPalettesSchema, + 'Comfy.Canvas.BackgroundImage': z.string().optional(), 'Comfy.ConfirmClear': z.boolean(), 'Comfy.DevMode': z.boolean(), 'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(), diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts index ea4acb605..e4231c028 100644 --- a/src/services/colorPaletteService.ts +++ b/src/services/colorPaletteService.ts @@ -93,8 +93,13 @@ export const useColorPaletteService = () => { // Sets the colors of the LiteGraph objects app.canvas.node_title_color = palette.NODE_TITLE_COLOR app.canvas.default_link_color = palette.LINK_COLOR - app.canvas.background_image = palette.BACKGROUND_IMAGE - app.canvas.clear_background_color = palette.CLEAR_BACKGROUND_COLOR + const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage') + if (backgroundImage) { + app.canvas.clear_background_color = 'transparent' + } else { + app.canvas.background_image = palette.BACKGROUND_IMAGE + app.canvas.clear_background_color = palette.CLEAR_BACKGROUND_COLOR + } app.canvas._pattern = undefined for (const [key, value] of Object.entries(palette)) { @@ -126,6 +131,13 @@ export const useColorPaletteService = () => { for (const [key, value] of Object.entries(comfyColorPalette)) { rootStyle.setProperty('--' + key, value) } + const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage') + if (backgroundImage) { + rootStyle.setProperty( + '--bg-img', + `url('${backgroundImage}') no-repeat center /cover` + ) + } } }