feat: Add keyboard shortcuts to navigate between stacks

Author: gonfunko

packages/blockly/core/keyboard_nav/navigators/navigator.ts

@@ -456,6 +456,7 @@ export class Navigator {
   /**
    * Returns the next/previous stack relative to the given element's stack.
    *
+   * @internal
    * @param current The element whose stack will be navigated relative to.
    * @param delta The difference in index to navigate; positive values navigate
    *     to the nth next stack, while negative values navigate to the nth
@@ -464,7 +465,7 @@ export class Navigator {
    *     current element's stack, or the last element in the stack offset by
    * `delta` relative to the current element's stack when navigating backwards.
    */
-  protected navigateStacks(current: IFocusableNode, delta: number) {
+  navigateStacks(current: IFocusableNode, delta: number) {
     const stacks = this.getTopLevelItems(current);
     const root =
       this.getSourceBlockFromNode(current)?.getRootBlock() ?? current;

packages/blockly/core/shortcut_items.ts

@@ -17,6 +17,7 @@ import {isCopyable as isICopyable} from './interfaces/i_copyable.js';
 import {isDeletable as isIDeletable} from './interfaces/i_deletable.js';
 import {type IDraggable, isDraggable} from './interfaces/i_draggable.js';
 import {type IFocusableNode} from './interfaces/i_focusable_node.js';
+import {isSelectable} from './interfaces/i_selectable.js';
 import {Direction, KeyboardMover} from './keyboard_nav/keyboard_mover.js';
 import {keyboardNavigationController} from './keyboard_navigation_controller.js';
 import {KeyboardShortcut, ShortcutRegistry} from './shortcut_registry.js';
@@ -53,6 +54,8 @@ export enum names {
   NAVIGATE_UP = 'up',
   NAVIGATE_DOWN = 'down',
   DISCONNECT = 'disconnect',
+  NEXT_STACK = 'next_stack',
+  PREVIOUS_STACK = 'previous_stack',
 }
 
 /**
@@ -716,6 +719,75 @@ export function registerDisconnectBlock() {
   ShortcutRegistry.registry.register(disconnectShortcut);
 }
 
+/**
+ * Registers keyboard shortcuts to jump between stacks/top-level items on the
+ * workspace.
+ */
+export function registerStackNavigation() {
+  /**
+   * Finds the stack root of the currently focused or specified item.
+   */
+  const resolveStack = (
+    workspace: WorkspaceSvg,
+    node = getFocusManager().getFocusedNode(),
+  ) => {
+    const navigator = workspace.getNavigator();
+
+    for (
+      let parent: IFocusableNode | null = node;
+      parent && parent !== workspace;
+      parent = navigator.getParent(node)
+    ) {
+      node = parent;
+    }
+
+    if (!isSelectable(node)) return null;
+
+    return node;
+  };
+
+  const nextStackShortcut: KeyboardShortcut = {
+    name: names.NEXT_STACK,
+    preconditionFn: (workspace) =>
+      !workspace.isDragging() && !!resolveStack(workspace),
+    callback: (workspace) => {
+      keyboardNavigationController.setIsActive(true);
+      const start = resolveStack(workspace);
+      if (!start) return false;
+      const target = workspace.getNavigator().navigateStacks(start, 1);
+      if (!target) return false;
+      getFocusManager().focusNode(target);
+      return true;
+    },
+    keyCodes: [KeyCodes.N],
+  };
+
+  const previousStackShortcut: KeyboardShortcut = {
+    name: names.PREVIOUS_STACK,
+    preconditionFn: (workspace) =>
+      !workspace.isDragging() && !!resolveStack(workspace),
+    callback: (workspace) => {
+      keyboardNavigationController.setIsActive(true);
+      const start = resolveStack(workspace);
+      if (!start) return false;
+      // navigateStacks() returns the last connection in the stack when going
+      // backwards, but we want the root block, so resolve the stack from the
+      // element we get back.
+      const target = resolveStack(
+        workspace,
+        workspace.getNavigator().navigateStacks(start, -1),
+      );
+      if (!target) return false;
+      getFocusManager().focusNode(target);
+      return true;
+    },
+    keyCodes: [KeyCodes.B],
+  };
+
+  ShortcutRegistry.registry.register(nextStackShortcut);
+  ShortcutRegistry.registry.register(previousStackShortcut);
+}
+
 /**
  * Registers all default keyboard shortcut item. This should be called once per
  * instance of KeyboardShortcutRegistry.
@@ -743,6 +815,7 @@ export function registerKeyboardNavigationShortcuts() {
   registerFocusToolbox();
   registerArrowNavigation();
   registerDisconnectBlock();
+  registerStackNavigation();
 }
 
 registerDefaultShortcuts();