그리드

Blockly의 기본 작업공간에는 선택적으로 그리드를 포함할 수 있습니다. 그리드에 맞춰 블록을 만들 수 있어 레이아웃을 더 깔끔하게 만들 수 있습니다. 이는 다수의 코드 그룹이 넓은 영역에 분산된 대규모 애플리케이션에서 특히 유용합니다.

그리드의 설정은 Blockly 구성의 일부인 객체에 의해 정의됩니다. 예를 들면 다음과 같습니다.

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

간격

가장 중요한 그리드 속성은 그리드 지점 간의 거리를 정의하는 spacing입니다. 기본값은 0이며 이 경우 그리드가 표시되지 않습니다. 다음은 10, 20, 40으로 설정된 spacing의 예입니다.

길이

length 속성은 그리드 점의 모양을 정의하는 숫자입니다. 길이가 0이면 그리드가 보이지 않게 되고 (하지만 여전히 맞추기는 가능), 길이가 1 (기본값)이면 점이 표시되고, 길이가 길면 십자가가 표시되고, 길이가 같거나 더 클수록 그래프 용지가 됩니다. 다음은 1, 5, 20으로 설정된 length의 예입니다.

색상

colour 속성은 점의 색상을 설정하는 문자열입니다. 영국식 철자를 봐. #f00, #ff0000, rgb(255, 0, 0) 등 CSS와 호환되는 형식을 사용하세요. 기본값은 #888입니다. 다음은 #000, #ccc, #f00로 설정된 colour의 예입니다.

Snap

snap 속성은 작업공간에 배치할 때 블록을 가장 가까운 그리드 포인트에 맞춰야 할지 여부를 설정하는 불리언입니다. 기본값은 false입니다.