Siatka

Główny obszar roboczy Blockly może opcjonalnie mieć siatkę. Bloki można przypinać do siatki, dzięki czemu układ jest bardziej przejrzysty. Jest to szczególnie przydatne w większych aplikacjach z wieloma grupowaniami kodu rozmieszczonymi na dużym obszarze.

Ustawienia siatki są definiowane przez obiekt będący częścią konfiguracji Blockly. Oto przykład:

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid:
         {spacing: 20,
          length: 3,
          colour: '#ccc',
          snap: true},
     trashcan: true});

Odstępy

Najważniejszą właściwością siatki jest spacing, która określa odległość między punktami siatki. Wartość domyślna to 0, co oznacza brak siatki. Oto przykłady parametru spacing z wartościami 10, 20 i 40:

Długość

Właściwość length to liczba określająca kształt punktów siatki. Jeśli długość równa 0, powstanie siatka niewidoczna (ale nadal taka, do której można przyciągnąć), o długości 1 (wartość domyślna) pojawią się kropki, większa długość oznacza krzyżyk, a długość jest równa lub większa niż odstępy w papie milimetrowym. Oto przykłady użycia funkcji length z wartościami 1, 5 i 20:

kolor

Właściwość colour to ciąg znaków, który określa kolor punktów. Zwróć uwagę na brytyjską pisownię. Użyj dowolnego formatu zgodnego z CSS, np. #f00, #ff0000 lub rgb(255, 0, 0). Wartością domyślną jest #888. Oto przykłady użycia właściwości colour z wartością #000, #ccc i #f00:

Przyciągnij

Właściwość snap to wartość logiczna, która określa, czy bloki mają być przyciągane do najbliższego punktu siatki po umieszczeniu w obszarze roboczym. Wartością domyślną jest false.