Cuando se selecciona un elemento, su plantilla visual se
sustituye por el
selectedStyle
que tiene asignado. Para asignar un
selectedStyle
, debe añadir
esta propiedad a cada parte de la plantilla que debe cambiarse: [{ 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 propiedad
selectedStyle
también se puede
establecer mediante programación: shape.selectedStyle = dojo.fromJson("{stroke:{ width: 2, color: '#FF0000'}}")
Los elementos seleccionados se almacenan en un objeto
Selection
, al que se puede
acceder desde el diagrama mediante el método
getSelection
. Los elementos
seleccionados se pueden agregar o quitar desde el objeto
Selection
utilizando los
métodos add
,
remove
y
clear
. Estos métodos aceptan
un objeto GFX o DataItems
. El
objeto Selection
también se
puede configurar para habilitar e inhabilitar la selección múltiple: Diagram.getSelection().setMultiSelectionEnabled(false);
La modalidad de selección se determina durante la
creación, en función de la existencia de
dataStore
. Si utiliza un
diagrama y durante la creación existe un
dataStore
, se selecciona la
estrategia dataStore
cuando
los elementos de datos se utilizan como los componentes principales
de la selección. En cambio, cuando como componente principal de la
selección se utilizan elementos GFX, se utiliza la estrategia GFX.
Esta estrategia puede establecerse manualmente durante la creación
mediante el código
selectionMode
de Diagram. <div selectionMode="ibm_ilog.diagram.Selection.dataStore_single" dojoType='ibm_ilog.diagram.widget.Diagram' nodesStore="process" ... />
Para establecer la modalidad de selección puede utilizar
las siguientes constantes definidas en
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;
Cada vez que cambia la selección, se llama al método
onSelectionChanged([added],[removed])
.
Mediante este método, puede llamar a cualquier función personalizada.
En el ejemplo siguiente, el diagrama se centra en el elemento
seleccionado: dojo.connect(Diagram.getSelection(),"onSelectionChanged",this,function(added,removed){ if(centerOnNode) { if(added.length==1) { Diagram.centerOnNode(added[0],true); } } });