Größe des Arbeitsbereichs anpassbar

In einer guten Webanwendung wird die Größe von Blockly nicht so angepasst, dass der verfügbare Platz auf dem Bildschirm ausgefüllt wird. Dafür gibt es mehrere Möglichkeiten, unter anderem mithilfe von iFrame-, CSS- und JavaScript-Positionierung. Diese Seite zeigt einen Overlay-Ansatz, der robust und flexibel ist.

Dieser Prozess umfasst drei Schritte. Der erste Schritt besteht darin, den Bereich zu definieren. Im zweiten Schritt wird Blockly injiziert. Im dritten Schritt wird Blockly über diesem Bereich positioniert.

1. Bereich definieren

Erstellen Sie mithilfe einer HTML-Tabelle oder eines div mit CSS einen leeren Bereich, der automatisch angepasst wird, wenn die Größe der Seite geändert wird. Der Bereich muss eine ID haben (auf dieser Seite nennen wir ihn blocklyArea).

Hier finden Sie eine Live-Demo einer Tabellenzelle, die den unteren Bildschirmrand ausfüllt.

2. Arbeitsbereich einfügen

Das Einfügen von Blockly entspricht dem unter Blockly mit fester Größe injizieren. Fügen Sie den Code, das blocklyDiv-Element, eine Toolbox und einen Injection-Aufruf hinzu.

Blockly sollte jetzt auf der Seite ausgeführt werden, aber nicht an der gewünschten Stelle (wahrscheinlich außerhalb des Bildschirms).

3. Arbeitsbereich positionieren

Im letzten Schritt wird das blocklyDiv-Element über dem blocklyArea-Element positioniert. Entfernen Sie dazu alle Stile height und width aus blocklyDiv und fügen Sie die absolute Positionierung hinzu:

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

Ersetzen Sie dann das Injection-Skript durch ein Skript, das auch „blocklyDiv“ über „blocklyArea“ platziert:

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();

Diese Live-Demo von Blockly nimmt den unteren Bildschirmrand ein.