Skip to content

2. Feature Overview

Steffen edited this page Jun 7, 2022 · 2 revisions

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.

The visual elements of the graph

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.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.

The graph editor minimap.

2.4. Selections

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.

Selecting nodes and joints.

The current selection can be examined or modified with the io.github.eckig.grapheditor.SelectionManager.

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