Edición en línea

El widget DiagramEditor puede editar los campos de texto de las entidades de un gráfico. Para ello, las plantillas deben identificar attachPoints con el atributo editable. Si attachPoint se marca como editable, una línea punteada rodea el componente editable, que puede editarse si se efectúa una doble pulsación en él. Cuando se efectúa una doble pulsación en el área del componente editable, se abre un editor que nos permite cambiar el valor asociado. Acepte el valor nuevo pulsando la tecla Intro o cancele la operación saliendo del editor.
Es posible registrar editores alternativos en el widget DiagramEditor para los campos que no son de texto. El editor disponible utiliza dojoTextBox y está registrado con el ID textbox. El atributo editable especifica el editor asociado con cada campo.
El atributo editable es un atributo compuesto que contiene la información que se utiliza para iniciar el editor en línea, a saber:
  • set/get: los nombres de los métodos de obtención y establecimiento que se van a utilizar para acceder al valor de la entidad. Debe ser un método del nodo, subgráfico o enlace.
  • id: una alternativa para establecer/obtener y proporciona el nombre en minúsculas de la propiedad asociada (los atributos set:/get: se establecen automáticamente en este nombre).
  • editor: el ID del editor que se ha de utilizar en este campo.
  • options: un atributo compuesto que se utiliza para pasar parámetros específicos al editor registrado.
  • baseRegion: el recuadro delimitador base opcional del área editable si el área editable llegara a ser demasiado pequeña para poder pulsarse.
  • regionStyle: el estilo opcional que se aplicará a la marca que rodea el área editable (sustituye al valor predeterminado, que es una línea punteada).
  • border: un entero que representa el ancho del margen para aumentar el área editable sobre el recuadro delimitador actual del campo.
El ejemplo siguiente está extraído de la plantilla de nodos predeterminada:
...
editable: {
   id:'label',
   editor:'textbox',
   border:2,
   regionStyle:{selectedStyle:{stroke:{color:'white',style:'ShortDot'}}},
   baseRegion:{x:20,width:40,y:11,height:15}
}
...