asdf

Author: microbit-matt-hillsdon

localtypings/blockly-keyboard-experiment.d.ts

@@ -1,18 +1,7 @@
 declare module "@blockly/keyboard-experiment" {
   import { WorkspaceSvg } from "blockly";
 
-  interface IKeyboardNavigationOptions {
-    externalToolbox?: IExternalToolbox;
-  }
-
-  interface IExternalToolbox {
-    focus(): void;
-  }
-
   class KeyboardNavigation {
-   constructor(workspace: WorkspaceSvg, options: IKeyboardNavigationOptions)
-   focusFlyout(): void;
-   onExternalToolboxFocus(): void;
-   onExternalToolboxBlur(): void;
+   constructor(workspace: WorkspaceSvg)
   }
 }

pxtblocks/plugins/flyout/verticalFlyout.ts

@@ -20,7 +20,6 @@ export class VerticalFlyout implements Blockly.IFlyout {
 
     constructor(protected options: Blockly.Options) {
         this.dummyWorkspace = new Blockly.WorkspaceSvg(options);
-        this.dummyWorkspace.setVisible(false);
     }
 
     createDom(tagName: string | Blockly.utils.Svg<SVGSVGElement> | Blockly.utils.Svg<SVGGElement>): SVGElement {
@@ -247,7 +246,7 @@ export class VerticalFlyout implements Blockly.IFlyout {
     }
 }
 
-class CachedFlyout extends Blockly.VerticalFlyout {
+export class CachedFlyout extends Blockly.VerticalFlyout {
     protected def: Element[];
     protected buttonListeners: Blockly.browserEvents.Data[] = [];
 

webapp/src/blocks.tsx

@@ -494,12 +494,20 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         (Blockly as any).Toolbox.prototype.position = function () {
             oldToolboxPosition.call(this);
             editor.resizeToolbox();
-        }
+        };
 
         /**
          * Override blockly methods to support our custom toolbox.
          */
         const that = this;
+        (Blockly as any).Toolbox.prototype.updateFlyout_ = function (oldItem: Blockly.ISelectableToolboxItem | null, newItem: Blockly.ISelectableToolboxItem | null) {
+            // Keyboard nav triggers selection on the Blockly toolbox
+            // (first item + clear as we intercept all other events).
+            // Hook in just to hide the flyout when selection is cleared.
+            if (newItem === null) {
+                that.hideFlyout();
+            }
+        };
         (Blockly.WorkspaceSvg as any).prototype.refreshToolboxSelection = function () {
             let ws = this.isFlyout ? this.targetWorkspace : this;
             if (ws && !ws.currentGesture_ && ws.toolbox_ && ws.toolbox_.flyout_) {
@@ -538,11 +546,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     private initAccessibleBlocks() {
         const enabled = pxt.appTarget.appTheme?.accessibleBlocks;
         if (enabled && !this.keyboardNavigation) {
-            this.keyboardNavigation = new KeyboardNavigation(this.editor, {
-                externalToolbox: {
-                    focus: () => this.focusToolbox()
-                }
-            });
+            this.keyboardNavigation = new KeyboardNavigation(this.editor);
         }
     }
 
@@ -923,19 +927,27 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
     public moveFocusToFlyout() {
         if (this.keyboardNavigation) {
-            this.keyboardNavigation.focusFlyout();
+            const flyout = this.editor.getFlyout()
+            const element = ((flyout as any).svgGroup_ as SVGElement);
+            element?.focus();
         }
     }
 
     renderToolbox(immediate?: boolean) {
         if (pxt.shell.isReadOnly()) return;
         const blocklyToolboxDiv = this.getBlocklyToolboxDiv();
         const blocklyToolbox = <div className="blocklyToolbox">
-            <toolbox.Toolbox ref={this.handleToolboxRef} editorname="blocks" parent={this} />
-            {<div id="debuggerToolbox"></div>}
+            <div className="blocklyToolboxContents" tabIndex={-1}>
+                <toolbox.Toolbox ref={this.handleToolboxRef} editorname="blocks" parent={this} />
+                {<div id="debuggerToolbox"></div>}
+            </div>
         </div>;
         Util.assert(!!blocklyToolboxDiv);
         ReactDOM.render(blocklyToolbox, blocklyToolboxDiv);
+        blocklyToolboxDiv.querySelector(".blocklyToolboxContents").addEventListener("focus", () => {
+            console.log("Did it happen?");
+            (blocklyToolboxDiv.querySelector("[role=tree]") as HTMLElement).focus()
+        })
 
         if (!immediate) this.toolbox.showLoading();
     }
@@ -1274,7 +1286,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             plugins: {
                 'blockDragger': pxtblockly.BlockDragger,
                 'connectionChecker': DuplicateOnDragConnectionChecker,
-                'flyoutsVerticalToolbox': pxtblockly.VerticalFlyout,
+                'flyoutsVerticalToolbox': pxtblockly.CachedFlyout,
                 'connectionPreviewer': pxtblockly.ConnectionPreviewer
             },
             move: {
@@ -1701,8 +1713,11 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
     private showFlyoutInternal_(xmlList: Element[], flyoutName: string = "default", skipCache = false) {
         this.currentFlyoutKey = flyoutName;
-        const flyout = this.editor.getFlyout() as pxtblockly.VerticalFlyout;
-        flyout.show(xmlList, skipCache ? undefined : flyoutName);
+        // TODO: reconsider!
+        // const flyout = this.editor.getFlyout() as pxtblockly.VerticalFlyout;
+        // flyout.show(xmlList, skipCache ? undefined : flyoutName);
+        const flyout = this.editor.getFlyout();
+        flyout.show(xmlList);
         flyout.scrollToStart();
     }
 
@@ -1953,18 +1968,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         }
     }
 
-<<<<<<< HEAD
-    onToolboxBlurCapture(): void {
-        if (this.keyboardNavigation) {
-            this.toolbox.clearSelection()
-            this.keyboardNavigation.onExternalToolboxBlur()
-        }
-    }
-
-    protected pasteCallback = () => {
-=======
     protected pasteCallback = (workspace: Blockly.Workspace, ev: Event) => {
->>>>>>> master
         const data = getCopyData();
         if (!data?.data || !this.editor || !this.canPasteData(data)) return false;
 
@@ -2146,7 +2150,7 @@ function fixHighlight(block: Blockly.BlockSvg) {
 }
 
 function shouldEventHideFlyout(ev: Blockly.Events.Abstract) {
-    if (ev.type === "var_create" || ev.type === "marker_move") {
+    if (ev.type === "var_create" || ev.type === "marker_move" || ev.type === "toolbox_item_select") {
         return false;
     }
 

webapp/src/monaco.tsx

@@ -2124,9 +2124,6 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         return "";
     }
 
-    onToolboxBlurCapture(): void {
-        // Nothing to do
-    }
 }
 
 export function rangeToSelection(range: monaco.IRange): monaco.Selection {

webapp/src/toolbox.tsx

@@ -448,18 +448,6 @@ export class Toolbox extends data.Component<ToolboxProps, ToolboxState> {
         this.rootElement = c;
     }
 
-    handleBlurCapture = (e: React.FocusEvent<HTMLDivElement>) => {
-        // Make sure we close the flyout if the search input is focussed and there 
-        // is no flyout for search blocks.
-        const searchInputEl = (this.refs.searchbox as React.Component<ToolboxSearch>).refs.searchInput;
-        if (e.relatedTarget === searchInputEl && !this.state.hasSearch) {
-            return this.props.parent.onToolboxBlurCapture();
-        }
-        if (!this.rootElement.contains(e.relatedTarget)) {
-            this.props.parent.onToolboxBlurCapture();
-        }
-    }
-
     handleCategoryTreeFocus = (e: React.FocusEvent<HTMLDivElement>) => {
         // Don't handle focus resulting from click events on category tree items.
         // Rely on the click handler instead.
@@ -608,7 +596,6 @@ export class Toolbox extends data.Component<ToolboxProps, ToolboxState> {
                 ref={this.handleRootElementRef}
                 className={classes}
                 id={`${editorname}EditorToolbox`}
-                onBlurCapture={this.handleBlurCapture}
             >
                 <ToolboxStyle categories={this.items} />
                 {showToolboxLabel &&

webapp/src/toolboxeditor.tsx

@@ -16,11 +16,6 @@ export abstract class ToolboxEditor extends srceditor.Editor {
     protected extensions: pxt.Package[];
 
     abstract getBlocksForCategory(ns: string, subns?: string): toolbox.BlockDefinition[];
-    /**
-     * Hook to allow us to disable Blockly keyboard navigation when our toolbox is focussed.
-     * Hopefully this won't be necessary when the flyout takes the focus properly.
-     */
-    abstract onToolboxBlurCapture(): void;
 
     protected shouldShowBlock(blockId: string, ns: string, shadow?: boolean) {
         let filters = this.parent.state.editorState && this.parent.state.editorState.filters;