Merge branch 'main' into mutator-nav

gonfunko · web-flow · commit 0fda7176437a · 2025-06-23T09:56:36.000-07:00
diff --git a/src/actions/action_menu.ts b/src/actions/action_menu.ts
@@ -52,7 +52,7 @@ export class ActionMenu {
         );
       },
       callback: (workspace) => {
-        switch (this.navigation.getState(workspace)) {
+        switch (this.navigation.getState()) {
           case Constants.STATE.WORKSPACE:
           case Constants.STATE.FLYOUT:
             return this.openActionMenu(workspace);
diff --git a/src/actions/arrow_navigation.ts b/src/actions/arrow_navigation.ts
@@ -63,7 +63,7 @@ export class ArrowNavigation {
         ? workspace.targetWorkspace?.getFlyout()
         : workspace.getFlyout();
       let isHandled = false;
-      switch (this.navigation.getState(workspace)) {
+      switch (this.navigation.getState()) {
         case Constants.STATE.WORKSPACE:
           isHandled = this.fieldShortcutHandler(workspace, shortcut);
           if (!isHandled && workspace) {
@@ -79,7 +79,6 @@ export class ArrowNavigation {
           // @ts-expect-error private method
           isHandled = toolbox && toolbox.selectChild();
           if (!isHandled && flyout) {
-            Blockly.getFocusManager().focusTree(flyout.getWorkspace());
             this.navigation.defaultFlyoutCursorIfNeeded(workspace);
           }
           return true;
@@ -97,7 +96,7 @@ export class ArrowNavigation {
         ? workspace.targetWorkspace?.getToolbox()
         : workspace.getToolbox();
       let isHandled = false;
-      switch (this.navigation.getState(workspace)) {
+      switch (this.navigation.getState()) {
         case Constants.STATE.WORKSPACE:
           isHandled = this.fieldShortcutHandler(workspace, shortcut);
           if (!isHandled && workspace) {
@@ -161,7 +160,7 @@ export class ArrowNavigation {
         callback: (workspace, e, shortcut) => {
           keyboardNavigationController.setIsActive(true);
           let isHandled = false;
-          switch (this.navigation.getState(workspace)) {
+          switch (this.navigation.getState()) {
             case Constants.STATE.WORKSPACE:
               isHandled = this.fieldShortcutHandler(workspace, shortcut);
               if (!isHandled && workspace) {
@@ -223,7 +222,7 @@ export class ArrowNavigation {
         callback: (workspace, e, shortcut) => {
           keyboardNavigationController.setIsActive(true);
           let isHandled = false;
-          switch (this.navigation.getState(workspace)) {
+          switch (this.navigation.getState()) {
             case Constants.STATE.WORKSPACE:
               isHandled = this.fieldShortcutHandler(workspace, shortcut);
               if (!isHandled) {
diff --git a/src/actions/clipboard.ts b/src/actions/clipboard.ts
@@ -285,7 +285,9 @@ export class Clipboard {
       !!this.oldCopyShortcut?.callback &&
       this.oldCopyShortcut.callback(workspace, e, shortcut, scope);
     if (didCopy) {
-      this.copyWorkspace = workspace;
+      this.copyWorkspace = workspace.isFlyout
+        ? workspace.targetWorkspace
+        : workspace;
       showCopiedHint(workspace);
     }
     return didCopy;
diff --git a/src/actions/disconnect.ts b/src/actions/disconnect.ts
@@ -9,8 +9,6 @@ import {
   Events,
   ShortcutRegistry,
   utils as BlocklyUtils,
-  Connection,
-  ConnectionType,
   keyboardNavigationController,
 } from 'blockly';
 import * as Constants from '../constants';
@@ -58,7 +56,7 @@ export class DisconnectAction {
         this.navigation.canCurrentlyEdit(workspace),
       callback: (workspace) => {
         keyboardNavigationController.setIsActive(true);
-        switch (this.navigation.getState(workspace)) {
+        switch (this.navigation.getState()) {
           case Constants.STATE.WORKSPACE:
             this.disconnectBlocks(workspace);
             return true;
diff --git a/src/actions/enter.ts b/src/actions/enter.ts
@@ -6,10 +6,8 @@
 
 import {
   Events,
-  Msg,
   ShortcutRegistry,
   utils as BlocklyUtils,
-  getFocusManager,
   BlockSvg,
   FlyoutButton,
   RenderedConnection,
@@ -55,33 +53,48 @@ export class EnterAction {
      */
     ShortcutRegistry.registry.register({
       name: Constants.SHORTCUT_NAMES.EDIT_OR_CONFIRM,
-      preconditionFn: (workspace) =>
-        this.navigation.canCurrentlyEdit(workspace),
-      callback: (workspace, event) => {
+      preconditionFn: (workspace): boolean => {
+        switch (this.navigation.getState()) {
+          case Constants.STATE.WORKSPACE:
+            return this.shouldHandleEnterForWS(workspace);
+          case Constants.STATE.FLYOUT: {
+            // If we're in the flyout the only supported actions are inserting
+            // blocks or clicking buttons, so don't handle this if the
+            // main workspace is read only.
+            const targetWorkspace = workspace.isFlyout
+              ? workspace.targetWorkspace
+              : workspace;
+            return !!targetWorkspace && !targetWorkspace.isReadOnly();
+          }
+          default:
+            return false;
+        }
+      },
+      callback: (workspace, event): boolean => {
         event.preventDefault();
 
+        const targetWorkspace = workspace.isFlyout
+          ? workspace.targetWorkspace
+          : workspace;
+        if (!targetWorkspace) return false;
+
         let flyoutCursor;
         let curNode;
 
-        switch (this.navigation.getState(workspace)) {
+        switch (this.navigation.getState()) {
           case Constants.STATE.WORKSPACE:
-            this.handleEnterForWS(workspace);
-            return true;
+            return this.handleEnterForWS(workspace);
           case Constants.STATE.FLYOUT:
-            if (!workspace.targetWorkspace) return false;
-            flyoutCursor = this.navigation.getFlyoutCursor(
-              workspace.targetWorkspace,
-            );
+            flyoutCursor = this.navigation.getFlyoutCursor(targetWorkspace);
             if (!flyoutCursor) {
               return false;
             }
             curNode = flyoutCursor.getCurNode();
             if (curNode instanceof BlockSvg) {
-              this.insertFromFlyout(workspace.targetWorkspace);
+              this.insertFromFlyout(targetWorkspace);
             } else if (curNode instanceof FlyoutButton) {
-              this.triggerButtonCallback(workspace);
+              this.triggerButtonCallback(targetWorkspace);
             }
-
             return true;
           default:
             return false;
@@ -91,33 +104,61 @@ export class EnterAction {
     });
   }
 
+  /**
+   * Checks if the enter key should do anything for this ws.
+   *
+   * @param workspace The workspace to check.
+   * @returns True if the enter action should be handled.
+   */
+  private shouldHandleEnterForWS(workspace: WorkspaceSvg): boolean {
+    const cursor = workspace.getCursor();
+    const curNode = cursor?.getCurNode();
+    if (!curNode) return false;
+    if (curNode instanceof Field) return curNode.isClickable();
+    if (
+      curNode instanceof RenderedConnection ||
+      curNode instanceof WorkspaceSvg
+    ) {
+      return !workspace.isReadOnly();
+    }
+    if (curNode instanceof BlockSvg) return true;
+    // Returning true is sometimes incorrect for icons, but there's no API to check.
+    if (curNode instanceof icons.Icon) return true;
+    return false;
+  }
+
   /**
    * Handles hitting the enter key on the workspace.
    *
    * @param workspace The workspace.
+   * @returns True if the enter was handled, false otherwise.
    */
-  private handleEnterForWS(workspace: WorkspaceSvg) {
+  private handleEnterForWS(workspace: WorkspaceSvg): boolean {
     const cursor = workspace.getCursor();
-    if (!cursor) return;
-    const curNode = cursor.getCurNode();
-    if (!curNode) return;
+    const curNode = cursor?.getCurNode();
+    if (!curNode) return false;
     if (curNode instanceof Field) {
       curNode.showEditor();
+      return true;
     } else if (curNode instanceof BlockSvg) {
       if (!this.tryShowFullBlockFieldEditor(curNode)) {
         showHelpHint(workspace);
       }
+      return true;
     } else if (
       curNode instanceof RenderedConnection ||
       curNode instanceof WorkspaceSvg
     ) {
       this.navigation.openToolboxOrFlyout(workspace);
+      return true;
     } else if (curNode instanceof icons.Icon) {
       curNode.onClick();
       renderManagement.finishQueuedRenders().then(() => {
         cursor.in();
       });
+      return true;
     }
+    return false;
   }
 
   /**
@@ -150,8 +191,6 @@ export class EnterAction {
 
     workspace.setResizesEnabled(true);
 
-    getFocusManager().focusTree(workspace);
-    workspace.getCursor()?.setCurNode(newBlock);
     this.mover.startMove(workspace, newBlock, insertStartPoint);
 
     const isStartBlock =
diff --git a/src/actions/exit.ts b/src/actions/exit.ts
@@ -32,7 +32,7 @@ export class ExitAction {
       preconditionFn: (workspace) =>
         this.navigation.canCurrentlyNavigate(workspace),
       callback: (workspace) => {
-        switch (this.navigation.getState(workspace)) {
+        switch (this.navigation.getState()) {
           case Constants.STATE.FLYOUT:
           case Constants.STATE.TOOLBOX:
             getFocusManager().focusTree(workspace.targetWorkspace ?? workspace);
diff --git a/src/actions/mover.ts b/src/actions/mover.ts
@@ -85,7 +85,7 @@ export class Mover {
    */
   canMove(workspace: WorkspaceSvg, block: BlockSvg) {
     return !!(
-      this.navigation.getState(workspace) === Constants.STATE.WORKSPACE &&
+      this.navigation.getState() === Constants.STATE.WORKSPACE &&
       this.navigation.canCurrentlyEdit(workspace) &&
       !this.moves.has(workspace) && // No move in progress.
       block?.isMovable()
@@ -143,8 +143,9 @@ export class Mover {
     dragger.onDragStart(info.fakePointerEvent('pointerdown'));
     info.updateTotalDelta();
     // In case the block is detached, ensure that it still retains focus
-    // (otherwise dragging will break).
-    getFocusManager().focusNode(block);
+    // (otherwise dragging will break). This is also the point a new block's
+    // initial insert position is scrolled into view.
+    workspace.getCursor()?.setCurNode(block);
     block.getFocusableElement().addEventListener('blur', blurListener);
 
     // Register a keyboard shortcut under the key combos of all existing
@@ -301,7 +302,7 @@ export class Mover {
 
     info.dragger.onDrag(
       info.fakePointerEvent('pointermove', direction),
-      info.totalDelta,
+      info.totalDelta.clone().scale(workspace.scale),
     );
 
     info.updateTotalDelta();
@@ -326,7 +327,10 @@ export class Mover {
     info.totalDelta.x += x * UNCONSTRAINED_MOVE_DISTANCE * workspace.scale;
     info.totalDelta.y += y * UNCONSTRAINED_MOVE_DISTANCE * workspace.scale;
 
-    info.dragger.onDrag(info.fakePointerEvent('pointermove'), info.totalDelta);
+    info.dragger.onDrag(
+      info.fakePointerEvent('pointermove'),
+      info.totalDelta.clone().scale(workspace.scale),
+    );
     this.scrollCurrentBlockIntoView(workspace);
     return true;
   }
diff --git a/src/actions/ws_movement.ts b/src/actions/ws_movement.ts
@@ -18,11 +18,6 @@ const createSerializedKey = ShortcutRegistry.registry.createSerializedKey.bind(
   ShortcutRegistry.registry,
 );
 
-/**
- * The distance to move the cursor when the cursor is on the workspace.
- */
-const WS_MOVE_DISTANCE = 40;
-
 /**
  * Logic for free movement of the cursor on the workspace with keyboard
  * shortcuts.
@@ -68,11 +63,16 @@ export class WorkspaceMovement {
     /** Move the cursor to the workspace. */
     {
       name: Constants.SHORTCUT_NAMES.CREATE_WS_CURSOR,
-      preconditionFn: (workspace) =>
-        this.navigation.canCurrentlyEdit(workspace),
+      preconditionFn: (workspace) => {
+        return true;
+      },
       callback: (workspace) => {
+        const targetWorkspace = workspace.isFlyout
+          ? workspace.targetWorkspace
+          : workspace;
+        if (!targetWorkspace) return false;
         keyboardNavigationController.setIsActive(true);
-        return this.createWSCursor(workspace);
+        return this.createWSCursor(targetWorkspace);
       },
       keyCodes: [KeyCodes.W],
     },
diff --git a/src/move_indicator.ts b/src/move_indicator.ts
@@ -53,7 +53,7 @@ export class MoveIndicatorBubble
       Blockly.utils.Svg.PATH,
       {
         'fill': 'none',
-        'stroke': 'currentColor',
+        'stroke': 'black',
         'stroke-linecap': 'round',
         'stroke-linejoin': 'round',
         'stroke-width': '2',
diff --git a/src/navigation.ts b/src/navigation.ts
@@ -93,10 +93,9 @@ export class Navigation {
    * Note that this assumes a workspace with passive focus (including for its
    * toolbox or flyout) has a state of NOWHERE.
    *
-   * @param workspace The workspace to get the state of.
    * @returns The state of the given workspace.
    */
-  getState(workspace: Blockly.WorkspaceSvg): Constants.STATE {
+  getState(): Constants.STATE {
     const focusedTree = Blockly.getFocusManager().getFocusedTree();
     if (focusedTree instanceof Blockly.WorkspaceSvg) {
       if (focusedTree.isFlyout) {
@@ -105,9 +104,7 @@ export class Navigation {
         return Constants.STATE.WORKSPACE;
       }
     } else if (focusedTree instanceof Blockly.Toolbox) {
-      if (workspace === focusedTree.getWorkspace()) {
-        return Constants.STATE.TOOLBOX;
-      }
+      return Constants.STATE.TOOLBOX;
     } else if (focusedTree instanceof Blockly.Flyout) {
       return Constants.STATE.FLYOUT;
     }
@@ -222,7 +219,7 @@ export class Navigation {
       }
     } else if (
       e.type === Blockly.Events.BLOCK_CREATE &&
-      this.getState(mainWorkspace) === Constants.STATE.FLYOUT
+      this.getState() === Constants.STATE.FLYOUT
     ) {
       // When variables are created, that recreates the flyout contents, leaving the
       // cursor in an invalid state.
@@ -306,8 +303,15 @@ export class Navigation {
 
     const curNode = flyoutCursor.getCurNode();
     const sourceBlock = flyoutCursor.getSourceBlock();
-    if (curNode && !this.isFlyoutItemDisposed(curNode, sourceBlock))
+    // If the current node is a child of the flyout, nothing needs to be done.
+    if (
+      curNode &&
+      curNode !== flyout.getWorkspace() &&
+      curNode.getFocusableTree() === flyout.getWorkspace() &&
+      !this.isFlyoutItemDisposed(curNode, sourceBlock)
+    ) {
       return false;
+    }
 
     const flyoutContents = flyout.getContents();
     const defaultFlyoutItem =
@@ -828,7 +832,7 @@ export class Navigation {
     ).keyboardAccessibilityMode;
     return (
       !!accessibilityMode &&
-      this.getState(workspace) !== Constants.STATE.NOWHERE &&
+      this.getState() !== Constants.STATE.NOWHERE &&
       !Blockly.getFocusManager().ephemeralFocusTaken()
     );
   }
diff --git a/src/navigation_controller.ts b/src/navigation_controller.ts
@@ -196,11 +196,10 @@ export class NavigationController {
     /** Move focus to or from the toolbox. */
     focusToolbox: {
       name: Constants.SHORTCUT_NAMES.TOOLBOX,
-      preconditionFn: (workspace) =>
-        !workspace.isDragging() && this.navigation.canCurrentlyEdit(workspace),
+      preconditionFn: (workspace) => !workspace.isDragging(),
       callback: (workspace) => {
         keyboardNavigationController.setIsActive(true);
-        switch (this.navigation.getState(workspace)) {
+        switch (this.navigation.getState()) {
           case Constants.STATE.WORKSPACE:
             Blockly.getFocusManager().focusTree(
               workspace.getToolbox() ??
diff --git a/test/index.ts b/test/index.ts
diff --git a/test/webdriverio/test/keyboard_mode_test.ts b/test/webdriverio/test/keyboard_mode_test.ts
diff --git a/test/webdriverio/test/move_test.ts b/test/webdriverio/test/move_test.ts
diff --git a/test/webdriverio/test/scroll_test.ts b/test/webdriverio/test/scroll_test.ts
diff --git a/test/webdriverio/test/test_setup.ts b/test/webdriverio/test/test_setup.ts

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ export class MoveIndicatorBubble`
`53`	`53`	`Blockly.utils.Svg.PATH,`
`54`	`54`	`{`
`55`	`55`	`'fill': 'none',`
`56`		`- 'stroke': 'currentColor',`
	`56`	`+ 'stroke': 'black',`
`57`	`57`	`'stroke-linecap': 'round',`
`58`	`58`	`'stroke-linejoin': 'round',`
`59`	`59`	`'stroke-width': '2',`