MaterialSelector: update ux

bin/style.css

@@ -4629,19 +4629,38 @@ blend-space-2d-root properties-container .hide-properties dl > div .hide-range i
   cursor: not-allowed !important;
 }
 .array .line {
+  display: flex;
+  align-items: center;
   margin-top: 1px;
   width: 100%;
   padding: 3px;
   border-radius: 3px;
   background: #545454;
 }
+.array .line .inclusion {
+  display: flex;
+  justify-content: center;
+  width: 10px;
+  margin: 0 5px 0 5px;
+  padding: 2px 6px 2px 6px;
+  background: red;
+  color: black;
+  font-weight: 900;
+  border-radius: 5px;
+}
+.array .line .inclusion:hover {
+  cursor: pointer;
+  filter: opacity(80%);
+}
 .array .line input {
   margin-right: 5px;
 }
 .array .line input:not([type=checkbox]) {
-  width: 85%;
+  flex: 1;
 }
 .array .line .remove {
+  margin: 0 5px 0 5px;
+  padding: 0 5px 0 5px;
   cursor: pointer;
 }
 .array .line .remove:hover {

bin/style.less

@@ -5497,21 +5497,42 @@ blend-space-2d-root {
 	}
 
 	.line {
+		display: flex;
+		align-items: center;
 		margin-top: 1px;
 		width: 100%;
 		padding: 3px;
 		border-radius: 3px;
 		background: @color-tool-bg;
 
+		.inclusion {
+			display: flex;
+			justify-content: center;
+			width: 10px;
+			margin: 0 5px 0 5px;
+			padding: 2px 6px 2px 6px;
+			background: red;
+			color: black;
+			font-weight: 900;
+			border-radius: 5px;
+
+			&:hover {
+				cursor: pointer;
+				filter: opacity(80%);
+			}
+		}
+
 		input {
 			margin-right: 5px;
 		}
 
 		input:not([type=checkbox]){
-			width: 85%;
+			flex: 1;
 		}
 
 		.remove {
+			margin: 0 5px 0 5px;
+			padding: 0 5px 0 5px;
 			cursor: pointer;
 
 			&:hover {

hrt/prefab/MaterialSelector.hx

@@ -1,21 +1,26 @@
 package hrt.prefab;
 
-typedef MaterialSelection = {
+enum Inclusion {
+	INCLUDE;
+	EXCLUDE;
+}
+
+typedef PassQuery = {
 	passName : String,
+	inclusion : Inclusion
 }
 
 typedef SelectedPass = {
 	pass : h3d.mat.Pass,
-	all : Bool,
+	all : Bool
 }
 
 class MaterialSelector extends hrt.prefab.Prefab {
+	public static var CONFIG_KEY = "materialSelector";
 
 	@:s public var blendModeEnabled : Bool = false;
 	@:s public var blendModesSelected : Array<String> = [];
-	@:s public var selections : Array<MaterialSelection> = [{
-		passName : "all",
-	}];
+	@:s public var selections : Array<PassQuery> = [ { passName : "all", inclusion : Inclusion.INCLUDE } ];
 
 	public function getPasses(local3d: h3d.scene.Object = null, filterObj : (obj : h3d.scene.Object) -> Bool = null) : Array<SelectedPass> {
 		if (local3d == null)
@@ -36,28 +41,44 @@ class MaterialSelector extends hrt.prefab.Prefab {
 		}
 
 		var passes = [];
-		var selectionSorted = selections.copy();
-		selectionSorted.sort((s1, s2) -> s1.passName == "all" ? return 1 : -1);
-		for ( m in mats ) {
-			if (blendModesSelected.length > 0 && this.blendModeEnabled) {
-				if (blendModesSelected.contains(m.blendMode.getName()))
-					passes.push({pass : m.mainPass, all : true});
-				continue;
+		if (blendModesSelected.length > 0 && this.blendModeEnabled) {
+			for ( m in mats ) {
+				if (blendModesSelected.length > 0 && this.blendModeEnabled) {
+					if (blendModesSelected.contains(m.blendMode.getName()))
+						passes.push( { pass : m.mainPass, all : true } );
+					continue;
+				}
 			}
-
-			for ( selection in selections ) {
-				if ( selection.passName == "all" ) {
-					passes.push({pass : m.mainPass, all : true});
-					break;
-				} else if ( selection.passName == "mainPass" ) {
-					passes.push({pass : m.mainPass, all : false });
-				} else {
-					var p = m.getPass(selection.passName);
-					if ( p != null )
-						passes.push({pass : p, all : false });
+		}
+		else {
+			var availablePasses = [];
+			for ( m in mats )
+				for (p in m.getPasses())
+					availablePasses.push(p);
+
+			var selectionSorted = selections.copy();
+			selectionSorted.sort((s1, s2) -> s1.inclusion.match(INCLUDE) ? -1 : 1);
+
+			for (s in selectionSorted) {
+				switch (s.inclusion) {
+					case Inclusion.INCLUDE:
+						if (s.passName == "all") {
+							for (p in availablePasses)
+								passes.push( { pass: p, all: false } );
+						}
+						else {
+							for (p in availablePasses)
+								if (p.name == s.passName)
+									passes.push( { pass: p, all: false } );
+						}
+					case Inclusion.EXCLUDE:
+						for (p in passes)
+							if (p.pass.name == s.passName)
+								passes.remove(p);
 				}
 			}
 		}
+
 		return passes;
 	}
 
@@ -133,7 +154,7 @@ class MaterialSelector extends hrt.prefab.Prefab {
 		</div>');
 
 		passesEl.find(".add").click(function(e) {
-			var newP = { passName: "" };
+			var newP = { passName: "all", inclusion: Inclusion.INCLUDE };
 			function exec(undo : Bool) {
 				if (undo)
 					selections.remove(newP);
@@ -147,13 +168,42 @@ class MaterialSelector extends hrt.prefab.Prefab {
 			ctx.properties.undo.change(Custom(exec));
 		});
 
+		var config : Array<{label: String, value: String}> = hide.Ide.inst.currentConfig.get(CONFIG_KEY);
 		for ( s in selections ) {
 			var passEl = new hide.Element('<div class="line">
-				<input field="passName"/>
+				<span class="inclusion" style="background:${s.inclusion.match(Inclusion.INCLUDE) ? 'green' : 'red'}">${s.inclusion.match(Inclusion.INCLUDE) ? 'U' : '/'}</span>
+				<div class="input"></div>
 				<div class="ico ico-remove remove"></div>
 			</div>');
 			passEl.appendTo(passesEl.find(".passes"));
 
+			var input : hide.Element;
+			if (config != null) {
+				input = new hide.Element('<select field="passName">
+					<option value="all"}>All</option>
+					${[for(c in config) '<option value="${c.value}">${c.label}</option>'].join("")}
+				</select>');
+			}
+			else {
+				input = new hide.Element('<input field="passName"/>');
+			}
+			input.appendTo(passEl.find(".input"));
+
+			passEl.find('.inclusion').click(function(e) {
+				var v = s.inclusion.match(Inclusion.INCLUDE) ? Inclusion.EXCLUDE : Inclusion.INCLUDE;
+				function exec(undo : Bool) {
+					var newV = v;
+					var oldV = v.match(Inclusion.INCLUDE) ? Inclusion.EXCLUDE : Inclusion.INCLUDE;
+					s.inclusion = undo ? oldV : newV;
+
+					ctx.rebuildProperties();
+					ctx.rebuildPrefab(this, true);
+				}
+
+				exec(false);
+				ctx.properties.undo.change(Custom(exec));
+			});
+
 			passEl.find('.remove').click(function(e) {
 				var idx = selections.indexOf(s);
 				function exec(undo : Bool) {