Sidebar.Settings.Shortcuts.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /**
  2. * @author TyLindberg / https://github.com/TyLindberg
  3. */
  4. Sidebar.Settings.Shortcuts = function ( editor ) {
  5. const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
  6. function isValidKeyBinding( key ) {
  7. return key.match( /^[A-Za-z0-9]$/i ); // Can't use z currently due to undo/redo
  8. }
  9. var config = editor.config;
  10. var signals = editor.signals;
  11. var container = new UI.Div();
  12. container.add( new UI.Break() );
  13. var shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus' ];
  14. for ( var i = 0; i < shortcuts.length; i ++ ) {
  15. let name = shortcuts[ i ];
  16. let configName = 'settings/shortcuts/' + name;
  17. let shortcutRow = new UI.Row();
  18. let shortcutInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' );
  19. shortcutInput.setTextTransform( 'lowercase' );
  20. shortcutInput.onChange( function () {
  21. var value = shortcutInput.getValue().toLowerCase();
  22. if ( isValidKeyBinding( value ) ) {
  23. config.setKey( configName, value );
  24. }
  25. } );
  26. // Automatically highlight when selecting an input field
  27. shortcutInput.dom.addEventListener( 'click', function () {
  28. shortcutInput.dom.select();
  29. } );
  30. // If the value of the input field is invalid, revert the input field
  31. // to contain the key binding stored in config
  32. shortcutInput.dom.addEventListener( 'blur', function () {
  33. if ( ! isValidKeyBinding( shortcutInput.getValue() ) ) {
  34. shortcutInput.setValue( config.getKey( configName ) );
  35. }
  36. } );
  37. // If a valid key binding character is entered, blur the input field
  38. shortcutInput.dom.addEventListener( 'keyup', function ( event ) {
  39. if ( isValidKeyBinding( event.key ) ) {
  40. shortcutInput.dom.blur();
  41. }
  42. } );
  43. if ( config.getKey( configName ) !== undefined ) {
  44. shortcutInput.setValue( config.getKey( configName ) );
  45. }
  46. shortcutInput.dom.maxLength = 1;
  47. shortcutRow.add( new UI.Text( name ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
  48. shortcutRow.add( shortcutInput );
  49. container.add( shortcutRow );
  50. }
  51. document.addEventListener( 'keydown', function ( event ) {
  52. switch ( event.key.toLowerCase() ) {
  53. case 'backspace':
  54. event.preventDefault(); // prevent browser back
  55. // fall-through
  56. case 'delete':
  57. var object = editor.selected;
  58. if ( object === null ) return;
  59. var parent = object.parent;
  60. if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
  61. break;
  62. case config.getKey( 'settings/shortcuts/translate' ):
  63. signals.transformModeChanged.dispatch( 'translate' );
  64. break;
  65. case config.getKey( 'settings/shortcuts/rotate' ):
  66. signals.transformModeChanged.dispatch( 'rotate' );
  67. break;
  68. case config.getKey( 'settings/shortcuts/scale' ):
  69. signals.transformModeChanged.dispatch( 'scale' );
  70. break;
  71. case config.getKey( 'settings/shortcuts/undo' ):
  72. if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
  73. event.preventDefault(); // Prevent browser specific hotkeys
  74. if ( event.shiftKey ) {
  75. editor.redo();
  76. } else {
  77. editor.undo();
  78. }
  79. }
  80. break;
  81. case config.getKey( 'settings/shortcuts/focus' ):
  82. if ( editor.selected !== null ) {
  83. editor.focus( editor.selected );
  84. }
  85. break;
  86. }
  87. }, false );
  88. return container;
  89. };