The SimpleGraphViewer4 application from the previous lesson already provides support for zooming in the view via actions. We will now add further mouse-based support to our application that will enable convenient zooming and panning in the view.

The result, the SimpleGraphViewer5 application, will be a simple, but functional viewer type diagramming application that finishes this trail.

First, we add support for panning, i.e., moving the viewport, to our application. Panning is realized via a mouse-drag gesture which is handled by yFiles class NavigationMode. NavigationMode is a so-called view mode and hence we use the addViewMode method to add it to the set of view modes for our view. This is shown in Example 1.13, “Adding support for mouse-drag panning”.

// Add a view mode for convenient mouse navigation.
view.addViewMode(new NavigationMode());

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. Using NavigationMode specifically, provides panning support via mouse-drag gestures involving the left mouse button as well as the right mouse button.

Although mouse-based interaction, too, mouse-wheel support is not realized by means of a view mode. Instead, it is handled directly via an implementation of a standard Java mouse-wheel listener. We add the Graph2DViewMouseWheelZoomListener to the view's actual canvas component as presented in Example 1.14, “Adding support for mouse-wheel zooming”.

// Add a mouse-wheel listener to zoom in and out of the view.
view.getCanvasComponent().addMouseWheelListener(
  new Graph2DViewMouseWheelZoomListener());

Example 1.15, “createGraph2DView method of SimpleGraphViewer5” shows the createGraph2DView method where we integrate both new features.

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 a view mode for convenient mouse navigation.
  view.addViewMode(new NavigationMode());
  
  return view;
}

Congratulations! You have finished this trail and have created a simple, but functional viewer type diagramming application using the yFiles for Java diagramming class library.