[animgraph] Style

bin/style.css

@@ -4230,9 +4230,9 @@ graph-editor-root properties-container {
 graph-editor-root properties-container graph-parameters {
   display: flex;
   flex-direction: column;
-  padding: var(--basic-padding);
   border: var(--basic-border);
   border-radius: var(--basic-border-radius);
+  padding: var(--basic-padding);
 }
 graph-editor-root properties-container graph-parameters h1 {
   font-size: 1.2em;
@@ -4251,10 +4251,20 @@ graph-editor-root properties-container graph-parameters ul graph-parameter {
 graph-editor-root properties-container graph-parameters ul graph-parameter header {
   display: flex;
   align-items: center;
+  background-color: #202020;
+  padding: var(--basic-padding);
+  gap: 3px;
 }
 graph-editor-root properties-container graph-parameters ul graph-parameter header .fill {
   flex-grow: 1;
 }
+graph-editor-root properties-container graph-parameters ul graph-parameter header input {
+  border-radius: var(--basic-border-radius);
+  border: var(--basic-border);
+}
+graph-editor-root properties-container graph-parameters ul graph-parameter content {
+  padding: var(--basic-padding);
+}
 graph-editor-root properties-container graph-parameters ul graph-parameter.folded content {
   display: none;
 }

bin/style.less

@@ -5006,10 +5006,10 @@ graph-editor-root {
 		graph-parameters {
 			display: flex;
 			flex-direction: column;
-			padding: var(--basic-padding);
 
 			border: var(--basic-border);
 			border-radius: var(--basic-border-radius);
+			padding: var(--basic-padding);
 
 			h1 {
 				font-size: 1.2em;
@@ -5025,13 +5025,27 @@ graph-editor-root {
 					border: var(--basic-border);
 					border-radius: var(--basic-border-radius);
 
+
 					header {
 						display: flex;
 						align-items: center;
+						background-color: #202020;
+						padding: var(--basic-padding);
+
+						gap: 3px;
 
 						.fill {
 							flex-grow: 1;
 						}
+
+						input {
+							border-radius: var(--basic-border-radius);
+							border: var(--basic-border);
+						}
+					}
+
+					content {
+						padding: var(--basic-padding);
 					}
 
 					&.folded content {

hide/view/animgraph/AnimGraphEditor.hx

@@ -80,6 +80,11 @@ class AnimGraphEditor extends GenericGraphEditor {
             previewAnimation.outputNode = cast previewAnimation.animGraph.nodes[index];
             @:privateAccess previewAnimation.bind(previewAnimation.target);
         }
+
+        // copy runtime parameters
+        for (index => param in animGraph.parameters) {
+            previewAnimation.animGraph.parameters[index].runtimeValue = param.runtimeValue;
+        }
         graphEditor.refreshPreviewButtons();
     }
 
@@ -136,20 +141,20 @@ class AnimGraphEditor extends GenericGraphEditor {
             var content = new Element("<content></content>").appendTo(paramElement);
 
             if (previewAnimation != null) {
-                var param = previewAnimation.parameterMap.get(param.name);
-                if (param != null) {
-                    var slider = new Element('<input type="range" min="0.0" max="1.0" step="0.01" value="${param.runtimeValue}"></input>');
-
-                    slider.on("input", (e) -> {
-                        var value = Std.parseFloat(slider.val());
-                        param.runtimeValue = value;
-                    });
-                    slider.change((e) -> {
-                        var value = Std.parseFloat(slider.val());
-                        param.runtimeValue = value;
-                    });
-                    content.append(slider);
-                }
+                var runtimeParam = previewAnimation.parameterMap.get(param.name);
+                var slider = new Element('<input type="range" min="0.0" max="1.0" step="0.01" value="${param.runtimeValue}"></input>');
+
+                slider.on("input", (e) -> {
+                    var value = Std.parseFloat(slider.val());
+                    param.runtimeValue = value;
+                    runtimeParam?.runtimeValue = value;
+                });
+                slider.change((e) -> {
+                    var value = Std.parseFloat(slider.val());
+                    param.runtimeValue = value;
+                    runtimeParam?.runtimeValue = value;
+                });
+                content.append(slider);
             }
         }
     }