L'espace de travail principal de Blockly peut éventuellement comporter une grille. Il est possible de créer des blocs pour s'ancrer à la grille, ce qui permet une mise en page plus propre. Cela est particulièrement utile dans les applications plus volumineuses avec plusieurs regroupements de code répartis sur une vaste zone.
Les paramètres de la grille sont définis par un objet faisant partie de la configuration de Blockly. Voici un exemple :
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
trashcan: true});
Espacement
La propriété la plus importante de la grille est spacing, qui définit la distance entre les points de la grille. La valeur par défaut est 0, ce qui signifie qu'il n'y a pas de grille.
Voici des exemples de valeurs spacing définies sur 10, 20 et 40:
Longueur
La propriété length est un nombre qui définit la forme des points de la grille.
Une longueur de 0 donne une grille invisible (mais toujours une grille qui peut être ancrée), une longueur de 1 (la valeur par défaut) génère des points, une longueur plus longue génère des croisements et une longueur égale ou supérieure à l'espacement donne sur le papier à graphique. Voici des exemples de valeurs length définies sur 1, 5 et 20:
Coloris
La propriété colour est une chaîne qui définit la couleur des points.
Notez l'orthographe britannique. Utilisez un format compatible avec CSS, y compris #f00, #ff0000 ou rgb(255, 0, 0). La valeur par défaut est #888.
Voici des exemples de valeurs colour définies sur #000, #ccc et #f00:
Instantané
La propriété snap est une valeur booléenne qui détermine si les blocs doivent s'ancrer au point de grille le plus proche lorsqu'ils sont placés dans l'espace de travail. La valeur par défaut est false.
