El espacio de trabajo principal de Blockly puede tener una cuadrícula de forma opcional. Los bloques se pueden ajustar a la cuadrícula, lo que permite un diseño más limpio. Esto es particularmente útil en aplicaciones más grandes con varios grupos de código distribuidos en un área extensa.
La configuración de la cuadrícula se define mediante un objeto que forma parte de las opciones de 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 significa que no se muestra 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 genera una cuadrícula invisible (pero a la que se puede ajustar), una longitud de 1 (el valor predeterminado) genera puntos, una longitud mayor genera cruces y una longitud igual o mayor que el espaciado genera papel cuadriculado. Estos son ejemplos de length configurado en 1, 5 y 20:
Color
La propiedad colour es una cadena que establece el color de los puntos.
Ten en cuenta la ortografía británica. Usa cualquier formato compatible con CSS, incluidos #f00, #ff0000 o rgb(255, 0, 0). El valor predeterminado es #888.
A continuación, se muestran ejemplos de colour establecido en #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 espacio de trabajo. El valor predeterminado es false.
