Editor: Outliner improvements.

editor/index.html

@@ -22,66 +22,74 @@
 			}
 
 			button {
-
 				position: relative;
-
 			}
 			
-			.menubar {
+			#menubar {
+				position: absolute;
 				background-color: #eee;
 				padding: 0px;
 				margin: 0px;
 			}
 
-				.menubar .menu {
+				#menubar .menu {
 					float: left;
 					width: 50px;
 					cursor: pointer;
 				}
 
-					.menubar .menu .options {
+					#menubar .menu .options {
 						padding: 5px 0px;
 						background-color: #fff;
 						width: 140px;
 					}
 
-						.menubar .menu .options hr {
+						#menubar .menu .options hr {
 							border-color: #ddd;
 						}
 
-						.menubar .menu .options .option {
+						#menubar .menu .options .option {
 							color: #666;
 							background-color: transparent;
 							padding: 5px 10px;
 							margin: 0px !important;
 						}
 
-							.menubar .menu .options .option:hover {
+							#menubar .menu .options .option:hover {
 								color: #fff;
 								background-color: #08f;
 							}
 
 
-			.sidebar {
+			#sidebar {
+				position: absolute;
 				width: 300px;
 				background-color: #eee;
 				overflow: auto;
 			}
 
-				.sidebar .Panel {
+				#sidebar .Panel {
 					margin-bottom: 10px;
 				}
 
-			.toolbar {
+				#sidebar #outliner .type {
+					padding: 2px 4px;
+					font-size: 10px;
+					background-color: #eee;
+					color: #aaa;
+				}
+
+			#toolbar {
+				position: absolute;
 				background-color: #999;
 				color: #333;
 			}
 			
-				.toolbar .Panel {
+				#toolbar .Panel {
 					padding: 4px;
 				}
 
-				.toolbar button {
+				#toolbar button {
 					margin-right: 6px;
 				}
 

editor/js/Editor.js

@@ -277,6 +277,93 @@ Editor.prototype = {
 
 		this.select( null );
 
+	},
+
+	// utils
+
+	getObjectType: function ( object ) {
+
+		var types = {
+
+			'Scene': THREE.Scene,
+			'PerspectiveCamera': THREE.PerspectiveCamera,
+			'AmbientLight': THREE.AmbientLight,
+			'DirectionalLight': THREE.DirectionalLight,
+			'HemisphereLight': THREE.HemisphereLight,
+			'PointLight': THREE.PointLight,
+			'SpotLight': THREE.SpotLight,
+			'Mesh': THREE.Mesh,
+			'Object3D': THREE.Object3D
+
+		};
+
+		for ( var type in types ) {
+
+			if ( object instanceof types[ type ] ) return type;
+
+		}
+
+	},
+
+	getGeometryType: function ( geometry ) {
+
+		var types = {
+
+			'CircleGeometry': THREE.CircleGeometry,
+			'CubeGeometry': THREE.CubeGeometry,
+			'CylinderGeometry': THREE.CylinderGeometry,
+			'ExtrudeGeometry': THREE.ExtrudeGeometry,
+			'IcosahedronGeometry': THREE.IcosahedronGeometry,
+			'LatheGeometry': THREE.LatheGeometry,
+			'OctahedronGeometry': THREE.OctahedronGeometry,
+			'ParametricGeometry': THREE.ParametricGeometry,
+			'PlaneGeometry': THREE.PlaneGeometry,
+			'PolyhedronGeometry': THREE.PolyhedronGeometry,
+			'ShapeGeometry': THREE.ShapeGeometry,
+			'SphereGeometry': THREE.SphereGeometry,
+			'TetrahedronGeometry': THREE.TetrahedronGeometry,
+			'TextGeometry': THREE.TextGeometry,
+			'TorusGeometry': THREE.TorusGeometry,
+			'TorusKnotGeometry': THREE.TorusKnotGeometry,
+			'TubeGeometry': THREE.TubeGeometry,
+			'Geometry': THREE.Geometry,
+			'BufferGeometry': THREE.BufferGeometry
+
+		};
+
+		for ( var type in types ) {
+
+			if ( geometry instanceof types[ type ] ) return type;
+
+		}
+
+	},
+
+	getMaterialType: function ( material ) {
+
+		var types = {
+
+			'LineBasicMaterial': THREE.LineBasicMaterial,
+			'LineDashedMaterial': THREE.LineDashedMaterial,
+			'MeshBasicMaterial': THREE.MeshBasicMaterial,
+			'MeshDepthMaterial': THREE.MeshDepthMaterial,
+			'MeshFaceMaterial': THREE.MeshFaceMaterial,
+			'MeshLambertMaterial': THREE.MeshLambertMaterial,
+			'MeshNormalMaterial': THREE.MeshNormalMaterial,
+			'MeshPhongMaterial': THREE.MeshPhongMaterial,
+			'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
+			'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
+			'ShaderMaterial': THREE.ShaderMaterial,
+			'Material': THREE.Material
+
+		};
+
+		for ( var type in types ) {
+
+			if ( material instanceof types[ type ] ) return type;
+
+		}
+
 	}
 
 }

editor/js/Menubar.js

@@ -1,8 +1,6 @@
 var Menubar = function ( editor ) {
 
-	var container = new UI.Panel();
-	container.setPosition( 'absolute' );
-	container.setClass( 'menubar' );
+	var container = new UI.Panel().setId( 'menubar' );
 
 	container.add( new Menubar.File( editor ) );
 	container.add( new Menubar.Edit( editor ) );

editor/js/Sidebar.Geometry.js

@@ -2,37 +2,12 @@ Sidebar.Geometry = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var geometryClasses = {
-
-		"CircleGeometry": THREE.CircleGeometry,
-		"CubeGeometry": THREE.CubeGeometry,
-		"CylinderGeometry": THREE.CylinderGeometry,
-		"ExtrudeGeometry": THREE.ExtrudeGeometry,
-		"IcosahedronGeometry": THREE.IcosahedronGeometry,
-		"LatheGeometry": THREE.LatheGeometry,
-		"OctahedronGeometry": THREE.OctahedronGeometry,
-		"ParametricGeometry": THREE.ParametricGeometry,
-		"PlaneGeometry": THREE.PlaneGeometry,
-		"PolyhedronGeometry": THREE.PolyhedronGeometry,
-		"ShapeGeometry": THREE.ShapeGeometry,
-		"SphereGeometry": THREE.SphereGeometry,
-		"TetrahedronGeometry": THREE.TetrahedronGeometry,
-		"TextGeometry": THREE.TextGeometry,
-		"TorusGeometry": THREE.TorusGeometry,
-		"TorusKnotGeometry": THREE.TorusKnotGeometry,
-		"TubeGeometry": THREE.TubeGeometry,
-		"Geometry": THREE.Geometry,
-		"BufferGeometry": THREE.BufferGeometry
-
-	};
-
 	var container = new UI.Panel();
 	container.setBorderTop( '1px solid #ccc' );
 	container.setPadding( '10px' );
 	container.setDisplay( 'none' );
 
-	var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
-	container.add( objectType );
+	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// uuid
@@ -62,6 +37,16 @@ Sidebar.Geometry = function ( editor ) {
 
 	container.add( geometryNameRow );
 
+	// class
+
+	var geometryTypeRow = new UI.Panel();
+	var geometryType = new UI.Text().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
+
+	geometryTypeRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryTypeRow.add( geometryType );
+
+	container.add( geometryTypeRow );
+
 	// vertices
 
 	var geometryVerticesRow = new UI.Panel();
@@ -108,7 +93,7 @@ Sidebar.Geometry = function ( editor ) {
 
 			container.setDisplay( 'block' );
 
-			objectType.setValue( getGeometryInstanceName( object.geometry ) );
+			geometryType.setValue( editor.getGeometryType( object.geometry ) );
 
 			updateFields( geometry );
 
@@ -205,16 +190,6 @@ Sidebar.Geometry = function ( editor ) {
 
 	}
 
-	function getGeometryInstanceName( geometry ) {
-
-		for ( var key in geometryClasses ) {
-
-			if ( geometry instanceof geometryClasses[ key ] ) return key;
-
-		}
-
-	}
-
 	return container;
 
 }

editor/js/Sidebar.Material.js

@@ -323,7 +323,7 @@ Sidebar.Material = function ( editor ) {
 
 			}
 
-			if ( material instanceof materialClasses[ materialClass.getValue() ] == false ) {
+			if ( material instanceof materialClasses[ materialClass.getValue() ] === false ) {
 
 				material = new materialClasses[ materialClass.getValue() ]();
 				object.material = material;

editor/js/Sidebar.Scene.js

@@ -9,7 +9,7 @@ Sidebar.Scene = function ( editor ) {
 	container.add( new UI.Text( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' )
+	var outliner = new UI.FancySelect().setId( 'outliner' ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' );
 	outliner.onChange( function () {
 
 		editor.selectById( parseInt( outliner.getValue() ) );
@@ -107,30 +107,6 @@ Sidebar.Scene = function ( editor ) {
 
 	//
 
-	var getObjectType = function ( object ) {
-
-		var objects = {
-
-			'Scene': THREE.Scene,
-			'PerspectiveCamera': THREE.PerspectiveCamera,
-			'AmbientLight': THREE.AmbientLight,
-			'DirectionalLight': THREE.DirectionalLight,
-			'HemisphereLight': THREE.HemisphereLight,
-			'PointLight': THREE.PointLight,
-			'SpotLight': THREE.SpotLight,
-			'Mesh': THREE.Mesh,
-			'Object3D': THREE.Object3D
-
-		};
-
-		for ( var type in objects ) {
-
-			if ( object instanceof objects[ type ] ) return type;
-
-		}
-
-	}
-
 	var refreshFogUI = function () {
 
 		var type = fogType.getValue();
@@ -150,7 +126,7 @@ Sidebar.Scene = function ( editor ) {
 
 		var options = {};
 
-		options[ scene.id ] = scene.name + ' <span style="color: #aaa">- ' + getObjectType( scene ) + '</span>';
+		options[ scene.id ] = '<span class="type">' + editor.getObjectType( scene ) + '</span> ' + scene.name;
 
 		( function addObjects( objects, pad ) {
 
@@ -158,7 +134,15 @@ Sidebar.Scene = function ( editor ) {
 
 				var object = objects[ i ];
 
-				options[ object.id ] = pad + object.name + ' <span style="color: #aaa">- ' + getObjectType( object ) + '</span>';
+				var option = pad + '<span class="type">' + editor.getObjectType( object ) + '</span> ' + object.name;
+
+				if ( object instanceof THREE.Mesh ) {
+
+					option += ' ( ' + object.geometry.name + ', ' + object.material.name + ' ) ';
+
+				}
+
+				options[ object.id ] = option;
 
 				addObjects( object.children, pad + '&nbsp;&nbsp;&nbsp;' );
 

editor/js/Sidebar.js

@@ -1,8 +1,6 @@
 var Sidebar = function ( editor ) {
 
-	var container = new UI.Panel();
-	container.setPosition( 'absolute' );
-	container.setClass( 'sidebar' );
+	var container = new UI.Panel().setId( 'sidebar' );
 
 	container.add( new Sidebar.Renderer( editor ) );
 	container.add( new Sidebar.Scene( editor ) );

editor/js/Toolbar.js

@@ -2,9 +2,7 @@ var Toolbar = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
-	container.setPosition( 'absolute' );
-	container.setClass( 'toolbar' );
+	var container = new UI.Panel().setId( 'toolbar' );
 
 	var buttons = new UI.Panel();
 	container.add( buttons );

editor/js/libs/ui.js

@@ -4,6 +4,14 @@ UI.Element = function () {};
 
 UI.Element.prototype = {
 
+	setId: function ( id ) {
+
+		this.dom.id = id;
+		
+		return this;
+
+	},
+
 	setClass: function ( name ) {
 
 		this.dom.className = name;