- allow tags on FXs in scene tree

- minor UI improvements on FX editor

bin/defaultProps.json

@@ -109,6 +109,10 @@
 		"h3d.shader.AnimatedTexture",
 		"h3d.shader.ColorAdd"],
 
+	"fx.tags": [
+		{ "id": "tag", "color": "#802000" }
+	],
+
 	// DomKit css files list
 	"domkit.css" : [],
 

bin/style.css

@@ -827,12 +827,19 @@ input[type=checkbox]:checked:after {
   height: 100%;
 }
 .fx-animpanel .tracks-header {
+  position: relative;
   background: #4a4a4a;
   text-align: left;
 }
-.fx-animpanel .tracks-header label {
-  margin-left: 4px;
-  color: white;
+.fx-animpanel .tracks-header .name {
+  padding: 1px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.fx-animpanel .tracks-header .abspath {
+  position: absolute;
+  opacity: 0.5;
+  left: 200px;
 }
 .fx-animpanel .tracks-header .addtrack {
   margin-left: 4px;
@@ -1205,8 +1212,8 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #add-menu #results div.group:hover {
-  background: #474747 !important;
-  color: #dadada !important;
+  background: #474747!important;
+  color: #dadada!important;
   box-shadow: none;
 }
 .graph-view #add-menu #results div > span:first-child {
@@ -1254,8 +1261,8 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #context-menu #options div.group:hover {
-  background: #474747 !important;
-  color: #dadada !important;
+  background: #474747!important;
+  color: #dadada!important;
   box-shadow: none;
 }
 .graph-view #context-menu #options div > span:first-child {

bin/style.less

@@ -910,11 +910,18 @@ input[type=checkbox] {
 	}
 
 	.tracks-header {
+		position: relative;
 		background: #4a4a4a;
 		text-align: left;
-		label {
-			margin-left: 4px;
-			color: white;
+		.name {
+			padding: 1px;
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+		.abspath {
+			position: absolute;
+			opacity: 0.5;
+			left: 200px;
 		}
 		.addtrack {
 			margin-left: 4px;

hide/comp/SceneEditor.hx

@@ -104,7 +104,7 @@ class SceneEditor {
 
 	var searchBox : Element;
 	var updates : Array<Float -> Void> = [];
-	
+
 	var hideGizmo = false;
 	var gizmo : hide.view.l3d.Gizmo;
 	static var customPivot : CustomPivot;
@@ -301,6 +301,49 @@ class SceneEditor {
 			tree.revealNode(obj);
 	}
 
+	function getAvailableTags(p: PrefabElement) : Array<{id: String, color: String}>{
+		return null;
+	}
+
+	public function getTag(p: PrefabElement) {
+		if(p.props != null) {
+			var tagId = Reflect.field(p.props, "tag");
+			if(tagId != null) {
+				var tags = getAvailableTags(p);
+				if(tags != null)
+					return Lambda.find(tags, t -> t.id == tagId);
+			}
+		}
+		return null;
+	}
+
+	public function setTag(p: PrefabElement, tag: String) {
+		if(p.props == null)
+			p.props = {};
+		var prevVal = getTag(p);
+		Reflect.setField(p.props, "tag", tag);
+		onPrefabChange(p, "tag");
+		undo.change(Field(p.props, "tag", prevVal), function() {
+			onPrefabChange(p, "tag");
+		});
+	}
+
+	function getTagMenu(p: PrefabElement) : Array<hide.comp.ContextMenu.ContextMenuItem> {
+		var tags = getAvailableTags(p);
+		if(tags == null) return null;
+		var cur = getTag(p);
+		return [for(tag in tags) {
+			label: tag.id,
+			click: function () {
+				if(cur == tag)
+					setTag(p, null);
+				else
+					setTag(p, tag.id);
+			},
+			checked: cur == tag
+		}];
+	}
+
 	function onSceneReady() {
 
 		tree.saveDisplayKey = view.saveDisplayKey + '/tree';
@@ -407,6 +450,12 @@ class SceneEditor {
 				menuItems.push({ label : "Enable", checked : enabled, click : function() setEnabled(curEdit.elements, !enabled) });
 			}
 
+			if(current != null) {
+				var menu = getTagMenu(current);
+				if(menu != null)
+					menuItems.push({ label : "Tag", menu: menu });
+			}
+
 			menuItems.push({ isSeparator : true, label : "" });
 			new hide.comp.ContextMenu(menuItems.concat(actionItems));
 		};
@@ -451,7 +500,7 @@ class SceneEditor {
 				}, 50);
 			}
 		}
-		tree.applyStyle = applyTreeStyle;
+		tree.applyStyle = function(p, el) applyTreeStyle(p, el);
 		selectObjects([]);
 		refresh();
 	}
@@ -873,16 +922,24 @@ class SceneEditor {
 
 		if(p != sceneData) {
 			var el = tree.getElement(p);
-			applyTreeStyle(p, el);
+			applyTreeStyle(p, el, pname);
 		}
 
 		applySceneStyle(p);
 	}
 
-	public function applyTreeStyle(p: PrefabElement, el: Element) {		
+	public function applyTreeStyle(p: PrefabElement, el: Element, ?pname: String) {
 		var obj3d  = p.to(Object3D);
 		el.toggleClass("disabled", !p.enabled);
-		el.find("a").first().toggleClass("favorite", isFavorite(p));
+		var aEl = el.find("a").first();
+		aEl.toggleClass("favorite", isFavorite(p));
+
+		var tag = getTag(p);
+
+		if(tag != null)
+			aEl.css("background", tag.color);
+		else if(pname == "tag")
+			aEl.css("background", "none");
 
 		if(obj3d != null) {
 			el.toggleClass("disabled", !obj3d.visible);
@@ -923,7 +980,7 @@ class SceneEditor {
 				});
 			}
 			lockTog.css({visibility: (isLocked(obj3d) ? "visible" : "hidden")});
-		} 
+		}
 	}
 
 	public function applySceneStyle(p: PrefabElement) {

hide/view/FXEditor.hx

@@ -137,6 +137,10 @@ private class FXSceneEditor extends hide.comp.SceneEditor {
 		});
 		return menu;
 	}
+
+	override function getAvailableTags(p:PrefabElement) {
+		return cast ide.currentConfig.get("fx.tags");
+	}
 }
 
 class FXEditor extends FileView {
@@ -292,7 +296,7 @@ class FXEditor extends FileView {
 			});
 
 			heapsScene.on("mousemove", function(e : js.jquery.Event) {
-				if (e.buttons == 4) { // middle button 
+				if (e.buttons == 4) { // middle button
 					if (lastPan == null) {
 						lastPan = new h2d.col.Point(e.clientX, e.clientY);
 						return;
@@ -301,7 +305,7 @@ class FXEditor extends FileView {
 						scene.s2d.children[0].x += e.clientX - lastPan.x;
 						scene.s2d.children[0].y += e.clientY - lastPan.y;
 					}
-					
+
 					lastPan = new h2d.col.Point(e.clientX, e.clientY);
 					updateGrid();
 				}
@@ -409,18 +413,24 @@ class FXEditor extends FileView {
 			e.preventDefault();
 			e.stopPropagation();
 		});
+
+		var wheelTimer : haxe.Timer;
 		timeline.on("mousewheel", function(e) {
 			var step = e.originalEvent.wheelDelta > 0 ? 1.0 : -1.0;
 			xScale *= Math.pow(1.125, step);
 			e.preventDefault();
 			e.stopPropagation();
 			refreshTimeline(false);
-			for(ce in curveEdits) {
-				ce.xOffset = xOffset;
-				ce.xScale = xScale;
-				ce.refresh();
-			}
-			afterPan(false);
+			if(wheelTimer != null)
+				wheelTimer.stop();
+			wheelTimer = haxe.Timer.delay(function() {
+				for(ce in curveEdits) {
+					ce.xOffset = xOffset;
+					ce.xScale = xScale;
+					ce.refresh();
+				}
+				afterPan(false);
+			}, 50);
 		});
 
 		selectMin = 0.0;
@@ -499,7 +509,7 @@ class FXEditor extends FileView {
 
 		statusText = new h2d.Text(hxd.res.DefaultFont.get(), scene.s2d);
 		statusText.setPosition(5, 5);
-		
+
 		updateGrid();
 	}
 
@@ -709,8 +719,10 @@ class FXEditor extends FileView {
 	}
 
 	function afterPan(anim: Bool) {
-		for(curve in curveEdits) {
-			curve.setPan(xOffset, curve.yOffset);
+		if(!anim) {
+			for(curve in curveEdits) {
+				curve.setPan(xOffset, curve.yOffset);
+			}
 		}
 		for(clb in afterPanRefreshes) {
 			clb(anim);
@@ -1073,6 +1085,17 @@ class FXEditor extends FileView {
 			return sect;
 		}
 
+		function getTagRec(elt : PrefabElement) {
+			var p = elt;
+			while(p != null) {
+				var tag = sceneEditor.getTag(p);
+				if(tag != null)
+					return tag;
+				p = p.parent;
+			}
+			return null;
+		}
+
 		for(sel in selection) {
 			for(curve in sel.flatten(Curve))
 				getSection(curve).curves.push(curve);
@@ -1082,12 +1105,18 @@ class FXEditor extends FileView {
 
 		for(sec in sections) {
 			var objPanel = new Element('<div>
-				<div class="tracks-header"><label>${upperCase(sec.elt.name)}</label><div class="addtrack fa fa-plus-circle"></div></div>
+				<div class="tracks-header">
+					<label class="name">${upperCase(sec.elt.name)}</label> <div class="addtrack fa fa-plus-circle"></div>
+					<label class="abspath">${sec.elt.getAbsPath()}</label>
+				</div>
 				<div class="tracks"></div>
 			</div>').appendTo(scrollPanel);
 			var addTrackEl = objPanel.find(".addtrack");
-			var objElt = Std.downcast(sec.elt, hrt.prefab.Object3D);
-			var shaderElt = Std.downcast(sec.elt, hrt.prefab.Shader);
+
+			var parentTag = getTagRec(sec.elt);
+			if(parentTag != null) {
+				objPanel.find(".name").css("background", parentTag.color);
+			}
 
 			addTrackEl.click(function(e) {
 				var menuItems = getNewTrackMenu(sec.elt);
@@ -1335,7 +1364,7 @@ class FXEditor extends FileView {
 			grid2d.moveTo(-2000, 0);
 			grid2d.lineTo(2000, 0);
 			grid2d.lineStyle(0);
-			
+
 			return;
 		}
 
@@ -1410,7 +1439,7 @@ class FXEditor extends FileView {
 			@:privateAccess grid2d.setPosition(scene.s2d.children[0].x, scene.s2d.children[0].y);
 		}
 
-		
+
 	}
 
 	function onUpdate3D(dt:Float) {

hide/view/l3d/Level3D.hx

@@ -114,9 +114,9 @@ private class Level3DSceneEditor extends hide.comp.SceneEditor {
 		parent.onSceneReady();
 	}
 
-	override function applyTreeStyle(p: PrefabElement, el: Element) {
-		super.applyTreeStyle(p, el);
-		parent.applyTreeStyle(p, el);
+	override function applyTreeStyle(p: PrefabElement, el: Element, ?pname: String) {
+		super.applyTreeStyle(p, el, pname);
+		parent.applyTreeStyle(p, el, pname);
 	}
 
 	override function applySceneStyle(p:PrefabElement) {
@@ -658,7 +658,7 @@ class Level3D extends FileView {
 		initDone = true;
 	}
 
-	function applyTreeStyle(p: PrefabElement, el: Element) {
+	function applyTreeStyle(p: PrefabElement, el: Element, pname: String) {
 		/*
 		var styles = ide.currentConfig.get("l3d.treeStyles");
 		var style: Dynamic = null;