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); } } });