Color edges and nodes

hide/view/Graph.hx

@@ -48,6 +48,7 @@ class Graph extends FileView {
 	// used to build edge
 	static var NODE_TRIGGER_NEAR = 2000.0;
 	var isCreatingLink : EdgeState = None;
+	var edgeStyle = {stroke : ""};
 	var startLinkBox : Box;
 	var endLinkBox : Box;
 	var startLinkGrNode : JQuery;
@@ -213,6 +214,7 @@ class Graph extends FileView {
 				for (edge in listOfEdges) {
 					if (edge.from == b || edge.to == b) {
 						edge.elt.remove();
+						edgeStyle.stroke = edge.nodeFrom.css("fill");
 						edge.elt = createCurve(edge.nodeFrom, edge.nodeTo);
 
 						edge.elt.on("mousedown", function(e) {
@@ -276,7 +278,7 @@ class Graph extends FileView {
 					defaultValue = "0";
 				}
 			}
-			var grNode = box.addInput(editor, inputInfo.name, defaultValue);
+			var grNode = box.addInput(editor, inputInfo.name, defaultValue, inputInfo.type);
 			if (defaultValue != null) {
 				var fieldEditInput = grNode.find("input");
 				fieldEditInput.on("change", function(ev) {
@@ -301,19 +303,21 @@ class Graph extends FileView {
 				isCreatingLink = FromInput;
 				startLinkGrNode = grNode;
 				startLinkBox = box;
+				edgeStyle.stroke = node.css("fill");
 				setAvailableOutputNodes(box, grNode.find(".node").attr("field"));
 			});
 		}
 		for (outputKey in box.getInstance().getOutputInfoKeys()) {
 			var outputInfo = box.getInstance().getOutputInfo(outputKey);
-
-			var grNode = box.addOutput(editor, outputInfo.name);
+			var grNode = box.addOutput(editor, outputInfo.name, box.getInstance().getOutputType(outputKey));
 			grNode.find(".node").attr("field", outputKey);
 			grNode.on("mousedown", function(e) {
 				e.stopPropagation();
+				var node = grNode.find(".node");
 				isCreatingLink = FromOutput;
 				startLinkGrNode = grNode;
 				startLinkBox = box;
+				edgeStyle.stroke = node.css("fill");
 				setAvailableInputNodes(box, startLinkGrNode.find(".node").attr("field"));
 			});
 		}
@@ -354,6 +358,7 @@ class Graph extends FileView {
 						isCreatingLink = FromOutput;
 						startLinkGrNode = e.nodeFrom.parent();
 						startLinkBox = e.from;
+						edgeStyle.stroke = e.nodeFrom.css("fill");
 						setAvailableInputNodes(e.from, e.nodeFrom.attr("field"));
 						removeEdge(e);
 						createLink(x, y);
@@ -366,6 +371,7 @@ class Graph extends FileView {
 						isCreatingLink = FromInput;
 						startLinkGrNode = e.nodeTo.parent();
 						startLinkBox = e.to;
+						edgeStyle.stroke = e.nodeFrom.css("fill");
 						setAvailableOutputNodes(e.to, e.nodeTo.attr("field"));
 						removeEdge(e);
 						createLink(x, y);
@@ -545,7 +551,8 @@ class Graph extends FileView {
 							lX(offsetEnd.left) + Box.NODE_RADIUS,
 							lY(offsetEnd.top) + Box.NODE_RADIUS,
 							startX + valueCurveX * (Math.min(maxDistanceY, diffDistanceY)/maxDistanceY),
-							startY + signCurveY * valueCurveY * (Math.min(maxDistanceY, diffDistanceY)/maxDistanceY))
+							startY + signCurveY * valueCurveY * (Math.min(maxDistanceY, diffDistanceY)/maxDistanceY),
+							edgeStyle)
 							.addClass("edge");
 		editorMatrix.prepend(curve);
 		if (isDraft)

hide/view/shadereditor/Box.hx

@@ -3,9 +3,18 @@ package hide.view.shadereditor;
 import hide.comp.SVG;
 import js.jquery.JQuery;
 import hrt.shgraph.ShaderNode;
-
 class Box {
 
+	var boolColor = "#cc0505";
+	var numberColor = "#00ffea";
+	var floatColor = "#00ff73";
+	var intColor = "#00ffea";
+	var vec2Color = "#5eff00";
+	var vec3Color = "#eeff00";
+	var vec4Color = "#fc6703";
+	var samplerColor = "#600aff";
+	var defaultColor = "#c8c8c8";
+
 	var nodeInstance : ShaderNode;
 
 	var x : Float;
@@ -77,10 +86,30 @@ class Box {
 		//editor.line(element, width/2, HEADER_HEIGHT, width/2, 0, {display: "none"}).addClass("nodes-separator");
 	}
 
-	public function addInput(editor : SVG, name : String, valueDefault : String = null) {
+	public function addInput(editor : SVG, name : String, valueDefault : String = null, type : hrt.shgraph.ShaderType.SType) {
 		var node = editor.group(element).addClass("input-node-group");
 		var nodeHeight = HEADER_HEIGHT + NODE_MARGIN * (inputs.length+1) + NODE_RADIUS * inputs.length;
-		var nodeCircle = editor.circle(node, 0, nodeHeight, NODE_RADIUS).addClass("node input-node");
+		var style = {fill : ""}
+		switch (type) {
+			case Bool:
+				style.fill = boolColor;
+			case Number:
+				style.fill = numberColor;
+			case Float:
+				style.fill = floatColor;
+			case Vec2:
+				style.fill = vec2Color;
+			case Vec3:
+				style.fill = vec3Color;
+			case Vec4:
+				style.fill = vec4Color;
+			case Sampler:
+				style.fill = samplerColor;
+			default:
+				style.fill = defaultColor;
+
+		}
+		var nodeCircle = editor.circle(node, 0, nodeHeight, NODE_RADIUS, style).addClass("node input-node");
 
 		if (name.length > 0)
 			editor.text(node, NODE_TITLE_PADDING, nodeHeight + 4, name).addClass("title-node");
@@ -96,10 +125,31 @@ class Box {
 		return node;
 	}
 
-	public function addOutput(editor : SVG, name : String) {
+	public function addOutput(editor : SVG, name : String, ?type : hxsl.Ast.Type) {
 		var node = editor.group(element).addClass("output-node-group");
 		var nodeHeight = HEADER_HEIGHT + NODE_MARGIN * (outputs.length+1) + NODE_RADIUS * outputs.length;
-		var nodeCircle = editor.circle(node, width, nodeHeight, NODE_RADIUS).addClass("node output-node");
+		var style = {fill : ""}
+		switch (type) {
+			case TBool:
+				style.fill = boolColor;
+			case TInt:
+				style.fill = intColor;
+			case TFloat:
+				style.fill = floatColor;
+			case TVec(size, t):
+				if (size == 2)
+					style.fill = vec2Color;
+				else if (size == 3)
+					style.fill = vec3Color;
+				else if (size == 4)
+					style.fill = vec4Color;
+			case TSampler2D:
+				style.fill = samplerColor;
+			default:
+				style.fill = defaultColor;
+
+		}
+		var nodeCircle = editor.circle(node, width, nodeHeight, NODE_RADIUS, style).addClass("node output-node");
 
 		if (name.length > 0)
 			editor.text(node, width - NODE_TITLE_PADDING - (name.length * 6.75), nodeHeight + 4, name).addClass("title-node");

hide/view/shadereditor/ShaderEditor.hx

@@ -514,6 +514,7 @@ class ShaderEditor extends hide.view.Graph {
 						if (input != null && input.node.id == box.getId()) {
 							var nodeFrom = box.getElement().find('[field=${outputKey}]');
 							var nodeTo = b.getElement().find('[field=${key}]');
+							edgeStyle.stroke = nodeFrom.css("fill");
 							createEdgeInEditorGraph({from: box, nodeFrom: nodeFrom, to : b, nodeTo: nodeTo, elt : createCurve(nodeFrom, nodeTo) });
 						}
 					}
@@ -535,6 +536,7 @@ class ShaderEditor extends hide.view.Graph {
 				}
 				var nodeFrom = fromBox.getElement().find('[field=${input.getKey()}]');
 				var nodeTo = box.getElement().find('[field=${key}]');
+				edgeStyle.stroke = nodeFrom.css("fill");
 				createEdgeInEditorGraph({from: fromBox, nodeFrom: nodeFrom, to : box, nodeTo: nodeTo, elt : createCurve(nodeFrom, nodeTo) });
 			}
 		}

hrt/shgraph/ShaderGraph.hx

@@ -101,8 +101,8 @@ class ShaderGraph {
 			var shaderParam = Std.downcast(n.instance, ShaderParam);
 			if (shaderParam != null) {
 				var paramShader = getParameter(shaderParam.parameterId);
-				shaderParam.computeOutputs();
 				shaderParam.variable = paramShader.variable;
+				shaderParam.computeOutputs();
 			}
 		}
 		if (nodes[nodes.length-1] != null)