Editor: Merged Sidebar.Properties.World into Sidebar.Outline (now Sidebar.Scene).

editor/index.html

@@ -41,9 +41,8 @@
 		<script src="js/ui/Menubar.Add.js"></script>
 		<script src="js/ui/Menubar.Help.js"></script>
 		<script src="js/ui/Sidebar.js"></script>
-		<script src="js/ui/Sidebar.Outliner.js"></script>
+		<script src="js/ui/Sidebar.Scene.js"></script>
 		<script src="js/ui/Sidebar.Properties.js"></script>
-		<script src="js/ui/Sidebar.Properties.World.js"></script>
 		<script src="js/ui/Sidebar.Properties.Object3D.js"></script>
 		<script src="js/ui/Sidebar.Properties.Geometry.js"></script>
 		<script src="js/ui/Sidebar.Properties.Material.js"></script>

editor/js/ui/Sidebar.Outliner.js

-Sidebar.Outliner = function ( signals ) {
-
-	var objectTypes = {
-
-		'PerspectiveCamera': THREE.PerspectiveCamera,
-		'PointLight': THREE.PointLight,
-		'DirectionalLight': THREE.DirectionalLight,
-		'Mesh': THREE.Mesh,
-		'Object3D': THREE.Object3D
-
-	};
-
-	var selected = null;
-
-	var container = new UI.Panel();
-	container.setPadding( '10px' );
-	container.setBorderTop( '1px solid #ccc' );
-
-	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
-	container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportScene ) );
-	container.add( new UI.Break(), new UI.Break() );
-
-	var sceneGraph = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	container.add( sceneGraph );
-
-	var scene = null;
-
-	function update() {
-
-		var id = parseInt( sceneGraph.getValue() );
-
-		scene.traverse( function ( node ) {
-
-			if ( node.id === id ) {
-
-				signals.objectSelected.dispatch( node );
-				return;
-
-			}
-
-		} );
-
-	}
-
-	function getObjectType( object ) {
-
-		for ( var type in objectTypes ) {
-
-			if ( object instanceof objectTypes[ type ] ) return type;
-
-		}
-
-	}
-
-	// events
-
-	signals.sceneCreated.add( function ( object ) {
-
-		scene = object;
-
-	} );
-
-	signals.sceneChanged.add( function ( object ) {
-
-		scene = object;
-
-		var options = {};
-
-		( function createList( object, pad ) {
-
-			for ( var key in object.children ) {
-
-				var child = object.children[ key ];
-
-				options[ child.id ] = pad + child.name + ' <span style="color: #aaa">- ' + getObjectType( child ) + '</span>';
-
-				createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
-
-			}
-
-		} )( scene, '' );
-
-		sceneGraph.setOptions( options );
-
-	} );
-
-	signals.objectSelected.add( function ( object ) {
-
-		sceneGraph.setValue( object !== null ? object.id : null );
-
-	} );
-
-	signals.clearColorChanged.add( function ( color ) {
-
-		clearColor.setHex( color );
-
-	} );
-
-
-	function exportScene() {
-
-		signals.exportScene.dispatch( scene );
-
-	}
-
-	return container;
-
-}

editor/js/ui/Sidebar.Properties.js

@@ -2,7 +2,6 @@ Sidebar.Properties = function ( signals ) {
 
 	var container = new UI.Panel();
 
-	container.add( new Sidebar.Properties.World( signals ) );
 	container.add( new Sidebar.Properties.Object3D( signals ) );
 	container.add( new Sidebar.Properties.Geometry( signals ) );
 	container.add( new Sidebar.Properties.Material( signals ) );

editor/js/ui/Sidebar.Properties.World.js → editor/js/ui/Sidebar.Scene.js

-Sidebar.Properties.World = function ( signals ) {
+Sidebar.Outliner = function ( signals ) {
+
+	var objectTypes = {
+
+		'PerspectiveCamera': THREE.PerspectiveCamera,
+		'PointLight': THREE.PointLight,
+		'DirectionalLight': THREE.DirectionalLight,
+		'Mesh': THREE.Mesh,
+		'Object3D': THREE.Object3D
+
+	};
+
+	var selected = null;
 
 	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
 	container.setPadding( '10px' );
+	container.setBorderTop( '1px solid #ccc' );
 
-	var objectType = new UI.Text().setColor( '#666' ).setValue( 'WORLD' );
-	container.add( objectType );
+	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
+	container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportScene ) );
 	container.add( new UI.Break(), new UI.Break() );
 
+	var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( updateOutliner );
+	container.add( outliner );
+	container.add( new UI.Break() );
+
 	// clear color
 
 	var clearColorRow = new UI.Panel();
@@ -96,6 +112,35 @@ Sidebar.Properties.World = function ( signals ) {
 
 	//
 
+	var scene = null;
+
+	function getObjectType( object ) {
+
+		for ( var type in objectTypes ) {
+
+			if ( object instanceof objectTypes[ type ] ) return type;
+
+		}
+
+	}
+
+	function updateOutliner() {
+
+		var id = parseInt( outliner.getValue() );
+
+		scene.traverse( function ( node ) {
+
+			if ( node.id === id ) {
+
+				signals.objectSelected.dispatch( node );
+				return;
+
+			}
+
+		} );
+
+	}
+
 	function updateClearColor() {
 
 		signals.clearColorChanged.dispatch( clearColor.getHexValue() );
@@ -170,6 +215,55 @@ Sidebar.Properties.World = function ( signals ) {
 
 	// events
 
+	signals.sceneCreated.add( function ( object ) {
+
+		scene = object;
+
+	} );
+
+	signals.sceneChanged.add( function ( object ) {
+
+		scene = object;
+
+		var options = {};
+
+		( function createList( object, pad ) {
+
+			for ( var key in object.children ) {
+
+				var child = object.children[ key ];
+
+				options[ child.id ] = pad + child.name + ' <span style="color: #aaa">- ' + getObjectType( child ) + '</span>';
+
+				createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
+
+			}
+
+		} )( scene, '' );
+
+		outliner.setOptions( options );
+
+	} );
+
+	signals.objectSelected.add( function ( object ) {
+
+		outliner.setValue( object !== null ? object.id : null );
+
+	} );
+
+	signals.clearColorChanged.add( function ( color ) {
+
+		clearColor.setHex( color );
+
+	} );
+
+
+	function exportScene() {
+
+		signals.exportScene.dispatch( scene );
+
+	}
+
 	return container;
 
 }