@gramps-connect/story 0.4.0 → 0.6.0

package/src/editor/PlaceField.tsx

@@ -2,7 +2,8 @@
 // map, dragging the pin, typing coordinates, or a search by name (opt-in:
 // the one thing the editor sends anywhere). Picking one of the story's
 // other places gives this slide the very same place, overlays and all.
-// A place's shape and overlays aren't edited here, but are always kept.
+// A place's shapes and old maps are edited full screen (onEditMap), and
+// always kept.
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Autocomplete, Button, Group, Loader, Stack, Text, TextInput, Tooltip, UnstyledButton } from "@mantine/core";
 import type { Place } from "../types";
@@ -28,6 +29,9 @@ export interface PlaceFieldProps {
   strings: EditorStrings;
   /** A change, as a function of the place as it is by then. */
   onChange: (update: PlaceUpdate, key: string) => void;
+  /** Opens the shapes-and-old-maps editor; without it, those are only
+   * kept. */
+  onEditMap?: () => void;
 }
 
 type Found =
@@ -36,7 +40,7 @@ type Found =
   | { state: "results"; results: PlaceSearchResult[] }
   | { state: "message"; message: string };
 
-export function PlaceField({ place, choices, around, language, search, dark, strings, onChange }: PlaceFieldProps) {
+export function PlaceField({ place, choices, around, language, search, dark, strings, onChange, onEditMap }: PlaceFieldProps) {
   const lat = place?.lat;
   const lon = place?.lon;
   const point = lat !== undefined && lon !== undefined ? ([lon, lat] as [number, number]) : null;
@@ -155,6 +159,12 @@ export function PlaceField({ place, choices, around, language, search, dark, str
       />
       <Text size="xs" c="dimmed">{strings.placeMapHint}</Text>
       {keeps.length > 0 && <Text size="xs" c="dimmed">{strings.placeKeeps(keeps.join(", "))}</Text>}
+      {onEditMap && (
+        <Group gap="sm" wrap="nowrap" align="center">
+          <Button variant="default" size="xs" style={{ flex: "none" }} onClick={onEditMap}>{strings.editMap}</Button>
+          <Text size="xs" c="dimmed">{strings.editMapHint}</Text>
+        </Group>
+      )}
     </Stack>
   );
 }

package/src/editor/PlaceMapDialog.tsx

@@ -0,0 +1,228 @@
+// A slide's map, full screen: the shapes under its pin (drawn, or imported
+// from a KML, GPX or GeoJSON file) and scanned old maps laid over it, each
+// with the years it shows. Works on a copy: Done hands the editor the
+// place and any images added, as one change; Cancel drops them.
+import { useMemo, useRef, useState } from "react";
+import { ActionIcon, Box, Button, Group, Modal, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import type { MediaItem, Place, StoryDate, StoryDoc } from "../types";
+import { optimizeImage } from "../image";
+import { parseMapFile } from "../mapEdit";
+import { storyPlaces } from "../player/geo";
+import { edtfYearRange } from "../player/dates";
+import type { DateTextParser } from "./dates";
+import { MapEditor, MapEditorHelp, type MapEditorHandle } from "./MapEditor";
+import type { MapEditorStrings } from "./mapEditorStrings";
+import { addImage, slideDate, type NewImage } from "./model";
+import { editorToPlace, placeToEditor } from "./placeShapes";
+import type { EditorStrings } from "./strings";
+
+const BAR_HEIGHT = 56;
+
+/** Where the map editor's English is Gramps Connect's (images come from
+ * its media there), the story editor's own. */
+const STORY_MAP_WORDS: Partial<MapEditorStrings> = {
+  helpImage: "Image: add a picture file, such as a scan of an old map -- see",
+};
+
+export interface PlaceMapDialogProps {
+  place: Place | undefined;
+  doc: StoryDoc;
+  files: Map<string, Uint8Array>;
+  dark?: boolean;
+  parseDateText: DateTextParser;
+  strings: EditorStrings;
+  mapStrings?: Partial<MapEditorStrings>;
+  onCancel: () => void;
+  /** The place as edited, and the story's media and files with any images
+   * added here. */
+  onDone: (place: Place | undefined, media: Record<string, MediaItem>, files: Map<string, Uint8Array>) => void;
+}
+
+/** The default way an old map's scan is stored: 2048px, PNG when it has
+ * transparency (see optimizeImage's "overlay" purpose). */
+async function prepareOverlay(file: Blob): Promise<NewImage> {
+  const image = await optimizeImage(file, { purpose: "overlay" });
+  return { data: new Uint8Array(await image.blob.arrayBuffer()), mime: image.mime, ext: image.ext, width: image.width, height: image.height };
+}
+
+/** An overlay's years, as readers would write them; the precise form
+ * follows. Narrow, for the map editor's side panel. */
+function OverlayDateField({ value, language, parse, strings, onChange }: {
+  value: StoryDate | undefined;
+  language: string | undefined;
+  parse: DateTextParser;
+  strings: EditorStrings;
+  onChange: (date: StoryDate | undefined) => void;
+}) {
+  const [text, setText] = useState(value?.text ?? "");
+  const request = useRef(0);
+  const edtf = value?.edtf;
+  return (
+    <Stack gap={2} maw={220}>
+      <TextInput
+        size="xs" label={strings.overlayDate} description={strings.overlayDateHint} value={text}
+        onChange={(e) => {
+          const typed = e.currentTarget.value;
+          setText(typed);
+          const id = ++request.current;
+          if (!typed.trim()) { onChange(undefined); return; }
+          void parse(typed, language).then((parsed) => {
+            if (id === request.current) onChange(slideDate(value, typed, parsed));
+          });
+        }}
+      />
+      {text.trim() && (
+        <Text size="xs" c={edtf && edtfYearRange(edtf) ? "dimmed" : "red"}>
+          {edtf && edtfYearRange(edtf) ? `EDTF ${edtf}` : strings.preciseDateNotUnderstood}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+export function PlaceMapDialog({
+  place, doc, files, dark, parseDateText, strings, mapStrings: mapStringOverrides, onCancel, onDone,
+}: PlaceMapDialogProps) {
+  const mapStrings = { ...STORY_MAP_WORDS, ...mapStringOverrides };
+  const editorRef = useRef<MapEditorHandle>(null);
+  const initial = useMemo(() => placeToEditor(place), [place]);
+  // The story's media and files with what's been added here.
+  const [work, setWork] = useState({ doc, files });
+  const workRef = useRef(work);
+  workRef.current = work;
+  // Each overlay's date by media key, once changed here.
+  const [dates, setDates] = useState(() => new Map<string, StoryDate | undefined>());
+  const [message, setMessage] = useState<string | null>(null);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const imageInput = useRef<HTMLInputElement>(null);
+  const shapesInput = useRef<HTMLInputElement>(null);
+
+  // Where to look with nothing to frame: the pin, or the story's places.
+  const initialView = useMemo(() => {
+    if (place?.lat !== undefined && place.lon !== undefined) return { center: [place.lon, place.lat] as [number, number], zoom: 12 };
+    const all = storyPlaces(doc.slides.map((s) => s.place));
+    if (!all) return undefined;
+    const [w, s, e, n] = all.bounds;
+    return { center: [(w + e) / 2, (s + n) / 2] as [number, number], zoom: 5 };
+  }, [place, doc]);
+
+  const resolveImage = async (key: string) => {
+    const item = Object.prototype.hasOwnProperty.call(workRef.current.doc.media, key) ? workRef.current.doc.media[key] : undefined;
+    const data = item && workRef.current.files.get(item.src);
+    if (!item || !data) throw new Error(strings.photoFailed(key));
+    return URL.createObjectURL(new Blob([data as Uint8Array<ArrayBuffer>], { type: item.mime }));
+  };
+
+  const addImages = async (chosen: File[]) => {
+    setMessage(null);
+    for (const file of chosen) {
+      let key: string;
+      try {
+        const added = addImage(workRef.current.doc, workRef.current.files, await prepareOverlay(file), "map");
+        workRef.current = { doc: added.doc, files: added.files };
+        setWork(workRef.current);
+        key = added.key;
+      } catch {
+        setMessage(strings.photoFailed(file.name || "the image"));
+        continue;
+      }
+      try {
+        if (!(await editorRef.current?.addImage(key))) setMessage(strings.overlayAlready);
+      } catch (err) {
+        setMessage(err instanceof Error ? err.message : String(err));
+      }
+    }
+  };
+
+  const importShapes = async (chosen: File[]) => {
+    setMessage(null);
+    for (const file of chosen) {
+      try {
+        // A KML GroundOverlay's picture lives outside the file; only shapes
+        // come in.
+        const features = parseMapFile(await file.text()).filter((f) => f.properties?.["@geometry-type"] !== "groundoverlay");
+        if (features.length === 0) setMessage(strings.importNothing(file.name));
+        else editorRef.current?.addFeatures(features);
+      } catch {
+        setMessage(strings.importFailed(file.name));
+      }
+    }
+  };
+
+  const done = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    onDone(editorToPlace(place, editor.getResult(), dates), workRef.current.doc.media, workRef.current.files);
+  };
+
+  const bar = dark ? "rgba(20,20,20,0.85)" : "rgba(255,255,255,0.9)";
+  return (
+    <Modal opened onClose={onCancel} fullScreen withCloseButton={false} closeOnEscape={false} padding={0}>
+      <Box style={{ position: "fixed", inset: 0, overflow: "hidden" }}>
+        <MapEditor
+          ref={editorRef}
+          initial={initial}
+          initialView={initialView}
+          resolveImage={resolveImage}
+          releaseImage={(url) => URL.revokeObjectURL(url)}
+          onAddImage={() => imageInput.current?.click()}
+          onError={setMessage}
+          dark={dark}
+          toolbarTop={BAR_HEIGHT + 12}
+          overlayNames={false}
+          strings={mapStrings}
+          renderOverlayOptions={(key) => (
+            <OverlayDateField
+              key={key}
+              value={dates.has(key) ? dates.get(key) : place?.overlays?.find((o) => o.media === key)?.date}
+              language={doc.language}
+              parse={parseDateText}
+              strings={strings}
+              onChange={(date) => setDates((prev) => new Map(prev).set(key, date))}
+            />
+          )}
+        />
+        <Group
+          justify="space-between" wrap="nowrap" px="md" gap="sm"
+          style={{ position: "absolute", top: 0, left: 0, right: 0, height: BAR_HEIGHT, zIndex: 3, background: bar }}
+        >
+          <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
+            <Text fw={600} truncate dir="auto">{strings.mapDialogTitle(place?.name)}</Text>
+            <Tooltip label={strings.mapHelp}>
+              <ActionIcon variant="subtle" radius="xl" aria-label={strings.mapHelp} onClick={() => setHelpOpen(true)}>ⓘ</ActionIcon>
+            </Tooltip>
+          </Group>
+          <Group gap="xs" wrap="nowrap">
+            <Tooltip label={strings.importShapesHint} multiline w={280}>
+              <Button variant="default" size="sm" onClick={() => shapesInput.current?.click()}>{strings.importShapes}</Button>
+            </Tooltip>
+            <Button variant="default" size="sm" onClick={onCancel}>{strings.cancel}</Button>
+            <Button size="sm" onClick={done}>{strings.done}</Button>
+          </Group>
+        </Group>
+        {message && (
+          <Text
+            size="sm" role="alert"
+            style={{
+              position: "absolute", bottom: 12, left: 12, zIndex: 3, maxWidth: 480, padding: "6px 10px", borderRadius: 6,
+              background: bar, color: "var(--mantine-color-red-filled)",
+            }}
+          >
+            {message}
+          </Text>
+        )}
+        <input
+          ref={imageInput} type="file" accept="image/*" multiple hidden
+          onChange={(e) => { const chosen = [...(e.currentTarget.files ?? [])]; e.currentTarget.value = ""; void addImages(chosen); }}
+        />
+        <input
+          ref={shapesInput} type="file" accept=".kml,.gpx,.geojson,.json,application/vnd.google-earth.kml+xml,application/gpx+xml,application/geo+json" multiple hidden
+          onChange={(e) => { const chosen = [...(e.currentTarget.files ?? [])]; e.currentTarget.value = ""; void importShapes(chosen); }}
+        />
+      </Box>
+      <Modal opened={helpOpen} onClose={() => setHelpOpen(false)} title={strings.mapHelp} size="md" zIndex={1000}>
+        <MapEditorHelp strings={mapStrings} />
+      </Modal>
+    </Modal>
+  );
+}

package/src/editor/StoryEditor.tsx

@@ -25,6 +25,8 @@ import {
 } from "./model";
 import { PhotosField } from "./PhotosField";
 import { PlaceField, type PlaceUpdate } from "./PlaceField";
+import { PlaceMapDialog } from "./PlaceMapDialog";
+import type { MapEditorStrings } from "./mapEditorStrings";
 import { WIKIDATA_PLACE_SEARCH, type PlaceSearch } from "./placeSearch";
 import { SlideList } from "./SlideList";
 import { StoryTextField } from "./StoryTextField";
@@ -60,6 +62,8 @@ export interface StoryEditorProps {
   /** Finding a place by name. By default Wikidata, and only when the
    * person asks; null leaves the search out. */
   placeSearch?: PlaceSearch | null;
+  /** The map editor's words (Edit map), over its English. */
+  mapStrings?: Partial<MapEditorStrings>;
 }
 
 /** The slide an issue's JSON Pointer is about, or STORY. */
@@ -98,7 +102,7 @@ function Thumb({ doc, slide, resolveMedia }: { doc: StoryDoc; slide: Slide; reso
 
 export function StoryEditor({
   initialStory, initialFiles, onChange, prepareImage: prepare = prepareImage, toolbar, brand, dark = false,
-  strings: stringOverrides, playerStrings, parseDateText = suggestEdtf, placeSearch = WIKIDATA_PLACE_SEARCH,
+  strings: stringOverrides, playerStrings, parseDateText = suggestEdtf, placeSearch = WIKIDATA_PLACE_SEARCH, mapStrings,
 }: StoryEditorProps) {
   const strings = useMemo(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
   const [history, setHistory] = useState<History>(() => startHistory(initialStory));
@@ -158,6 +162,9 @@ export function StoryEditor({
       return after === before ? h : record(h, updateSlide(h.present, at, { place: after }), `${slideId}:${key}`);
     });
   };
+  // The slide whose map (shapes, old maps) is open full screen.
+  const [mapSlideId, setMapSlideId] = useState<string | null>(null);
+  const mapSlide = mapSlideId ? doc.slides.find((s) => s.id === mapSlideId) : undefined;
   const placeChoices = useMemo(() => storyPlaceChoices(doc, index), [doc, index]);
   const around = useMemo(() => storyPlaces(doc.slides.map((s) => s.place))?.bounds ?? null, [doc.slides]);
 
@@ -300,6 +307,7 @@ export function StoryEditor({
       <PlaceField
         place={slide.place} choices={placeChoices} around={around} language={doc.language} search={placeSearch} dark={dark} strings={strings}
         onChange={(update, key) => setPlace(slide.id, update, key)}
+        onEditMap={() => setMapSlideId(slide.id)}
       />
       <PhotosField
         photos={slide.media ?? []} media={doc.media} urlFor={urlFor} strings={strings} busy={busy}
@@ -423,6 +431,21 @@ export function StoryEditor({
         {column(index === STORY ? storyForm : slideForm, wide ? "min(520px, 36%)" : undefined)}
         {column(preview)}
       </Box>
+      {mapSlide && (
+        <PlaceMapDialog
+          place={mapSlide.place} doc={doc} files={files} dark={dark} parseDateText={parseDateText}
+          strings={strings} mapStrings={mapStrings}
+          onCancel={() => setMapSlideId(null)}
+          onDone={(place, media, nextFiles) => {
+            const at = doc.slides.findIndex((s) => s.id === mapSlide.id);
+            setMapSlideId(null);
+            if (at < 0) return;
+            setFiles(nextFiles);
+            // One step for undo: the map's images and the place together.
+            apply(updateSlide({ ...doc, media }, at, { place }));
+          }}
+        />
+      )}
       <Modal opened={presenting} onClose={() => setPresenting(false)} fullScreen withCloseButton={false} padding={0}>
         <Box style={{ position: "fixed", inset: 0 }}>
           <StoryPlayer

package/src/editor/index.ts

@@ -1,6 +1,12 @@
 export { prepareImage, StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export {
+  MapEditor, MapEditorHelp, type MapEditorHandle, type MapEditorOverlay, type MapEditorProps, type MapEditorResult, type MapEditorStatus,
+} from "./MapEditor";
+export { MAP_EDITOR_ENGLISH, type MapEditorStrings } from "./mapEditorStrings";
 export { PhotosField, type PhotosFieldProps } from "./PhotosField";
 export { PlaceField, type PlaceFieldProps, type PlaceUpdate } from "./PlaceField";
+export { PlaceMapDialog, type PlaceMapDialogProps } from "./PlaceMapDialog";
+export { editorToPlace, placeFeatures, placeToEditor } from "./placeShapes";
 export { searchWikidataPlaces, wikidataPoint, WIKIDATA_PLACE_SEARCH, type PlaceSearch, type PlaceSearchResult } from "./placeSearch";
 export { StoryTextField, type StoryTextFieldProps } from "./StoryTextField";
 export { SlideList, type SlideListProps } from "./SlideList";

package/src/editor/mapEditorStrings.ts

@@ -0,0 +1,109 @@
+// The map editor's words. English here; Gramps Connect passes its own
+// translations (its t() is keyed by these same English texts).
+
+export interface MapEditorStrings {
+  point: string;
+  line: string;
+  polygon: string;
+  rectangle: string;
+  select: string;
+  image: string;
+  editOptions: string;
+  labelText: string;
+  regionName: string;
+  fillOpacity: string;
+  scale: string;
+  transform: string;
+  overlayName: string;
+  opacity: string;
+  stackingOrder: string;
+  removeImage: string;
+  resizeImage: string;
+  rotateImage: string;
+  warpCorner: string;
+  basemapFailed: string;
+  imageFailed: string;
+  lockedOne: string;
+  lockedMany: (count: number) => string;
+  lockedExplain: string;
+  // The help (MapEditorHelp), in the pieces it's put together from.
+  helpTitle: string;
+  helpDrawing: string;
+  helpPoint: string;
+  helpLine: string;
+  helpEnterFinishes: string;
+  helpEscCancels: string;
+  helpRectangle: string;
+  helpImage: string;
+  helpImages: string;
+  helpBelow: string;
+  helpEditing: string;
+  helpSelect: string;
+  helpVertex: string;
+  helpColor: string;
+  helpDelete: string;
+  helpOr: string;
+  helpRotate: string;
+  helpRotateHandle: string;
+  helpImageMove: string;
+  helpImageResize: string;
+  helpImageRotate: string;
+  helpImageTransform: string;
+  helpImageRemove: string;
+}
+
+export const MAP_EDITOR_ENGLISH: MapEditorStrings = {
+  point: "Point",
+  line: "Line",
+  polygon: "Polygon",
+  rectangle: "Rectangle",
+  select: "Select",
+  image: "Image",
+  editOptions: "Edit Options",
+  labelText: "Label text",
+  regionName: "Region name (optional)",
+  fillOpacity: "Fill opacity",
+  scale: "Scale",
+  transform: "Transform",
+  overlayName: "Overlay name (optional)",
+  opacity: "Opacity",
+  stackingOrder: "Stacking order",
+  removeImage: "Remove this image",
+  resizeImage: "Drag to resize (keeps its exact shape, warped or not)",
+  rotateImage: "Drag to rotate",
+  warpCorner: "Drag to warp this corner",
+  basemapFailed: "The basemap could not be loaded.",
+  imageFailed: "The image failed to load.",
+  lockedOne: "1 shape can't be edited here",
+  lockedMany: (count) => `${count} shapes can't be edited here`,
+  lockedExplain: "For example, a region with a hole in it, or one whose outline crosses itself. It's drawn dashed, and saved exactly as it was.",
+  helpTitle: "How to use this editor",
+  helpDrawing: "Drawing",
+  helpPoint: "Point: click once to place it.",
+  helpLine: "Line, Polygon: click to place each point, then click that first point's own marker again to "
+    + "finish -- it's styled differently once there's enough points to close the shape. Pressing",
+  helpEnterFinishes: "finishes it too;",
+  helpEscCancels: "cancels it.",
+  helpRectangle: "Rectangle: click and drag from one corner to the opposite corner.",
+  helpImage: "Image: pick a media object to overlay -- see",
+  helpImages: "Images",
+  helpBelow: "below.",
+  helpEditing: "Editing a shape",
+  helpSelect: "Select: click a shape to select it, then drag it or one of its handles.",
+  helpVertex: "Drag a vertex to move it. To add a new point on a Line, Polygon, or Rectangle, drag the small "
+    + "midpoint marker between two existing vertices outward.",
+  helpColor: "The color swatch sets the next shape's color -- or, with a shape selected, changes its color.",
+  helpDelete: "Delete a selected shape or image with",
+  helpOr: "or",
+  helpRotate: "Rotate a selected Polygon, Rectangle, or Line: hold",
+  helpRotateHandle: "while dragging one of its handles.",
+  helpImageMove: "Drag anywhere on an image to move it.",
+  helpImageResize: "Drag its ↘ handle to resize it -- grows or shrinks from its own center, "
+    + "keeping its exact shape (works the same on a warped image, too).",
+  helpImageRotate: "Drag its ↻ handle to rotate it -- handy for aligning a scanned old map.",
+  helpImageTransform: "Switch to \"Transform\" to also show 4 corner handles you can drag independently "
+    + "(rubber-sheeting) -- for a scanned map that isn't printed at a uniform scale/orientation. "
+    + "Switching back to \"Scale\" just hides those 4 handles again; move/resize/rotate keep "
+    + "working on the image's exact current shape either way.",
+  helpImageRemove: "Click its × handle to remove it.",
+};

package/src/editor/model.ts

@@ -228,13 +228,14 @@ export function storyFileName(title: string): string {
   return `${safe || "story"}.story.zip`;
 }
 
-/** Undo and redo over whole documents. Typing in one field makes one step,
- * not one per keystroke: a change with the same `key` within COALESCE_MS
- * of the last replaces it. */
-export interface History {
-  past: StoryDoc[];
-  present: StoryDoc;
-  future: StoryDoc[];
+/** Undo and redo over whole documents (a StoryDoc here; any value that's
+ * replaced, never changed in place, works). Typing in one field makes one
+ * step, not one per keystroke: a change with the same `key` within
+ * COALESCE_MS of the last replaces it. */
+export interface History<T = StoryDoc> {
+  past: T[];
+  present: T;
+  future: T[];
   lastKey?: string;
   lastAt?: number;
 }
@@ -242,24 +243,24 @@ export interface History {
 export const COALESCE_MS = 1500;
 const MAX_STEPS = 200;
 
-export function startHistory(doc: StoryDoc): History {
+export function startHistory<T = StoryDoc>(doc: T): History<T> {
   return { past: [], present: doc, future: [] };
 }
 
-export function record(history: History, next: StoryDoc, key?: string, now = Date.now()): History {
+export function record<T>(history: History<T>, next: T, key?: string, now = Date.now()): History<T> {
   if (next === history.present) return history;
   const coalesce = key !== undefined && key === history.lastKey && history.lastAt !== undefined && now - history.lastAt < COALESCE_MS;
   const past = coalesce ? history.past : [...history.past, history.present].slice(-MAX_STEPS);
   return { past, present: next, future: [], lastKey: key, lastAt: now };
 }
 
-export function undo(history: History): History {
+export function undo<T>(history: History<T>): History<T> {
   const previous = history.past[history.past.length - 1];
   if (!previous) return history;
   return { past: history.past.slice(0, -1), present: previous, future: [history.present, ...history.future] };
 }
 
-export function redo(history: History): History {
+export function redo<T>(history: History<T>): History<T> {
   const [next, ...future] = history.future;
   if (!next) return history;
   return { past: [...history.past, history.present], present: next, future };

package/src/editor/placeShapes.ts

@@ -0,0 +1,63 @@
+// A slide's place as the map editor sees it, and back: the place's
+// `geometry` (a FeatureCollection, a Feature or a bare geometry) as
+// features, and its `overlays` as image overlays keyed by media. Whatever
+// the editor doesn't edit -- an overlay's date, fields this version
+// doesn't know, a FeatureCollection's own members -- is carried over from
+// the place as it was.
+import type { Feature, FeatureCollection, Geometry } from "geojson";
+import type { Overlay, Place, StoryDate } from "../types";
+import type { MapEditorOverlay, MapEditorResult } from "./MapEditor";
+import { patchPlace } from "./model";
+
+/** The features in a place's `geometry`, whichever form it takes. */
+export function placeFeatures(place: Place | undefined): Feature[] {
+  const geometry = place?.geometry as { type: string; features?: unknown[] } | undefined;
+  if (!geometry) return [];
+  if (geometry.type === "FeatureCollection") {
+    return ((geometry.features ?? []) as Feature[]).filter((f) => f && f.geometry);
+  }
+  if (geometry.type === "Feature") return (geometry as unknown as Feature).geometry ? [geometry as unknown as Feature] : [];
+  return [{ type: "Feature", properties: {}, geometry: geometry as unknown as Geometry }];
+}
+
+/** What the map editor opens with for a place. */
+export function placeToEditor(place: Place | undefined): { features: Feature[]; overlays: MapEditorOverlay[] } {
+  return {
+    features: placeFeatures(place),
+    overlays: (place?.overlays ?? []).map((o) => ({
+      image: o.media, corners: o.corners,
+      ...(o.opacity !== undefined ? { opacity: o.opacity } : {}),
+      ...(o.order !== undefined ? { order: o.order } : {}),
+    })),
+  };
+}
+
+/** The place with what the map editor ended with. `dates` holds each
+ * overlay's date by media key, as edited beside the editor. */
+export function editorToPlace(
+  place: Place | undefined, result: MapEditorResult, dates: Map<string, StoryDate | undefined>,
+): Place | undefined {
+  const before = place?.geometry as (FeatureCollection & Record<string, unknown>) | undefined;
+  const geometry = result.features.length === 0
+    ? undefined
+    // A FeatureCollection keeps its own other members; anything else
+    // becomes one.
+    : { ...(before?.type === "FeatureCollection" ? before : {}), type: "FeatureCollection", features: result.features };
+  const previous = new Map((place?.overlays ?? []).map((o) => [o.media, o]));
+  const overlays = result.overlays.map((o): Overlay => {
+    const { opacity: _o, order: _r, date: _d, ...kept } = previous.get(o.image) ?? ({} as Partial<Overlay>);
+    const date = dates.has(o.image) ? dates.get(o.image) : previous.get(o.image)?.date;
+    return {
+      ...kept,
+      media: o.image,
+      corners: o.corners,
+      ...(o.opacity !== undefined && o.opacity !== 1 ? { opacity: o.opacity } : {}),
+      ...(o.order !== undefined ? { order: Math.round(o.order) } : {}),
+      ...(date ? { date } : {}),
+    };
+  });
+  return patchPlace(place, {
+    geometry: geometry as Place["geometry"],
+    overlays: overlays.length ? overlays : undefined,
+  });
+}

package/src/editor/strings.ts

@@ -47,6 +47,19 @@ export interface EditorStrings {
   placeShape: string;
   placeOverlays: (count: number) => string;
   placeKeeps: (what: string) => string;
+  editMap: string;
+  editMapHint: string;
+  mapDialogTitle: (placeName: string | undefined) => string;
+  mapHelp: string;
+  importShapes: string;
+  importShapesHint: string;
+  importFailed: (fileName: string) => string;
+  importNothing: (fileName: string) => string;
+  overlayAlready: string;
+  overlayDate: string;
+  overlayDateHint: string;
+  cancel: string;
+  done: string;
   photos: string;
   photosHint: string;
   addPhoto: string;
@@ -113,7 +126,20 @@ export const EDITOR_ENGLISH: EditorStrings = {
   placeMapHint: "Click the map to put the pin there, or drag the pin.",
   placeShape: "a shape",
   placeOverlays: (count) => (count === 1 ? "a map overlay" : `${count} map overlays`),
-  placeKeeps: (what) => `This place also has ${what}, kept as they are.`,
+  placeKeeps: (what) => `This place also has ${what}.`,
+  editMap: "Edit map",
+  editMapHint: "Shapes under the pin (a parish, a route) and scans of old maps laid over it.",
+  mapDialogTitle: (placeName) => (placeName ? `Map: ${placeName}` : "Map"),
+  mapHelp: "How to use this editor",
+  importShapes: "Import shapes",
+  importShapesHint: "Adds the points, lines and areas in a KML, GPX or GeoJSON file to this map.",
+  importFailed: (fileName) => `Couldn't read ${fileName} as a KML, GPX or GeoJSON file.`,
+  importNothing: (fileName) => `${fileName} has no shapes in it.`,
+  overlayAlready: "That image is already on this map.",
+  overlayDate: "Years it shows",
+  overlayDateHint: "e.g. 1850, or 1850 to 1880. With historical maps, it's hidden on slides outside them.",
+  cancel: "Cancel",
+  done: "Done",
   photos: "Photos",
   photosHint: "Add, drop or paste a photo. It's resized for the screen, and hidden details like camera and location are left out.",
   addPhoto: "Add photo",