✨ slider support steps/precision

lenML · May 28, 2024 · c616605 · c616605
1 parent f115757
commit c616605
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/apps/editor/src/dom_widget_node.ts b/apps/editor/src/dom_widget_node.ts
@@ -101,6 +101,13 @@ export class DomDemoNode extends LGraphNode {
             }),
         );
         this.addCustomWidget(new UploadWidget("file", this));
+
+        this.addWidget("slider", "s1", 1.1, "s1", {
+            min: 0,
+            max: 2,
+            steps: 0.2,
+            precision: 1,
+        });
     }
 
     onExecute(param: any, options: object): void {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@litegraph-ts/core",
-    "version": "0.2.20",
+    "version": "0.2.21",
     "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
     "source": "src/index.ts",
     "types": "src/index.ts",

diff --git a/packages/core/src/IWidget.ts b/packages/core/src/IWidget.ts
@@ -83,6 +83,8 @@ export interface IToggleWidget extends IWidget<IToggleWidgetOptions, boolean> {
 export interface ISliderWidgetOptions extends WidgetPanelOptions {
     max: number;
     min: number;
+    step?: number;
+    precision?: number;
 }
 export interface ISliderWidget extends IWidget<ISliderWidgetOptions, number> {
     type: "slider";

diff --git a/packages/core/src/LGraphCanvas.ts b/packages/core/src/LGraphCanvas.ts
@@ -2067,19 +2067,34 @@ export default class LGraphCanvas
                         this.dirty_canvas = true;
                     }
                     break;
-                case "slider":
-                    var range = w.options.max - w.options.min;
+                case "slider": {
+                    const { max, min, steps, precision } = w.options;
+                    var range = max - min;
+
+                    // 这个函数计算步数，根据steps和precision调整取值
+                    const calculateValue = (rawValue) => {
+                        if (typeof steps === "number" && steps > 0) {
+                            let stepValue =
+                                min +
+                                Math.round((rawValue - min) / steps) * steps;
+                            return parseFloat(stepValue.toFixed(precision));
+                        }
+                        return parseFloat(rawValue.toFixed(precision));
+                    };
+
                     var nvalue = clamp((x - 15) / (widget_width - 30), 0, 1);
-                    w.value =
-                        w.options.min +
-                        (w.options.max - w.options.min) * nvalue;
+                    var raw_value = min + range * nvalue;
+                    w.value = calculateValue(raw_value);
+
                     if (w.callback) {
                         setTimeout(function () {
                             inner_value_change(w, w.value);
                         }, 20);
                     }
+
                     this.dirty_canvas = true;
                     break;
+                }
                 case "number":
                 case "combo":
                     var old_value = w.value;

diff --git a/packages/core/src/LGraphCanvas_Rendering.ts b/packages/core/src/LGraphCanvas_Rendering.ts
@@ -2563,7 +2563,11 @@ export default class LGraphCanvas_Rendering {
                         ctx.textAlign = "center";
                         ctx.fillStyle = text_color;
                         ctx.fillText(
-                            w.name + "  " + Number(w.value).toFixed(3),
+                            w.name +
+                                "  " +
+                                Number(w.value).toFixed(
+                                    w.options?.precision ?? 3,
+                                ),
                             widget_width * 0.5,
                             y + H * 0.7,
                         );
@@ -2611,9 +2615,7 @@ export default class LGraphCanvas_Rendering {
                         if (w.type == "number") {
                             ctx.fillText(
                                 Number(w.value).toFixed(
-                                    w.options.precision !== undefined
-                                        ? w.options.precision
-                                        : 3,
+                                    w.options.precision ?? 3,
                                 ),
                                 widget_width - margin * 2 - 20,
                                 y + H * 0.7,