@gramps-connect/story 0.5.0 → 0.6.1

package/dist/types/editor/model.d.ts

@@ -79,18 +79,19 @@ export declare function pruneMedia(doc: StoryDoc, files: Map<string, Uint8Array>
 /** "Josef Meyer" -> "Josef Meyer.story.zip", minus characters some file
  * systems refuse. */
 export declare function storyFileName(title: string): string;
-/** 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;
 }
 export declare const COALESCE_MS = 1500;
-export declare function startHistory(doc: StoryDoc): History;
-export declare function record(history: History, next: StoryDoc, key?: string, now?: number): History;
-export declare function undo(history: History): History;
-export declare function redo(history: History): History;
+export declare function startHistory<T = StoryDoc>(doc: T): History<T>;
+export declare function record<T>(history: History<T>, next: T, key?: string, now?: number): History<T>;
+export declare function undo<T>(history: History<T>): History<T>;
+export declare function redo<T>(history: History<T>): History<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramps-connect/story",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Read, write, validate and present .story.zip files: portable, versioned family-history stories.",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/editor/MapEditor.tsx

@@ -54,6 +54,9 @@ const COLOR_SWATCHES = [
   "#2a78d6", "#d64545", "#3aa657", "#e0a325", "#8654c9", "#2aa7a0", "#e0678a", "#555555",
 ];
 
+/** A region's fill with no opacity of its own, as the maps and the story
+ * player draw it; also a new region's starting opacity. */
+const UNSET_OPACITY = 0.25;
 const EMPTY_LABEL_PREVIEW: FeatureCollection = { type: "FeatureCollection", features: [] };
 
 /** An image overlay as the host gives and gets it: `image` is the host's
@@ -356,9 +359,14 @@ export const MapEditor = forwardRef<MapEditorHandle, MapEditorProps>(function Ma
   // both a newly-finished region's own opacity and, while one is selected,
   // what changing this edits in place. 0.25 matches Gramps Connect's map
   // view default, so an untouched region renders the same there.
-  const [opacity, setOpacity] = useState(0.25);
+  const [opacity, setOpacity] = useState(UNSET_OPACITY);
   const opacityRef = useRef(opacity);
   opacityRef.current = opacity;
+  // How a loaded shape with no color of its own is drawn: as the maps draw
+  // it (their mark color), not in whatever the toolbar's color is now --
+  // and it's saved still without one.
+  const unsetColorRef = useRef(defaultColor ?? defaultColors(dark).mark);
+  unsetColorRef.current = defaultColor ?? defaultColors(dark).mark;
   // The selected point/region's own `name` (a point's label text, or a
   // region's purely-descriptive name), mirroring `color`'s own pattern --
   // NOT derived from getSnapshot() on every render, since
@@ -483,12 +491,12 @@ export const MapEditor = forwardRef<MapEditorHandle, MapEditorProps>(function Ma
     // and terra-draw calls a styling function fresh on every render, not
     // just at construction time.
     const readColor = (feature: GeoJSONStoreFeatures): HexColor =>
-      (feature.properties.color as HexColor | undefined) ?? (colorRef.current as HexColor);
+      (feature.properties.color as HexColor | undefined) ?? (unsetColorRef.current as HexColor);
     // Same pattern as readColor, for a region's own `opacity` property --
     // only polygon/rectangle modes take a `fillOpacity` style at all (point/
     // line have nothing to fill).
     const readOpacity = (feature: GeoJSONStoreFeatures): number =>
-      (feature.properties.opacity as number | undefined) ?? opacityRef.current;
+      (feature.properties.opacity as number | undefined) ?? UNSET_OPACITY;
 
     const draw = new TerraDraw({
       adapter: new TerraDrawMapLibreGLAdapter({ map }),
@@ -585,8 +593,9 @@ export const MapEditor = forwardRef<MapEditorHandle, MapEditorProps>(function Ma
       const feature = id ? draw.getSnapshot().find((f) => String(f.id) === id) : undefined;
       setLabelText((feature?.properties?.name as string | undefined) ?? "");
       if (feature) {
-        setColor((feature.properties?.color as string | undefined) ?? colorRef.current);
-        setOpacity((feature.properties?.opacity as number | undefined) ?? 0.25);
+        // An uncolored shape shows the color it's drawn in.
+        setColor((feature.properties?.color as string | undefined) ?? unsetColorRef.current);
+        setOpacity((feature.properties?.opacity as number | undefined) ?? UNSET_OPACITY);
         // Mirrors the overlay mousedown handler's own deselectFeature call
         // -- an image overlay and a drawn shape are mutually exclusive
         // selections, so a shape becoming selected clears any overlay
@@ -1227,14 +1236,17 @@ export const MapEditor = forwardRef<MapEditorHandle, MapEditorProps>(function Ma
           const name = (f.properties?.name as string | undefined)?.trim();
           // Opacity only for a region (Polygon) -- meaningless on a point/
           // line, which have nothing to fill (see readOpacity/opacityRef).
+          // Color and opacity only as the shape has them: a drawn shape got
+          // both when finished, and one loaded without them stays that way.
           const regionOpacity = f.geometry.type === "Polygon"
-            ? (f.properties?.opacity as number | undefined) ?? opacityRef.current
+            ? f.properties?.opacity as number | undefined
             : undefined;
+          const color = f.properties?.color as string | undefined;
           const sourceKey = f.properties?.sourceKey;
           return {
             ...(typeof sourceKey === "string" ? { sourceKey } : {}),
             geometry: f.geometry as EditableGeometry,
-            color: (f.properties?.color as string | undefined) ?? colorRef.current,
+            ...(color !== undefined ? { color } : {}),
             ...(name ? { name } : {}),
             ...(regionOpacity !== undefined ? { opacity: regionOpacity } : {}),
           };

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 };