Add background image setting for canvas

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

@@ -92,7 +92,6 @@
 </template>
 
 <script setup lang="ts">
-import { truncate } from 'lodash'
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
 import ContextMenu from 'primevue/contextmenu'
@@ -108,7 +107,6 @@ import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import { ComfyNode } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
 import {
@@ -117,7 +115,6 @@ import {
   useQueueStore
 } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { getPathDetails } from '@/utils/formatUtil'
 
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import ResultGallery from './queue/ResultGallery.vue'
@@ -224,29 +221,13 @@ const menuItems = computed<MenuItem[]>(() => [
     visible: !!menuTargetNode.value
   },
   {
-    label: t('Set as background'),
+    label: t('g.setAsBackground'),
     icon: 'pi pi-image',
     command: () => {
       const url = menuTargetTask.value?.previewOutput?.url
-      const filepath = menuTargetTask.value?.previewOutput?.filename
-      if (!url || !filepath) return
-
-      const { forkCurrentColorPalette, addCustomColorPalette } =
-        useColorPaletteService()
-
-      const palettePatch = {
-        colors: {
-          comfy_base: { 'bg-img': `url('${url}') no-repeat center /cover` },
-          litegraph_base: { CLEAR_BACKGROUND_COLOR: 'transparent' }
-        }
+      if (url) {
+        void settingStore.set('Comfy.Canvas.BackgroundImage', url)
       }
-
-      const { filename } = getPathDetails(filepath)
-      const forkedPalette = forkCurrentColorPalette(palettePatch, {
-        name: `${t('g.customBackground')} - ${truncate(filename, { length: 32 })}`
-      })
-
-      addCustomColorPalette(forkedPalette)
     }
   }
 ])

src/constants/coreSettings.ts

@@ -818,6 +818,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/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(),

src/services/colorPaletteService.ts

@@ -132,8 +132,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)) {
@@ -165,6 +170,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`
+        )
+      }
     }
   }