Area di lavoro ridimensionabile

Una buona applicazione web ridimensionerà Blockly per riempire lo spazio disponibile sullo schermo anziché avere dimensioni fisse. Esistono diversi modi per farlo, tra cui l'utilizzo di un iframe, CSS e posizionamento JavaScript. Questa pagina mostra un approccio di overlay solido e flessibile.

Si tratta di una procedura in tre passaggi. Il primo passaggio consiste nel definire l'area. Il secondo passaggio consiste nell'inserimento di Blockly. Il terzo passaggio consiste nel posizionare Blockly sopra questa area.

1. Definisci l'area

Utilizzando una tabella HTML o un div con CSS, crea un'area vuota che si adatti al ridimensionamento della pagina. Assicurati che l'area abbia un ID (in questa pagina lo chiameremo blocklyArea).

Ecco una demo dal vivo di una cella della tabella che riempie la parte inferiore dello schermo.

2. Inserisci lo spazio di lavoro

L'inserimento di Blockly è uguale alla procedura descritta in Inserimento di Blockly a dimensioni fisse. Aggiungi il codice, l'elemento blocklyDiv, una casella degli strumenti e una chiamata di inserimento.

Blockly dovrebbe essere in esecuzione sulla pagina, ma non si trova nella posizione corretta (probabilmente è fuori dallo schermo).

3. Posizionare lo spazio di lavoro

Il passaggio finale consiste nel posizionare l'elemento blocklyDiv sopra l'elemento blocklyArea. Per farlo, rimuovi gli stili height e width da blocklyDiv e aggiungi il posizionamento assoluto:

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

Quindi, sostituisci lo script di inserimento con uno che posizioni anche blocklyDiv sopra 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();

Ecco una demo live di Blockly che riempie la parte inferiore dello schermo.