feat!: Allow moving blocks, comments and bubbles using the keyboard

packages/blockly/core/block_svg.ts

@@ -43,7 +43,11 @@ import type {IBoundedElement} from './interfaces/i_bounded_element.js';
 import {IContextMenu} from './interfaces/i_contextmenu.js';
 import type {ICopyable} from './interfaces/i_copyable.js';
 import {IDeletable} from './interfaces/i_deletable.js';
-import type {IDragStrategy, IDraggable} from './interfaces/i_draggable.js';
+import type {
+  DragDisposition,
+  IDragStrategy,
+  IDraggable,
+} from './interfaces/i_draggable.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import {IIcon} from './interfaces/i_icon.js';
@@ -1810,18 +1814,21 @@ export class BlockSvg
   }
 
   /** Starts a drag on the block. */
-  startDrag(e?: PointerEvent): void {
-    this.dragStrategy.startDrag(e);
+  startDrag(e?: PointerEvent | KeyboardEvent) {
+    return this.dragStrategy.startDrag(e);
   }
 
   /** Drags the block to the given location. */
-  drag(newLoc: Coordinate, e?: PointerEvent): void {
+  drag(newLoc: Coordinate, e?: PointerEvent | KeyboardEvent): void {
     this.dragStrategy.drag(newLoc, e);
   }
 
   /** Ends the drag on the block. */
-  endDrag(e?: PointerEvent): void {
-    this.dragStrategy.endDrag(e);
+  endDrag(
+    e: PointerEvent | KeyboardEvent | undefined,
+    disposition: DragDisposition,
+  ): void {
+    this.dragStrategy.endDrag(e, disposition);
   }
 
   /** Moves the block back to where it was at the start of a drag. */
@@ -1880,9 +1887,13 @@ export class BlockSvg
   /** See IFocusableNode.onNodeFocus. */
   onNodeFocus(): void {
     this.select();
-    this.workspace.scrollBoundsIntoView(
-      this.getBoundingRectangleWithoutChildren(),
-    );
+    if (getFocusManager().getFocusedNode() !== this) {
+      renderManagement.finishQueuedRenders().then(() => {
+        this.workspace.scrollBoundsIntoView(
+          this.getBoundingRectangleWithoutChildren(),
+        );
+      });
+    }
   }
 
   /** See IFocusableNode.onNodeBlur. */

packages/blockly/core/blockly.ts

@@ -118,14 +118,19 @@ import * as icons from './icons.js';
 import {inject} from './inject.js';
 import * as inputs from './inputs.js';
 import {IFlyoutInflater} from './interfaces/i_flyout_inflater.js';
+import {Direction, KeyboardMover} from './keyboard_nav/keyboard_mover.js';
+import {MoveIndicator} from './keyboard_nav/move_indicator.js';
 import {LabelFlyoutInflater} from './label_flyout_inflater.js';
 import {SeparatorFlyoutInflater} from './separator_flyout_inflater.js';
 import {FocusableTreeTraverser} from './utils/focusable_tree_traverser.js';
 
 import {Input} from './inputs/input.js';
 import {InsertionMarkerPreviewer} from './insertion_marker_previewer.js';
 import {IAutoHideable} from './interfaces/i_autohideable.js';
-import {IBoundedElement} from './interfaces/i_bounded_element.js';
+import {
+  IBoundedElement,
+  isBoundedElement,
+} from './interfaces/i_bounded_element.js';
 import {IBubble} from './interfaces/i_bubble.js';
 import {ICollapsibleToolboxItem} from './interfaces/i_collapsible_toolbox_item.js';
 import {IComponent} from './interfaces/i_component.js';
@@ -137,6 +142,7 @@ import {IDeletable, isDeletable} from './interfaces/i_deletable.js';
 import {IDeleteArea} from './interfaces/i_delete_area.js';
 import {IDragTarget} from './interfaces/i_drag_target.js';
 import {
+  DragDisposition,
   IDragStrategy,
   IDraggable,
   isDraggable,
@@ -500,6 +506,8 @@ export {
   BlockFlyoutInflater,
   ButtonFlyoutInflater,
   CodeGenerator,
+  Direction,
+  DragDisposition,
   Field,
   FieldCheckbox,
   FieldCheckboxConfig,
@@ -584,6 +592,7 @@ export {
   ImageProperties,
   Input,
   InsertionMarkerPreviewer,
+  KeyboardMover,
   KeyboardNavigationController,
   LabelFlyoutInflater,
   LayerManager,
@@ -595,6 +604,7 @@ export {
   MenuItem,
   MenuOption,
   MetricsManager,
+  MoveIndicator,
   Msg,
   Names,
   Options,
@@ -626,6 +636,7 @@ export {
   icons,
   inject,
   inputs,
+  isBoundedElement,
   isCopyable,
   isDeletable,
   isDraggable,

packages/blockly/core/bubbles/bubble.ts

@@ -8,6 +8,7 @@ import * as browserEvents from '../browser_events.js';
 import * as common from '../common.js';
 import {BubbleDragStrategy} from '../dragging/bubble_drag_strategy.js';
 import {getFocusManager} from '../focus_manager.js';
+import {IBoundedElement} from '../interfaces/i_bounded_element.js';
 import {IBubble} from '../interfaces/i_bubble.js';
 import type {IFocusableNode} from '../interfaces/i_focusable_node.js';
 import type {IFocusableTree} from '../interfaces/i_focusable_tree.js';
@@ -29,7 +30,9 @@ import {WorkspaceSvg} from '../workspace_svg.js';
  * bubble, where it has a "tail" that points to the block, and a "head" that
  * displays arbitrary svg elements.
  */
-export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
+export abstract class Bubble
+  implements IBubble, ISelectable, IFocusableNode, IBoundedElement
+{
   /** The width of the border around the bubble. */
   static readonly BORDER_WIDTH = 6;
 
@@ -274,6 +277,18 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
     this.svgRoot.setAttribute('transform', `translate(${x}, ${y})`);
   }
 
+  /**
+   * Moves the bubble by the given amounts in the x and y directions.
+   *
+   * @param dx The distance to move along the x axis.
+   * @param dy The distance to move along the y axis.
+   * @param _reason A description of why this move is happening.
+   */
+  moveBy(dx: number, dy: number, _reason?: string[]) {
+    const origin = this.getRelativeToSurfaceXY();
+    this.moveTo(origin.x + dx, origin.y + dy);
+  }
+
   /**
    * Positions the bubble "optimally" so that the most of it is visible and
    * it does not overlap the rect (if provided).
@@ -617,6 +632,21 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
     );
   }
 
+  /**
+   * Returns the bounds of this bubble.
+   *
+   * @returns A bounding box for this bubble.
+   */
+  getBoundingRectangle(): Rect {
+    const origin = this.getRelativeToSurfaceXY();
+    return new Rect(
+      origin.y,
+      origin.y + this.size.height,
+      origin.x,
+      origin.x + this.size.width,
+    );
+  }
+
   /** @internal */
   getSvgRoot(): SVGElement {
     return this.svgRoot;
@@ -664,8 +694,8 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
   }
 
   /** Starts a drag on the bubble. */
-  startDrag(): void {
-    this.dragStrategy.startDrag();
+  startDrag() {
+    return this.dragStrategy.startDrag();
   }
 
   /** Drags the bubble to the given location. */

packages/blockly/core/bubbles/mini_workspace_bubble.ts

@@ -6,6 +6,7 @@
 
 import type {BlocklyOptions} from '../blockly_options.js';
 import {Abstract as AbstractEvent} from '../events/events_abstract.js';
+import {KeyboardMover} from '../keyboard_nav/keyboard_mover.js';
 import {Options} from '../options.js';
 import {Coordinate} from '../utils/coordinate.js';
 import * as dom from '../utils/dom.js';
@@ -153,11 +154,10 @@ export class MiniWorkspaceBubble extends Bubble {
    * are dealt with by resizing the workspace to show them.
    */
   private bumpBlocksIntoBounds() {
-    if (
-      this.miniWorkspace.isDragging() &&
-      !this.miniWorkspace.keyboardMoveInProgress
-    )
+    // Only bump for mouse-driven drags.
+    if (this.miniWorkspace.isDragging() && !KeyboardMover.mover.isMoving()) {
       return;
+    }
 
     const MARGIN = 20;
 
@@ -189,15 +189,13 @@ export class MiniWorkspaceBubble extends Bubble {
    * mini workspace.
    */
   private updateBubbleSize() {
-    if (
-      this.miniWorkspace.isDragging() &&
-      !this.miniWorkspace.keyboardMoveInProgress
-    )
+    if (this.miniWorkspace.isDragging() && !KeyboardMover.mover.isMoving()) {
       return;
+    }
 
     // Disable autolayout if a keyboard move is in progress to prevent the
     // mutator bubble from jumping around.
-    this.autoLayout &&= !this.miniWorkspace.keyboardMoveInProgress;
+    this.autoLayout &&= !KeyboardMover.mover.isMoving();
 
     const currSize = this.getSize();
     const newSize = this.calculateWorkspaceSize();

packages/blockly/core/comments/rendered_workspace_comment.ts

@@ -239,8 +239,8 @@ export class RenderedWorkspaceComment
   }
 
   /** Starts a drag on the comment. */
-  startDrag(): void {
-    this.dragStrategy.startDrag();
+  startDrag() {
+    return this.dragStrategy.startDrag();
   }
 
   /** Drags the comment to the given location. */

packages/blockly/core/comments/workspace_comment.ts

@@ -221,7 +221,7 @@ export class WorkspaceComment {
 
   /** Returns the position of the comment in workspace coordinates. */
   getRelativeToSurfaceXY(): Coordinate {
-    return this.location;
+    return this.location.clone();
   }
 
   /** Disposes of this comment. */