Lorsqu'un élément est sélectionné, son modèle visuel est remplacé par le style
selectedStyle
qui lui est affecté. Pour affecter un style
selectedStyle
, vous devez ajouter cette propriété pour chaque composant du modèle qui doit être modifié.[{ 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}}' } } }]
La propriété
selectedStyle
peut également être définie à l'aide d'un programme :shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
Les éléments sélectionnés sont stockés dans un objet
Selection
auquel on peut accéder par le biais de la méthode getSelection
depuis le diagramme.
Les éléments sélectionnés peuvent être ajoutés ou supprimés de l'objet Selection
à l'aide des méthodes add
, remove
et clear
. Ces méthodes acceptent un objet GFX ou DataItems
. L'objet Selection
peut également être configuré pour activer ou désactiver la multisélection :Diagram.getSelection().setMultiSelectionEnabled(false);
Le mode de sélection est déterminé lors de la création en fonction de la présence de
dataStore
. Si vous utilisez un diagramme et qu'un dataStore
est présent lors de la création, la stratégie dataStore
est sélectionnée lorsque des éléments de données sont utilisés comme composant principal de la sélection.
Lorsque des éléments GFX sont utilisés comme composant principal de la sélection, c'est la stratégie GFX qui est utilisée. Cette stratégie peut être définie manuellement lors de la création par le biais du balisage de diagramme selectionMode
.<div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
Pour définir le mode de sélection, vous pouvez utiliser les constantes suivantes définies dans 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;
Chaque fois que la sélection est modifiée, la méthode
onSelectionChanged([added],[removed])
est appelée. Par le biais de cette méthode, vous pouvez appeler une fonction personnalisée.
Dans l'exemple suivant, le diagramme est centré sur les éléments sélectionnés :dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){ if(centerOnNode) { if(added.length==1) { Diagram.centerOnNode(added[0],true); } } });