[shgraph] Fix constant nodes

bin/style.css

@@ -2487,6 +2487,38 @@ input[type=checkbox].indeterminate:after {
 .graph-view .heaps-scene svg g.box foreignObject container .play-button:hover {
   color: #AAA;
 }
+.graph-view .heaps-scene svg g.box .sg-const-name {
+  display: flex;
+}
+.graph-view .heaps-scene svg g.box .sg-const-name > fancy-button {
+  --size: 20px;
+  font-size: 16px;
+}
+.graph-view .heaps-scene svg g.box .sg-const-name > input {
+  width: unset;
+  min-width: 0;
+  display: block;
+  border: none;
+  background: none;
+  text-align: right;
+  margin: 0;
+  padding: 0;
+}
+.graph-view .heaps-scene svg g.box .sg-const-name > input:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.graph-view .heaps-scene svg g.box .sg-const-name > input:focus {
+  outline: none;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.graph-view .heaps-scene svg g.box .sg-const-name > input:focus::placeholder {
+  color: transparent;
+}
+.graph-view .heaps-scene svg g.box .sg-const-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .graph-view .heaps-scene svg g.box.comment {
   pointer-events: none;
 }

bin/style.less

@@ -2864,6 +2864,44 @@ input[type=checkbox] {
 						}
 					}
 
+
+					.sg-const-name {
+						display: flex;
+
+						> fancy-button {
+							--size: 20px;
+							font-size: 16px;
+						}
+						> input {
+							width: unset;
+							min-width: 0;
+							display: block;
+							border: none;
+							background: none;
+							text-align: right;
+							margin: 0;
+							padding: 0;
+							&:hover {
+								background-color: rgba(0,0,0,0.20);
+
+							}
+							&:focus {
+								outline: none;
+								background-color: rgba(0,0,0,0.30);
+
+								&::placeholder {
+									color: transparent;
+								}
+							}
+						}
+					}
+
+					.sg-const-input {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+
 					&.comment {
 						.head-box {
 							fill: rgba(80,80,80,0.5);

hide/view/shadereditor/Box.hx

@@ -383,10 +383,12 @@ class Box {
 			var prop = editor.editorDisplay.group(propertiesGroup).addClass("prop-group");
 			prop.attr("transform", 'translate(0, ${propsHeight})');
 
+			var height = p.height();
 			var propWidth = (p.width() > 0 ? p.width() : this.width);
-			var fObject = editor.editorDisplay.foreignObject(prop, (this.width - propWidth) / 2, 5, propWidth, p.height());
+			var fObject = editor.editorDisplay.foreignObject(prop, (this.width - propWidth) / 2, 5, propWidth, height);
+			trace(p.height());
 			p.appendTo(fObject);
-			propsHeight += Std.int(p.outerHeight()) + 1;
+			propsHeight += Std.int(height) + 1;
 		}
 
 		propsHeight += 10;
@@ -481,7 +483,7 @@ class Box {
 		}
 		var nodeHeight = getNodesHeight();
 		if (collapseProperties()) {
-			return hxd.Math.max(nodeHeight, propsHeight);
+			return hxd.Math.max(nodeHeight, propsHeight + HEADER_HEIGHT);
 		}
 		return nodeHeight + propsHeight;
 	}

hrt/shgraph/ShaderConst.hx

@@ -14,10 +14,16 @@ class ShaderConst extends ShaderNode {
 	override public function getPropertiesHTML(width : Float) : Array<hide.Element> {
 		var elements = super.getPropertiesHTML(width);
 
-		var element = new hide.Element('<div style="width: 75px; height: 20px"></div>');
-		element.append(new hide.Element('<input type="text" id="value" style="width: ${width*0.75}px" placeholder="Name" value="${this.name}" />'));
+		var element = new hide.Element('<div class="sg-const-name" style="width: ${width-16}px; height: 20px"></div>');
+
+		var editBtn = new hide.Element('<fancy-button class="quieter compact"><div class="ico ico-pencil"></div></fancy-button>');
+
+		element.append(editBtn);
+
+		var input = new hide.Element('<input class="sg-const-name" type="text" id="value" placeholder="Name" value="${this.name}" autocomplete="off" />');
+
+		element.append(input);
 
-		var input = element.children("input");
 		input.on("keydown", function(e) {
 			e.stopPropagation();
 		});
@@ -25,6 +31,11 @@ class ShaderConst extends ShaderNode {
 			this.name = input.val();
 		});
 
+		editBtn.on("click", function(e) {
+			input.focus();
+			input.select();
+		});
+
 		elements.push(element);
 
 		return elements;

hrt/shgraph/nodes/BoolConst.hx

@@ -2,11 +2,10 @@ package hrt.shgraph.nodes;
 
 using hxsl.Ast;
 
-@name("Bool")
+@name("Const Bool")
 @description("Boolean input (static)")
 @group("Property")
 @width(100)
-@noheader()
 class BoolConst extends ShaderConst {
 
 
@@ -26,7 +25,7 @@ class BoolConst extends ShaderConst {
 	#if editor
 	override public function getPropertiesHTML(width : Float) : Array<hide.Element> {
 		var elements = super.getPropertiesHTML(width);
-		var element = new hide.Element('<div style="width: 15px; height: 30px"></div>');
+		var element = new hide.Element('<div class="sg-const-input" style="width: ${width}px; height: 15px"></div>');
 		element.append(new hide.Element('<input type="checkbox" id="value" />'));
 
 		var input = element.children("input");

hrt/shgraph/nodes/Color.hx

@@ -2,11 +2,10 @@ package hrt.shgraph.nodes;
 
 using hxsl.Ast;
 
-@name("Color")
+@name("Const Color")
 @description("Color property (static)")
 @group("Property")
 @width(100)
-@noheader()
 class Color extends ShaderConst {
 
 	@prop() var r : Float = 0;
@@ -28,9 +27,9 @@ class Color extends ShaderConst {
 	#if editor
 	override public function getPropertiesHTML(width : Float) : Array<hide.Element> {
 		var elements = super.getPropertiesHTML(width);
-		var element = new hide.Element('<div style="width: 47px; height: 35px"></div>');
+		var element = new hide.Element('<div class="sg-const-input" style="width: ${width}px"></div>');
 		var picker = new hide.comp.ColorPicker.ColorBox(element, true, true);
-
+		element.height(picker.element.height());
 
 		var start = h3d.Vector4.fromArray([r, g, b, a]);
 		picker.value = start.toColor();

hrt/shgraph/nodes/FloatConst.hx

@@ -2,11 +2,11 @@ package hrt.shgraph.nodes;
 
 using hxsl.Ast;
 
-@name("Value")
+@name("Const Value")
+@alias("Const Float")
 @description("Number input (static)")
 @group("Property")
 @width(100)
-@noheader()
 class FloatConst extends ShaderConst {
 
 	override function getOutputs() {
@@ -25,8 +25,8 @@ class FloatConst extends ShaderConst {
 	#if editor
 	override public function getPropertiesHTML(width : Float) : Array<hide.Element> {
 		var elements = super.getPropertiesHTML(width);
-		var element = new hide.Element('<div style="width: 75px; height: 30px"></div>');
-		element.append(new hide.Element('<input type="text" id="value" style="width: ${width*0.5}px" value="${value}" />'));
+		var element = new hide.Element('<div class="sg-const-input" style="width: ${width}px; height: 30px"></div>');
+		element.append(new hide.Element('<input type="text" id="value" value="${value}" />'));
 
 		var input = element.children("input");
 		input.on("keydown", function(e) {