spoint 0.1.0 → 0.1.11

package/client/editor/js/Sidebar.Settings.History.js

@@ -0,0 +1,146 @@
+
+import { UIButton, UIPanel, UIBreak, UIText } from './libs/ui.js';
+import { UIBoolean, UIOutliner } from './libs/ui.three.js';
+
+function SidebarSettingsHistory( editor ) {
+
+	const strings = editor.strings;
+	const signals = editor.signals;
+	const config = editor.config;
+	const history = editor.history;
+
+	const container = new UIPanel();
+
+	container.add( new UIText( strings.getKey( 'sidebar/history' ).toUpperCase() ) );
+
+	//
+
+	const persistent = new UIBoolean( config.getKey( 'settings/history' ), strings.getKey( 'sidebar/history/persistent' ) );
+	persistent.setPosition( 'absolute' ).setRight( '8px' );
+	persistent.onChange( function () {
+
+		const value = this.getValue();
+
+		config.setKey( 'settings/history', value );
+
+		if ( value ) {
+
+			alert( strings.getKey( 'prompt/history/preserve' ) );
+
+			const lastUndoCmd = history.undos[ history.undos.length - 1 ];
+			const lastUndoId = ( lastUndoCmd !== undefined ) ? lastUndoCmd.id : 0;
+			editor.history.enableSerialization( lastUndoId );
+
+		} else {
+
+			signals.historyChanged.dispatch();
+
+		}
+
+	} );
+	container.add( persistent );
+
+	container.add( new UIBreak(), new UIBreak() );
+
+	let ignoreObjectSelectedSignal = false;
+
+	const outliner = new UIOutliner( editor );
+	outliner.onChange( function () {
+
+		ignoreObjectSelectedSignal = true;
+
+		editor.history.goToState( parseInt( outliner.getValue() ) );
+
+		ignoreObjectSelectedSignal = false;
+
+	} );
+	container.add( outliner );
+
+	container.add( new UIBreak() );
+
+	// Clear History
+
+	const option = new UIButton( strings.getKey( 'sidebar/history/clear' ) );
+	option.onClick( function () {
+
+		if ( confirm( strings.getKey( 'prompt/history/clear' ) ) ) {
+
+			editor.history.clear();
+
+		}
+
+	} );
+	container.add( option );
+
+	//
+
+	const refreshUI = function () {
+
+		const options = [];
+
+		function buildOption( object ) {
+
+			const option = document.createElement( 'div' );
+			option.value = object.id;
+
+			return option;
+
+		}
+
+		( function addObjects( objects ) {
+
+			for ( let i = 0, l = objects.length; i < l; i ++ ) {
+
+				const object = objects[ i ];
+
+				const option = buildOption( object );
+				option.innerHTML = '&nbsp;' + object.name;
+
+				options.push( option );
+
+			}
+
+		} )( history.undos );
+
+
+		( function addObjects( objects ) {
+
+			for ( let i = objects.length - 1; i >= 0; i -- ) {
+
+				const object = objects[ i ];
+
+				const option = buildOption( object );
+				option.innerHTML = '&nbsp;' + object.name;
+				option.style.opacity = 0.3;
+
+				options.push( option );
+
+			}
+
+		} )( history.redos );
+
+		outliner.setOptions( options );
+
+	};
+
+	refreshUI();
+
+	// events
+
+	signals.editorCleared.add( refreshUI );
+
+	signals.historyChanged.add( refreshUI );
+	signals.historyChanged.add( function ( cmd ) {
+
+		if ( ignoreObjectSelectedSignal === true ) return;
+
+		outliner.setValue( cmd !== undefined ? cmd.id : null );
+
+	} );
+
+
+	return container;
+
+}
+
+export { SidebarSettingsHistory };

package/client/editor/js/Sidebar.Settings.Shortcuts.js

@@ -0,0 +1,175 @@
+import { UIPanel, UIText, UIRow, UIInput } from './libs/ui.js';
+
+import { RemoveObjectCommand } from './commands/RemoveObjectCommand.js';
+
+function SidebarSettingsShortcuts( editor ) {
+
+	const strings = editor.strings;
+
+	const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
+
+	function isValidKeyBinding( key ) {
+
+		return key.match( /^[A-Za-z0-9]$/i ); // Can't use z currently due to undo/redo
+
+	}
+
+	const config = editor.config;
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+
+	const headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts' ).toUpperCase() ) );
+	container.add( headerRow );
+
+	const shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus' ];
+
+	function createShortcutInput( name ) {
+
+		const configName = 'settings/shortcuts/' + name;
+		const shortcutRow = new UIRow();
+
+		const shortcutInput = new UIInput().setWidth( '15px' ).setFontSize( '12px' );
+		shortcutInput.setTextAlign( 'center' );
+		shortcutInput.setTextTransform( 'lowercase' );
+		shortcutInput.onChange( function () {
+
+			const value = shortcutInput.getValue().toLowerCase();
+
+			if ( isValidKeyBinding( value ) ) {
+
+				config.setKey( configName, value );
+
+			}
+
+		} );
+
+		// Automatically highlight when selecting an input field
+		shortcutInput.dom.addEventListener( 'click', function () {
+
+			shortcutInput.dom.select();
+
+		} );
+
+		// If the value of the input field is invalid, revert the input field
+		// to contain the key binding stored in config
+		shortcutInput.dom.addEventListener( 'blur', function () {
+
+			if ( ! isValidKeyBinding( shortcutInput.getValue() ) ) {
+
+				shortcutInput.setValue( config.getKey( configName ) );
+
+			}
+
+		} );
+
+		// If a valid key binding character is entered, blur the input field
+		shortcutInput.dom.addEventListener( 'keyup', function ( event ) {
+
+			if ( isValidKeyBinding( event.key ) ) {
+
+				shortcutInput.dom.blur();
+
+			}
+
+		} );
+
+		if ( config.getKey( configName ) !== undefined ) {
+
+			shortcutInput.setValue( config.getKey( configName ) );
+
+		}
+
+		shortcutInput.dom.maxLength = 1;
+		shortcutRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts/' + name ) ).setTextTransform( 'capitalize' ).setClass( 'Label' ) );
+		shortcutRow.add( shortcutInput );
+
+		container.add( shortcutRow );
+
+	}
+
+	for ( let i = 0; i < shortcuts.length; i ++ ) {
+
+		createShortcutInput( shortcuts[ i ] );
+
+	}
+
+	document.addEventListener( 'keydown', function ( event ) {
+
+		switch ( event.key.toLowerCase() ) {
+
+			case 'backspace':
+
+				event.preventDefault(); // prevent browser back
+
+				// fall-through
+
+			case 'delete':
+
+				const object = editor.selected;
+
+				if ( object === null ) return;
+
+				const parent = object.parent;
+				if ( parent !== null ) editor.execute( new RemoveObjectCommand( editor, object ) );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/translate' ):
+
+				signals.transformModeChanged.dispatch( 'translate' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/rotate' ):
+
+				signals.transformModeChanged.dispatch( 'rotate' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/scale' ):
+
+				signals.transformModeChanged.dispatch( 'scale' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/undo' ):
+
+				if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
+
+					event.preventDefault(); // Prevent browser specific hotkeys
+
+					if ( event.shiftKey ) {
+
+						editor.redo();
+
+					} else {
+
+						editor.undo();
+
+					}
+
+				}
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/focus' ):
+
+				if ( editor.selected !== null ) {
+
+					editor.focus( editor.selected );
+
+				}
+
+				break;
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarSettingsShortcuts };

package/client/editor/js/Sidebar.Settings.js

@@ -0,0 +1,60 @@
+import { UIPanel, UIRow, UISelect, UISpan, UIText } from './libs/ui.js';
+
+import { SidebarSettingsShortcuts } from './Sidebar.Settings.Shortcuts.js';
+import { SidebarSettingsHistory } from './Sidebar.Settings.History.js';
+
+function SidebarSettings( editor ) {
+
+	const config = editor.config;
+	const strings = editor.strings;
+
+	const container = new UISpan();
+
+	const settings = new UIPanel();
+	settings.setBorderTop( '0' );
+	settings.setPaddingTop( '20px' );
+	container.add( settings );
+
+	// language
+
+	const options = {
+		en: 'English',
+		fr: 'Français',
+		zh: '中文',
+		ja: '日本語',
+		ko: '한국어',
+	};
+
+	const languageRow = new UIRow();
+	const language = new UISelect().setWidth( '150px' );
+	language.setOptions( options );
+
+	if ( config.getKey( 'language' ) !== undefined ) {
+
+		language.setValue( config.getKey( 'language' ) );
+
+	}
+
+	language.onChange( function () {
+
+		const value = this.getValue();
+
+		editor.config.setKey( 'language', value );
+
+	} );
+
+	languageRow.add( new UIText( strings.getKey( 'sidebar/settings/language' ) ).setClass( 'Label' ) );
+	languageRow.add( language );
+
+	settings.add( languageRow );
+
+	//
+
+	container.add( new SidebarSettingsShortcuts( editor ) );
+	container.add( new SidebarSettingsHistory( editor ) );
+
+	return container;
+
+}
+
+export { SidebarSettings };

package/client/editor/js/Sidebar.js

@@ -0,0 +1,41 @@
+import { UITabbedPanel, UISpan } from './libs/ui.js';
+
+import { SidebarScene } from './Sidebar.Scene.js';
+import { SidebarProperties } from './Sidebar.Properties.js';
+import { SidebarProject } from './Sidebar.Project.js';
+import { SidebarSettings } from './Sidebar.Settings.js';
+
+function Sidebar( editor ) {
+
+	const strings = editor.strings;
+
+	const container = new UITabbedPanel();
+	container.setId( 'sidebar' );
+
+	const sidebarProperties = new SidebarProperties( editor );
+
+	const scene = new UISpan().add(
+		new SidebarScene( editor ),
+		sidebarProperties
+	);
+	const project = new SidebarProject( editor );
+	const settings = new SidebarSettings( editor );
+
+	container.addTab( 'scene', strings.getKey( 'sidebar/scene' ), scene );
+	container.addTab( 'project', strings.getKey( 'sidebar/project' ), project );
+	container.addTab( 'settings', strings.getKey( 'sidebar/settings' ), settings );
+	container.select( 'scene' );
+
+	const sidebarPropertiesResizeObserver = new ResizeObserver( function () {
+
+		sidebarProperties.tabsDiv.setWidth( getComputedStyle( container.dom ).width );
+
+	} );
+
+	sidebarPropertiesResizeObserver.observe( container.tabsDiv.dom );
+
+	return container;
+
+}
+
+export { Sidebar };

package/client/editor/js/Storage.js

@@ -0,0 +1,98 @@
+function Storage() {
+
+	const indexedDB = window.indexedDB;
+
+	if ( indexedDB === undefined ) {
+
+		console.warn( 'Storage: IndexedDB not available.' );
+		return { init: function () {}, get: function () {}, set: function () {}, clear: function () {} };
+
+	}
+
+	const name = 'threejs-editor';
+	const version = 1;
+
+	let database;
+
+	return {
+
+		init: function ( callback ) {
+
+			const request = indexedDB.open( name, version );
+			request.onupgradeneeded = function ( event ) {
+
+				const db = event.target.result;
+
+				if ( db.objectStoreNames.contains( 'states' ) === false ) {
+
+					db.createObjectStore( 'states' );
+
+				}
+
+			};
+
+			request.onsuccess = function ( event ) {
+
+				database = event.target.result;
+
+				callback();
+
+			};
+
+			request.onerror = function ( event ) {
+
+				console.error( 'IndexedDB', event );
+
+			};
+
+
+		},
+
+		get: function ( callback ) {
+
+			const transaction = database.transaction( [ 'states' ], 'readonly' );
+			const objectStore = transaction.objectStore( 'states' );
+			const request = objectStore.get( 0 );
+			request.onsuccess = function ( event ) {
+
+				callback( event.target.result );
+
+			};
+
+		},
+
+		set: function ( data ) {
+
+			const start = performance.now();
+
+			const transaction = database.transaction( [ 'states' ], 'readwrite' );
+			const objectStore = transaction.objectStore( 'states' );
+			const request = objectStore.put( data, 0 );
+			request.onsuccess = function () {
+
+				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB. ' + ( performance.now() - start ).toFixed( 2 ) + 'ms' );
+
+			};
+
+		},
+
+		clear: function () {
+
+			if ( database === undefined ) return;
+
+			const transaction = database.transaction( [ 'states' ], 'readwrite' );
+			const objectStore = transaction.objectStore( 'states' );
+			const request = objectStore.clear();
+			request.onsuccess = function () {
+
+				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Cleared IndexedDB.' );
+
+			};
+
+		}
+
+	};
+
+}
+
+export { Storage };