Keyboard and Touch - msupino/NavigationApp GitHub Wiki

🇮🇱 עברית

Keyboard and Touch

NavAid is primarily a map app — most interaction is mouse / touch on the canvas. The keyboard shortcuts that exist are noted here.

Mouse

Action Result
Click waypoint / note / kite / leg line Selects on the press; the inspector opens on the release, and only if the pointer never moved. See Inspector.
Double-click route leg Split the leg at the clicked map coordinate and select the inserted WP # waypoint.
Drag waypoint / note Move it. Drag a waypoint near a published navigation waypoint or airfield to snap it.
Drag map (no element under cursor) Pan.
Wheel Zoom.
Right-click Quick actions for whatever is under the pointer — see Right-click menu. Shift + right-click opens the browser's own menu.
Click in Add Waypoint mode Drop a new waypoint.
Click in Add Note mode Drop a new note.
Drag the toolbar handle (⋯) Move the toolbar.
Click the hamburger (☰) Collapse / expand the toolbar.
Drag the rotate dial Rotate the map.
Tap the rotate dial Cycle bearing 0° / 90° / 180° / 270°.

Right-click menu

On a computer with a mouse, a right-click on the map opens a small menu at the pointer for what is under it:

Under the pointer Menu
Open map Add to route (Start route here on an empty route) · Direct to · Add note here · Point details · Distance from the aircraft
Route waypoint Insert waypoint after · Rename · then the waypoint panel's own buttons: reset name, add / delete frequency change, hotspot, turning point, Direct to, start the clock, Delete
Leg Insert waypoint here (where you clicked) · then the leg's own buttons
Chart point, airfield, VOR Its panel's buttons: Direct to, Add to route, …
Note Edit text · Delete note
  • Right-clicking an item selects it, as a click does, so its inspector opens beside the menu. The menu carries that panel's own buttons with the same icons, the same pressed look (red with a white ring) and the same dimming, so the two always agree.
  • Dimmed, never hidden: a dimmed item says why when pressed — the route is locked, the last point has no leg after it, no position for Direct to or the distance.
  • Keyboard: ↑ / ↓, Home / End, Enter. Esc, a click elsewhere, a pan or a zoom closes it.
  • Mouse only. On a touch screen a long press opens Point details (Phone Layout).

Touch

Touch parity matches mouse for selection, dragging, pan, zoom, and toolbar controls. Leg splitting is currently a mouse double-click gesture only. Specifics:

  • A press only becomes a drag past a few pixels of travel (touchDragPx), so a fingertip that never lands quite still still reads as a tap and leaves the waypoint where it is. The rotate dial has its own 8 px threshold (rotDragPx) so a sloppy tap still cycles.
  • A drag never opens the inspector, and a panel open when the drag starts is hidden for the duration and comes back on release — on a phone it covers the half of the map the point is being dragged towards.
  • While a fix is driving the map (recording, Location, or a connected simulator) the route layout is locked: waypoints, kites, notes and comm callouts do not move.
  • The toolbar scrolls smoothly on iOS (-webkit-overflow-scrolling: touch) and stops at its edges (overscroll-behavior: contain) so you don't accidentally scroll the page underneath.
  • The toolbar uses 100dvh so iOS Safari's collapsing address-bar doesn't eat the bottom of the menu.

Keyboard

Key Action
Ctrl-F / Cmd-F Reveal the nav-WP search and put the caret in it. Hijacks the browser's native find-in-page — the map has no text to find anyway. On a desktop the search is a permanent panel under the menu bar (left in English, right in Hebrew) that you can drag anywhere; Ctrl-F never dismisses it, since pressing it while already in the box means "search". Dismiss with the ✕, or Escape twice — the first Escape clears the query, and only a press with nothing left to clear puts the panel away. The choice is remembered (navaid.searchShown). On a phone there is no room for a standing panel, so it stays the centred overlay Ctrl-F / the 🔍 button summons.
? Open the in-app keyboard-shortcuts cheat-sheet (also reachable via the Shortcuts button in the toolbar footer).
Ctrl-Z / Cmd-Z Undo the last edit, move, or delete.
M Toggle the magnifying-glass loupe (zoomed view at the cursor).
+ / − / = Zoom the map in / out (numpad ± too). While the magnifier is on, adjusts the loupe zoom instead.
F Fit route to view.
A Toggle add-waypoint mode.
N Toggle add-note mode.
C Clear the map (all waypoints and notes).
R Reverse route direction.
B Toggle show return path (both directions). Off by default — the feature ships disabled, so this key does nothing and is not listed in the in-app cheat-sheet until featureShowReturn is turned on.
Esc Close the search overlay / modal; clear current selection / inspector; leave Add modes.
D Delete the selected waypoint or note (never deletes a frequency-change callout alone).
X Delete the frequency-change callout on the selected waypoint.
Z Add a frequency-change callout to the selected comm-change waypoint.
Delete / Backspace Delete the selected item — frequency callout, waypoint, or note.
Tab Move focus across editable inputs in the inspector and flight plan.
Enter Commit an inspector / plan field; jump to the first search result.
Arrow keys Move focus inside the toolbar where it's a role=button. With the rotate dial focused they turn the map instead — see below.

The rotate dial

Tab to the dial and it answers the keys a slider answers: ↑ / → and ↓ / ← turn 1°, Page Up / Page Down turn 10°, Home puts north up, and Space / Enter steps 90° the way a tap does. See Bearing dial.

Modals (Flight Plan, charts viewer, plate viewer) close on Esc or via the corner ✕ button. The flight-plan modal is also draggable by its title bar.

Accessibility notes

  • The inspector input boxes and toolbar role="button" elements have keyboard focus and titles.
  • The rotate dial is a real role="slider": it reports its heading as aria-valuenow and is operable from the keyboard, and it announces separately from the heading field beside it.
  • Screen-reader support is partial: the canvas overlay is graphical; the toolbar and inspector are HTML and announce normally.
  • Colour palette is high-contrast dark UI; map content contrast depends on the chosen base layer.

Performance tips

  • For very long routes (50+ waypoints) on a low-end device, turn Highlight diff off — the halo render is the most expensive draw call.
  • The export PNG render is the heaviest operation. NavAid locks map interaction while it is running so the tile grid and overlay stay aligned.