Опция сетки

Основное рабочее пространство Blockly может быть опционально дополнено сеткой. Блоки можно привязывать к сетке, что обеспечивает более чёткую компоновку. Это особенно полезно в крупных приложениях с несколькими группами кода, разбросанными по большой площади.

Настройки сетки определяются объектом, который является частью параметров конфигурации Blockly. Вот пример:

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

Интервал

Важнейшим свойством сетки является spacing , который определяет расстояние между её точками. Значение по умолчанию — 0, что означает отсутствие сетки. Ниже приведены примеры spacing со значениями 10, 20 и 40:

Длина

Свойство length — это число, определяющее форму узлов сетки. Значение length, равное 0, создаёт невидимую сетку (но к ней можно привязаться), значение length, равное 1 (значение по умолчанию), создаёт точки, большее значение — крестики, а значение length, равное или превышающее интервал, создаёт миллиметровку. Вот примеры значений length , равных 1, 5 и 20:

Цвет

Свойство colour — это строка, которая задаёт цвет точек. Обратите внимание на британское написание. Используйте любой совместимый с CSS формат, включая #f00 , #ff0000 или rgb(255, 0, 0) . Значение по умолчанию — #888 . Вот примеры colour , для которых заданы значения #000 , #ccc и #f00 :

Щелчок

Свойство snap — это логическое значение, которое определяет, будут ли блоки привязываться к ближайшей точке сетки при размещении в рабочей области. Значение по умолчанию — false .