selectedStyle

Bei der Auswahl eines Elements wird die zugehörige visuelle Schablone durch den zugeordneten selectedStyle ersetzt. Zum Zuordnen eines selectedStyle müssen Sie diese Eigenschaft jedem Teil der Schablone hinzufügen, der geändert werden muss:
[{
   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}}'
     }
  }
}]
Die Eigenschaft selectedStyle kann auch über das Programm definiert werden:
shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
Die ausgewählten Elemente werden in einem Objekt Selection gespeichert, auf das mit der Methode getSelection über das Diagramm zugegriffen werden kann. Die ausgewählten Elemente können mit den Methoden add, remove und clear im dem Objekt Selection hinzugefügt bzw. entfernt werden. Diese Methoden akzeptieren ein GFX-Objekt oder DataItems. Das Objekt Selection kann auch so konfiguriert werden, dass eine Mehrfachauswahl zugelassen bzw. nicht zugelassen wird:
Diagram.getSelection().setMultiSelectionEnabled(false);
Der Auswahlmodus wird zur Erstellungszeit basierend auf der Existenz von dataStore bestimmt. Wenn Sie ein Diagramm verwenden und ein dataStore zur Erstellungszeit vorhanden ist, wird die Strategie dataStore ausgewählt, wenn Datenelemente als Hauptkomponente der Auswahl verwendet werden. Werden GFX-Elemente als Hauptkomponente der Auswahl verwendet, wird stattdessen die GFX-Strategie verwendet. Diese Strategie kann manuell zur Erstellungszeit mit der Diagram-Markup selectionMode festgelegt werden.
<div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
Zum Festlegen des Auswahlmodus können Sie die folgenden Konstanten verwenden, die in Selection.js definiert sind:
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;
Jedesmal, wenn sich die Auswahl ändert, wird die Methode onSelectionChanged([added],[removed]) aufgerufen. Über diese Methode können Sie jede angepasste Funktion aufrufen. Im folgenden Beispiel wird das Diagram-Widget auf dem ausgewählten Element zentriert:
dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){
                if(centerOnNode) {
                    if(added.length==1) {
                        Diagram.centerOnNode(added[0],true);
                    }
                }
            });