From bc75eba7f4b1e88f54069d7a97f565893f09eee9 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Wed, 20 Aug 2014 11:00:07 -0300 Subject: [PATCH] Editor: Saving panels collapsed state to localStorage. --- editor/js/Config.js | 22 ++++++++++++++++------ editor/js/Sidebar.Animation.js | 7 ++++++- editor/js/Sidebar.Geometry.js | 7 ++++++- editor/js/Sidebar.Material.js | 7 ++++++- editor/js/Sidebar.Object3D.js | 6 ++++++ editor/js/Sidebar.Renderer.js | 7 ++++++- editor/js/Sidebar.Scene.js | 6 ++++++ editor/js/Sidebar.Script.js | 7 ++++++- editor/js/Viewport.js | 6 +++--- editor/js/libs/ui.js | 22 +++++++++++++++++----- src/math/Quaternion.js | 1 - 11 files changed, 78 insertions(+), 20 deletions(-) diff --git a/editor/js/Config.js b/editor/js/Config.js index 4c85e684a7..0eead1d157 100644 --- a/editor/js/Config.js +++ b/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 ] ); diff --git a/editor/js/Sidebar.Animation.js b/editor/js/Sidebar.Animation.js index 4149fe8eca..9ee6f25e0a 100644 --- a/editor/js/Sidebar.Animation.js +++ b/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' ) ); diff --git a/editor/js/Sidebar.Geometry.js b/editor/js/Sidebar.Geometry.js index a575f60b2a..f613057662 100644 --- a/editor/js/Sidebar.Geometry.js +++ b/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' ); diff --git a/editor/js/Sidebar.Material.js b/editor/js/Sidebar.Material.js index 73264efb79..2467816e6f 100644 --- a/editor/js/Sidebar.Material.js +++ b/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' ); diff --git a/editor/js/Sidebar.Object3D.js b/editor/js/Sidebar.Object3D.js index 3e8b710205..7ca5b462ed 100644 --- a/editor/js/Sidebar.Object3D.js +++ b/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' ); diff --git a/editor/js/Sidebar.Renderer.js b/editor/js/Sidebar.Renderer.js index b60517af66..4026bac516 100644 --- a/editor/js/Sidebar.Renderer.js +++ b/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() ); diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js index 96b762e4e3..51cf3092d3 100644 --- a/editor/js/Sidebar.Scene.js +++ b/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() ); diff --git a/editor/js/Sidebar.Script.js b/editor/js/Sidebar.Script.js index 04015eea28..8550a8aedc 100644 --- a/editor/js/Sidebar.Script.js +++ b/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' ) ); diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index f0c0aaa475..7521f2b6be 100644 --- a/editor/js/Viewport.js +++ b/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(); diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js index b12379e586..0b67c01775 100644 --- a/editor/js/libs/ui.js +++ b/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; }; diff --git a/src/math/Quaternion.js b/src/math/Quaternion.js index 9ee5efaf08..f687e5ccd3 100644 --- a/src/math/Quaternion.js +++ b/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; -- GitLab