Merge branch 'main' into makecode-tweaks

Author: microbit-matt-hillsdon

src/index.ts

@@ -86,7 +86,8 @@ export class KeyboardNavigation {
     this.workspaceParentTabIndex = workspace
       .getParentSvg()
       .getAttribute('tabindex');
-    workspace.getParentSvg().removeAttribute('tabindex');
+    // We add a focus listener below so use -1 so it doesn't become focusable.
+    workspace.getParentSvg().setAttribute('tabindex', '-1');
 
     this.focusListener = () => {
       this.navigationController.setHasFocus(

src/line_cursor.ts

@@ -245,9 +245,14 @@ export class LineCursor extends Marker {
         return true;
       case ASTNode.types.INPUT:
         return !(location as Blockly.Connection).isConnected();
-      case ASTNode.types.FIELD:
-        // @ts-expect-error isFullBlockField is a protected method.
-        return !(location as Blockly.Field).isFullBlockField();
+      case ASTNode.types.FIELD: {
+        const field = node.getLocation() as Blockly.Field;
+        return !(
+          field.getSourceBlock()?.isSimpleReporter() &&
+          // @ts-expect-error isFullBlockField is a protected method.
+          field.isFullBlockField()
+        );
+      }
       default:
         return false;
     }

src/navigation.ts

@@ -610,20 +610,18 @@ export class Navigation {
     if (!newBlock) {
       return;
     }
-    if (!this.markedNode) {
-      this.warn('No marked node when inserting from flyout.');
-      return;
-    }
-    if (
-      !this.tryToConnectNodes(
-        workspace,
-        this.markedNode,
-        Blockly.ASTNode.createBlockNode(newBlock)!,
-      )
-    ) {
-      this.warn(
-        'Something went wrong while inserting a block from the flyout.',
-      );
+    if (this.markedNode) {
+      if (
+        !this.tryToConnectNodes(
+          workspace,
+          this.markedNode,
+          Blockly.ASTNode.createBlockNode(newBlock)!,
+        )
+      ) {
+        this.warn(
+          'Something went wrong while inserting a block from the flyout.',
+        );
+      }
     }
 
     this.focusWorkspace(workspace);
@@ -1468,12 +1466,14 @@ function fakeEventForNode(node: Blockly.ASTNode): PointerEvent {
  * @returns True if we showed the editor, false otherwise.
  */
 function tryShowFullBlockFieldEditor(block: Blockly.Block): boolean {
-  for (const input of block.inputList) {
-    for (const field of input.fieldRow) {
-      // @ts-expect-error isFullBlockField is a protected method.
-      if (field.isClickable() && field.isFullBlockField()) {
-        field.showEditor();
-        return true;
+  if (block.isSimpleReporter()) {
+    for (const input of block.inputList) {
+      for (const field of input.fieldRow) {
+        // @ts-expect-error isFullBlockField is a protected method.
+        if (field.isClickable() && field.isFullBlockField()) {
+          field.showEditor();
+          return true;
+        }
       }
     }
   }

test/index.html

@@ -107,15 +107,32 @@
           <div id="p5output"></div>
           <div id="scenarioForm">
             <form id="options">
-              <label for="scenarioSelect">Scenario:</label>
+              <label for="scenario">Scenario:</label>
               <select
                 name="scenario"
-                id="scenarioSelect"
+                id="scenario"
                 onchange="document.forms.options.submit()">
                 <option value="simpleCircle">simple circle</option>
                 <option value="sun">sun</option>
                 <option value="blank">blank canvas</option>
               </select>
+              <br />
+              <label for="renderer">Renderer:</label>
+              <select
+                name="renderer"
+                id="renderer"
+                onchange="document.forms.options.submit()">
+                <option value="geras">Geras</option>
+                <option value="thrasos">Thrasos</option>
+                <option value="zelos">Zelos</option>
+              </select>
+              <br />
+              <label for="stackConnections">Disable stack connections:</label>
+              <input
+                type="checkbox"
+                name="noStack"
+                id="noStack"
+                onChange="document.forms.options.submit()" />
             </form>
           </div>
         </div>

test/index.ts

@@ -24,23 +24,49 @@ import {load} from './loadTestBlocks';
 import {runCode, registerRunCodeShortcut} from './runCode';
 
 /**
- * Load initial workspace state based on the value in the scenario dropdown.
+ * Parse query params for inject and navigation options and update
+ * the fields on the options form to match.
  *
- * @param workspace The workspace to load blocks into.
+ * @returns An options object with keys for each supported option.
  */
-function loadScenario(workspace: Blockly.WorkspaceSvg) {
-  const scenarioSelector = location.search.match(/scenario=([^&]+)/);
-  // Default to the sunny day example.
-  const scenarioString = scenarioSelector
-    ? scenarioSelector[1]
-    : 'simpleCircle';
-  const selector = document.getElementById(
-    'scenarioSelect',
-  ) as HTMLSelectElement;
-  selector.value = scenarioString;
-
-  // Load the initial state from storage and run the code.
-  load(workspace, scenarioString);
+function getOptions() {
+  const params = new URLSearchParams(window.location.search);
+
+  const scenarioParam = params.get('scenario');
+  const scenario = scenarioParam ?? 'simpleCircle';
+
+  const rendererParam = params.get('renderer');
+  let renderer = 'zelos';
+  // For backwards compatibility with previous behaviour, support
+  // (e.g.) ?geras as well as ?renderer=geras:
+  if (rendererParam) {
+    renderer = rendererParam;
+  } else if (params.get('geras')) {
+    renderer = 'geras';
+  } else if (params.get('thrasos')) {
+    renderer = 'thrasos';
+  }
+
+  const noStackParam = params.get('noStack');
+  const stackConnections = !noStackParam;
+
+  // Update form inputs to match params, but only after the page is
+  // fully loaded as Chrome (at least) tries to restore previous form
+  // values and does so _after_ DOMContentLoaded has fired, which can
+  // result in the form inputs being out-of-sync with the actual
+  // options when doing browswer page navigation.
+  window.addEventListener('load', () => {
+    (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,
+  };
 }
 
 /**
@@ -50,26 +76,25 @@ function loadScenario(workspace: Blockly.WorkspaceSvg) {
  * @returns The created workspace.
  */
 function createWorkspace(): Blockly.WorkspaceSvg {
-  console.log(location.search);
-  const renderer = location.search.includes('geras')
-    ? 'geras'
-    : location.search.includes('thrasos')
-      ? 'thrasos'
-      : 'zelos';
-  const options = {
+  const {scenario, stackConnections, renderer} = getOptions();
+
+  const injectOptions = {
     toolbox: toolboxCategories,
     renderer,
   };
   const blocklyDiv = document.getElementById('blocklyDiv')!;
-  const workspace = Blockly.inject(blocklyDiv, options);
+  const workspace = Blockly.inject(blocklyDiv, injectOptions);
 
-  new KeyboardNavigation(workspace, {});
+  const navigationOptions = {
+    cursor: {stackConnections},
+  };
+  new KeyboardNavigation(workspace, navigationOptions);
   registerRunCodeShortcut();
 
   // Disable blocks that aren't inside the setup or draw loops.
   workspace.addChangeListener(Blockly.Events.disableOrphans);
 
-  loadScenario(workspace);
+  load(workspace, scenario);
   runCode();
 
   return workspace;
@@ -88,7 +113,7 @@ function addP5() {
   javascriptGenerator.addReservedWords('sketch');
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', () => {
   addP5();
   createWorkspace();
   document.getElementById('run')?.addEventListener('click', runCode);