Der Hauptarbeitsbereich von Blockly kann optional ein Raster haben. Blöcke können am Raster angedockt werden, was ein übersichtlicheres Layout ermöglicht. Dies ist besonders bei größeren Anwendungen mit mehreren Codegruppierungen hilfreich, die über einen großen Bereich verteilt sind.
Die Rastereinstellungen werden durch ein Objekt definiert, das Teil der Blockly-Konfiguration ist. Hier ein Beispiel:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
trashcan: true});
Abstand
Die wichtigste Rastereigenschaft ist spacing. Sie definiert den Abstand zwischen den Rasterpunkten. Der Standardwert ist 0, d. h., es gibt kein Raster.
Hier sind Beispiele für spacing, die auf 10, 20 und 40 festgelegt sind:
Länge
Die Eigenschaft length ist eine Zahl, die die Form der Rasterpunkte definiert.
Eine Länge von 0 führt zu einem unsichtbaren Raster (aber noch eines, an das angedockt werden kann). Eine Länge von 1 (Standardwert) führt zu Punkten, eine längere Länge zu Kreuzen und eine Länge, die gleich oder größer als der Abstand ist, auf Millimeterpapier. Hier sind Beispiele für length, die auf 1, 5 und 20 festgelegt sind:
Farbe
Die Eigenschaft colour ist ein String, mit dem die Farbe der Punkte festgelegt wird.
Beachten Sie die britische Schreibweise. Verwenden Sie ein beliebiges CSS-kompatibles Format, einschließlich #f00, #ff0000 oder rgb(255, 0, 0). Der Standardwert ist #888.
Hier sind Beispiele für colour, die auf #000, #ccc und #f00 festgelegt sind:
Snap
Die Eigenschaft snap ist ein boolescher Wert, mit dem festgelegt wird, ob Blöcke am nächsten Rasterpunkt ausgerichtet werden sollen, wenn sie im Arbeitsbereich platziert werden. Der Standardwert ist false.
