GUI: Outliner working. Not recursive yet.

gui/index.html

@@ -47,6 +47,7 @@
 
 			var signals = {
 
+				sceneChanged: new SIGNALS.Signal(),
 				objectAdded: new SIGNALS.Signal(),
 				objectSelected: new SIGNALS.Signal(),
 				objectChanged: new SIGNALS.Signal(),

gui/js/UI.js

@@ -283,8 +283,6 @@ UI.Select = function ( position ) {
 
 	this.dom.addEventListener( 'change', function ( event ) {
 
-		// console.log( scope.dom.selectedIndex, scope.dom.value );
-
 		if ( scope.onChangeCallback ) scope.onChangeCallback();
 
 	}, false );
@@ -305,11 +303,17 @@ UI.Select.prototype.setMultiple = function ( boolean ) {
 
 UI.Select.prototype.setOptions = function ( options ) {
 
-	for ( var i = 0; i < options.length; i ++ ) {
+	while ( this.dom.children.length > 0 ) {
+
+		this.dom.removeChild( this.dom.firstChild );
+
+	}
+
+	for ( var key in options ) {
 
 		var option = document.createElement( 'option' );
-		option.value = options[ i ];
-		option.appendChild( document.createTextNode( option.value ) );
+		option.value = key;
+		option.appendChild( document.createTextNode( options[ key ] ) );
 		this.dom.appendChild( option );
 
 	}
@@ -347,7 +351,7 @@ UI.Boolean = function ( position ) {
 
 	UI.Select.call( this, position );
 
-	this.setOptions( [ 'true', 'false' ] );
+	this.setOptions( { 'true': 'true', 'false': 'false' } );
 
 	return this;
 

gui/js/ui/Sidebar.Outliner.js

@@ -9,17 +9,55 @@ Sidebar.Outliner = function ( signals ) {
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	var scene = new UI.Select().setMultiple( true ).setOptions( [ 'test', 'test' ] ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	container.add( scene );
+	var sceneGraph = new UI.Select().setMultiple( true ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	container.add( sceneGraph );
 
 	container.add( new UI.Break(), new UI.Break() );
 
+	var scene = null;
+
 	function update() {
 
-		console.log( scene.getValue() );
+		var id = parseInt( sceneGraph.getValue() );
+
+		for ( var i in scene.children ) {
+
+			var object = scene.children[ i ];
+
+			if ( object.id === id ) {
+
+				signals.objectSelected.dispatch( object );
+				return;
+
+			}
+
+		}
 
 	}
 
+	signals.sceneChanged.add( function ( object ) {
+
+		scene = object;
+
+		var options = {};
+
+		for ( var i in scene.children ) {
+
+			var object = scene.children[ i ];
+			options[ object.id ] = ' - ' + object.name;
+
+		}
+
+		sceneGraph.setOptions( options );
+
+	} );
+
+	signals.objectSelected.add( function ( object ) {
+
+		sceneGraph.setValue( object !== null ? object.id: null );
+
+	} );
+
 	return container;
 
 }

gui/js/ui/Sidebar.Properties.Material.js

@@ -36,7 +36,17 @@ Sidebar.Properties.Material = function ( signals ) {
 	// class
 
 	var materialClassRow = new UI.Panel();
-	var materialClass = new UI.Select( 'absolute' ).setOptions( [ 'LineBasicMaterial', 'MeshBasicMaterial', 'MeshDepthMaterial', 'MeshFaceMaterial', 'MeshLambertMaterial', 'MeshNormalMaterial', 'MeshPhongMaterial', 'ParticleBasicMaterial', 'ParticleCanvasMaterial', 'ParticleDOMMaterial', 'ShaderMaterial' ] ).setLeft( '90px' ).setWidth( '180px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var materialClass = new UI.Select( 'absolute' ).setOptions( {
+
+		'LineBasicMaterial': 'LineBasicMaterial',
+		'MeshBasicMaterial': 'MeshBasicMaterial',
+		'MeshDepthMaterial': 'MeshDepthMaterial',
+		'MeshFaceMaterial': 'MeshFaceMaterial',
+		'MeshLambertMaterial': 'MeshLambertMaterial',
+		'MeshNormalMaterial': 'MeshNormalMaterial',
+		'MeshPhongMaterial': 'MeshPhongMaterial'
+
+	} ).setLeft( '90px' ).setWidth( '180px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
 	materialClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
 	materialClassRow.add( materialClass );

gui/js/ui/Viewport.js

@@ -44,7 +44,6 @@ var Viewport = function ( signals ) {
 	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
 	camera.position.set( 500, 250, 500 );
 	camera.lookAt( scene.position );
-	scene.add( camera );
 
 	var controls = new THREE.TrackballControls( camera, container.dom );
 	controls.rotateSpeed = 1.0;
@@ -117,6 +116,8 @@ var Viewport = function ( signals ) {
 		scene.add( object );
 		render();
 
+		signals.sceneChanged.dispatch( scene );
+
 	} );
 
 	signals.objectChanged.add( function ( object ) {
@@ -125,13 +126,13 @@ var Viewport = function ( signals ) {
 
 	} );
 
-	signals.objectSelected.add( function ( object ) {
+	var selected = null;
 
-		if ( object === null ) {
+	signals.objectSelected.add( function ( object ) {
 
-			selectionBox.visible = false;
+		selectionBox.visible = false;
 
-		} else if ( object.geometry ) {
+		if ( object !== null && object.geometry ) {
 
 			var geometry = object.geometry;