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.

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.

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:

Providing Direct Editing Functionality

Creating a Direct Editing Feature

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