fix: Scroll flyout contents into bounds. (#248)

* fix: Scroll flyout contents into bounds.

* fix: Allow focusing/scrolling flyout labels into view.

* fix: Clone bounds before modifying them.

Author: gonfunko

src/flyout_cursor.ts

@@ -10,6 +10,7 @@
  */
 
 import * as Blockly from 'blockly/core';
+import {scrollBoundsIntoView} from './workspace_utilities';
 
 /**
  * Class for a flyout cursor.
@@ -20,7 +21,7 @@ export class FlyoutCursor extends Blockly.Cursor {
   /**
    * The constructor for the FlyoutCursor.
    */
-  constructor() {
+  constructor(private readonly flyout: Blockly.IFlyout) {
     super();
   }
 
@@ -79,6 +80,31 @@ export class FlyoutCursor extends Blockly.Cursor {
   override out(): null {
     return null;
   }
+
+  override setCurNode(node: Blockly.ASTNode) {
+    super.setCurNode(node);
+
+    const location = node.getLocation();
+    let bounds: Blockly.utils.Rect | undefined;
+    if (
+      'getBoundingRectangle' in location &&
+      typeof location.getBoundingRectangle === 'function'
+    ) {
+      bounds = location.getBoundingRectangle();
+    } else if (location instanceof Blockly.FlyoutButton) {
+      const {x, y} = location.getPosition();
+      bounds = new Blockly.utils.Rect(
+        y,
+        y + location.height,
+        x,
+        x + location.width,
+      );
+    }
+
+    if (!(bounds instanceof Blockly.utils.Rect)) return;
+
+    scrollBoundsIntoView(bounds, this.flyout.getWorkspace());
+  }
 }
 
 export const registrationType = Blockly.registry.Type.CURSOR;

src/line_cursor.ts

@@ -15,6 +15,7 @@
 
 import * as Blockly from 'blockly/core';
 import {ASTNode, Marker} from 'blockly/core';
+import {scrollBoundsIntoView} from './workspace_utilities';
 
 /** Options object for LineCursor instances. */
 export type CursorOptions = {
@@ -549,7 +550,11 @@ export class LineCursor extends Marker {
     this.drawMarker(oldNode, newNode);
     // Try to scroll cursor into view.
     if (newNode?.getType() === ASTNode.types.BLOCK) {
-      this.scrollBlockIntoView(newNode.getLocation() as Blockly.BlockSvg);
+      const block = newNode.getLocation() as Blockly.BlockSvg;
+      scrollBoundsIntoView(
+        block.getBoundingRectangleWithoutChildren(),
+        block.workspace,
+      );
     }
   }
 
@@ -568,57 +573,6 @@ export class LineCursor extends Marker {
     this.drawMarker(curNode, curNode);
   }
 
-  /**
-   * Scrolls the provided block into view.
-   *
-   * This is a basic implementation that scrolls just enough to get the block
-   * into bounds. For very small workspaces/high zoom levels the entire block
-   * may not fit, but a decent portion of it should still be visible at least.
-   *
-   * @param block The block to scroll into bounds.
-   */
-  private scrollBlockIntoView(block: Blockly.BlockSvg) {
-    const workspace = block.workspace;
-    const scale = workspace.getScale();
-    const bounds = block.getBoundingRectangleWithoutChildren();
-    const rawViewport = workspace.getMetricsManager().getViewMetrics(true);
-    const viewport = new Blockly.utils.Rect(
-      rawViewport.top,
-      rawViewport.top + rawViewport.height,
-      rawViewport.left,
-      rawViewport.left + rawViewport.width,
-    );
-
-    if (
-      bounds.left >= viewport.left &&
-      bounds.top >= viewport.top &&
-      bounds.right <= viewport.right &&
-      bounds.bottom <= viewport.bottom
-    ) {
-      // Do nothing if the block is fully inside the viewport.
-      return;
-    }
-
-    let deltaX = 0;
-    let deltaY = 0;
-
-    if (bounds.left < viewport.left) {
-      deltaX = viewport.left - bounds.left;
-    } else if (bounds.right > viewport.right) {
-      deltaX = viewport.right - bounds.right;
-    }
-
-    if (bounds.top < viewport.top) {
-      deltaY = viewport.top - bounds.top;
-    } else if (bounds.bottom > viewport.bottom) {
-      deltaY = viewport.bottom - bounds.bottom;
-    }
-
-    deltaX *= scale;
-    deltaY *= scale;
-    workspace.scroll(workspace.scrollX + deltaX, workspace.scrollY + deltaY);
-  }
-
   /**
    * Draw this cursor's marker.
    *

src/navigation.ts

@@ -162,7 +162,9 @@ export class Navigation {
       cursorRegistrationName,
     );
     if (FlyoutCursorClass) {
-      flyoutWorkspace.getMarkerManager().setCursor(new FlyoutCursorClass());
+      flyoutWorkspace
+        .getMarkerManager()
+        .setCursor(new FlyoutCursorClass(flyout));
     }
   }
 
@@ -1452,7 +1454,7 @@ export class Navigation {
     );
     if (typeof buttonCallback === 'function') {
       buttonCallback(button);
-    } else {
+    } else if (!button.isLabel()) {
       throw new Error('No callback function found for flyout button.');
     }
   }

src/workspace_utilities.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+/**
+ * Scrolls the provided bounds into view.
+ *
+ * In the case of small workspaces/large bounds, this function prioritizes
+ * getting the top left corner of the bounds into view. It also adds some
+ * padding around the bounds to allow the element to be comfortably in view.
+ *
+ * @param bounds A rectangle to scroll into view, as best as possible.
+ * @param workspace The workspace to scroll the given bounds into view in.
+ */
+export function scrollBoundsIntoView(
+  originalBounds: Blockly.utils.Rect,
+  workspace: Blockly.WorkspaceSvg,
+) {
+  const scale = workspace.getScale();
+
+  const bounds = originalBounds.clone();
+
+  // Add some padding to the bounds so the element is scrolled comfortably
+  // into view.
+  bounds.top -= 10;
+  bounds.bottom += 10;
+  bounds.left -= 10;
+  bounds.right += 10;
+
+  const rawViewport = workspace.getMetricsManager().getViewMetrics(true);
+  const viewport = new Blockly.utils.Rect(
+    rawViewport.top,
+    rawViewport.top + rawViewport.height,
+    rawViewport.left,
+    rawViewport.left + rawViewport.width,
+  );
+
+  if (
+    bounds.left >= viewport.left &&
+    bounds.top >= viewport.top &&
+    bounds.right <= viewport.right &&
+    bounds.bottom <= viewport.bottom
+  ) {
+    // Do nothing if the block is fully inside the viewport.
+    return;
+  }
+
+  let deltaX = 0;
+  let deltaY = 0;
+
+  if (bounds.left < viewport.left) {
+    deltaX = viewport.left - bounds.left;
+  } else if (bounds.right > viewport.right) {
+    deltaX = viewport.right - bounds.right;
+  }
+
+  if (bounds.top < viewport.top) {
+    deltaY = viewport.top - bounds.top;
+  } else if (bounds.bottom > viewport.bottom) {
+    deltaY = viewport.bottom - bounds.bottom;
+  }
+
+  deltaX *= scale;
+  deltaY *= scale;
+  workspace.scroll(workspace.scrollX + deltaX, workspace.scrollY + deltaY);
+}

test/blocks/toolbox.js

@@ -35,6 +35,10 @@ export const p5CategoryContents = [
       },
     },
   },
+  {
+    kind: 'label',
+    text: 'Writing text',
+  },
   {
     kind: 'block',
     type: 'write_text_with_shadow',