グリッド

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 プロパティは、ポイントの色を設定する文字列です。イギリスのスペルに注意してください。#f00、#ff0000、rgb(255, 0, 0) など、任意の CSS 互換形式を使用します。デフォルト値は #888 です。colour を #000、#ccc、#f00 に設定する例を次に示します。

Snap

snap プロパティは、ワークスペースに配置されたときにブロックを最も近いグリッド ポイントにスナップするかどうかを設定するブール値です。デフォルト値は false です。