Quando um elemento é selecionado, seu modelo visual é substituído
pelo
selectedStyle
designado a ele. Para
designar um selectedStyle
, você deve incluir esta
propriedade em cada parte do modelo que precisa ser alterada:[{ 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}}' } } }]
A propriedade
selectedStyle
também
pode ser configurada programaticamente:shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
Os elementos selecionados estão armazenados em um objeto
Selection
,
que pode ser acessado a partir do diagrama por meio do método getSelection
.
Os elementos selecionados podem ser incluídos ou removidos do objeto Selection
usando os métodos add
, remove
e clear
. Estes métodos aceitam o objeto GFX
ou DataItems
. O objeto Selection
também pode ser configurado para ativar e desativar multisseleções:Diagram.getSelection().setMultiSelectionEnabled(false);
O modo de seleção é determinado no tempo de criação,
com base na existência de
dataStore
. If you use
a diagram and a dataStore
is present at
creation time, the dataStore
strategy is
selected when data items are used as the main component of the selection.
Quando os itens GFX forem usados como o componente principal da seleção,
a estratégia GFX será então usada. Esta estratégia pode ser configurada manualmente
no tempo de criação por meio da marcação de Diagrama selectionMode
.<div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
Para configurar o modo de seleção, é possível usar as seguintes constantes
definidas em 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;
Sempre que a seleção for alterada, o método
onSelectionChanged([added],[removed])
será chamado. Por esse método, é possível chamar qualquer função customizada.
No
exemplo a seguir, o Diagrama é centralizado no elemento selecionado:dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){ if(centerOnNode) { if(added.length==1) { Diagram.centerOnNode(added[0],true); } } });