Editor: Nicer objectChanged handling.

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -10,7 +10,8 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
 	function update( object ) {
 
-		if ( object === null ) return;
+		if ( object === null ) return; // objectSelected.dispatch( null )
+		if ( object === undefined ) return;
 
 		var geometry = object.geometry;
 

editor/js/Sidebar.Geometry.Geometry.js

@@ -32,7 +32,8 @@ Sidebar.Geometry.Geometry = function ( editor ) {
 
 	function update( object ) {
 
-		if ( object === null ) return;
+		if ( object === null ) return; // objectSelected.dispatch( null )
+		if ( object === undefined ) return;
 
 		var geometry = object.geometry;
 

editor/js/Sidebar.Geometry.js

@@ -12,6 +12,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	// Actions
 
+	/*
 	var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
 	objectActions.setOptions( {
 
@@ -79,7 +80,8 @@ Sidebar.Geometry = function ( editor ) {
 		this.setValue( 'Actions' );
 
 	} );
-	// container.addStatic( objectActions );
+	container.addStatic( objectActions );
+	*/
 
 	// type
 

editor/js/Sidebar.History.js

@@ -65,19 +65,29 @@ Sidebar.History = function ( editor ) {
 		var options = [];
 		var enumerator = 1;
 
-		( function addObjects( objects, pad ) {
+		function buildOption( object ) {
+
+			var option = document.createElement( 'div' );
+			option.value = object.id;
+
+			return option;
+
+		}
+
+		( function addObjects( objects ) {
 
 			for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 				var object = objects[ i ];
 
-				var html = pad + "<span style='color: #0000cc '>" + enumerator ++ + ". Undo: " + object.name + "</span>";
+				var option = buildOption( object );
+				option.innerHTML = '&nbsp;' + object.name;
 
-				options.push( { value: object.id, html: html } );
+				options.push( option );
 
 			}
 
-		} )( history.undos, '&nbsp;' );
+		} )( history.undos );
 
 
 		( function addObjects( objects, pad ) {
@@ -86,9 +96,11 @@ Sidebar.History = function ( editor ) {
 
 				var object = objects[ i ];
 
-				var html = pad + "<span style='color: #71544e'>" + enumerator ++ + ". Redo: " +  object.name + "</span>";
+				var option = buildOption( object );
+				option.innerHTML = '&nbsp;' + object.name;
+				option.style.opacity = 0.3;
 
-				options.push( { value: object.id, html: html } );
+				options.push( option );
 
 			}
 

editor/js/Sidebar.Scene.js

@@ -10,6 +10,51 @@ Sidebar.Scene = function ( editor ) {
 	container.setBorderTop( '0' );
 	container.setPaddingTop( '20px' );
 
+	// outliner
+
+	function buildOption( object, draggable ) {
+
+		var option = document.createElement( 'div' );
+		option.draggable = draggable;
+		option.innerHTML = buildHTML( object );
+		option.value = object.id;
+
+		return option;
+
+	}
+
+	function buildHTML( object ) {
+
+		var html = '<span class="type ' + object.type + '"></span> ' + object.name;
+
+		if ( object instanceof THREE.Mesh ) {
+
+			var geometry = object.geometry;
+			var material = object.material;
+
+			html += ' <span class="type ' + geometry.type + '"></span> ' + geometry.name;
+			html += ' <span class="type ' + material.type + '"></span> ' + material.name;
+
+		}
+
+		html += getScript( object.uuid );
+
+		return html;
+
+	}
+
+	function getScript( uuid ) {
+
+		if ( editor.scripts[ uuid ] !== undefined ) {
+
+			return ' <span class="type Script"></span>';
+
+		}
+
+		return '';
+
+	}
+
 	var ignoreObjectSelectedSignal = false;
 
 	var outliner = new UI.Outliner( editor );
@@ -127,20 +172,8 @@ Sidebar.Scene = function ( editor ) {
 
 		var options = [];
 
-		options.push( { static: true, value: camera.id, html: '<span class="type ' + camera.type + '"></span> ' + camera.name } );
-		options.push( { static: true, value: scene.id, html: '<span class="type ' + scene.type + '"></span> ' + scene.name + getScript( scene.uuid ) } );
-
-		function getScript( uuid ) {
-
-			if ( editor.scripts[ uuid ] !== undefined ) {
-
-				return ' <span class="type Script"></span>';
-
-			}
-
-			return '';
-
-		}
+		options.push( buildOption( camera, false ) );
+		options.push( buildOption( scene, false ) );
 
 		( function addObjects( objects, pad ) {
 
@@ -148,28 +181,15 @@ Sidebar.Scene = function ( editor ) {
 
 				var object = objects[ i ];
 
-				var html = '<span style="margin-right:' + pad + 'px"></span>';
-				html += '<span class="type ' + object.type + '"></span> ' + object.name;
-
-				if ( object instanceof THREE.Mesh ) {
-
-					var geometry = object.geometry;
-					var material = object.material;
-
-					html += ' <span class="type ' + geometry.type + '"></span> ' + geometry.name;
-					html += ' <span class="type ' + material.type + '"></span> ' + material.name;
-
-				}
-
-				html += getScript( object.uuid );
-
-				options.push( { value: object.id, html: html } );
+				var option = buildOption( object, true );
+				option.style.marginLeft = ( pad * 10 ) + 'px';
+				options.push( option );
 
-				addObjects( object.children, pad + 10 );
+				addObjects( object.children, pad + 1 );
 
 			}
 
-		} )( scene.children, 0 );
+		} )( scene.children, 1 );
 
 		outliner.setOptions( options );
 
@@ -223,6 +243,25 @@ Sidebar.Scene = function ( editor ) {
 
 	signals.sceneGraphChanged.add( refreshUI );
 
+	signals.objectChanged.add( function ( object ) {
+
+		var options = outliner.options;
+
+		for ( var i = 0; i < options.length; i ++ ) {
+
+			var option = options[ i ];
+
+			if ( option.value === object.id ) {
+
+				option.innerHTML = buildHTML( object );
+				return;
+
+			}
+
+		}
+
+	} );
+
 	signals.objectSelected.add( function ( object ) {
 
 		if ( ignoreObjectSelectedSignal === true ) return;

editor/js/Viewport.js

@@ -384,7 +384,7 @@ var Viewport = function ( editor ) {
 
 	signals.geometryChanged.add( function ( object ) {
 
-		if ( object !== null ) {
+		if ( object !== undefined ) {
 
 			selectionBox.update( object );
 

editor/js/commands/SetMaterialValueCommand.js

@@ -31,6 +31,7 @@ SetMaterialValueCommand.prototype = {
 
 		this.object.material[ this.attributeName ] = this.newValue;
 		this.object.material.needsUpdate = true;
+		this.editor.signals.objectChanged.dispatch( this.object );
 		this.editor.signals.materialChanged.dispatch( this.object.material );
 
 	},
@@ -39,6 +40,7 @@ SetMaterialValueCommand.prototype = {
 
 		this.object.material[ this.attributeName ] = this.oldValue;
 		this.object.material.needsUpdate = true;
+		this.editor.signals.objectChanged.dispatch( this.object );
 		this.editor.signals.materialChanged.dispatch( this.object.material );
 
 	},

editor/js/libs/ui.three.js

@@ -334,21 +334,15 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 	for ( var i = 0; i < options.length; i ++ ) {
 
-		var option = options[ i ];
-
-		var div = document.createElement( 'div' );
+		var div = options[ i ];
 		div.className = 'option';
-		div.innerHTML = option.html;
-		div.value = option.value;
 		scope.dom.appendChild( div );
 
 		scope.options.push( div );
 
 		div.addEventListener( 'click', onClick, false );
 
-		if ( option.static !== true ) {
-
-			div.draggable = true;
+		if ( div.draggable === true ) {
 
 			div.addEventListener( 'drag', onDrag, false );
 			div.addEventListener( 'dragstart', onDragStart, false ); // Firefox needs this