Editor: Saving panels collapsed state to localStorage.

editor/js/Config.js

@@ -3,14 +3,24 @@ var Config = function () {
 	var name = 'threejs-editor';
 
 	var storage = {
-		theme: 'css/light.css',
-		camera: {
-			position: [ 500, 250, 500 ],
-			target: [ 0, 0, 0 ] 
-		}
+		'theme': 'css/light.css',
+		'camera/position': [ 500, 250, 500 ],
+		'camera/target': [ 0, 0, 0 ],
+
+		'ui/sidebar/animation/collapsed': true,
+		'ui/sidebar/geometry/collapsed': true,
+		'ui/sidebar/material/collapsed': true,
+		'ui/sidebar/object3d/collapsed': false,
+		'ui/sidebar/renderer/collapsed': true,
+		'ui/sidebar/scene/collapsed': false,
+		'ui/sidebar/script/collapsed': true
 	};
 
-	if ( window.localStorage[ name ] !== undefined ) {
+	if ( window.localStorage[ name ] === undefined ) {
+
+		window.localStorage[ name ] = JSON.stringify( storage );
+
+	} else {
 
 		var data = JSON.parse( window.localStorage[ name ] );
 

editor/js/Sidebar.Animation.js

@@ -6,7 +6,12 @@ Sidebar.Animation = function ( editor ) {
 	var possibleAnimations = {};
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( true );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/animation/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/animation/collapsed', boolean );
+
+	} );
 	container.setDisplay( 'none' );
 
 	container.addStatic( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );

editor/js/Sidebar.Geometry.js

@@ -3,7 +3,12 @@ Sidebar.Geometry = function ( editor ) {
 	var signals = editor.signals;
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( true );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/geometry/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/geometry/collapsed', boolean );
+
+	} );
 	container.setDisplay( 'none' );
 
 	var geometryType = new UI.Text().setTextTransform( 'uppercase' );

editor/js/Sidebar.Material.js

@@ -21,7 +21,12 @@ Sidebar.Material = function ( editor ) {
 	};
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( true );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/material/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/material/collapsed', boolean );
+
+	} );
 	container.setDisplay( 'none' );
 	container.dom.classList.add( 'Material' );
 

editor/js/Sidebar.Object3D.js

@@ -3,6 +3,12 @@ Sidebar.Object3D = function ( editor ) {
 	var signals = editor.signals;
 
 	var container = new UI.CollapsiblePanel();
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/object3d/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/object3d/collapsed', boolean );
+
+	} );
 	container.setDisplay( 'none' );
 
 	var objectType = new UI.Text().setTextTransform( 'uppercase' );

editor/js/Sidebar.Renderer.js

@@ -14,7 +14,12 @@ Sidebar.Renderer = function ( editor ) {
 	};
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( true );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/renderer/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/renderer/collapsed', boolean );
+
+	} );
 
 	container.addStatic( new UI.Text( 'RENDERER' ) );
 	container.add( new UI.Break() );

editor/js/Sidebar.Scene.js

@@ -3,6 +3,12 @@ Sidebar.Scene = function ( editor ) {
 	var signals = editor.signals;
 
 	var container = new UI.CollapsiblePanel();
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/scene/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/scene/collapsed', boolean );
+
+	} );
 
 	container.addStatic( new UI.Text( 'SCENE' ) );
 	container.add( new UI.Break() );

editor/js/Sidebar.Script.js

@@ -3,7 +3,12 @@ Sidebar.Script = function ( editor ) {
 	var signals = editor.signals;
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( true );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/script/collapsed' ) );
+	container.onCollapsedChange( function ( boolean ) {
+
+		editor.config.setKey( 'ui/sidebar/script/collapsed', boolean );
+
+	} );
 	container.setDisplay( 'none' );
 
 	container.addStatic( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );

editor/js/Viewport.js

@@ -27,8 +27,8 @@ var Viewport = function ( editor ) {
 	//
 
 	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
-	camera.position.fromArray( editor.config.getKey( 'camera' ).position );
-	camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera' ).target ) );
+	camera.position.fromArray( editor.config.getKey( 'camera/position' ) );
+	camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera/target' ) ) );
 
 	//
 
@@ -171,7 +171,7 @@ var Viewport = function ( editor ) {
 	// otherwise controls.enabled doesn't work.
 
 	var controls = new THREE.EditorControls( camera, container.dom );
-	controls.center.fromArray( editor.config.getKey( 'camera' ).target )
+	controls.center.fromArray( editor.config.getKey( 'camera/target' ) )
 	controls.addEventListener( 'change', function () {
 
 		transformControls.update();

editor/js/libs/ui.js

@@ -269,19 +269,31 @@ UI.CollapsiblePanel.prototype.expand = function() {
 
 };
 
-UI.CollapsiblePanel.prototype.setCollapsed = function( setCollapsed ) {
+UI.CollapsiblePanel.prototype.setCollapsed = function( boolean ) {
 
-	if ( setCollapsed ) {
+	if ( boolean ) {
 
-		this.dom.classList.add('collapsed');
+		this.dom.classList.add( 'collapsed' );
 
 	} else {
 
-		this.dom.classList.remove('collapsed');
+		this.dom.classList.remove( 'collapsed' );
 
 	}
 
-	this.isCollapsed = setCollapsed;
+	this.isCollapsed = boolean;
+
+	if ( this.onCollapsedChangeCallback !== undefined ) {
+
+		this.onCollapsedChangeCallback( boolean );
+
+	}
+
+};
+
+UI.CollapsiblePanel.prototype.onCollapsedChange = function ( callback ) {
+
+	this.onCollapsedChangeCallback = callback;
 
 };
 

src/math/Quaternion.js

@@ -400,7 +400,6 @@ THREE.Quaternion.prototype = {
 	slerp: function ( qb, t ) {
 
 		if ( t === 0 ) return this;
-
 		if ( t === 1 ) return this.copy( qb );
 
 		var x = this._x, y = this._y, z = this._z, w = this._w;