Editor: Sidebar.Controls to Sidebar.Settings.Shortcuts. Clean up.

editor/index.html

@@ -106,6 +106,7 @@
 		<script src="js/Sidebar.Scene.js"></script>
 		<script src="js/Sidebar.Project.js"></script>
 		<script src="js/Sidebar.Settings.js"></script>
+		<script src="js/Sidebar.Settings.Shortcuts.js"></script>
 		<script src="js/Sidebar.Properties.js"></script>
 		<script src="js/Sidebar.Object.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>
@@ -127,7 +128,6 @@
 		<script src="js/Sidebar.Animation.js"></script>
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Sidebar.History.js"></script>
-		<script src="js/Sidebar.Controls.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
 		<script src="js/Viewport.Info.js"></script>

editor/js/Config.js

@@ -21,10 +21,10 @@ var Config = function ( name ) {
 
 		'settings/history': false,
 
-		'settings/controls/translate': 'w',
-		'settings/controls/rotate': 'e',
-		'settings/controls/scale': 'r',
-		'settings/controls/undo': 'z'
+		'settings/shortcuts/translate': 'w',
+		'settings/shortcuts/rotate': 'e',
+		'settings/shortcuts/scale': 'r',
+		'settings/shortcuts/undo': 'z'
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {

editor/js/Sidebar.Settings.Shortcuts.js

@@ -0,0 +1,154 @@
+/**
+ * @author TyLindberg / https://github.com/TyLindberg
+ */
+
+Sidebar.Settings.Shortcuts = function ( editor ) {
+
+	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
+
+	}
+
+	var config = editor.config;
+	var signals = editor.signals;
+
+	var container = new UI.Div();
+	container.add( new UI.Break() );
+
+	var shortcuts = [ 'translate', 'rotate', 'scale', 'undo' ];
+
+	for ( var i = 0; i < shortcuts.length; i ++ ) {
+
+		let name = shortcuts[ i ];
+
+		let configName = 'settings/shortcuts/' + name;
+		let shortcutRow = new UI.Row();
+
+		let shortcutInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' );
+		shortcutInput.setTextTransform( 'lowercase' );
+		shortcutInput.onChange( function () {
+
+			var value = shortcutInput.getValue().toLowerCase();
+
+			if ( isValidKeyBinding( value ) ) {
+
+				config.setKey( configName, value );
+
+			}
+
+		} );
+
+		// Automatically highlight when selecting an input field
+		shortcutInput.dom.addEventListener( 'focus', 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 UI.Text( name ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
+		shortcutRow.add( shortcutInput );
+
+		container.add( shortcutRow );
+
+	}
+
+	document.addEventListener( 'keydown', function ( event ) {
+
+		switch ( event.key.toLowerCase() ) {
+
+			case 'Backspace':
+
+				event.preventDefault(); // prevent browser back
+
+				break;
+
+			case 'Delete':
+
+				var object = editor.selected;
+
+				if ( object === null ) return;
+				if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
+
+				var parent = object.parent;
+				if ( parent !== null ) editor.execute( new RemoveObjectCommand( 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;
+
+		}
+
+	}, false );
+
+	return container;
+
+};

editor/js/Sidebar.Settings.js

@@ -42,6 +42,8 @@ Sidebar.Settings = function ( editor ) {
 
 	container.add( themeRow );
 
+	container.add( new Sidebar.Settings.Shortcuts( editor ) );
+
 	return container;
 
 };

editor/js/Sidebar.js

@@ -41,8 +41,7 @@ var Sidebar = function ( editor ) {
 
 	var settings = new UI.Span().add(
 		new Sidebar.Settings( editor ),
-		new Sidebar.History( editor ),
-		new Sidebar.Controls( editor )
+		new Sidebar.History( editor )
 	);
 	container.add( settings );