# MapDrawToolbar

## Overview

`MapDrawToolbar` arms and disarms the geofence drawing tool. Paired with `<Map drawing>` and the `pointsInShape` utility, it answers "who was inside this area" with no extra Maps call — the `drawing` and `geometry` libraries were already being loaded.

---

## Import

```tsx
import {
  Map,
  MapDrawToolbar,
  pointsInShape,
  type MapDrawMode,
  type MapDrawnShape,
} from 'xertica-ui/ui';
```

---

## Props

| Prop       | Type                                  | Default                | Description                          |
| ---------- | ------------------------------------- | ---------------------- | ------------------------------------ |
| `modes`    | `MapDrawMode[]`                       | `['polygon','circle']` | Tools to offer.                      |
| `active`   | `MapDrawMode \| null`                 | required               | The armed tool, or `null` when idle. |
| `onChange` | `(mode: MapDrawMode \| null) => void` | required               | Reports the armed tool.              |
| `labels`   | `Partial<Record<...,string>>`         | English                | Overrides the built-in labels.       |
| `variant`  | `'overlay' \| 'inline'`               | `'overlay'`            | `inline` flows in normal layout.     |
| `position` | `MapOverlayPosition`                  | `'top-left'`           | Anchor for `variant="overlay"`.      |

On `<Map>`: `drawing={{ modes, active, onComplete, onCancel, colorToken, keepOverlay }}`.

---

## Example

```tsx
const [mode, setMode] = useState<MapDrawMode | null>(null);
const [inside, setInside] = useState<Unit[]>([]);

<Map
  height="520px"
  markers={units.map(u => ({ id: u.id, position: u.position }))}
  drawing={{
    modes: ['polygon', 'circle'],
    active: mode,
    onComplete: shape => {
      setInside(pointsInShape(units, shape));
      setMode(null); // or the next click starts another shape
    },
  }}
>
  <MapDrawToolbar active={mode} onChange={setMode} />
</Map>;
```

---

## AI Rules

- **Always** keep `active` in the parent and pass it to both the toolbar and `<Map drawing>`.
- **Always** reset `active` to `null` inside `onComplete`.
- **Always** use `pointsInShape` for containment rather than reimplementing a ray cast — it handles polygons, circles and rectangles, and works on plain data with no Maps call.
- **Never** remove the idle button. A drawing mode nobody can see they are in is how stray shapes get created.
- By default the drawn overlay is removed after completion; the shape is reported as plain coordinates. Set `keepOverlay` only if you intend to manage that object yourself.