selectedStyle

要素が選択されると、そのビジュアル・テンプレートが、割り当てられた 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 メソッドによりダイアグラムからアクセスできます。 選択された要素は、addremove メソッド、および 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);
                    }
                }
            });