@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Script.js

@@ -0,0 +1,129 @@
+import { UIPanel, UIBreak, UIButton, UIRow, UIInput } from './libs/ui.js';
+
+import { AddScriptCommand } from './commands/AddScriptCommand.js';
+import { SetScriptValueCommand } from './commands/SetScriptValueCommand.js';
+import { RemoveScriptCommand } from './commands/RemoveScriptCommand.js';
+
+function SidebarScript( editor ) {
+
+	const strings = editor.strings;
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
+	container.setDisplay( 'none' );
+
+	//
+
+	const scriptsContainer = new UIRow();
+	container.add( scriptsContainer );
+
+	const newScript = new UIButton( strings.getKey( 'sidebar/script/new' ) );
+	newScript.onClick( function () {
+
+		const script = { name: '', source: 'function update( event ) {}' };
+		editor.execute( new AddScriptCommand( editor, editor.selected, script ) );
+
+	} );
+	container.add( newScript );
+
+	/*
+	let loadScript = new UI.Button( 'Load' );
+	loadScript.setMarginLeft( '4px' );
+	container.add( loadScript );
+	*/
+
+	//
+
+	function update() {
+
+		scriptsContainer.clear();
+		scriptsContainer.setDisplay( 'none' );
+
+		const object = editor.selected;
+
+		if ( object === null ) {
+
+			return;
+
+		}
+
+		const scripts = editor.scripts[ object.uuid ];
+
+		if ( scripts !== undefined && scripts.length > 0 ) {
+
+			scriptsContainer.setDisplay( 'block' );
+
+			for ( let i = 0; i < scripts.length; i ++ ) {
+
+				( function ( object, script ) {
+
+					const name = new UIInput( script.name ).setWidth( '130px' ).setFontSize( '12px' );
+					name.onChange( function () {
+
+						editor.execute( new SetScriptValueCommand( editor, editor.selected, script, 'name', this.getValue() ) );
+
+					} );
+					scriptsContainer.add( name );
+
+					const edit = new UIButton( strings.getKey( 'sidebar/script/edit' ) );
+					edit.setMarginLeft( '4px' );
+					edit.onClick( function () {
+
+						signals.editScript.dispatch( object, script );
+
+					} );
+					scriptsContainer.add( edit );
+
+					const remove = new UIButton( strings.getKey( 'sidebar/script/remove' ) );
+					remove.setMarginLeft( '4px' );
+					remove.onClick( function () {
+
+						if ( confirm( strings.getKey( 'prompt/script/remove' ) ) ) {
+
+							editor.execute( new RemoveScriptCommand( editor, editor.selected, script ) );
+
+						}
+
+					} );
+					scriptsContainer.add( remove );
+
+					scriptsContainer.add( new UIBreak() );
+
+				} )( object, scripts[ i ] );
+
+			}
+
+		}
+
+	}
+
+	// signals
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null && editor.camera !== object ) {
+
+			container.setDisplay( 'block' );
+
+			update();
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	} );
+
+	signals.scriptAdded.add( update );
+	signals.scriptRemoved.add( update );
+	signals.scriptChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarScript };

package/src/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/src/editor/js/Sidebar.Settings.Shortcuts.js

@@ -0,0 +1,198 @@
+import { UIPanel, UIText, UIRow, UIInput } from './libs/ui.js';
+
+import { MultiCmdsCommand } from './commands/MultiCmdsCommand.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', 'perspective', 'orthographic' ];
+
+	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 || object.parent === null ) return;
+
+				if ( object.isSpotLight || object.isDirectionalLight ) {
+
+					editor.execute( new MultiCmdsCommand( editor, [
+						new RemoveObjectCommand( editor, object ),
+						new RemoveObjectCommand( editor, object.target )
+					] ) );
+
+				} else {
+
+					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;
+
+			case config.getKey( 'settings/shortcuts/perspective' ):
+
+				editor.setCameraType( 'perspective' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/orthographic' ):
+
+				editor.setCameraType( 'orthographic' );
+
+				break;
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarSettingsShortcuts };

package/src/editor/js/Sidebar.Settings.js

@@ -0,0 +1,58 @@
+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 = Object.fromEntries( [ 'en', 'fr', 'zh', 'ja', 'ko', 'fa' ].map( locale => {
+
+		return [ locale, new Intl.DisplayNames( locale, { type: 'language' } ).of( locale ) ];
+
+	} ) );
+
+	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/src/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/src/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 };