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 iframe, CSS e posicionamento em JavaScript. Esta página demonstra uma abordagem de sobreposição robusta e flexível.

Esse é um processo de três etapas. A primeira etapa é 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 uma div com CSS, crie uma área vazia que se ajuste conforme a página é redimensionada. Verifique se a área tem um ID (nesta página, vamos chamá-lo de blocklyArea).

Confira uma demonstração ao vivo de uma célula de tabela que preenche a parte de baixo da tela.

2. Inserir o espaço de trabalho

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

O Blockly agora está sendo executado na página, mas não está 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 os estilos height e width de blocklyDiv e adicione o posicionamento absoluto:

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

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

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