Resizable Workspace documentation out of date?

[Robert Czechowski]

Hi,

The documentation about embedding resizable Blockly workspaces seems to be outdated:

https://developers.google.com/blockly/guides/configure/web/resizable

It seems that nowadays, Blockly itself takes care about resizing the workspace. Thus, as far as I can see, the Script should  only read:

<script>

  var blocklyArea = document.getElementById('blocklyArea');

  var workspace = Blockly.inject(blocklyArea,

      {toolbox: document.getElementById('toolbox')});

  Blockly.svgResize(workspace);

</script>

I'm not even sure if the last line is even still necessary.

The problem with the current example, is that the Blockly Workspace resizes itself on the "resize" event according to the blocklyDiv. Only afterwards, the blocklyDiv is resized to the size of the blocklyArea element. This leads to the effect, that the Blockly workspace has the size, the blocklyArea previously had, not the size it currently has.

Same holds for the live demo:

https://blockly-demo.appspot.com/static/demos/resizable/overlay.html

Best

Robert

[picklesrus]

This does seem to be a bit confusing.  Let me see if I can explain a few things and then maybe we can figure out how to update the documentation to make it more clear.

Blockly does register for window resize events and in that callback it calls Blockly.svgResize(workspace) itself. If the page it is embedded in changes size in some other way (e.g. a menu outside of blockly is opened and the blockly area needs to shrink accordingly), you'd need to call Blockly.svgResize(workspace) to tell it.

For the resizeable demo example in the documentation, you are correct that Blockly.svgResize(workspace) is getting called twice per window resize event.  I haven't checked the ordering on the event handlers, but I suspect that Blockly's internal window resize handler is called first (because it is registered first) and the blocklyArea element size (it has a height and width that are explicitly set in pixels) hasn't been updated by the local onresize() function yet so it does nothing.  

If I were setting up a blockly workspace that I wanted to expand/shrink to fit a certain part of the screen, I'd probably try to avoid explicit pixel values, because I'm lazy and wouldn't want to manage them myself  Instead, I'd probably try to use percentages like the playground does:

https://github.com/google/blockly/blob/master/tests/playground.html#L315.

So perhaps it would be better to document the playground way of doing things and point out the other as a secondary option?

I do want to make sure we call out svgResize as an important method you need to call if you're changing the size/shape of the page on your own.  The current resize example does this, but in a rather convoluted way.