Keyboard accessible overview

Now down to the last part, needing to add keyboard navigation to the overview. I noticed that there doesn’t seem to be a specific property to specify the panning tool in diagram.

I added the following and I can see that the tool is correct, but I never receive any keyDown.

var tool = overview.toolManager.panningTool;
tool.doKeyDown = function() {
  console.log("pan tool key down:" + this.diagram.lastInput.key);;


Yes, the Overview just uses a regular PanningTool.

I don’t understand when you want to handle keyboard events. Only while the user is panning?

User first tab into the overview area which gets the focus. Then I want the user to be able to use the arrow keys to replace the mouse. I would then translate this into Diagram.position call, similar to how DrawCommandHandler allows you to move a node, with Ctrl key being a finer displacement.

OK, so you don’t want to use the PanningTool at all. You just want to handle the arrow keys in the Overview.

Just as with a regular Diagram, override its doKeyDown method. An example is shown in GoJS Commands -- Northwoods Software. For each call with a particular key, such as e.key === "Up", call the Diagram.scroll method on the Overview.observed Diagram.

Fantastic, I had already started on a CommandHandler instead but didn’t realized to scroll on observed. Works like a charm.