@fieldia/map 0.14.0 → 0.15.0

package/README.md

@@ -1,8 +1,8 @@
 # @fieldia/map
 
 [Fieldia](https://fieldia.dev)'s maps: a **place** and an **area** as fields of a
-form, on the map provider you choose. Built on [Leaflet](https://leafletjs.com),
-loaded only when a map is shown.
+form, and a **list's records on a map**, on the map provider you choose. Built
+on [Leaflet](https://leafletjs.com), loaded only when a map is shown.
 
 ```sh
 npm install @fieldia/map
@@ -53,6 +53,57 @@ the whole area drags to move it, and a point between two adds one.
 Options: `shapes` (any of polygon, box, circle), `areas` (named areas to choose
 instead of drawing), `height`.
 
+## A list on a map
+
+A list page with `map` shows its records on a map too, beside the table or
+instead of it, sharing its search and its records chosen: a pin lights its row
+and a row its pin, a pin opens a card (a picture, a few fields, Choose, Open),
+pins that crowd become a bubble with their count, and "Search this area" puts
+the map's view into the search bar.
+
+```ts
+import { mapListViews, azureMaps } from '@fieldia/map';
+
+mountViewer(host, { page, dataSource, listViews: mapListViews({ provider: azureMaps({ key }) }) });
+```
+
+```json
+"map": {
+  "latitude": "lat", "longitude": "lng",
+  "pin": { "label": "price", "tones": [{ "tone": "info", "when": "offer == 'rent'" }] },
+  "card": { "title": "name", "image": "photo", "fields": ["price", "bedrooms"] },
+  "view": "both"
+}
+```
+
+Where each record is: `point` (a json field holding a GeoJSON Point), or
+`latitude` and `longitude`. A pin's `look` is `pin`, `label`, `icon`, `photo`
+or `dot`; `label` names the field it says (an amount or a number written short,
+"E£9.5M"), `icon` or `iconField` its icon (the map's own car, arrow, scooter,
+bike, bus, person, shop, food and flag, Fieldia's, or the app's `icons`),
+`image` its photo, `turn` a number field in degrees (a car seen from above
+turns whole; other icons keep upright, a pointer on their edge turning), and
+`tones` its colour by condition. `widget` names the app's own pin, given as
+`mapListViews({ pins: { name: (record, { document }) => element } })`. `card`
+takes `title`, `image`, `fields` and `open`; `cluster: false` draws every pin
+on its own, though pins near one another then overlap and a pointer cannot
+reach one under another (the keys still reach each); `view` is `list`, `map` or `both`; `limit` is 500 unless said.
+
+The map's own tools draw an area to search in: a polygon, a box or a circle,
+by mouse, finger or keys, as the area field draws one. It becomes a search of
+its own ("In the area drawn"), shown on the map until it leaves the search bar.
+
+"Search this area" asks for `between` on a latitude and a longitude, or the
+`within` condition on a point: `{ south, west, north, east }` in degrees, west
+beyond east across the antimeridian. An area drawn asks for `within` with
+`{ polygon: [[lng, lat], …] }` or `{ center: [lng, lat], radius }` in metres;
+on a latitude field, `longitude` names the field of its longitude. The memory
+data source answers all of them; a server's adapter turns them into its own
+query.
+
+A form with only a place or an area never carries the list map's code, its
+styles or its words.
+
 ## Without a mouse
 
 Tab reaches the map, which shows a cross at its centre: the arrow keys move the
@@ -63,6 +114,10 @@ arrow keys and leaves with Delete. A scroll passes over a map to the page
 unless Ctrl (⌘) is held, and on a phone one finger scrolls the page while two
 move the map.
 
+On a list's map, Tab goes from the map to each pin and bubble by its name;
+Enter or Space opens a pin's card (Ctrl or ⌘ with it chooses the record) or
+zooms into a bubble, and Escape closes the card, back on its pin.
+
 ## Providers
 
 | Provider | Road | Dark | Satellite | Address search |
@@ -71,15 +126,22 @@ move the map.
 | `googleMaps({ key, region, logo })` (Map Tiles API) | yes | no | yes | the app's own (`search`) |
 | `mapbox({ token })` | yes | yes | yes | yes, as people type |
 | `tiles({ url, credit })` | the app's own map images | | | the app's own |
-| `openStreetMap()` | yes, **for demos only** | no | no | Nominatim, on Enter |
+| `openStreetMap()` | yes, **for demos only** | no | no | Photon, as people type, nearest first (or `{ search: 'nominatim' }`, on Enter) |
 
 Keys never live in Fieldia: pass one restricted to your sites, or a function
 fetching a short-lived token from your server. Each provider's credits are shown
 in the map's corner, and its mark where its terms ask. Read your provider's
 terms on keeping search results: a place field keeps what it finds (Mapbox's
-permanent geocoding is asked for by default). OpenStreetMap's public map images
-and Nominatim are for trying things out: their policies treat an app in use as
-heavy use.
+permanent geocoding is asked for by default). OpenStreetMap's public map images,
+Photon's public server and Nominatim are for trying things out: their policies
+treat an app in use as heavy use. Photon can run on your own server
+(`openStreetMap({ photonUrl })`).
+
+Suggestions come as people type where the provider allows it, nearest where the
+map is looking first, each on two lines (the place, then where it is); Enter
+takes the first. "My location" says how sure it is: a rough location (a
+desktop's, placed by its network) shows the circle it may be anywhere in, says
+how wide, and names no address from it.
 
 Pass your own `search` (and `reverse`) to `mapWidgets` to use your own address
 search with any provider.
@@ -87,6 +149,11 @@ search with any provider.
 ## In the designer
 
 `mapKinds({ locale })` gives the designer Place and Area for its toolbox, with
-their settings; pass the map widgets to the designer and its editors too.
+their settings (a place's address search, "My location", the field its address
+goes into, the map's height; an area's shapes); pass the map widgets to the
+designer and its editors too. A list page's panel has its Map: where each
+record is, its pins, its card, and how the list opens. Give the screen editor
+`listViews` (and `sampleCentre`, where its made-up records are) and Try it shows
+the map too.
 
 MIT. Leaflet is BSD-2-Clause; its stylesheet is included with its licence.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fieldia/map",
-  "version": "0.14.0",
-  "description": "Fieldia's maps: a place and an area as fields, on any map provider. Leaflet, loaded only where a map is shown.",
+  "version": "0.15.0",
+  "description": "Fieldia's maps: a place and an area as fields, and a list's records on a map, on any map provider. Leaflet, loaded only where a map is shown.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
   "type": "commonjs",
@@ -21,8 +21,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.14.0",
-    "@fieldia/widgets": "0.14.0",
+    "@fieldia/core": "0.15.0",
+    "@fieldia/viewer": "0.15.0",
+    "@fieldia/widgets": "0.15.0",
     "leaflet": "^1.9.4",
     "tslib": "^2.8.1"
   },

package/src/index.d.mts

@@ -1,4 +1,7 @@
 export { mapWidgets } from './lib/widgets.mjs';
+export { mapListViews } from './lib/list-view.mjs';
+export { MAP_ICONS } from './lib/map-icons.mjs';
+export type { MapRecord, PinDrawer } from './lib/pins.mjs';
 export { mapKinds, type MapKind, type MapKindContext } from './lib/kinds.mjs';
 export type { MapSettings } from './lib/settings.mjs';
 export { azureMaps, googleMaps, mapbox, openStreetMap, tiles, type AddressSearch, type AzureMapsOptions, type BaseMap, type Credit, type GoogleMapsOptions, type MapboxOptions, type MapProvider, type MapView, type OpenStreetMapOptions, type PlaceFound, type ReverseSearch, type SearchRequest, type TileSpec, type TilesOptions, } from './lib/providers.mjs';

package/src/index.d.ts

@@ -1,4 +1,7 @@
 export { mapWidgets } from './lib/widgets';
+export { mapListViews } from './lib/list-view';
+export { MAP_ICONS } from './lib/map-icons';
+export type { MapRecord, PinDrawer } from './lib/pins';
 export { mapKinds, type MapKind, type MapKindContext } from './lib/kinds';
 export type { MapSettings } from './lib/settings';
 export { azureMaps, googleMaps, mapbox, openStreetMap, tiles, type AddressSearch, type AzureMapsOptions, type BaseMap, type Credit, type GoogleMapsOptions, type MapboxOptions, type MapProvider, type MapView, type OpenStreetMapOptions, type PlaceFound, type ReverseSearch, type SearchRequest, type TileSpec, type TilesOptions, } from './lib/providers';

package/src/index.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAP_LABELS = exports.metresBetween = exports.writePoint = exports.writeArea = exports.readPoint = exports.readArea = exports.tiles = exports.openStreetMap = exports.mapbox = exports.googleMaps = exports.azureMaps = exports.mapKinds = exports.mapWidgets = void 0;
+exports.MAP_LABELS = exports.metresBetween = exports.writePoint = exports.writeArea = exports.readPoint = exports.readArea = exports.tiles = exports.openStreetMap = exports.mapbox = exports.googleMaps = exports.azureMaps = exports.mapKinds = exports.MAP_ICONS = exports.mapListViews = exports.mapWidgets = void 0;
 var widgets_1 = require("./lib/widgets");
 Object.defineProperty(exports, "mapWidgets", { enumerable: true, get: function () { return widgets_1.mapWidgets; } });
+var list_view_1 = require("./lib/list-view");
+Object.defineProperty(exports, "mapListViews", { enumerable: true, get: function () { return list_view_1.mapListViews; } });
+var map_icons_1 = require("./lib/map-icons");
+Object.defineProperty(exports, "MAP_ICONS", { enumerable: true, get: function () { return map_icons_1.MAP_ICONS; } });
 var kinds_1 = require("./lib/kinds");
 Object.defineProperty(exports, "mapKinds", { enumerable: true, get: function () { return kinds_1.mapKinds; } });
 var providers_1 = require("./lib/providers");

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/map/src/index.ts"],"names":[],"mappings":";;;AAAA,yCAA2C;AAAlC,qGAAA,UAAU,OAAA;AACnB,qCAA0E;AAAjE,iGAAA,QAAQ,OAAA;AAEjB,6CAoByB;AAnBvB,sGAAA,SAAS,OAAA;AACT,uGAAA,UAAU,OAAA;AACV,mGAAA,MAAM,OAAA;AACN,0GAAA,aAAa,OAAA;AACb,kGAAA,KAAK,OAAA;AAgBP,iCAAgK;AAAvJ,+FAAA,QAAQ,OAAA;AAAE,gGAAA,SAAS,OAAA;AAAE,gGAAA,SAAS,OAAA;AAAE,iGAAA,UAAU,OAAA;AAAE,oGAAA,aAAa,OAAA;AAClE,uCAA0D;AAAjD,oGAAA,UAAU,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/map/src/index.ts"],"names":[],"mappings":";;;AAAA,yCAA2C;AAAlC,qGAAA,UAAU,OAAA;AACnB,6CAA+C;AAAtC,yGAAA,YAAY,OAAA;AACrB,6CAA4C;AAAnC,sGAAA,SAAS,OAAA;AAElB,qCAA0E;AAAjE,iGAAA,QAAQ,OAAA;AAEjB,6CAoByB;AAnBvB,sGAAA,SAAS,OAAA;AACT,uGAAA,UAAU,OAAA;AACV,mGAAA,MAAM,OAAA;AACN,0GAAA,aAAa,OAAA;AACb,kGAAA,KAAK,OAAA;AAgBP,iCAAgK;AAAvJ,+FAAA,QAAQ,OAAA;AAAE,gGAAA,SAAS,OAAA;AAAE,gGAAA,SAAS,OAAA;AAAE,iGAAA,UAAU,OAAA;AAAE,oGAAA,aAAa,OAAA;AAClE,uCAA0D;AAAjD,oGAAA,UAAU,OAAA"}

package/src/index.mjs

@@ -1,4 +1,6 @@
 export { mapWidgets } from './lib/widgets.mjs';
+export { mapListViews } from './lib/list-view.mjs';
+export { MAP_ICONS } from './lib/map-icons.mjs';
 export { mapKinds } from './lib/kinds.mjs';
 export { azureMaps, googleMaps, mapbox, openStreetMap, tiles, } from './lib/providers.mjs';
 export { readArea, readPoint, writeArea, writePoint, metresBetween } from './lib/geo.mjs';

package/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/map/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAqC,MAAM,aAAa,CAAC;AAE1E,OAAO,EACL,SAAS,EACT,UAAU,EACV,MAAM,EACN,aAAa,EACb,KAAK,GAeN,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAA4E,MAAM,WAAW,CAAC;AAChK,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/map/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAqC,MAAM,aAAa,CAAC;AAE1E,OAAO,EACL,SAAS,EACT,UAAU,EACV,MAAM,EACN,aAAa,EACb,KAAK,GAeN,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAA4E,MAAM,WAAW,CAAC;AAChK,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC"}

package/src/lib/area.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.areaWidget = areaWidget;
+const drawing_1 = require("./drawing");
 const geo_1 = require("./geo");
 const labels_1 = require("./labels");
 const map_core_1 = require("./map-core");
@@ -22,15 +23,6 @@ const map_core_1 = require("./map-core");
  * `height`.
  */
 const ALL = ['polygon', 'box', 'circle'];
-const ICONS = {
-    polygon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 8l7-5 7 6-3 11H7z"/></svg>',
-    box: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="6" width="16" height="12" rx="1"/></svg>',
-    circle: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="8"/></svg>',
-};
-/** How near the first point a press closes the ring: a fingertip's width, not the mark's. */
-const CLOSE_PX = 22;
-/** A press that moves less than this is a press, not a drag. */
-const DRAG_PX = 4;
 const same = (a, b) => JSON.stringify(a && (0, geo_1.writeArea)(a)) === JSON.stringify(b && (0, geo_1.writeArea)(b));
 function areaWidget(settings) {
     return (context) => {
@@ -47,11 +39,6 @@ function areaWidget(settings) {
             : [];
         let readonly = false;
         let area = null;
-        let mode = null;
-        /** A polygon's points so far. */
-        let points = [];
-        /** Where a box or a circle began, by pointer or by Space. */
-        let anchor = null;
         const element = doc.createElement('div');
         element.className = 'fd-map-field fd-area';
         // The field's label names the group, so each tool keeps its own name ("Polygon", not "Area").
@@ -85,9 +72,9 @@ function areaWidget(settings) {
             button.type = 'button';
             button.className = 'fd-button';
             button.setAttribute('aria-pressed', 'false');
-            button.innerHTML = ICONS[shape];
+            button.innerHTML = drawing_1.SHAPE_ICONS[shape];
             button.append(labels[shape]);
-            button.addEventListener('click', () => arm(mode === shape ? null : shape));
+            button.addEventListener('click', () => drawing.arm(drawing.mode === shape ? null : shape));
             toolButtons.set(shape, button);
             tools.append(button);
         });
@@ -111,7 +98,7 @@ function areaWidget(settings) {
                 const chosen = choice ? (0, geo_1.readArea)(choice.value) : null;
                 if (!chosen)
                     return;
-                arm(null);
+                drawing.arm(null);
                 commit(chosen, true);
             });
             tools.append(chooser);
@@ -122,31 +109,30 @@ function areaWidget(settings) {
         clear.textContent = labels.clear;
         clear.hidden = true;
         clear.addEventListener('click', () => {
-            arm(null);
+            drawing.arm(null);
             commit(null);
             announce(labels.shapeCleared);
             (toolButtons.get(shapes[0]) ?? box.element).focus();
         });
         tools.append(clear);
-        // The bar over the map while a tool is in hand: what to do, and the ways out.
-        const hint = doc.createElement('div');
-        hint.className = 'fd-map-hint';
-        hint.hidden = true;
-        const hintWords = doc.createElement('p');
-        const finishButton = doc.createElement('button');
-        finishButton.type = 'button';
-        finishButton.className = 'fd-button fd-button-primary';
-        finishButton.textContent = labels.finish;
-        finishButton.addEventListener('click', () => finish());
-        const cancelButton = doc.createElement('button');
-        cancelButton.type = 'button';
-        cancelButton.className = 'fd-button';
-        cancelButton.textContent = labels.cancel;
-        cancelButton.addEventListener('click', () => arm(null));
-        hint.append(hintWords, finishButton, cancelButton);
-        box.element.append(hint);
-        box.shield(hint);
-        box.follow(hint);
+        // Drawing a new shape: the tools' buttons say which is in hand; the shape drawn becomes the value.
+        const drawing = (0, drawing_1.shapeDrawing)({
+            box,
+            labels,
+            keys: element,
+            announce,
+            armed: (mode) => {
+                for (const [shape, button] of toolButtons)
+                    button.setAttribute('aria-pressed', String(shape === mode));
+                draw();
+            },
+            done: (drawn) => {
+                commit(drawn);
+                announce(labels.shapeDrawn);
+            },
+            escaped: () => (toolButtons.get(shapes[0]) ?? box.element).focus(),
+            finishesOn: (target) => target === toolButtons.get('polygon'),
+        });
         element.append(tools, box.element, live);
         // ---- the value -------------------------------------------------------------
         function commit(next, fit = false) {
@@ -159,12 +145,9 @@ function areaWidget(settings) {
         let map = null;
         let L = null;
         let shapeLayer = null;
-        let trace = null;
         const grips = [];
         /** The grip under the hand: the others follow it, it follows the hand. */
         let held = null;
-        /** A polygon's points while it is drawn, and the line reaching for the pointer. */
-        const marks = [];
         function clearLayers() {
             shapeLayer?.remove();
             shapeLayer = null;
@@ -173,15 +156,15 @@ function areaWidget(settings) {
         }
         function layerFor(shape, className) {
             return shape.shape === 'circle'
-                ? L.circle([shape.center.lat, shape.center.lng], { radius: shape.radius, className, interactive: !readonly && !mode })
-                : L.polygon(shape.points.map((p) => [p.lat, p.lng]), { className, interactive: !readonly && !mode });
+                ? L.circle([shape.center.lat, shape.center.lng], { radius: shape.radius, className, interactive: !readonly && !drawing.mode })
+                : L.polygon(shape.points.map((p) => [p.lat, p.lng]), { className, interactive: !readonly && !drawing.mode });
         }
         /** The shape as it now is, and its grips; `fit` brings it into view. */
         function draw(fit = false) {
             if (!map || !L)
                 return;
             clearLayers();
-            if (!area || mode)
+            if (!area || drawing.mode)
                 return;
             shapeLayer = layerFor(area, `fd-map-shape${readonly ? '' : ' fd-map-movable'}`).addTo(map);
             if (!readonly) {
@@ -327,7 +310,7 @@ function areaWidget(settings) {
             if (!el)
                 return;
             el.addEventListener('pointerdown', (event) => {
-                if (!map || !area || readonly || mode || event.button !== 0)
+                if (!map || !area || readonly || drawing.mode || event.button !== 0)
                     return;
                 event.stopPropagation();
                 const start = map.mouseEventToLatLng(event);
@@ -356,210 +339,10 @@ function areaWidget(settings) {
             });
         }
         // ---- the tools ---------------------------------------------------------------
-        function sayStep() {
-            if (!mode)
-                return;
-            const words = mode === 'polygon' ? labels.drawPolygon : mode === 'box' ? labels.drawBox : labels.drawCircle;
-            hintWords.textContent = mode === 'polygon' && points.length ? `${words} ${(0, labels_1.fill)(labels.points, { n: points.length })}.` : words;
-            finishButton.hidden = mode !== 'polygon' || points.length < 3;
-        }
-        function arm(next) {
-            if (readonly)
-                next = null;
-            mode = next;
-            points = [];
-            anchor = null;
-            trace?.remove();
-            trace = null;
-            remark();
-            for (const [shape, button] of toolButtons)
-                button.setAttribute('aria-pressed', String(shape === mode));
-            hint.hidden = !mode;
-            // Every tool holds the ground still: a press is a point, never a pan.
-            box.setPannable(!mode);
-            box.ready((m) => (mode ? m.doubleClickZoom.disable() : m.doubleClickZoom.enable()));
-            box.element.dataset['drawing'] = mode ?? '';
-            if (!mode)
-                delete box.element.dataset['drawing'];
-            sayStep();
-            draw();
-            if (mode)
-                announce(hintWords.textContent ?? '');
-        }
-        /** The marks of a polygon's points: made again only when the points change, never as the pointer moves. */
-        function remark() {
-            for (const m of marks.splice(0))
-                m.remove();
-            if (!map || !L || mode !== 'polygon')
-                return;
-            points.forEach((p, i) => {
-                const mark = L.marker([p.lat, p.lng], { icon: gripIcon(), interactive: i === 0, keyboard: false }).addTo(map);
-                // Back on the first point closes the ring.
-                if (i === 0)
-                    mark.on('click', () => points.length >= 3 && finish());
-                marks.push(mark);
-            });
-        }
-        /** The outline being drawn, toward the pointer: changed in place as it moves. */
-        function retrace(toward) {
-            if (!map || !L)
-                return;
-            let ring = null;
-            let circle = null;
-            if (mode === 'polygon') {
-                ring = [...points, ...(toward ? [toward] : [])];
-                if (ring.length < 2)
-                    ring = null;
-                marks[0]?.getElement()?.toggleAttribute('data-closes', nearFirst(toward));
-            }
-            else if (anchor && toward) {
-                if (mode === 'box')
-                    ring = (0, geo_1.boxFrom)(anchor, toward);
-                else
-                    circle = { center: anchor, radius: (0, geo_1.metresBetween)(anchor, toward) };
-            }
-            const latLngs = ring?.map((p) => [p.lat, p.lng]);
-            if (trace && latLngs && trace instanceof L.Polygon && !(trace instanceof L.Rectangle)) {
-                trace.setLatLngs(latLngs);
-                return;
-            }
-            if (trace && circle && trace instanceof L.Circle) {
-                trace.setLatLng([circle.center.lat, circle.center.lng]);
-                trace.setRadius(circle.radius);
-                return;
-            }
-            trace?.remove();
-            trace = null;
-            if (latLngs)
-                trace = L.polygon(latLngs, { className: 'fd-map-trace', interactive: false }).addTo(map);
-            else if (circle)
-                trace = L.circle([circle.center.lat, circle.center.lng], { radius: circle.radius, className: 'fd-map-trace', interactive: false }).addTo(map);
-        }
-        function nearFirst(at) {
-            if (!map || !at || points.length < 3)
-                return false;
-            return map.latLngToContainerPoint([points[0].lat, points[0].lng]).distanceTo(map.latLngToContainerPoint([at.lat, at.lng])) <= CLOSE_PX;
-        }
-        function addPoint(at) {
-            if (mode === 'polygon') {
-                if (nearFirst(at))
-                    return finish();
-                points.push(at);
-                sayStep();
-                remark();
-                retrace();
-                announce((0, labels_1.fill)(labels.points, { n: points.length }));
-                return;
-            }
-            if (!anchor) {
-                anchor = at;
-                retrace(at);
-                return;
-            }
-            const end = at;
-            const start = anchor;
-            if (mode === 'box')
-                complete({ shape: 'box', points: (0, geo_1.boxFrom)(start, end) });
-            else if (mode === 'circle')
-                complete({ shape: 'circle', center: start, radius: Math.max(1, (0, geo_1.metresBetween)(start, end)) });
-        }
-        function finish() {
-            if (mode !== 'polygon' || points.length < 3)
-                return;
-            complete({ shape: 'polygon', points: [...points] });
-        }
-        function complete(drawn) {
-            mode = null;
-            arm(null);
-            commit(drawn);
-            announce(labels.shapeDrawn);
-        }
         box.ready((m, leaflet) => {
             map = m;
             L = leaflet;
             draw(!!area);
-            m.on('click', (event) => {
-                if (mode !== 'polygon' || readonly)
-                    return;
-                addPoint({ lat: event.latlng.lat, lng: event.latlng.lng });
-            });
-            m.on('dblclick', () => {
-                if (mode !== 'polygon')
-                    return;
-                // The two clicks of a double-click have each placed a point, on top of each other: one is enough.
-                const [a, b] = points.slice(-2);
-                if (a && b && m.latLngToContainerPoint([a.lat, a.lng]).distanceTo(m.latLngToContainerPoint([b.lat, b.lng])) < 6) {
-                    points.pop();
-                    remark();
-                }
-                finish();
-            });
-            m.on('mousemove', (event) => {
-                if (mode === 'polygon' && points.length)
-                    retrace({ lat: event.latlng.lat, lng: event.latlng.lng });
-            });
-            // A box and a circle are drawn by dragging: pointer events, which a mouse, a finger and a pen all raise.
-            let pressed = null;
-            box.element.addEventListener('pointerdown', (event) => {
-                if ((mode !== 'box' && mode !== 'circle') || readonly || event.button !== 0)
-                    return;
-                if (event.target.closest('.fd-map-hint, .fd-map-zoom, .fd-map-credits, .fd-map-logo'))
-                    return;
-                const at = m.mouseEventToLatLng(event);
-                pressed = { x: event.clientX, y: event.clientY, at: { lat: at.lat, lng: at.lng }, id: event.pointerId };
-                anchor = pressed.at;
-                box.element.setPointerCapture?.(event.pointerId);
-            });
-            box.element.addEventListener('pointermove', (event) => {
-                if (!pressed || event.pointerId !== pressed.id)
-                    return;
-                const at = m.mouseEventToLatLng(event);
-                retrace({ lat: at.lat, lng: at.lng });
-            });
-            const release = (event) => {
-                if (!pressed || event.pointerId !== pressed.id)
-                    return;
-                const moved = Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y);
-                const at = m.mouseEventToLatLng(event);
-                pressed = null;
-                // A press with no drag is no shape: the tool stays in hand.
-                if (event.type === 'pointercancel' || moved < DRAG_PX) {
-                    anchor = null;
-                    retrace();
-                    return;
-                }
-                addPoint({ lat: at.lat, lng: at.lng });
-            };
-            box.element.addEventListener('pointerup', release);
-            box.element.addEventListener('pointercancel', release);
-        });
-        // The keys of drawing, wherever in the field the focus is.
-        element.addEventListener('keydown', (event) => {
-            if (!mode)
-                return;
-            const onMap = event.target === box.element;
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                arm(null);
-                (toolButtons.get(shapes[0]) ?? box.element).focus();
-            }
-            else if (event.key === 'Enter' && mode === 'polygon' && points.length >= 3 && (onMap || event.target === finishButton || toolButtons.get('polygon') === event.target)) {
-                event.preventDefault();
-                finish();
-            }
-            else if (event.key === 'Backspace' && mode === 'polygon' && points.length && onMap) {
-                event.preventDefault();
-                points.pop();
-                sayStep();
-                remark();
-                retrace();
-                announce((0, labels_1.fill)(labels.points, { n: points.length }));
-            }
-            else if (event.key === ' ' && onMap && map) {
-                event.preventDefault();
-                const c = map.getCenter();
-                addPoint({ lat: c.lat, lng: c.lng });
-            }
         });
         return {
             element,
@@ -569,8 +352,8 @@ function areaWidget(settings) {
                 const wasReadonly = readonly;
                 readonly = state.readonly;
                 tools.hidden = readonly;
-                if (readonly && mode)
-                    arm(null);
+                if (readonly && drawing.mode)
+                    drawing.arm(null);
                 const next = (0, geo_1.readArea)(state.value);
                 const outside = !same(next, area);
                 if (outside)