[animgraph] Added ranges to preview values

bin/style.css

@@ -4297,20 +4297,31 @@ graph-editor-root properties-container graph-parameters > ul graph-parameter con
   display: flex;
   flex-direction: column;
   list-style: none;
-  align-items: stretch;
   display: grid;
   column-gap: 10px;
+  row-gap: 1px;
   grid-template-columns: 2fr 5fr;
 }
 graph-editor-root properties-container graph-parameters > ul graph-parameter content > ul li {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: subgrid;
+  align-items: center;
 }
 graph-editor-root properties-container graph-parameters > ul graph-parameter content > ul li dd {
   margin: 0;
   text-align: right;
 }
+graph-editor-root properties-container graph-parameters > ul graph-parameter content > ul li > .hide-range {
+  display: flex;
+}
+graph-editor-root properties-container graph-parameters > ul graph-parameter content > ul li > .hide-range input[type=range] {
+  flex-grow: 1;
+}
+graph-editor-root properties-container graph-parameters > ul graph-parameter content > ul li > .hide-range input[type=text] {
+  width: 0;
+  flex-basis: 44px;
+}
 graph-editor-root properties-container graph-parameters > ul graph-parameter.folded content {
   display: none;
 }

bin/style.less

@@ -5061,7 +5061,6 @@ graph-editor-root {
 					border: var(--basic-border);
 					border-radius: var(--basic-border-radius);
 
-
 					header {
 						display: flex;
 						align-items: center;
@@ -5089,21 +5088,33 @@ graph-editor-root {
 							display: flex;
 							flex-direction: column;
 							list-style: none;
-							align-items: stretch;
 
 							display: grid;
 							column-gap: 10px;
+							row-gap: 1px;
 							grid-template-columns: 2fr 5fr;
 
 							li {
 								grid-column: 1 / -1;
 								display: grid;
 								grid-template-columns: subgrid;
+								align-items: center;
 
 								dd {
 									margin: 0;
 									text-align: right;
 								}
+
+								>.hide-range {
+									display: flex;
+									input[type=range] {
+										flex-grow: 1;
+									}
+									input[type=text] {
+										width: 0;
+										flex-basis: 44px;
+									}
+								}
 							}
 						}
 					}

hide/comp/Range.hx

@@ -163,4 +163,33 @@ class Range extends Component {
 	public dynamic function onChange( tempChange : Bool ) {
 	}
 
+
+	/**
+		Automatically handle undo/redo, tracking automatically if a change is temporary or not.
+		get : a function that returns the current value you wanna change
+		set : a function that set the value you wanna change.
+	**/
+	public function setOnChangeUndo( undo: hide.ui.UndoHistory, get : () -> Float, set : (newValue: Float) -> Void) {
+		var save : Null<Float> = get();
+		onChange = (tempChange) -> {
+			if (!tempChange) {
+				var prev = save ?? get();
+				var curr = value;
+				function exec(isUndo) {
+					var newValue = !isUndo ? curr : prev;
+					value = newValue;
+					set(newValue);
+				}
+				exec(false);
+				undo.change(Custom(exec));
+				save = null;
+			}
+			else {
+				if (save == null) {
+					save = get();
+				}
+				set(value);
+			}
+		}
+	}
 }

hide/view/animgraph/AnimGraphEditor.hx

@@ -33,11 +33,6 @@ class AnimGraphEditor extends GenericGraphEditor {
 
         refreshPamamList();
 
-        var testButton = new Element("<button>Test Bones</button>").appendTo(propertiesContainer);
-        testButton.click((_) -> {
-            setPreview(null);
-        });
-
         graphEditor.element.get(0).addEventListener("dragover", (e: js.html.DragEvent) -> {
             var paramIndex = Std.parseInt(e.dataTransfer.getData("index"));
             if (paramIndex != null)
@@ -144,40 +139,20 @@ class AnimGraphEditor extends GenericGraphEditor {
             var content = new Element("<content></content>").appendTo(paramElement);
             var props = new Element("<ul>").appendTo(content);
             if (previewAnimation != null) {
-                var runtimeParam = previewAnimation.parameterMap.get(param.name);
                 var slider = new Element('<li><dd>Preview</dd><input type="range" min="0.0" max="1.0" step="0.01" value="${param.runtimeValue}"></input></li>').appendTo(props).find("input");
+                var range = new hide.comp.Range(null,slider);
 
-                slider.on("input", (e) -> {
-                    var value = Std.parseFloat(slider.val());
-                    param.runtimeValue = value;
+                range.setOnChangeUndo(undo, () -> param.runtimeValue, (v:Float) -> {
+                    param.runtimeValue = v;
+                    var runtimeParam = previewAnimation.parameterMap.get(param.name);
                     if (runtimeParam != null) {
-                        runtimeParam.runtimeValue = value;
-                    }
-                });
-                slider.change((e) -> {
-                    var value = Std.parseFloat(slider.val());
-                    param.runtimeValue = value;
-                    if (runtimeParam != null) {
-                        runtimeParam.runtimeValue = value;
+                        runtimeParam.runtimeValue = param.runtimeValue;
                     }
                 });
 
                 var def = new Element('<li><dd>Default</dd><input type="range" min="0.0" max="1.0" step="0.01" value="${param.defaultValue}"></input></li>').appendTo(props).find("input");
-                var current = param.defaultValue;
-                def.change((e) -> {
-                    var newValue = Std.parseFloat(def.val());
-                    if (newValue != current) {
-                        var prev = current;
-                        var curr = newValue;
-                        var exec = function(isUndo: Bool) {
-                            var v = !isUndo ? curr : prev;
-                            def.val(v);
-                            param.defaultValue = v;
-                        }
-                        exec(false);
-                        undo.change(Custom(exec));
-                    }
-                });
+                var range = new hide.comp.Range(null,def);
+                range.setOnChangeUndo(undo, () -> param.defaultValue, (v:Float) -> param.defaultValue = v);
             }
         }
     }