Sidebar.Settings.Shortcuts.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import { UIPanel, UIText, UIRow, UIInput } from './libs/ui.js';
  2. import { RemoveObjectCommand } from './commands/RemoveObjectCommand.js';
  3. function SidebarSettingsShortcuts( editor ) {
  4. const strings = editor.strings;
  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. const config = editor.config;
  10. const signals = editor.signals;
  11. const container = new UIPanel();
  12. const headerRow = new UIRow();
  13. headerRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts' ).toUpperCase() ) );
  14. container.add( headerRow );
  15. const shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus' ];
  16. function createShortcutInput( name ) {
  17. const configName = 'settings/shortcuts/' + name;
  18. const shortcutRow = new UIRow();
  19. const shortcutInput = new UIInput().setWidth( '15px' ).setFontSize( '12px' );
  20. shortcutInput.setTextAlign( 'center' );
  21. shortcutInput.setTextTransform( 'lowercase' );
  22. shortcutInput.onChange( function () {
  23. const value = shortcutInput.getValue().toLowerCase();
  24. if ( isValidKeyBinding( value ) ) {
  25. config.setKey( configName, value );
  26. }
  27. } );
  28. // Automatically highlight when selecting an input field
  29. shortcutInput.dom.addEventListener( 'click', function () {
  30. shortcutInput.dom.select();
  31. } );
  32. // If the value of the input field is invalid, revert the input field
  33. // to contain the key binding stored in config
  34. shortcutInput.dom.addEventListener( 'blur', function () {
  35. if ( ! isValidKeyBinding( shortcutInput.getValue() ) ) {
  36. shortcutInput.setValue( config.getKey( configName ) );
  37. }
  38. } );
  39. // If a valid key binding character is entered, blur the input field
  40. shortcutInput.dom.addEventListener( 'keyup', function ( event ) {
  41. if ( isValidKeyBinding( event.key ) ) {
  42. shortcutInput.dom.blur();
  43. }
  44. } );
  45. if ( config.getKey( configName ) !== undefined ) {
  46. shortcutInput.setValue( config.getKey( configName ) );
  47. }
  48. shortcutInput.dom.maxLength = 1;
  49. shortcutRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts/' + name ) ).setTextTransform( 'capitalize' ).setClass( 'Label' ) );
  50. shortcutRow.add( shortcutInput );
  51. container.add( shortcutRow );
  52. }
  53. for ( let i = 0; i < shortcuts.length; i ++ ) {
  54. createShortcutInput( shortcuts[ i ] );
  55. }
  56. document.addEventListener( 'keydown', function ( event ) {
  57. switch ( event.key.toLowerCase() ) {
  58. case 'backspace':
  59. event.preventDefault(); // prevent browser back
  60. // fall-through
  61. case 'delete':
  62. const object = editor.selected;
  63. if ( object === null ) return;
  64. const parent = object.parent;
  65. if ( parent !== null ) editor.execute( new RemoveObjectCommand( editor, object ) );
  66. break;
  67. case config.getKey( 'settings/shortcuts/translate' ):
  68. signals.transformModeChanged.dispatch( 'translate' );
  69. break;
  70. case config.getKey( 'settings/shortcuts/rotate' ):
  71. signals.transformModeChanged.dispatch( 'rotate' );
  72. break;
  73. case config.getKey( 'settings/shortcuts/scale' ):
  74. signals.transformModeChanged.dispatch( 'scale' );
  75. break;
  76. case config.getKey( 'settings/shortcuts/undo' ):
  77. if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
  78. event.preventDefault(); // Prevent browser specific hotkeys
  79. if ( event.shiftKey ) {
  80. editor.redo();
  81. } else {
  82. editor.undo();
  83. }
  84. }
  85. break;
  86. case config.getKey( 'settings/shortcuts/focus' ):
  87. if ( editor.selected !== null ) {
  88. editor.focus( editor.selected );
  89. }
  90. break;
  91. }
  92. } );
  93. return container;
  94. }
  95. export { SidebarSettingsShortcuts };