From e6524a566dd6e1bde2f1065ddc951e8538a7523d Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 6 May 2020 14:23:40 -0700 Subject: [PATCH] Create advanced playground; simplify basic playground --- tests/playground.html | 138 +----- tests/playgrounds/advanced_playground.html | 548 +++++++++++++++++++++ 2 files changed, 551 insertions(+), 135 deletions(-) create mode 100644 tests/playgrounds/advanced_playground.html diff --git a/tests/playground.html b/tests/playground.html index bba66449a..016b61bd9 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -104,12 +104,7 @@ function start() { document.forms.options.elements.toolbox.selectedIndex = toolboxNames.indexOf(toolbox.id); match = location.search.match(/side=([^&]+)/); - var side = match ? match[1] : 'start'; - document.forms.options.elements.side.value = side; var autoimport = !!location.search.match(/autoimport=([^&]+)/); - match = location.search.match(/renderer=([^&]+)/); - var renderer = match ? match[1] : 'geras'; - document.forms.options.elements.renderer.value = renderer; // Create main workspace. workspace = Blockly.inject('blocklyDiv', { @@ -123,7 +118,7 @@ function start() { colour: '#ccc', snap: true }, - horizontalLayout: side == 'top' || side == 'bottom', + horizontalLayout: false, maxBlocks: Infinity, maxInstances: {'test_basic_limit_instances': 3}, maxTrashcanContents: 256, @@ -137,8 +132,8 @@ function start() { wheel: false, }, toolbox: toolbox, - toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end', - renderer: renderer, + toolboxPosition: 'start', + renderer: 'geras', zoom: { controls: true, @@ -151,7 +146,6 @@ function start() { }); workspace.configureContextMenu = configureContextMenu; addToolboxButtonCallbacks(); - addRenderDebugOptionsCheckboxes(); populateTestThemes(); // Restore previously displayed text. if (sessionStorage) { @@ -162,13 +156,6 @@ function start() { // Restore event logging state. var state = sessionStorage.getItem('logEvents'); logEvents(Boolean(Number(state))); - // Restore render debug state. - var renderDebugState = sessionStorage.getItem('blockRenderDebug'); - toggleRenderingDebug(Boolean(Number(renderDebugState))); - // Restore render debug options state. - var renderDebugOptionsState = - JSON.parse(sessionStorage.getItem('blockRenderDebugOptions')); - setRenderDebugOptionCheckboxState(renderDebugOptionsState); } else { // MSIE 11 does not support sessionStorage on file:// URLs. logEvents(false); @@ -289,86 +276,6 @@ function addToolboxButtonCallbacks() { Blockly.TestBlocks.insertConnectionStatements); } -function setRenderDebugOptionCheckboxState(overrideOptions) { - if (!Blockly.blockRendering.Debug) { - return; - } - Blockly.blockRendering.Debug.config = overrideOptions || {}; - if (!overrideOptions) { - return; - } - var renderDebugOptionsListEl = document.getElementById('renderDebugOptions'); - var renderDebugOptionInputs = - renderDebugOptionsListEl.getElementsByTagName('input'); - for (var i = 0, optionInput; - (optionInput = renderDebugOptionInputs[i]); i++) { - var optionName = optionInput.getAttribute('data-optionName'); - optionInput.checked = !!overrideOptions[optionName]; - } -} - -function updateRenderDebugOptions(e) { - if (!Blockly.blockRendering.Debug) { - return; - } - var target = e.target; - var optionName = target.getAttribute('data-optionName'); - var config = Blockly.blockRendering.Debug.config; - config[optionName] = !!target.checked; - sessionStorage.setItem( - 'blockRenderDebugOptions', JSON.stringify(config)); - workspace.render(); -} - -function addRenderDebugOptionsCheckboxes() { - if (!Blockly.blockRendering.Debug) { - return; - } - var renderDebugConfig = Blockly.blockRendering.Debug.config; - var renderDebugOptionsListEl = document.getElementById('renderDebugOptions'); - var optionNames = Object.keys(renderDebugConfig); - for (var i = 0, optionName; (optionName = optionNames[i]); i++) { - var optionCheckId = 'RenderDebug' + optionName + 'Check'; - var optionLabel = document.createElement('label'); - optionLabel.setAttribute('for', optionCheckId); - optionLabel.textContent = optionName; - var optionCheck = document.createElement('input'); - optionCheck.setAttribute('type', 'checkbox'); - optionCheck.setAttribute('id', optionCheckId); - optionCheck.setAttribute('data-optionName', optionName); - optionCheck.onclick = updateRenderDebugOptions; - var optionLi = document.createElement('li'); - optionLi.appendChild(optionLabel); - optionLi.appendChild(optionCheck); - renderDebugOptionsListEl.appendChild(optionLi); - } -} - -function changeTheme() { - var theme = document.getElementById('themeChanger'); - - if (theme.value === "dark") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Dark); - } else if (theme.value === "high_contrast") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.HighContrast); - } else if (theme.value === "deuteranopia") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Deuteranopia); - } else if (theme.value === "tritanopia") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Tritanopia); - } else if (theme.value === "modern") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Modern); - } else if (theme.value === "zelos") { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Zelos); - } else { - var testTheme = getTestTheme(theme.value); - if (testTheme) { - Blockly.getMainWorkspace().setTheme(testTheme); - } else { - Blockly.getMainWorkspace().setTheme(Blockly.Themes.Classic); - } - } -} - function changeRenderingConstant(value) { var type = document.getElementById('rendering-constant-selector').value; if (type == 'fontSize') { @@ -629,28 +536,7 @@ var spaghettiXml = [ - - -

  @@ -675,29 +561,11 @@ var spaghettiXml = [

-

- Rendering:   - - -

diff --git a/tests/playgrounds/advanced_playground.html b/tests/playgrounds/advanced_playground.html new file mode 100644 index 000000000..2a6b3a2b0 --- /dev/null +++ b/tests/playgrounds/advanced_playground.html @@ -0,0 +1,548 @@ + + + + +Advanced Blockly Playground + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Blockly Playground

+ +

Show + - Hide

+ +
+ +
+

+ +   + +
+ +   + +   + +   + +   + +
+ +

+ +

+ Stress test:   + + +

+

+ Rendering:   + + +

+ + + +