nits

src/composables/graph/useGraphNodeManager.ts

@@ -20,11 +20,8 @@ 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,
-  SafeControlWidget,
-  ControlWidgetOptions
-} from '@/types/simplifiedWidget'
+import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
+import { validateControlOption } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -87,26 +84,14 @@ 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))
+    value: validateControlOption(cagWidget.value),
+    update: (value) => (cagWidget.value = validateControlOption(value))
   }
 }
 

src/locales/en/main.json

@@ -1912,16 +1912,18 @@
       "placeholderUnknown": "Select media..."
     },
     "numberControl": {
-      "controlHeaderBefore": "Automatically update the value",
-      "controlHeaderAfter": "AFTER",
-      "controlHeaderBefore2": "BEFORE", 
-      "controlHeaderEnd": "running the workflow:",
+      "header" : {
+        "prefix": "Automatically update the value",
+        "after": "AFTER",
+        "before": "BEFORE",
+        "postfix": "running the workflow:"
+      },
       "linkToGlobal": "Link to",
       "linkToGlobalSeed": "Global Value",
       "linkToGlobalDesc": "Unique value linked to the Global Value's control setting",
       "randomize": "Randomize Value",
       "randomizeDesc": "Shuffles the value randomly after each generation",
-      "increment": "Increment Value", 
+      "increment": "Increment Value",
       "incrementDesc": "Adds 1 to the value number",
       "decrement": "Decrement Value",
       "decrementDesc": "Subtracts 1 from the value number",

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

@@ -10,11 +10,11 @@ import { useDialogService } from '@/services/dialogService'
 import { NumberControlMode } from '../composables/useStepperControl'
 
 type ControlOption = {
-  mode: NumberControlMode
-  icon?: string
-  title: string
   description: string
+  icon?: string
+  mode: NumberControlMode
   text?: string
+  title: string
 }
 
 const popover = ref()
@@ -91,30 +91,26 @@ const handleEditSettings = () => {
     ref="popover"
     class="bg-interface-panel-surface border border-interface-stroke rounded-lg"
   >
-    <!-- Responsive width with proper constraints -->
     <div class="w-113 max-w-md p-4 space-y-4">
-      <!-- Header text with semantic tokens -->
       <div class="text-sm text-muted-foreground leading-tight">
-        {{ $t('widgets.numberControl.controlHeaderBefore') }}
+        {{ $t('widgets.numberControl.header.prefix') }}
         <span class="text-base-foreground font-medium">
           {{
             widgetControlMode === 'before'
-              ? $t('widgets.numberControl.controlHeaderBefore2')
-              : $t('widgets.numberControl.controlHeaderAfter')
+              ? $t('widgets.numberControl.header.before')
+              : $t('widgets.numberControl.header.after')
           }}
         </span>
-        {{ $t('widgets.numberControl.controlHeaderEnd') }}
+        {{ $t('widgets.numberControl.header.postfix') }}
       </div>
 
-      <!-- Control options with proper spacing -->
       <div class="space-y-2">
         <div
           v-for="option in controlOptions"
           :key="option.mode"
           class="flex items-center justify-between py-2 gap-7"
         >
           <div class="flex items-center gap-2 flex-1 min-w-0">
-            <!-- Icon container with semantic background -->
             <div
               class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
             >
@@ -131,7 +127,6 @@ const handleEditSettings = () => {
               </span>
             </div>
 
-            <!-- Text content with proper semantic colors -->
             <div class="flex flex-col gap-0.5 min-w-0 flex-1">
               <div
                 class="text-sm font-normal text-base-foreground leading-tight"
@@ -152,19 +147,14 @@ const handleEditSettings = () => {
             </div>
           </div>
 
-          <!-- Toggle switch with proper sizing -->
           <ToggleSwitch
             :model-value="isActive(option.mode)"
             class="flex-shrink-0"
             @update:model-value="handleToggle(option.mode)"
           />
         </div>
       </div>
-
-      <!-- Divider using semantic border -->
       <div class="border-t border-border-subtle"></div>
-
-      <!-- Settings button with semantic styling -->
       <Button
         class="w-full bg-secondary-background hover:bg-secondary-background-hover border-0 rounded-lg p-2 text-sm"
         @click="handleEditSettings"

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

@@ -70,14 +70,6 @@ const buttonTooltip = computed(() => {
 })
 
 const slots = useSlots()
-
-const inputClass = computed(() =>
-  cn(
-    '[&>input]:bg-transparent [&>input]:border-0',
-    '[&>input]:truncate [&>input]:min-w-[4ch]',
-    slots.default && '[&>input]:pr-7'
-  )
-)
 </script>
 
 <template>
@@ -99,7 +91,11 @@ const inputClass = computed(() =>
       :show-buttons="!buttonsDisabled"
       :pt="{
         root: {
-          class: inputClass
+          class: cn(
+            '[&>input]:bg-transparent [&>input]:border-0',
+            '[&>input]:truncate [&>input]:min-w-[4ch]',
+            slots.default && '[&>input]:pr-7'
+          )
         },
         decrementButton: {
           class: 'w-8 border-0'

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

@@ -4,7 +4,6 @@ import { defineAsyncComponent, ref } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import { useControlButtonIcon } from '../composables/useControlButtonIcon'
 import type { NumberControlMode } from '../composables/useStepperControl'
 import { useStepperControl } from '../composables/useStepperControl'
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
@@ -15,7 +14,6 @@ const NumberControlPopover = defineAsyncComponent(
 
 const props = defineProps<{
   widget: SimplifiedWidget<number>
-  readonly?: boolean
 }>()
 
 const modelValue = defineModel<number>({ default: 0 })
@@ -25,7 +23,7 @@ const handleControlChange = (newValue: number) => {
   modelValue.value = newValue
 }
 
-const { controlMode } = useStepperControl(
+const { controlMode, controlButtonIcon } = useStepperControl(
   modelValue,
   {
     ...props.widget.options,
@@ -34,8 +32,6 @@ const { controlMode } = useStepperControl(
   props.widget.controlWidget!.value
 )
 
-const controlButtonIcon = useControlButtonIcon(controlMode)
-
 const setControlMode = (mode: NumberControlMode) => {
   controlMode.value = mode
   props.widget.controlWidget!.update(mode)
@@ -50,8 +46,7 @@ const togglePopover = (event: Event) => {
   <div class="relative grid grid-cols-subgrid">
     <WidgetInputNumberInput
       v-model="modelValue"
-      :widget="widget"
-      :readonly="readonly"
+      :widget
       class="grid grid-cols-subgrid col-span-2"
     >
       <Button
@@ -65,7 +60,7 @@ const togglePopover = (event: Event) => {
     </WidgetInputNumberInput>
     <NumberControlPopover
       ref="popover"
-      :control-mode="controlMode"
+      :control-mode
       @update:control-mode="setControlMode"
     />
   </div>

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

@@ -1,8 +1,8 @@
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import type { Ref } from 'vue'
 
 import { useGlobalSeedStore } from '@/stores/globalSeedStore'
-import type { ControlWidgetOptions } from '@/types/simplifiedWidget'
+import type { ControlOptions } from '@/types/simplifiedWidget'
 
 import { numberControlRegistry } from '../services/NumberControlRegistry'
 
@@ -22,7 +22,7 @@ interface StepperControlOptions {
   onChange?: (value: number) => void
 }
 
-function convertToEnum(str?: ControlWidgetOptions): NumberControlMode {
+function convertToEnum(str?: ControlOptions): NumberControlMode {
   switch (str) {
     case 'fixed':
       return NumberControlMode.FIXED
@@ -36,10 +36,27 @@ function convertToEnum(str?: ControlWidgetOptions): NumberControlMode {
   return NumberControlMode.RANDOMIZE
 }
 
+function useControlButtonIcon(controlMode: Ref<NumberControlMode>) {
+  return computed(() => {
+    switch (controlMode.value) {
+      case NumberControlMode.INCREMENT:
+        return 'pi pi-plus'
+      case NumberControlMode.DECREMENT:
+        return 'pi pi-minus'
+      case NumberControlMode.FIXED:
+        return 'icon-[lucide--pencil-off]'
+      case NumberControlMode.LINK_TO_GLOBAL:
+        return 'pi pi-link'
+      default:
+        return 'icon-[lucide--shuffle]'
+    }
+  })
+}
+
 export function useStepperControl(
   modelValue: Ref<number>,
   options: StepperControlOptions,
-  defaultValue?: ControlWidgetOptions
+  defaultValue?: ControlOptions
 ) {
   const controlMode = ref<NumberControlMode>(convertToEnum(defaultValue))
   const controlId = Symbol('numberControl')
@@ -90,9 +107,11 @@ export function useStepperControl(
   onUnmounted(() => {
     numberControlRegistry.unregister(controlId)
   })
+  const controlButtonIcon = useControlButtonIcon(controlMode)
 
   return {
-    controlMode,
-    applyControl
+    applyControl,
+    controlButtonIcon,
+    controlMode
   }
 }

src/types/simplifiedWidget.ts

@@ -15,13 +15,22 @@ export type WidgetValue =
   | void
   | File[]
 
-export type ControlWidgetOptions =
-  | 'fixed'
-  | 'increment'
-  | 'decrement'
-  | 'randomize'
+const CONTROL_OPTIONS = [
+  'fixed',
+  'increment',
+  'decrement',
+  'randomize'
+] as const
+export type ControlOptions = (typeof CONTROL_OPTIONS)[number]
+
+export function validateControlOption(val: unknown): ControlOptions {
+  if (CONTROL_OPTIONS.includes(val as ControlOptions))
+    return val as ControlOptions
+  return 'randomize'
+}
+
 export type SafeControlWidget = {
-  value: ControlWidgetOptions
+  value: ControlOptions
   update: (value: unknown) => void
 }