How do I use setSelectedItem?

Jacob Danell

unread,

Nov 8, 2017, 10:27:48 AM11/8/17

to Blockly

I'm trying to dynamically populate a category and open that category when the user presses a block.

I have got the population part working but I can't seem to get the category to auto-open.

From what I understand I should use setSelectedItem(node) but how do I really use it? I can't understand fully from the references-page, I find nothing on google and my tests gives me result.

So far my test code looks like this (modified fixed blockly demo):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
  body {
    background-color: #fff;
    font-family: sans-serif;
  }

  h1 {
    font-weight: normal;
    font-size: 140%;
  }
  </style>
</head>

<body>
  <button onclick="myFunction()">Click me</button>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Fixed Blockly</h1>
  <p>This is a simple demo of injecting Blockly into a fixed-sized 'div' element.</p>
  <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/fixed-size">injecting fixed-sized Blockly</a>&hellip;</p>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <category name="Single">
      <block type="text"></block>
      <block type="text_print"></block>
    </category>
    <category name="Colours" custom="COLOUR_PALETTE"></category>
  </xml>
  <script>
  var demoWorkspace = Blockly.inject('blocklyDiv', {
    media: '../../media/',
    toolbox: document.getElementById('toolbox')
  });

  blocklyTextToDom = function(blockArray) {
    var block = [];
    for (var i = 0; i < blockArray.length; i++) {
      block.push(Blockly.Xml.textToDom(blockArray[i]));
    }
    console.log(block);
    return block;
  }

  coloursFlyoutCallback = function(workspace) {
    // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
    var colourList = ['#4286f4', '#ef0447'];
    var xmlList = [];
    if (Blockly.Blocks['colour_picker']) {
      for (var i = 0; i < colourList.length; i++) {
        var blockText = '<block type="colour_picker">' +
          '<field name="COLOUR">' + colourList[i] + '</field>' +
          '</block>';
        var block = Blockly.Xml.textToDom(blockText);
        console.log(blockText);
        console.log(block);
        xmlList.push(block);
      }
    }
    console.log(xmlList);
    return xmlList;
  };
  demoWorkspace.registerToolboxCategoryCallback('COLOUR_PALETTE', coloursFlyoutCallback);

  function onSelect(event) {
    //console.log(event);
    //console.log(Blockly.selected);
    if (event.element == "click") {
      console.log("Block clicked");
      demoWorkspace.registerToolboxCategoryCallback('COLOUR_PALETTE', function() { return blocklyTextToDom(strVar) });

    } else if (event.element == "category")  {
      console.log("Category clicked");
    }
  }
  demoWorkspace.addChangeListener(onSelect);


  var strVar = [];
  strVar.push("<block type=\"controls_if\"><\/block>");
  strVar.push("<block type=\"logic_compare\"><\/block>");
  strVar.push("<block type=\"controls_repeat_ext\"><\/block>");
  strVar.push("<block type=\"math_number\"><\/block>");
  strVar.push("<block type=\"math_arithmetic\"><\/block>");
  strVar.push("<block type=\"text\"><\/block>");
  strVar.push("<block type=\"text_print\"><\/block>");
  </script>
</body>

</html>

Erik Pasternak

unread,

Nov 8, 2017, 2:20:01 PM11/8/17

to Blockly

Hi Jacob,

There's not a clean way to open the flyout, but if you know the order of your toolbox and which position the custom category is at you can use the following:

var tree = workspace.toolbox_.tree_;
tree.setSelectedItem(tree.getChildren()[3]);

This is a bit of a hack, but should work for your case.

Cheers,

Erik

Jacob Danell

unread,

Nov 8, 2017, 4:06:21 PM11/8/17

to Blockly

Thank you so much Erik! Works wonderfully! It's ok for me to put that category as the first one so I always will know for sure where it is.

Reply all

Reply to author

Forward