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
100dvhso 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 asaria-valuenowand 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.