Keyboard Shortcuts

Keyboard shortcuts are a great way to increase the productivity of the users. Currently the Sequential Workflow Designer supports the following keyboard shortcuts:

Shortcut	Action	Keys
Delete selected step	delete	Delete, Backspace

By default the keyboard shortcuts are enabled. To disable them you need to set the keyboard property to false in the configuration object.

JavaScript

const configuration = {
  keyboard: false,
  // ...
};
const designer = Designer.create(placeholder, definition, configuration);

React

<SequentialWorkflowDesigner ...
  keyboard={false} />

Angular

<sqd-designer ...
  [keyboard]="false">
</sqd-designer>

Svelte

<SequentialWorkflowDesigner ...
    keyboard={false} />

If you have on the page more components that use keyboard shortcuts you can filter the keyboard events handled by the Sequential Workflow Designer.

JavaScript

const configuration = {
  keyboard: {
    canHandleKey: (action: string, event: KeyboardEvent) => {
      if (...) {
        return false; // Stop handling the event
      }
      return true;
    }
  },
  // ...
};

React

const keyboard = useMemo(() => ({
  canHandleKey: (action: string, event: KeyboardEvent) => {
    return true;
  }
}), []);

<SequentialWorkflowDesigner ...
  keyboard={keyboard} />

Angular

public readonly keyboard = {
  canHandleKey: (action: string, event: KeyboardEvent) => {
    return true;
  }
};

<sqd-designer ...
  [keyboard]="keyboard">
</sqd-designer>

Svelte

const keyboard = {
  canHandleKey: (action: string, event: KeyboardEvent) => {
    return true;
  }
};

<SequentialWorkflowDesigner ...
    keyboard={keyboard} />