要素が選択されると、そのビジュアル・テンプレートが、割り当てられた
selectedStyle
によって置換されます。selectedStyle
を割り当てるには、このプロパティーを、変更が必要なテンプレートの各部分に追加する必要があります。[{ dojoAttachPoint: '_path', shape: { type: 'polyline', points: [{ x: 0, y: 0 }, { x: 100, y: 0 }] }, stroke: { width: '{{strokeWidth}}', color: '{{strokeColor}}' }, selectedStyle: { stroke: { width: '{{selectedStrokeWidth}}', color: '{{selectedStrokeColor}}' } } }]
また、
selectedStyle
プロパティーは、プログラムで設定することもできます。shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
選択された要素は、
Selection
オブジェクトに保管され、このオブジェクトは getSelection
メソッドによりダイアグラムからアクセスできます。
選択された要素は、add
、remove
メソッド、および clear
メソッドを使用すれば、Selection
オブジェクトに対して追加または削除することができます。これらのメソッドは、GFX オブジェクトまたは DataItems
を受け入れます。
また、Selection
オブジェクトは、複数選択を使用可能および使用不可にするように構成することもできます。Diagram.getSelection().setMultiSelectionEnabled(false);
選択モードは、
dataStore
の存在に基づいて、作成時に決定されます。
ダイアグラムを使用して、さらに dataStore
が作成時に存在している場合、データ項目が選択のメイン・コンポーネントとして使用されていると、dataStore
戦略が選択されます。
GFX 項目が選択のメイン・コンポーネントとして使用される場合は、GFX 戦略が代わりに使用されます。この戦略は、ダイアグラム・マークアップ selectionMode
によって作成時に手動で設定できます。<div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
選択モードを設定する場合、Selection.js で定義された以下の定数を使用することができます。
ibm_ilog.diagram.Selection.standard = 0; ibm_ilog.diagram.Selection.dataStore_single = 1; ibm_ilog.diagram.Selection.dataStore_multi = 2; ibm_ilog.diagram.Selection.gfx_single = 3; ibm_ilog.diagram.Selection.gfx_multi = 4;
選択が変更されるたびに、
onSelectionChanged([added],[removed])
メソッドが呼び出されます。このメソッドにより、任意のカスタム関数を呼び出すことができます。
以下の例では、ダイアグラムが選択された要素の中央に配置されます。dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){ if(centerOnNode) { if(added.length==1) { Diagram.centerOnNode(added[0],true); } } });