The simple graph viewer that is the result of the Creating a Simple Graph Viewer trail is also a perfect starting point for a simple graph editor application.
Of course, the populateGraph method that is part of SimpleGraphViewer5
is not necessarily needed in an editor type application, so we can safely remove
it.
In contrast, we definitely need to remove the NavigationMode which enables panning
support in the viewer type application.
Instead of it, we will add an EditMode
.
Example 1.1. Creating and adding an EditMode to the view
// Creating and adding an EditMode to the view. editMode = new EditMode(); view.addViewMode(editMode);
EditMode also enables panning support (via mouse-drag involving the right mouse button), but additionally also enables a wide variety of further mouse gestures:
You can create graph elements:
- create nodes with a single mouse left click at an unoccupied place in the view
- create straight-line edges: mouse left drag starting on an unselected node, ending on either selected or unselected node
- create polyline edges: similar overall gesture as with straight-line edges; intermediate mouse release (first time only), respectively mouse clicks at unoccupied places in the view yield the segments of the edge
- abort edge creation at any time during edge creation: mouse right click revokes last edge segment, ESC aborts entirely
Select graph elements:
- select nodes with a single mouse left click on an unselected node
- select edges with a single mouse left click on an unselected edge
- select multiple nodes using a marquee selection rectangle (mouse left drag starting at an unoccupied place in the view)
- select multiple edges using a marquee selection rectangle (mouse left drag starting at an unoccupied place in the view when at least one edge is already selected)
- enhance an existing selection by SHIFT-mouse left clicking further graph elements of the same kind
Change the geometry (size, location) of graph elements:
- resize nodes using the resize knobs (handles) that are part of a node's selection indication (SHIFT key and CTRL key modify the resize behavior)
- move nodes: mouse left drag starting on a selected node
- move bends: mouse left drag starting on a selected bend
- move ports: mouse left drag an end point of a selected edge
This is what the resulting createGraph2DView of SimpleGraphEditor1 looks like after we have added the EditMode.
Example 1.2. createGraph2DView method of SimpleGraphEditor1
private Graph2DView createGraph2DView() {
Graph2DView view = new Graph2DView();
// Add a mouse wheel listener to zoom in and out of the view.
view.getCanvasComponent().addMouseWheelListener(
new Graph2DViewMouseWheelZoomListener());
// Add the central view mode for an editor type application.
editMode = new EditMode();
view.addViewMode(editMode);
return view;
}
As has been said in the Creating a Simple Graph Viewer trail, view modes play an important role in a yFiles-based diagramming application. They are responsible for handling all mouse-based user interaction in the view. EditMode specifically is the central view mode implementation for an editor type application. However, the aforementioned functionality is not exclusively provided by EditMode itself, it is provided by EditMode in conjunction with many other view modes. These work behind the scenes with EditMode delegating specific mouse gestures to them.
When you start SimpleGraphEditor1 and create some nodes and connect them with edges and test the other mouse gestures listed above, you will eventually want to delete a graph element that you have created. However, this is not possible yet, because our code only covers mouse-based interaction so far.
Read on to the next lesson and see how we can get that DELETE key on your keyboard to work...