Una buena aplicación web cambiará el tamaño de Blockly para llenar el espacio disponible en pantalla en lugar de ser de un tamaño fijo. Hay varias formas de hacerlo, incluido el uso de un iframe, CSS y posicionamiento de JavaScript. En esta página, se muestra un enfoque de superposición que es sólido y flexible.
Este es un proceso de tres pasos. El primer paso es definir el área. El segundo paso es inyectar Blockly. El tercer paso es posicionar Blockly en esta área.
1. Define el área
Con una tabla HTML o una div con CSS, crea un área vacía que se redistribuya a medida que se cambia el tamaño de la página.
Asegúrate de que el área tenga un ID (en esta página, la llamaremos blocklyArea).
Esta es una demostración en vivo de una celda de tabla que llena la parte inferior de la pantalla.
2. Cómo insertar el espacio de trabajo
La inyección de Blockly es el mismo proceso descrito en Cómo insertar Blockly de tamaño fijo.
Agrega el código, el elemento blocklyDiv, una caja de herramientas y una llamada de inserción.
Blockly debería estar ejecutándose en la página, solo que no ubicado donde debería estar (probablemente fuera de la pantalla).
3. Posiciona el lugar de trabajo
El paso final es colocar el elemento blocklyDiv sobre el elemento blocklyArea. Para ello, quita los diseños height y width de blocklyDiv y agrega el posicionamiento absoluto:
<div id="blocklyDiv" style="position: absolute"></div>
Luego, reemplaza la secuencia de comandos de inserción por una que también coloque "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();
Esta es una demostración en vivo de Blockly que llena la parte inferior de la pantalla.