diff --git a/apps/editor/src/dom_widget_node.ts b/apps/editor/src/dom_widget_node.ts index f610bada..548a6f0a 100644 --- 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 index fc43a5ae..b5322736 100644 --- 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 index 0cb0d33a..37230945 100644 --- a/packages/core/src/IWidget.ts +++ b/packages/core/src/IWidget.ts @@ -83,6 +83,8 @@ export interface IToggleWidget extends IWidget { export interface ISliderWidgetOptions extends WidgetPanelOptions { max: number; min: number; + step?: number; + precision?: number; } export interface ISliderWidget extends IWidget { type: "slider"; diff --git a/packages/core/src/LGraphCanvas.ts b/packages/core/src/LGraphCanvas.ts index b3d85bb0..977c74b6 100644 --- 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 index 3cfc33c8..f04beae7 100644 --- 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,