When an element is selected, its visual template is replaced
by the
selectedStyle
assigned to it. To
assign a selectedStyle
, you must add this
property to each part of the template that needs to be changed:[{ 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}}' } } }]
The
selectedStyle
property
can be also set programmatically:shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
The selected elements are stored in a
Selection
object,
that can be accessed from the diagram through the getSelection
method.
The selected elements can be added or removed from the Selection
object
by using the methods add
, remove
,
and clear
. These methods accept GFX object
or DataItems
. The Selection
object
can also be configured to enable and disable multiselection:Diagram.getSelection().setMultiSelectionEnabled(false);
The selection mode is determined at creation time, based
on the existence of
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.
When GFX items are used as the main component of the selection, the
GFX strategy is used instead. This strategy can be set manually at
creation time through the Diagram markup selectionMode
.<div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
To set the selection mode you can use the following constants
defined in 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;
Every time the selection changes, the
onSelectionChanged([added],[removed])
method
is called. Through this method, you can call any custom function.
In the following example, the Diagram is centered on the selected
element:dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){ if(centerOnNode) { if(added.length==1) { Diagram.centerOnNode(added[0],true); } } });