Merge pull request #12612 from TyLindberg/editor-controls-panel

Editor: Added a new panel for editing key bindings

editor/index.html

@@ -127,6 +127,7 @@
 		<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>
@@ -163,8 +164,6 @@
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
-			const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
-
 			Number.prototype.format = function (){
 				return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
 			};
@@ -292,67 +291,6 @@
 
 			}, false );
 
-			document.addEventListener( 'keydown', function ( event ) {
-
-				switch ( event.keyCode ) {
-
-					case 8: // backspace
-
-						event.preventDefault(); // prevent browser back
-
-					case 46: // delete
-
-						var object = editor.selected;
-
-						if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
-
-						var parent = object.parent;
-						if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
-
-						break;
-
-					case 90: // Register Ctrl-Z for Undo, Ctrl-Shift-Z for Redo
-
-						if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
-
-							event.preventDefault(); // Prevent Safari from opening/closing tabs
-
-							if ( event.shiftKey ) {
-
-								editor.redo();
-
-							} else {
-
-								editor.undo();
-
-							}
-
-						}
-
-						break;
-
-					case 87: // Register W for translation transform mode
-
-						editor.signals.transformModeChanged.dispatch( 'translate' );
-
-						break;
-
-					case 69: // Register E for rotation transform mode
-
-						editor.signals.transformModeChanged.dispatch( 'rotate' );
-
-						break;
-
-					case 82: // Register R for scaling transform mode
-
-						editor.signals.transformModeChanged.dispatch( 'scale' );
-
-						break;
-
-				}
-
-			}, false );
-
 			function onWindowResize( event ) {
 
 				editor.signals.windowResize.dispatch();

editor/js/Config.js

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

editor/js/Sidebar.Controls.js

@@ -0,0 +1,154 @@
+/**
+ * @author TyLindberg / https://github.com/TyLindberg
+ */
+
+Sidebar.Controls = function ( editor ) {
+
+	var config = editor.config;
+	var signals = editor.signals;
+
+	const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
+
+	var isValidKeyBinding = function ( key ) {
+
+		return key.match( /^[A-Za-z0-9]$/i ); // Can't use z currently due to undo/redo
+
+	};
+
+	var container = new UI.Panel();
+	container.add( new UI.Text( 'CONTROLS' ) );
+
+	// Use this to add a line break above the panel
+	container.add( new UI.Break(), new UI.Break() );
+
+	var controlNames = [
+		'translate',
+		'rotate',
+		'scale',
+		'undo'
+	];
+
+	for ( var i = 0; i < controlNames.length; i ++ ) {
+
+		let name = controlNames[ i ];
+		let configName = 'settings/controls/' + name;
+		let controlRow = new UI.Row();
+
+		let controlInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+			if ( isValidKeyBinding( controlInput.getValue() ) ) {
+
+				config.setKey( configName, controlInput.getValue()[ 0 ] );
+
+			}
+
+		} );
+
+		// Automatically highlight when selecting an input field
+		controlInput.dom.addEventListener( 'focus', function () {
+
+			controlInput.dom.select();
+
+		} );
+
+		// If the value of the input field is invalid, revert the input field
+		// to contain the key binding stored in config
+		controlInput.dom.addEventListener( 'blur', function () {
+
+			if ( ! isValidKeyBinding( controlInput.getValue() ) ) {
+
+				controlInput.setValue( config.getKey( configName ) );
+
+			}
+
+		} );
+
+		// If a valid key binding character is entered, blur the input field
+		controlInput.dom.addEventListener( 'keyup', function ( event ) {
+
+			if ( isValidKeyBinding( event.key ) ) {
+
+				controlInput.dom.blur();
+
+			}
+
+		} );
+
+		if ( config.getKey( configName ) !== undefined ) {
+
+			controlInput.setValue( config.getKey( configName ) );
+
+		}
+
+		controlInput.dom.maxLength = 1;
+		controlRow.add( new UI.Text( name.charAt( 0 ).toUpperCase() + name.slice( 1 ) ).setWidth( '90px' ) );
+		controlRow.add( controlInput );
+		container.add( controlRow );
+
+	}
+
+	document.addEventListener( 'keydown', function ( event ) {
+
+		switch ( event.key ) {
+
+			case 'Backspace':
+
+				event.preventDefault(); // prevent browser back
+
+			case 'Delete':
+
+				var object = editor.selected;
+
+				if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
+
+				var parent = object.parent;
+				if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
+
+				break;
+
+			case editor.config.getKey( 'settings/controls/translate' ): // Translation transform mode
+
+				editor.signals.transformModeChanged.dispatch( 'translate' );
+
+				break;
+
+			case editor.config.getKey( 'settings/controls/rotate' ): // Rotation transform mode
+
+				editor.signals.transformModeChanged.dispatch( 'rotate' );
+
+				break;
+
+			case editor.config.getKey( 'settings/controls/scale' ): // Scaling transform mode
+
+				editor.signals.transformModeChanged.dispatch( 'scale' );
+
+				break;
+
+			case editor.config.getKey( 'settings/controls/undo' ).toLowerCase(): // Register Ctrl/Command-Z for Undo and Ctrl/Command-Shift-Z for Redo
+			case editor.config.getKey( 'settings/controls/undo' ).toUpperCase(): // Safari and Firefox register lowercase z when Ctrl-Shift-Z is pressed
+
+				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.js

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