tests/playground.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PXT Blockly Playground</title>
<script src="../blockly_uncompressed.js"></script>
<script src="../generators/javascript.js"></script>
<script src="../generators/javascript/logic.js"></script>
<script src="../generators/javascript/loops.js"></script>
<script src="../generators/javascript/math.js"></script>
<script src="../generators/javascript/text.js"></script>
<script src="../generators/javascript/lists.js"></script>
<script src="../generators/javascript/colour.js"></script>
<script src="../generators/javascript/variables.js"></script>
<script src="../generators/javascript/variables_dynamic.js"></script>
<script src="../generators/javascript/procedures.js"></script>
<script src="../generators/python.js"></script>
<script src="../generators/python/logic.js"></script>
<script src="../generators/python/loops.js"></script>
<script src="../generators/python/math.js"></script>
<script src="../generators/python/text.js"></script>
<script src="../generators/python/lists.js"></script>
<script src="../generators/python/colour.js"></script>
<script src="../generators/python/variables.js"></script>
<script src="../generators/python/variables_dynamic.js"></script>
<script src="../generators/python/procedures.js"></script>
<script src="../generators/php.js"></script>
<script src="../generators/php/logic.js"></script>
<script src="../generators/php/loops.js"></script>
<script src="../generators/php/math.js"></script>
<script src="../generators/php/text.js"></script>
<script src="../generators/php/lists.js"></script>
<script src="../generators/php/colour.js"></script>
<script src="../generators/php/variables.js"></script>
<script src="../generators/php/variables_dynamic.js"></script>
<script src="../generators/php/procedures.js"></script>
<script src="../generators/lua.js"></script>
<script src="../generators/lua/logic.js"></script>
<script src="../generators/lua/loops.js"></script>
<script src="../generators/lua/math.js"></script>
<script src="../generators/lua/text.js"></script>
<script src="../generators/lua/lists.js"></script>
<script src="../generators/lua/colour.js"></script>
<script src="../generators/lua/variables.js"></script>
<script src="../generators/lua/variables_dynamic.js"></script>
<script src="../generators/lua/procedures.js"></script>
<script src="../generators/dart.js"></script>
<script src="../generators/dart/logic.js"></script>
<script src="../generators/dart/loops.js"></script>
<script src="../generators/dart/math.js"></script>
<script src="../generators/dart/text.js"></script>
<script src="../generators/dart/lists.js"></script>
<script src="../generators/dart/colour.js"></script>
<script src="../generators/dart/variables.js"></script>
<script src="../generators/dart/variables_dynamic.js"></script>
<script src="../generators/dart/procedures.js"></script>
<script src="../msg/messages.js"></script>
<!-- pxt-blockly -->
<script src="../blocks/extensions.js"></script>
<script src="../blocks/logic.js"></script>
<script src="../blocks/loops.js"></script>
<script src="../blocks/math.js"></script>
<script src="../blocks/text.js"></script>
<script src="../blocks/lists.js"></script>
<script src="../blocks/colour.js"></script>
<script src="../blocks/variables.js"></script>
<script src="../blocks/variables_dynamic.js"></script>
<script src="../blocks/procedures.js"></script>
<script src="../blocks/pxt_blockly_functions.js"></script>
<script src="compile/test_blocks.js"></script>
<script src="compile/pxt_test_blocks.js"></script>
<script src="themes/test_themes.js"></script>
<script src="./playgrounds/screenshot.js"></script>
<script src="../node_modules/@blockly/block-test/dist/index.js"></script>

<script>
// Custom requires for the playground.
goog.require('Blockly.WorkspaceCommentSvg');
goog.require('Blockly.WorkspaceCommentSvg.render');
</script>
<script>
'use strict';
var workspace = null;

function start() {
  setBackgroundColour();

  // Parse the URL arguments.
  var match = location.search.match(/dir=([^&]+)/);
  var rtl = match && match[1] == 'rtl';
  document.forms.options.elements.dir.selectedIndex = Number(rtl);
  var toolbox = getToolboxElement();
  setToolboxDropdown();
  match = location.search.match(/side=([^&]+)/);
  var autoimport = !!location.search.match(/autoimport=([^&]+)/);
  // Create main workspace.
  workspace = Blockly.inject('blocklyDiv',
      {
        comments: true,
        collapse: true,
        disable: true,
        grid:
          {
            spacing: 25,
            length: 3,
            colour: '#ccc',
            snap: true
          },
        horizontalLayout: false,
        maxBlocks: Infinity,
        maxInstances: {'test_basic_limit_instances': 3},
        maxTrashcanContents: 256,
        media: '../media/',
        oneBasedIndex: true,
        readOnly: false,
        rtl: rtl,
        move: {
          scrollbars: true,
          drag: true,
          wheel: true,
        },
        toolbox: toolbox,
        toolboxPosition: 'start',
        renderer: 'pxt',
        zoom:
          {
            controls: true,
            wheel: false,
            startScale: 1.0,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
          }
      });
  initToolbox(workspace);
  workspace.configureContextMenu = configureContextMenu;
  // Restore previously displayed text.
  if (sessionStorage) {
    var text = sessionStorage.getItem('textarea');
    if (text) {
      document.getElementById('importExport').value = text;
    }
    // Restore event logging state.
    var logMainEventsState = sessionStorage.getItem('logEvents');
    logEvents(Boolean(Number(logMainEventsState)));
    var logToolboxFlyoutEventsState = sessionStorage.getItem('logFlyoutEvents');
    logFlyoutEvents(Boolean(Number(logToolboxFlyoutEventsState)));
  } else {
    // MSIE 11 does not support sessionStorage on file:// URLs.
    logEvents(false);
  }
  taChange();
  if (autoimport) {
    fromXml();
  }
}

function setBackgroundColour() {
  // Set background colour to differentiate server vs local copy.
  if (location.protocol == 'file:') {
    var lilac = '#d6d6ff';
    document.body.style.backgroundColor = lilac;
  }
}

function getToolboxSuffix() {
  var match = location.search.match(/toolbox=([^&]+)/);
  // Default to the basic toolbox with categories and untyped variables,
  // but override that if the toolbox type is set in the URL.
  return (match ? match[1] : 'categories');
}

function getToolboxElement() {
  var toolboxSuffix = getToolboxSuffix();
  if (toolboxSuffix == 'test-blocks') {
    if (typeof window.toolboxTestBlocks !== 'undefined') {
      return toolboxTestBlocks;
    } else {
      alert('You need to run \'npm install\' in order to use the test blocks.');
      toolboxSuffix = 'categories';
    }
  }
  // The three possible values are: "simple", "categories",
  // "categories-typed-variables".
  return document.getElementById('toolbox-' + toolboxSuffix);
}

function setToolboxDropdown() {
  var toolboxNames = [
      'toolbox-categories',
      'toolbox-categories-typed-variables',
      'toolbox-simple',
      'toolbox-test-blocks'
  ];
  var toolboxSuffix = getToolboxSuffix();
  document.forms.options.elements.toolbox.selectedIndex =
      toolboxNames.indexOf('toolbox-' + toolboxSuffix);
}

function initToolbox(workspace) {
  var toolboxSuffix = getToolboxSuffix();
  if (toolboxSuffix == 'test-blocks' &&
      typeof window.toolboxTestBlocksInit !== 'undefined') {
    toolboxTestBlocksInit(workspace);
  }
}

function toXml() {
  var output = document.getElementById('importExport');
  var xml = Blockly.Xml.workspaceToDom(workspace);
  output.value = Blockly.Xml.domToPrettyText(xml);
  output.focus();
  output.select();
  taChange();
}

function fromXml() {
  var input = document.getElementById('importExport');
  if (!input.value) {
    return;
  }
  var xml = Blockly.Xml.textToDom(input.value);
  Blockly.Xml.domToWorkspace(xml, workspace);
  taChange();
}

function toCode(lang) {
  var output = document.getElementById('importExport');
  output.value = Blockly[lang].workspaceToCode(workspace);
  taChange();
}

// Disable the "Import from XML" button if the XML is invalid.
// Preserve text between page reloads.
function taChange() {
  var textarea = document.getElementById('importExport');
  if (sessionStorage) {
    sessionStorage.setItem('textarea', textarea.value);
  }
  var valid = true;
  try {
    Blockly.Xml.textToDom(textarea.value);
  } catch (e) {
    valid = false;
  }
  document.getElementById('import').disabled = !valid;
}

function logEvents(state) {
  var checkbox = document.getElementById('logCheck');
  checkbox.checked = state;
  if (sessionStorage) {
    sessionStorage.setItem('logEvents', Number(state));
  }
  if (state) {
    workspace.addChangeListener(logger);
  } else {
    workspace.removeChangeListener(logger);
  }
}

function logFlyoutEvents(state) {
  var checkbox = document.getElementById('logFlyoutCheck');
  checkbox.checked = state;
  if (sessionStorage) {
    sessionStorage.setItem('logFlyoutEvents', Number(state));
  }
  var flyoutWorkspace = workspace.getFlyout().getWorkspace();
  if (state) {
    flyoutWorkspace.addChangeListener(logger);
  } else {
    flyoutWorkspace.removeChangeListener(logger);
  }
}

function configureContextMenu(menuOptions, e) {
  var screenshotOption = {
    text: 'Download Screenshot',
    enabled: workspace.getTopBlocks().length,
    callback: function() {
      Blockly.downloadScreenshot(workspace);
    }
  };
  menuOptions.push(screenshotOption);

  // Adds a default-sized workspace comment to the workspace.
  menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
}

function logger(e) {
  console.log(e);
}

function airstrike(n) {
  var prototypes = [];
  var toolbox = getToolboxElement();
  var blocks = toolbox.getElementsByTagName('block');
  for (var i = 0, block; block = blocks[i]; i++) {
    prototypes.push(block.getAttribute('type'));
  }
  for (var i = 0; i < n; i++) {
    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
    var block = workspace.newBlock(prototype);
    block.initSvg();
    block.getSvgRoot().setAttribute('transform', 'translate(' +
        Math.round(Math.random() * 450 + 40) + ', ' +
        Math.round(Math.random() * 600 + 40) + ')');
    block.render();
  }
}

function spaghetti(n) {
  var xml = spaghettiXml;
  for(var i = 0; i < n; i++) {
    xml = xml.replace(/(<(statement|next)( name="DO0")?>)<\//g,
        '$1' + spaghettiXml + '</');
  }
  xml = '<xml xmlns="https://developers.google.com/blockly/xml">' + xml + '</xml>';
  var dom = Blockly.Xml.textToDom(xml);
  console.time('Spaghetti domToWorkspace');
  Blockly.Xml.domToWorkspace(dom, workspace);
  console.timeEnd('Spaghetti domToWorkspace');
}
var spaghettiXml = [
  '  <block type="controls_if">',
  '    <value name="IF0">',
  '      <block type="logic_compare">',
  '        <field name="OP">EQ</field>',
  '        <value name="A">',
  '          <block type="math_arithmetic">',
  '            <field name="OP">MULTIPLY</field>',
  '            <value name="A">',
  '              <block type="math_number">',
  '                <field name="NUM">6</field>',
  '              </block>',
  '            </value>',
  '            <value name="B">',
  '              <block type="math_number">',
  '                <field name="NUM">7</field>',
  '              </block>',
  '            </value>',
  '          </block>',
  '        </value>',
  '        <value name="B">',
  '          <block type="math_number">',
  '            <field name="NUM">42</field>',
  '          </block>',
  '        </value>',
  '      </block>',
  '    </value>',
  '    <statement name="DO0"></statement>',
  '    <next></next>',
  '  </block>'].join('\n');

</script>

<style>
  html, body {
    height: 100%;
  }
  body {
    background-color: #fff;
    font-family: sans-serif;
    overflow: hidden;
  }
  h1 {
    font-weight: normal;
    font-size: 140%;
  }
  #blocklyDiv {
    float: right;
    height: 95%;
    width: 70%;
  }
  #importExport {
    font-family: monospace;
  }

  .ioLabel>.blocklyFlyoutLabelText {
    font-style: italic;
  }

  #blocklyDiv.renderingDebug .blockRenderDebug {
    display: block;
  }

  .playgroundToggleOptions {
    list-style: none;
    padding: 0;
  }
  .playgroundToggleOptions li {
    margin-top: 1em;
  }

  .blockRenderDebug {
    display: none;
  }

  .zelos-renderer .blocklyFlyoutButton .blocklyText {
    font-size: 1.5rem;
  }
</style>
</head>
<body onload="start()">

  <div id="blocklyDiv"></div>

  <h1>Blockly Playground</h1>

  <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
   - <a href="javascript:void(workspace.setVisible(false))">Hide</a>
   - <a href="playgrounds/advanced_playground.html">Advanced</a></p>

  <form id="options">
    <select name="dir" onchange="document.forms.options.submit()">
      <option value="ltr">LTR</option>
      <option value="rtl">RTL</option>
    </select>
    <select name="toolbox" onchange="document.forms.options.submit()">
      <option value="categories">Categories (untyped variables)</option>
      <option value="categories-typed-variables">Categories (typed variables)</option>
      <option value="simple">Simple</option>
      <option value="test-blocks">Test Blocks</option>
    </select>
  </form>
  <p>
    <input type="button" value="Export to XML" onclick="toXml()">
    &nbsp;
    <input type="button" value="Import from XML" onclick="fromXml()" id="import">
    <br>
    <input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
    &nbsp;
    <input type="button" value="To Python" onclick="toCode('Python')">
    &nbsp;
    <input type="button" value="To PHP" onclick="toCode('PHP')">
    &nbsp;
    <input type="button" value="To Lua" onclick="toCode('Lua')">
    &nbsp;
    <input type="button" value="To Dart" onclick="toCode('Dart')">
    <br>
    <textarea id="importExport" style="width: 26%; height: 12em"
      onchange="taChange();" onkeyup="taChange()"></textarea>
  </p>

  <p>
    Stress test: &nbsp;
    <input type="button" value="Airstrike!" onclick="airstrike(100)">
    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
  </p>
  <ul class="playgroundToggleOptions">
    <li>
      <label for="logCheck">Log main workspace events:</label>
      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
    </li>
    <li>
    <label for="logFlyoutCheck">Log flyout events:</label>
    <input type="checkbox" onclick="logFlyoutEvents(this.checked)" id="logFlyoutCheck">
  </li>
  </ul>


  <!-- The next three blocks of XML are sample toolboxes for testing basic
  configurations.  For more information on building toolboxes, see https://developers.google.com/blockly/guides/configure/web/toolbox -->

  <!-- toolbox-simple is an always-open flyout with no category menu.
  Always-open flyouts are a good idea if you have a small number of blocks. -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple" style="display: none">
    <block type="controls_ifelse"></block>
    <block type="logic_compare"></block>
    <!-- <block type="control_repeat"></block> -->
    <block type="logic_operation"></block>
    <block type="controls_repeat_ext">
      <value name="TIMES">
        <shadow type="math_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="logic_operation"></block>
    <block type="logic_negate"></block>
    <block type="logic_boolean"></block>
    <block type="logic_null" disabled="true"></block>
    <block type="logic_ternary"></block>
    <block type="text_charAt">
      <value name="VALUE">
        <block type="variables_get">
          <field name="VAR">text</field>
        </block>
      </value>
    </block>
  </xml>

  <!-- toolbox-categories has a category menu and an auto-closing flyout.  The
  Variables category uses untyped variable blocks.
  See https://developers.google.com/blockly/guides/create-custom-blocks/variables#untyped_variable_blocks for more information. -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories" style="display: none">
    <category name="Logic" categorystyle="logic_category">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
      <block type="logic_null" disabled="true"></block>
      <block type="logic_ternary"></block>
    </category>
    <category name="Loops" categorystyle="loop_category">
      <label text="Scene" web-icon-color="#fff" web-icon="" web-icon-class="blocklyTreeIconscene" web-class="blocklyFlyoutHeading"></label>
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
      </block>
      <block type="controls_repeat" disabled="true"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
        <value name="FROM">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="TO">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
        <value name="BY">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
      <block type="controls_forEach"></block>
      <block type="controls_flow_statements"></block>
    </category>
    <category name="Math" categorystyle="math_category">
      <block type="math_number" gap="32">
        <field name="NUM">123</field>
      </block>
      <block type="math_arithmetic">
        <value name="A">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="B">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
      <block type="math_single">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">9</field>
          </shadow>
        </value>
      </block>
      <block type="math_trig">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">45</field>
          </shadow>
        </value>
      </block>
      <block type="math_constant"></block>
      <block type="math_number_property">
        <value name="NUMBER_TO_CHECK">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="math_round">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">3.1</field>
          </shadow>
        </value>
      </block>
      <block type="math_on_list"></block>
      <block type="math_modulo">
        <value name="DIVIDEND">
          <shadow type="math_number">
            <field name="NUM">64</field>
          </shadow>
        </value>
        <value name="DIVISOR">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
      </block>
      <block type="math_constrain">
        <value name="VALUE">
          <shadow type="math_number">
            <field name="NUM">50</field>
          </shadow>
        </value>
        <value name="LOW">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="HIGH">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
      </block>
      <block type="math_random_int">
        <value name="FROM">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="TO">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
      </block>
      <block type="math_random_float"></block>
      <block type="math_atan2">
        <value name="X">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="Y">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
    </category>
    <category name="Text" categorystyle="text_category">
      <block type="text"></block>
      <block type="text_multiline"></block>
      <block type="text_join"></block>
      <block type="text_append">
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_length">
        <value name="VALUE">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_isEmpty">
        <value name="VALUE">
          <shadow type="text">
            <field name="TEXT"></field>
          </shadow>
        </value>
      </block>
      <block type="text_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
        <value name="FIND">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_charAt">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_getSubstring">
        <value name="STRING">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_changeCase">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_trim">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_count">
        <value name="SUB">
          <shadow type="text"></shadow>
        </value>
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_replace">
        <value name="FROM">
          <shadow type="text"></shadow>
        </value>
        <value name="TO">
          <shadow type="text"></shadow>
        </value>
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_reverse">
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <label text="Input/Output:" web-class="ioLabel"></label>
      <block type="text_print">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
    </category>
    <category name="Lists" categorystyle="list_category">
      <block type="lists_create_with">
        <mutation items="0"></mutation>
      </block>
      <block type="lists_create_with"></block>
      <block type="lists_repeat">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">5</field>
          </shadow>
        </value>
      </block>
      <block type="lists_length"></block>
      <block type="lists_isEmpty"></block>
      <block type="lists_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getIndex">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_setIndex">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getSublist">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_split">
        <value name="DELIM">
          <shadow type="text">
            <field name="TEXT">,</field>
          </shadow>
        </value>
      </block>
      <block type="lists_sort"></block>
      <block type="lists_reverse"></block>
    </category>
    <category name="Colour" categorystyle="colour_category">
      <block type="colour_picker"></block>
      <block type="colour_random"></block>
      <block type="colour_rgb">
        <value name="RED">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
        <value name="GREEN">
          <shadow type="math_number">
            <field name="NUM">50</field>
          </shadow>
        </value>
        <value name="BLUE">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="colour_blend">
        <value name="COLOUR1">
          <shadow type="colour_picker">
            <field name="COLOUR">#ff0000</field>
          </shadow>
        </value>
        <value name="COLOUR2">
          <shadow type="colour_picker">
            <field name="COLOUR">#3333ff</field>
          </shadow>
        </value>
        <value name="RATIO">
          <shadow type="math_number">
            <field name="NUM">0.5</field>
          </shadow>
        </value>
      </block>
    </category>
    <sep></sep>
    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
  </xml>

  <!-- toolbox-categories-typed-variables has a category menu and an
  auto-closing flyout.  The Variables category uses typed variable blocks.
  See https://developers.google.com/blockly/guides/create-custom-blocks/variables#typed_variable_blocks for more information. -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories-typed-variables" style="display: none">
    <category name="Logic" categorystyle="logic_category">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
      <block type="logic_null" disabled="true"></block>
      <block type="logic_ternary"></block>
    </category>
    <category name="Loops" categorystyle="loop_category">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
      </block>
      <block type="controls_repeat" disabled="true"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
        <value name="FROM">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="TO">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
        <value name="BY">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
      <block type="controls_forEach"></block>
      <block type="controls_flow_statements"></block>
    </category>
    <category name="Math" categorystyle="math_category">
      <block type="math_number" gap="32">
        <field name="NUM">123</field>
      </block>
      <block type="math_arithmetic">
        <value name="A">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="B">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
      <block type="math_single">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">9</field>
          </shadow>
        </value>
      </block>
      <block type="math_trig">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">45</field>
          </shadow>
        </value>
      </block>
      <block type="math_constant"></block>
      <block type="math_number_property">
        <value name="NUMBER_TO_CHECK">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="math_round">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">3.1</field>
          </shadow>
        </value>
      </block>
      <block type="math_on_list"></block>
      <block type="math_modulo">
        <value name="DIVIDEND">
          <shadow type="math_number">
            <field name="NUM">64</field>
          </shadow>
        </value>
        <value name="DIVISOR">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
      </block>
      <block type="math_constrain">
        <value name="VALUE">
          <shadow type="math_number">
            <field name="NUM">50</field>
          </shadow>
        </value>
        <value name="LOW">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="HIGH">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
      </block>
      <block type="math_random_int">
        <value name="FROM">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="TO">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
      </block>
      <block type="math_random_float"></block>
      <block type="math_atan2">
        <value name="X">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
        <value name="Y">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
    </category>
    <category name="Text" categorystyle="text_category">
      <block type="text"></block>
      <block type="text_multiline"></block>
      <block type="text_join"></block>
      <block type="text_append">
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_length">
        <value name="VALUE">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_isEmpty">
        <value name="VALUE">
          <shadow type="text">
            <field name="TEXT"></field>
          </shadow>
        </value>
      </block>
      <block type="text_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
        <value name="FIND">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_charAt">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_getSubstring">
        <value name="STRING">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_changeCase">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_trim">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_count">
        <value name="SUB">
          <shadow type="text"></shadow>
        </value>
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_replace">
        <value name="FROM">
          <shadow type="text"></shadow>
        </value>
        <value name="TO">
          <shadow type="text"></shadow>
        </value>
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <block type="text_reverse">
        <value name="TEXT">
          <shadow type="text"></shadow>
        </value>
      </block>
      <label text="Input/Output:" web-class="ioLabel"></label>
      <block type="text_print">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
    </category>
    <category name="Lists" categorystyle="list_category">
      <block type="lists_create_with">
        <mutation items="0"></mutation>
      </block>
      <block type="lists_create_with"></block>
      <block type="lists_repeat">
        <value name="NUM">
          <shadow type="math_number">
            <field name="NUM">5</field>
          </shadow>
        </value>
      </block>
      <block type="lists_length"></block>
      <block type="lists_isEmpty"></block>
      <block type="lists_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getIndex">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_setIndex">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getSublist">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_split">
        <value name="DELIM">
          <shadow type="text">
            <field name="TEXT">,</field>
          </shadow>
        </value>
      </block>
      <block type="lists_sort"></block>
      <block type="lists_reverse"></block>
    </category>
    <category name="Colour" categorystyle="colour_category">
      <block type="colour_picker"></block>
      <block type="colour_random"></block>
      <block type="colour_rgb">
        <value name="RED">
          <shadow type="math_number">
            <field name="NUM">100</field>
          </shadow>
        </value>
        <value name="GREEN">
          <shadow type="math_number">
            <field name="NUM">50</field>
          </shadow>
        </value>
        <value name="BLUE">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="colour_blend">
        <value name="COLOUR1">
          <shadow type="colour_picker">
            <field name="COLOUR">#ff0000</field>
          </shadow>
        </value>
        <value name="COLOUR2">
          <shadow type="colour_picker">
            <field name="COLOUR">#3333ff</field>
          </shadow>
        </value>
        <value name="RATIO">
          <shadow type="math_number">
            <field name="NUM">0.5</field>
          </shadow>
        </value>
      </block>
    </category>
    <sep></sep>
    <category name="Variables" categorystyle="variable_category" custom="VARIABLE_DYNAMIC"></category>
    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
  </xml>
</body>
</html>