[shgraph] new editor style

bin/style.css

@@ -5,6 +5,12 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'Inter';
+  src: url('src/Inter-Light.ttf');
+  font-weight: lighter;
+  font-style: normal;
+}
 body {
   margin: 0;
   padding: 0;
@@ -2228,32 +2234,8 @@ input[type=checkbox]:checked:after {
 .graph-view .heaps-scene {
   outline: none !important;
 }
-.graph-view .heaps-scene #status-bar {
-  z-index: 2;
-  position: absolute;
-  width: 84%;
-  min-height: 20px;
-  background-color: #111;
-  border: 1px solid #444;
-  left: -1px;
-  bottom: -1px;
-  max-height: 60%;
-  overflow: auto;
-}
-.graph-view .heaps-scene #status-bar pre {
-  padding: 10px;
-  vertical-align: sub;
-}
-.graph-view .heaps-scene #status-bar pre.error {
-  color: #c74848;
-}
-.graph-view .heaps-scene #status-bar #close {
-  width: 100%;
-  text-align: center;
-  cursor: pointer;
-}
-.graph-view .heaps-scene svg g {
-  stroke: #202020;
+.graph-view .heaps-scene svg {
+  font-family: 'Inter';
 }
 .graph-view .heaps-scene svg g.selected .outline {
   stroke: #668fff;
@@ -2264,15 +2246,22 @@ input[type=checkbox]:checked:after {
 .graph-view .heaps-scene svg .outline {
   fill: none;
 }
+.graph-view .heaps-scene svg .background {
+  fill: #393939;
+}
+.graph-view .heaps-scene svg .separator {
+  stroke: #272727;
+  stroke-width: 1px;
+}
 .graph-view .heaps-scene svg .resize {
   fill: rgba(0, 0, 0, 0);
   stroke: none;
 }
 .graph-view .heaps-scene svg .comment .head-box {
   fill: rgba(80, 80, 80, 0.5);
-  stroke-width: 3;
 }
 .graph-view .heaps-scene svg .comment .outline {
+  stroke: rgba(80, 80, 80, 0.5);
   stroke-width: 3;
 }
 .graph-view .heaps-scene svg .comment-title {
@@ -2289,10 +2278,8 @@ input[type=checkbox]:checked:after {
 .graph-view .heaps-scene svg .comment-title br {
   display: none;
 }
-.graph-view .heaps-scene svg .head-box {
-  fill: #155358;
-}
 .graph-view .heaps-scene svg .title-box {
+  text-anchor: start;
   fill: #ffffff;
   stroke: none;
   user-select: none;
@@ -2300,11 +2287,6 @@ input[type=checkbox]:checked:after {
 .graph-view .heaps-scene svg .title-box::selection {
   background: none;
 }
-.graph-view .heaps-scene svg .nodes,
-.graph-view .heaps-scene svg .properties {
-  fill: #737373;
-  opacity: 0.75;
-}
 .graph-view .heaps-scene svg .hasLink .input-field {
   display: none;
 }

bin/style.less

@@ -8,6 +8,13 @@
 	font-style: normal;
 }
 
+@font-face {
+	font-family: 'Inter';
+	src: url('src/Inter-Light.ttf');
+	font-weight: lighter;
+	font-style: normal;
+}
+
 body {
 	margin : 0;
 	padding : 0;
@@ -2163,7 +2170,7 @@ input[type=checkbox] {
 	#preview {
 		z-index: 3;
 		position: absolute;
-		
+
 		width: 300px;
 		height: 300px;
 
@@ -2501,41 +2508,10 @@ input[type=checkbox] {
 
 	.heaps-scene {
 		outline: none !important;
-		#status-bar {
-			z-index: 2;
-			position: absolute;
-
-			width: 84%;
-			min-height: 20px;
-
-			background-color: #111;
-			border: 1px solid #444;
-
-			left: -1px;
-			bottom: -1px;
-			max-height: 60%;
-			overflow: auto;
-
-			pre {
-				padding: 10px;
-				vertical-align: sub;
-
-				&.error {
-					color: #c74848;
-				}
-			}
-
-			#close {
-				width: 100%;
-				text-align: center;
-				cursor: pointer;
-			}
-		}
 		svg {
 
+			font-family: 'Inter';
 			g {
-				stroke: #202020;
-
 				&.selected {
 					.outline {
 						stroke: #668fff;
@@ -2551,6 +2527,15 @@ input[type=checkbox] {
 				fill: none;
 			}
 
+			.background {
+				fill: #393939;
+			}
+
+			.separator {
+				stroke: #272727;
+				stroke-width: 1px;
+			}
+
 			.resize {
 				fill: rgba(0, 0, 0, 0.0);
 				stroke: none;
@@ -2559,10 +2544,11 @@ input[type=checkbox] {
 			.comment {
 				.head-box {
 					fill: rgba(80,80,80,0.5);
-					stroke-width: 3;
+					//stroke-width: 3;
 				}
 
 				.outline {
+					stroke: rgba(80,80,80,0.5);
 					stroke-width: 3;
 				}
 			}
@@ -2582,11 +2568,12 @@ input[type=checkbox] {
 				}
 			}
 
-			.head-box {
-				fill: #155358;
-			}
+			// .head-box {
+			// 	fill: #155358;
+			// }
 
 			.title-box {
+				text-anchor: start;
 				fill: #ffffff;
 				stroke: none;
 				user-select: none;
@@ -2595,10 +2582,10 @@ input[type=checkbox] {
 				}
 			}
 
-			.nodes, .properties {
-				fill: #737373;
-				opacity: 0.75;
-			}
+			// .nodes, .properties {
+			// 	fill: #737373;
+			// 	opacity: 0.75;
+			// }
 
 			.hasLink {
 				.input-field {

hide/view/GraphEditor.hx

@@ -316,7 +316,7 @@ class GraphEditor extends hide.comp.Component {
 		var bg = new h2d.Flow(previewsScene.s2d);
 		bg.fillHeight = true;
 		bg.fillWidth = true;
-		bg.backgroundTile = h2d.Tile.fromColor(0x333333);
+		bg.backgroundTile = h2d.Tile.fromColor(0x202020);
 		boxToPreview = [];
 
 		var identity : h3d.Matrix = new h3d.Matrix();
@@ -1154,21 +1154,26 @@ class GraphEditor extends hide.comp.Component {
 			}
 			grNode.find(".node").attr("field", inputId);
 			grNode.get(0).addEventListener("pointerdown", function(e) {
-				e.stopPropagation();
-				heapsScene.get(0).setPointerCapture(e.pointerId);
-				edgeCreationInput = packIO(box.node.getId(), inputId);
-				edgeCreationMode = FromInput;
+				if (e.button == 0) {
+					e.stopPropagation();
+					cancelAll();
+					heapsScene.get(0).setPointerCapture(e.pointerId);
+					edgeCreationInput = packIO(box.node.getId(), inputId);
+					edgeCreationMode = FromInput;
+				}
 			});
 		}
 		for (outputId => info in box.info.outputs) {
 			var grNode = box.addOutput(this, info.name, info.color);
 			grNode.find(".node").attr("field", outputId);
 			grNode.get(0).addEventListener("pointerdown", function(e) {
-				e.stopPropagation();
-				cancelAll();
-				heapsScene.get(0).setPointerCapture(e.pointerId);
-				edgeCreationOutput = packIO(box.node.getId(), outputId);
-				edgeCreationMode = FromOutput;
+				if (e.button == 0) {
+					e.stopPropagation();
+					cancelAll();
+					heapsScene.get(0).setPointerCapture(e.pointerId);
+					edgeCreationOutput = packIO(box.node.getId(), outputId);
+					edgeCreationMode = FromOutput;
+				}
 			});
 		}
 

hide/view/shadereditor/Box.hx

@@ -79,11 +79,17 @@ class Box {
 
 		// Debug: editor.editorDisplay.text(element, 2, -6, 'Node ${node.id}').addClass("node-id-indicator");
 
-		// outline of box
+		if (info.comment == null) {
+			editor.editorDisplay.rect(element, 0,0,width, getHeight()).addClass("background");
+
+		}
 		editor.editorDisplay.rect(element, -1, -1, width+2, getHeight()+2).addClass("outline");
 
 		if (info.comment != null) {
 
+			editor.editorDisplay.rect(element, 0,0,width, HEADER_HEIGHT).addClass("head-box");
+
+
 			function makeResizable(elt: js.html.Element, left: Bool, top: Bool, right: Bool, bottom: Bool) {
 				var pressed = false;
 
@@ -191,38 +197,45 @@ class Box {
 			elt.style.cursor = "nesw-resize";
 			elt.id = "resizeTopRight";
 			makeResizable(elt, false,true,true,false);
+
+			var fo = editor.editorDisplay.foreignObject(element, 7, 2, 0, HEADER_HEIGHT-4);
+			fo.get(0).id = "commentTitle";
+			var commentTitle = new Element("<span contenteditable spellcheck='false'>Comment</span>").addClass("comment-title").appendTo(fo);
+
+			var editable = new hide.comp.ContentEditable(null, commentTitle);
+			editable.value = info.comment.getComment();
+			editable.onChange = function(v: String) {
+				editor.opComment(this, v, editor.currentUndoBuffer);
+				editor.commitUndo();
+			};
+
+			refreshBox();
+			return;
 		}
 
 		// header
 
 		if (hasHeader) {
-			var header = editor.editorDisplay.rect(element, 0, 0, this.width, HEADER_HEIGHT).addClass("head-box");
-			if (color != null) header.css("fill", color);
+			//var header = editor.editorDisplay.rect(element, 0, 0, this.width, HEADER_HEIGHT).addClass("head-box");
+			//if (color != null) header.css("fill", color);
 			if (info.comment != null) {
-				var fo = editor.editorDisplay.foreignObject(element, 7, 2, 0, HEADER_HEIGHT-4);
-				fo.get(0).id = "commentTitle";
-				var commentTitle = new Element("<span contenteditable spellcheck='false'>Comment</span>").addClass("comment-title").appendTo(fo);
-
-				var editable = new hide.comp.ContentEditable(null, commentTitle);
-				editable.value = info.comment.getComment();
-				editable.onChange = function(v: String) {
-					editor.opComment(this, v, editor.currentUndoBuffer);
-					editor.commitUndo();
-				};
+
 			}
 			else {
 				editor.editorDisplay.text(element, 7, HEADER_HEIGHT-6, info.name).addClass("title-box");
 			}
 		}
 
-
 		propertiesGroup = editor.editorDisplay.group(element).addClass("properties-group");
 
 		// nodes div
-		var bg = editor.editorDisplay.rect(element, 0, HEADER_HEIGHT, this.width, 0).addClass("nodes");
-		if (!hasHeader && color != null) {
-			bg.css("fill", color);
-		}
+
+		editor.editorDisplay.line(element, 0, HEADER_HEIGHT, width, HEADER_HEIGHT).addClass("separator");
+
+		// var bg = editor.editorDisplay.rect(element, 0, HEADER_HEIGHT, this.width, 0).addClass("nodes");
+		// if (!hasHeader && color != null) {
+		// 	bg.css("fill", color);
+		// }
 
 		if (info.preview != null) {
 			closePreviewBtn = editor.editorDisplay.foreignObject(element, width / 2 - 16, 0, 32,32);
@@ -256,7 +269,7 @@ class Box {
 
 	public function addInput(editor : GraphEditor, name : String, valueDefault : String = null, color : Int) {
 		var node = editor.editorDisplay.group(element).addClass("input-node-group");
-		var nodeHeight = HEADER_HEIGHT + NODE_MARGIN * (inputs.length+1) + NODE_RADIUS * inputs.length;
+		var nodeHeight = getNodeHeight(inputs.length);
 		var style = {fill : '#${StringTools.hex(color, 6)}'};
 
 		var nodeCircle = editor.editorDisplay.circle(node, 0, nodeHeight, NODE_RADIUS, style).addClass("node input-node");
@@ -326,7 +339,7 @@ class Box {
 	}
 
 	public function getNodeHeight(id: Int) {
-		return HEADER_HEIGHT + NODE_MARGIN * (id+1) + NODE_RADIUS * (id);
+		return NODE_MARGIN * (id+2) + NODE_RADIUS * (id);
 	}
 
 	public function generateProperties(editor : GraphEditor) {
@@ -342,8 +355,12 @@ class Box {
 		}
 
 		// create properties box
-		var bgParam = editor.editorDisplay.rect(propertiesGroup, 0, 0, this.width, 0).addClass("properties");
-		if (!hasHeader && color != null) bgParam.css("fill", color);
+		if (!collapseProperties()) {
+			editor.editorDisplay.line(propertiesGroup, 0, 0, this.width, 0).addClass("separator");
+		}
+
+		//var bgParam = editor.editorDisplay.rect(propertiesGroup, 0, 0, this.width, 0).addClass("properties");
+		//if (!hasHeader && color != null) bgParam.css("fill", color);
 		propsHeight = 0;
 
 		for (p in props) {
@@ -370,7 +387,8 @@ class Box {
 		var nodesHeight = getNodesHeight();
 		var height = getHeight();
 		element.find(".nodes").height(nodesHeight).width(width);
-		element.find(".outline").attr("height", height+2).width(width);
+		element.find(".background").attr("height", height).width(width);
+		element.find(".outline").attr("height", height+2).width(width+2);
 
 		if (hasHeader) {
 			element.find(".head-box").width(width);
@@ -391,16 +409,16 @@ class Box {
 		}
 
 		if (inputs.length >= 1 && outputs.length >= 1) {
-			element.find(".nodes-separator").attr("y2", HEADER_HEIGHT + nodesHeight);
+			element.find(".nodes-separator").attr("y2", nodesHeight);
 			element.find(".nodes-separator").show();
 		}
 
 		if (propertiesGroup != null) {
-			propertiesGroup.attr("transform", 'translate(0, ${HEADER_HEIGHT + nodesHeight})');
+			propertiesGroup.attr("transform", 'translate(0, ${collapseProperties() ? getNodeHeight(0) - 16 : nodesHeight})');
 			propertiesGroup.find(".properties").attr("height", propsHeight);
 		}
 
-		closePreviewBtn?.attr("y",HEADER_HEIGHT + nodesHeight + propsHeight - 16);
+		closePreviewBtn?.attr("y",nodesHeight + propsHeight - 16);
 	}
 
 	public static var tmpPoint = new h2d.col.Point();
@@ -430,19 +448,27 @@ class Box {
 		return this.node;
 	}
 
+	public function collapseProperties() {
+		return info.inputs.length <= 1 && info.outputs.length <= 1;
+	}
+
 	public function getNodesHeight() {
 		var maxNb = Std.int(Math.max(inputs.length, outputs.length));
 		if (info.comment != null) {
 			return 0;
 		}
-		return NODE_MARGIN * (maxNb+1) + NODE_RADIUS * maxNb;
+		return getNodeHeight(maxNb);
 	}
 	public function getHeight() {
 		if (info.comment != null) {
 			info.comment.getSize(tmpPoint);
 			return tmpPoint.y;
 		}
-		return HEADER_HEIGHT + getNodesHeight() + propsHeight;
+		var nodeHeight = getNodesHeight();
+		if (collapseProperties()) {
+			return hxd.Math.max(nodeHeight, propsHeight);
+		}
+		return nodeHeight + propsHeight;
 	}
 
 	inline public function getBounds() : {x: Float, y: Float, w: Float, h: Float} {

hrt/shgraph/nodes/Split.hx

@@ -12,12 +12,14 @@ class Split extends ShaderNodeHxsl {
 		@sgoutput var r : Float;
 		@sgoutput var g : Float;
 		@sgoutput var b : Float;
+		@sgoutput var x : Float;
 		@sgoutput var a : Float;
 		function fragment() {
 			r = rgba.r;
 			g = rgba.g;
 			b = rgba.b;
 			a = rgba.a;
+			x = 0.5;
 		}
 	};
 

hrt/shgraph/nodes/Vec2.hx

@@ -8,6 +8,7 @@ using hxsl.Ast;
 @name("Vec2")
 @description("Create a vector of size 2 from 2 floats")
 @group("Channel")
+@width(80)
 class Vec2 extends ShaderNodeHxsl {
 
 	static var SRC = {

hrt/shgraph/nodes/Vec3.hx

@@ -8,6 +8,7 @@ using hxsl.Ast;
 @name("Vec3")
 @description("Create a vector of size 3 from 3 floats")
 @group("Channel")
+@width(80)
 class Vec3 extends ShaderNodeHxsl {
 
 	static var SRC = {

hrt/shgraph/nodes/Vec4.hx

@@ -8,6 +8,7 @@ using hxsl.Ast;
 @name("Vec4")
 @description("Create a vector of size 4 from 4 floats")
 @group("Channel")
+@width(80)
 class Vec4 extends ShaderNodeHxsl {
 
 	static var SRC = {