Una buena aplicación web cambiará el tamaño de Blockly para que ocupe el espacio disponible en la pantalla en lugar de tener un tamaño fijo. Hay varias formas de hacerlo, como usar 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 insertar Blockly. El tercer paso es colocar Blockly sobre esta área.
1. Cómo definir el área
Crea un área vacía que se ajuste a medida que se cambia el tamaño de la página con una tabla HTML o un div con CSS.
Asegúrate de que el área tenga un ID (en esta página, lo llamaremos blocklyArea).
Aquí tienes una demostración en vivo de una celda de tabla que ocupa la parte inferior de la pantalla.
2. Cómo inyectar el espacio de trabajo
La inyección de Blockly es el mismo proceso que se describe en cómo inyectar Blockly de tamaño fijo.
Agrega el código, el elemento blocklyDiv, una caja de herramientas y una llamada de inserción.
Blockly ahora debería ejecutarse en la página, pero no estar ubicado donde debería (probablemente fuera de la pantalla).
3. Cómo colocar el espacio de trabajo
El paso final es colocar el elemento blocklyDiv sobre el elemento blocklyArea. Para ello, quita los estilos height y width de blocklyDiv y agrega una posición absoluta:
<div id="blocklyDiv" style="position: absolute"></div>
Luego, reemplaza la secuencia de comandos de inserción por una que también 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();
Aquí tienes una demostración en vivo de Blockly que ocupa la parte inferior de la pantalla.