GFX レイアウト

Dojo Diagrammer GFX レイアウト API は、dojox.gfx API を拡張します。この API は GFX グループ・クラス (したがって、ノード・クラス) に対して、場所およびサイズ制約に従って子を自動的に配置する機能を提供します。
この拡張 API では、ノード・サブコンポーネントの位置およびサイズをハードコーディングする必要はありません。ノードは、サイズに影響する変更が行われると、すぐにそのサイズを内容に合わせて自動的に適合させます。例えば、ノード・ラベルが長くなると、ノード・サイズは新たなラベル・サイズに動的に合わせられます。
gfxlayout API は、ほとんどのサンプルで使用されていますが、デフォルトでは使用可能になっていません。これを使用可能にするには、以下のコードに示されているように、djConfiguseGfxLayout プロパティーを true に設定します。
<script type="text/javascript">
	    var djConfig = {
	        parseOnLoad:true,
               useGfxLayout:true
	    }
</scrip>
	

ノードの子の配置

ノード・インスタンスの子が配置される場合、ノードの直接の子は、通常、子形状のトップ・パネルとして動作するグループ・インスタンスになります。このパネルは、選択したレイアウト・アルゴリズムと連携して、子オブジェクトのサイズおよび位置を処理します。
以下の例では、背景形状とテキスト・ラベルで構成される基本ノードを構築するためのテンプレートの作成方法を示しています。 このテンプレートは、デフォルト・ノード・テンプレートの簡易版です。そのレイアウト制約は、ノード・サイズが常にラベル・サイズに合うように設定されています。
{
layout: { type:'ibm_ilog.diagram.gfxlayout.GridLayout' },
children: [
    { 
        dojoAttachPoint: 'baseShape',
        minimumSize:{width:80, height:40},
        shape: { width:1, height:1, r: 5, type:'rect'}, 
        fill: '{{backgroundColor}}', 
        stroke: {'color': '{{borderColor}}', 
        'width': 2 }
    },
    {
        dojoAttachPoint: 'textShape', 
        margins:[5,5,5,-2],
        shape: {type:'text', text:'{{label}}', align:'middle'}, 
        fill:'{{textColor}}', 
        font:{type:'font', size:'10pt', family:'sans-serif'}
    }
]
}
このテンプレートでは、まず、固有な直接の子としてグループを定義します。GridLayout クラスのインスタンスは、このグループに設定されています。このグループは、2 つの子で構成されています。
  • サイズ・パラメーターが 1 に設定され、ラベル・サイズに合うようになっている長方形形状。ただし、最小サイズも指定されており、ラベル・サイズが小さい場合は、ノードはそのデフォルト・サイズを維持します。レイアウト・エンジンが minimumSize プロパティーを使用して、形状のサイズを制御しています。
  • ノードのラベル・プロパティーにバインドされたテキスト形状。ラベルとパネル境界の間のスペースを定義するため、テキストに対して margins プロパティーが設定されます。
次の図は、その結果を表しており、ノード・サイズがラベル長に合うように調整されていることを示しています。
2 つの長方形ノード (図の左上と右下) を示す図。どちらのノードにも青い背景があります。左上のノードには、「ノード 1」のラベルが設定され、右下のノードには「新規ノードに 1 追加」のラベルが設定されています。各形状のサイズは、そのラベルの長さに調整されています。
この例では、レイアウトに制約を追加する 2 つのプロパティー、minimumSize および margins を指定しています。 これらは、任意の形状に定義でき、すべてのレイアウト・アルゴリズムでサポートされる一連のプロパティーの一部です。
  • halign および valign: 水平整列および垂直整列。
    これらのプロパティーは、パネル・スロット内の形状の水平位置および垂直位置を計算するために使用されます。
    halign の値は、left、center、right、stretch です。
    valign の値は、top、center、bottom、stretch です。
    値が「stretch」の場合、その形状はスロット全体を埋めます。
  • margins: スロット内の形状のマージン。
    これは、スロット境界と形状そのものとの間のスペースを示です。値は、左、上部、右、および下部マージンを同じ値に設定する単独の数値か、または、左、上部、右、および下部マージンを順に配置した 4 つの数値の配列になります。
  • minimumSize: 形状の最小サイズ。
  • maximumSize: 形状の最大サイズ。

StackLayout

ibm_ilog.diagram.gfxlayout.StackLayout クラスは、水平スタックまたは垂直スタックにコンテナーの子を配置します。方向は、構成時に horizontal プロパティーによって与えられます。
以下の図は、StackLayout の horizontal プロパティーが最初のインスタンスでは false に、2 番目のインスタンスでは true に設定された 2 つのグループ・インスタンスを示しています。
長さは同じだが高さが異なる 4 つの長方形形状のグループを示す図。形状は、垂直に配置されており、それぞれの間に隙間があります。
(プロパティー horizontal が false に設定されたスタック・レイアウト。)
高さは同じだが長さが異なる 4 つの長方形形状のグループを示す図。形状は、水平に配置されており、それぞれの間に隙間があります。
(プロパティー horizontal が true に設定されたスタック・レイアウト。)
StackLayout クラスは、paddingLeftpaddingRightpaddingTop、および paddingBottom プロパティーを定義してパネルの内部マージンを指定します。子は、そのマージンに従って配置されます。グローバルな padding プロパティーは、すべての方向の同じ埋め込みを定義します。子と子の間のスペースは、gap プロパティーを使用して調整できます。 以下の図は、これらのプロパティーを示しています。
垂直に積み上げられた 3 つの長方形形状を示す図。
この図は、形状間の隙間、およびこの形状グループを含むパネルに対する左、右、上、下の埋め込みを示しています。
水平スタック・レイアウトは、子オブジェクトをその valign プロパティーおよび margins プロパティーの値に従って計算されたレイアウト・スロット内に垂直に配置します。 垂直スタック・レイアウトは、子オブジェクトをその halign プロパティーおよび margins プロパティーの値に従って計算されたレイアウト・スロット内に水平に配置します。
以下の図は、水平整列および垂直整列の値がどのようにレイアウトによって使用されてコンテナー内で形状が配置されているかを示しています。
垂直スタック・レイアウトおよび水平スタック・レイアウトを示す図。垂直スタック・レイアウトでは、サイズの異なる 4 つの長方形形状が積み上げられています。各形状には内部にラベルがついています: center (形状がコンテナー・パネル内で中央に水平配置される)、stretch (形状が、コンテナー・パネル内で右および左マージンに水平位置合わせされる)、left (形状がコンテナー・パネルの左側に水平位置合わせされる)、center (形状がコンテナー・パネル内で中央に水平配置される)。この垂直スタック・レイアウトの上部には、キャプション「halign プロパティー」が表示されています。水平スタック・レイアウトでは、異なるサイズの 4 つの長方形形状が互いに隣り合って表示されています。各形状には内部にラベルがついています: center (形状がコンテナー・パネル内で中央に垂直配置される)、stretch (形状が、コンテナー・パネル内で上部および下部マージンに垂直位置合わせされる)、bottom (形状がコンテナー・パネルの下部に垂直位置合わせされる)、top (形状がコンテナー形状の上部に垂直位置合わせされる)。この水平スタック・レイアウトの上部には、キャプション「valign プロパティー」が表示されています。
以下のテンプレート・コードは、図に示されている水平スタックを生成します。
{
layout:{
horizontal:true,
gap:10,
padding:[5,5,5,5]},
children:[
{
valign:'center',
shape:{x:0, y:0, width:60, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'stretch',
shape:{x:0, y:0, width:110, height:65, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'bottom',
shape:{x:0, y:0, width:40, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'top', 
shape:{x:0, y:0, width:80, height:20, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},
]}

GridLayout

ibm_ilog.diagram.gfxlayout.GridLayout クラスは、グリッド要素としてコンテナーの子を配置します。
グリッド・レイアウト構造は、各行または列のメトリックがどのように計算されるかを指定する列および行記述子オブジェクトの集合によって定義されます。 これらの記述子オブジェクトは、以下のプロパティーをサポートしています。
  • width および height: コンテナーの幅と高さが固定されていない場合、このプロパティーの値によって列幅または行の高さが決定されます。値 -1 は、寸法を最大の子の寸法に合わせます。
  • weight: コンテナーの幅と高さが固定されている場合、このプロパティーによって、コンテナーの幅または高さからすべての固定幅または固定高を差し引いた残りのスペースがどのように列または行にわたって配分されるかが定義されます。例えば、weight が 2 の列には、weight が 1 で同じ固定幅の列の 2 倍のスペースが設定されます。weight が 2 の行には、weight が 1 で同じ固定高の行の 2 倍のスペースが設定されます。
以下のグリッド構造を考えます。
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ],  
rows:[{ height:90}, {height:-1}]
パネル全体は、固定幅 600 になっています。最初の列は、250 ピクセル幅に設定されており、その他の列には、第 2 および第 4 列の幅が第 3 列の幅の 2 倍という制約で残りのスペースを共有しています。
高さパネルが -1 に設定されている場合、そのパネルは子のサイズが適用されます。この例の場合、最初の行が固定高 90 になっており、第 2 行はこの行内の形状の最大高に合わせられます。以下の図は、このグリッド構造を示しています。
上記のグリッド構造を示す図。
GridLayout クラスは、paddingLeftpaddingRightpaddingTop、および paddingBottom プロパティーを定義してパネルの内部マージンを指定します。子は、そのマージンに従って配置されます。グローバルな padding プロパティーは、すべての方向の同じ埋め込みを定義します。この埋め込みは、各形状に定義されている特定のマージンに追加されます。以下の図は、これらのプロパティー間の関係を示しています。
異なるサイズの 4 つの正方形形状を含むグリッド・レイアウト上の埋め込みを示す図。このグリッド・コンテナーの上部、下部、左側、および右側に埋め込みがあります。グリッド・コンテナーの形状間にはマージンがあります。
グリッド内の子は、子の column および row プロパティーに従ってグリッド・セル内に配置されます。これらのプロパティーが形状に指定されていない場合、その形状は、コンテナーの子リスト内の順序に従ってグリッド内に自動的に配置されます。配置の方向は、プロパティー horizontalFlow によって定義されます。このプロパティーは、デフォルトでは true になっています。
horizontalFlow プロパティーが true で、子が特定の行インデックスまたは列インデックスを定義していない場合、最初の子は (0,0) セルに、2 番目の子は (1,0) セルにというように配置されます。
1 つの子は、その colspan または rowspan プロパティーに応じて、複数の行または列にわたることができます。 これらのプロパティーは、子がオーバーラップする列数または行数を示しています。
colspan または rowspan プロパティーに -1 の値を指定すると、その子は残りの列または行すべてにわたることを示します。以下の図では、セル (0,0) の形状が 2 つの列にわたるように構成されています (colspan プロパティーが 2 に設定されています)。セル (2,0) の別の形状が垂直に残りすべての行にわたるように構成されています (rowspan プロパティーが -1 に設定されています)。
上記のようにわたるグリッドを示す図