Opcja siatki

Główny obszar roboczy Blockly może opcjonalnie mieć siatkę. Bloki mogą być dopasowywane do siatki, co umożliwia tworzenie czystszych układów. Jest to szczególnie przydatne w większych aplikacjach z wieloma grupami kodu rozmieszczonymi na dużym obszarze.

Ustawienia siatki są definiowane przez obiekt, który jest częścią opcji 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 wartości spacing ustawionej na 10, 20 i 40:

Długość

Właściwość length to liczba określająca kształt punktów siatki. Długość 0 powoduje, że siatka jest niewidoczna (ale nadal można ją przyciągać), długość 1 (wartość domyślna) powoduje, że siatka jest widoczna jako kropki, dłuższa długość powoduje, że siatka jest widoczna jako krzyżyki, a długość równa lub większa od odstępu powoduje, że siatka jest widoczna jako papier do rysowania. Oto przykłady wartości length równej 1, 5 i 20:

Kolor

Właściwość colour to ciąg znaków określający kolor punktów. Uwaga: pisownia brytyjska. Użyj dowolnego formatu zgodnego z CSS, np. #f00, #ff0000 lub rgb(255, 0, 0). Wartością domyślną jest #888. Oto przykłady ustawień colour na #000, #ccc i #f00:

Przyciągnij

Właściwość snap to wartość logiczna, która określa, czy bloki mają się dopasowywać do najbliższego punktu siatki po umieszczeniu na obszarze roboczym. (wartością domyślną jest false);