seed widget

src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue

@@ -6,6 +6,8 @@ import { computed, ref } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 
+import { NumberControlMode } from '../composables/useNumberControl'
+
 type ControlSettings = {
   linkToGlobal: boolean
   randomize: boolean
@@ -60,25 +62,24 @@ const widgetControlMode = computed(() =>
   settingStore.get('Comfy.WidgetControlMode')
 )
 
-const controlSettings = ref<ControlSettings>({
-  linkToGlobal: false,
-  randomize: true,
-  increment: false,
-  decrement: false
-})
+const props = defineProps<{
+  controlMode: NumberControlMode
+}>()
+
+const emit = defineEmits<{
+  'update:controlMode': [mode: NumberControlMode]
+}>()
 
 const handleToggle = (key: keyof ControlSettings) => {
-  // If turning on, turn off all others first
-  if (!controlSettings.value[key]) {
-    controlSettings.value = {
-      linkToGlobal: false,
-      randomize: false,
-      increment: false,
-      decrement: false
-    }
-  }
-  // Toggle the clicked one
-  controlSettings.value[key] = !controlSettings.value[key]
+  const newMode =
+    props.controlMode === key
+      ? NumberControlMode.FIXED
+      : (key as NumberControlMode)
+  emit('update:controlMode', newMode)
+}
+
+const isActive = (key: keyof ControlSettings) => {
+  return props.controlMode === key
 }
 </script>
 
@@ -86,15 +87,15 @@ const handleToggle = (key: keyof ControlSettings) => {
   <Popover ref="popover">
     <div class="w-105 p-4 space-y-4">
       <p class="text-sm text-slate-100">
-        {{ $t('widgets.seed.controlHeaderBefore') }}
+        {{ $t('widgets.numberControl.controlHeaderBefore') }}
         <span class="text-white">
           {{
             widgetControlMode === 'before'
-              ? $t('widgets.seed.controlHeaderBefore2')
-              : $t('widgets.seed.controlHeaderAfter')
+              ? $t('widgets.numberControl.controlHeaderBefore2')
+              : $t('widgets.numberControl.controlHeaderAfter')
           }}
         </span>
-        {{ $t('widgets.seed.controlHeaderEnd') }}
+        {{ $t('widgets.numberControl.controlHeaderEnd') }}
       </p>
 
       <div class="space-y-2">
@@ -115,20 +116,20 @@ const handleToggle = (key: keyof ControlSettings) => {
             <div class="min-w-0 flex-1">
               <div class="text-sm font-normal">
                 <span v-if="option.key === 'linkToGlobal'">
-                  {{ $t('widgets.seed.linkToGlobal') }}
-                  <em>{{ $t('widgets.seed.linkToGlobalSeed') }}</em>
+                  {{ $t('widgets.numberControl.linkToGlobal') }}
+                  <em>{{ $t('widgets.numberControl.linkToGlobalSeed') }}</em>
                 </span>
                 <span v-else>
-                  {{ $t(`widgets.seed.${option.title}`) }}
+                  {{ $t(`widgets.numberControl.${option.title}`) }}
                 </span>
               </div>
               <div class="text-sm font-normal text-slate-100">
-                {{ $t(`widgets.seed.${option.description}`) }}
+                {{ $t(`widgets.numberControl.${option.description}`) }}
               </div>
             </div>
           </div>
           <ToggleSwitch
-            :model-value="controlSettings[option.key]"
+            :model-value="isActive(option.key)"
             class="flex-shrink-0"
             @update:model-value="handleToggle(option.key)"
           />
@@ -139,7 +140,7 @@ const handleToggle = (key: keyof ControlSettings) => {
 
       <Button severity="secondary" size="small" class="w-full">
         <i class="pi pi-cog mr-2 text-xs" />
-        {{ $t('widgets.seed.editSettings') }}
+        {{ $t('widgets.numberControl.editSettings') }}
       </Button>
     </div>
   </Popover>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue

@@ -4,10 +4,11 @@ import { ref } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import SeedControlPopover from './SeedControlPopover.vue'
+import { useNumberControl } from '../composables/useNumberControl'
+import NumberControlPopover from './NumberControlPopover.vue'
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 
-defineProps<{
+const props = defineProps<{
   widget: SimplifiedWidget<number>
   readonly?: boolean
 }>()
@@ -15,6 +16,8 @@ defineProps<{
 const modelValue = defineModel<number>({ default: 0 })
 const popover = ref()
 
+const { controlMode } = useNumberControl(modelValue, props.widget.options || {})
+
 const togglePopover = (event: Event) => {
   popover.value.toggle(event)
 }
@@ -37,6 +40,10 @@ const togglePopover = (event: Event) => {
       <i class="icon-[lucide--shuffle] text-blue-100" />
     </Button>
 
-    <SeedControlPopover ref="popover" />
+    <NumberControlPopover
+      ref="popover"
+      :control-mode="controlMode"
+      @update:control-mode="controlMode = $event"
+    />
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/composables/useNumberControl.ts

@@ -0,0 +1,71 @@
+import { type Ref, onMounted, onUnmounted, ref } from 'vue'
+
+import { useGlobalSeedStore } from '@/stores/globalSeedStore'
+
+import { numberControlRegistry } from '../services/NumberControlRegistry'
+
+export enum NumberControlMode {
+  FIXED = 'fixed',
+  INCREMENT = 'increment',
+  DECREMENT = 'decrement',
+  RANDOMIZE = 'randomize',
+  LINK_TO_GLOBAL = 'linkToGlobal'
+}
+
+interface NumberControlOptions {
+  min?: number
+  max?: number
+  step?: number
+}
+
+export { executeNumberControls } from '../services/NumberControlRegistry'
+
+export function useNumberControl(
+  modelValue: Ref<number>,
+  options: NumberControlOptions
+) {
+  const controlMode = ref<NumberControlMode>(NumberControlMode.FIXED)
+  const controlId = Symbol('numberControl')
+  const globalSeedStore = useGlobalSeedStore()
+
+  const applyControl = () => {
+    const { min = 0, max = 1000000, step = 1 } = options
+
+    switch (controlMode.value) {
+      case NumberControlMode.FIXED:
+        // Do nothing - keep current value
+        break
+      case NumberControlMode.INCREMENT:
+        modelValue.value = Math.min(max, modelValue.value + step)
+        break
+      case NumberControlMode.DECREMENT:
+        modelValue.value = Math.max(min, modelValue.value - step)
+        break
+      case NumberControlMode.RANDOMIZE:
+        modelValue.value = Math.floor(Math.random() * (max - min + 1)) + min
+        break
+      case NumberControlMode.LINK_TO_GLOBAL:
+        // Use global seed value, constrained by min/max
+        modelValue.value = Math.max(
+          min,
+          Math.min(max, globalSeedStore.globalSeed)
+        )
+        break
+    }
+  }
+
+  // Register with singleton registry
+  onMounted(() => {
+    numberControlRegistry.register(controlId, applyControl)
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    numberControlRegistry.unregister(controlId)
+  })
+
+  return {
+    controlMode,
+    applyControl
+  }
+}

src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts

@@ -0,0 +1,59 @@
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+/**
+ * Registry for managing Vue number controls with deterministic execution timing.
+ * Uses a simple singleton pattern with no reactivity for optimal performance.
+ */
+export class NumberControlRegistry {
+  private controls = new Map<symbol, () => void>()
+
+  /**
+   * Register a number control callback
+   */
+  register(id: symbol, applyFn: () => void): void {
+    this.controls.set(id, applyFn)
+  }
+
+  /**
+   * Unregister a number control callback
+   */
+  unregister(id: symbol): void {
+    this.controls.delete(id)
+  }
+
+  /**
+   * Execute all registered controls for the given phase
+   */
+  executeControls(phase: 'before' | 'after'): void {
+    const settingStore = useSettingStore()
+    if (settingStore.get('Comfy.WidgetControlMode') === phase) {
+      for (const applyFn of this.controls.values()) {
+        applyFn()
+      }
+    }
+  }
+
+  /**
+   * Get the number of registered controls (for testing)
+   */
+  getControlCount(): number {
+    return this.controls.size
+  }
+
+  /**
+   * Clear all registered controls (for testing)
+   */
+  clear(): void {
+    this.controls.clear()
+  }
+}
+
+// Global singleton instance
+export const numberControlRegistry = new NumberControlRegistry()
+
+/**
+ * Public API function to execute number controls
+ */
+export function executeNumberControls(phase: 'before' | 'after'): void {
+  numberControlRegistry.executeControls(phase)
+}