Get closest node in diagram


I’d like to be able to traverse my graph by using my keyboard arrow keys.

Lets say my graph looks like so:

| 1 2 3
| 4 5 6

My goal is navigate 1-> 6 if I was using the right arrow key, or 1,4,2,5,3,6 is using the down arrow key.

I have written out my algorithm like so:

Group nodes into rows/columns
On down/up: get next/prev node in column, if none exists, move to next/prev column
On right/left: get next/prev node in row, if none exists, move to next/prev row

Where im stuck is really how to best do this in goJS. I can manually assign the row/columns, and recalculate everytime the graph changes, but i was hoping the layout would already be doing some of this work. In this case we are using a LayeredDigraph layout with direction 0, so i don’t think the benefits of a grid layout are being provided here. Im wondering if there are any tips a goJS expert might offer to help make this easier/efficient?

My plan was to calculate the horizontal/vertical order once and then just navigate that either the horizontal or vertical order forward and back based on which node you are on and which arrow key is pressed.

You may be interested in the Drawing Commands sample. It uses the DrawCommandHandler extension, which has some functionality to navigate parts via the arrow keys. You’ll want to take a look at the _arrowKeySelect and _arrowKeyTree methods in particular.

If you need further guidance, let us know.