feat: make the marker ephemeral (#187)

* feat: add passive focus indicator

* feat: add passive_focus.ts

* chore: remove old marker code

* chore: undo unwanted formatting

* chore: code cleanup

* chore: code cleanup

* feat: create a DOM element for the passive focus indicator

* fix: hide cursor when opening toolbox or flyout

Author: rachel-fenichel

src/navigation.ts

@@ -17,6 +17,7 @@ import {
   registrationType as cursorRegistrationType,
   FlyoutCursor,
 } from './flyout_cursor';
+import {PassiveFocus} from './passive_focus';
 
 /**
  * Class that holds all methods necessary for keyboard navigation to work.
@@ -33,11 +34,6 @@ export class Navigation {
    */
   WS_MOVE_DISTANCE = 40;
 
-  /**
-   * The name of the marker to use for keyboard navigation.
-   */
-  MARKER_NAME = 'local_marker_1';
-
   /**
    * The default coordinate to use when focusing on the workspace and no
    * blocks are present. In pixel coordinates, but will be converted to
@@ -72,6 +68,17 @@ export class Navigation {
    */
   protected workspaces: Blockly.WorkspaceSvg[] = [];
 
+  /**
+   * An object that renders a passive focus indicator at a specified location.
+   */
+  protected passiveFocusIndicator: PassiveFocus = new PassiveFocus();
+
+  /**
+   * The node that has passive focus when the cursor has moved to the flyout
+   * or toolbox; null if the cursor is moving around the main workspace.
+   */
+  protected markedNode: Blockly.ASTNode | null = null;
+
   /**
    * Constructor for keyboard navigation.
    */
@@ -90,9 +97,6 @@ export class Navigation {
   addWorkspace(workspace: Blockly.WorkspaceSvg) {
     this.workspaces.push(workspace);
     const flyout = workspace.getFlyout();
-    workspace
-      .getMarkerManager()
-      .registerMarker(this.MARKER_NAME, new Blockly.Marker());
     workspace.addChangeListener(this.wsChangeWrapper);
 
     if (flyout) {
@@ -116,9 +120,7 @@ export class Navigation {
     if (workspaceIdx > -1) {
       this.workspaces.splice(workspaceIdx, 1);
     }
-    if (workspace.getMarkerManager()) {
-      workspace.getMarkerManager().unregisterMarker(this.MARKER_NAME);
-    }
+    this.passiveFocusIndicator.dispose();
     workspace.removeChangeListener(this.wsChangeWrapper);
 
     if (flyout) {
@@ -146,16 +148,6 @@ export class Navigation {
     return this.workspaceStates[workspace.id];
   }
 
-  /**
-   * Gets the marker created for keyboard navigation.
-   *
-   * @param workspace The workspace to get the marker from.
-   * @returns The marker created for keyboard navigation.
-   */
-  getMarker(workspace: Blockly.WorkspaceSvg): Blockly.Marker | null {
-    return workspace.getMarker(this.MARKER_NAME);
-  }
-
   /**
    * Adds all event listeners and cursors to the flyout that are needed for
    * keyboard navigation to work.
@@ -480,13 +472,11 @@ export class Navigation {
       return;
     }
 
+    this.markAtCursor(workspace);
+    workspace.getCursor()?.hide();
     this.setState(workspace, Constants.STATE.TOOLBOX);
     this.resetFlyout(workspace, false /* shouldHide */);
 
-    if (!this.getMarker(workspace)!.getCurNode()) {
-      this.markAtCursor(workspace);
-    }
-
     if (!toolbox.getSelectedItem()) {
       // Find the first item that is selectable.
       const toolboxItems = (toolbox as any).getToolboxItems();
@@ -506,14 +496,12 @@ export class Navigation {
    * @param workspace The workspace the flyout is on.
    */
   focusFlyout(workspace: Blockly.WorkspaceSvg) {
-    const flyout = workspace.getFlyout();
+    workspace.getCursor()?.hide();
+    this.markAtCursor(workspace);
 
+    const flyout = workspace.getFlyout();
     this.setState(workspace, Constants.STATE.FLYOUT);
 
-    if (!this.getMarker(workspace)!.getCurNode()) {
-      this.markAtCursor(workspace);
-    }
-
     if (flyout && flyout.getWorkspace()) {
       const flyoutContents = flyout.getContents();
       const firstFlyoutItem = flyoutContents[0];
@@ -612,11 +600,14 @@ export class Navigation {
     if (!newBlock) {
       return;
     }
-    const markerNode = this.getMarker(workspace)!.getCurNode();
+    if (!this.markedNode) {
+      this.warn('No marked node when inserting from flyout.');
+      return;
+    }
     if (
       !this.tryToConnectNodes(
         workspace,
-        markerNode,
+        this.markedNode,
         Blockly.ASTNode.createBlockNode(newBlock)!,
       )
     ) {
@@ -681,19 +672,21 @@ export class Navigation {
   }
 
   /**
-   * Connects the location of the marker and the location of the cursor.
-   * No-op if the marker or cursor node are null.
+   * Connects the location of the marked node and the location of the cursor.
+   * No-op if the marked node or cursor node are null.
    *
    * @param workspace The main workspace.
    * @returns True if the cursor and marker locations were connected,
    *     false otherwise.
    */
   connectMarkerAndCursor(workspace: Blockly.WorkspaceSvg): boolean {
-    const markerNode = this.getMarker(workspace)!.getCurNode();
     const cursorNode = workspace.getCursor()!.getCurNode();
 
-    if (markerNode && cursorNode) {
-      return this.tryToConnectNodes(workspace, markerNode, cursorNode);
+    if (this.markedNode && cursorNode) {
+      if (this.tryToConnectNodes(workspace, this.markedNode, cursorNode)) {
+        this.removeMark(workspace);
+        return true;
+      }
     }
     return false;
   }
@@ -1109,22 +1102,24 @@ export class Navigation {
   }
 
   /**
-   * Moves the marker to the cursor's current location.
+   * Moves the passive focus indicator to the cursor's current location.
    *
    * @param workspace The workspace.
    */
   markAtCursor(workspace: Blockly.WorkspaceSvg) {
-    this.getMarker(workspace)!.setCurNode(workspace.getCursor()!.getCurNode());
+    const cursor = workspace.getCursor()!;
+    this.markedNode = cursor.getCurNode();
+    this.passiveFocusIndicator.show(this.markedNode);
   }
 
   /**
-   * Removes the marker from its current location and hide it.
+   * Removes the passive focus indicator from its current location and hides it.
    *
    * @param workspace The workspace.
    */
   removeMark(workspace: Blockly.WorkspaceSvg) {
-    const marker = this.getMarker(workspace);
-    marker?.hide();
+    this.passiveFocusIndicator.hide();
+    this.markedNode = null;
   }
 
   /**
@@ -1154,8 +1149,8 @@ export class Navigation {
       workspace.keyboardAccessibilityMode
     ) {
       workspace.keyboardAccessibilityMode = false;
+      this.markAtCursor(workspace);
       workspace.getCursor()!.hide();
-      this.getMarker(workspace)!.hide();
       if (this.getFlyoutCursor(workspace)) {
         this.getFlyoutCursor(workspace)!.hide();
       }
@@ -1247,7 +1242,6 @@ export class Navigation {
       curNode.isConnection() ||
       nodeType == Blockly.ASTNode.types.WORKSPACE
     ) {
-      this.markAtCursor(workspace);
       if (workspace.getToolbox()) {
         this.focusToolbox(workspace);
       } else {
@@ -1327,6 +1321,7 @@ export class Navigation {
     ) as Blockly.BlockSvg;
     if (block) {
       isHandled = this.insertPastedBlock(workspace, block);
+      this.removeMark(workspace);
     }
     Blockly.Events.setGroup(false);
     return isHandled;

src/passive_focus.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ASTNode,
+  RenderedConnection,
+  BlockSvg,
+  ConnectionType,
+  utils,
+} from 'blockly/core';
+
+/**
+ * A renderer for passive focus on AST node locations on the main workspace.
+ * Responsible for showing and hiding in an ephemeral way. Not
+ * guaranteed to stay up to date if workspace contents change.
+ * In general, passive focus should be hidden when the main workspace
+ * has active focus.
+ */
+export class PassiveFocus {
+  // The node where the indicator is drawn, if any.
+  private curNode: ASTNode | null = null;
+
+  // The line drawn to indicate passive focus on a next connection.
+  nextConnectionIndicator: SVGRectElement;
+
+  constructor() {
+    this.nextConnectionIndicator = this.createNextIndicator();
+  }
+
+  /** Dispose of this indicator. Do any necessary cleanup. */
+  dispose() {
+    this.hide();
+    if (this.nextConnectionIndicator) {
+      utils.dom.removeNode(this.nextConnectionIndicator);
+    }
+  }
+
+  /**
+   * Hide the currently visible passive focus indicator.
+   * Implementation varies based on location type.
+   */
+  hide() {
+    if (!this.curNode) return;
+    const type = this.curNode.getType();
+    const location = this.curNode.getLocation();
+
+    // If old node was a block, unselect it or remove fake selection.
+    if (type === ASTNode.types.BLOCK) {
+      this.hideAtBlock(this.curNode);
+      return;
+    } else if (this.curNode.isConnection()) {
+      const curNodeAsConnection = location as RenderedConnection;
+      const connectionType = curNodeAsConnection.type;
+      if (connectionType === ConnectionType.NEXT_STATEMENT) {
+        this.hideAtNext(this.curNode);
+        return;
+      }
+    }
+    console.log('Could not hide passive focus indicator');
+  }
+
+  /**
+   * Show the passive focus indicator at the specified location.
+   * Implementation varies based on location type.
+   */
+  show(node: ASTNode) {
+    // Hide last shown.
+    this.hide();
+    this.curNode = node;
+
+    const type = this.curNode.getType();
+    const location = this.curNode.getLocation();
+    if (type === ASTNode.types.BLOCK) {
+      this.showAtBlock(this.curNode);
+      return;
+    } else if (this.curNode.isConnection()) {
+      const curNodeAsConnection = location as RenderedConnection;
+      const connectionType = curNodeAsConnection.type;
+      if (connectionType === ConnectionType.NEXT_STATEMENT) {
+        this.showAtNext(this.curNode);
+        return;
+      }
+    }
+    console.log('Could not show passive focus indicator');
+  }
+
+  /**
+   * Show a passive focus indicator on a block.
+   *
+   * @param node The passively-focused block.
+   */
+  showAtBlock(node: ASTNode) {
+    const block = node.getLocation() as BlockSvg;
+    // Note that this changes rendering but does not change Blockly's
+    // internal selected state.
+    block.addSelect();
+  }
+
+  /**
+   * Hide a passive focus indicator on a block.
+   *
+   * @param node The passively-focused block.
+   */
+  hideAtBlock(node: ASTNode) {
+    const block = node.getLocation() as BlockSvg;
+    // Note that this changes rendering but does not change Blockly's
+    // internal selected state.
+    block.removeSelect();
+  }
+
+  /**
+   * Creates DOM elements for the next connection indicator.
+   *
+   * @returns The root element of the next indicator.
+   */
+  createNextIndicator() {
+    // A horizontal line used to represent a next connection.
+    const indicator = utils.dom.createSvgElement(utils.Svg.RECT, {
+      'width': 100,
+      'height': 5,
+      'class': 'passiveNextIndicator',
+      'stroke': '#4286f4',
+      'fill': '#4286f4',
+    });
+    return indicator;
+  }
+
+  /**
+   * Show a passive focus indicator on a next connection.
+   *
+   * @param node The passively-focused connection.
+   */
+  showAtNext(node: ASTNode) {
+    const connection = node.getLocation() as RenderedConnection;
+    const targetBlock = connection.getSourceBlock();
+
+    // Make the connection indicator a child of the block's SVG group.
+    const blockSvgRoot = targetBlock.getSvgRoot();
+    blockSvgRoot.appendChild(this.nextConnectionIndicator);
+
+    // Move the indicator relative to the origin of the block's SVG group.
+    let x = 0;
+    const y = connection.getOffsetInBlock().y;
+    const width = targetBlock.getHeightWidth().width;
+    if (targetBlock.workspace.RTL) {
+      x = -width;
+    }
+
+    this.nextConnectionIndicator.setAttribute('x', `${x}`);
+    this.nextConnectionIndicator.setAttribute('y', `${y}`);
+    this.nextConnectionIndicator.setAttribute('width', `${width}`);
+
+    this.nextConnectionIndicator.style.display = '';
+  }
+
+  /**
+   * Hide a passive focus indicator on a next connection.
+   *
+   * @param node The passively-focused connection.
+   */
+  hideAtNext(node: ASTNode) {
+    this.nextConnectionIndicator.parentNode?.removeChild(
+      this.nextConnectionIndicator,
+    );
+    this.nextConnectionIndicator.style.display = 'none';
+  }
+}