Set output as background (#3079)

Co-authored-by: github-actions <[email protected]>

Author: christian-byrne

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) => {

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -219,6 +219,16 @@ const menuItems = computed<MenuItem[]>(() => [
       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)
+      }
+    }
   }
 ])
 

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'],

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",

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"
   },

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",

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"
   },

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",

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"
   },

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": "並び替え",