@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/CadEditor.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { StyleSheet, useColorScheme, useWindowDimensions, View } from 'react-native';
+import { useColorScheme, useWindowDimensions, View } from 'react-native';
 import { analyze } from '../app/edit';
 import { ed } from '../app/state';
 import { setPorts } from '../editor/ports';
@@ -12,33 +12,50 @@ import { setLengthFormatter } from '../units';
 import { CANVAS_THEMES, setCanvasTheme } from '../render/theme';
 import { requestDraw, setImageResolver } from '../render/view';
 import { registerTools } from '../tools';
-import { BottomBar, StatusPill } from './BottomBar';
+import { BottomBar, SpokenHint } from './BottomBar';
 import { ConflictSheet } from './ConflictSheet';
+import { ConfirmSheet } from './ConfirmSheet';
+import { confirmCancel, confirmOpen } from '../editor/confirm';
 import { Drawer } from './Drawer';
-import { ElevationSheet } from './ElevationSheet';
+import { Duck } from './Duck';
+import { elevOpen } from '../editor/elevation';
 import { LaserTray } from './LaserTray';
-import { Menu, NoteInput, Palette } from './Popovers';
+import { MarkupPanel } from './MarkupPanel';
+import { Menu, NoteInput } from './Popovers';
 import { KeypadSheet } from './KeypadSheet';
 import { PlanCanvas } from './PlanCanvas';
+import { View3D } from './View3D';
+import { Empty3D } from './Empty3D';
+import { is3d } from '../editor/view3dState';
 import { reactPorts, setFileSaver } from './ports';
 import { editorHost } from './host';
+import { checkChanges, startManualSave, stopManualSave, type CadSaveState } from './saving';
 import { PAGE_LOCK_ROOT, usePageLock } from './pageLock';
 import { setSkiaFonts } from '../skia/fonts';
 import type { SkiaFonts } from '../skia/SkiaDrawCtx';
 import { pickImage as pickImageInBrowser } from './files';
-import { placeUnderlay } from '../editor/project';
+import { placeUnderlay, restoreUnits } from '../editor/project';
+import { keypadSpec } from '../editor/keypad';
 import { Backdrop } from './Sheet';
-import { useEditorVersion, ui } from './store';
+import { useEditorKey, ui } from './store';
 import { Toast } from './Toast';
 import { ModeTabs, TopBar } from './TopBar';
+import { ToolTip } from './ToolTip';
 import { Rail } from './Rail';
+import { setHostKeypad, type HostKeypad, type MeasurementList } from './hostKeypad';
+import { setLinksHost, type CadLinks } from '../editor/links';
+import { ShapeMenu } from './ShapeMenu';
 import { PHONE_MAX } from './theme';
+import { createSheet } from './corners';
 
 export interface CadEditorProps {
   /** Back to the host (otherwise the back button opens the project's pages) */
   onBack?: () => void;
-  /** The host's own buttons in the top bar (e.g. Bluetooth status) */
-  headerRight?: ReactNode;
+  /**
+   * The host's own buttons in the top bar (e.g. Bluetooth status). As a function it's given the size of the bar's
+   * round buttons (42 pt on a phone, 46 otherwise), to draw its own the same size.
+   */
+  headerRight?: ReactNode | ((buttonSize: number) => ReactNode);
   /** How to pick a photo or plan to trace (a data URL and its size); in a browser a file picker is the default. */
   pickImage?: () => Promise<{ dataUrl: string; w: number; h: number } | null>;
   /** Canvas colors (the chrome is dark either way). Without it, the person's Theme setting decides: Auto follows the system. */
@@ -53,33 +70,78 @@ export interface CadEditorProps {
   readOnly?: boolean;
   /** On a device: the typefaces to draw text on the plan with, by weight (default: the device's own sans-serif). */
   fonts?: SkiaFonts;
+  /**
+   * How to pick a project file (.boldr.json) to open from the ⋯ menu — its text, null if none was picked. On a device
+   * the host passes its own (a document picker); in a browser it's a file picker.
+   */
+  pickTextFile?: () => Promise<string | null>;
   /** How exported files (PDF, DXF, project) reach the person, e.g. a share sheet on a device; in a browser they download. */
   saveFile?: (name: string, mime: string, data: string) => void;
+  /**
+   * Save only when the person presses Save (BOLDR's annotation behaviour), instead of as they draw. Closing the editor
+   * then drops unsaved edits: warn with onSaveState, or save on the way out with saveCadDrawing. Needs `sync`.
+   */
+  manualSave?: boolean;
+  /** With manualSave: 'saved', 'dirty' (unsaved edits), 'saving' or 'error' (the last save failed), as it changes. */
+  onSaveState?: (state: CadSaveState) => void;
+  /**
+   * On a phone, the host's own keypad for lengths and angles (BOLDR's measurement keypads) instead of the editor's:
+   * called with what's asked for when a keypad opens, and with null when the editor closes it (see hostKeypad.ts).
+   * Tablets and browsers keep the editor's keypad.
+   */
+  keypad?: HostKeypad;
+  /**
+   * The job's files and measurements, to link on the drawing (Annotate's +) and to drive lines with (Draft): how to
+   * pick them, say what they are now, open them, and change or save measurements (see editor/links.ts). Without it
+   * there's nothing to link. Pass the same object for as long as the drawing is open.
+   */
+  links?: CadLinks;
+  /**
+   * The job's measurements on the editor keypad's page of them (a line's length, a dimension's angle), drawn by the
+   * host in place of the editor's grid, so they look as they do everywhere else in it (BOLDR: its group headers and
+   * measurement tiles). Rendered from when the page is first shown, and again when what it's given changes: its kind,
+   * its size, and what to call with the measurement picked (see hostKeypad.ts). Return the list's element
+   * (`page => <JobList {...page} />`) and keep what it fetches inside it.
+   *
+   * The page is there when `links` offers the job's measurements (`measurements` or `pickMeasurement`; the editor
+   * calls neither for this page when it's the host's). A touch screen always swipes to it. A desktop shows it from
+   * Select from list only when the host has no `pickMeasurement`, which is its own drawer instead. A phone with a
+   * `keypad` of the host's own doesn't use it: that keypad has its own list.
+   */
+  measurementList?: MeasurementList;
 }
 
 /**
  * The layout editor as a React Native component: the plan canvas with its chrome. One per screen: mounting starts a
  * new editing session (the drawing, tools and selection start fresh), unmounting saves.
  */
-export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser, theme: hostTheme, sync, units, devTools = true, readOnly = false, fonts, saveFile }: CadEditorProps) {
+export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser, pickTextFile, theme: hostTheme, sync, units, devTools = true, readOnly = false, fonts, saveFile, manualSave, onSaveState, keypad, links, measurementList }: CadEditorProps) {
   const system = useColorScheme();
   // start the session before the canvas mounts (children's effects run before this component's)
   useState(() => {
     setPorts(reactPorts);
     resetSession();
-    setPersistence(sync ? (readOnly ? { load: sync.persistence.load, save: () => true } : sync.persistence) : null);
+    const manual = !!(manualSave && sync && !readOnly);
+    // read-only saves nothing; manual saving only notes the edits until Save (see saving.ts)
+    setPersistence(sync
+      ? (readOnly ? { load: sync.persistence.load, save: () => true }
+        : manual ? { load: sync.persistence.load, save: () => { checkChanges(); return true; } }
+        : sync.persistence)
+      : null);
     if (units) {
       settings.unit = units.metric ? 'mm' : 'ftin';
       if (units.denom) settings.denom = units.denom;
     }
-    setLengthFormatter(units ? units.format : null);
+    setLengthFormatter(units ? units.format : null, { unit: settings.unit, denom: settings.denom });
     setSkiaFonts(fonts ?? null);
     setFileSaver(saveFile ?? null);
     setImageResolver(sync?.imageUrl ?? null);
     registerTools();
     ed.readOnly = readOnly;
     load();
+    restoreUnits(); // the units the person picked last time, over the host's
     analyze();
+    if (manual) startManualSave(sync!, onSaveState ?? null);
     return null;
   });
   const closing = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
@@ -88,40 +150,81 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
     setPorts(reactPorts);
     editorHost.open = true;
     return () => {
-      saveNow();
-      if (sync && !readOnly && store.project) { const t = renderThumbnail(store.project.pages[0]); if (t) sync.saveThumbnail(t); }
+      // saving as they draw: the last edits and the preview go now. Saving manually: unsaved edits are dropped.
+      if (!manualSave) {
+        saveNow();
+        if (sync && !readOnly && store.project) { const t = renderThumbnail(store.project.pages[0]); if (t) sync.saveThumbnail(t); }
+      }
       // React's StrictMode unmounts and remounts at once: only let go of the drawing if it stays unmounted
-      closing.current = setTimeout(() => { editorHost.open = false; sync?.stop(); setPersistence(null); setLengthFormatter(null); setFileSaver(null); setSkiaFonts(null); setImageResolver(null); setPorts(null); }, 0);
+      closing.current = setTimeout(() => { editorHost.open = false; sync?.stop(); setPersistence(null); setLengthFormatter(null); setFileSaver(null); setSkiaFonts(null); setImageResolver(null); stopManualSave(); setPorts(null); }, 0);
     };
   }, []);
-  useEditorVersion();
+  // (only what this level decides: which sheets are open, the wall view, the theme — each part of the interface
+  // follows the editor itself, see useEditorKey)
+  useEditorKey(() => [ui.keypad, keypadSpec()?.modeless ?? '', !!ui.conflict, confirmOpen(), elevOpen(), is3d(), settings.theme].join('|'));
   usePageLock();
   const theme = hostTheme ?? (settings.theme === 'system' ? (system === 'dark' ? 'dark' : 'light') : settings.theme);
   // the canvases read their colors when they draw: set them before this render's children draw
   setCanvasTheme(theme);
   useEffect(() => { requestDraw(); }, [theme]);
   const { width } = useWindowDimensions(), phone = width < PHONE_MAX, wide = width >= 900;
-  const sheet = ui.keypad || !!ui.conflict;
+  // (asked about once the drawing's loaded: what it links to)
+  useEffect(() => {
+    setLinksHost(links ?? null);
+    return () => setLinksHost(null);
+  }, [links]);
+  // (a phone asks with the host's keypad, when it has one)
+  useEffect(() => {
+    setHostKeypad(phone && keypad ? keypad : null);
+    return () => setHostKeypad(null);
+  }, [phone, keypad]);
+  // (a modeless keypad leaves the drawing live: no backdrop. On a tablet or a computer the drawing stays in reach
+  // around a sheet too — it pans and zooms, and a tap on it (or the chrome over it) closes the sheet: see
+  // editor/gestures.ts sheetUp. A phone's sheet covers most of it: there a backdrop closes it.)
+  const sheet = (ui.keypad && !keypadSpec()?.modeless) || !!ui.conflict || confirmOpen(), threeD = is3d();
+  // the 3D view: made as its tab first opens and kept, hidden, while it's left — coming back, it's there at once (made
+  // again each time, its GL context, renderer and shaders were a pause every time). Let go after a while away: on a
+  // device it holds its GL buffers (a phone's screen, four times over for antialiasing).
+  const [kept3d, setKept3d] = useState(false);
+  useEffect(() => {
+    if (threeD) { setKept3d(true); return; }
+    if (!kept3d) return;
+    const t = setTimeout(() => setKept3d(false), KEEP_3D_MS);
+    return () => clearTimeout(t);
+  }, [threeD, kept3d]);
   return (
     <View nativeID={PAGE_LOCK_ROOT} style={[s.root, { backgroundColor: CANVAS_THEMES[theme].bg }]}>
       <PlanCanvas />
-      <TopBar onBack={onBack} headerRight={headerRight} phone={phone} readOnly={readOnly} />
-      {!readOnly && <ModeTabs phone={phone} />}
-      <StatusPill phone={phone} />
-      {!readOnly && <Rail phone={phone} onAddImage={() => { pickImage().then(img => { if (img) placeUnderlay(img.dataUrl, img.w, img.h); }); }} />}
-      {!readOnly && <BottomBar phone={phone} />}
-      <LaserTray phone={phone} />
+      {/* the 3D tab: over the plan, which stays as it was underneath */}
+      {(threeD || kept3d) && <View3D theme={theme} active={threeD} />}
+      {threeD && <Empty3D />}
+      {/* the floating chrome: on a phone it steps aside while a stroke, drag, pan or pinch is moving (Duck) */}
+      <Duck active={phone} held={sheet && !phone}>
+        <TopBar onBack={onBack} headerRight={headerRight} phone={phone} readOnly={readOnly} />
+        {!readOnly && !elevOpen() && <ModeTabs phone={phone} />}
+        {!readOnly && <ToolTip phone={phone} />}
+        <SpokenHint />
+        {/* (none in 3D: it's a view, its camera moved with the fingers) */}
+        {!readOnly && !threeD && <Rail phone={phone} onAddImage={() => { pickImage().then(img => { if (img) placeUnderlay(img.dataUrl, img.w, img.h); }); }} />}
+        {!readOnly && <BottomBar phone={phone} />}
+        {!threeD && <LaserTray phone={phone} />}
+        {!threeD && <MarkupPanel phone={phone} />}
+      </Duck>
+      {!readOnly && !elevOpen() && !threeD && <ShapeMenu />}
       <NoteInput />
-      <Palette />
-      <Menu themeChoice={!hostTheme} units={!units} devTools={devTools} />
-      <Drawer />
-      <ElevationSheet />
+      <Menu themeChoice={!hostTheme} accountUnits={!!units} devTools={devTools} pickText={pickTextFile} readOnly={readOnly} phone={phone} />
+      <Drawer phone={phone} />
       <Toast phone={phone} />
-      {sheet && <Backdrop wide={wide} onClose={() => (ui.keypad ? reactPorts.closeKeypad() : reactPorts.dismissConflict())} />}
-      {ui.keypad && <KeypadSheet wide={wide} />}
-      {ui.conflict && !ui.keypad && <ConflictSheet wide={wide} />}
+      {sheet && phone && <Backdrop wide={wide} onClose={() => (ui.keypad ? reactPorts.closeKeypad() : confirmOpen() ? confirmCancel() : reactPorts.dismissConflict())} />}
+      {/* (always there: each shows itself, and stays as it slides away) */}
+      <KeypadSheet wide={wide} open={ui.keypad} measurementList={measurementList} />
+      <ConflictSheet wide={wide} open={!!ui.conflict && !ui.keypad} />
+      <ConfirmSheet wide={wide} />
     </View>
   );
 }
 
-const s = StyleSheet.create({ root: { flex: 1, overflow: 'hidden' } });
+/** How long the 3D view is kept after its tab is left (ms). */
+const KEEP_3D_MS = 60_000;
+
+const s = createSheet({ root: { flex: 1, overflow: 'hidden' } });

package/src/react/ConfirmSheet.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+import { confirmChoose, confirmSeq, confirmSpec } from '../editor/confirm';
+import { Pill } from './Buttons';
+import { Sheet, useSheetMotion } from './Sheet';
+import { ui, useEditorKey } from './store';
+import { C, FONT } from './theme';
+import { createSheet } from './corners';
+
+/** A question before the editor does something past the drawing (editor/confirm.ts): its choices, as pills. */
+export function ConfirmSheet({ wide }: { wide: boolean }) {
+  useEditorKey(() => (confirmSpec() ? String(confirmSeq()) : ''));
+  // in and out as the other sheets come and go, still saying what it said as it goes
+  const now = confirmSpec(), last = useRef(now), { present, motion } = useSheetMotion(!!now, wide);
+  if (now) last.current = now;
+  // (taps on the backdrop just after it opens are the opening tap's ghost)
+  const seq = now ? confirmSeq() : 0;
+  useEffect(() => { if (seq) ui.sheetOpenedAt = Date.now(); }, [seq]);
+  const c = last.current;
+  if (!present || !c) return null;
+  return (
+    <Sheet wide={wide} label={c.title} testID={now ? 'confirm' : undefined} motion={motion} live={!!now}>
+      <Text style={s.title}>{c.title}</Text>
+      {c.msg ? <Text style={s.msg}>{c.msg}</Text> : null}
+      <View style={s.actions}>
+        {c.choices.map((ch, i) => (
+          <Pill key={i + ch.label} label={ch.label} kind={ch.kind ?? (i === 0 ? 'yellow' : 'grey')} testID={'confirm-' + i} onPress={() => confirmChoose(i)} />
+        ))}
+      </View>
+    </Sheet>
+  );
+}
+
+const s = createSheet({
+  title: { fontFamily: FONT, fontSize: 18, fontWeight: '600', color: '#fff', marginBottom: 6 },
+  msg: { fontFamily: FONT, fontSize: 14, lineHeight: 20, color: C.lg1, marginBottom: 12 },
+  actions: { flexDirection: 'row', gap: 10, marginTop: 6, flexWrap: 'wrap' },
+});

package/src/react/ConflictSheet.tsx

@@ -1,27 +1,34 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useRef } from 'react';
+import { Text, View } from 'react-native';
 import { conflictHover, conflictRemove } from '../editor/conflict';
 import { Pill } from './Buttons';
 import { reactPorts } from './ports';
-import { Sheet } from './Sheet';
-import { ui } from './store';
+import { Sheet, useSheetMotion } from './Sheet';
+import { editorVersion, ui, useEditorKey } from './store';
 import { C, FONT } from './theme';
+import { Tap } from './motion';
+import { createSheet } from './corners';
 
 /** What fights a new constraint: the culprits, each with Remove; hovering a row highlights it on the drawing. */
-export function ConflictSheet({ wide }: { wide: boolean }) {
-  const cf = ui.conflict;
-  if (!cf) return null;
+export function ConflictSheet({ wide, open }: { wide: boolean; open: boolean }) {
+  useEditorKey(() => (open ? String(editorVersion()) : ''));
+  // in from the side (a phone: up from the bottom) as the keypad comes, and out again still saying what it said
+  const now = open ? ui.conflict : null, last = useRef(now), { present, motion } = useSheetMotion(!!now, wide);
+  if (now) last.current = now;
+  const cf = last.current;
+  if (!present || !cf) return null;
   return (
-    <Sheet wide={wide} label="Constraint conflict" testID="cf">
+    <Sheet wide={wide} label="Constraint conflict" testID={now ? 'cf' : undefined} motion={motion} live={!!now}>
       <Text style={s.title}>{cf.spec.title}</Text>
       <Text style={s.msg}>{cf.spec.msg}</Text>
       {cf.rows.length === 0 && <Text style={s.msg}>Try a different value, or undo the last step.</Text>}
       {cf.rows.map(r => (
-        <Pressable key={r.id} onHoverIn={() => conflictHover(r.id)} onHoverOut={() => conflictHover(null)} style={s.item}>
+        <Tap feel="dim" key={r.id} onHoverIn={() => conflictHover(r.id)} onHoverOut={() => conflictHover(null)} style={s.item}>
           <Text style={s.itemText}>{r.label}</Text>
-          <Pressable accessibilityRole="button" accessibilityLabel={'Remove ' + r.label} onPress={() => conflictRemove(r.id)}>
+          <Tap accessibilityRole="button" accessibilityLabel={'Remove ' + r.label} onPress={() => conflictRemove(r.id)}>
             <Text style={s.remove}>Remove</Text>
-          </Pressable>
-        </Pressable>
+          </Tap>
+        </Tap>
       ))}
       <View style={s.actions}>
         <Pill label="Keep the drawing as is" onPress={() => reactPorts.dismissConflict()} />
@@ -30,7 +37,7 @@ export function ConflictSheet({ wide }: { wide: boolean }) {
   );
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
   title: { fontFamily: FONT, fontSize: 18, fontWeight: '600', color: '#fff', marginBottom: 6 },
   msg: { fontFamily: FONT, fontSize: 14, lineHeight: 20, color: C.lg1, marginBottom: 12 },
   item: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10, backgroundColor: C.g2, borderRadius: 10, paddingVertical: 10, paddingHorizontal: 12, marginBottom: 8 },