@reekon-tools/boldr-cad 0.1.0 → 1.1.0

package/src/react/View3DHost.ts

@@ -0,0 +1,367 @@
+import type { WebGLRenderer } from 'three';
+import { ed } from '../app/state';
+import { interacting, toast } from '../editor/ports';
+import { pick3d, v3, type Command3, type Pick3 } from '../editor/view3dState';
+import { settings } from '../model/settings';
+import { planSK, store } from '../model/store';
+import { buildScene, CUT_H, loweredBy, type Cut3, type Scene3 } from '../view3d/build';
+import { between, eye, fit, home, orbitBy, panBy, topDown, zoomAt, zoomLimits, type Orbit, type Window3 } from '../view3d/camera';
+import type { V3 } from '../view3d/mesh';
+import { Viewer3D, type Theme3 } from '../view3d/viewer';
+import { reducedMotion } from './motion';
+import { PHONE_MAX } from './theme';
+import { topLayout } from './topRow';
+
+/*
+  What the 3D view does, whichever screen it's on (a browser's canvas, a device's GL view — see View3D.web.tsx and
+  View3D.native.tsx, which only make the renderer and pass the fingers on): the model made again when the plan
+  changes, the walls in front cut away as the camera turns, the camera moved by gestures and by the rail's views, and
+  a tap told to the editor. It draws only when something changed, at most once a frame.
+*/
+
+/** Looking down steeper than this, nothing's in the way: no walls are cut away. */
+const CUT_EL = 1.2;
+
+/** A plan with nothing to stand up yet: the camera frames a room-sized space. */
+const EMPTY: { min: V3; max: V3 } = { min: [-120, -120, 0], max: [120, 120, 96] };
+
+/** A second tap this soon after the first (ms), and this near it (points), is a double tap. */
+export const DOUBLE_MS = 320, DOUBLE_NEAR = 24;
+
+/** How long the rail's views and a double tap glide for (ms): long enough to see where the camera went. */
+const GLIDE_MS = 360;
+
+/**
+ * Cutaway models kept, by which walls they lower (all that tells one from another): turning back and forth finds them
+ * made. One that took longer than SLOW_MS to make waits while the camera moves, until it rests for REST_MS — a big
+ * plan on a phone's JavaScript thread would stall the turn each time another wall came in front.
+ */
+const CUT_KEEP = 6, SLOW_MS = 16, REST_MS = 150;
+
+const now = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now());
+
+/** The view showing now (for tests and the harness). */
+let active: View3DHost | null = null;
+
+export class View3DHost {
+  private readonly viewer: Viewer3D;
+  /** the model with every wall at full height (what the camera frames), and the one showing (cut away or not) */
+  private full: Scene3 | null = null;
+  private shown: Scene3 | null = null;
+  private modelKey = '';
+  private cutKey = '';
+  private cmdSeq: number;
+  private theme: Theme3;
+  private w = 1;
+  private h = 1;
+  private frame = 0;
+  private failed = false;
+  /** cutaway models made for this model, by what they lower (the most recently shown last) */
+  private readonly cuts = new Map<string, Scene3>();
+  /** how long the last model took to make (ms) */
+  private buildMs = 0;
+  /** a gesture is moving the camera; when it last moved */
+  private held = false;
+  private movedAt = 0;
+  private rest: ReturnType<typeof setTimeout> | undefined;
+  /** the camera gliding to a view */
+  private glide: { from: Orbit; to: Orbit; t0: number } | null = null;
+  /** frames still to draw, changed or not, since the GL view was made or resized (see settle) */
+  private settling = 0;
+  /** on screen (the tab showing): hidden, it's kept as it is but draws nothing (see setVisible); and frames drawn */
+  private visible = true;
+  private frames = 0;
+  private lastTap: { t: number; x: number; y: number } | null = null;
+
+  /** `present`: shows what was drawn, where the GL view needs telling (expo-gl's endFrameEXP). */
+  constructor(renderer: WebGLRenderer, theme: Theme3, private readonly present: () => void = () => {}) {
+    this.theme = theme;
+    this.viewer = new Viewer3D(renderer, theme);
+    // (a camera move asked for before this view opened isn't for it)
+    this.cmdSeq = v3.cmd.seq;
+    active = this;
+  }
+
+  private get aspect(): number {
+    return this.w / this.h;
+  }
+
+  /**
+   * Where the model is framed: clear of the chrome over the view — the top bar (and the tabs under it, where they don't
+   * fit beside it: a phone, an upright tablet) and the bar along the bottom. (The 3D tab has no rail.)
+   */
+  private win(): Window3 {
+    const top = topLayout(this.w, this.h, this.w < PHONE_MAX).below ? 150 : 84, bottom = 96, left = 20, right = 20;
+    if (this.w < left + right + 120 || this.h < top + bottom + 120) return { x0: -1, x1: 1, y0: -1, y1: 1 };
+    return { x0: -1 + (2 * left) / this.w, x1: 1 - (2 * right) / this.w, y0: -1 + (2 * bottom) / this.h, y1: 1 - (2 * top) / this.h };
+  }
+
+  /** What the camera frames: everything at full height. */
+  private box(): { min: V3; max: V3 } {
+    return this.full && this.full.parts.length ? this.full : EMPTY;
+  }
+
+  /** Drawing went wrong: said once (a 3D view that stays empty says why), and logged in full. */
+  private fail(e: unknown): void {
+    console.error('3D view:', e);
+    if (this.failed) return;
+    this.failed = true;
+    toast('The 3D view couldn’t be drawn (' + (e instanceof Error ? e.message : String(e)) + '). Leave the tab and open it again to retry.', { warn: true });
+  }
+
+  /** The editor changed, or the theme: the model, a camera move asked for, what's tapped. */
+  sync(theme: Theme3): void {
+    try { this.syncNow(theme); } catch (e) { this.fail(e); }
+  }
+
+  private syncNow(theme: Theme3): void {
+    if (theme !== this.theme) { this.theme = theme; this.viewer.setTheme(theme); }
+    const key = [store.curPageId, ed.editSeq, settings.wallH].join('|');
+    if (key !== this.modelKey) {
+      this.modelKey = key;
+      const t = now();
+      this.full = buildScene(planSK());
+      this.buildMs = now() - t;
+      this.cuts.clear();
+      this.cutKey = '#'; // (made again for the new model, cut away or not)
+      if (!v3.orbit || v3.orbitPage !== store.curPageId) {
+        this.glide = null;
+        v3.orbit = this.view('reset');
+        v3.orbitPage = store.curPageId;
+        v3.framed = 'reset';
+      }
+    }
+    if (v3.cmd.seq !== this.cmdSeq) {
+      this.cmdSeq = v3.cmd.seq;
+      this.glideTo(v3.cmd.what);
+    }
+    this.viewer.setPicked(v3.pick ? v3.pick.kind + ':' + v3.pick.id : null);
+    this.requestDraw();
+  }
+
+  /** Where view `what` puts the camera, on the screen as it is now ('fit': everything, from where it looks now). */
+  private view(what: Command3): Orbit {
+    const { min, max } = this.box(), a = this.aspect, w = this.win();
+    return what === 'top' ? topDown(min, max, a, w) : what === 'reset' || !v3.orbit ? home(min, max, a, w) : fit(v3.orbit, min, max, a, w);
+  }
+
+  /** The camera to view `what`: gliding there from where it is (straight there when motion is reduced). */
+  private glideTo(what: Command3): void {
+    const from = v3.orbit, to = this.view(what);
+    v3.framed = what;
+    this.glide = from && !reducedMotion() ? { from, to, t0: now() } : null;
+    if (!this.glide) v3.orbit = to;
+    this.requestDraw();
+  }
+
+  /** The camera was moved by hand: a glide stops where it got to, and it's no longer at a view. */
+  private moved(): void {
+    this.glide = null;
+    v3.framed = null;
+    this.movedAt = now();
+  }
+
+  /** Where the walls in front are cut away from, as the camera is now (null: none are). */
+  private cut(): Cut3 | null {
+    const o = v3.orbit;
+    if (!v3.cutaway || !o || !this.full || !this.full.parts.length || o.el > CUT_EL) return null;
+    const { min, max } = this.full, c = { x: (min[0] + max[0]) / 2, y: (min[1] + max[1]) / 2 };
+    const e = eye(o), dx = e[0] - c.x, dy = e[1] - c.y, L = Math.hypot(dx, dy);
+    return L < 1e-6 ? null : { c, d: { x: dx / L, y: dy / L }, h: CUT_H };
+  }
+
+  /**
+   * The model to show from here: another only when what's cut away changes — one made before if it's kept, or made
+   * now (or, if they're slow to make, once the camera rests).
+   */
+  private showNow(): void {
+    const cut = this.cut(), key = cut ? loweredBy(planSK(), cut).join(',') : '';
+    if (key === this.cutKey && this.shown) return;
+    let next = key ? this.cuts.get(key) : this.full;
+    if (next) {
+      // (the most recently shown last: the first is the one to let go)
+      if (key) { this.cuts.delete(key); this.cuts.set(key, next); }
+    } else {
+      const t = now();
+      if (this.shown && this.buildMs > SLOW_MS && (this.held || this.glide) && t - this.movedAt < REST_MS) {
+        clearTimeout(this.rest);
+        this.rest = setTimeout(() => this.requestDraw(), REST_MS - (t - this.movedAt) + 5);
+        return;
+      }
+      next = buildScene(planSK(), { cut });
+      this.buildMs = now() - t;
+      this.cuts.set(key, next);
+      if (this.cuts.size > CUT_KEEP) this.cuts.delete(this.cuts.keys().next().value!);
+    }
+    this.cutKey = key;
+    this.shown = next;
+    if (next) this.viewer.setModel(next);
+  }
+
+  private requestDraw(): void {
+    if (this.frame || !this.visible) return;
+    this.frame = requestAnimationFrame(() => { this.frame = 0; this.draw(); });
+  }
+
+  private draw(): void {
+    if (!this.full || !v3.orbit) return;
+    try {
+      const g = this.glide;
+      if (g) {
+        const t = (now() - g.t0) / GLIDE_MS;
+        v3.orbit = between(g.from, g.to, t);
+        this.movedAt = now();
+        if (t >= 1) this.glide = null;
+        else this.requestDraw();
+      }
+      this.showNow();
+      this.viewer.setOrbit(v3.orbit);
+      this.viewer.render();
+      this.present();
+      this.frames++;
+      if (this.settling > 0) { this.settling--; this.requestDraw(); }
+    } catch (e) { this.fail(e); }
+  }
+
+  /** The view's size on the screen, in points. A camera still at a view is framed again for the new shape. */
+  resize(w: number, h: number): void {
+    const was = { w: this.w, h: this.h };
+    this.w = Math.max(1, w);
+    this.h = Math.max(1, h);
+    this.viewer.setSize(this.w, this.h);
+    if (v3.framed && v3.orbit && this.full && (Math.abs(was.w - this.w) > 0.5 || Math.abs(was.h - this.h) > 0.5)) {
+      const to = this.view(v3.framed);
+      if (this.glide) this.glide.to = to;
+      else v3.orbit = to;
+    }
+    this.requestDraw();
+  }
+
+  /**
+   * Draw the next few frames too, whether or not anything changes: a GL view just made or resized can let its first
+   * frames go while it makes its buffers (expo-gl), and this view draws only when something changes.
+   */
+  settle(frames = 4): void {
+    this.settling = Math.max(this.settling, frames);
+    this.requestDraw();
+  }
+
+  /**
+   * The tab is showing, or not. Left, the view is kept as it is — its GL context, its compiled shaders, its model — so
+   * coming back draws at once, where making them all again was a pause each time the tab opened; meanwhile it draws
+   * nothing, and the tests and harness see no 3D view.
+   */
+  setVisible(on: boolean): void {
+    if (on === this.visible) return;
+    this.visible = on;
+    if (on) { active = this; this.requestDraw(); } else {
+      if (active === this) active = null;
+      if (this.frame) cancelAnimationFrame(this.frame);
+      this.frame = 0;
+    }
+  }
+
+  /** Draw again (the GL context was lost and is back: what was on the GPU went with it, and goes up again as it draws). */
+  redraw(): void {
+    this.requestDraw();
+  }
+
+  /** A drag (screen points): the model turns with it. */
+  orbit(dx: number, dy: number): void {
+    if (!v3.orbit) return;
+    this.moved();
+    v3.orbit = orbitBy(v3.orbit, dx, dy, this.h);
+    this.requestDraw();
+  }
+
+  /** A two-finger (or right-button) drag: the model slides with it. */
+  pan(dx: number, dy: number): void {
+    if (!v3.orbit) return;
+    this.moved();
+    v3.orbit = panBy(v3.orbit, dx, dy, this.h);
+    this.requestDraw();
+  }
+
+  /** Closer by `f` (under 1: in) toward screen point x, y. */
+  zoom(f: number, x: number, y: number): void {
+    if (!v3.orbit || !isFinite(f) || f <= 0) return;
+    this.moved();
+    const { min, max } = this.box(), [lo, hi] = zoomLimits(min, max);
+    v3.orbit = zoomAt(v3.orbit, f, (x / this.w) * 2 - 1, 1 - (y / this.h) * 2, this.aspect, lo, hi);
+    this.requestDraw();
+  }
+
+  /**
+   * A tap (screen points) — on either screen: what it landed on is picked at once (its sizes go in the bar; empty space
+   * lets go), and a second soon after and near it frames everything. Not waiting to see whether a second comes: a
+   * device's double-tap gesture held every single tap back half a second.
+   */
+  tapAt(x: number, y: number): void {
+    const t = now(), l = this.lastTap;
+    if (l && t - l.t < DOUBLE_MS && Math.hypot(x - l.x, y - l.y) < DOUBLE_NEAR) {
+      this.lastTap = null;
+      this.doubleTap();
+      return;
+    }
+    this.lastTap = { t, x, y };
+    this.tap(x, y);
+  }
+
+  /** What a tap at x, y landed on is picked (its sizes go in the bar); empty space lets go. */
+  private tap(x: number, y: number): void {
+    const hit = this.viewer.pick(x, y);
+    let p: Pick3 | null = hit ? { kind: hit.kind, id: hit.id } : null;
+    if (p && hit && p.kind === 'wall' && Math.abs(hit.n[2]) < 0.5) {
+      // (a wall's side: which face of it, as the wall view takes it)
+      const sk = planSK(), l = sk.lines[p.id], A = l && sk.points[l.a], B = l && sk.points[l.b];
+      if (A && B) p = { ...p, side: hit.n[0] * -(B.y - A.y) + hit.n[1] * (B.x - A.x) >= 0 ? 1 : -1 };
+    }
+    pick3d(p);
+  }
+
+  /** A double tap: everything in view again, from where it's looked at. */
+  private doubleTap(): void {
+    if (v3.orbit) this.glideTo('fit');
+  }
+
+  /**
+   * A gesture started moving the camera, or ended: on a phone the chrome steps aside meanwhile, and a cutaway put off
+   * while it moved is made as it ends.
+   */
+  moving(on: boolean): void {
+    this.held = on;
+    interacting(on);
+    if (!on) this.requestDraw();
+  }
+
+  dispose(): void {
+    if (this.frame) cancelAnimationFrame(this.frame);
+    this.frame = 0;
+    clearTimeout(this.rest);
+    this.viewer.dispose();
+    if (active === this) active = null;
+  }
+
+  /** For tests: what's showing, and where plan points land on the screen. */
+  debug() {
+    return {
+      parts: this.shown?.parts.map(p => p.kind + ':' + p.id) ?? [],
+      lowered: this.shown?.lowered ?? [],
+      orbit: v3.orbit,
+      size: [this.w, this.h],
+      /** the last frame's draws and triangles */
+      drawn: this.viewer.stats(),
+      near: this.viewer.camera.near,
+      far: this.viewer.camera.far,
+      /** cutaway models kept; whether the camera is gliding to a view; frames drawn since it was made */
+      cutsKept: this.cuts.size,
+      gliding: !!this.glide,
+      frames: this.frames,
+      project: (x: number, y: number, z: number) => this.viewer.project(x, y, z),
+      pickAt: (x: number, y: number) => this.viewer.pick(x, y),
+    };
+  }
+}
+
+/** The 3D view showing now, for tests and the harness (null when the tab isn't). */
+export const view3dDebug = () => active?.debug() ?? null;

package/src/react/corners.ts

@@ -0,0 +1,52 @@
+import { Platform, StyleSheet } from 'react-native';
+import { CORNER_SMOOTHING } from '../render/squircle';
+
+/*
+  Every rounded corner in the editor's chrome smoothed as Figma's 60% ("iOS") — the panels, cards, fields, keys and
+  menus. Pills and circles are left as they are: a corner at half the shorter side has no straight side to ease into
+  (Figma leaves them round too).
+
+  On a device that's iOS's own continuous corner (`borderCurve`), which is what Figma's "iOS" preset copies; Android
+  has no such corner and keeps round ones. In a browser that draws CSS `corner-shape`, a superellipse stands in for it:
+  Figma's corner runs (1 + smoothing)·r along each side but keeps its middle on the circle of radius r, so the corner
+  is drawn that much wider, with the exponent that puts its middle back where the round corner's was. A browser
+  without `corner-shape` keeps round corners as they were (and its radii untouched).
+*/
+
+const RADII = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'] as const;
+
+/** The superellipse exponent (as CSS's log₂ form) whose middle sits where a round corner's does, `1 + smoothing` wider. */
+function superellipseK(smoothing: number): number {
+  // a round corner's middle is (1 − 1/√2)·r in from the corner on each side; a superellipse |x|ⁿ + |y|ⁿ = 1 drawn
+  // (1 + s)·r wide has its middle at (1 + s)·r·(1 − 2^(−1/n)) — equal them and solve for n, then K = log₂ n
+  const t = 1 - (1 - Math.SQRT1_2) / (1 + smoothing);
+  const n = -1 / Math.log2(t);
+  return Math.log2(n);
+}
+
+const webCorners = Platform.OS === 'web' && typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('corner-shape', 'superellipse(2)');
+const CORNER_SHAPE = 'superellipse(' + superellipseK(CORNER_SMOOTHING).toFixed(2) + ')';
+
+type Style = Record<string, unknown>;
+
+/** One style with its corners smoothed (unchanged when it has no rounded corner, or is a pill or a circle). */
+export function smoothCorners<T extends Style>(st: T): T {
+  const radii = RADII.filter(k => typeof st[k] === 'number' && (st[k] as number) > 0);
+  if (!radii.length) return st;
+  const dims = [st.width, st.height, st.minHeight].filter((v): v is number => typeof v === 'number');
+  const half = dims.length ? Math.min(...dims) / 2 : Infinity;
+  // a pill (an "as round as it goes" 100, or half its known size) or a circle
+  if (radii.some(k => (st[k] as number) >= 100 || (st[k] as number) >= half - 0.5)) return st;
+  if (Platform.OS === 'ios') return { ...st, borderCurve: 'continuous' };
+  if (!webCorners) return st;
+  const out: Style = { ...st, cornerShape: CORNER_SHAPE };
+  for (const k of radii) out[k] = Math.min((st[k] as number) * (1 + CORNER_SMOOTHING), half);
+  return out as T;
+}
+
+/** StyleSheet.create, every style's corners smoothed (smoothCorners). */
+export function createSheet<T extends StyleSheet.NamedStyles<T>>(styles: T & StyleSheet.NamedStyles<unknown>): T {
+  const out = {} as Record<string, unknown>;
+  for (const k of Object.keys(styles)) out[k] = smoothCorners((styles as Record<string, Style>)[k]);
+  return StyleSheet.create(out as T);
+}

package/src/react/easing.ts

@@ -0,0 +1,14 @@
+import { Easing, Platform } from 'react-native';
+
+/** The chrome's curve and pace (see motion.tsx): off at once, settling softly at the end, over 150 ms. */
+export const EASE = Easing.bezier(0.2, 0, 0, 1);
+export const DURATION = 150;
+
+/**
+ * Animations of opacity, transforms and colours run on the native driver on a device: the UI thread plays them from
+ * start to end, so they stay smooth while the JavaScript thread works (a browser has no such driver).
+ */
+export const NATIVE = Platform.OS !== 'web';
+
+/** A box TweenView eases to (see Tween.tsx). */
+export type TweenTo = { left?: number; top?: number; width?: number; height?: number };

package/src/react/host.ts

@@ -18,10 +18,15 @@ export function setLaserConnected(on: boolean): void {
   notify();
 }
 
-/** A reading in inches. False when no drawing is open to take it. */
-export function laserReading(inches: number): boolean {
+/**
+ * A reading in inches. False when no drawing is open to take it. `capture`: the host's own record of the reading (its
+ * device, its number, its flags — anything JSON), kept with the dimension it sets: handed back when that's saved to
+ * the group (CadLinks.saveMeasurement), or with the new value for one linked to a measurement of the job
+ * (CadLinks.update). A value typed over it isn't the reading's.
+ */
+export function laserReading(inches: number, capture?: unknown): boolean {
   if (!editorHost.open || !store.project || !Number.isFinite(inches) || inches <= 0) return false;
-  applyReading(inches);
+  applyReading(inches, capture);
   notify();
   return true;
 }

package/src/react/hostKeypad.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import type { MeasurementKind } from '../editor/links';
+import type { LinkTarget } from '../model/types';
+
+/*
+  The host's own keypad, used in place of the editor's: on a phone BOLDR asks for lengths and angles with the
+  measurement keypads people already know from the rest of the app. The editor hands over what it's asking for — what
+  the value is, the extra choices beside the keys (a wall's edge, a direction) — and the host hands back the value, or
+  that it was closed without one. Tablets and browsers keep the editor's keypad (react/KeypadSheet.tsx), whose page of
+  the job's measurements the host can still draw itself (MeasurementList, below).
+*/
+
+/** An extra choice beside the keys: a wall's edge, a direction. */
+export interface HostKeypadExtra { label: string; ariaLabel?: string; on?: boolean; danger?: boolean; press(): void }
+
+/** What the editor is asking the host's keypad for. */
+export interface HostKeypadRequest {
+  title: string;
+  sub?: string;
+  /** a length (handed back in inches) or an angle (in degrees) */
+  kind: 'length' | 'angle';
+  /** the value it has now, written as the editor shows it */
+  current?: string;
+  /** the extra choices, read again after each press (their state can change) */
+  extras(): HostKeypadExtra[];
+  /** the value entered: inches for a length, degrees for an angle */
+  apply(value: number): void;
+  /**
+   * A line's length or a dimension's angle, with a host that links (CadEditorProps.links): what the job's
+   * measurements are offered for — show them with the keys (a page swiped to, as BOLDR's keypads have it), those of
+   * this kind pickable and the rest greyed out. Absent: offer none.
+   */
+  measurementKind?: 'length' | 'angle';
+  /** The measurement picked from that list: the value takes it, linked to it, and the editor closes the keypad. */
+  pickMeasurement?(target: LinkTarget): void;
+  /** closed without a value */
+  cancel(): void;
+}
+
+/** Shown with a request; hidden with null — the editor closed it itself (an extra, a laser reading, another tool). */
+export type HostKeypad = (request: HostKeypadRequest | null) => void;
+
+/** The editor keypad's page of the job's measurements, as a host that draws it is given it (MeasurementList). */
+export interface MeasurementListPage {
+  /** What the field takes: a length or an angle. List the other kind greyed out. */
+  kind: MeasurementKind;
+  /** The measurement picked: the value takes it, linked to it, and the editor closes the keypad. */
+  pick(target: LinkTarget): void;
+  /** The page's size, which the list fills: the keypad's width, and the keys' height. */
+  width: number;
+  height: number;
+}
+
+/**
+ * The host's own list of the job's measurements, drawn on the editor keypad's page of them in place of the editor's
+ * grid (CadEditorProps.measurementList): BOLDR's tablets show the group headers and measurement tiles of its phones.
+ * It's rendered as a component of its own, from when the page is first shown and again when what it's given changes.
+ * Return the list's element, and keep what it fetches inside that.
+ */
+export type MeasurementList = (page: MeasurementListPage) => ReactNode;
+
+let host: HostKeypad | null = null;
+
+/** The keypad to use from now on (CadEditor: a phone's host's), or null for the editor's own. */
+export function setHostKeypad(fn: HostKeypad | null): void { host = fn; }
+export const hostKeypad = (): HostKeypad | null => host;