RFCP — Iteration 3.10.3: Calculator Shortcut & Ruler Limit

Two small UX changes, no backend.

1. Link Budget Calculator — Quick Access Button

Move calculator access to a visible toolbar button, not buried in Map Tools panel.

Location: Top-left corner of the map, below the zoom controls (+/- buttons). Similar to how Fit, Reset, Topo, Grid, Ruler, Elev buttons are in the top-right.

Implementation: Add a button to the left toolbar (or create a small floating button group):

// Top-left button, below zoom controls
<button
  className="map-tool-btn"
  onClick={() => setShowLinkBudget(!showLinkBudget)}
  title="Link Budget Calculator"
>
  {/* Calculator icon — use an emoji or SVG */}
  🔗 {/* or a small "LB" text label, or a calculator SVG icon */}
</button>

Styling: Same visual style as the right-side tool buttons (Fit, Reset, Topo, Grid, Ruler, Elev) — dark rounded rectangle with light text/icon.

Position options (pick one):

Option A: Add to the RIGHT toolbar stack below "Elev" button — keeps all tools together
Option B: Floating button top-left below zoom — separate but prominent
Option C: Add to the measurement overlay bar (near the ruler distance display)

Recommend Option A — add "LB" or calculator icon button to the right toolbar stack, below Elev. Consistent with existing UI pattern.

Also: Remove the "Hide Link Budget Calculator" button from Map Tools panel (or keep it as secondary toggle — but primary access should be the toolbar button).

2. Ruler — Maximum 2 Points Only

Problem: Ruler currently allows unlimited points, creating a web of measurement lines. For RF point-to-point measurement, only 2 points make sense: start and end.

Fix: Limit ruler to exactly 2 points. When both points are placed, the measurement is complete. To start a new measurement, clicking again replaces the first point and clears the old measurement.

// In the map click handler for ruler mode:
function handleRulerClick(e: L.LeafletMouseEvent) {
  const currentPoints = rulerPoints;
  
  if (currentPoints.length === 0) {
    // First point
    setRulerPoints([snappedLatLng]);
  } else if (currentPoints.length === 1) {
    // Second point — measurement complete
    setRulerPoints([currentPoints[0], snappedLatLng]);
    // Optionally: auto-deactivate ruler mode after 2nd point
    // clearTool();  // uncomment if you want one-shot behavior
  } else {
    // Already 2 points — start new measurement
    // Replace: clear old points, start fresh with new first point
    setRulerPoints([snappedLatLng]);
  }
}

Behavior:

Click 1: Place start point (show marker)
Click 2: Place end point (show marker + line + distance label + Terrain Profile button)
Click 3: Clear previous, start new measurement from this click
Right-click or Escape: Cancel/clear ruler entirely

Remove:

Remove "Right-click to finish" instruction (no longer needed — measurement auto-completes at 2 points)
Remove multi-point polyline rendering (only single line between 2 points)

Visual:

Show a single straight line between 2 points (green dashed, as current)
Distance label at midpoint
Terrain Profile button appears after 2nd point is placed
Small circle markers at both endpoints

Testing Checklist

Calculator button visible in toolbar (right side, below Elev)
Click calculator button opens/closes Link Budget panel
Ruler allows exactly 2 points, no more
Third click starts new measurement (replaces old)
Escape clears ruler
Distance + Terrain Profile button appears after 2nd point
No multi-point web/polygon possible
Ruler still snaps to site markers

Commit Message

fix(ux): add calculator toolbar button, limit ruler to 2 points

- Add Link Budget Calculator button to right toolbar
- Limit ruler to exactly 2 points (point-to-point only)
- Third click starts new measurement, clears previous
- Remove multi-point polyline behavior

4.0 KiB Raw Permalink Blame History