feat: use number inputs in click dialog for number values

src/LGraphCanvas.ts

@@ -32,6 +32,7 @@ import type {
   CanvasPointerEvent,
   CanvasPointerExtensions,
 } from "./types/events"
+import type { PromptOptionalParams } from "./types/optionalParams"
 import type { ClipboardItems } from "./types/serialisation"
 import type { IBaseWidget } from "./types/widgets"
 
@@ -5793,17 +5794,19 @@ export class LGraphCanvas {
     value: any,
     callback: (arg0: any) => void,
     event: CanvasMouseEvent,
-    multiline?: boolean,
+    optionalParams?: PromptOptionalParams,
   ): HTMLDivElement {
     const that = this
     title = title || ""
 
     const customProperties = {
       is_modified: false,
       className: "graphdialog rounded",
-      innerHTML: multiline
+      innerHTML: optionalParams && optionalParams.multiline
         ? "<span class='name'></span> <textarea autofocus class='value'></textarea><button class='rounded'>OK</button>"
-        : "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>",
+        : (optionalParams && optionalParams.stepValue
+          ? `<span class='name'></span> <input autofocus type='number' step=${optionalParams && optionalParams.stepValue} class='value'/><button class='rounded'>OK</button>`
+          : "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>"),
       close() {
         that.prompt_box = null
         if (dialog.parentNode) {
@@ -5881,6 +5884,12 @@ export class LGraphCanvas {
           callback(this.value)
         }
         dialog.close()
+      } else if (e.shiftKey && e.code === "ArrowUp" && e.target instanceof HTMLInputElement && e.target.type === "number") {
+        e.preventDefault()
+        e.target.stepUp(10)
+      } else if (e.shiftKey && e.code === "ArrowDown" && e.target instanceof HTMLInputElement && e.target.type === "number") {
+        e.preventDefault()
+        e.target.stepDown(10)
       } else {
         return
       }

src/types/optionalParams.ts

@@ -0,0 +1,4 @@
+export type PromptOptionalParams = {
+  multiline?: boolean
+  stepValue?: number
+}

src/widgets/NumberWidget.ts

@@ -48,6 +48,7 @@ export class NumberWidget extends BaseSteppedWidget<INumericWidget> implements I
   override onClick({ e, node, canvas }: WidgetEventOptions) {
     const x = e.canvasX - node.pos[0]
     const width = this.width || node.size[0]
+    const step = getWidgetStep(this.options)
 
     // Determine if clicked on left/right arrows
     const delta = x < 40
@@ -75,7 +76,7 @@ export class NumberWidget extends BaseSteppedWidget<INumericWidget> implements I
       if (!isNaN(newValue)) {
         this.setValue(newValue, { e, node, canvas })
       }
-    }, e)
+    }, e, { stepValue: step })
   }
 
   /**

src/widgets/TextWidget.ts

@@ -43,7 +43,9 @@ export class TextWidget extends BaseWidget<IStringWidget> implements IStringWidg
         }
       },
       e,
-      this.options?.multiline ?? false,
+      {
+        multiline: this.options?.multiline ?? false,
+      },
     )
   }
 }