[shgraph] Allow collapsing parameters/variables

bin/style.css

@@ -2168,8 +2168,23 @@ input[type=checkbox].indeterminate:after {
   font-weight: bold;
 }
 .shader-editor #rightPanel .flexible {
+  overflow: auto;
   min-height: 0;
 }
+.shader-editor #rightPanel .flexible to-collapse {
+  display: contents;
+}
+.shader-editor #rightPanel .flexible.collapsed {
+  flex-grow: 0;
+  overflow: visible;
+  min-height: unset;
+}
+.shader-editor #rightPanel .flexible.collapsed to-collapse {
+  display: none;
+}
+.shader-editor #rightPanel .flexible.collapsed h1 .ico {
+  transform: rotate(-90deg);
+}
 .shader-editor #rightPanel .hide-block {
   flex: 1;
   display: flex;
@@ -4873,3 +4888,6 @@ blend-space-2d-root properties-container .hide-properties dl > div .hide-range i
   font-style: italic;
   font-size: 1.2em;
 }
+.fancy-hide {
+  display: none;
+}

bin/style.less

@@ -2470,7 +2470,27 @@ input[type=checkbox] {
 		}
 
 		.flexible {
+			overflow: auto;
 			min-height: 0;
+
+
+
+			to-collapse {
+				display: contents;
+			}
+
+			&.collapsed {
+				flex-grow: 0;
+				overflow: visible;
+				to-collapse {
+					display: none;
+				}
+
+				h1 .ico {
+					transform: rotate(-90deg);
+				}
+				min-height: unset;
+			}
 		}
 
 		.hide-block {
@@ -5831,4 +5851,8 @@ blend-space-2d-root {
 	font-weight: normal;
 	font-style: italic;
 	font-size: 1.2em;
+}
+
+.fancy-hide {
+	display: none;
 }

hide/view/shadereditor/ShaderEditor.hx

@@ -284,22 +284,28 @@ class ShaderEditor extends hide.view.FileView implements GraphInterface.IGraphEd
 
 		var rightPannel = new Element(
 			'<div id="rightPanel">
-				<div class="hide-block flexible" >
-					<h1 class="subtle-title">Parameters</h1 class="subtle-title">
+				<div style="flex-grow: 1; display: flex; flex-direction: column;">
+					<div class="hide-block flexible param-collapse" >
+						<h1 class="subtle-title">Parameters <fancy-button class="quieter"><div class="icon ico ico-chevron-down"></div></fancy-button></h1>
 
-					<fancy-array class="parameters merge-bottom" style="flex-grow: 1">
+						<to-collapse>
+						<fancy-array class="parameters merge-bottom" style="flex-grow: 1">
 
-					</fancy-array>
-					<fancy-button class="fancy-small createParameter merge-top"><div class="icon ico ico-plus"></div></fancy-button>
-				</div>
+						</fancy-array>
+						<fancy-button class="fancy-small createParameter merge-top"><div class="icon ico ico-plus"></div></fancy-button>
+						</to-collapse>
+					</div>
 
 
-				<div class="hide-block flexible" >
-					<h1 class="subtle-title">Variables</h1 class="subtle-title">
-					<fancy-array class="variables merge-bottom" style="flex-grow: 1">
+					<div class="hide-block flexible var-collapse">
+						<h1 class="subtle-title">Variables <fancy-button class="quieter"><div class="icon ico ico-chevron-down"></div></fancy-button></h1 class="subtle-title">
 
-					</fancy-array>
-					<fancy-button class="fancy-small add-variable merge-top"><div class="icon ico ico-plus"></div></fancy-button>
+						<to-collapse>
+						<fancy-array class="variables merge-bottom" style="flex-grow: 1">
+						</fancy-array>
+						<fancy-button class="fancy-small add-variable merge-top"><div class="icon ico ico-plus"></div></fancy-button>
+						</to-collapse>
+					</div>
 				</div>
 
 				<div class="options-block hide-block">
@@ -316,6 +322,25 @@ class ShaderEditor extends hide.view.FileView implements GraphInterface.IGraphEd
 			</div>'
 		);
 
+		function collapse(name: String) {
+			var collapse = rightPannel.find("." + name);
+			function refresh() {
+				var state = getDisplayState(name) ?? false;
+				collapse.toggleClass("collapsed", state);
+			}
+			collapse.on("click", () -> {
+				saveDisplayState(name, !(getDisplayState(name) ?? false));
+				refresh();
+			});
+
+			refresh();
+		}
+
+		collapse("param-collapse");
+		collapse("var-collapse");
+
+
+
 		variableList = new hide.comp.FancyArray(null, rightPannel.find(".variables"), "variables", "variables");
 
 		variableList.getItems = () -> shaderGraph.variables;