fix: Fix the scenario picker with the advanced playground.

Author: gonfunko

test/index.html

@@ -101,6 +101,7 @@
                 name="scenario"
                 id="scenario"
                 onchange="document.forms.options.submit()">
+                <option value="custom">custom</option>
                 <option value="simpleCircle">simple circle</option>
                 <option value="sun">sun</option>
                 <option value="blank">blank canvas</option>
@@ -121,27 +122,6 @@
                 <option value="emptyWorkspace">empty workspace</option>
               </select>
             </div>
-            <div>
-              <label for="toolbox">Toolbox:</label>
-              <select
-                name="toolbox"
-                id="toolbox"
-                onchange="document.forms.options.submit()">
-                <option value="toolbox">toolbox</option>
-                <option value="flyout">flyout</option>
-              </select>
-            </div>
-            <div>
-              <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>
-            </div>
           </form>
         </div>
       </div>

test/index.ts

@@ -24,54 +24,35 @@ import {javascriptGenerator} from 'blockly/javascript';
 // @ts-expect-error No types in js file
 import {load} from './loadTestBlocks';
 import {runCode, registerRunCodeShortcut} from './runCode';
+import {createPlayground} from '@blockly/dev-tools';
 
 (window as unknown as {Blockly: typeof Blockly}).Blockly = Blockly;
 
 /**
- * Parse query params for inject and navigation options and update
- * the fields on the options form to match.
- *
- * @returns An options object with keys for each supported option.
+ * Parse query params for a predefined block scenario and applies it to the
+ * workspace.
  */
-function getOptions() {
+function applyScenario() {
   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 toolboxParam = params.get('toolbox');
-  const toolbox = toolboxParam ?? 'toolbox';
-  const toolboxObject =
-    toolbox === 'flyout' ? toolboxFlyout : toolboxCategories;
+  const scenario = scenarioParam ?? 'custom';
 
   // 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.
+  // options when doing browser page navigation.
   window.addEventListener('load', () => {
-    (document.getElementById('toolbox') as HTMLSelectElement).value = toolbox;
-    (document.getElementById('renderer') as HTMLSelectElement).value = renderer;
     (document.getElementById('scenario') as HTMLSelectElement).value = scenario;
   });
 
-  return {
-    scenario,
-    renderer,
-    toolbox: toolboxObject,
-  };
+  if (scenario !== 'custom') {
+    load(Blockly.getMainWorkspace(), scenario);
+    const url = new URL(window.location.href);
+    url.searchParams.delete('scenario');
+    window.history.replaceState({}, document.title, url.toString());
+  }
 }
 
 /**
@@ -80,13 +61,8 @@ function getOptions() {
  *
  * @returns The created workspace.
  */
-function createWorkspace(): Blockly.WorkspaceSvg {
-  const {scenario, renderer, toolbox} = getOptions();
-
-  const injectOptions = {
-    toolbox,
-    renderer,
-  };
+async function createWorkspace(): Promise<Blockly.WorkspaceSvg> {
+  const injectOptions = {toolbox: toolboxCategories};
   const blocklyDiv = document.getElementById('blocklyDiv');
   if (!blocklyDiv) {
     throw new Error('Missing blocklyDiv');
@@ -96,16 +72,30 @@ function createWorkspace(): Blockly.WorkspaceSvg {
   KeyboardNavigation.registerKeyboardNavigationStyles();
   registerFlyoutCursor();
   registerNavigationDeferringToolbox();
-  const workspace = Blockly.inject(blocklyDiv, injectOptions);
-
-  Blockly.ContextMenuItems.registerCommentOptions();
-  new KeyboardNavigation(workspace);
   registerRunCodeShortcut();
+  Blockly.ContextMenuItems.registerCommentOptions();
 
-  // Disable blocks that aren't inside the setup or draw loops.
-  workspace.addChangeListener(Blockly.Events.disableOrphans);
-
-  load(workspace, scenario);
+  let navigation: KeyboardNavigation | null = null;
+  const workspace = (
+    await createPlayground(
+      blocklyDiv,
+      (blocklyDiv, options) => {
+        if (navigation) {
+          navigation.dispose();
+        }
+        const ws = Blockly.inject(blocklyDiv, options);
+        navigation = new KeyboardNavigation(ws);
+
+        // Disable blocks that aren't inside the setup or draw loops.
+        ws.addChangeListener(Blockly.Events.disableOrphans);
+
+        return ws;
+      },
+      injectOptions,
+    )
+  ).getWorkspace();
+
+  applyScenario();
   runCode();
 
   return workspace;
@@ -124,9 +114,9 @@ function addP5() {
   javascriptGenerator.addReservedWords('sketch');
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   addP5();
-  createWorkspace();
+  await createWorkspace();
   document.getElementById('run')?.addEventListener('click', runCode);
   // Add Blockly to the global scope so that test code can access it to
   // verify state after keypresses.