refactor: Update to use IFocusableNode in place of INavigable. (#520)

* refactor: Update to use `IFocusableNode` in place of `INavigable`.

* chore: Fix tests.

* refactor: Use .equal instead of .to.include

Author: gonfunko

src/actions/clipboard.ts

@@ -17,7 +17,7 @@ import {
   getFocusManager,
 } from 'blockly';
 import * as Constants from '../constants';
-import type {BlockSvg, WorkspaceSvg, INavigable} from 'blockly';
+import type {BlockSvg, WorkspaceSvg} from 'blockly';
 import {Navigation} from '../navigation';
 import {getShortActionShortcut} from '../shortcut_formatting';
 import * as Blockly from 'blockly';
@@ -366,9 +366,7 @@ export class Clipboard {
       ? workspace
       : this.copyWorkspace;
 
-    const targetNode = FocusableTreeTraverser.findFocusedNode(
-      pasteWorkspace,
-    ) as unknown as INavigable<any>;
+    const targetNode = FocusableTreeTraverser.findFocusedNode(pasteWorkspace);
     // If we're pasting in the flyout it still targets the workspace. Focus
     // first as to ensure correct selection handling.
     getFocusManager().focusTree(workspace);

src/actions/delete.ts

@@ -12,7 +12,7 @@ import {
   LineCursor,
 } from 'blockly';
 import * as Constants from '../constants';
-import type {BlockSvg, WorkspaceSvg} from 'blockly';
+import type {WorkspaceSvg} from 'blockly';
 import {Navigation} from '../navigation';
 
 const KeyCodes = BlocklyUtils.KeyCodes;

src/actions/disconnect.ts

@@ -11,7 +11,7 @@ import {
   utils as BlocklyUtils,
 } from 'blockly';
 import * as Constants from '../constants';
-import type {WorkspaceSvg, INavigable} from 'blockly';
+import type {WorkspaceSvg, IFocusableNode} from 'blockly';
 import {Navigation} from '../navigation';
 
 const KeyCodes = BlocklyUtils.KeyCodes;
@@ -79,7 +79,7 @@ export class DisconnectAction {
     if (!cursor) {
       return;
     }
-    let curNode: INavigable<any> | null = cursor.getCurNode();
+    let curNode: IFocusableNode | null = cursor.getCurNode();
     let wasVisitingConnection = true;
     while (
       curNode &&

src/actions/enter.ts

@@ -17,7 +17,7 @@ import {
   FocusableTreeTraverser,
 } from 'blockly/core';
 
-import type {Block, INavigable} from 'blockly/core';
+import type {Block} from 'blockly/core';
 
 import * as Constants from '../constants';
 import type {Navigation} from '../navigation';
@@ -59,7 +59,6 @@ export class EnterAction {
 
         let flyoutCursor;
         let curNode;
-        let nodeType;
 
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.WORKSPACE:
@@ -128,9 +127,7 @@ export class EnterAction {
       Events.setGroup(true);
     }
 
-    const stationaryNode = FocusableTreeTraverser.findFocusedNode(
-      workspace,
-    ) as unknown as INavigable<any>;
+    const stationaryNode = FocusableTreeTraverser.findFocusedNode(workspace);
     const newBlock = this.createNewBlock(workspace);
     if (!newBlock) return;
     const insertStartPoint = stationaryNode

src/flyout_cursor.ts

@@ -33,7 +33,7 @@ export class FlyoutCursor extends Blockly.LineCursor {
    * @returns The next element, or null if the current node is
    *     not set or there is no next value.
    */
-  override next(): Blockly.INavigable<any> | null {
+  override next(): Blockly.IFocusableNode | null {
     const curNode = this.getCurNode();
     if (!curNode) {
       return null;
@@ -46,22 +46,13 @@ export class FlyoutCursor extends Blockly.LineCursor {
     return newNode;
   }
 
-  /**
-   * This is a no-op since a flyout cursor can not go in.
-   *
-   * @returns Always null.
-   */
-  override in(): null {
-    return null;
-  }
-
   /**
    * Moves the cursor to the previous stack of blocks in the flyout.
    *
    * @returns The previous element, or null if the current
    *     node is not set or there is no previous value.
    */
-  override prev(): Blockly.INavigable<any> | null {
+  override prev(): Blockly.IFocusableNode | null {
     const curNode = this.getCurNode();
     if (!curNode) {
       return null;
@@ -74,16 +65,7 @@ export class FlyoutCursor extends Blockly.LineCursor {
     return newNode;
   }
 
-  /**
-   * This is a  no-op since a flyout cursor can not go out.
-   *
-   * @returns Always null.
-   */
-  override out(): null {
-    return null;
-  }
-
-  override setCurNode(node: Blockly.INavigable<any> | null) {
+  override setCurNode(node: Blockly.IFocusableNode | null) {
     super.setCurNode(node);
 
     let bounds: Blockly.utils.Rect | undefined;

src/index.ts

@@ -8,16 +8,6 @@ import * as Blockly from 'blockly/core';
 import {NavigationController} from './navigation_controller';
 import {enableBlocksOnDrag} from './disabled_blocks';
 
-/** Options object for KeyboardNavigation instances. */
-export interface NavigationOptions {
-  cursor: Partial<Blockly.CursorOptions>;
-}
-
-/** Default options for LineCursor instances. */
-const defaultOptions: NavigationOptions = {
-  cursor: {},
-};
-
 /** Plugin for keyboard navigation. */
 export class KeyboardNavigation {
   /** The workspace. */
@@ -38,19 +28,11 @@ export class KeyboardNavigation {
   /**
    * Constructs the keyboard navigation.
    *
-   * @param workspace The workspace that the plugin will
-   *     be added to.
-   * @param options Options.
+   * @param workspace The workspace that the plugin will be added to.
    */
-  constructor(
-    workspace: Blockly.WorkspaceSvg,
-    options: Partial<NavigationOptions>,
-  ) {
+  constructor(workspace: Blockly.WorkspaceSvg) {
     this.workspace = workspace;
 
-    // Regularise options and apply defaults.
-    options = {...defaultOptions, ...options};
-
     this.navigationController = new NavigationController();
     this.navigationController.init();
     this.navigationController.addWorkspace(workspace);
@@ -59,7 +41,7 @@ export class KeyboardNavigation {
     this.originalTheme = workspace.getTheme();
     this.setGlowTheme();
 
-    this.cursor = new Blockly.LineCursor(workspace, options.cursor);
+    this.cursor = new Blockly.LineCursor(workspace);
 
     // Add the event listener to enable disabled blocks on drag.
     workspace.addChangeListener(enableBlocksOnDrag);

src/keyboard_drag_strategy.ts

@@ -10,7 +10,6 @@ import {
   RenderedConnection,
   dragging,
   utils,
-  INavigable,
 } from 'blockly';
 import {Direction, getDirectionFromXY} from './drag_direction';
 import {showUnconstrainedMoveHint} from './hints';

src/navigation.ts

@@ -15,7 +15,6 @@ import * as Constants from './constants';
 import {
   registrationName as cursorRegistrationName,
   registrationType as cursorRegistrationType,
-  FlyoutCursor,
 } from './flyout_cursor';
 
 /**
@@ -151,7 +150,7 @@ export class Navigation {
     if (FlyoutCursorClass) {
       flyoutWorkspace
         .getMarkerManager()
-        .setCursor(new Blockly.LineCursor(flyout.getWorkspace()));
+        .setCursor(new FlyoutCursorClass(flyout));
     }
   }
 
@@ -258,7 +257,7 @@ export class Navigation {
   }
 
   private isFlyoutItemDisposed(
-    node: Blockly.INavigable<any>,
+    node: Blockly.IFocusableNode,
     sourceBlock: Blockly.BlockSvg | null,
   ) {
     if (sourceBlock?.disposed) {
@@ -368,9 +367,7 @@ export class Navigation {
         : flyoutContents[flyoutContents.length - 1];
     if (!defaultFlyoutItem) return false;
     const defaultFlyoutItemElement = defaultFlyoutItem.getElement();
-    flyoutCursor.setCurNode(
-      defaultFlyoutItemElement as unknown as Blockly.INavigable<any>,
-    );
+    flyoutCursor.setCurNode(defaultFlyoutItemElement);
     return true;
   }
 
@@ -420,11 +417,11 @@ export class Navigation {
    * @param workspace The main workspace the flyout is on.
    * @returns The flyout's cursor or null if no flyout exists.
    */
-  getFlyoutCursor(workspace: Blockly.WorkspaceSvg): FlyoutCursor | null {
+  getFlyoutCursor(workspace: Blockly.WorkspaceSvg): Blockly.LineCursor | null {
     const flyout = workspace.getFlyout();
     const cursor = flyout ? flyout.getWorkspace().getCursor() : null;
 
-    return cursor as FlyoutCursor;
+    return cursor;
   }
 
   /**
@@ -437,7 +434,7 @@ export class Navigation {
    *     wrong.
    */
   findInsertStartPoint(
-    stationaryNode: Blockly.INavigable<any>,
+    stationaryNode: Blockly.IFocusableNode,
     movingBlock: Blockly.BlockSvg,
   ): Blockly.RenderedConnection | null {
     const movingHasOutput = !!movingBlock.outputConnection;
@@ -517,7 +514,7 @@ export class Navigation {
    * @returns True if the connection was successful, false otherwise.
    */
   tryToConnectBlock(
-    stationaryNode: Blockly.INavigable<any>,
+    stationaryNode: Blockly.IFocusableNode,
     movingBlock: Blockly.BlockSvg,
   ): boolean {
     const destConnection = this.findInsertStartPoint(

test/index.html

@@ -190,14 +190,6 @@
                 <option value="zelos">Zelos</option>
               </select>
             </div>
-            <div>
-              <label for="stackConnections">Disable stack connections:</label>
-              <input
-                type="checkbox"
-                name="noStack"
-                id="noStack"
-                onChange="document.forms.options.submit()" />
-            </div>
           </form>
         </div>
       </div>

test/index.ts

@@ -49,9 +49,6 @@ function getOptions() {
     renderer = 'thrasos';
   }
 
-  const noStackParam = params.get('noStack');
-  const stackConnections = !noStackParam;
-
   const toolboxParam = params.get('toolbox');
   const toolbox = toolboxParam ?? 'toolbox';
   const toolboxObject =
@@ -66,13 +63,10 @@ function getOptions() {
     (document.getElementById('toolbox') as HTMLSelectElement).value = toolbox;
     (document.getElementById('renderer') as HTMLSelectElement).value = renderer;
     (document.getElementById('scenario') as HTMLSelectElement).value = scenario;
-    (document.getElementById('noStack') as HTMLInputElement).checked =
-      !stackConnections;
   });
 
   return {
     scenario,
-    stackConnections,
     renderer,
     toolbox: toolboxObject,
   };
@@ -85,7 +79,7 @@ function getOptions() {
  * @returns The created workspace.
  */
 function createWorkspace(): Blockly.WorkspaceSvg {
-  const {scenario, stackConnections, renderer, toolbox} = getOptions();
+  const {scenario, renderer, toolbox} = getOptions();
 
   const injectOptions = {
     toolbox,
@@ -97,10 +91,7 @@ function createWorkspace(): Blockly.WorkspaceSvg {
   }
   const workspace = Blockly.inject(blocklyDiv, injectOptions);
 
-  const navigationOptions = {
-    cursor: {stackConnections},
-  };
-  new KeyboardNavigation(workspace, navigationOptions);
+  new KeyboardNavigation(workspace);
   registerRunCodeShortcut();
 
   // Disable blocks that aren't inside the setup or draw loops.