feat: Allow disposing of a KeyboardNavigation instance. (#190)

Author: gonfunko

src/index.ts

@@ -13,6 +13,24 @@ export class KeyboardNavigation {
   /** The workspace. */
   protected workspace: Blockly.WorkspaceSvg;
 
+  /** Event handler run when the workspace gains focus. */
+  private focusListener: () => void;
+
+  /** Event handler run when the workspace loses focus. */
+  private blurListener: () => void;
+
+  /** Keyboard navigation controller instance for the workspace. */
+  private navigationController: NavigationController;
+
+  /**
+   * These fields are used to preserve the workspace's initial state to restore
+   * it when/if keyboard navigation is disabled.
+   */
+  private injectionDivTabIndex: string | null;
+  private workspaceParentTabIndex: string | null;
+  private originalTheme: Blockly.Theme;
+  private originalCursor: Blockly.Cursor | null;
+
   /**
    * Constructs the keyboard navigation.
    *
@@ -22,33 +40,80 @@ export class KeyboardNavigation {
   constructor(workspace: Blockly.WorkspaceSvg) {
     this.workspace = workspace;
 
-    const navigationController = new NavigationController();
-    navigationController.init();
-    navigationController.addWorkspace(workspace);
-    navigationController.enable(workspace);
-    navigationController.listShortcuts();
+    this.navigationController = new NavigationController();
+    this.navigationController.init();
+    this.navigationController.addWorkspace(workspace);
+    this.navigationController.enable(workspace);
+    this.navigationController.listShortcuts();
 
+    this.originalTheme = workspace.getTheme();
     this.setGlowTheme();
+    this.originalCursor = workspace.getMarkerManager().getCursor();
     installCursor(workspace.getMarkerManager());
 
     // Ensure that only the root SVG G (group) has a tab index.
+    this.injectionDivTabIndex = workspace
+      .getInjectionDiv()
+      .getAttribute('tabindex');
     workspace.getInjectionDiv().removeAttribute('tabindex');
+    this.workspaceParentTabIndex = workspace
+      .getParentSvg()
+      .getAttribute('tabindex');
     workspace.getParentSvg().removeAttribute('tabindex');
 
-    workspace.getSvgGroup().addEventListener('focus', () => {
-      navigationController.setHasFocus(workspace, true);
-    });
-    workspace.getSvgGroup().addEventListener('blur', () => {
-      navigationController.setHasFocus(workspace, false);
-    });
+    this.focusListener = () => {
+      this.navigationController.setHasFocus(workspace, true);
+    };
+    this.blurListener = () => {
+      this.navigationController.setHasFocus(workspace, false);
+    };
+
+    workspace.getSvgGroup().addEventListener('focus', this.focusListener);
+    workspace.getSvgGroup().addEventListener('blur', this.blurListener);
     // Temporary workaround for #136.
     // TODO(#136): fix in core.
-    workspace.getParentSvg().addEventListener('focus', () => {
-      navigationController.setHasFocus(workspace, true);
-    });
-    workspace.getParentSvg().addEventListener('blur', () => {
-      navigationController.setHasFocus(workspace, false);
-    });
+    workspace.getParentSvg().addEventListener('focus', this.focusListener);
+    workspace.getParentSvg().addEventListener('blur', this.blurListener);
+  }
+
+  /**
+   * Disables keyboard navigation for this navigator's workspace.
+   */
+  dispose() {
+    // Temporary workaround for #136.
+    // TODO(#136): fix in core.
+    this.workspace
+      .getParentSvg()
+      .removeEventListener('blur', this.blurListener);
+    this.workspace
+      .getParentSvg()
+      .removeEventListener('focus', this.focusListener);
+
+    this.workspace.getSvgGroup().removeEventListener('blur', this.blurListener);
+    this.workspace
+      .getSvgGroup()
+      .removeEventListener('focus', this.focusListener);
+
+    if (this.workspaceParentTabIndex) {
+      this.workspace
+        .getParentSvg()
+        .setAttribute('tabindex', this.workspaceParentTabIndex);
+    }
+
+    if (this.injectionDivTabIndex) {
+      this.workspace
+        .getInjectionDiv()
+        .setAttribute('tabindex', this.injectionDivTabIndex);
+    }
+
+    if (this.originalCursor) {
+      const markerManager = this.workspace.getMarkerManager();
+      markerManager.setCursor(this.originalCursor);
+    }
+
+    this.workspace.setTheme(this.originalTheme);
+
+    this.navigationController.dispose();
   }
 
   /**

src/navigation.ts

@@ -1109,7 +1109,12 @@ export class Navigation {
   markAtCursor(workspace: Blockly.WorkspaceSvg) {
     const cursor = workspace.getCursor()!;
     this.markedNode = cursor.getCurNode();
-    this.passiveFocusIndicator.show(this.markedNode);
+
+    // Although it seems like this should never happen, the typings are wrong
+    // in the base Marker class and this can therefore be null.
+    if (this.markedNode) {
+      this.passiveFocusIndicator.show(this.markedNode);
+    }
   }
 
   /**

src/navigation_controller.ts

@@ -287,7 +287,7 @@ export class NavigationController {
    * @returns True iff `deleteCallbackFn` function should be called.
    */
   protected blockCopyPreconditionFn(workspace: WorkspaceSvg) {
-    if (!this.canCurrentlyEdit(workspace))  return false;
+    if (!this.canCurrentlyEdit(workspace)) return false;
     switch (this.navigation.getState(workspace)) {
       case Constants.STATE.WORKSPACE:
         const curNode = workspace?.getCursor()?.getCurNode();
@@ -977,6 +977,9 @@ export class NavigationController {
       ShortcutRegistry.registry.unregister(shortcut.name);
     }
 
+    ContextMenuRegistry.registry.unregister('blockDeleteFromContextMenu');
+    ContextMenuRegistry.registry.unregister('blockCopyFromContextMenu');
+
     this.removeShortcutHandlers();
     this.navigation.dispose();
   }