Сетка

Основное рабочее пространство 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 — это число, определяющее форму точек сетки. Длина 0 приводит к невидимой сетке (но все же такой, к которой можно привязаться), длина 1 (значение по умолчанию) приводит к точкам, большая длина приводит к крестикам, а длина равна или больше, чем интервалы. в миллиметровой бумаге. Вот примеры length , установленной на 1, 5 и 20:

Цвет

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

Щелчок

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