[Refactor] Move Comfy.WidgetControlMode to coreSettings (#2078)

src/components/graph/GraphCanvas.vue

@@ -67,6 +67,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useWorkflowService } from '@/services/workflowService'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -195,6 +196,23 @@ watchEffect(() => {
   LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
 })
 
+watch(settingStore.get('Comfy.WidgetControlMode'), () => {
+  for (const n of comfyApp.graph.nodes) {
+    if (!n.widgets) continue
+    for (const w of n.widgets) {
+      if (w[IS_CONTROL_WIDGET]) {
+        updateControlWidgetLabel(w)
+        if (w.linkedWidgets) {
+          for (const l of w.linkedWidgets) {
+            updateControlWidgetLabel(l)
+          }
+        }
+      }
+    }
+  }
+  comfyApp.graph.setDirtyCanvas(true)
+})
+
 watchEffect(() => {
   if (!canvasStore.canvas) return
 

src/constants/coreSettings.ts

@@ -679,5 +679,16 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'hidden',
     defaultValue: {} as ColorPalettes,
     versionModified: '1.6.7'
+  },
+  {
+    id: 'Comfy.WidgetControlMode',
+    category: ['Comfy', 'Node Widget', 'WidgetControlMode'],
+    name: 'Widget control mode',
+    tooltip:
+      'Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.',
+    type: 'combo',
+    defaultValue: 'after',
+    options: ['before', 'after'],
+    versionModified: '1.6.10'
   }
 ]

src/scripts/app.ts

@@ -1,9 +1,5 @@
 // @ts-strict-ignore
-import {
-  type ComfyWidgetConstructor,
-  ComfyWidgets,
-  initWidgets
-} from './widgets'
+import { type ComfyWidgetConstructor, ComfyWidgets } from './widgets'
 import { ComfyUI, $el } from './ui'
 import { api, type ComfyApi } from './api'
 import { defaultGraph } from './defaultGraph'
@@ -1048,7 +1044,6 @@ export class ComfyApp {
 
     await useExtensionService().invokeExtensionsAsync('init')
     await this.registerNodes()
-    initWidgets(this)
 
     // Load previous workflow
     let restored = false

src/scripts/widgets.ts

@@ -24,17 +24,20 @@ export type ComfyWidgetConstructor = (
   widgetName?: string
 ) => { widget: IWidget; minWidth?: number; minHeight?: number }
 
-let controlValueRunBefore = false
+function controlValueRunBefore() {
+  return useSettingStore().get('Comfy.WidgetControlMode') === 'before'
+}
+
 export function updateControlWidgetLabel(widget) {
   let replacement = 'after'
   let find = 'before'
-  if (controlValueRunBefore) {
+  if (controlValueRunBefore()) {
     ;[find, replacement] = [replacement, find]
   }
   widget.label = (widget.label ?? widget.name).replace(find, replacement)
 }
 
-const IS_CONTROL_WIDGET = Symbol()
+export const IS_CONTROL_WIDGET = Symbol()
 const HAS_EXECUTED = Symbol()
 
 function getNumberDefaults(
@@ -252,7 +255,7 @@ export function addValueControlWidgets(
   }
 
   valueControl.beforeQueued = () => {
-    if (controlValueRunBefore) {
+    if (controlValueRunBefore()) {
       // Don't run on first execution
       if (valueControl[HAS_EXECUTED]) {
         applyWidgetControl()
@@ -262,7 +265,7 @@ export function addValueControlWidgets(
   }
 
   valueControl.afterQueued = () => {
-    if (!controlValueRunBefore) {
+    if (!controlValueRunBefore()) {
       applyWidgetControl()
     }
   }
@@ -465,36 +468,6 @@ function isSlider(display, app) {
   return display === 'slider' ? 'slider' : 'number'
 }
 
-export function initWidgets(app) {
-  app.ui.settings.addSetting({
-    id: 'Comfy.WidgetControlMode',
-    category: ['Comfy', 'Node Widget', 'WidgetControlMode'],
-    name: 'Widget control mode',
-    tooltip:
-      'Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.',
-    type: 'combo',
-    defaultValue: 'after',
-    options: ['before', 'after'],
-    onChange(value) {
-      controlValueRunBefore = value === 'before'
-      for (const n of app.graph.nodes) {
-        if (!n.widgets) continue
-        for (const w of n.widgets) {
-          if (w[IS_CONTROL_WIDGET]) {
-            updateControlWidgetLabel(w)
-            if (w.linkedWidgets) {
-              for (const l of w.linkedWidgets) {
-                updateControlWidgetLabel(l)
-              }
-            }
-          }
-        }
-      }
-      app.graph.setDirtyCanvas(true)
-    }
-  })
-}
-
 export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
   'INT:seed': seedWidget,
   'INT:noise_seed': seedWidget,