El espacio de trabajo principal de Blockly puede tener una cuadrícula de manera opcional. Se pueden hacer bloques para que se ajusten a la cuadrícula, lo que permite un diseño más limpio. Esto es particularmente útil en aplicaciones más grandes con varias agrupaciones de códigos distribuidas en un área grande.
La configuración de la cuadrícula se define mediante un objeto que forma parte de la configuración de Blockly. A continuación, se muestra un ejemplo:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
trashcan: true});
Espaciado
La propiedad de cuadrícula más importante es spacing, que define la distancia entre los puntos de la cuadrícula. El valor predeterminado es 0, lo que no da como resultado ninguna cuadrícula.
Estos son ejemplos de spacing establecido en 10, 20 y 40:
Longitud
La propiedad length es un número que define la forma de los puntos de la cuadrícula.
Una longitud de 0 da como resultado una cuadrícula invisible (pero que aun así puede ajustarse), una longitud de 1 (el valor predeterminado) da como resultado puntos, una longitud más larga da como resultado combinaciones y una longitud igual o mayor que el espaciado da como resultado papel cuadriculado. Estos son ejemplos de length establecido en 1, 5 y 20:
color
La propiedad colour es una cadena que establece el color de los puntos.
Presta atención a la ortografía británica. Usa cualquier formato compatible con CSS, incluidos #f00, #ff0000 o rgb(255, 0, 0). El valor predeterminado es #888.
Estos son ejemplos de colour configurado como #000, #ccc y #f00:
Ajuste
La propiedad snap es un valor booleano que establece si los bloques deben ajustarse al punto de cuadrícula más cercano cuando se colocan en el lugar de trabajo. El valor predeterminado es false.
