Persist control widget value

src/composables/graph/useGraphNodeManager.ts

@@ -17,7 +17,11 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue } from '@/types/simplifiedWidget'
+import type {
+  WidgetValue,
+  SafeControlWidget,
+  ControlWidgetOptions
+} from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -44,6 +48,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
+  controlWidget?: SafeControlWidget
 }
 
 export interface VueNodeData {
@@ -79,6 +84,29 @@ export interface GraphNodeManager {
   cleanup(): void
 }
 
+function validateControlWidgetValue(val: unknown): ControlWidgetOptions {
+  //TODO: Is there a way to do this without repeating?
+  switch (val) {
+    case 'fixed':
+      return 'fixed'
+    case 'increment':
+      return 'increment'
+    case 'decrement':
+      return 'decrement'
+  }
+  return 'randomize'
+}
+function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
+  const cagWidget = widget.linkedWidgets?.find(
+    (w) => (w.name = 'control_after_generate')
+  )
+  if (!cagWidget) return
+  return {
+    value: validateControlWidgetValue(cagWidget.value),
+    update: (value) => (cagWidget.value = validateControlWidgetValue(value))
+  }
+}
+
 export function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
@@ -111,7 +139,8 @@ export function safeWidgetMapper(
         callback: widget.callback,
         spec,
         slotMetadata: slotInfo,
-        isDOMWidget: isDOMWidget(widget)
+        isDOMWidget: isDOMWidget(widget),
+        controlWidget: getControlWidget(widget)
       }
     } catch (error) {
       return {

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -159,7 +159,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       label: widget.label,
       options: widgetOptions,
       callback: widget.callback,
-      spec: widget.spec
+      spec: widget.spec,
+      controlWidget: widget.controlWidget
     }
 
     const updateHandler = (value: WidgetValue) => {

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

@@ -14,7 +14,7 @@ const props = defineProps<{
 const modelValue = defineModel<number>({ default: 0 })
 
 const hasControlAfterGenerate = computed(() => {
-  return props.widget.spec?.control_after_generate === true
+  return !!props.widget.controlWidget
 })
 </script>
 

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

@@ -5,10 +5,8 @@ import { defineAsyncComponent, ref } from 'vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import { useControlButtonIcon } from '../composables/useControlButtonIcon'
-import {
-  NumberControlMode,
-  useStepperControl
-} from '../composables/useStepperControl'
+import type { NumberControlMode } from '../composables/useStepperControl'
+import { useStepperControl } from '../composables/useStepperControl'
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 
 const NumberControlPopover = defineAsyncComponent(
@@ -20,31 +18,27 @@ const props = defineProps<{
   readonly?: boolean
 }>()
 
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
 const modelValue = defineModel<number>({ default: 0 })
 const popover = ref()
 
 const handleControlChange = (newValue: number) => {
   modelValue.value = newValue
-  emit('update:modelValue', newValue)
 }
 
-const { controlMode } = useStepperControl(modelValue, {
-  ...props.widget.options,
-  onChange: handleControlChange
-})
-
-if (controlMode.value === NumberControlMode.FIXED) {
-  controlMode.value = NumberControlMode.RANDOMIZE
-}
+const { controlMode } = useStepperControl(
+  modelValue,
+  {
+    ...props.widget.options,
+    onChange: handleControlChange
+  },
+  props.widget.controlWidget!.value
+)
 
 const controlButtonIcon = useControlButtonIcon(controlMode)
 
 const setControlMode = (mode: NumberControlMode) => {
   controlMode.value = mode
+  props.widget.controlWidget!.update(mode)
 }
 
 const togglePopover = (event: Event) => {

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

@@ -10,8 +10,8 @@ export function useControlButtonIcon(controlMode: Ref<NumberControlMode>) {
         return 'pi pi-plus'
       case NumberControlMode.DECREMENT:
         return 'pi pi-minus'
-      case NumberControlMode.RANDOMIZE:
-        return 'icon-[lucide--shuffle]'
+      case NumberControlMode.FIXED:
+        return 'icon-[lucide--pencil-off]'
       case NumberControlMode.LINK_TO_GLOBAL:
         return 'pi pi-link'
       default:

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

@@ -2,6 +2,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import type { Ref } from 'vue'
 
 import { useGlobalSeedStore } from '@/stores/globalSeedStore'
+import type { ControlWidgetOptions } from '@/types/simplifiedWidget'
 
 import { numberControlRegistry } from '../services/NumberControlRegistry'
 
@@ -21,11 +22,26 @@ interface StepperControlOptions {
   onChange?: (value: number) => void
 }
 
+function convertToEnum(str?: ControlWidgetOptions): NumberControlMode {
+  switch (str) {
+    case 'fixed':
+      return NumberControlMode.FIXED
+    case 'increment':
+      return NumberControlMode.INCREMENT
+    case 'decrement':
+      return NumberControlMode.DECREMENT
+    case 'randomize':
+      return NumberControlMode.RANDOMIZE
+  }
+  return NumberControlMode.RANDOMIZE
+}
+
 export function useStepperControl(
   modelValue: Ref<number>,
-  options: StepperControlOptions
+  options: StepperControlOptions,
+  defaultValue?: ControlWidgetOptions
 ) {
-  const controlMode = ref<NumberControlMode>(NumberControlMode.FIXED)
+  const controlMode = ref<NumberControlMode>(convertToEnum(defaultValue))
   const controlId = Symbol('numberControl')
   const globalSeedStore = useGlobalSeedStore()
 

src/types/simplifiedWidget.ts

@@ -15,6 +15,16 @@ export type WidgetValue =
   | void
   | File[]
 
+export type ControlWidgetOptions =
+  | 'fixed'
+  | 'increment'
+  | 'decrement'
+  | 'randomize'
+export type SafeControlWidget = {
+  value: ControlWidgetOptions
+  update: (value: unknown) => void
+}
+
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>
@@ -45,4 +55,6 @@ export interface SimplifiedWidget<
 
   /** Optional method to compute widget size requirements */
   computeSize?: () => { minHeight: number; maxHeight?: number }
+
+  controlWidget?: SafeControlWidget
 }