Level3D: Add searchBox, steal from CDB

bin/cdb.css

@@ -220,32 +220,4 @@
 }
 .cdb .cdb-sheet td.t_file .preview:hover .previewContent {
   display: block;
-}
-.cdb .searchBox {
-  display: none;
-  width: 200px;
-  position: fixed;
-  top: 20px;
-  right: 0px;
-  background-color: black;
-  border: 1px solid #555;
-  border-top: none;
-  border-right: none;
-  border-bottom-left-radius: 5px;
-  padding: 5px;
-  color: #444;
-}
-.cdb .searchBox input {
-  width: 170px;
-  background-color: black;
-}
-.cdb .searchBox i {
-  cursor: pointer;
-  margin-left: 5px;
-  display: inline-block;
-  font-size: 18px;
-  color: #888;
-}
-.cdb .searchBox i:hover {
-  color: #EEE;
-}
+}

bin/style.css

@@ -303,6 +303,35 @@ input[type=checkbox]:checked:after {
 .hide-tabs > .tabs-header > div:hover {
   background-color: #282828;
 }
+.searchBox {
+  display: none;
+  width: 200px;
+  position: fixed;
+  top: 20px;
+  right: 0px;
+  background-color: black;
+  border: 1px solid #555;
+  border-top: none;
+  border-right: none;
+  border-bottom-left-radius: 5px;
+  padding: 5px;
+  color: #444;
+}
+.searchBox input {
+  width: 170px;
+  background-color: black;
+}
+.searchBox i {
+  cursor: pointer;
+  margin-left: 5px;
+  display: inline-block;
+  font-size: 18px;
+  color: #888;
+}
+.searchBox i:hover {
+  color: #EEE;
+}
+
 /* Properties */
 .hide-properties {
   flex: 0 0 300px;
@@ -416,6 +445,9 @@ div.lm_close_tab:hover {
 .jstree-icon {
   color: #aaa !important;
 }
+.jstree .filtered {
+  display: none;
+}
 /* Spectrum Color picker */
 div.sp-replacer {
   vertical-align: top;

hide/comp/IconTree.hx

@@ -179,4 +179,22 @@ class IconTree<T:{}> extends Component {
 		var el = (untyped root.jstree)('get_node', v.id, true)[0];
 		el.scrollIntoViewIfNeeded();
 	}
+
+	public function searchFilter( filter : String ) {
+		if( filter == "" ) filter = null;
+		if( filter != null ) filter = filter.toLowerCase();
+
+		var lines = root.find(".jstree-node");
+		lines.removeClass("filtered");
+		if( filter != null ) {
+			for( t in lines ) {
+				if( t.textContent.toLowerCase().indexOf(filter) < 0 )
+					t.classList.add("filtered");
+			}
+			while( lines.length > 0 ) {
+				lines = lines.filter(".list").not(".filtered").prev();
+				lines.removeClass("filtered");
+			}
+		}
+	}
 }

hide/view/Level3D.hx

@@ -244,6 +244,7 @@ class Level3D extends FileView {
 	var lightDirection = new h3d.Vector( 1, 2, -4 );
 	var tree : hide.comp.IconTree<PrefabElement>;
 
+	var searchBox : Element;
 	var curEdit : LevelEditContext;
 	var gizmo : Gizmo3D;
 
@@ -260,6 +261,7 @@ class Level3D extends FileView {
 		keys.register("cancel", deselect);
 		keys.register("duplicate", duplicate);
 		keys.register("delete", () -> deleteElements(curEdit.rootElements));
+		keys.register("search", showSearch);
 	}
 
 	override function getDefaultContent() {
@@ -293,7 +295,7 @@ class Level3D extends FileView {
 					<div class="tabs">
 						<div class="tab" name="Scene" icon="sitemap">
 							<div class="hide-block">
-								<div class="hide-list" style="min-height: 400px;">
+								<div class="hide-list scene-tree" style="min-height: 400px;">
 									<div class="tree"></div>
 								</div>
 							</div>
@@ -311,6 +313,21 @@ class Level3D extends FileView {
 		tree = new hide.comp.IconTree(root.find(".tree"));
 		tree.async = false;
 		currentVersion = undo.currentID;
+
+		var sceneTree = root.find(".scene-tree");
+		searchBox = new Element("<div>").addClass("searchBox").appendTo(sceneTree);
+		new Element("<input type='text'>").appendTo(searchBox).keydown(function(e) {
+			if( e.keyCode == 27 ) {
+				searchBox.find("i").click();
+				return;
+			}
+		}).keyup(function(e) {
+			tree.searchFilter(e.getThis().val());
+		});
+		new Element("<i>").addClass("fa fa-times-circle").appendTo(searchBox).click(function(_) {
+			tree.searchFilter(null);
+			searchBox.toggle();
+		});
 	}
 
 	function refresh( ?callb ) {
@@ -825,6 +842,11 @@ class Level3D extends FileView {
 		return context.shared.root3d;
 	}
 
+	function showSearch() {
+		searchBox.show();
+		searchBox.find("input").focus().select();
+	}
+
 	static function worldMat(obj: Object) {
 		if(obj.defaultTransform != null) {
 			var m = obj.defaultTransform.clone();