107 lines
4.0 KiB
Markdown
107 lines
4.0 KiB
Markdown
# 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):
|
|
|
|
```typescript
|
|
// 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.
|
|
|
|
```typescript
|
|
// 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:**
|
|
1. Click 1: Place start point (show marker)
|
|
2. Click 2: Place end point (show marker + line + distance label + Terrain Profile button)
|
|
3. Click 3: Clear previous, start new measurement from this click
|
|
4. 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
|
|
```
|