2
0
Эх сурвалжийг харах

[shgraph] Added Show in parameter list and Select nodes to parameters

Clément Espeute 10 сар өмнө
parent
commit
9ee5648a52

+ 27 - 0
bin/style.css

@@ -1984,6 +1984,30 @@ input[type=checkbox]:checked:after {
 						}
 						}
 					}*/
 					}*/
 }
 }
+.shader-editor #rightPanel .hide-block #parametersList .parameter.reveal {
+  outline: 2px solid;
+  animation-duration: 0.75s;
+  animation-name: focus-show;
+  outline-color: transparent;
+  outline-offset: -2px;
+  z-index: 1;
+}
+@keyframes focus-show {
+  0%,
+  25%,
+  50%,
+  75% {
+    outline-color: #43578f;
+  }
+  12%,
+  37%,
+  62% {
+    outline-color: #7b8cb9;
+  }
+  100% {
+    outline-color: rgba(67, 87, 143, 0);
+  }
+}
 .shader-editor #rightPanel .hide-block #parametersList .parameter .hide-range {
 .shader-editor #rightPanel .hide-block #parametersList .parameter .hide-range {
   display: block;
   display: block;
 }
 }
@@ -2323,6 +2347,9 @@ input[type=checkbox]:checked:after {
 .graph-view .heaps-scene svg g.error .outline {
 .graph-view .heaps-scene svg g.error .outline {
   stroke: #ff6666;
   stroke: #ff6666;
 }
 }
+.graph-view .heaps-scene svg g.box {
+  pointer-events: all;
+}
 .graph-view .heaps-scene svg .outline {
 .graph-view .heaps-scene svg .outline {
   fill: none;
   fill: none;
 }
 }

+ 28 - 0
bin/style.less

@@ -2194,6 +2194,29 @@ input[type=checkbox] {
 					background-color: #222;
 					background-color: #222;
 					position: relative;
 					position: relative;
 
 
+					&.reveal {
+						outline: 2px solid;
+						animation-duration: 0.75s;
+						animation-name: focus-show;
+						outline-color: transparent;
+						outline-offset: -2px;
+						z-index: 1;
+					}
+
+					@keyframes focus-show {
+						0%, 25%, 50%, 75% {
+							outline-color: rgba(67, 87, 143, 1.0);
+						}
+
+						12%, 37%, 62% {
+							outline-color: rgb(123, 140, 185);
+						}
+
+						100% {
+							outline-color: rgba(67, 87, 143, 0.0);
+						}
+					}
+
 					.hide-range {
 					.hide-range {
 						display: block;
 						display: block;
 					}
 					}
@@ -2641,7 +2664,12 @@ input[type=checkbox] {
 						stroke: #ff6666;
 						stroke: #ff6666;
 					}
 					}
 				}
 				}
+
+				&.box {
+					pointer-events: all;
+				}
 			}
 			}
+
 			.outline {
 			.outline {
 				fill: none;
 				fill: none;
 			}
 			}

+ 39 - 2
hide/view/GraphEditor.hx

@@ -144,8 +144,6 @@ class GraphEditor extends hide.comp.Component {
 		}
 		}
 	}
 	}
 
 
-
-
 	public function onDisplay() {
 	public function onDisplay() {
 		saveDisplayKey = "hideGraphEditor";
 		saveDisplayKey = "hideGraphEditor";
 
 
@@ -1040,6 +1038,37 @@ class GraphEditor extends hide.comp.Component {
 		commitUndo();
 		commitUndo();
 	}
 	}
 
 
+	public function setSelection(nodes: Array<IGraphNode>) {
+		clearSelectionBoxesUndo(currentUndoBuffer);
+
+		for (node in nodes) {
+			opSelect(node.id, true, currentUndoBuffer);
+		}
+
+		commitUndo();
+	}
+
+	public function centerSelection() {
+		if (!boxesSelected.iterator().hasNext()) {
+			centerView();
+			return;
+		}
+		var centerX = 0.0;
+		var centerY = 0.0;
+		var count = 0;
+		for (id => _ in boxesSelected) {
+			var box = boxes.get(id);
+			centerX += box.x + box.info.width / 2.0;
+			centerY += box.y + box.height / 2.0;
+			count ++;
+		}
+
+		transformMatrix[4] = - (centerX / count) * transformMatrix[0] + editorDisplay.element.width()/2;
+		transformMatrix[5] = - (centerY / count) * transformMatrix[3] + editorDisplay.element.height()/2;
+		clampView();
+		updateMatrix();
+	}
+
 
 
 	function commentFromSelection() {
 	function commentFromSelection() {
 		if (boxesSelected.empty())
 		if (boxesSelected.empty())
@@ -1260,6 +1289,14 @@ class GraphEditor extends hide.comp.Component {
 			elt.get(0).releasePointerCapture(e.pointerId);
 			elt.get(0).releasePointerCapture(e.pointerId);
 			endMove();
 			endMove();
 		};
 		};
+
+		elt.get(0).oncontextmenu = function(e: js.html.MouseEvent) {
+			e.preventDefault();
+			e.stopPropagation();
+			if (box.info.contextMenu != null) {
+				box.info.contextMenu(e);
+			}
+		}
 		boxes.set(box.node.id, box);
 		boxes.set(box.node.id, box);
 
 
 		for (inputId => input in box.info.inputs) {
 		for (inputId => input in box.info.inputs) {

+ 6 - 1
hide/view/GraphInterface.hx

@@ -25,7 +25,12 @@ typedef GraphNodeInfo = {
         setComment : (String) -> Void,
         setComment : (String) -> Void,
         getSize : (s: h2d.col.Point) -> Void,
         getSize : (s: h2d.col.Point) -> Void,
         setSize : (s: h2d.col.Point) -> Void,
         setSize : (s: h2d.col.Point) -> Void,
-    }
+    },
+
+    /**
+        If set, a custom context menu will be created when the user right clicks the box
+    **/
+    ?contextMenu : (e: js.html.MouseEvent) -> Void,
 };
 };
 
 
 typedef NodeInput = {
 typedef NodeInput = {

+ 24 - 1
hide/view/shadereditor/ShaderEditor.hx

@@ -447,12 +447,24 @@ class ShaderEditor extends hide.view.FileView implements GraphInterface.IGraphEd
 
 
 	function addParameter(parameter : Parameter, ?value : Dynamic) {
 	function addParameter(parameter : Parameter, ?value : Dynamic) {
 
 
-		var elt = new Element('<div id="param_${parameter.id}" class="parameter" draggable="true" ></div>').appendTo(parametersList);
+		var elt = new Element('<div id="param_${parameter.id}" class="parameter" draggable="true"></div>').appendTo(parametersList);
 		elt.on("click", function(e) {e.stopPropagation();});
 		elt.on("click", function(e) {e.stopPropagation();});
 		elt.on("contextmenu", function(e) {
 		elt.on("contextmenu", function(e) {
 			var elements = [];
 			var elements = [];
 			e.stopPropagation();
 			e.stopPropagation();
 			var newCtxMenu : Array<hide.comp.ContextMenu.MenuItem> = [
 			var newCtxMenu : Array<hide.comp.ContextMenu.MenuItem> = [
+				{ label: "Select Nodes", click : () -> {
+					var list : Array<IGraphNode> = [];
+					for (node in currentGraph.getNodes()) {
+						var param = Std.downcast(node, ShaderParam);
+						if (param != null && param.parameterId == parameter.id) {
+							list.push(param);
+						}
+					}
+					graphEditor.setSelection(list);
+					graphEditor.centerSelection();
+				}},
+				{ isSeparator: true},
 				{ label : "Move up", click : () -> {
 				{ label : "Move up", click : () -> {
 					//beforeChange();
 					//beforeChange();
 					moveParameter(parameter, true);
 					moveParameter(parameter, true);
@@ -889,6 +901,17 @@ class ShaderEditor extends hide.view.FileView implements GraphInterface.IGraphEd
 		}
 		}
 	}
 	}
 
 
+	public function revealParameter(id: Int) : Void {
+		var param = parametersList.find("#param_" + id);
+		parametersList.children().not(param).each((_, elt) -> toggleParameter(new JQuery(elt), false));
+		toggleParameter(param, true);
+		param.get(0).onanimationend = (e) -> {
+			param.removeClass("reveal");
+		};
+		param.removeClass("reveal");
+		param.addClass("reveal");
+	}
+
 	public function saveSettings() {
 	public function saveSettings() {
 		saveDisplayState("previewSettings", haxe.Json.stringify(previewSettings));
 		saveDisplayState("previewSettings", haxe.Json.stringify(previewSettings));
 	}
 	}

+ 15 - 1
hrt/shgraph/ShaderParam.hx

@@ -12,7 +12,7 @@ class ShaderParam extends ShaderNode {
 	public var shaderGraph : ShaderGraph;
 	public var shaderGraph : ShaderGraph;
 
 
 	public function new() {
 	public function new() {
-		
+
 	}
 	}
 
 
 	override function getOutputs() : Array<ShaderNode.OutputInfo> {
 	override function getOutputs() : Array<ShaderNode.OutputInfo> {
@@ -63,4 +63,18 @@ class ShaderParam extends ShaderNode {
 		return parameters;
 		return parameters;
 	}
 	}
 
 
+	#if editor
+	override function getInfo():hide.view.GraphInterface.GraphNodeInfo {
+		var info = super.getInfo();
+
+		info.contextMenu = (e: js.html.MouseEvent) -> {
+			hide.comp.ContextMenu.createFromEvent(e, [
+				{label: "Show in Parameters list", click: () -> {
+					(cast editor.editor: hide.view.shadereditor.ShaderEditor).revealParameter(parameterId);
+				}},
+			]);
+		}
+		return info;
+	}
+	#end
 }
 }