alias old float/int widgets

src/components/graph/widgets/BadgedNumberInput.vue

@@ -2,17 +2,17 @@
   <div class="badged-number-input relative w-full">
     <InputGroup class="w-full rounded-lg">
       <!-- State badge prefix -->
-      <InputGroupAddon v-if="badgeState !== 'normal'" class="!p-1 rounded-l-lg">
-        <Badge
-          :value="badgeIcon"
-          :severity="badgeSeverity"
-          class="text-xs font-medium"
+      <InputGroupAddon v-if="badgeState !== 'normal'" class="rounded-l-lg">
+        <i
+          :class="badgeIcon"
           :title="badgeTooltip"
-        />
+          :style="{ color: badgeColor }"
+        ></i>
       </InputGroupAddon>
 
-      <!-- Number input -->
+      <!-- Number input for non-slider mode -->
       <InputNumber
+        v-if="!isSliderMode"
         v-model="numericValue"
         :min="min"
         :max="max"
@@ -29,15 +29,44 @@
         :increment-button-icon="'pi pi-plus'"
         :decrement-button-icon="'pi pi-minus'"
       />
+
+      <!-- Slider mode -->
+      <div
+        v-else
+        :class="{
+          'rounded-r-lg': badgeState !== 'normal',
+          'rounded-lg': badgeState === 'normal'
+        }"
+        class="flex-1 flex items-center gap-2 px-3 py-2 bg-surface-0 border border-surface-300"
+      >
+        <Slider
+          v-model="numericValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          class="flex-1"
+        />
+        <InputNumber
+          v-model="numericValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          class="w-16"
+          :show-buttons="false"
+          size="small"
+        />
+      </div>
     </InputGroup>
   </div>
 </template>
 
 <script setup lang="ts">
-import Badge from 'primevue/badge'
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
 import InputNumber from 'primevue/inputnumber'
+import Slider from 'primevue/slider'
 import { computed } from 'vue'
 
 import type { ComponentWidget } from '@/scripts/domWidget'
@@ -71,34 +100,40 @@ const max = (inputSpec as any).max ?? 100
 const step = (inputSpec as any).step ?? 1
 const placeholder = (inputSpec as any).placeholder ?? 'Enter number'
 
+// Check if slider mode should be enabled
+const isSliderMode = computed(() => {
+  console.log('inputSpec', inputSpec)
+  return (inputSpec as any).slider === true
+})
+
 // Badge configuration
 const badgeIcon = computed(() => {
   switch (badgeState) {
     case 'random':
-      return '🎲'
+      return 'pi pi-refresh'
     case 'lock':
-      return '🔒'
+      return 'pi pi-lock'
     case 'increment':
-      return '⬆️'
+      return 'pi pi-arrow-up'
     case 'decrement':
-      return '⬇️'
+      return 'pi pi-arrow-down'
     default:
       return ''
   }
 })
 
-const badgeSeverity = computed(() => {
+const badgeColor = computed(() => {
   switch (badgeState) {
     case 'random':
-      return 'info'
+      return 'var(--p-primary-color)'
     case 'lock':
-      return 'warn'
+      return 'var(--p-orange-500)'
     case 'increment':
-      return 'success'
+      return 'var(--p-green-500)'
     case 'decrement':
-      return 'danger'
+      return 'var(--p-red-500)'
     default:
-      return 'info'
+      return 'var(--p-text-color)'
   }
 })
 

src/composables/widgets/useBadgedNumberInput.ts

@@ -1,21 +1,40 @@
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 import BadgedNumberInput from '@/components/graph/widgets/BadgedNumberInput.vue'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 const PADDING = 8
 
 type BadgeState = 'normal' | 'random' | 'lock' | 'increment' | 'decrement'
 
+type NumberWidgetMode = 'int' | 'float'
+
 interface BadgedNumberInputOptions {
   defaultValue?: number
   badgeState?: BadgeState
   disabled?: boolean
   minHeight?: number
   serialize?: boolean
+  mode?: NumberWidgetMode
+}
+
+// Helper function to map control widget values to badge states
+const mapControlValueToBadgeState = (controlValue: string): BadgeState => {
+  switch (controlValue) {
+    case 'fixed':
+      return 'lock'
+    case 'increment':
+      return 'increment'
+    case 'decrement':
+      return 'decrement'
+    case 'randomize':
+      return 'random'
+    default:
+      return 'normal'
+  }
 }
 
 export const useBadgedNumberInput = (
@@ -23,10 +42,10 @@ export const useBadgedNumberInput = (
 ) => {
   const {
     defaultValue = 0,
-    badgeState = 'normal',
     disabled = false,
     minHeight = 40,
-    serialize = true
+    serialize = true,
+    mode = 'int'
   } = options
 
   const widgetConstructor: ComfyWidgetConstructorV2 = (
@@ -36,7 +55,23 @@ export const useBadgedNumberInput = (
     // Initialize widget value as string to conform to ComponentWidgetImpl requirements
     const widgetValue = ref<string>(defaultValue.toString())
 
-    // Create the widget instance
+    // Determine if we should show control widget and badge
+    const shouldShowControlWidget =
+      inputSpec.control_after_generate ??
+      // Legacy compatibility: seed inputs get control widgets
+      ['seed', 'noise_seed'].includes(inputSpec.name)
+
+    // Create reactive props object for the component
+    const componentProps = reactive({
+      badgeState:
+        options.badgeState ??
+        (shouldShowControlWidget ? 'random' : ('normal' as BadgeState)),
+      disabled
+    })
+
+    const controlWidget: any = null
+
+    // Create the main widget instance
     const widget = new ComponentWidgetImpl<
       string | object,
       Omit<
@@ -48,24 +83,34 @@ export const useBadgedNumberInput = (
       name: inputSpec.name,
       component: BadgedNumberInput,
       inputSpec,
-      props: {
-        badgeState,
-        disabled
-      },
+      props: componentProps,
       options: {
         // Required: getter for widget value - return as string
         getValue: () => widgetValue.value as string | object,
 
         // Required: setter for widget value - accept number, string or object
         setValue: (value: string | object | number) => {
-          let stringValue: string
+          let numValue: number
           if (typeof value === 'object') {
-            stringValue = JSON.stringify(value)
+            numValue = parseFloat(JSON.stringify(value))
           } else {
-            stringValue = String(value)
+            numValue =
+              typeof value === 'number' ? value : parseFloat(String(value))
           }
-          const numValue = parseFloat(stringValue)
+
           if (!isNaN(numValue)) {
+            // Apply int/float specific value processing
+            if (mode === 'int') {
+              const step = (inputSpec as any).step ?? 1
+              if (step === 1) {
+                numValue = Math.round(numValue)
+              } else {
+                const min = (inputSpec as any).min ?? 0
+                const offset = min % step
+                numValue =
+                  Math.round((numValue - offset) / step) * step + offset
+              }
+            }
             widgetValue.value = numValue.toString()
           }
         },
@@ -78,6 +123,41 @@ export const useBadgedNumberInput = (
       }
     })
 
+    // Add control widget if needed - temporarily disabled to fix circular dependency
+    if (shouldShowControlWidget) {
+      // TODO: Re-implement control widget functionality without circular dependency
+      console.warn(
+        'Control widget functionality temporarily disabled due to circular dependency'
+      )
+      // controlWidget = addValueControlWidget(
+      //   node,
+      //   widget as any, // Cast to satisfy the interface
+      //   'randomize',
+      //   undefined,
+      //   undefined,
+      //   transformInputSpecV2ToV1(inputSpec)
+      // )
+
+      // Set up reactivity to update badge state when control widget changes
+      if (controlWidget) {
+        const originalCallback = controlWidget.callback
+        controlWidget.callback = function (value: string) {
+          componentProps.badgeState = mapControlValueToBadgeState(value)
+          if (originalCallback) {
+            originalCallback.call(this, value)
+          }
+        }
+
+        // Initialize badge state
+        componentProps.badgeState = mapControlValueToBadgeState(
+          controlWidget.value || 'randomize'
+        )
+
+        // Link the widgets
+        ;(widget as any).linkedWidgets = [controlWidget]
+      }
+    }
+
     // Register the widget with the node
     addWidget(node, widget)
 
@@ -88,4 +168,4 @@ export const useBadgedNumberInput = (
 }
 
 // Export types for use in other modules
-export type { BadgeState, BadgedNumberInputOptions }
+export type { BadgeState, BadgedNumberInputOptions, NumberWidgetMode }

src/composables/widgets/useBooleanWidget.ts

@@ -4,7 +4,7 @@ import {
   type InputSpec,
   isBooleanInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 export const useBooleanWidget = () => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (

src/composables/widgets/useChatHistoryWidget.ts

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 const PADDING = 16
 

src/composables/widgets/useComboWidget.ts

@@ -3,7 +3,6 @@ import type { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { ref } from 'vue'
 
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
-import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   ComboInputSpec,
   type InputSpec,
@@ -14,10 +13,7 @@ import {
   ComponentWidgetImpl,
   addWidget
 } from '@/scripts/domWidget'
-import {
-  type ComfyWidgetConstructorV2,
-  addValueControlWidgets
-} from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -82,13 +78,17 @@ const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   }
 
   if (inputSpec.control_after_generate) {
-    widget.linkedWidgets = addValueControlWidgets(
-      node,
-      widget,
-      undefined,
-      undefined,
-      transformInputSpecV2ToV1(inputSpec)
+    // TODO: Re-implement control widget functionality without circular dependency
+    console.warn(
+      'Control widget functionality temporarily disabled for combo widgets due to circular dependency'
     )
+    // widget.linkedWidgets = addValueControlWidgets(
+    //   node,
+    //   widget,
+    //   undefined,
+    //   undefined,
+    //   transformInputSpecV2ToV1(inputSpec)
+    // )
   }
 
   return widget

src/composables/widgets/useFloatWidget.ts

@@ -6,7 +6,7 @@ import {
   type InputSpec,
   isFloatInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 import { useSettingStore } from '@/stores/settingStore'
 
 function onFloatValueChange(this: INumericWidget, v: number) {

src/composables/widgets/useImagePreviewWidget.ts

@@ -12,7 +12,7 @@ import type {
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import { calculateImageGrid } from '@/scripts/ui/imagePreview'
-import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { is_all_same_aspect_ratio } from '@/utils/imageUtil'

src/composables/widgets/useIntWidget.ts

@@ -1,15 +1,11 @@
 import type { LGraphNode } from '@comfyorg/litegraph'
 import type { INumericWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
-import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   type InputSpec,
   isIntInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  type ComfyWidgetConstructorV2,
-  addValueControlWidget
-} from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 import { useSettingStore } from '@/stores/settingStore'
 
 function onValueChange(this: INumericWidget, v: number) {
@@ -81,15 +77,19 @@ export const useIntWidget = () => {
       ['seed', 'noise_seed'].includes(inputSpec.name)
 
     if (controlAfterGenerate) {
-      const seedControl = addValueControlWidget(
-        node,
-        widget,
-        'randomize',
-        undefined,
-        undefined,
-        transformInputSpecV2ToV1(inputSpec)
+      // TODO: Re-implement control widget functionality without circular dependency
+      console.warn(
+        'Control widget functionality temporarily disabled for int widgets due to circular dependency'
       )
-      widget.linkedWidgets = [seedControl]
+      // const seedControl = addValueControlWidget(
+      //   node,
+      //   widget,
+      //   'randomize',
+      //   undefined,
+      //   undefined,
+      //   transformInputSpecV2ToV1(inputSpec)
+      // )
+      // widget.linkedWidgets = [seedControl]
     }
 
     return widget

src/composables/widgets/useMarkdownWidget.ts

@@ -10,7 +10,7 @@ import { Markdown as TiptapMarkdown } from 'tiptap-markdown'
 
 import { type InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 function addMarkdownWidget(
   node: LGraphNode,

src/composables/widgets/useProgressTextWidget.ts

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 
 const PADDING = 16
 

src/composables/widgets/useStringWidget.ts

@@ -5,7 +5,7 @@ import {
   isStringInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
 import { useSettingStore } from '@/stores/settingStore'
 
 function addMultilineWidget(

src/scripts/widgetTypes.ts

@@ -0,0 +1,12 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
+
+import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+/**
+ * Constructor function type for ComfyUI widgets using V2 input specification
+ */
+export type ComfyWidgetConstructorV2 = (
+  node: LGraphNode,
+  inputSpec: InputSpecV2
+) => IBaseWidget

src/scripts/widgets.ts

@@ -8,25 +8,18 @@ import type {
 import { useBadgedNumberInput } from '@/composables/widgets/useBadgedNumberInput'
 import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
 import { useComboWidget } from '@/composables/widgets/useComboWidget'
-import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
 import { useImageUploadWidget } from '@/composables/widgets/useImageUploadWidget'
-import { useIntWidget } from '@/composables/widgets/useIntWidget'
 import { useMarkdownWidget } from '@/composables/widgets/useMarkdownWidget'
 import { useStringWidget } from '@/composables/widgets/useStringWidget'
 import { t } from '@/i18n'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
-import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import { useSettingStore } from '@/stores/settingStore'
 
 import type { ComfyApp } from './app'
 import './domWidget'
 import './errorNodeWidgets'
-
-export type ComfyWidgetConstructorV2 = (
-  node: LGraphNode,
-  inputSpec: InputSpecV2
-) => IBaseWidget
+import type { ComfyWidgetConstructorV2 } from './widgetTypes'
 
 export type ComfyWidgetConstructor = (
   node: LGraphNode,
@@ -284,8 +277,10 @@ export function addValueControlWidgets(
 }
 
 export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
-  INT: transformWidgetConstructorV2ToV1(useIntWidget()),
-  FLOAT: transformWidgetConstructorV2ToV1(useFloatWidget()),
+  INT: transformWidgetConstructorV2ToV1(useBadgedNumberInput({ mode: 'int' })),
+  FLOAT: transformWidgetConstructorV2ToV1(
+    useBadgedNumberInput({ mode: 'float' })
+  ),
   BOOLEAN: transformWidgetConstructorV2ToV1(useBooleanWidget()),
   STRING: transformWidgetConstructorV2ToV1(useStringWidget()),
   MARKDOWN: transformWidgetConstructorV2ToV1(useMarkdownWidget()),