Editor: Saving state to IndexedDB. Allows bigger files.

editor/index.html

@@ -44,6 +44,8 @@
 		<script src="js/libs/ui.js"></script>
 		<script src="js/libs/ui.three.js"></script>
 
+		<script src="js/Storage.js"></script>
+
 		<script src="js/Editor.js"></script>
 		<script src="js/Config.js"></script>
 		<script src="js/Loader.js"></script>
@@ -94,48 +96,54 @@
 
 			editor.setTheme( editor.config.getKey( 'theme' ) );
 
-			var state = editor.config.getKey( 'state' );
+			editor.storage.init( function () {
 
-			if ( state !== undefined ) {
+				editor.storage.get( function ( state ) {
 
-				var loader = new THREE.ObjectLoader();
-				var scene = loader.parse( state );
+					if ( state !== undefined ) {
 
-				editor.setScene( scene );
+						var loader = new THREE.ObjectLoader();
+						var scene = loader.parse( state );
 
-			}
+						editor.setScene( scene );
 
-			var selected = editor.config.getKey( 'selected' );
+					}
 
-			if ( selected !== undefined ) {
+					var selected = editor.config.getKey( 'selected' );
 
-				editor.selectByUuid( selected );
+					if ( selected !== undefined ) {
 
-			}
+						editor.selectByUuid( selected );
 
-			//
+					}
 
-			var timeout;
-			var exporter = new THREE.ObjectExporter();
+				} );
 
-			var saveLocalStorage = function ( scene ) {
+				//
 
-				clearTimeout( timeout );
+				var timeout;
+				var exporter = new THREE.ObjectExporter();
 
-				timeout = setTimeout( function () {
+				var saveState = function ( scene ) {
 
-					editor.config.setKey( 'state', exporter.parse( editor.scene ) );
+					clearTimeout( timeout );
 
-				}, 3000 );
+					timeout = setTimeout( function () {
 
-			};
+						editor.storage.set( exporter.parse( editor.scene ) );
+
+					}, 2000 );
+
+				};
+
+				var signals = editor.signals;
 
-			var signals = editor.signals;
+				signals.objectAdded.add( saveState );
+				signals.objectChanged.add( saveState );
+				signals.objectRemoved.add( saveState );
+				signals.sceneGraphChanged.add( saveState );
 
-			signals.objectAdded.add( saveLocalStorage );
-			signals.objectChanged.add( saveLocalStorage );
-			signals.objectRemoved.add( saveLocalStorage );
-			signals.sceneGraphChanged.add( saveLocalStorage );
+			} );
 
 			//
 

editor/js/Config.js

@@ -36,7 +36,7 @@ var Config = function () {
 
 			window.localStorage[ name ] = JSON.stringify( storage );
 
-			console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to LocalStorage.' );
+			console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved config to LocalStorage.' );
 
 		},
 

editor/js/Editor.js

@@ -38,6 +38,7 @@ var Editor = function () {
 	};
 	
 	this.config = new Config();
+	this.storage = new Storage();
 	this.loader = new Loader( this );
 
 	this.scene = new THREE.Scene();

editor/js/Menubar.File.js

@@ -29,8 +29,11 @@ Menubar.File = function ( editor ) {
 		if ( confirm( 'Are you sure?' ) ) {
 
 			editor.config.clear();
+			editor.storage.clear( function () {
 
-			location.href = location.pathname;
+				location.href = location.pathname;
+
+			} );
 
 		}
 

editor/js/Storage.js

@@ -0,0 +1,87 @@
+var Storage = function () {
+
+	var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+
+	var name = 'threejs-editor';
+	var version = 1;
+
+	var database;
+
+	return {
+
+		init: function ( callback ) {
+
+			var request = indexedDB.open( name, version );
+			request.onupgradeneeded = function ( event ) {
+
+				var db = event.target.result;
+
+				if ( db.objectStoreNames.contains( 'states' ) === false ) {
+
+					db.createObjectStore( 'states' );
+
+				}
+
+			};
+			request.onsuccess = function ( event ) {
+
+				database = event.target.result;
+				database.onabort = function ( event ) {
+
+					database.close();
+					database = null;
+
+				};
+
+				callback();
+
+			};
+			request.onerror = function ( event ) {
+
+				console.error( 'IndexedDB', event );
+
+			};
+			
+
+		},
+
+		get: function ( callback ) {
+
+			var transaction = database.transaction( [ 'states' ], 'readwrite' );
+			var objectStore = transaction.objectStore( 'states' );
+			var request = objectStore.get( 0 );
+			request.onsuccess = function ( event ) {
+
+				callback( event.target.result );
+
+			};
+
+		},
+
+		set: function ( data, callback ) {
+
+			var transaction = database.transaction( [ 'states' ], 'readwrite' );
+			var objectStore = transaction.objectStore( 'states' );
+			var request = objectStore.put( data, 0 );
+			request.onsuccess = function ( event ) {
+
+				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB.' );
+
+			};
+
+		},
+
+		clear: function ( callback ) {
+
+			var transaction = database.transaction( [ 'states' ], 'readwrite' );
+			var objectStore = transaction.objectStore( 'states' );
+			var request = objectStore.clear();
+			request.onsuccess = function ( event ) {
+				callback();
+			};
+
+		}
+
+	}
+
+};