Designer Component - Keyboard shortcuts

Designer Component - Keyboard shortcuts

Posted by: mhill on 27 July 2021, 12:33 pm EST

• 

  mhill

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 July 2021, 12:33 pm EST

  Hi,
  
  I would like to add some keyboard shortcuts to some of the buttons in the Designer component.
  
  For example, I would like to map ctrl-b to the button to toggle the bold.

  I have tried the following, but it didn’t work.
  
  ```

  spread.commandManager().setShortcutKey(“Designer.setFontWeight”, “b”.charCodeAt(0), true, false, false, false);

  
  Please can you let me know if something like this is possible.
  
  Also, if possible, I would like to map the key 'F2' to start editing a cell (which is what happens in Excel). Could you advise on that too please.
  
  Thanks!

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 3:59 am EST

  Hi,

  For this, you need to create a custom command which executes the fontWieght designer command similarly for the f2 command you need to create a custom command which perfmor the same action as excel does. Please refer to the following code snippet and let us know if you face any issues.

  
  export function registerCommands(spread, designer) {
    var sheet = spread.getActiveSheet();
    var f2Cmd = {
      canUndo: false,
      execute: function(spread) {
        var sheet = spread.getActiveSheet();
        debugger;
        if (!sheet.isEditing()) {
          sheet.startEdit();
        }
        return true;
      }
    };
  
    var boldCmd = {
      canUndo: true,
      execute: function(spread, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
          Commands.undoTransaction(spread, options);
          return true;
        } else {
          Commands.startTransaction(spread, options);
          spread.suspendPaint();
          
          // you may also implement this by using the following code
          // document
          //   .querySelector('.ribbon-button-item-icon.ribbon-button-bold')
          //   .click();
  
          let isBold =
            document
              .querySelector('.ribbon-button-item-icon.ribbon-button-bold')
              ?.parentElement?.getAttribute('checked') === 'true'
              ? true
              : false;
          GC.Spread.Sheets.Designer.getCommand(
            GC.Spread.Sheets.Designer.CommandNames.FontWeight
          ).execute(designer, {}, !isBold);
          designer.refresh();
          spread.resumePaint();
          Commands.endTransaction(spread, options);
          return true;
        }
      }
    };
    var selections = sheet.getSelections();
    var commandManager = spread.commandManager();
    commandManager.register('f', f2Cmd, 113, false, false, false);
    commandManager.register('f', boldCmd, 66, true, false, false);
  }
  
  
  

  sample: https://stackblitz.com/edit/js-edeyd4?file=commands.js

  custom command Demo: https://www.grapecity.com/spreadjs/demos/features/worksheet/actions/custom-action#demo_source_name

  Regards,
  
  Avinash

• 

  mhill

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 5:56 am EST

  Thank you Avinash, I was able to get that to work. I appreciate it. One thing I needed to do though was to remove the commands.startTransaction() and commands.endTransaction() in order for the undo to work. I would guess that the designer is handling the undo itself so starting and ending a transaction was probably just confusing it.

  My code ended up looking like this (for italics too)

  
  function getKeyboardCommands() {
      return {
          italicCmd: {
              canUndo: true,
              execute: function ( spread, options, isUndo ) {
                  var Commands = GC.Spread.Sheets.Commands;
                  if ( isUndo ) {
                      Commands.undoTransaction( spread, options );
                      return true;
                  }
                  else {
                      spread.suspendPaint();
                      document
                              .querySelector( '.ribbon-button-item-icon.ribbon-button-italic' )
                              .click();
                      designer.refresh();
                      spread.resumePaint();
                      return true;
                  }
              }
          },
          boldCmd: {
              ...
  
  

  and

  
          var keyboardCommands = getKeyboardCommands();
          var commandManager = spread.commandManager();
          commandManager.register('italic', keyboardCommands.italicCmd, 73, true, false, false);
          commandManager.register('bold', keyboardCommands.boldCmd, 66, true, false, false);
  
  

  Thanks very much for your help.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 3:55 am EST

  Hi,

  We are glad to know that the issue has been resolved. Further, if you are not changing the sheet you may simplify the command just define the execute function. Please refer to the following code snippet and let us know if you face any issues.

  
    var boldCmd = {
      canUndo: false,
      execute: function() {
        document
          .querySelector('.ribbon-button-item-icon.ribbon-button-bold')
          .click();
        return true;
      }
    };
  
  

  Regards
  
  Avinash

• 

  mhill

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 4:15 am EST

  Yes, you’re absolutely correct. Worked just fine. Very tidy!

  Thx.