Kill favorites and allow columns merge/hiding in l3d

bin/style.css

@@ -225,18 +225,23 @@ input[type=checkbox]:checked:after {
 .hide-scene-layer .jstree-container-ul {
   padding-right: 5px;
 }
-.prefabview .scenetree {
-  max-height: 350px;
+.scene-partition.reduced-columns .hide-scenetree {
+  max-height: 40%;
+}
+.scene-partition.reduced-columns .props-column {
+  max-height: 60%;
+  padding-bottom: 36px;
 }
 .hide-scenetree {
   flex: 1;
   background-color: #111;
   border: 1px solid #444;
-  width: 300px;
+  min-width: 300px;
   overflow-y: auto;
+  min-height: 350px;
 }
 .hide-scenetree .jstree {
-  width: 300px;
+  min-width: 300px;
   overflow-x: hidden;
 }
 .hide-scenetree .jstree-container-ul {
@@ -310,6 +315,11 @@ input[type=checkbox]:checked:after {
 .flex.vertical {
   flex-direction: column;
 }
+.scene-partition .show-cols-btn {
+  position: absolute;
+  margin-top: 2px;
+  right: 0px;
+}
 .hide-toolbar {
   flex: none;
   padding-top: 2px;
@@ -317,8 +327,30 @@ input[type=checkbox]:checked:after {
   background-color: #222222;
   display: inline-block;
 }
+.hide-toolbar .layout-btn {
+  position: absolute;
+  right: 31px;
+}
+.hide-toolbar .close-btn {
+  position: absolute;
+  right: 0px;
+}
+.hide-toolbar .toolbar-label {
+  margin-right: 5px;
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  padding: 2px;
+  text-align: center;
+  border-radius: 1px;
+  text-shadow: 1px 2px 2px black;
+}
+.hide-toolbar .toolbar-label > .icon {
+  vertical-align: center;
+}
 .hide-toolbar .button,
-.hide-toolbar .toggle {
+.hide-toolbar .toggle,
+.scene-partition .show-cols-btn {
   margin-right: 5px;
   display: inline-block;
   user-select: none;
@@ -339,7 +371,8 @@ input[type=checkbox]:checked:after {
   vertical-align: center;
 }
 .hide-toolbar .button:hover,
-.hide-toolbar .toggle:hover {
+.hide-toolbar .toggle:hover,
+.scene-partition .show-cols-btn:hover {
   color: white;
   border-color: white;
   background-color: #666;
@@ -529,6 +562,15 @@ input[type=checkbox]:checked:after {
   width: 100px;
 }
 /* Properties */
+.props-column {
+  height: 100%;
+  background-color: #111;
+  width: 320px;
+}
+.props-column .hide-toolbar {
+  width: 100%;
+  vertical-align: middle;
+}
 .hide-properties {
   padding: 10px;
   overflow: auto;
@@ -1581,10 +1623,6 @@ body.hide-subview .lm_controls {
 .jstree .hidden a {
   color: #555;
 }
-.jstree a.favorite {
-  color: white;
-  font-weight: bold;
-}
 .jstree .disabled a {
   color: #533 !important;
   display: inline;
@@ -1610,16 +1648,6 @@ body.hide-subview .lm_controls {
 .jstree-node {
   padding-right: 10px!important;
 }
-.hide-scene-outliner .favorites {
-  overflow-y: auto;
-  background: #111;
-}
-.hide-scene-outliner .favorites label {
-  font-weight: bold;
-}
-.hide-scene-outliner .favorites-tree {
-  padding: 4px;
-}
 .visibility-toggle,
 .visibility-large-toggle {
   position: absolute;

bin/style.less

@@ -239,19 +239,28 @@ input[type=checkbox] {
 
 }
 
-.prefabview .scenetree {
-	max-height : 350px;
+
+.scene-partition.reduced-columns {
+	.hide-scenetree {
+		max-height: 40%;
+	}
+
+	.props-column {
+		max-height: 60%;
+		padding-bottom: 36px;
+	}
 }
 
 .hide-scenetree {
 	flex: 1;
 	background-color : #111;
 	border : 1px solid #444;
-	width: 300px;
+	min-width: 300px;
 	overflow-y: auto;
+	min-height : 350px;
 
 	.jstree {
-		width: 300px;
+		min-width: 300px;
 		overflow-x: hidden;
 	}
 
@@ -338,6 +347,17 @@ input[type=checkbox] {
 	flex-direction: column;
 }
 
+.scene-partition .show-cols-btn {
+	&:extend(.hide-toolbar .button);
+	position: absolute;
+	margin-top: 2px;
+	right: 0px;
+
+	&:hover {
+		&:extend(.hide-toolbar .button:hover);
+	}
+}
+
 .hide-toolbar {
 
 	flex: none;
@@ -346,6 +366,30 @@ input[type=checkbox] {
 	background-color : rgb(34,34,34);
 	display: inline-block;
 
+	.layout-btn {
+		position: absolute;
+		right: 31px;
+	}
+
+	.close-btn {
+		position: absolute;
+		right: 0px;
+	}
+
+	.toolbar-label {
+		margin-right : 5px;
+		display: inline-block;
+		min-width : 20px;
+		height : 20px;
+		padding : 2px;
+		text-align: center;
+		border-radius: 1px;
+		text-shadow: 1px 2px 2px black;
+		>.icon {
+			vertical-align: center;
+		}
+	}
+
 	.button, .toggle {
 		margin-right : 5px;
 		display: inline-block;
@@ -570,6 +614,16 @@ input[type=checkbox] {
 }
 
 /* Properties */
+.props-column {
+	height : 100%;
+	background-color: #111;
+	width: 320px;
+
+	.hide-toolbar {
+		width: 100%;
+		vertical-align: middle;
+	}
+}
 
 .hide-properties {
 	//flex : 0 0 300px;
@@ -1781,11 +1835,6 @@ body.hide-subview {
 		}
 	}
 
-	a.favorite {
-		color: white;
-		font-weight: bold;
-	}
-
 	.disabled {
 		a {
 			color: #533 !important;
@@ -1821,19 +1870,6 @@ body.hide-subview {
 	padding-right: 10px!important;
 }
 
-.hide-scene-outliner {
-	.favorites {
-		overflow-y: auto;
-		label {
-			font-weight: bold;
-		}
-		background: #111;
-	}
-	.favorites-tree {
-		padding: 4px;
-	}
-}
-
 .visibility-toggle, .visibility-large-toggle {
 	position: absolute;
 	right: 4px;

hide/comp/SceneEditor.hx

@@ -137,7 +137,6 @@ typedef CustomPivot = { elt : PrefabElement, mesh : Mesh, locPos : Vector };
 class SceneEditor {
 
 	public var tree : hide.comp.IconTree<PrefabElement>;
-	public var favTree : hide.comp.IconTree<PrefabElement>;
 	public var scene : hide.comp.Scene;
 	public var properties : hide.comp.PropsEditor;
 	public var context(default,null) : hrt.prefab.Context;
@@ -162,7 +161,6 @@ class SceneEditor {
 	var ide : hide.Ide;
 	public var event(default, null) : hxd.WaitEvent;
 	var hideList : Map<PrefabElement, Bool> = new Map();
-	var favorites : Array<PrefabElement> = [];
 
 	var undo(get, null):hide.ui.UndoHistory;
 	function get_undo() { return view.undo; }
@@ -186,10 +184,6 @@ class SceneEditor {
 		tree.async = false;
 		tree.autoOpenNodes = false;
 
-		favTree = new hide.comp.IconTree();
-		favTree.async = false;
-		favTree.autoOpenNodes = false;
-
 		var sceneEl = new Element('<div class="heaps-scene"></div>');
 		scene = new hide.comp.Scene(view.config, null, sceneEl);
 		scene.editor = this;
@@ -253,20 +247,12 @@ class SceneEditor {
 						hideList.set(p, true);
 				}
 			}
-			var favList = @:privateAccess view.getDisplayState("favorites");
-			if(favList != null) {
-				for(p in all) {
-					if(favList.indexOf(p.getAbsPath(true)) >= 0)
-						favorites.push(p);
-				}
-			}
 		}
 	}
 
 	public function dispose() {
 		scene.dispose();
 		tree.dispose();
-		favTree.dispose();
 	}
 
 	function set_camera2D(b) {
@@ -465,34 +451,6 @@ class SceneEditor {
 			};
 			return r;
 		}
-		favTree.get = function (o:PrefabElement) {
-			if(o == null) {
-				return [for(f in favorites) makeItem(f, {
-					disabled: true
-				})];
-			}
-			return [];
-		}
-		favTree.allowRename = false;
-		favTree.init();
-		favTree.onAllowMove = function(_, _) {
-			return false;
-		};
-		favTree.onClick = function(e, evt) {
-			if(evt.ctrlKey) {
-				var sel = tree.getSelection();
-				sel.push(e);
-				selectElements(sel);
-				tree.revealNode(e);
-			}
-			else
-				selectElements([e]);
-		}
-		favTree.onDblClick = function(e) {
-			selectElements([e]);
-			tree.revealNode(e);
-			return true;
-		}
 		tree.get = function(o:PrefabElement) {
 			var objs = o == null ? sceneData.children : Lambda.array(o);
 			if( o != null && o.getHideProps().hideChildren != null ) {
@@ -525,7 +483,6 @@ class SceneEditor {
 				{ label : "New...", menu : newItems },
 			];
 			var actionItems : Array<hide.comp.ContextMenu.ContextMenuItem> = [
-				{ label : "Favorite", checked : current != null && isFavorite(current), click : function() setFavorite(current, !isFavorite(current)) },
 				{ label : "Rename", enabled : current != null, click : function() tree.editNode(current) },
 				{ label : "Delete", enabled : current != null, click : function() deleteElements(curEdit.rootElements) },
 				{ label : "Duplicate", enabled : current != null, click : duplicate.bind(false) },
@@ -567,7 +524,6 @@ class SceneEditor {
 			new hide.comp.ContextMenu(menuItems.concat(actionItems));
 		};
 		tree.element.parent().contextmenu(ctxMenu.bind(tree));
-		favTree.element.parent().contextmenu(ctxMenu.bind(favTree));
 		tree.allowRename = true;
 		tree.init();
 		tree.onClick = function(e, _) {
@@ -621,7 +577,6 @@ class SceneEditor {
 
 	public function refresh( ?mode: RefreshMode, ?callb: Void->Void) {
 		if(mode == null || mode == Full) refreshScene();
-		refreshFavs();
 		refreshTree(callb);
 	}
 
@@ -641,10 +596,6 @@ class SceneEditor {
 		});
 	}
 
-	function refreshFavs() {
-		favTree.refresh();
-	}
-
 	function refreshProps() {
 		selectElements(curEdit.elements, Nothing);
 	}
@@ -1213,7 +1164,6 @@ class SceneEditor {
 		var obj3d  = p.to(Object3D);
 		el.toggleClass("disabled", !p.enabled);
 		var aEl = el.find("a").first();
-		aEl.toggleClass("favorite", isFavorite(p));
 
 		var tag = getTag(p);
 
@@ -1886,26 +1836,6 @@ class SceneEditor {
 	function saveDisplayState() {
 		var state = [for (h in hideList.keys()) h.getAbsPath(true)];
 		@:privateAccess view.saveDisplayState("hideList", state);
-		var state = [for(f in favorites) f.getAbsPath(true)];
-		@:privateAccess view.saveDisplayState("favorites", state);
-	}
-
-	public function isFavorite(e: PrefabElement) {
-		return favorites.indexOf(e) >= 0;
-	}
-
-	public function setFavorite(e: PrefabElement, fav: Bool) {
-		if(fav && !isFavorite(e))
-			favorites.push(e);
-		else if(!fav && isFavorite(e))
-			favorites.remove(e);
-
-		var el = tree.getElement(e);
-		if(el != null)
-			applyTreeStyle(e, el);
-
-		refreshFavs();
-		saveDisplayState();
 	}
 
 	public function setVisible(elements : Array<PrefabElement>, visible: Bool) {

hide/view/FXEditor.hx

@@ -244,11 +244,7 @@ class FXEditor extends FileView {
 						</div>
 					</div>
 					<div class="hide-scene-outliner">
-						<div class="favorites" style="height:20%;">
-							<label>Favorites</label>
-							<div class="favorites-tree"></div>
-						</div>
-						<div style="height:80%;" class="flex vertical">
+						<div class="flex vertical">
 							<div class="hide-toolbar" style="zoom: 80%">
 								<div class="button collapse-btn" title="Collapse all">
 									<div class="icon fa fa-reply-all"></div>
@@ -275,7 +271,6 @@ class FXEditor extends FileView {
 		tabs = new hide.comp.Tabs(null,element.find(".tabs"));
 		sceneEditor = new FXSceneEditor(this, data);
 		element.find(".hide-scenetree").first().append(sceneEditor.tree.element);
-		element.find(".favorites-tree").first().append(sceneEditor.favTree.element);
 		element.find(".hide-scroll").first().append(sceneEditor.properties.element);
 		element.find(".heaps-scene").first().append(sceneEditor.scene.element);
 		element.resize(function(e) {
@@ -314,7 +309,6 @@ class FXEditor extends FileView {
 
 		currentVersion = undo.currentID;
 		sceneEditor.tree.element.addClass("small");
-		sceneEditor.favTree.element.addClass("small");
 
 		var timeline = element.find(".timeline");
 		var sMin = 0.0;

hide/view/l3d/Level3D.hx

@@ -312,46 +312,100 @@ class Level3D extends FileView {
 					<span class="tools-buttons"></span>
 					<span class="layer-buttons"></span>
 				</div>
-				<div style="display: flex; flex-direction: row; flex: 1; overflow: hidden;">
+
+				<div class="scene-partition" style="display: flex; flex-direction: row; flex: 1; overflow: hidden;">
 					<div class="heaps-scene"></div>
-					<div class="hide-scene-outliner">
-						<div class="favorites" style="height:20%;">
-							<label>Favorites</label>
-							<div class="favorites-tree"></div>
-						</div>
-						<div style="height:80%;" class="flex vertical">
-							<div class="hide-toolbar" style="zoom: 80%">
+
+					<div class="tree-column">
+						<div class="flex vertical">
+							<div class="hide-toolbar">
+								<div class="toolbar-label">
+									<div class="icon fa fa-sitemap"></div>
+									Scene
+								</div>
 								<div class="button collapse-btn" title="Collapse all">
 									<div class="icon fa fa-reply-all"></div>
 								</div>
+
+								<div class="button combine-btn layout-btn" title="Move to bottom of tree">
+									<div class="icon fa fa-compress"></div>
+								</div>
+								<div class="button separate-btn layout-btn" title="Move to own column">
+									<div class="icon fa fa-expand"></div>
+								</div>
+
+								<div class="button hide-cols-btn close-btn" title="Hide Tree & Props">
+									<div class="icon fa fa-chevron-right"></div>
+								</div>
 							</div>
+
 							<div class="hide-scenetree"></div>
 						</div>
 					</div>
-					<div class="tabs">
-						<div class="tab expand" name="Scene" icon="sitemap">
-							<div class="hide-scroll"></div>
-						</div>
-						<div class="tab expand" name="Properties" icon="cog">
-							<div class="level-props"></div>
+
+					<div class="props-column">
+						<div class="hide-toolbar">
+							<div class="toolbar-label">
+								<div class="icon fa fa-sitemap"></div>
+								Properties
+							</div>
 						</div>
+							<div class="hide-scroll"></div>
+					</div>
+
+					<div class="button show-cols-btn close-btn" title="Show Tree & Props">
+						<div class="icon fa fa-chevron-down"></div>
 					</div>
 				</div>
 			</div>
 		');
+
 		tools = new hide.comp.Toolbar(null,element.find(".tools-buttons"));
 		layerToolbar = new hide.comp.Toolbar(null,element.find(".layer-buttons"));
-		tabs = new hide.comp.Tabs(null,element.find(".tabs"));
 		currentVersion = undo.currentID;
 
 		levelProps = new hide.comp.PropsEditor(undo,null,element.find(".level-props"));
 		sceneEditor = new Level3DSceneEditor(this, data);
 		element.find(".hide-scenetree").first().append(sceneEditor.tree.element);
-		element.find(".favorites-tree").first().append(sceneEditor.favTree.element);
 		element.find(".hide-scroll").first().append(sceneEditor.properties.element);
 		element.find(".heaps-scene").first().append(sceneEditor.scene.element);
 		sceneEditor.tree.element.addClass("small");
-		sceneEditor.favTree.element.addClass("small");
+
+		element.find(".show-cols-btn").first().hide();
+		element.find(".show-cols-btn").first().click(function(_) {
+			element.find(".tree-column").first().show();
+			element.find(".props-column").first().show();
+			element.find(".show-cols-btn").first().hide();
+			@:privateAccess scene.window.checkResize();
+		});
+		element.find(".hide-cols-btn").first().click(function(_) {
+			element.find(".tree-column").first().hide();
+			element.find(".props-column").first().hide();
+			element.find(".show-cols-btn").first().show();
+			@:privateAccess scene.window.checkResize();
+		});
+		function setCombine(val) {
+			var fullscene = element.find(".scene-partition").first();
+			var props = element.find(".props-column").first();
+			fullscene.toggleClass("reduced-columns", val);
+			if( val ) {
+				element.find(".hide-scenetree").first().parent().append(props);
+				element.find(".combine-btn").first().hide();
+				element.find(".separate-btn").first().show();
+			} else {
+				fullscene.append(props);
+				element.find(".combine-btn").first().show();
+				element.find(".separate-btn").first().hide();
+			}
+			@:privateAccess
+			if( scene.window != null)
+				scene.window.checkResize();
+		}
+
+		element.find(".combine-btn").first().click((_) -> setCombine(true));
+		element.find(".separate-btn").first().click((_) -> setCombine(false));
+		setCombine(false);
+
 		element.find(".collapse-btn").click(function(e) {
 			sceneEditor.collapseTree();
 		});
@@ -370,7 +424,6 @@ class Level3D extends FileView {
 	}
 
 	public function onSceneReady() {
-		tabs.allowMask(scene);
 		tools.saveDisplayKey = "Level3D/toolbar";
 		tools.addButton("video-camera", "Perspective camera", () -> resetCamera(false));
 		tools.addButton("video-camera", "Top camera", () -> resetCamera(true)).find(".icon").css({transform: "rotateZ(90deg)"});