[test] Add test to verify targetSelector property deletion

Add a specific test case to ensure the keybinding migration properly
deletes the deprecated 'targetSelector' property after migrating to
'targetElementId'. This test provides additional coverage to verify
the migration doesn't leave behind obsolete properties.

The test verifies:
- The old 'targetSelector' property is removed
- The new 'targetElementId' property is added with correct value
- Other properties remain unchanged

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.23.4",
+  "version": "1.23.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.23.4",
+      "version": "1.23.2",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.23.4",
+  "version": "1.23.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

src/components/graph/GraphCanvas.vue

@@ -297,6 +297,7 @@ onMounted(async () => {
       throw error
     }
   }
+
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
   })

src/components/graph/SelectionToolbox.vue

@@ -10,7 +10,6 @@
     <ColorPickerButton />
     <BypassButton />
     <PinButton />
-    <EditModelButton />
     <MaskEditorButton />
     <DeleteButton />
     <RefreshButton />
@@ -30,7 +29,6 @@ import { computed } from 'vue'
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
-import EditModelButton from '@/components/graph/selectionToolbox/EditModelButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
 import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'

src/components/graph/selectionToolbox/EditModelButton.vue

@@ -1,37 +0,0 @@
-<template>
-  <Button
-    v-show="isImageOutputSelected"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Canvas_AddEditModelStep.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon="pi pi-pen-to-square"
-    @click="() => commandStore.execute('Comfy.Canvas.AddEditModelStep')"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const isImageOutputOrEditModelNode = (node: unknown) =>
-  isLGraphNode(node) &&
-  (isImageNode(node) || node.type === 'workflow>FLUX.1 Kontext Image Edit')
-
-const isImageOutputSelected = computed(
-  () =>
-    canvasStore.selectedItems.length === 1 &&
-    isImageOutputOrEditModelNode(canvasStore.selectedItems[0])
-)
-</script>

src/composables/useCoreCommands.ts

@@ -14,7 +14,6 @@ import {
 import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { addFluxKontextGroupNode } from '@/scripts/fluxKontextEditNode'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -719,17 +718,6 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Move Selected Nodes Right',
       versionAdded: moveSelectedNodesVersionAdded,
       function: () => moveSelectedNodes(([x, y], gridSize) => [x + gridSize, y])
-    },
-    {
-      id: 'Comfy.Canvas.AddEditModelStep',
-      icon: 'pi pi-pen-to-square',
-      label: 'Add Edit Model Step',
-      versionAdded: '1.23.3',
-      function: async () => {
-        const node = app.canvas.selectedItems.values().next().value
-        if (!(node instanceof LGraphNode)) return
-        await addFluxKontextGroupNode(node)
-      }
     }
   ]
 

src/constants/coreSettings.ts

@@ -430,14 +430,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 'Top',
     name: 'Use new menu',
     type: 'combo',
-    options: ['Disabled', 'Top', 'Bottom'],
-    migrateDeprecatedValue: (value: string) => {
-      // Floating is now supported by dragging the docked actionbar off.
-      if (value === 'Floating') {
-        return 'Top'
-      }
-      return value
-    }
+    options: ['Disabled', 'Top', 'Bottom']
   },
   {
     id: 'Comfy.Workflow.WorkflowTabsPosition',
@@ -470,15 +463,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'hidden',
     defaultValue: [] as Keybinding[],
     versionAdded: '1.3.7',
-    versionModified: '1.7.3',
-    migrateDeprecatedValue: (value: any[]) => {
-      return value.map((keybinding) => {
-        if (keybinding['targetSelector'] === '#graph-canvas') {
-          keybinding['targetElementId'] = 'graph-canvas'
-        }
-        return keybinding
-      })
-    }
+    versionModified: '1.7.3'
   },
   {
     id: 'Comfy.Keybinding.NewBindings',
@@ -716,11 +701,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'The active color palette id',
     type: 'hidden',
     defaultValue: 'dark',
-    versionModified: '1.6.7',
-    migrateDeprecatedValue(value: string) {
-      // Legacy custom palettes were prefixed with 'custom_'
-      return value.startsWith('custom_') ? value.replace('custom_', '') : value
-    }
+    versionModified: '1.6.7'
   },
   {
     id: 'Comfy.CustomColorPalettes',

src/extensions/core/groupNodeManage.ts

@@ -7,8 +7,7 @@ import {
 import { useToastStore } from '@/stores/toastStore'
 
 import { type ComfyApp, app } from '../../scripts/app'
-import { $el } from '../../scripts/ui'
-import { ComfyDialog } from '../../scripts/ui/dialog'
+import { $el, ComfyDialog } from '../../scripts/ui'
 import { DraggableList } from '../../scripts/ui/draggableList'
 import { GroupNodeConfig, GroupNodeHandler } from './groupNode'
 import './groupNodeManage.css'

src/locales/en/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "Browse Templates"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "Add Edit Model Step"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "Delete Selected Items"
   },

src/locales/en/main.json

@@ -793,7 +793,6 @@
     "Reinstall": "Reinstall",
     "Restart": "Restart",
     "Browse Templates": "Browse Templates",
-    "Add Edit Model Step": "Add Edit Model Step",
     "Delete Selected Items": "Delete Selected Items",
     "Fit view to selected nodes": "Fit view to selected nodes",
     "Move Selected Nodes Down": "Move Selected Nodes Down",

src/locales/es/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "Explorar plantillas"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "Agregar paso de edición de modelo"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "Eliminar elementos seleccionados"
   },

src/locales/es/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "Acerca de ComfyUI",
-    "Add Edit Model Step": "Agregar paso de edición de modelo",
     "Browse Templates": "Explorar plantillas",
     "Bypass/Unbypass Selected Nodes": "Evitar/No evitar nodos seleccionados",
     "Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",

src/locales/fr/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "Parcourir les modèles"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "Ajouter/Modifier une étape de modèle"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "Supprimer les éléments sélectionnés"
   },

src/locales/fr/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "À propos de ComfyUI",
-    "Add Edit Model Step": "Ajouter une étape d’édition de modèle",
     "Browse Templates": "Parcourir les modèles",
     "Bypass/Unbypass Selected Nodes": "Contourner/Ne pas contourner les nœuds sélectionnés",
     "Canvas Toggle Link Visibility": "Basculer la visibilité du lien de la toile",

src/locales/ja/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "テンプレートを参照"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "編集モデルステップを追加"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "選択したアイテムを削除"
   },

src/locales/ja/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "ComfyUIについて",
-    "Add Edit Model Step": "モデル編集ステップを追加",
     "Browse Templates": "テンプレートを参照",
     "Bypass/Unbypass Selected Nodes": "選択したノードのバイパス/バイパス解除",
     "Canvas Toggle Link Visibility": "キャンバスのリンク表示を切り替え",

src/locales/ko/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "템플릿 탐색"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "모델 편집 단계 추가"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "선택한 항목 삭제"
   },

src/locales/ko/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "ComfyUI에 대하여",
-    "Add Edit Model Step": "모델 편집 단계 추가",
     "Browse Templates": "템플릿 탐색",
     "Bypass/Unbypass Selected Nodes": "선택한 노드 우회/우회 해제",
     "Canvas Toggle Link Visibility": "캔버스 토글 링크 가시성",

src/locales/ru/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "Просмотр шаблонов"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "Добавить или изменить шаг модели"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "Удалить выбранные элементы"
   },

src/locales/ru/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "О ComfyUI",
-    "Add Edit Model Step": "Добавить или изменить шаг модели",
     "Browse Templates": "Просмотреть шаблоны",
     "Bypass/Unbypass Selected Nodes": "Обойти/восстановить выбранные ноды",
     "Canvas Toggle Link Visibility": "Переключение видимости ссылки на холст",

src/locales/zh/commands.json

@@ -38,9 +38,6 @@
   "Comfy_BrowseTemplates": {
     "label": "浏览模板"
   },
-  "Comfy_Canvas_AddEditModelStep": {
-    "label": "添加编辑模型步骤"
-  },
   "Comfy_Canvas_DeleteSelectedItems": {
     "label": "删除选定的项目"
   },

src/locales/zh/main.json

@@ -684,7 +684,6 @@
   },
   "menuLabels": {
     "About ComfyUI": "关于ComfyUI",
-    "Add Edit Model Step": "添加编辑模型步骤",
     "Browse Templates": "浏览模板",
     "Bypass/Unbypass Selected Nodes": "忽略/取消忽略选定节点",
     "Canvas Toggle Link Visibility": "切换连线可见性",

src/scripts/fluxKontextEditNode.ts

@@ -1,693 +0,0 @@
-import {
-  type INodeOutputSlot,
-  type LGraph,
-  type LGraphNode,
-  LLink,
-  LiteGraph,
-  type Point
-} from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
-import _ from 'lodash'
-
-import { parseFilePath } from '@/utils/formatUtil'
-
-import { app } from './app'
-
-const fluxKontextGroupNode = {
-  nodes: [
-    {
-      id: -1,
-      type: 'Reroute',
-      pos: [2354.87890625, -127.23468780517578],
-      size: [75, 26],
-      flags: {},
-      order: 20,
-      mode: 0,
-      inputs: [{ name: '', type: '*', link: null }],
-      outputs: [{ name: '', type: '*', links: null }],
-      properties: { showOutputText: false, horizontal: false },
-      index: 0
-    },
-    {
-      id: -1,
-      type: 'ReferenceLatent',
-      pos: [2730, -220],
-      size: [197.712890625, 46],
-      flags: {},
-      order: 22,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'conditioning',
-          name: 'conditioning',
-          type: 'CONDITIONING',
-          link: null
-        },
-        {
-          localized_name: 'latent',
-          name: 'latent',
-          shape: 7,
-          type: 'LATENT',
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'CONDITIONING',
-          name: 'CONDITIONING',
-          type: 'CONDITIONING',
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'ReferenceLatent',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      index: 1
-    },
-    {
-      id: -1,
-      type: 'VAEDecode',
-      pos: [3270, -110],
-      size: [210, 46],
-      flags: {},
-      order: 25,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'samples',
-          name: 'samples',
-          type: 'LATENT',
-          link: null
-        },
-        {
-          localized_name: 'vae',
-          name: 'vae',
-          type: 'VAE',
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'IMAGE',
-          name: 'IMAGE',
-          type: 'IMAGE',
-          slot_index: 0,
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'VAEDecode',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      index: 2
-    },
-    {
-      id: -1,
-      type: 'KSampler',
-      pos: [2930, -110],
-      size: [315, 262],
-      flags: {},
-      order: 24,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'model',
-          name: 'model',
-          type: 'MODEL',
-          link: null
-        },
-        {
-          localized_name: 'positive',
-          name: 'positive',
-          type: 'CONDITIONING',
-          link: null
-        },
-        {
-          localized_name: 'negative',
-          name: 'negative',
-          type: 'CONDITIONING',
-          link: null
-        },
-        {
-          localized_name: 'latent_image',
-          name: 'latent_image',
-          type: 'LATENT',
-          link: null
-        },
-        {
-          localized_name: 'seed',
-          name: 'seed',
-          type: 'INT',
-          widget: { name: 'seed' },
-          link: null
-        },
-        {
-          localized_name: 'steps',
-          name: 'steps',
-          type: 'INT',
-          widget: { name: 'steps' },
-          link: null
-        },
-        {
-          localized_name: 'cfg',
-          name: 'cfg',
-          type: 'FLOAT',
-          widget: { name: 'cfg' },
-          link: null
-        },
-        {
-          localized_name: 'sampler_name',
-          name: 'sampler_name',
-          type: 'COMBO',
-          widget: { name: 'sampler_name' },
-          link: null
-        },
-        {
-          localized_name: 'scheduler',
-          name: 'scheduler',
-          type: 'COMBO',
-          widget: { name: 'scheduler' },
-          link: null
-        },
-        {
-          localized_name: 'denoise',
-          name: 'denoise',
-          type: 'FLOAT',
-          widget: { name: 'denoise' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'LATENT',
-          name: 'LATENT',
-          type: 'LATENT',
-          slot_index: 0,
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'KSampler',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: [972054013131369, 'fixed', 20, 1, 'euler', 'simple', 1],
-      index: 3
-    },
-    {
-      id: -1,
-      type: 'FluxGuidance',
-      pos: [2940, -220],
-      size: [211.60000610351562, 58],
-      flags: {},
-      order: 23,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'conditioning',
-          name: 'conditioning',
-          type: 'CONDITIONING',
-          link: null
-        },
-        {
-          localized_name: 'guidance',
-          name: 'guidance',
-          type: 'FLOAT',
-          widget: { name: 'guidance' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'CONDITIONING',
-          name: 'CONDITIONING',
-          type: 'CONDITIONING',
-          slot_index: 0,
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'FluxGuidance',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: [2.5],
-      index: 4
-    },
-    {
-      id: -1,
-      type: 'SaveImage',
-      pos: [3490, -110],
-      size: [985.3012084960938, 1060.3828125],
-      flags: {},
-      order: 26,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'images',
-          name: 'images',
-          type: 'IMAGE',
-          link: null
-        },
-        {
-          localized_name: 'filename_prefix',
-          name: 'filename_prefix',
-          type: 'STRING',
-          widget: { name: 'filename_prefix' },
-          link: null
-        }
-      ],
-      outputs: [],
-      properties: { cnr_id: 'comfy-core', ver: '0.3.38' },
-      widgets_values: ['ComfyUI'],
-      index: 5
-    },
-    {
-      id: -1,
-      type: 'CLIPTextEncode',
-      pos: [2500, -110],
-      size: [422.84503173828125, 164.31304931640625],
-      flags: {},
-      order: 12,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'clip',
-          name: 'clip',
-          type: 'CLIP',
-          link: null
-        },
-        {
-          localized_name: 'text',
-          name: 'text',
-          type: 'STRING',
-          widget: { name: 'text' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'CONDITIONING',
-          name: 'CONDITIONING',
-          type: 'CONDITIONING',
-          slot_index: 0,
-          links: []
-        }
-      ],
-      title: 'CLIP Text Encode (Positive Prompt)',
-      properties: {
-        'Node name for S&R': 'CLIPTextEncode',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: ['there is a bright light'],
-      color: '#232',
-      bgcolor: '#353',
-      index: 6
-    },
-    {
-      id: -1,
-      type: 'CLIPTextEncode',
-      pos: [2504.1435546875, 97.9598617553711],
-      size: [422.84503173828125, 164.31304931640625],
-      flags: { collapsed: true },
-      order: 13,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'clip',
-          name: 'clip',
-          type: 'CLIP',
-          link: null
-        },
-        {
-          localized_name: 'text',
-          name: 'text',
-          type: 'STRING',
-          widget: { name: 'text' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'CONDITIONING',
-          name: 'CONDITIONING',
-          type: 'CONDITIONING',
-          slot_index: 0,
-          links: []
-        }
-      ],
-      title: 'CLIP Text Encode (Negative Prompt)',
-      properties: {
-        'Node name for S&R': 'CLIPTextEncode',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: [''],
-      color: '#322',
-      bgcolor: '#533',
-      index: 7
-    },
-    {
-      id: -1,
-      type: 'UNETLoader',
-      pos: [2630, -370],
-      size: [270, 82],
-      flags: {},
-      order: 6,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'unet_name',
-          name: 'unet_name',
-          type: 'COMBO',
-          widget: { name: 'unet_name' },
-          link: null
-        },
-        {
-          localized_name: 'weight_dtype',
-          name: 'weight_dtype',
-          type: 'COMBO',
-          widget: { name: 'weight_dtype' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'MODEL',
-          name: 'MODEL',
-          type: 'MODEL',
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'UNETLoader',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: ['flux1-kontext-dev.safetensors', 'default'],
-      color: '#223',
-      bgcolor: '#335',
-      index: 8
-    },
-    {
-      id: -1,
-      type: 'DualCLIPLoader',
-      pos: [2100, -290],
-      size: [337.76861572265625, 130],
-      flags: {},
-      order: 8,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'clip_name1',
-          name: 'clip_name1',
-          type: 'COMBO',
-          widget: { name: 'clip_name1' },
-          link: null
-        },
-        {
-          localized_name: 'clip_name2',
-          name: 'clip_name2',
-          type: 'COMBO',
-          widget: { name: 'clip_name2' },
-          link: null
-        },
-        {
-          localized_name: 'type',
-          name: 'type',
-          type: 'COMBO',
-          widget: { name: 'type' },
-          link: null
-        },
-        {
-          localized_name: 'device',
-          name: 'device',
-          shape: 7,
-          type: 'COMBO',
-          widget: { name: 'device' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'CLIP',
-          name: 'CLIP',
-          type: 'CLIP',
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'DualCLIPLoader',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: [
-        'clip_l.safetensors',
-        't5xxl_fp8_e4m3fn_scaled.safetensors',
-        'flux',
-        'default'
-      ],
-      color: '#223',
-      bgcolor: '#335',
-      index: 9
-    },
-    {
-      id: -1,
-      type: 'VAELoader',
-      pos: [2960, -370],
-      size: [270, 58],
-      flags: {},
-      order: 7,
-      mode: 0,
-      inputs: [
-        {
-          localized_name: 'vae_name',
-          name: 'vae_name',
-          type: 'COMBO',
-          widget: { name: 'vae_name' },
-          link: null
-        }
-      ],
-      outputs: [
-        {
-          localized_name: 'VAE',
-          name: 'VAE',
-          type: 'VAE',
-          links: []
-        }
-      ],
-      properties: {
-        'Node name for S&R': 'VAELoader',
-        cnr_id: 'comfy-core',
-        ver: '0.3.38'
-      },
-      widgets_values: ['ae.safetensors'],
-      color: '#223',
-      bgcolor: '#335',
-      index: 10
-    }
-  ],
-  links: [
-    [6, 0, 1, 0, 72, 'CONDITIONING'],
-    [0, 0, 1, 1, 66, '*'],
-    [3, 0, 2, 0, 69, 'LATENT'],
-    [10, 0, 2, 1, 76, 'VAE'],
-    [8, 0, 3, 0, 74, 'MODEL'],
-    [4, 0, 3, 1, 70, 'CONDITIONING'],
-    [7, 0, 3, 2, 73, 'CONDITIONING'],
-    [0, 0, 3, 3, 66, '*'],
-    [1, 0, 4, 0, 67, 'CONDITIONING'],
-    [2, 0, 5, 0, 68, 'IMAGE'],
-    [9, 0, 6, 0, 75, 'CLIP'],
-    [9, 0, 7, 0, 75, 'CLIP']
-  ],
-  external: [],
-  config: {
-    '0': {},
-    '1': {},
-    '2': { output: { '0': { visible: true } } },
-    '3': {
-      output: { '0': { visible: true } },
-      input: {
-        denoise: { visible: false },
-        cfg: { visible: false }
-      }
-    },
-    '4': {},
-    '5': {},
-    '6': {},
-    '7': { input: { text: { visible: false } } },
-    '8': { input: { weight_dtype: { visible: false } } },
-    '9': { input: { type: { visible: false }, device: { visible: false } } },
-    '10': {}
-  }
-}
-
-export async function ensureGraphHasFluxKontextGroupNode(
-  graph: LGraph & { extra: { groupNodes?: Record<string, any> } }
-) {
-  graph.extra ??= {}
-  graph.extra.groupNodes ??= {}
-  if (graph.extra.groupNodes['FLUX.1 Kontext Image Edit']) return
-
-  graph.extra.groupNodes['FLUX.1 Kontext Image Edit'] =
-    structuredClone(fluxKontextGroupNode)
-
-  // Lazy import to avoid circular dependency issues
-  const { GroupNodeConfig } = await import('@/extensions/core/groupNode')
-  await GroupNodeConfig.registerFromWorkflow(
-    {
-      'FLUX.1 Kontext Image Edit':
-        graph.extra.groupNodes['FLUX.1 Kontext Image Edit']
-    },
-    []
-  )
-}
-
-export async function addFluxKontextGroupNode(fromNode: LGraphNode) {
-  const { canvas } = app
-  const { graph } = canvas
-  if (!graph) throw new TypeError('Graph is not initialized')
-  await ensureGraphHasFluxKontextGroupNode(graph)
-
-  const node = LiteGraph.createNode('workflow>FLUX.1 Kontext Image Edit')
-  if (!node) throw new TypeError('Failed to create node')
-
-  const pos = getPosToRightOfNode(fromNode)
-
-  graph.add(node)
-  node.pos = pos
-  app.canvas.processSelect(node, undefined)
-
-  connectPreviousLatent(fromNode, node)
-
-  const symb = Object.getOwnPropertySymbols(node)[0]
-  // @ts-expect-error It's there -- promise.
-  node[symb].populateWidgets()
-
-  setWidgetValues(node)
-}
-
-function setWidgetValues(node: LGraphNode) {
-  const seedInput = node.widgets?.find((x) => x.name === 'seed')
-  if (!seedInput) throw new TypeError('Seed input not found')
-  seedInput.value = Math.floor(Math.random() * 1_125_899_906_842_624)
-
-  const firstClip = node.widgets?.find((x) => x.name === 'clip_name1')
-  setPreferredValue('t5xxl_fp8_e4m3fn_scaled.safetensors', 't5xxl', firstClip)
-
-  const secondClip = node.widgets?.find((x) => x.name === 'clip_name2')
-  setPreferredValue('clip_l.safetensors', 'clip_l', secondClip)
-
-  const unet = node.widgets?.find((x) => x.name === 'unet_name')
-  setPreferredValue('flux1-dev-kontext_fp8_scaled.safetensors', 'kontext', unet)
-
-  const vae = node.widgets?.find((x) => x.name === 'vae_name')
-  setPreferredValue('ae.safetensors', 'ae.s', vae)
-}
-
-function setPreferredValue(
-  preferred: string,
-  match: string,
-  widget: IBaseWidget | undefined
-): void {
-  if (!widget) throw new TypeError('Widget not found')
-
-  const { values } = widget.options
-  if (!Array.isArray(values)) return
-
-  // Match against filename portion only
-  const mapped = values.map((x) => parseFilePath(x).filename)
-  const value =
-    mapped.find((x) => x === preferred) ??
-    mapped.find((x) => x.includes?.(match))
-  widget.value = value ?? preferred
-}
-
-function getPosToRightOfNode(fromNode: LGraphNode) {
-  const nodes = app.canvas.graph?.nodes
-  if (!nodes) throw new TypeError('Could not get graph nodes')
-
-  const pos = [
-    fromNode.pos[0] + fromNode.size[0] + 100,
-    fromNode.pos[1]
-  ] satisfies Point
-
-  while (nodes.find((x) => isPointTooClose(x.pos, pos))) {
-    pos[0] += 20
-    pos[1] += 20
-  }
-
-  return pos
-}
-
-function connectPreviousLatent(fromNode: LGraphNode, toEditNode: LGraphNode) {
-  const { canvas } = app
-  const { graph } = canvas
-  if (!graph) throw new TypeError('Graph is not initialized')
-
-  const l = findNearestOutputOfType([fromNode], 'LATENT')
-  if (!l) {
-    const imageOutput = findNearestOutputOfType([fromNode], 'IMAGE')
-    if (!imageOutput) throw new TypeError('No image output found')
-
-    const vaeEncode = LiteGraph.createNode('VAEEncode')
-    if (!vaeEncode) throw new TypeError('Failed to create node')
-
-    const { node: imageNode, index: imageIndex } = imageOutput
-    graph.add(vaeEncode)
-    vaeEncode.pos = getPosToRightOfNode(fromNode)
-    vaeEncode.pos[1] -= 200
-
-    vaeEncode.connect(0, toEditNode, 0)
-    imageNode.connect(imageIndex, vaeEncode, 0)
-    return
-  }
-
-  const { node, index } = l
-
-  node.connect(index, toEditNode, 0)
-}
-
-function getInputNodes(node: LGraphNode): LGraphNode[] {
-  return node.inputs
-    .map((x) => LLink.resolve(x.link, app.graph)?.outputNode)
-    .filter((x) => !!x)
-}
-
-function getOutputOfType(
-  node: LGraphNode,
-  type: string
-): {
-  output: INodeOutputSlot
-  index: number
-} {
-  const index = node.outputs.findIndex((x) => x.type === type)
-  const output = node.outputs[index]
-  return { output, index }
-}
-
-function findNearestOutputOfType(
-  nodes: Iterable<LGraphNode>,
-  type: string = 'LATENT',
-  depth: number = 0
-): { node: LGraphNode; index: number } | undefined {
-  for (const node of nodes) {
-    const { output, index } = getOutputOfType(node, type)
-    if (output) return { node, index }
-  }
-
-  if (depth < 3) {
-    const closestNodes = new Set([...nodes].flatMap((x) => getInputNodes(x)))
-    const res = findNearestOutputOfType(closestNodes, type, depth + 1)
-    if (res) return res
-  }
-}
-
-function isPointTooClose(a: Point, b: Point, precision: number = 5) {
-  return Math.abs(a[0] - b[0]) < precision && Math.abs(a[1] - b[1]) < precision
-}

src/stores/settingStore.ts

@@ -7,6 +7,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { SettingParams } from '@/types/settingTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
+import { runSettingMigrations } from '@/utils/migration/settingsMigration'
 
 export const getSettingInfo = (setting: SettingParams) => {
   const parts = setting.category || setting.id.split('.')
@@ -20,10 +21,6 @@ export interface SettingTreeNode extends TreeNode {
   data?: SettingParams
 }
 
-function tryMigrateDeprecatedValue(setting: SettingParams, value: any) {
-  return setting?.migrateDeprecatedValue?.(value) ?? value
-}
-
 function onChange(setting: SettingParams, newValue: any, oldValue: any) {
   if (setting?.onChange) {
     setting.onChange(newValue, oldValue)
@@ -54,16 +51,12 @@ export const useSettingStore = defineStore('setting', () => {
   async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
     // Clone the incoming value to prevent external mutations
     const clonedValue = _.cloneDeep(value)
-    const newValue = tryMigrateDeprecatedValue(
-      settingsById.value[key],
-      clonedValue
-    )
     const oldValue = get(key)
-    if (newValue === oldValue) return
+    if (clonedValue === oldValue) return
 
-    onChange(settingsById.value[key], newValue, oldValue)
-    settingValues.value[key] = newValue
-    await api.storeSetting(key, newValue)
+    onChange(settingsById.value[key], clonedValue, oldValue)
+    settingValues.value[key] = clonedValue
+    await api.storeSetting(key, clonedValue)
   }
 
   /**
@@ -102,12 +95,7 @@ export const useSettingStore = defineStore('setting', () => {
 
     settingsById.value[setting.id] = setting
 
-    if (settingValues.value[setting.id] !== undefined) {
-      settingValues.value[setting.id] = tryMigrateDeprecatedValue(
-        setting,
-        settingValues.value[setting.id]
-      )
-    }
+    // Trigger onChange callback with current value
     onChange(setting, get(setting.id), undefined)
   }
 
@@ -122,6 +110,9 @@ export const useSettingStore = defineStore('setting', () => {
       )
     }
     settingValues.value = await api.getSettings()
+
+    // Run migrations after loading values but before settings are registered
+    await runSettingMigrations()
   }
 
   return {

src/types/settingTypes.ts

@@ -43,8 +43,6 @@ export interface SettingParams extends FormItem {
   category?: string[]
   experimental?: boolean
   deprecated?: boolean
-  // Deprecated values are mapped to new values.
-  migrateDeprecatedValue?: (value: any) => any
   // Version of the setting when it was added
   versionAdded?: string
   // Version of the setting when it was last modified

src/utils/migration/settingsMigration.ts

@@ -0,0 +1,88 @@
+import type { Keybinding } from '@/schemas/keyBindingSchema'
+import { useSettingStore } from '@/stores/settingStore'
+
+export interface SettingMigration {
+  condition: () => boolean
+  migrate: () => Promise<void>
+}
+
+/**
+ * Setting value migrations that transform deprecated values to new formats.
+ * These run after settings are loaded from the server but before they are
+ * registered, ensuring settings have valid values when the app initializes.
+ */
+export const SETTING_MIGRATIONS: SettingMigration[] = [
+  // Migrate Comfy.UseNewMenu "Floating" value to "Top"
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      return (
+        settingStore.exists('Comfy.UseNewMenu') &&
+        (settingStore.get('Comfy.UseNewMenu') as string) === 'Floating'
+      )
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      await settingStore.set('Comfy.UseNewMenu', 'Top')
+    }
+  },
+  // Migrate Comfy.Keybinding.UnsetBindings targetSelector to targetElementId
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      if (!settingStore.exists('Comfy.Keybinding.UnsetBindings')) return false
+      const keybindings = settingStore.get(
+        'Comfy.Keybinding.UnsetBindings'
+      ) as Keybinding[]
+      return keybindings.some((kb: any) => 'targetSelector' in kb)
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      const keybindings = settingStore.get(
+        'Comfy.Keybinding.UnsetBindings'
+      ) as Keybinding[]
+      const migrated = keybindings.map((keybinding) => {
+        // Create a new object to avoid mutating the original
+        const newKeybinding = { ...keybinding }
+        if (
+          'targetSelector' in newKeybinding &&
+          newKeybinding['targetSelector'] === '#graph-canvas'
+        ) {
+          newKeybinding['targetElementId'] = 'graph-canvas'
+          delete newKeybinding['targetSelector']
+        }
+        return newKeybinding
+      })
+      await settingStore.set('Comfy.Keybinding.UnsetBindings', migrated)
+    }
+  },
+  // Migrate Comfy.ColorPalette custom_ prefix
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      return (
+        settingStore.exists('Comfy.ColorPalette') &&
+        (settingStore.get('Comfy.ColorPalette') as string).startsWith('custom_')
+      )
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      const value = settingStore.get('Comfy.ColorPalette') as string
+      await settingStore.set('Comfy.ColorPalette', value.replace('custom_', ''))
+    }
+  }
+]
+
+/**
+ * Runs all setting migrations that meet their conditions.
+ * This is called after loadSettingValues() to ensure all deprecated
+ * setting values are migrated to their current format before the
+ * application starts using them.
+ */
+export async function runSettingMigrations(): Promise<void> {
+  for (const migration of SETTING_MIGRATIONS) {
+    if (migration.condition()) {
+      await migration.migrate()
+    }
+  }
+}

tests-ui/tests/store/settingStore.test.ts

@@ -92,21 +92,6 @@ describe('useSettingStore', () => {
         'Setting test.setting must have a unique ID.'
       )
     })
-
-    it('should migrate deprecated values', () => {
-      const setting: SettingParams = {
-        id: 'test.setting',
-        name: 'test.setting',
-        type: 'text',
-        defaultValue: 'default',
-        migrateDeprecatedValue: (value: string) => value.toUpperCase()
-      }
-
-      store.settingValues['test.setting'] = 'oldvalue'
-      store.addSetting(setting)
-
-      expect(store.settingValues['test.setting']).toBe('OLDVALUE')
-    })
   })
 
   describe('get and set', () => {

tests-ui/tests/utils/migration/settingsMigration.test.ts

@@ -0,0 +1,271 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+import { useSettingStore } from '@/stores/settingStore'
+import {
+  SETTING_MIGRATIONS,
+  runSettingMigrations
+} from '@/utils/migration/settingsMigration'
+
+// Mock the api
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getSettings: vi.fn(),
+    storeSetting: vi.fn()
+  }
+}))
+
+// Mock the app
+vi.mock('@/scripts/app', () => ({
+  app: {
+    ui: {
+      settings: {
+        dispatchChange: vi.fn()
+      }
+    }
+  }
+}))
+
+describe('settingsMigration', () => {
+  let store: ReturnType<typeof useSettingStore>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useSettingStore()
+    vi.clearAllMocks()
+
+    // Mock the store methods to avoid needing registered settings
+    vi.spyOn(store, 'set').mockImplementation(async (key, value) => {
+      store.settingValues[key] = value
+      await api.storeSetting(key, value)
+    })
+
+    vi.spyOn(store, 'get').mockImplementation((key) => {
+      return store.settingValues[key]
+    })
+
+    vi.spyOn(store, 'exists').mockImplementation((key) => {
+      return key in store.settingValues
+    })
+  })
+
+  describe('Comfy.UseNewMenu migration', () => {
+    it('should migrate "Floating" value to "Top"', async () => {
+      // Setup initial state with old value
+      store.settingValues = { 'Comfy.UseNewMenu': 'Floating' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the value was updated
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Top')
+      expect(api.storeSetting).toHaveBeenCalledWith('Comfy.UseNewMenu', 'Top')
+    })
+
+    it('should not migrate when value is not "Floating"', () => {
+      // Setup with different value
+      store.settingValues = { 'Comfy.UseNewMenu': 'Bottom' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('Comfy.Keybinding.UnsetBindings migration', () => {
+    it('should migrate targetSelector to targetElementId', async () => {
+      // Setup with old format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' },
+          { targetSelector: '#other', key: 'b' }
+        ]
+      }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the migration
+      const result = store.settingValues['Comfy.Keybinding.UnsetBindings']
+      expect(result).toEqual([
+        { targetElementId: 'graph-canvas', key: 'a' },
+        { targetSelector: '#other', key: 'b' } // Only #graph-canvas is migrated
+      ])
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.Keybinding.UnsetBindings',
+        result
+      )
+    })
+
+    it('should delete targetSelector property after migration', async () => {
+      // Setup with old format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' }
+        ]
+      }
+
+      // Run migration
+      await SETTING_MIGRATIONS[1].migrate()
+
+      // Verify targetSelector is deleted and targetElementId is added
+      const result = store.settingValues['Comfy.Keybinding.UnsetBindings'][0]
+      expect(result).not.toHaveProperty('targetSelector')
+      expect(result).toHaveProperty('targetElementId', 'graph-canvas')
+      expect(result).toHaveProperty('key', 'a')
+    })
+
+    it('should not migrate when all keybindings use new format', () => {
+      // Setup with new format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetElementId: 'graph-canvas', key: 'a' }
+        ]
+      }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should handle empty keybindings array', () => {
+      // Empty array
+      store.settingValues = { 'Comfy.Keybinding.UnsetBindings': [] }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('Comfy.ColorPalette migration', () => {
+    it('should remove "custom_" prefix', async () => {
+      // Setup with old format
+      store.settingValues = { 'Comfy.ColorPalette': 'custom_mytheme' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the migration
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.ColorPalette',
+        'mytheme'
+      )
+    })
+
+    it('should not migrate when value does not start with "custom_"', () => {
+      // Setup with value that doesn't need migration
+      store.settingValues = { 'Comfy.ColorPalette': 'dark' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('runSettingMigrations', () => {
+    it('should run all applicable migrations', async () => {
+      // Setup state that triggers all migrations
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Floating',
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' }
+        ],
+        'Comfy.ColorPalette': 'custom_mytheme'
+      }
+
+      // Run all migrations
+      await runSettingMigrations()
+
+      // Verify all migrations ran
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Top')
+      expect(store.settingValues['Comfy.Keybinding.UnsetBindings']).toEqual([
+        { targetElementId: 'graph-canvas', key: 'a' }
+      ])
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+
+      // Verify all API calls were made
+      expect(api.storeSetting).toHaveBeenCalledTimes(3)
+    })
+
+    it('should only run migrations that meet their conditions', async () => {
+      // Setup state that only triggers one migration
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Bottom', // Won't migrate
+        'Comfy.ColorPalette': 'custom_mytheme' // Will migrate
+      }
+
+      // Run migrations
+      await runSettingMigrations()
+
+      // Verify only one migration ran
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Bottom')
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+
+      // Only one API call
+      expect(api.storeSetting).toHaveBeenCalledTimes(1)
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.ColorPalette',
+        'mytheme'
+      )
+    })
+
+    it('should handle no migrations needed', async () => {
+      // Setup state that doesn't trigger any migrations
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetElementId: 'graph-canvas', key: 'a' }
+        ],
+        'Comfy.ColorPalette': 'dark'
+      }
+
+      // Run migrations
+      await runSettingMigrations()
+
+      // No API calls should be made
+      expect(api.storeSetting).not.toHaveBeenCalled()
+    })
+  })
+})