@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/skia/SkiaDrawCtx.ts

@@ -1,5 +1,5 @@
 import type {
-  Skia as SkiaApi, SkCanvas, SkColor, SkFont, SkImage, SkPaint, SkPathBuilder, SkTypeface,
+  Skia as SkiaApi, SkCanvas, SkColor, SkFont, SkImage, SkPaint, SkPath, SkPathBuilder, SkTypeface,
 } from '@shopify/react-native-skia/lib/typescript/src/skia/types';
 import type { DrawCtx } from '../render/ctx';
 
@@ -72,38 +72,77 @@ export function parseFont(font: string): { weight: number; size: number } {
   return { weight: w, size: Number(m[2]) };
 }
 
-interface FontPair { main: SkFont; fb: SkFont | null }
+interface FontPair { main: SkFont; fb: SkFont | null; metrics: { ascent: number; descent: number; size: number } }
+interface Run { text: string; font: SkFont; width: number }
 
+/** Caches stay small: a drawing has a few dozen styles and labels; past this they start again. */
+const CACHE_MAX = 2000;
+const remember = <K, V>(m: Map<K, V>, k: K, v: V): V => { if (m.size >= CACHE_MAX) m.clear(); m.set(k, v); return v; };
+
+/*
+  Every call into Skia crosses from JavaScript to native code on a device, and every object it makes has to be
+  collected again — at 120 frames a second that is what makes drawing lag. So one context is kept for frame after
+  frame (begin() points it at the next frame's canvas): paints are made once per distinct style and reused, fonts,
+  colours, font metrics and text runs (with their widths) are cached, and one path builder is reset rather than remade.
+  Cached paints are never changed after they're made.
+*/
 export class SkiaDrawCtx implements DrawCtx {
   private st: Style = initialStyle();
   private stack: Style[] = [];
   private path: SkPathBuilder;
   private hasPoint = false;
+  /** by CSS font string */
   private fonts = new Map<string, FontPair>();
   private colors = new Map<string, SkColor>();
+  private paints = new Map<string, SkPaint>();
+  /** by CSS font string, then text */
+  private textRuns = new Map<string, Map<string, Run[]>>();
+  /** the paints for the current style, until a style change (most draws in a row share one: no key to work out) */
+  private fillPaint: SkPaint | null = null;
+  private strokePaint: SkPaint | null = null;
+  /** the current path as Skia draws it, made once while it doesn't change (a fill and a stroke of it share it) */
+  private built: SkPath | null = null;
+  /** shapes by key, each made once at the origin (see shape), and the current path when it's one moved into place */
+  private shapes = new Map<string, SkPath>();
+  private placed: { path: SkPath; x: number; y: number; draw: (c: DrawCtx, x: number, y: number) => void } | null = null;
 
   constructor(
     private readonly Skia: SkiaApi,
-    private readonly canvas: SkCanvas,
+    private canvas: SkCanvas,
     private readonly typefaces: SkiaFonts,
     private readonly imageOf: SkiaImageSource = img => (img && typeof (img as SkImage).width === 'function' ? (img as SkImage) : null),
   ) {
     this.path = Skia.PathBuilder.Make();
   }
 
+  /** Draw the next frame on `canvas`, keeping the caches: the drawing state starts fresh, as on a new canvas. */
+  begin(canvas: SkCanvas): this {
+    this.canvas = canvas;
+    this.st = initialStyle();
+    this.stack = [];
+    this.path.reset();
+    this.hasPoint = false;
+    this.fillPaint = this.strokePaint = null;
+    this.built = null; this.placed = null;
+    return this;
+  }
+
+  /** The typefaces this context draws text with (a new set needs a new context). */
+  get typefaceSet(): SkiaFonts { return this.typefaces; }
+
   // ---- style state (scoped by save/restore, as in the browser canvas) ----
   get fillStyle(): unknown { return this.st.fillStyle; }
-  set fillStyle(v: unknown) { this.st.fillStyle = String(v); }
+  set fillStyle(v: unknown) { const c = String(v); if (c !== this.st.fillStyle) { this.st.fillStyle = c; this.fillPaint = null; } }
   get strokeStyle(): unknown { return this.st.strokeStyle; }
-  set strokeStyle(v: unknown) { this.st.strokeStyle = String(v); }
+  set strokeStyle(v: unknown) { const c = String(v); if (c !== this.st.strokeStyle) { this.st.strokeStyle = c; this.strokePaint = null; } }
   get lineWidth() { return this.st.lineWidth; }
-  set lineWidth(v: number) { if (v > 0 && Number.isFinite(v)) this.st.lineWidth = v; }
+  set lineWidth(v: number) { if (v > 0 && Number.isFinite(v) && v !== this.st.lineWidth) { this.st.lineWidth = v; this.strokePaint = null; } }
   get lineCap() { return this.st.lineCap; }
-  set lineCap(v: DrawCtx['lineCap']) { this.st.lineCap = v; }
+  set lineCap(v: DrawCtx['lineCap']) { if (v !== this.st.lineCap) { this.st.lineCap = v; this.strokePaint = null; } }
   get lineJoin() { return this.st.lineJoin; }
-  set lineJoin(v: DrawCtx['lineJoin']) { this.st.lineJoin = v; }
+  set lineJoin(v: DrawCtx['lineJoin']) { if (v !== this.st.lineJoin) { this.st.lineJoin = v; this.strokePaint = null; } }
   get globalAlpha() { return this.st.globalAlpha; }
-  set globalAlpha(v: number) { if (v >= 0 && v <= 1) this.st.globalAlpha = v; }
+  set globalAlpha(v: number) { if (v >= 0 && v <= 1 && v !== this.st.globalAlpha) { this.st.globalAlpha = v; this.fillPaint = this.strokePaint = null; } }
   get font() { return this.st.font; }
   set font(v: string) { this.st.font = v; }
   get textAlign() { return this.st.textAlign; }
@@ -123,26 +162,44 @@ export class SkiaDrawCtx implements DrawCtx {
     const s = this.stack.pop();
     if (!s) return;
     this.st = s;
+    this.fillPaint = this.strokePaint = null;
     this.canvas.restore();
   }
   translate(x: number, y: number): void { this.canvas.translate(x, y); }
   rotate(angle: number): void { this.canvas.rotate(deg(angle), 0, 0); }
+  scale(x: number, y: number): void { this.canvas.scale(x, y); }
   setLineDash(segments: number[]): void {
     if (segments.some(v => !(v >= 0) || !Number.isFinite(v))) return;
     // as the browser: an odd list repeats to make it even
     this.st.dash = segments.length % 2 ? [...segments, ...segments] : segments.slice();
+    this.strokePaint = null;
   }
 
   // ---- paths ----
-  beginPath(): void { this.path = this.Skia.PathBuilder.Make(); this.hasPoint = false; }
-  moveTo(x: number, y: number): void { this.path.moveTo(x, y); this.hasPoint = true; }
+  beginPath(): void { this.path.reset(); this.hasPoint = false; this.built = null; this.placed = null; }
+  /** About to add to the path: it changes (made again when drawn), and a shape moved into place becomes path commands. */
+  private changing(): void {
+    this.built = null;
+    const pl = this.placed;
+    if (pl) { this.placed = null; pl.draw(this, pl.x, pl.y); this.built = null; }
+  }
+  moveTo(x: number, y: number): void { this.changing(); this.path.moveTo(x, y); this.hasPoint = true; }
   lineTo(x: number, y: number): void {
+    this.changing();
     if (!this.hasPoint) this.path.moveTo(x, y); else this.path.lineTo(x, y);
     this.hasPoint = true;
   }
-  closePath(): void { this.path.close(); }
+  closePath(): void { this.changing(); this.path.close(); }
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
+    this.changing();
+    // (as the browser: with no current point, the first control point is where it starts)
+    if (!this.hasPoint) this.path.moveTo(cp1x, cp1y);
+    this.path.cubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    this.hasPoint = true;
+  }
   arc(x: number, y: number, r: number, startAngle: number, endAngle: number, counterclockwise = false): void {
     if (!(r >= 0)) return;
+    this.changing();
     const oval = this.Skia.XYWHRect(x - r, y - r, 2 * r, 2 * r);
     const sweep = arcSweep(startAngle, endAngle, counterclockwise);
     // the browser draws a line from the current point to the arc's start; Skia's arcToOval does the same
@@ -155,16 +212,19 @@ export class SkiaDrawCtx implements DrawCtx {
     this.hasPoint = true;
   }
   arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void {
+    this.changing();
     if (!this.hasPoint) this.path.moveTo(x1, y1);
     this.path.arcToTangent(x1, y1, x2, y2, r);
     this.hasPoint = true;
   }
   rect(x: number, y: number, w: number, h: number): void {
+    this.changing();
     this.path.addRect(this.Skia.XYWHRect(x, y, w, h));
     this.path.moveTo(x, y);
     this.hasPoint = true;
   }
   roundRect(x: number, y: number, w: number, h: number, r: number): void {
+    this.changing();
     if (w < 0) { x += w; w = -w; }
     if (h < 0) { y += h; h = -h; }
     const rr = Math.max(0, Math.min(r, w / 2, h / 2));
@@ -172,9 +232,39 @@ export class SkiaDrawCtx implements DrawCtx {
     this.path.moveTo(x, y);
     this.hasPoint = true;
   }
-  fill(): void { this.canvas.drawPath(this.path.build(), this.paint(false)); }
-  stroke(): void { this.canvas.drawPath(this.path.build(), this.paint(true)); }
-  clip(): void { this.canvas.clipPath(this.path.build(), INTERSECT, true); }
+  /**
+   * The path is a shape kept by key, made the first time (on a builder of its own, at the origin): its top left at x, y.
+   * Chips and badges — hundreds a frame — each took a few dozen calls into native code to describe; now a few to place.
+   */
+  shape(key: string, x: number, y: number, draw: (c: DrawCtx, x: number, y: number) => void): void {
+    let p = this.shapes.get(key);
+    if (!p) {
+      const outer = this.path, had = this.hasPoint;
+      this.path = this.Skia.PathBuilder.Make();
+      this.hasPoint = false; this.placed = null; this.built = null;
+      draw(this, 0, 0);
+      p = this.path.build();
+      this.path = outer; this.hasPoint = had;
+      remember(this.shapes, key, p);
+    }
+    this.path.reset();
+    this.hasPoint = false; this.built = null;
+    this.placed = { path: p, x, y, draw };
+  }
+  fill(): void { this.drawCurrent(this.paint(false)); }
+  stroke(): void { this.drawCurrent(this.paint(true)); }
+  clip(): void {
+    if (this.placed) this.changing();
+    this.canvas.clipPath(this.built ??= this.path.build(), INTERSECT, true);
+  }
+  private drawCurrent(paint: SkPaint): void {
+    const pl = this.placed;
+    if (!pl) { this.canvas.drawPath(this.built ??= this.path.build(), paint); return; }
+    this.canvas.save();
+    this.canvas.translate(pl.x, pl.y);
+    this.canvas.drawPath(pl.path, paint);
+    this.canvas.restore();
+  }
 
   // ---- shapes, text, images ----
   fillRect(x: number, y: number, w: number, h: number): void { this.canvas.drawRect(this.Skia.XYWHRect(x, y, w, h), this.paint(false)); }
@@ -182,32 +272,37 @@ export class SkiaDrawCtx implements DrawCtx {
 
   measureText(text: string): { width: number } {
     const f = this.fontPair();
-    return { width: this.runs(text, f).reduce((w, r) => w + r.font.getTextWidth(r.text), 0) };
+    return { width: this.runs(text, f).reduce((w, r) => w + r.width, 0) };
   }
 
   fillText(text: string, x: number, y: number): void {
     if (!text) return;
     const f = this.fontPair(), runs = this.runs(text, f), paint = this.paint(false);
-    const width = runs.reduce((w, r) => w + r.font.getTextWidth(r.text), 0);
+    const width = runs.reduce((w, r) => w + r.width, 0);
     const a = this.st.textAlign;
     let tx = a === 'center' ? x - width / 2 : a === 'right' || a === 'end' ? x - width : x;
-    const m = f.main.getMetrics(), b = this.st.textBaseline;
-    const ty = b === 'middle' ? y + middleShift(m.ascent, m.descent, f.main.getSize())
+    const m = f.metrics, b = this.st.textBaseline;
+    const ty = b === 'middle' ? y + middleShift(m.ascent, m.descent, m.size)
       : b === 'top' || b === 'hanging' ? y - m.ascent
       : b === 'bottom' || b === 'ideographic' ? y - m.descent
       : y;
     for (const r of runs) {
       this.canvas.drawText(r.text, tx, ty, paint, r.font);
-      tx += r.font.getTextWidth(r.text);
+      tx += r.width;
     }
   }
 
   drawImage(image: unknown, x: number, y: number, w: number, h: number): void {
     const img = this.imageOf(image);
     if (!img) return;
-    const p = this.Skia.Paint();
-    p.setAntiAlias(true);
-    p.setAlphaf(this.st.globalAlpha);
+    const key = 'image|' + this.st.globalAlpha;
+    let p = this.paints.get(key);
+    if (!p) {
+      p = this.Skia.Paint();
+      p.setAntiAlias(true);
+      p.setAlphaf(this.st.globalAlpha);
+      remember(this.paints, key, p);
+    }
     this.canvas.drawImageRect(img, this.Skia.XYWHRect(0, 0, img.width(), img.height()), this.Skia.XYWHRect(x, y, w, h), p);
   }
 
@@ -219,10 +314,26 @@ export class SkiaDrawCtx implements DrawCtx {
     return c;
   }
 
+  /** The paint for the current style: made the first time a style is used, the same object every time after. */
   private paint(stroke: boolean): SkPaint {
-    const s = this.st, p = this.Skia.Paint();
+    const same = stroke ? this.strokePaint : this.fillPaint;
+    if (same) return same;
+    const p = this.paintFor(stroke);
+    if (stroke) this.strokePaint = p; else this.fillPaint = p;
+    return p;
+  }
+
+  private paintFor(stroke: boolean): SkPaint {
+    const s = this.st, css = stroke ? s.strokeStyle : s.fillStyle;
+    const dashed = stroke && s.dash.length > 0 && s.dash.some(v => v > 0);
+    const key = stroke
+      ? 's|' + css + '|' + s.globalAlpha + '|' + s.lineWidth + '|' + s.lineCap + '|' + s.lineJoin + (dashed ? '|' + s.dash.join(',') : '')
+      : 'f|' + css + '|' + s.globalAlpha;
+    const hit = this.paints.get(key);
+    if (hit) return hit;
+    const p = this.Skia.Paint();
     p.setAntiAlias(true);
-    const c = this.color(stroke ? s.strokeStyle : s.fillStyle);
+    const c = this.color(css);
     p.setColor(c);
     p.setAlphaf(c[3] * s.globalAlpha);
     if (stroke) {
@@ -230,36 +341,47 @@ export class SkiaDrawCtx implements DrawCtx {
       p.setStrokeWidth(s.lineWidth);
       p.setStrokeCap(CAP[s.lineCap]);
       p.setStrokeJoin(JOIN[s.lineJoin]);
-      if (s.dash.length && s.dash.some(v => v > 0)) p.setPathEffect(this.Skia.PathEffect.MakeDash(s.dash, 0));
+      if (dashed) p.setPathEffect(this.Skia.PathEffect.MakeDash(s.dash, 0));
     }
-    return p;
+    return remember(this.paints, key, p);
   }
 
   private fontPair(): FontPair {
-    const { weight, size } = parseFont(this.st.font), key = weight + '|' + size;
+    const key = this.st.font;
     let f = this.fonts.get(key);
     if (!f) {
+      const { weight, size } = parseFont(key);
       const ws = Object.keys(this.typefaces.weights).map(Number);
       const near = ws.sort((a, b) => Math.abs(a - weight) - Math.abs(b - weight))[0];
+      const main = this.Skia.Font(this.typefaces.weights[near]!, size), m = main.getMetrics();
       f = {
-        main: this.Skia.Font(this.typefaces.weights[near]!, size),
+        main,
         fb: this.typefaces.fallback ? this.Skia.Font(this.typefaces.fallback, size) : null,
+        metrics: { ascent: m.ascent, descent: m.descent, size: main.getSize() },
       };
-      this.fonts.set(key, f);
+      remember(this.fonts, key, f);
     }
     return f;
   }
 
-  /** Split text into runs the main font can draw and runs that need the fallback. */
-  private runs(text: string, f: FontPair): { text: string; font: SkFont }[] {
-    if (!f.fb) return [{ text, font: f.main }];
-    const chars = Array.from(text), ids = f.main.getGlyphIDs(text, chars.length);
-    if (!ids.includes(0)) return [{ text, font: f.main }];
-    const out: { text: string; font: SkFont }[] = [];
-    chars.forEach((ch, i) => {
-      const font = ids[i] === 0 ? f.fb! : f.main, last = out[out.length - 1];
-      if (last && last.font === font) last.text += ch; else out.push({ text: ch, font });
-    });
-    return out;
+  /** Split text into runs the main font can draw and runs that need the fallback, with their widths (cached). */
+  private runs(text: string, f: FontPair): Run[] {
+    const css = this.st.font;
+    let byText = this.textRuns.get(css);
+    if (!byText) this.textRuns.set(css, (byText = new Map()));
+    const hit = byText.get(text);
+    if (hit) return hit;
+    const out: Run[] = [];
+    const ids = f.fb ? f.main.getGlyphIDs(text, Array.from(text).length) : null;
+    if (!ids || !ids.includes(0)) out.push({ text, font: f.main, width: 0 });
+    else {
+      Array.from(text).forEach((ch, i) => {
+        const font = ids[i] === 0 ? f.fb! : f.main, last = out[out.length - 1];
+        if (last && last.font === font) last.text += ch; else out.push({ text: ch, font, width: 0 });
+      });
+    }
+    for (const r of out) r.width = r.font.getTextWidth(r.text);
+    // (kept: measuring and drawing a label again — every frame — asks native code nothing)
+    return remember(byText, text, out);
   }
 }

package/src/skia/host.ts

@@ -44,7 +44,20 @@ export const skiaImageLoader: ImageLoader = (src, onLoad) => {
 const imageOf = (img: unknown): SkImage | null => (img as SkiaImage | null)?.sk ?? null;
 
 /** A drawing context on a Skia canvas, with the current typefaces and Skia-loaded pictures. */
-export const skiaCtx = (canvas: SkCanvas): SkiaDrawCtx => new SkiaDrawCtx(Skia, canvas, currentFonts(), imageOf);
+/** One context for frame after frame (its paints, fonts and text caches are reused); a new one if the typefaces change. */
+let shared: SkiaDrawCtx | null = null;
+export function skiaCtx(canvas: SkCanvas): SkiaDrawCtx {
+  const fonts = currentFonts();
+  if (!shared || shared.typefaceSet !== fonts) shared = new SkiaDrawCtx(Skia, canvas, fonts, imageOf);
+  return shared.begin(canvas);
+}
+/** A second one, for drawing on two canvases at once (recordLayers). */
+let second: SkiaDrawCtx | null = null;
+function skiaCtx2(canvas: SkCanvas): SkiaDrawCtx {
+  const fonts = currentFonts();
+  if (!second || second.typefaceSet !== fonts) second = new SkiaDrawCtx(Skia, canvas, fonts, imageOf);
+  return second.begin(canvas);
+}
 
 /** Record w × h of drawing as a picture; also returns what `draw` returned (e.g. the tappable chips). */
 export function recordPicture<T>(w: number, h: number, draw: (ctx: SkiaDrawCtx) => T): { picture: SkPicture; result: T } {
@@ -54,6 +67,19 @@ export function recordPicture<T>(w: number, h: number, draw: (ctx: SkiaDrawCtx)
   return { picture: rec.finishRecordingAsPicture(), result };
 }
 
+/**
+ * Record a frame as two pictures at once: `moving`, which a host moves and scales with the view (drawn `margin` px
+ * past each edge of the w × h screen, so moved a little it shows no edge), and `fixed`, what stays put on the screen.
+ * Also returns what `draw` returned.
+ */
+export function recordLayers<T>(w: number, h: number, margin: number, draw: (moving: SkiaDrawCtx, fixed: SkiaDrawCtx) => T): { moving: SkPicture; fixed: SkPicture; result: T } {
+  const recM = Skia.PictureRecorder(), recF = Skia.PictureRecorder();
+  const m = recM.beginRecording(Skia.XYWHRect(-margin, -margin, w + 2 * margin, h + 2 * margin));
+  const f = recF.beginRecording(Skia.XYWHRect(0, 0, w, h));
+  const result = draw(skiaCtx(m), skiaCtx2(f));
+  return { moving: recM.finishRecordingAsPicture(), fixed: recF.finishRecordingAsPicture(), result };
+}
+
 /** Draw w × h into an image and encode it as a PNG data URL (null if no surface could be made). */
 export function renderPng(w: number, h: number, draw: (ctx: SkiaDrawCtx) => void): string | null {
   const surface = Skia.Surface.Make(w, h);
@@ -62,3 +88,22 @@ export function renderPng(w: number, h: number, draw: (ctx: SkiaDrawCtx) => void
   surface.flush();
   return 'data:image/png;base64,' + surface.makeImageSnapshot().encodeToBase64();
 }
+
+/**
+ * Measuring text without drawing (picking a note, its handles): a context of its own with the current typefaces, so
+ * widths match the drawing's exactly. Its canvas is never drawn on.
+ */
+let measurer: SkiaDrawCtx | null = null;
+function measureCtx(): SkiaDrawCtx {
+  const fonts = currentFonts();
+  if (!measurer || measurer.typefaceSet !== fonts) {
+    const canvas = Skia.PictureRecorder().beginRecording(Skia.XYWHRect(0, 0, 1, 1));
+    measurer = new SkiaDrawCtx(Skia, canvas, fonts, imageOf);
+  }
+  return measurer;
+}
+export const skiaTextMeasure = {
+  get font(): string { return measureCtx().font; },
+  set font(v: string) { measureCtx().font = v; },
+  measureText: (s: string): { width: number } => measureCtx().measureText(s),
+};

package/src/solver/equations.ts

@@ -1,5 +1,6 @@
 import { hyp } from '../model/geom';
 import { curveInfo } from '../model/sketch';
+import { faceEnds, faceSpan } from '../model/wallfaces';
 import type { Constraint, Sketch } from '../model/types';
 
 export type Vec = Float64Array;
@@ -51,6 +52,20 @@ export function consEqs(sk: Sketch, c: Constraint, P: PFn, D: DFn, RV: RVFn, RD:
       // on the side the centre started on (sign), so it never flips across the line
       const l = L(c.l), r = rad(c.c);
       if (!l || !r) break;
+      // an arc that ends on one of the line's ends (a fillet, a smooth join): tangent there is its radius to that end
+      // standing square to the line. (The distance form has no slope at that point, so the solver couldn't tell a
+      // second such tangent from one that's already true.)
+      const ci = curveInfo(sk, c.c);
+      const joint = ci && ci.kind === 'arc' ? [ci.o.a, ci.o.b].find(p => p === l.a || p === l.b) : undefined;
+      if (ci && joint) {
+        const o = ci.o.c;
+        out.push([[...D(l.a), ...D(l.b), ...D(o), ...D(joint)], X => {
+          const a = P(X, l.a), b = P(X, l.b), m = P(X, o), e = P(X, joint);
+          const ux = b[0] - a[0], uy = b[1] - a[1], vx = e[0] - m[0], vy = e[1] - m[1];
+          return (ux * vx + uy * vy) / ((hyp(ux, uy) || 1e-12) * (hyp(vx, vy) || 1e-12));
+        }]);
+        break;
+      }
       const s = c.sign || 1;
       out.push([[...D(l.a), ...D(l.b), ...D(r.c), ...r.deps], X => {
         const o = P(X, r.c), a = P(X, l.a), b = P(X, l.b), n = hyp(b[0] - a[0], b[1] - a[1]) || 1e-12;
@@ -109,6 +124,19 @@ export function consEqs(sk: Sketch, c: Constraint, P: PFn, D: DFn, RV: RVFn, RD:
       break;
     }
     case 'dist': {
+      const fw = c.face && c.line && (!c.kind || c.kind === 'al') ? L(c.line) : undefined;
+      if (fw && fw.kind === 'wall') {
+        // along one face of a wall, corner to corner: the walls at its ends cut it short (an inside corner) or carry it
+        // on (an outside one), so they're part of it too
+        const ends = faceEnds(sk, c.line!), side = c.face!;
+        const deps = [...D(fw.a), ...D(fw.b), ...[...ends.a, ...ends.b].flatMap(e => D(e.far ?? e.arc!.c))];
+        out.push([deps, X => {
+          const at = (id: string) => { const q = P(X, id); return { x: q[0], y: q[1] }; };
+          const f = faceSpan(at, at(fw.a), at(fw.b), fw.thick, side, ends);
+          return (f ? f.s1 - f.s0 : 0) - c.value!;
+        }]);
+        break;
+      }
       const deps = [...D(c.a!), ...D(c.b!)], s = c.sign || 1;
       if (c.kind === 'h') out.push([deps, X => (P(X, c.b!)[0] - P(X, c.a!)[0]) * s - c.value!]);
       else if (c.kind === 'v') out.push([deps, X => (P(X, c.b!)[1] - P(X, c.a!)[1]) * s - c.value!]);
@@ -119,16 +147,23 @@ export function consEqs(sk: Sketch, c: Constraint, P: PFn, D: DFn, RV: RVFn, RD:
       const l = L(c.l);
       if (!l) break;
       const s = c.sign || 1;
+      // between walls' faces: the centreline distance, less half of each wall's thickness for a face toward the other
+      // (more, for a far face) — read when solved, so a wall made thicker keeps the faces where they were measured
+      const k = c.faces, w2 = L(c.l2);
+      const faceOff = () => (k ? (k[0] * (l.kind === 'wall' ? l.thick : 0) + k[1] * (w2 && w2.kind === 'wall' ? w2.thick : 0)) / 2 : 0);
       out.push([[...D(c.p!), ...D(l.a), ...D(l.b)], X => {
         const p = P(X, c.p!), a = P(X, l.a), b = P(X, l.b), dx = b[0] - a[0], dy = b[1] - a[1], n = hyp(dx, dy) || 1e-12;
-        return (s * ((b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]))) / n - c.value!;
+        return (s * ((b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]))) / n - faceOff() - c.value!;
       }]);
       break;
     }
     case 'diam': {
       const r = rad(c.c);
       if (!r) break;
-      out.push([r.deps, X => 2 * r.f(X) - c.value!]);
+      // across a curved wall's face: the centreline's, plus its thickness for the outer face (less, the inner)
+      const w = sk.circles[c.c!] ?? sk.arcs[c.c!];
+      const faceOff = () => (c.face && w && w.kind === 'wall' ? c.face * (w.thick || 4.5) : 0);
+      out.push([r.deps, X => 2 * r.f(X) + faceOff() - c.value!]);
       break;
     }
     case 'angle': {