Le widget DiagramEditor peut éditer des zones de texte dans les entités d'un graphe. Pour ce faire, les modèles doivent identifier
attachPoints
avec l'attribut editable
. Si un point de connexion attachPoint
est marqué comme étant modifiable, une ligne en pointillé délimite le composant modifiable et vous pouvez cliquer deux fois sur celui-ci pour l'éditer. Lorsque vous cliquez deux fois sur sur la zone comprenant le composant modifiable, un éditeur s'ouvre et vous permet de modifier la valeur associée. Acceptez la nouvelle valeur en appuyant sur la touche Entrée, ou annulez l'opération en quittant l'éditeur.Il est possible d'enregistrer d'autres éditeurs pour les zones autres que les zones de texte dans le widget
DiagramEditor
. L'éditeur disponible utilise une zone de texte dojoTextBox
et est enregistré sous l'ID textbox.
L'attribut modifiable indique l'éditeur associé à chaque zone.L'attribut modifiable est un attribut composite qui stocke les informations utilisées pour démarrer l'éditeur en ligne :
set/get
: noms de la méthode d'accès set et de la méthode d'accès get à utiliser pour accéder à la valeur de l'entité. Il doit s'agir d'une méthode du noeud, du sous-graphe ou du lien.id
: autre valeur pour set/get qui fournit le nom en minuscules de la propriété associée (les attributs set:/get: sont automatiquement définis sur ce nom).editor
: ID de l'éditeur à utiliser dans cette zone.options
: attribut composite utilisé pour transmettre des paramètres spécifiques à l'éditeur enregistré.baseRegion
: cadre de délimitation facultatif de la zone modifiable si la zone modifiable devient trop petite pour que l'on clique dessus.regionStyle
: style facultatif à appliquer au contour délimitant la zone modifiable (remplace le contour en pointillé par défaut).border
: entier représentant la largeur de la marge permettant d'étendre la zone modifiable au-delà du cadre de délimitation en cours de la zone.
L'exemple suivant est issu du modèle de noeud par défaut :
... editable: { id:'label', editor:'textbox', border:2, regionStyle:{selectedStyle:{stroke:{color:'white',style:'ShortDot'}}}, baseRegion:{x:20,width:40,y:11,height:15} } ...