The DiagramEditor widget can edit text fields in the entities of a
graph. To do so, templates must identify
attachPoints
with
the editable
attribute. If an attachPoint
is
marked as editable, a dotted line outlines the editable component,
and you can double-click to edit it. When you double-click the area
with the editable component, an editor opens and allows you to change
the associated value. Accept the new value by pressing the Enter key,
or cancel the operation by exiting the editor.It is possible to register alternative editors for nontext
fields in the
DiagramEditor
widget. The
available editor uses a dojoTextBox
and
is registered under the ID textbox.
The editable attribute specifies the editor associated with each field.The editable attribute is a composite attribute that
holds the information used to start the inline editor, namely:
set/get
: the names of the setter and getter to be used for accessing the value on the entity. It must be a method of the node, subgraph, or link.id
: an alternative to set/get and it provides the lowercase name of the associated property (the set:/get: attributes are automatically set on this name).editor
: the ID of the editor to use in this field.options
: a composite attribute used to pass parameters specific to the registered editor.baseRegion
: the optional base bounding box of the editable area if the editable area becomes too small to be clicked.regionStyle
: the optional style to be applied to the outline marking the editable area (overrides the default dotted outline).border
: an integer representing the width of the margin to grow the editable area over the current bounding box of the field.
The following example is from the default Node template:
... editable: { id:'label', editor:'textbox', border:2, regionStyle:{selectedStyle:{stroke:{color:'white',style:'ShortDot'}}}, baseRegion:{x:20,width:40,y:11,height:15} } ...