How to use arrow keys for panning in a Graph2DView

Tips & Tricks

Summary

This article explains how to bind panning functionality to arrow keys via SWING's ActionMap and InputMap.
For a better user experience, please go to the integrated documentation viewer to read this article.

Description

Using SWING's default mechanism of ActionMap and InputMap it is fairly easy to associate key-action bindings to a JComponent.
With yFiles, bindings for typically useful actions regarding Graph2DViews can be conveniently created using class Graph2DViewActions. Therefore the bindings created by that class are a good starting point for customizing Graph2DView user interactions.

The first step with this approach is creating a suitable panning action.

class PanAction extends AbstractAction {
    private static final byte DOWN = 1;
    private static final byte LEFT = 2;
    private static final byte RIGHT = 3;
    private static final byte UP = 4;

    private final Graph2DView view;
    private final byte direction;

    private PanAction( final Graph2DView view, final byte direction ) {
      this.view = view;
      this.direction = direction;
    }

    public void actionPerformed( final ActionEvent e ) {
      final Point2D center = view.getCenter();
      final double delta = 10.0 / Math.max(view.getZoom(), 1e-6);

      switch (direction) {
        case DOWN:
          view.setCenter(center.getX(), center.getY() + delta);
          break;
        case LEFT:
          view.setCenter(center.getX() - delta, center.getY());
          break;
        case RIGHT:
          view.setCenter(center.getX() + delta, center.getY());
          break;
        case UP:
          view.setCenter(center.getX(), center.getY() - delta);
          break;
      }
      view.updateView();
    }

    public static PanAction newPanDown( final Graph2DView view ) {
      return new PanAction(view, DOWN);
    }

    public static PanAction newPanLeft( final Graph2DView view ) {
      return new PanAction(view, LEFT);
    }

    public static PanAction newPanRight( final Graph2DView view ) {
      return new PanAction(view, RIGHT);
    }

    public static PanAction newPanUp( final Graph2DView view ) {
      return new PanAction(view, UP);
    }
  }

The second step is customizing the ActionMap and InputMap accordingly.

final Graph2DViewActions actions = new Graph2DViewActions(view);


final ActionMap amap = actions.createActionMap();

// remove the default arrow actions
amap.remove(Graph2DViewActions.FOCUS_RIGHT_NODE);
amap.remove(Graph2DViewActions.FOCUS_LEFT_NODE);
amap.remove(Graph2DViewActions.FOCUS_TOP_NODE);
amap.remove(Graph2DViewActions.FOCUS_BOTTOM_NODE);

// register panning actions with a suitable ID
amap.put("PAN_DOWN", PanAction.newPanDown(view));
amap.put("PAN_LEFT", PanAction.newPanLeft(view));
amap.put("PAN_RIGHT", PanAction.newPanRight(view));
amap.put("PAN_UP", PanAction.newPanUp(view));


final InputMap imap = actions.createDefaultInputMap(amap);

// associate panning actions to arrow keys via their IDs
imap.put(KeyStroke.getKeyStroke("DOWN"), "PAN_DOWN");
imap.put(KeyStroke.getKeyStroke("LEFT"), "PAN_LEFT");
imap.put(KeyStroke.getKeyStroke("RIGHT"), "PAN_RIGHT");
imap.put(KeyStroke.getKeyStroke("UP"), "PAN_UP");


// register the view actions
view.getCanvasComponent().setActionMap(amap);
view.getCanvasComponent().setInputMap(JComponent.WHEN_FOCUSED, imap);

Categories this article belongs to:
yFiles for Java > yFiles Viewer > Displaying and Editing Graphs > User Interaction
Applies to:
yFiles for Java 2: 2.5, 2.6, 2.7, 2.8, 2.9, 2.10, 2.11, 2.12, 2.13, 2.14, 2.15, 2.16, 2.17, 2.18
Keywords:
Graph2DView - Graph2DViewActions - pan - panning - arrow key - arrow keys - keyboard