Add vertex keyboard navigation

[bhousel]

Today I played around with keyboard navigation for vertexes.

This closes #1917 and adds some useful keyboard shortcuts:

[ - jump to previous vertex
] - jump to next vertex
⌘[ - jump to first vertex
⌘] - jump to last vertex

Also it:

• handles circular ways (can jump next/previous across the connecting node)
• adds interpolated viewport following (see "Viewport Following" feature in iD #3250 - which is this but in the draw modes)
• when navigating across a vertex with multiple parents, remembers which line to stay on

There are still a few weird things to clean up - e.g. it's possible for the vertex to go unselected when jumping to one that's offscreen.

Also I'd like to try to support a shift modifier, which woud let you add or remove nodes from the selection.

[bhousel]

Just hammering down on the ] key...

[tyrasd]

Does it work on non-English keyboard layouts, too (see #2812)? Also, on a German keyboard ⌘[ is quite awkward to hit 😒

[bhousel]

Does it work on non-English keyboard layouts, too (see #2812)? Also, on a German keyboard ⌘[ is quite awkward to hit 😒

Hmm, yeah I do want to pick something easy to hit on QWERTZ. Maybe we can use Ö and Ä?
What key shortcuts are used to indent / unindent code blocks in editors like sublime or xcode?

[tyrasd]

What key shortcuts are used to indent / unindent code blocks in editors like sublime or xcode?

I'm used to press Tab / Shift-Tab for that (or > / < in vi).

vi (and other unix cli tool) use j and k to navigate up/down in lists or lines of text. Another idea might to use the ubiquitous wasd navigation as an inspiration…

[slhh]

The following keys might be used instead:
Page Up - jump to previous vertex
Page Down - jump to next vertex
Home - jump to first vertex
End - jump to last vertex

The vertex navigation is nice, but the usecases seem to be very limited without some more new shortcuts:

• toggle selection between the vertex and the line to stay on.
• open the radial menu of the selected vertex or line.
• at a connecting vertex: cycle connected lines as the line to stay on.

This would also be a (partial) solution for #1239 .

The line to stay on should be made visible during vertex navigation. This can be done by temporarily flashing a halo around it when any vertex navigation shortcut is used.

[bhousel]

Page Up - jump to previous vertex
Page Down - jump to next vertex
Home - jump to first vertex
End - jump to last vertex

Sounds good to me.. I was kind of hoping to provide keys that exist on a laptop keyboard, but at least offering these as alternatives helps for the keyboard layouts that don't have handy [ and ].

The vertex navigation is nice, but the usecases seem to be very limited without some more new shortcuts:
toggle selection between the vertex and the line to stay on.

Maybe.. I will think about it and try a few ideas.

open the radial menu of the selected vertex or line.

spacebar does this (although everything on the radial menu already has a keyboard shortcut). I did try it and amusingly the radial menu is in the wrong place (because of the follow behavior moving the view) - so that's something else to fix..

at a connecting vertex: cycle connected lines as the line to stay on.

This cycling through parent ways (and the halo flash idea needed to make it visible) would add a bit more complexity than I'm comfortable with.

This would also be a (partial) solution for #1293,

Did you mean to link a different issue here? not sure how that one is related..

[slhh]

does this (although everything on the radial menu already has a keyboard shortcut).

That's good. Unfortunately, it was a secret shortcut. It was not mentioned in https://wiki.openstreetmap.org/wiki/ID/Shortcuts, which is linked in iD's help function. I have added the Spacebar and also the eight vertex navigation shortcuts.

Did you mean to link a different issue here? not sure how that one is related.

Sorry, I have meant the issue to handle coincident ways #1239 .
Of course this needs cycling through parent ways, but doesn't need the halo flash idea.
We just need to do the cycling a bit differently. The cycling shortcut needs to select the next way, which is connected to the currently selected vertex or the previously selected vertex (in case a way is currently selected). This does not only show the geometry, but also the properties in the inspector. This helps identifying the correct way. In many cases selecting the connected way is the desired result. In the context of a way being selected due to this cycling function, the vertex navigation shortcuts should automatically switch back to the recently selected vertex, before performing their normal operation.

[bhousel]

at a connecting vertex: cycle connected lines as the line to stay on.

This cycling through parent ways (and the halo flash idea needed to make it visible) would add a bit more complexity than I'm comfortable with.

👆 ok I lied.. I added slight hover styling for the related parent way, and added the key \ to toggle which parent is active, and it's awesome.

whee

[bhousel]

Also for anyone wondering why this is useful..

1. jumping to first/last node of a way is helpful to see where it goes.
2. when you delete a node in iD, sometimes the next node that is selects is not the one that you want.
3. cleaning up overnoded ways is great

[slhh]

I have tested in master deployment:

1. Styling looks good.
2. Home/End/PgUp/PgDown mainly do what they should, but sometimes PgUp/PgDown left the way to stay on at the end vertex and continues with the next way.
3. Selecting a way and a connecting vertex afterwards sometimes the wrong way is selected as the way to stay on.
4. , [, ], Ctrl-[, Ctrl-] don't do anything on Firefox and Edge under Windows 10. This is likely because I have to use Alt Gr due to the German keyboard.
   Maybe ß can be defined as an alternate for \ because it is on the same key, but without requiring Alt Gr.

[tyrasd]

added the key \ to toggle which parent is active

This seems super useful, but that's also another key which is impossible to press on (at least some) non-English keyboard layouts. 😢

@slhh: Just hacking in the ß key (keycode 219), where the \ is located on German keyboards, doesn't help much, since the \ can be on yet another key on other language's keyboards (for example on a French keyboard it's AltGr+8 behind keycode 56). Another complication is that the keycode for the German ß key is 219 (on chrome at least) which is the same as the English [ key.