グリッド

このページの内容
スペース
期間
色
Snap

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 です。