Espaço de trabalho redimensionável

Um bom aplicativo da Web redimensiona o Blockly para preencher o espaço disponível na tela em vez de ter um tamanho fixo. Há várias maneiras de fazer isso, incluindo o uso de um posicionamento de iframe, CSS e JavaScript. Esta página demonstra uma abordagem de sobreposição que é robusta e flexível.

Esse é um processo de três etapas. O primeiro passo é definir a área. A segunda etapa é injetar o Blockly. A terceira etapa é posicionar o Blockly sobre essa área.

1. Definir a área

Usando uma tabela HTML ou um div com CSS, crie uma área vazia que flui à medida que a página é redimensionada. Verifique se a área tem um ID (nesta página, vamos chamá-la de blocklyArea).

Veja uma demonstração ao vivo (em inglês) de uma célula de tabela que preenche a parte inferior da tela.

2. Injetar o espaço de trabalho

A injeção do Blockly é o mesmo que o processo descrito em Como injetar o Blockly de tamanho fixo. Adicione o código, o elemento blocklyDiv, uma caixa de ferramentas e uma chamada de injeção.

Agora, o Blockly deve estar em execução na página, mas não localizado onde deveria estar (provavelmente fora da tela).

3. Posicionar o espaço de trabalho

A etapa final é posicionar o elemento blocklyDiv sobre o elemento blocklyArea. Para fazer isso, remova todos os estilos height e width de blocklyDiv e adicione posicionamento absoluto:

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

Em seguida, substitua o script de injeção por um que também posicione "blocklyDiv" em "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();

Confira uma demonstração ao vivo do Blockly que preenche a parte de baixo da tela.