# Providing Direct Editing Functionality

Direct editing means the possibility to change values directly in the diagram. Technically the user clicks on a pictogram-element and an in-place edit field is shown, where the user can change the values of this pictogram element.

A typical use case is, that the user clicks on a text (either in a shape or a connection decorator) and then the text is overlaid with a text-edit-field, where the user can change the text value. To the user this actually looks as if the text is replaced with the text-edit-field.

Figure: Direct editing of a text

## Creating a Direct Editing Feature

In this example we want to enable the users to edit the name of a EClass directly in the diagram. Therefore we have to create a direct editing feature and make it available in the feature provider. A direct editing feature has to implement the interface IDirectEditingFeature. Instead of implementing it directly it should extend one of the available base classes. In this example we extend the base class AbstractDirectEditingFeature.

In this case we have to implement/overwrite several methods:

- The method getEditingType has to return the editor type which shall be used to edit the value, in this example a text editor.
- The method canDirectEdit has to check the given context and therefore it decides if direct editing is supported.
- The method getInitialValue has to return the initial value with which the editor is initialized, which is usually the currently displayed value.
- The method checkValueValid performs a check of the current editor value on each value change.
- The method setValue has to set the edited value to the model at the end of the editing process.

You can see the complete implementation of the direct editing feature here:

package org.eclipse.graphiti.examples.tutorial.features;
public class TutorialDirectEditEClassFeature extends
AbstractDirectEditingFeature {
public TutorialDirectEditEClassFeature(IFeatureProvider fp) {
super(fp);
}
public int getEditingType() {
// there are several possible editor-types supported:
// text-field, checkbox, color-chooser, combobox, ...
return TYPE_TEXT;
}
@Override
public boolean canDirectEdit(IDirectEditingContext context) {
PictogramElement pe = context.getPictogramElement();
Object bo = getBusinessObjectForPictogramElement(pe);
GraphicsAlgorithm ga = context.getGraphicsAlgorithm();
// support direct editing, if it is a EClass, and the user clicked
// directly on the text and not somewhere else in the rectangle
if (bo instanceof EClass && ga instanceof Text) {
return true;
}
// direct editing not supported in all other cases
return false;
}
public String getInitialValue(IDirectEditingContext context) {
// return the current name of the EClass
PictogramElement pe = context.getPictogramElement();
EClass eClass = (EClass) getBusinessObjectForPictogramElement(pe);
return eClass.getName();
}
@Override
public String checkValueValid(String value, IDirectEditingContext context) {
if (value.length() < 1)
return "Please enter any text as class name.";
if (value.contains(" "))
return "Spaces are not allowed in class names.";
if (value.contains("\n"))
return "Line breakes are not allowed in class names.";
// null means, that the value is valid
return null;
}
public void setValue(String value, IDirectEditingContext context) {
// set the new name for the EClass
PictogramElement pe = context.getPictogramElement();
EClass eClass = (EClass) getBusinessObjectForPictogramElement(pe);
eClass.setName(value);
// Explicitly update the shape to display the new value in the diagram
// Note, that this might not be necessary in future versions of Graphiti
// (currently in discussion)
// we know, that pe is the Shape of the Text, so its container is the
// main shape of the EClass
updatePictogramElement(((Shape) pe).getContainer());
}
}

Additionally the feature provider has to deliver our newly created feature (overwrite the method getDirectEditingFeature). This implementation can be seen here:

@Override
public IDirectEditingFeature getDirectEditingFeature(
IDirectEditingContext context) {
PictogramElement pe = context.getPictogramElement();
Object bo = getBusinessObjectForPictogramElement(pe);
if (bo instanceof EClass) {
return new TutorialDirectEditEClassFeature(this);
}
return super.getDirectEditingFeature(context);
}

## Test: Edit the Name of a Class Directly In the Diagram

Now start the editor and test this new direct editing feature:

1. Create or open a diagram and create an EClass "Address"
2. Click on the class name and the value "Address" should become editable in the text-editor
3. Change the value to "Customer Address". Now the editor should be highlighted and an error-message ("no space allowed") should be displayed in the status-bar.
4. Change the value to "CustomerAddress". The highlight and error-message should disappear.
5. Press return or make the editor loose focus otherwise to overtake the edited value, or press ESC to cancel the editing.