@reekon-tools/boldr-cad 1.7.0 → 1.8.0

package/dist/render/draw.js

@@ -11,6 +11,7 @@ import { settings } from '../model/settings';
 import { curveInfo, frameMemo, lineBetween, roomValid, withLineIndex } from '../model/sketch';
 import { page, planSK, SK } from '../model/store';
 import { elev, elevOpen } from '../editor/elevation';
+import { ghostDim } from '../editor/refDim';
 import { cabPoints } from '../model/faces';
 import { drawKeyPlan, drawWallBackdrop, drawWallChips, drawWallSelection } from './elevation';
 import { fmtAng, fmtArea, fmtLen } from '../units';
@@ -84,7 +85,10 @@ export function chip(c, text, cx, cy, opts) {
     if (border) {
         c.lineWidth = border[1] || 1;
         c.strokeStyle = border[0];
+        if (opts.dash)
+            c.setLineDash(opts.dash);
         c.stroke();
+        c.setLineDash([]);
     }
     c.fillStyle = fg;
     c.textAlign = 'center';
@@ -785,8 +789,9 @@ function dimLive(sk, id, d) {
 }
 /**
  * Driving/reference dimension chips. (Lengths are added from the bottom bar's + / Length, not on-canvas prompts.) What's
- * been entered (blue, or red when it can't be met) always shows; a reference only while it or what it measures is
- * selected or hovered.
+ * been entered (blue, or red when it can't be met) always shows, and so does a reference kept by hand (Make reference:
+ * editor/refDim.ts); a reference the drawing set only while it or what it measures is selected or hovered. Then what the
+ * + would make for the selection, as it measures now: the ghost.
  */
 function drawDims(c, T, sk) {
     if (!settings.layers.dims)
@@ -795,95 +800,111 @@ function drawDims(c, T, sk) {
         const d = sk.cons[id];
         if (!isDim(d) || d.elev)
             continue; // the wall view's own dimensions are its chips
-        const A = dimAnchor(sk, d);
-        if (!A)
-            continue;
-        const ref = d.driving === false, val = ref ? measure(sk, d) : d.value;
-        const selected = isSel('dim', id) || isSel('cons', id);
         const bad = ed.highlight.has(id) || ed.ana.bad.has(id);
-        if (ref && !bad && !dimLive(sk, id, d))
-            continue;
-        // a measurement of the job sets it: the link badge before its value (chip()), on the chip's own colour — red once
-        // the job's measurement is gone
-        const linked = !!d.measurementRef && !ref && !bad, gone = linked && linkInfoOf(d.measurementRef)?.exists === false;
-        let bg = ref ? TH.ref : TH.blue, fg = ref ? TH.reftext : '#fff';
-        if (bad || gone) {
-            bg = TH.red;
-            fg = '#fff';
-        }
-        const border = selected ? [TH.yellow, 2.5] : null;
-        const mark = linked ? 'link' : undefined;
-        const wrap = (s) => (ref ? '(' : '') + s + (ref ? ')' : '');
-        if (d.type === 'angle' && 'vtx' in A) {
-            const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
-            // pulled off its corner: its arc out where the label is, the label riding on it; else a little arc at the
-            // corner, the label out along the bisector
-            const moved = angleLabel(sk, d), R = moved ? moved.r * T.s : 22;
-            if (A.u1 && A.u2) {
-                // arc between the two lines, so the angle reads as belonging to that corner
-                const t1 = Math.atan2(-A.u1[1], A.u1[0]), t2 = Math.atan2(-A.u2[1], A.u2[0]);
-                let sweep = t2 - t1;
-                while (sweep > Math.PI)
-                    sweep -= 2 * Math.PI;
-                while (sweep < -Math.PI)
-                    sweep += 2 * Math.PI;
-                // (blue, as every other dimension is — the user's call, 2026-10-29; purple is the inference guides')
-                c.save();
-                c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue;
-                c.lineWidth = 1.2;
-                if (ref)
-                    c.setLineDash([3, 3]);
-                c.beginPath();
-                c.arc(vx, vy, R, t1, t1 + sweep, sweep < 0);
-                c.stroke();
-                // (pulled out past where a line ends: an extension line along it, out to the arc)
-                c.lineWidth = 1;
-                for (const [u, len] of [[A.u1, A.len1], [A.u2, A.len2]]) {
-                    const from = (len ?? 0) * T.s;
-                    if (moved && R > from + 2) {
-                        c.beginPath();
-                        c.moveTo(vx + u[0] * from, vy - u[1] * from);
-                        c.lineTo(vx + u[0] * (R + 4), vy - u[1] * (R + 4));
-                        c.stroke();
-                    }
-                }
-                c.restore();
-            }
-            const text = wrap(fmtAng(val)), opts = { bg, fg, border, kind: 'dim', id, mark, ...dimChip() };
-            // (left where it was drawn: 50 px out along the bisector, or as far as its corners stay clear of the corner — a
-            // linked chip is wider)
-            const sz = chipSize(c, text, opts), out = Math.max(50, Math.hypot(sz.w, sz.h) / 2 + 28);
-            const [lx, ly] = moved ? [vx + Math.cos(moved.ang) * R, vy - Math.sin(moved.ang) * R] : [vx + A.bis[0] * out, vy - A.bis[1] * out];
-            chip(c, text, lx, ly, opts);
-            continue;
-        }
-        if (d.type === 'diam' && 'o' in A) {
-            drawDiameter(c, T, A.o, A.r, d, d.rad ? 'R ' + wrap(fmtLen(val / 2)) : 'Ø ' + wrap(fmtLen(val)), bad ? TH.red : ref ? TH.chipline : TH.blue, { bg, fg, border, kind: 'dim', id, mark, ...dimChip() }, ref);
-            continue;
-        }
-        if (!('a' in A))
+        if (d.driving === false && !d.kept && !bad && !dimLive(sk, id, d))
             continue;
-        const [mx, my] = S(T, A.m.x, A.m.y);
-        const lineColor = bad ? TH.red : ref ? TH.chipline : TH.blue;
-        if ((d.type === 'dist' || d.type === 'pldist') && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
-            drawDimLeaders(c, T, A.a, A.b, A.nx, A.ny, d.off, lineColor, ref);
-        }
-        else if (d.type === 'pldist' || !d.line) {
-            // (dashed only when it's a reference: a dashed line means the number holds nothing, wherever it's drawn)
-            const [ax, ay] = S(T, A.a.x, A.a.y), [bx, by] = S(T, A.b.x, A.b.y);
+        drawDim(c, T, sk, d, id, bad);
+    }
+    const g = ghostDim();
+    if (g)
+        drawDim(c, T, sk, g, null, false);
+}
+/**
+ * One dimension: driving blue, a kept reference solid grey in brackets, red when it can't be met. Faded — the canvas's
+ * own colour inside a dashed grey outline, grey text, no brackets — when it shows only while it's selected: the ghost
+ * (`id` null) and a reference the drawing set. Its lines are dashed when it holds nothing.
+ */
+function drawDim(c, T, sk, d, id, bad) {
+    const A = dimAnchor(sk, d);
+    if (!A)
+        return;
+    const ref = d.driving === false, val = ref ? measure(sk, d) : d.value;
+    const grey = ref || id === null, faded = !bad && (id === null || (ref && !d.kept));
+    const selected = id !== null && (isSel('dim', id) || isSel('cons', id));
+    // a measurement of the job sets it: the link badge before its value (chip()), on the chip's own colour — red once
+    // the job's measurement is gone
+    const linked = !!d.measurementRef && !ref && !bad, gone = linked && linkInfoOf(d.measurementRef)?.exists === false;
+    let bg = faded ? TH.bg : ref ? TH.ref : TH.blue, fg = faded ? TH.ink2 : ref ? TH.reftext : '#fff';
+    if (bad || gone) {
+        bg = TH.red;
+        fg = '#fff';
+    }
+    const border = selected ? [TH.yellow, 2.5] : faded ? [TH.chipline, 1.2] : null;
+    // (the ghost is a readout, never a tap target: it sits on what it measures, which a press there is for)
+    const opts = {
+        bg, fg, border, ...(id === null ? {} : { kind: 'dim', id }),
+        mark: linked ? 'link' : undefined, dash: faded && !selected ? [3, 2] : undefined, ...dimChip(),
+    };
+    const wrap = (s) => (ref && !faded ? '(' + s + ')' : s);
+    const lineColor = bad ? TH.red : grey ? TH.chipline : TH.blue;
+    if (d.type === 'angle' && 'vtx' in A) {
+        const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
+        // pulled off its corner: its arc out where the label is, the label riding on it; else a little arc at the
+        // corner, the label out along the bisector
+        const moved = angleLabel(sk, d), R = moved ? moved.r * T.s : 22;
+        if (A.u1 && A.u2) {
+            // arc between the two lines, so the angle reads as belonging to that corner
+            const t1 = Math.atan2(-A.u1[1], A.u1[0]), t2 = Math.atan2(-A.u2[1], A.u2[0]);
+            let sweep = t2 - t1;
+            while (sweep > Math.PI)
+                sweep -= 2 * Math.PI;
+            while (sweep < -Math.PI)
+                sweep += 2 * Math.PI;
+            // (blue, as every other dimension is — the user's call, 2026-10-29; purple is the inference guides')
             c.save();
-            if (ref)
-                c.setLineDash([3, 3]);
-            c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue;
+            c.strokeStyle = lineColor;
             c.lineWidth = 1.2;
+            if (grey)
+                c.setLineDash([3, 3]);
             c.beginPath();
-            c.moveTo(ax, ay);
-            c.lineTo(bx, by);
+            c.arc(vx, vy, R, t1, t1 + sweep, sweep < 0);
             c.stroke();
+            // (pulled out past where a line ends: an extension line along it, out to the arc)
+            c.lineWidth = 1;
+            for (const [u, len] of [[A.u1, A.len1], [A.u2, A.len2]]) {
+                const from = (len ?? 0) * T.s;
+                if (moved && R > from + 2) {
+                    c.beginPath();
+                    c.moveTo(vx + u[0] * from, vy - u[1] * from);
+                    c.lineTo(vx + u[0] * (R + 4), vy - u[1] * (R + 4));
+                    c.stroke();
+                }
+            }
             c.restore();
         }
-        chip(c, wrap(fmtLen(val)), mx, my, { bg, fg, border, kind: 'dim', id, mark, ...dimChip() });
+        const text = wrap(fmtAng(val));
+        // (left where it was drawn: 50 px out along the bisector, or as far as its corners stay clear of the corner — a
+        // linked chip is wider)
+        const sz = chipSize(c, text, opts), out = Math.max(50, Math.hypot(sz.w, sz.h) / 2 + 28);
+        const [lx, ly] = moved ? [vx + Math.cos(moved.ang) * R, vy - Math.sin(moved.ang) * R] : [vx + A.bis[0] * out, vy - A.bis[1] * out];
+        chip(c, text, lx, ly, opts);
+        return;
+    }
+    if (d.type === 'diam' && 'o' in A) {
+        drawDiameter(c, T, A.o, A.r, d, d.rad ? 'R ' + wrap(fmtLen(val / 2)) : 'Ø ' + wrap(fmtLen(val)), lineColor, opts, grey);
+        return;
     }
+    if (!('a' in A))
+        return;
+    const [mx, my] = S(T, A.m.x, A.m.y);
+    if ((d.type === 'dist' || d.type === 'pldist') && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
+        drawDimLeaders(c, T, A.a, A.b, A.nx, A.ny, d.off, lineColor, grey);
+    }
+    else if (d.type === 'pldist' || !d.line) {
+        // (dashed only when it holds nothing: a dashed line means the number holds nothing, wherever it's drawn)
+        const [ax, ay] = S(T, A.a.x, A.a.y), [bx, by] = S(T, A.b.x, A.b.y);
+        c.save();
+        if (grey)
+            c.setLineDash([3, 3]);
+        c.strokeStyle = lineColor;
+        c.lineWidth = 1.2;
+        c.beginPath();
+        c.moveTo(ax, ay);
+        c.lineTo(bx, by);
+        c.stroke();
+        c.restore();
+    }
+    chip(c, wrap(fmtLen(val)), mx, my, opts);
 }
 /**
  * Door/window dimensions, on a line just outside the wall:
@@ -1306,9 +1327,10 @@ function badgeSpots(T, sk, c) {
         if (lid)
             onLine(lid, 0.22, -1);
         else {
+            // two points no line joins: on the dashed line drawn between them (pointPairLink), halfway
             const a = P(c.a), b = P(c.b);
             const [x1, y1] = S(T, a.x, a.y), [x2, y2] = S(T, b.x, b.y);
-            out.push([(x1 + x2) / 2 + 10, (y1 + y2) / 2 - 10]);
+            out.push([(x1 + x2) / 2, (y1 + y2) / 2]);
         }
     }
     else if (['par', 'perp', 'col', 'eq', 'angle'].includes(c.type)) {
@@ -1342,19 +1364,60 @@ function badgeSpots(T, sk, c) {
     }
     return out;
 }
+/**
+ * Horizontal or Vertical between two points no line joins: the two points it ties, for drawing a dashed line between
+ * them that its badge sits on (the user's call, 2026-11-05: the badge "is floating so u have no idea what it is related
+ * to"). Null for any other constraint.
+ */
+function pointPairLink(sk, k) {
+    if ((k.type !== 'h' && k.type !== 'v') || lineBetween(sk, k.a, k.b))
+        return null;
+    const a = sk.points[k.a], b = sk.points[k.b];
+    return a && b ? [a, b] : null;
+}
 function drawBadges(c, T, sk) {
     const { W, H } = cvs;
     const selIds = new Set(ed.sel.map(s => s.id)), selPts = selPoints(sk);
+    const shown = [];
     for (const id in sk.cons) {
         const k = sk.cons[id];
-        if (isDim(k) || k.elev)
-            continue;
-        const g = GLYPH[k.type];
-        if (!g)
+        if (isDim(k) || k.elev || !GLYPH[k.type])
             continue;
         const related = selIds.has(id) || [k.l, k.l1, k.l2, k.c, k.c1, k.c2].some(x => x && selIds.has(x)) || [k.a, k.b, k.p].some(x => x && selPts.has(x));
         if (!settings.showCons && !related && !ed.highlight.has(id))
             continue;
+        shown.push(id);
+    }
+    // first the lines between the points a two-point Horizontal or Vertical ties: faint and dashed, yellow with a ring
+    // on each point while it's selected, red when it can't be met — under every badge
+    for (const id of shown) {
+        const ends = pointPairLink(sk, sk.cons[id]);
+        if (!ends)
+            continue;
+        const [x1, y1] = S(T, ends[0].x, ends[0].y), [x2, y2] = S(T, ends[1].x, ends[1].y);
+        if (hyp(x2 - x1, y2 - y1) < 24)
+            continue;
+        const selected = isSel('cons', id), bad = ed.highlight.has(id) || ed.ana.bad.has(id);
+        c.save();
+        c.strokeStyle = bad ? TH.red : selected ? TH.yellow : TH.badgeline;
+        c.lineWidth = selected || bad ? 1.5 : 1;
+        c.setLineDash([4, 4]);
+        c.beginPath();
+        c.moveTo(x1, y1);
+        c.lineTo(x2, y2);
+        c.stroke();
+        c.setLineDash([]);
+        if (selected)
+            for (const [x, y] of [[x1, y1], [x2, y2]]) {
+                c.beginPath();
+                c.arc(x, y, 8, 0, Math.PI * 2);
+                c.lineWidth = 2.5;
+                c.stroke();
+            }
+        c.restore();
+    }
+    for (const id of shown) {
+        const k = sk.cons[id], g = GLYPH[k.type];
         for (const [x, y] of badgeSpots(T, sk, k)) {
             if (x < -20 || y < -20 || x > W + 20 || y > H + 20)
                 continue;