various inspect fixes, added ResPanel

hxd/inspect/Inspector.hx

@@ -63,6 +63,7 @@ class Inspector {
 	var rootNodes : Array<Node>;
 
 	public var scenePanel : ScenePanel;
+	public var resPanel : ResPanel;
 	var propsPanel : Panel;
 	var logPanel : Panel;
 	var panelList : Array<{ name : String, create : Void -> Panel, p : Panel } >;
@@ -215,28 +216,30 @@ class Inspector {
 		scenePanel = new ScenePanel("s3d",scene);
 		propsPanel = new Panel("props","Properties");
 		logPanel = new Panel("log", "Log");
+		resPanel = new ResPanel("res", hxd.res.Loader.currentInstance);
 
-		scenePanel.dock(Left, 0.2);
+
+		resPanel.dock(Left, 0.2);
+		scenePanel.dock(Fill, null, resPanel);
 		logPanel.dock(Down, 0.3);
 		propsPanel.dock(Down, 0.5, scenePanel);
+
 		addPanel("Scene", function() return scenePanel);
 		addPanel("Properties", function() return propsPanel);
+		addPanel("Resources", function() return resPanel);
 		addPanel("Log", function() return logPanel);
 	}
 
 	function load() {
-		try {
-		hxd.File.browse(function(b) {
-			savedFile = b.fileName;
-			b.load(function(bytes) {
+		jroot.special("fileSelect", [savedFile, "js"], function(newPath) {
+			if( newPath == null ) return true;
+			hxd.File.load(newPath,function(bytes) {
+				savedFile = newPath;
 				resetDefaults();
 				loadProps(bytes.toString());
 			});
-
-		},{ defaultPath : savedFile, fileTypes : [ { name:"Scene Props", extensions:["js"] } ] } );
-		} catch( e : Dynamic ) {
-			// already open
-		}
+			return true;
+		});
 	}
 
 	public function resetDefaults() {
@@ -288,11 +291,10 @@ class Inspector {
 			Reflect.setField(o, path[0], state.get(s).current);
 		}
 		var js = haxe.Json.stringify(o, null, "\t");
-		try {
-			hxd.File.saveAs(haxe.io.Bytes.ofString(js), { defaultPath : savedFile, saveFileName : function(name) savedFile = name } );
-		} catch( e : Dynamic ) {
-			// already open
-		}
+		jroot.special("fileSave", [savedFile, "js", haxe.io.Bytes.ofString(js)], function(path) {
+			if( path != null ) savedFile = path;
+			return true;
+		});
 	}
 
 	public function sync() {

hxd/inspect/PropManager.hx

@@ -378,7 +378,10 @@ class PropManager extends cdb.jq.Client {
 			});
 		case PEnum(_, tenum, get, set):
 			jprop.text(get());
-			j.dblclick(function(_) {
+			var delay = false;
+			jprop.click(function(_) {
+
+				if( delay ) return;
 
 				var input = J("<select>");
 				var cur = (get() : EnumValue).getIndex();
@@ -404,11 +407,13 @@ class PropManager extends cdb.jq.Client {
 					}
 					input.remove();
 					jprop.text(get());
+					delay = true;
+					haxe.Timer.delay(function() delay = false, 200);
 				});
 			});
 		case PInt(_, get, set):
 			jprop.text("" + get());
-			j.dblclick(function(_) editValue(jprop,function() return "" + get(),
+			jprop.click(function(_) editValue(jprop,function() return "" + get(),
 				function(s) {
 					var i = Std.parseInt(s);
 					if( i != null ) {
@@ -440,7 +445,7 @@ class PropManager extends cdb.jq.Client {
 			});
 		case PFloat(_, get, set):
 			jprop.text("" + get());
-			j.dblclick(function(_) editValue(jprop,function() return "" + get(),
+			jprop.click(function(_) editValue(jprop,function() return "" + get(),
 				function(s) {
 					var f = Std.parseFloat(s);
 					if( !Math.isNaN(f) ) {
@@ -476,7 +481,7 @@ class PropManager extends cdb.jq.Client {
 			for( i in 0...values.length ) {
 				var jv = J("<td>").appendTo(jt);
 				jv.text("" + values[i]);
-				jv.dblclick(function(_) editValue(jv,function() return "" + values[i],
+				jv.click(function(_) editValue(jv,function() return "" + values[i],
 					function(s) {
 						var f = Std.parseFloat(s);
 						if( !Math.isNaN(f) ) {
@@ -511,7 +516,7 @@ class PropManager extends cdb.jq.Client {
 		case PString(_, get, set):
 			var cur = get();
 			jprop.text("" + cur);
-			j.dblclick(function(_) editValue(jprop, get, function(s) {
+			jprop.click(function(_) editValue(jprop, get, function(s) {
 				addHistory(path, cur, s);
 				cur = s;
 				set(cur);
@@ -523,7 +528,7 @@ class PropManager extends cdb.jq.Client {
 				if( !alpha ) cur &= 0xFFFFFF;
 				jprop.html('<div class="color" style="background:#${StringTools.hex(cur&0xFFFFFF,6)}"></div>');
 			}
-			jprop.dblclick(function(_) {
+			jprop.click(function(_) {
 				jprop.special("colorPick", [get().toColor(), alpha], function(c) {
 					var color = h3d.Vector.fromColor(c.color);
 					if( c.done ) {
@@ -542,7 +547,7 @@ class PropManager extends cdb.jq.Client {
 			var isLoaded = false;
 			function init() {
 				var t = get();
-				var filePath = getTexturePath(t, true);
+				filePath = getTexturePath(t, true);
 				if( filePath == null ) {
 					if( t == null )
 						jprop.text("");
@@ -565,9 +570,8 @@ class PropManager extends cdb.jq.Client {
 			}
 			init();
 
-			jprop.dblclick(function(_) {
+			function onTextureSelect(_) {
 				jprop.special("fileSelect", [filePath, "png,jpg,jpeg,gif"], function(newPath) {
-
 					if( newPath == null ) return true;
 
 					hxd.File.load(newPath, function(data) {
@@ -583,7 +587,14 @@ class PropManager extends cdb.jq.Client {
 
 					return true;
 				});
-			});
+			}
+
+			if( filePath == null )
+				jprop.dblclick(onTextureSelect);
+			else
+				jprop.click(onTextureSelect);
+
+
 		case PPopup(p, menu, click):
 			j.remove();
 			j = addProp(basePath, t, p, gids, expandLevel);

hxd/inspect/ResPanel.hx

@@ -0,0 +1,87 @@
+package hxd.inspect;
+
+private class ResObject extends TreeNode {
+
+	public var f : hxd.fs.FileEntry;
+
+	public function new(f, p) {
+		this.f = f;
+		super(f.name, p);
+	}
+
+}
+
+
+class ResPanel extends Panel {
+
+	var loader : hxd.res.Loader;
+	var needSync = true;
+	var files : Array<ResObject> = [];
+	var filePos : Int;
+
+	public function new(id, loader) {
+		super(id, "Resources");
+		this.loader = loader;
+		sync();
+	}
+
+	override function sync() {
+		if( !needSync ) return;
+		needSync = false;
+		filePos = 0;
+		var subs = Lambda.array(loader.fs.getRoot());
+		haxe.ds.ArraySort.sort(subs,function(s1, s2) return (s1.isDirectory?0:1) - (s2.isDirectory?0:1));
+		for( e in subs )
+			syncRec(e, this);
+		while( files.length > filePos )
+			files.pop().remove();
+	}
+
+	override function initContent() {
+		super.initContent();
+		j.addClass("resources");
+		j.html('
+			<div class="scrollable">
+				<ul class="elt root">
+				</ul>
+			</div>
+		');
+		content = j.find(".root");
+	}
+
+	function getFileIcon( f : hxd.fs.FileEntry ) {
+		if( f.isDirectory )
+			return "folder-o";
+		switch( f.extension ) {
+		case "png", "gif", "jpg", "jpeg":
+			return "file-image-o";
+		case "xml":
+			return "file-code-o";
+		case "wav", "mp3", "ogg":
+			return "file-sound-o";
+		case "fbx":
+			return "cube";
+		default:
+			return "file-text-o";
+		}
+	}
+
+	function syncRec( f : hxd.fs.FileEntry, parent : Node ) {
+		var fo = files[filePos];
+		if( fo == null || fo.name != f.name ) {
+			fo = new ResObject(f, parent);
+			fo.icon = getFileIcon(f);
+			files.insert(filePos, fo);
+		}
+		filePos++;
+		if( f.isDirectory ) {
+			f.watch(function() needSync = true);
+			fo.openIcon = "folder-open-o";
+			var subs = Lambda.array(f);
+			haxe.ds.ArraySort.sort(subs,function(s1, s2) return (s1.isDirectory?0:1) - (s2.isDirectory?0:1));
+			for( c in subs )
+				syncRec(c, fo);
+		}
+	}
+
+}

hxd/inspect/ScenePanel.hx

@@ -39,7 +39,7 @@ class ScenePanel extends Panel {
 	var scenePosition = 0;
 
 	public function new(name, scene) {
-		super(name, "Scene");
+		super(name, "Scene 3D");
 		sceneObjects = [];
 		this.scene = scene;
 	}
@@ -142,6 +142,10 @@ class ScenePanel extends Panel {
 
 		scenePosition++;
 		if( o.numChildren > 0 ) {
+			if( so.openIcon == null && so.icon == "circle-o" ) {
+				so.openIcon = "circle-o";
+				so.icon = "dot-circle-o";
+			}
 			for( c in o )
 				syncRec(c, so);
 		} else if( so.jchild != null ) {
@@ -149,6 +153,10 @@ class ScenePanel extends Panel {
 			so.jchild = null;
 			for( o in so.childs )
 				o.remove();
+			if( so.openIcon == "circle-o" ) {
+				so.openIcon = null;
+				so.icon = "circle-o";
+			}
 		}
 	}
 

hxd/inspect/TreeNode.hx

@@ -3,6 +3,7 @@ package hxd.inspect;
 class TreeNode extends Node {
 
 	public var icon(default, set) : String;
+	public var openIcon(default, set) : Null<String>;
 	var jchild : cdb.jq.JQuery;
 
 	override function initContent() {
@@ -11,6 +12,7 @@ class TreeNode extends Node {
 		j.children("i").click(function(_) {
 			if( jchild != null ) {
 				j.toggleClass("expand");
+				if( openIcon != null ) syncIcon();
 				jchild.slideToggle(50);
 			}
 		});
@@ -29,6 +31,7 @@ class TreeNode extends Node {
 		super.removeChild(n);
 		n.j.detach();
 		if( jchild != null && jchild.get().numChildren == 0 ) {
+			j.toggleClass("expand",false);
 			jchild.remove();
 			jchild = null;
 		}
@@ -37,9 +40,11 @@ class TreeNode extends Node {
 	override function addChild(n:Node) {
 		super.addChild(n);
 		if( jchild == null ) {
+			j.toggleClass("expand",true);
 			jchild = j.query("<ul>");
 			jchild.addClass("elt");
 			jchild.appendTo(j);
+			if( openIcon != null ) syncIcon();
 		}
 		n.j.appendTo(jchild);
 	}
@@ -56,9 +61,20 @@ class TreeNode extends Node {
 		return name = v;
 	}
 
+	function syncIcon() {
+		j.children("i").attr("class", "fa fa-"+(openIcon == null || !j.hasClass("expand") ? icon : openIcon));
+	}
+
 	function set_icon(v) {
-		j.children("i").attr("class", "fa fa-"+v);
-		return icon = v;
+		icon = v;
+		syncIcon();
+		return v;
+	}
+
+	function set_openIcon(v) {
+		openIcon = v;
+		syncIcon();
+		return v;
 	}
 
 }

hxd/inspect/inspect.css

@@ -55,37 +55,37 @@
 .jqpage ul.toolbar li.active, .dialog-floating ul.toolbar li.active {
 	color : white;
 }
-.jqpage .panel.scene .scrollable, .dialog-floating .panel.scene .scrollable {
+.jqpage .panel .scrollable, .dialog-floating .panel .scrollable {
 	height : 100%;
 	overflow : auto;
 }
-.jqpage .panel.scene ul.elt.root, .dialog-floating .panel.scene ul.elt.root {
+.jqpage .panel ul.elt.root, .dialog-floating .panel ul.elt.root {
 	padding : 5px;
 }
-.jqpage .panel.scene ul.elt, .dialog-floating .panel.scene ul.elt {
+.jqpage .panel ul.elt, .dialog-floating .panel ul.elt {
 	background-color : transparent;
 }
-.jqpage .panel.scene ul.elt li, .dialog-floating .panel.scene ul.elt li {
+.jqpage .panel ul.elt li, .dialog-floating .panel ul.elt li {
 	cursor : pointer;
 }
-.jqpage .panel.scene ul.elt li>i, .dialog-floating .panel.scene ul.elt li>i {
+.jqpage .panel ul.elt li>i, .dialog-floating .panel ul.elt li>i {
 	text-align : center;
 	width : 16px;
 }
-.jqpage .panel.scene ul.elt li>.content, .dialog-floating .panel.scene ul.elt li>.content {
+.jqpage .panel ul.elt li>.content, .dialog-floating .panel ul.elt li>.content {
 	margin-left : 2px;
 	display : inline-block;
 	zoom : 1;
 	*display : inline;
 	height : 18px;
 }
-.jqpage .panel.scene ul.elt li .content:hover, .dialog-floating .panel.scene ul.elt li .content:hover {
+.jqpage .panel ul.elt li .content:hover, .dialog-floating .panel ul.elt li .content:hover {
 	background-color : #eee;
 }
-.jqpage .panel.scene ul.elt ul, .dialog-floating .panel.scene ul.elt ul {
+.jqpage .panel ul.elt ul, .dialog-floating .panel ul.elt ul {
 	padding-left : 20px;
 }
-.jqpage .panel.scene ul.elt li.selected>.content, .dialog-floating .panel.scene ul.elt li.selected>.content {
+.jqpage .panel ul.elt li.selected>.content, .dialog-floating .panel ul.elt li.selected>.content {
 	background-color : #eee;
 }
 .jqpage .panel.scene ul.elt li.hidden, .dialog-floating .panel.scene ul.elt li.hidden {
@@ -102,7 +102,7 @@
 .jqpage .panel.scene .elt.root.masked li.hidden, .jqpage .panel.scene .elt.root.masked li.culled, .dialog-floating .panel.scene .elt.root.masked li.hidden, .dialog-floating .panel.scene .elt.root.masked li.culled {
 	display : none;
 }
-.jqpage .panel.scene>ul.buttons, .dialog-floating .panel.scene>ul.buttons {
+.jqpage .panel>ul.buttons, .dialog-floating .panel>ul.buttons {
 	color : #AAA;
 	background-color : #333;
 	border-right : 1px solid black;
@@ -110,23 +110,20 @@
 	width : 25px;
 	height : 100%;
 }
-.jqpage .panel.scene>ul.buttons li, .dialog-floating .panel.scene>ul.buttons li {
+.jqpage .panel>ul.buttons li, .dialog-floating .panel>ul.buttons li {
 	padding : 5px;
 	display : inline-block;
 	zoom : 1;
 	*display : inline;
 	border : 1px solid #555;
 }
-.jqpage .panel.scene>ul.buttons li:hover, .dialog-floating .panel.scene>ul.buttons li:hover {
+.jqpage .panel>ul.buttons li:hover, .dialog-floating .panel>ul.buttons li:hover {
 	background-color : #555;
 	border-color : white;
 }
-.jqpage .panel.scene>ul.buttons li.active, .dialog-floating .panel.scene>ul.buttons li.active {
+.jqpage .panel>ul.buttons li.active, .dialog-floating .panel>ul.buttons li.active {
 	color : white;
 }
-.jqpage .panel.scene>ul.elt, .dialog-floating .panel.scene>ul.elt {
-	padding : 5px;
-}
 .jqpage table.iprops tr.pgroup, .dialog-floating table.iprops tr.pgroup {
 	cursor : pointer;
 }

hxd/inspect/inspect.hss

@@ -56,7 +56,7 @@
 	}
 
 
-	.panel.scene {
+	.panel {
 
 		.scrollable {
 			height:100%;
@@ -92,6 +92,11 @@
 			li.selected > .content {
 				background-color : #eee;
 			}
+		}
+	}
+
+	.panel.scene {
+		ul.elt {
 			li.hidden {
 				opacity : 0.5;
 			}
@@ -108,31 +113,28 @@
 		}
 	}
 
-	.panel.scene > ul.buttons {
-			color : #AAA;
-			background-color : #333;
-			border-right : 1px solid black;
-			float : left;
-			width : 25px;
-			height : 100%;
-			li {
-				padding : 5px;
-				display : inline-block;
-				border : 1px solid #555;
-			}
-			li:hover {
-				background-color : #555;
-				border-color : white;
-			}
-			li.active {
-				color : white;
-			}
+	.panel > ul.buttons {
+		color : #AAA;
+		background-color : #333;
+		border-right : 1px solid black;
+		float : left;
+		width : 25px;
+		height : 100%;
+		li {
+			padding : 5px;
+			display : inline-block;
+			border : 1px solid #555;
+		}
+		li:hover {
+			background-color : #555;
+			border-color : white;
+		}
+		li.active {
+			color : white;
 		}
-
-	.panel.scene > ul.elt {
-		padding : 5px;
 	}
 
+
 	table.iprops {
 
 		tr.pgroup {