started components refactor

hide/comp/ColorPicker.hx

@@ -6,8 +6,9 @@ class ColorPicker extends Component {
 	var innerValue : Int;
 	var mask : Int;
 
-	public function new(root, ?alpha : Bool = false ) {
-		super(root);
+	public function new( ?alpha : Bool = false, ?parent : Element, ?root : Element ) {
+		if( root == null ) root = new Element("<input>");
+		super(parent,root);
 		mask = alpha ? -1 : 0xFFFFFF;
 		(untyped root.spectrum)({
 			showInput : true,

hide/comp/Component.hx

@@ -4,12 +4,20 @@ class Component {
 
 	var ide : hide.Ide;
 	public var name(get, never) : String;
-	public var root : Element;
+	public var root(default,null) : Element;
 	public var saveDisplayKey : String;
 
-	public function new(root) {
+	function new(parent:Element,root:Element) {
 		ide = hide.Ide.inst;
+		if( root == null )
+			root = new Element('<div>');
 		this.root = root;
+		if( parent != null )
+			parent.append(root);
+	}
+
+	public function remove() {
+		root.remove();
 	}
 
 	@:final function get_name() return Type.getClassName(Type.getClass(this));

hide/comp/CurveEditor.hx

@@ -26,15 +26,15 @@ class CurveEditor extends Component {
 
 	var selectedKeys: Array<hide.prefab.Curve.CurveKey> = [];
 
-	public function new(parent, undo) {
-		super(parent);
+	public function new(undo, ?parent) {
+		super(parent,null);
 		this.undo = undo;
-		var div = new Element("<div></div>").appendTo(parent);
-		div.attr({ tabindex: "1" });
-		div.css({ width: "100%", height: "100%" });
-		div.focus();
-		svg = new hide.comp.SVG(div);
-		var root = svg.element;
+		root.attr({ tabindex: "1" });
+		root.css({ width: "100%", height: "100%" });
+		root.focus();
+		svg = new hide.comp.SVG(root);
+		var div = this.root;
+		var root = svg.root;
 
 		gridGroup = svg.group(root, "grid");
 		graphGroup = svg.group(root, "graph");
@@ -313,8 +313,8 @@ class CurveEditor extends Component {
 	}
 
 	public function refreshGrid() {
-		width = Math.round(svg.element.width());
-		height = Math.round(svg.element.height());
+		width = Math.round(svg.root.width());
+		height = Math.round(svg.root.height());
 
 		gridGroup.empty();
 		var minX = Math.floor(ixt(0));

hide/comp/FileSelect.hx

@@ -5,8 +5,11 @@ class FileSelect extends Component {
 	var extensions : Array<String>;
 	public var path(default, set) : String;
 
-	public function new(root, extensions) {
-		super(root);
+	public function new(extensions,?parent,?root) {
+		if( root == null )
+			root = new Element("<input type='file'>");
+		super(parent,root);
+		root.addClass("file");
 		this.extensions = extensions;
 		path = null;
 		root.mousedown(function(e) {

hide/comp/IconTree.hx

@@ -27,6 +27,11 @@ class IconTree<T:{}> extends Component {
 	public var allowRename : Bool;
 	public var async : Bool = false;
 
+	public function new(?parent,?root) {
+		super(parent,root);
+		this.root.addClass("tree");
+	}
+
 	public dynamic function get( parent : Null<T> ) : Array<IconTreeItem<T>> {
 		return [{ value : null, text : "get()", children : true }];
 	}
@@ -75,7 +80,7 @@ class IconTree<T:{}> extends Component {
 				c.children = cast makeContent(c);
 			}
 		}
-		return content;		
+		return content;
 	}
 
 	public function init() {

hide/comp/Modal.hx

@@ -0,0 +1,13 @@
+package hide.comp;
+
+class Modal extends Component {
+
+    public var content(default,null) : Element;
+
+    public function new(?parent,?root) {
+        super(parent,root);
+        this.root.addClass('hide-modal');
+        content = new Element("<div class='content'></div>").appendTo(this.root);
+    }
+
+}

hide/comp/PropsEditor.hx

@@ -15,9 +15,9 @@ class PropsEditor extends Component {
 	public var lastChange : Float = 0.;
 	public var fields(default, null) : Array<PropsField>;
 
-	public function new(root,?undo) {
-		super(root);
-		root.addClass("hide-properties");
+	public function new(?undo,?parent,?root) {
+		super(parent,root);
+		this.root.addClass("hide-properties");
 		this.undo = undo == null ? new hide.ui.UndoHistory() : undo;
 		fields = [];
 	}
@@ -176,7 +176,7 @@ class PropsField extends Component {
 	var range : hide.comp.Range;
 
 	public function new(props, f, context) {
-		super(f);
+		super(null,f);
 		viewRoot = root.closest(".lm_content");
 		this.props = props;
 		this.context = context;
@@ -199,8 +199,7 @@ class PropsField extends Component {
 			});
 			return;
 		case "texture":
-			f.addClass("file");
-			tselect = new hide.comp.TextureSelect(f);
+			tselect = new hide.comp.TextureSelect(null,f);
 			tselect.value = current;
 			tselect.onChange = function() {
 				undo(function() {
@@ -215,8 +214,7 @@ class PropsField extends Component {
 			}
 			return;
 		case "texturepath":
-			f.addClass("file");
-			tselect = new hide.comp.TextureSelect(f);
+			tselect = new hide.comp.TextureSelect(null,f);
 			tselect.path = current;
 			tselect.onChange = function() {
 				undo(function() {
@@ -231,8 +229,7 @@ class PropsField extends Component {
 			}
 			return;
 		case "model":
-			f.addClass("file");
-			fselect = new hide.comp.FileSelect(f, ["hmd", "fbx"]);
+			fselect = new hide.comp.FileSelect(["hmd", "fbx"], null, f);
 			fselect.path = current;
 			fselect.onChange = function() {
 				undo(function() {
@@ -247,7 +244,7 @@ class PropsField extends Component {
 			};
 			return;
 		case "range":
-			range = new hide.comp.Range(f);
+			range = new hide.comp.Range(null,f);
 			range.value = current;
 			range.onChange = function(temp) {
 				tempChange = temp;

hide/comp/Range.hx

@@ -16,20 +16,21 @@ class Range extends Component {
 	var inputView : Element;
 	var scale : Float;
 
-	public function new(f:Element) {
-		f.wrap('<div class="hide-range"/>');
-		var p = f.parent();
-		super(p);
+	public function new(?parent:Element,?root:Element) {
+		if( root == null )
+			root = new Element('<input type="range">');
+		super(parent,root);
+
+		this.f = root;
+		root = root.wrap('<div class="hide-range"/>').parent();
 
-		this.f = f;
 		if( f.attr("step") == null )
 			f.attr("step", "any");
 
-
 		scale = Std.parseFloat(f.attr("scale"));
 		if( Math.isNaN(scale) ) scale = 1.;
 
-		inputView = new Element('<input type="text">').appendTo(p);
+		inputView = new Element('<input type="text">').appendTo(root);
 		originMin = Std.parseFloat(f.attr("min"));
 		originMax = Std.parseFloat(f.attr("max"));
 		if( originMin == null || Math.isNaN(originMin) ) originMin = 0;
@@ -42,7 +43,7 @@ class Range extends Component {
 		else
 			current = 0;
 
-		p.parent().prev("dt").contextmenu(function(e) {
+		root.parent().prev("dt").contextmenu(function(e) {
 			e.preventDefault();
 			new ContextMenu([
 				{ label : "Reset", click : reset },

hide/comp/SVG.hx

@@ -4,25 +4,20 @@ import hide.Element;
 class SVG extends Component {
 
 	var document = null;
-	public var element(default, null) : hide.Element = null;
 
-	public function new(root: hide.Element) {
-		super(root);
-		document = root[0].ownerDocument;
-
-		var e = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-		element = new Element(e);
-		element.attr("width", "100%");
-		element.attr("height", "100%");
-		root.append(element);
+	public function new(?parent:Element,?root: hide.Element) {
+		document = parent == null ? js.Browser.document : parent[0].ownerDocument;
+		super(parent,new Element(document.createElementNS('http://www.w3.org/2000/svg', 'svg')));
+		root.attr("width", "100%");
+		root.attr("height", "100%");
 	}
 
 	public function clear() {
-		element.empty();
+		root.empty();
 	}
 
 	public function add(el: Element) {
-		element.append(el);
+		root.append(el);
 	}
 
 	public function make(?parent: Element, name: String, ?attr: Dynamic, ?style: Dynamic) {
@@ -64,7 +59,7 @@ class SVG extends Component {
 			g.addClass(className);
 		return g;
 	}
-	
+
 	// public function text(x: Float, y: Float, text: String, ?style: Dynamic) {
 	// 	var e = make("text", {x:x, y:y}, style);
 	// 	e.text(text);

hide/comp/Scene.hx

@@ -70,8 +70,9 @@ class Scene extends Component implements h3d.IDrawable {
 	public var speed : Float = 1.0;
 	public var visible(default, null) : Bool = true;
 
-	public function new(root) {
-		super(root);
+	public function new(?parent,?root) {
+		super(parent,root);
+		root = this.root;
 		root.addClass("hide-scene-container");
 		canvas = cast new Element("<canvas class='hide-scene' style='width:100%;height:100%'/>").appendTo(root)[0];
 		canvas.addEventListener("mousemove",function(_) canvas.focus());

hide/comp/SceneEditor.hx

@@ -49,7 +49,7 @@ class SceneEditorContext extends hide.prefab.EditContext {
 					<div class="group" name="Properties ${sheet.name.split('@').pop()}">
 					</div>
 				'),this);
-				var editor = new hide.comp.cdb.ObjEditor(props.find(".group .content"), sheet, e.props);
+				var editor = new hide.comp.cdb.ObjEditor(sheet, e.props, props.find(".group .content"));
 				editor.undo = properties.undo;
 				editor.onChange = function(pname) {
 					onChange(e, 'props.$pname');
@@ -101,14 +101,13 @@ class SceneEditor {
 		event = new hxd.WaitEvent();
 
 		var propsEl = new Element('<div class="props"></div>');
-		properties = new hide.comp.PropsEditor(propsEl, undo);
+		properties = new hide.comp.PropsEditor(undo,null,propsEl);
 
-		var treeEl = new Element('<div class="tree"></div>');
-		tree = new hide.comp.IconTree(treeEl);
+		tree = new hide.comp.IconTree();
 		tree.async = false;
 
 		var sceneEl = new Element('<div class="scene"></div>');
-		scene = new hide.comp.Scene(sceneEl);
+		scene = new hide.comp.Scene(null, sceneEl);
 		scene.onReady = onSceneReady;
 
 		view.keys.register("copy", onCopy);
@@ -518,7 +517,7 @@ class SceneEditor {
 				finish = true;
 			}
 
-			if(K.isReleased(K.MOUSE_LEFT) || K.isPressed(K.MOUSE_LEFT)) {			
+			if(K.isReleased(K.MOUSE_LEFT) || K.isPressed(K.MOUSE_LEFT)) {
 				var contexts = context.shared.contexts;
 				var all = contexts.keys();
 				var inside = [];

hide/comp/Scrollable.hx

@@ -0,0 +1,10 @@
+package hide.comp;
+
+class Scrollable extends Component {
+
+    public function new(?parent,?root) {
+        super(parent,root);
+        this.root.addClass("hide-scrollable");
+    }
+
+}

hide/comp/Tabs.hx

@@ -5,10 +5,10 @@ class Tabs extends Component {
 	public var currentTab(default, set) : Element;
 	var header : Element;
 
-	public function new(root) {
-		super(root);
-		root.addClass("hide-tabs");
-		header = new Element("<div>").addClass("tabs-header").prependTo(root);
+	public function new(?parent,?root) {
+		super(parent,root);
+		this.root.addClass("hide-tabs");
+		header = new Element("<div>").addClass("tabs-header").prependTo(this.root);
 		syncTabs();
 		currentTab = new Element(getTabs()[0]);
 	}

hide/comp/TextureSelect.hx

@@ -6,10 +6,15 @@ class TextureSelect extends FileSelect {
 	public var area(default, set) : { x : Int, y : Int, width : Int, height : Int };
 	var preview : Element;
 
-	public function new(root) {
+	public function new(?parent,?root) {
 		preview = new Element("<div class='texture-preview'>");
+		super(["jpg", "jpeg", "gif", "png"], parent, root);
 		preview.insertAfter(root);
-		super(root, ["jpg", "jpeg", "gif", "png"]);
+	}
+
+	override function remove() {
+		super.remove();
+		preview.remove();
 	}
 
 	function set_area(v) {

hide/comp/TileSelector.hx

@@ -0,0 +1,50 @@
+package hide.comp;
+
+class TileSelector extends Component {
+
+    public var file(default,set) : String;
+    public var size(default,set) : Int;
+    public var value : Null<{ x : Int, y : Int, width : Int, height : Int }>;
+    public var allowRectSelect(default,set) : Bool;
+    public var allowSizeSelect(default,set) : Bool;
+
+    public function new(file,size,?parent,?root) {
+        super(parent,root);
+        this.root.addClass("hide-tileselect");
+        this.file = file;
+        this.size = size;
+    }
+
+    function set_file(file) {
+        this.file = file;
+        rebuild();
+        return file;
+    }
+
+    function set_size(size) {
+        this.size = size;
+        rebuild();
+        return size;
+    }
+
+    function set_allowRectSelect(b) {
+        allowRectSelect = b;
+        rebuild();
+        return b;
+    }
+
+    function set_allowSizeSelect(b) {
+        allowSizeSelect = b;
+        rebuild();
+        return b;
+    }
+
+    function rebuild() {
+        root.html('<div class="tile" style="background-image:url(\'file://${ide.getPath(file)}\')"></div>');
+        root.click(function(e) e.stopPropagation());
+    }
+
+    public dynamic function onChange() {
+    }
+
+}

hide/comp/Toolbar.hx

@@ -14,9 +14,9 @@ typedef ToolSelect<T> = {
 
 class Toolbar extends Component {
 
-	public function new(root) {
-		super(root);
-		root.addClass("hide-toolbar");
+	public function new(?parent,?root) {
+		super(parent,root);
+		this.root.addClass("hide-toolbar");
 	}
 
 	public function addButton( icon : String, ?label : String, ?onClick : Void -> Void ) {
@@ -48,9 +48,7 @@ class Toolbar extends Component {
 	}
 
 	public function addColor( label : String, onChange : Int -> Void, ?alpha : Bool, ?defValue = 0 ) {
-		var e = new Element('<input>');
-		e.appendTo(root);
-		var color = new hide.comp.ColorPicker(e, alpha);
+		var color = new hide.comp.ColorPicker(alpha, root);
 		color.onChange = function(move) {
 			if( !move ) this.saveDisplayState("color:" + label, color.value);
 			onChange(color.value);
@@ -82,9 +80,8 @@ class Toolbar extends Component {
 	}
 
 	public function addRange( label : String, onChange : Float -> Void, ?defValue = 0., min = 0., max = 1. ) {
-		var r = new hide.comp.Range(new Element('<input title="$label" type="range" min="$min" max="$max" value="$defValue">'));
+		var r = new hide.comp.Range(root,new Element('<input title="$label" type="range" min="$min" max="$max" value="$defValue">'));
 		r.onChange = function(_) onChange(r.value);
-		r.root.appendTo(root);
 		return r;
 	}
 

hide/comp/cdb/Cell.hx

@@ -15,7 +15,7 @@ class Cell extends Component {
 	public var table(get, never) : Table;
 
 	public function new( root : Element, line : Line, column : cdb.Data.Column ) {
-		super(root);
+		super(null,root);
 		this.line = line;
 		this.editor = line.table.editor;
 		this.column = column;
@@ -314,9 +314,7 @@ class Cell extends Component {
 			s.on("select2:close", function(_) closeEdit());
 		case TColor:
 			var modal = new Element("<div>").addClass("hide-modal").appendTo(root);
-			var e = new Element("<input>");
-			root.append(e);
-			var color = new ColorPicker(e);
+			var color = new ColorPicker(root);
 			color.value = currentValue;
 			color.open();
 			color.onChange = function(drag) {
@@ -324,7 +322,7 @@ class Cell extends Component {
 			};
 			color.onClose = function() {
 				setValue(color.value);
-				e.remove();
+				color.remove();
 				closeEdit();
 			};
 			modal.click(function(_) color.close());

hide/comp/cdb/Editor.hx

@@ -19,8 +19,8 @@ class Editor extends Component {
 	public var keys : hide.ui.Keys;
 	public var undo : hide.ui.UndoHistory;
 
-	public function new(root, sheet) {
-		super(root);
+	public function new(sheet,?parent) {
+		super(parent,null);
 		this.undo = new hide.ui.UndoHistory();
 		this.sheet = sheet;
 		root.attr("tabindex", 0);

hide/comp/cdb/Line.hx

@@ -10,7 +10,7 @@ class Line extends Component {
 	public var subTable : SubTable;
 
 	public function new(table, columns, index, root) {
-		super(root);
+		super(null,root);
 		this.table = table;
 		this.index = index;
 		this.columns = columns;

hide/comp/cdb/ObjEditor.hx

@@ -4,12 +4,12 @@ class ObjEditor extends Editor {
 
     public dynamic function onChange(propName : String) {}
 
-    public function new( root : Element, sheet : cdb.Sheet, obj : {} ) {
+    public function new( sheet : cdb.Sheet, obj : {}, ?parent : Element ) {
         var sheetData = Reflect.copy(@:privateAccess sheet.sheet);
         sheetData.lines = [for( i in 0...sheet.columns.length ) obj];
         var pseudoSheet = new cdb.Sheet(sheet.base, sheetData);
         this.displayMode = AllProperties;
-        super(root, pseudoSheet);
+        super(pseudoSheet, parent);
     }
 
     override function addChanges( changes : cdb.Database.Changes ) {

hide/comp/cdb/Table.hx

@@ -15,7 +15,7 @@ class Table extends Component {
 	public var displayMode(default,null) : DisplayMode;
 
 	public function new(editor, sheet, root, mode) {
-		super(root);
+		super(null,root);
 		this.displayMode = mode;
 		this.editor = editor;
 		this.sheet = sheet;

hide/prefab/l3d/Layer.hx

@@ -56,7 +56,7 @@ class Layer extends Object3D {
 			ctx.onChange(this, pname);
 		});
 		var colorInput = props.find('input[name="colorVal"]');
-		var picker = new hide.comp.ColorPicker(colorInput, false);
+		var picker = new hide.comp.ColorPicker(false,null,colorInput);
 		picker.value = color;
 		picker.onChange = function(move) {
 			if(!move) {

hide/ui/View.hx

@@ -25,7 +25,8 @@ class View<T> extends hide.comp.Component {
 	var contentHeight(get,never) : Int;
 
 	public function new(state:T) {
-		super(null);
+		super(null,null);
+		root = null;
 		this.state = state;
 		ide = Ide.inst;
 	}

hide/view/CdbTable.hx

@@ -20,7 +20,7 @@ class CdbTable extends hide.ui.View<{ path : String }> {
 			return;
 		}
 		root.addClass("hide-scroll");
-		editor = new hide.comp.cdb.Editor(root, sheet);
+		editor = new hide.comp.cdb.Editor(sheet,root);
 		editor.undo = undo;
 		undo.onChange = function() {
 			editor.save();

hide/view/FXScene.hx

@@ -157,8 +157,8 @@ class FXScene extends FileView {
 					</div>
 				</div>
 			</div>');
-		tools = new hide.comp.Toolbar(root.find(".toolbar"));
-		tabs = new hide.comp.Tabs(root.find(".tabs"));
+		tools = new hide.comp.Toolbar(null,root.find(".toolbar"));
+		tabs = new hide.comp.Tabs(null,root.find(".tabs"));
 		sceneEditor = new FXSceneEditor(this, context, data);
 		root.find(".hide-scene-tree").first().append(sceneEditor.tree.root);
 		root.find(".tab").first().append(sceneEditor.properties.root);
@@ -339,9 +339,8 @@ class FXScene extends FileView {
 				</div>');
 				var trackToggle = trackEl.find(".track-toggle");
 				tracksEl.append(trackEl);
-				
-				var curveEl = trackEl.find(".curve");
-				var curveEdit = new hide.comp.CurveEditor(curveEl, this.undo);
+
+				var curveEdit = new hide.comp.CurveEditor(this.undo, trackEl.find(".curve"));
 				var cpath = curve.getAbsPath();
 				var trackKey = "trackVisible:" + cpath;
 				var expand = getDisplayState(trackKey) == true;
@@ -357,7 +356,7 @@ class FXScene extends FileView {
 						icon.removeClass("fa-angle-right").addClass("fa-angle-down");
 					else
 						icon.removeClass("fa-angle-down").addClass("fa-angle-right");
-					curveEl.toggleClass("hidden", !expand);
+					curveEdit.root.toggleClass("hidden", !expand);
 				}
 				trackToggle.click(function(e) {
 					expand = !expand;

hide/view/FileTree.hx

@@ -61,7 +61,7 @@ class FileTree extends FileView {
 		if( state.path == null ) return;
 
 		var panel = new Element("<div class='hide-scroll'>").appendTo(root);
-		tree = new hide.comp.IconTree(panel);
+		tree = new hide.comp.IconTree(null,panel);
 		tree.async = true;
 		tree.saveDisplayKey = "FileTree:" + getPath().split("\\").join("/").substr(0,-1);
 		tree.get = function(path) {

hide/view/Model.hx

@@ -34,11 +34,11 @@ class Model extends FileView {
 				</div>
 			</div>
 		');
-		tools = new hide.comp.Toolbar(root.find(".toolbar"));
+		tools = new hide.comp.Toolbar(null,root.find(".toolbar"));
 		overlay = root.find(".hide-scene-layer .tree");
-		properties = new hide.comp.PropsEditor(root.find(".props"), undo);
+		properties = new hide.comp.PropsEditor(undo, null, root.find(".props"));
 		properties.saveDisplayKey = "Model";
-		scene = new hide.comp.Scene(root.find(".scene"));
+		scene = new hide.comp.Scene(null,root.find(".scene"));
 		scene.onReady = init;
 	}
 

hide/view/Particles2D.hx

@@ -26,9 +26,9 @@ class Particles2D extends FileView {
 				<div class="props"></div>
 			</div>
 		');
-		properties = new hide.comp.PropsEditor(root.find(".props"), undo);
+		properties = new hide.comp.PropsEditor(undo, null, root.find(".props"));
 		properties.saveDisplayKey = "particles2D";
-		scene = new hide.comp.Scene(root.find(".scene"));
+		scene = new hide.comp.Scene(null,root.find(".scene"));
 		scene.onReady = init;
 	}
 

hide/view/Particles3D.hx

@@ -22,9 +22,9 @@ class Particles3D extends FileView {
 				<div class="props"></div>
 			</div>
 		');
-		properties = new hide.comp.PropsEditor(root.find(".props"), undo);
+		properties = new hide.comp.PropsEditor(undo, null, root.find(".props"));
 		properties.saveDisplayKey = "particles3D";
-		scene = new hide.comp.Scene(root.find(".scene"));
+		scene = new hide.comp.Scene(null,root.find(".scene"));
 		scene.onReady = init;
 		scene.onUpdate = update;
 	}

hide/view/Prefab.hx

@@ -127,8 +127,8 @@ class Prefab extends FileView {
 				</div>
 			</div>
 		');
-		tools = new hide.comp.Toolbar(root.find(".toolbar"));
-		tabs = new hide.comp.Tabs(root.find(".tabs"));
+		tools = new hide.comp.Toolbar(null,root.find(".toolbar"));
+		tabs = new hide.comp.Tabs(null,root.find(".tabs"));
 		sceneEditor = new PrefabSceneEditor(this, context, data);
 		root.find(".hide-scene-tree").first().append(sceneEditor.tree.root);
 		root.find(".tab").first().append(sceneEditor.properties.root);

hide/view/l3d/Level3D.hx

@@ -297,12 +297,12 @@ class Level3D extends FileView {
 				</div>
 			</div>
 		');
-		tools = new hide.comp.Toolbar(root.find(".tools-buttons"));
-		layerToolbar = new hide.comp.Toolbar(root.find(".layer-buttons"));
-		tabs = new hide.comp.Tabs(root.find(".tabs"));
+		tools = new hide.comp.Toolbar(null,root.find(".tools-buttons"));
+		layerToolbar = new hide.comp.Toolbar(null,root.find(".layer-buttons"));
+		tabs = new hide.comp.Tabs(null,root.find(".tabs"));
 		currentVersion = undo.currentID;
 
-		levelProps = new hide.comp.PropsEditor(root.find(".level-props"), undo);
+		levelProps = new hide.comp.PropsEditor(undo,null,root.find(".level-props"));
 		sceneEditor = new Level3DSceneEditor(this, context, data);
 		sceneEditor.addSearchBox(root.find(".hide-scene-tree").first());
 		root.find(".hide-scene-tree").first().append(sceneEditor.tree.root);