Resizable workspace

  • This page describes an overlay approach for resizing Blockly to fill the available screen space.

  • Resizing Blockly using this method involves three steps: defining the area, injecting Blockly, and positioning Blockly over the defined area.

  • The defined area should be created using HTML or CSS to reflow as the page is resized and have a specific ID.

  • Injecting Blockly into the page is the same process as for a fixed-size setup.

  • Positioning the Blockly workspace involves setting its style to absolute and using JavaScript to dynamically adjust its position and size based on the defined area and window resize events.

A good web application will resize Blockly to fill the available space on screen rather than being a fixed size. There are several ways to do this, including using an iframe, CSS, and JavaScript positioning. This page demonstrates an overlay approach which is robust and flexible.

This is a three-step process. The first step is to define the area. The second step is to inject Blockly. The third step is to position Blockly over this area.

1. Define the area

Using either an HTML table or a div with CSS, create an empty area that reflows as the page is resized. Ensure that the area has an ID (on this page we will call it blocklyArea).

Here is a live demo of a table cell that fills the bottom of the screen.

2. Inject the workspace

Injecting Blockly is the same as the process described in injecting fixed-sized Blockly. Add the code, the blocklyDiv element, a toolbox, and an injection call.

Blockly should now be running on the page, just not located where it should be (probably offscreen).

3. Position the workspace

The final step is to position the blocklyDiv element over the blocklyArea element. To do this, remove any height and width styles from blocklyDiv and add absolute positioning:

<div id="blocklyDiv" style="position: absolute"></div>

Then replace the injection script with one that also positions blocklyDiv over blocklyArea:

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();

Here is a live demo of Blockly that fills the bottom of the screen.