2. Feature Overview

An overview of some of the basic features of the graph editor.

2.1. The graph model

The graph state is stored in an EMF model. A model class exists for each visual element.

Graph model elements can be created as follows:

GModel model = GraphFactory.eINSTANCE.createGModel();
GNode node = GraphFactory.eINSTANCE.createGNode();

2.1.1. Adding elements to the model

EMF commands should generally be used to update the model. For example:

Commands.addNode(model, node);

Adding a node via EMF commands guarantees two things:

1. The 'add node' step will be undoable.
2. The new node will automatically be displayed in the graph editor.

Whenever the graph editor updates the model state (e.g. because a user dragged a node from one point to another), it will use an EMF command. All user actions should therefore be undoable.

Commands.undo(model);
Commands.redo(model);

If you are working with the graph editor it's worthwhile reading about EMF and EMF commands in some more detail. See for example this tutorial.

2.1.2. Editing domains

The utility methods in 'Commands' require that the given model already has an EMF EditingDomain attached to it, i.e.

AdapterFactoryEditingDomain.getEditingDomainFor(model) != null

This will be the case if

graphEditor.setModel(model)

has already been called. When a model is set the graph editor checks to see if an editing domain is attached to it, and creates one if necessary.

2.1.3. Code Example

Here's a simple application where you can add a node, and undo or redo any action:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.stage.Stage;
import de.tesis.dynaware.grapheditor.Commands;
import de.tesis.dynaware.grapheditor.GraphEditor;
import de.tesis.dynaware.grapheditor.core.DefaultGraphEditor;
import de.tesis.dynaware.grapheditor.model.GConnector;
import de.tesis.dynaware.grapheditor.model.GModel;
import de.tesis.dynaware.grapheditor.model.GNode;
import de.tesis.dynaware.grapheditor.model.GraphFactory;

public class GraphEditorTutorial extends Application {

    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(final Stage primaryStage) throws Exception {

        GraphEditor graphEditor = new DefaultGraphEditor();
        GModel model = GraphFactory.eINSTANCE.createGModel();

        graphEditor.setModel(model);

        Scene scene = new Scene(graphEditor.getView(), 800, 600);

        primaryStage.setScene(scene);
        primaryStage.show();

        scene.setOnKeyPressed(event -> {
            if (event.isShortcutDown()) {
                if (event.getCode().equals(KeyCode.N)) {
                    Commands.addNode(model, createNode());
                } else if (event.getCode().equals(KeyCode.Z)) {
                    Commands.undo(model);
                } else if (event.getCode().equals(KeyCode.Y)) {
                    Commands.redo(model);
                }
            }
        });
    }

    private GNode createNode() {

        GNode node = GraphFactory.eINSTANCE.createGNode();

        GConnector input = GraphFactory.eINSTANCE.createGConnector();
        GConnector output = GraphFactory.eINSTANCE.createGConnector();

        input.setType("left-input");
        output.setType("right-output");

        node.getConnectors().add(input);
        node.getConnectors().add(output);

        node.setX(50);
        node.setY(50);

        return node;
    }
}

Nodes are added with Ctrl-N, and undo & redo are performed with Ctrl-Z / Ctrl-Y.

2.2. Alignment and snap-to-grid

Alignment properties can be set as follows:

graphEditor.getProperties().setGridVisible(true);
graphEditor.getProperties().setSnapToGrid(true);
graphEditor.getProperties().setGridSpacing(15);

If snap-to-grid is on, nodes and joints will snap to the nearest grid-line when dragged or resized.

2.3. Navigating around in large graphs

For large graphs, the graph editor can be set inside a container.

GraphEditor graphEditor = new DefaultGraphEditor();
GraphEditorContainer graphEditorContainer = new GraphEditorContainer();

GModel model = GraphFactory.eINSTANCE.createGModel();
model.setContentWidth(1600);
model.setContentHeight(1200);

graphEditor.setModel(model);
graphEditorContainer.setGraphEditor(graphEditor);
graphEditorContainer.getMinimap().setVisible(true);

The container should then be added to the scene graph. The view will be resized to the model's values (i.e. 1600x1200 in this case), and can be panned around by right-clicking and dragging.

The minimap displays a mini-representation of the graph and can also be used to navigate around.

2.4. Selections and copy / paste

Nodes and joints can be selected by clicking on them. Multiple elements can be selected in the usual fashion by left-clicking and dragging a selection box.

The currently-selected nodes can be cut, copied, and pasted as follows:

graphEditor.getSelectionManager().cut();
graphEditor.getSelectionManager().copy();
graphEditor.getSelectionManager().paste();

Connections between nodes that are both copied will also be copied.

For more information about available features see the demo and its source code.