Tweak to tutorial, comprehensive editor support.

Author: microbit-matt-hillsdon

webapp/src/components/NavigateRegionsOverlay.tsx

@@ -18,7 +18,7 @@ interface RectBounds {
     height: number;
 }
 
-type RegionId = "mainmenu" | "simulator" | "toolbox" | "workspace" | "editortools" | "tutorial";
+type RegionId = "mainmenu" | "simulator" | "toolbox" | "editor" | "editortools" | "tutorial";
 
 interface Region {
     id: RegionId;
@@ -112,30 +112,30 @@ const regions: Region[] = [
         }
     },
     {
-        id: "workspace",
-        ariaLabel: lf("Workspace"),
+        id: "editor",
+        ariaLabel: lf("Editor"),
         shortcutKey: "4",
         getBounds(projectView: IProjectView) {
-            let workspaceSelector: string = undefined;
-            if (projectView.isBlocksActive()) {
-                workspaceSelector = ".blocklySvg";
-            } else if (projectView.isPxtJsonEditor()) {
-                workspaceSelector = "#pxtJsonEditor";
-            } else if (projectView.isJavaScriptActive() || projectView.isPythonActive()) {
-                workspaceSelector = "#monacoEditorArea";
-            }
-            const bounds = document.querySelector(workspaceSelector)?.getBoundingClientRect();
-            if (!projectView.isPxtJsonEditor()) {
-                // Use bounds that don't overlap the toolbox region.
-                const toolbox = getToolboxBounds(projectView);
-                const copied = DOMRect.fromRect(bounds);
-                if (toolbox) {
-                    copied.x = toolbox.right;
-                    copied.width = bounds.width - toolbox.width;
+            const editorSelectors = ["#pxtJsonEditor", "#githubEditor", "#blocksArea", "#serialEditor", "#assetEditor", "#monacoEditor"];
+            for (const selector of editorSelectors) {
+                const element = document.querySelector(selector) as HTMLElement | null;
+                if (element.offsetParent !== null) {
+                    console.log(element);
+                    const bounds = element.getBoundingClientRect();
+                    if (selector === "#monacoEditor" || selector === "#blocksArea") {
+                        // Use bounds that don't overlap the toolbox region.
+                        const toolbox = getToolboxBounds(projectView);
+                        const copied = DOMRect.fromRect(bounds);
+                        if (toolbox) {
+                            copied.x = toolbox.right;
+                            copied.width = bounds.width - toolbox.width;
+                        }
+                        return copied;
+                    }
+                    return bounds;
                 }
-                return copied;
             }
-            return bounds;
+            return undefined;
         },
         focus(projectView: IProjectView) {
             if (projectView.isPxtJsonEditor()) {
@@ -159,7 +159,8 @@ const regions: Region[] = [
     {
         id: "tutorial",
         ariaLabel: lf("Tutorial"),
-        shortcutKey: "u",
+        // This isn't really in sequence but it's not usually present.
+        shortcutKey: "0",
         getBounds() {
             return document.querySelector(".tutorialWrapper")?.getBoundingClientRect();
         },
@@ -209,7 +210,7 @@ export const NavigateRegionsOverlay = ({ parent }: NavigateRegionsOverlayProps)
         parent.hideNavigateRegions();
     }
 
-    if (!regionRects.get("workspace")) {
+    if (!regionRects.get("editor")) {
         // Something is awry, bail out.
         parent.hideNavigateRegions();
         return null;