Keyboard accessible overview

GoJS
1

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);
  go.PanningTool.prototype.doKeyDown.call(this);
}

Thanks

2

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?

3

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.

4

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.

5

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

Alain