How to use arrow keys for panning in a Graph2DView
Tips & TricksSummary
This article explains how to bind panning functionality to arrow keys via SWING's ActionMap and InputMap.
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