@reekon-tools/boldr-cad 1.7.0 → 1.8.0

package/src/editor/actions.ts

@@ -24,6 +24,7 @@ import { elevOpen, fitState, OPENING_SIZES, openElevation, overflow, restoreFit,
 import { pushedOut } from '../model/facesolve';
 import { dismissPopovers, editRoomName, openKeypad, openPalette, toast, toggleDimSize, toggleImageOpacity, toggleImageRotation, toggleTileSize, updateCtx, updateTopBar } from './ports';
 import { dimSizeVisible } from './dimSize';
+import { makeReference, makeRefVisible } from './refDim';
 import { cornerLines, edgePair, selInfo } from './selection';
 import { restackImage } from './project';
 import { imageById } from '../model/images';
@@ -323,7 +324,18 @@ function filletCorner2(): string | null {
 }
 
 /** Buttons for the bottom bar: they adapt to the tool and the selection (Lock first, when offered). */
-export const barItems = (): CtxEntry[] => arrangeLead(ctxItems());
+export const barItems = (): CtxEntry[] => arrangeLead(withMakeRef(ctxItems()));
+
+/**
+ * Make reference (editor/refDim.ts), wherever the selection shows a grey number to keep: after Lock and the bar's name
+ * for what's picked, ahead of the rest — one place for it, whatever bar it's in.
+ */
+function withMakeRef(items: CtxEntry[]): CtxEntry[] {
+  if (!makeRefVisible()) return items;
+  const at = items.findIndex(e => !(typeof e === 'object' && 'lbl' in e));
+  const item: CtxItem = { ic: 'ref', label: 'Make reference', act: 'makeRef' };
+  return at < 0 ? [...items, item] : [...items.slice(0, at), item, ...items.slice(at)];
+}
 
 /** The yellow + only appears for something it can measure: not for constraint badges or spaces alone. */
 const DRAW_TOOLS = new Set(['line', 'freehand', 'rect', 'circle', 'arc']);
@@ -654,6 +666,7 @@ export function applyCtxAction(act: string, anchor?: unknown): void {
     }
     case 'editdim': editDim(s.dims[0]); return;
     case 'toggleref': toggleRef(s.dims[0]); return;
+    case 'makeRef': makeReference(); return;
     case 'odimRef': { const [op, part] = s.odims[0].split('|'); toggleOpeningDim(op, part.slice(2)); return; }
     case 'renameRoom': editRoomName(s.rooms[0]); return;
     // (the room is on the left of the wall's start → end when there's none either side of it)

package/src/editor/linkActions.ts

@@ -5,12 +5,12 @@ import { pushHistory } from '../model/history';
 import { uid } from '../model/ids';
 import { isLink, LINK_COLOR, LINK_HARD_MAX_IN, LINK_HARD_MIN_IN, LINK_MAX_IN, LINK_MIN_IN, LINK_SIDE_IN, LINK_TILE_PX, linkInfoOf, linkName, linkSide, linkSnapshot } from '../model/links';
 import { dimMeasurement } from '../model/measurement';
-import { imageLinkAt, linkAt } from '../render/hit';
+import { hitAny, imageLinkAt, linkAt } from '../render/hit';
 import { askConfirm } from './confirm';
 import { imageById } from '../model/images';
 import { settings } from '../model/settings';
 import { page, SK, store } from '../model/store';
-import type { LinkTarget, Note, Sketch, Underlay } from '../model/types';
+import type { LinkTarget, Note, SelItem, Sketch, Underlay } from '../model/types';
 import { tileTypeOf } from '../render/linkTile';
 import { cvs, linkBox, linkThumb, mainT, requestDraw, s2w, underlayMid } from '../render/view';
 import { setTool } from '../tools/registry';
@@ -18,6 +18,7 @@ import { elevOpen } from './elevation';
 import { is3d } from './view3dState';
 import { besideOpen, canLink, canOpenBeside, linksHost, openLink, openLinkBeside, pickLinks } from './links';
 import { toast } from './ports';
+import { refTarget } from './refDim';
 
 /*
   Linking. In Annotate the + puts the job's files the person picks on the plan as tiles (selected, to move them where
@@ -270,11 +271,16 @@ export function toggleExpand(): void {
   else if (u) collapseLink(u.id);
 }
 
-/** A view-only tap on the plan: on a link's tile or an expanded photo's badge, the person is asked, then what it's for opens. */
+/**
+ * A view-only tap on the plan: on a link's tile or an expanded photo's badge, the person is asked, then what it's for
+ * opens. Anywhere else, what's under it is picked to read its size — a line, a wall or its edge, a corner, a curve:
+ * its grey number shows (editor/refDim.ts; the user's call, 2026-11-05) — and a tap on nothing of the kind lets go.
+ */
 export function readOnlyTap(sx: number, sy: number, touch: boolean): void {
-  if (!ed.readOnly || !canLink()) return;
-  const t = linkAt(sx, sy, touch)?.link ?? imageLinkAt(sx, sy, touch)?.link;
-  if (!t || !canOpenLink(t)) return;
+  if (!ed.readOnly) return;
+  const t = canLink() ? linkAt(sx, sy, touch)?.link ?? imageLinkAt(sx, sy, touch)?.link : undefined;
+  if (!t) { pickToRead(sx, sy, touch); return; }
+  if (!canOpenLink(t)) return;
   const where = linkInfoOf(t)?.groupName ?? t.groupName;
   askConfirm({
     title: 'Open ' + linkName(t) + '?',
@@ -287,6 +293,19 @@ export function readOnlyTap(sx: number, sy: number, touch: boolean): void {
   });
 }
 
+/** What a view-only tap picks to read the size of: one thing the + measures alone (the selection is otherwise empty). */
+const READABLE = new Set(['line', 'wface', 'point', 'circle', 'arc']);
+
+function pickToRead(sx: number, sy: number, touch: boolean): void {
+  const h = hitAny(sx, sy, { touch, faces: true });
+  // (a wall picked whole: the side it was tapped on, which side of it its length is read on between two spaces)
+  if (h?.side && (h.type === 'line' || h.type === 'circle' || h.type === 'arc')) ed.wallTap = { id: h.id, side: h.side };
+  ed.sel = h && !h.weak && READABLE.has(h.type) ? [{ type: h.type as SelItem['type'], id: h.id }] : [];
+  // (a point that isn't a corner has no size to read)
+  if (ed.sel.length && !refTarget()) ed.sel = [];
+  requestDraw();
+}
+
 /** Let go of a dimension's link: its value stays, the drawing's alone now. */
 export function unlinkDim(id: string): void {
   const c = SK().cons[id];

package/src/editor/refDim.ts

@@ -0,0 +1,61 @@
+import { afterEdit } from '../app/edit';
+import { ed } from '../app/state';
+import { measure } from '../model/constraints';
+import { pushHistory } from '../model/history';
+import { settings } from '../model/settings';
+import { addCons } from '../model/sketch';
+import { SK } from '../model/store';
+import type { Constraint } from '../model/types';
+import { selectionDim } from '../tools/dim';
+import { elevOpen } from './elevation';
+import { keypadOpen } from './keypad';
+import { noScaleYet } from './scaleGate';
+
+/*
+  Reference measurements by hand (the user's call, 2026-11-05: "upon selection of a line, two points, angle etc there
+  should be a grey measurement ... bottom bar should have a make reference option, when pressed the shown grey
+  measurement now stays on screen"). With something picked that the yellow + measures, the dimension it would make is
+  drawn as it measures now: a faded grey number with a dashed outline (the "ghost", render/draw.ts). It's a readout,
+  not a tap target: it sits on what it measures (a line's middle, a wall's cabinets), and a press there is for that —
+  the bar's + sets it. The bar's Make reference keeps it, as a reference dimension (never drives the drawing) that
+  stays on screen (`Constraint.kept`), solid grey in brackets. Only new ones: a dimension that drives stays driving. A reference the
+  drawing already set (one that would over-define it) shows only while selected, so it's drawn as a ghost too, and
+  Make reference keeps it. Everywhere (BOLDR's app and web), and in a drawing opened view-only, where a tap picks one
+  thing to read its size (readOnlyTap) and nothing can be kept.
+*/
+
+/**
+ * What the grey number is for: the dimension the + would make for the selection (`id` unset), or the reference already
+ * there for it that isn't kept. Null with nothing to show: a dimension already measured or kept there, nothing the +
+ * measures this way, the wall view, Annotate, another tool, the keypad up (it draws what it's setting), dimensions
+ * hidden, or a page whose sizes are still placeholders (rule 15).
+ */
+export function refTarget(): { c: Constraint; id?: string } | null {
+  if (ed.mode === 'annotate' || ed.tool !== 'select' || elevOpen() || keypadOpen() || !settings.layers.dims || noScaleYet()) return null;
+  const d = selectionDim();
+  if (!d) return null;
+  const sk = SK();
+  if (!d.existing) return { c: { ...d.c, value: measure(sk, d.c) } };
+  const e = sk.cons[d.existing];
+  return e.driving === false && !e.kept ? { c: e, id: d.existing } : null;
+}
+
+/** The dimension the grey number shows, when it isn't one of the drawing's yet. */
+export function ghostDim(): Constraint | null {
+  const t = refTarget();
+  return t && !t.id ? t.c : null;
+}
+
+/** Whether the bar offers Make reference: something to keep, in a drawing that can be edited. */
+export const makeRefVisible = (): boolean => !ed.readOnly && !!refTarget();
+
+/** Make reference: the grey number kept, as a reference dimension that stays on screen. One undo step. */
+export function makeReference(): void {
+  const t = refTarget();
+  if (!t || ed.readOnly) return;
+  pushHistory();
+  const sk = SK();
+  if (t.id) sk.cons[t.id].kept = true;
+  else addCons(sk, { ...t.c, driving: false, kept: true });
+  afterEdit();
+}

package/src/model/types.ts

@@ -58,6 +58,11 @@ export interface Constraint {
   value?: number;
   /** false = reference dimension (shown in parentheses, never drives geometry) */
   driving?: boolean;
+  /**
+   * a reference made by hand (the bar's Make reference: editor/refDim.ts): it stays on screen, as an entered dimension
+   * does. Any other reference — one the drawing already set — shows only while it or what it measures is selected.
+   */
+  kept?: boolean;
   /**
    * label offset from the measured span, across it (a distance between parallel lines or walls: along them); a
    * diameter's, how far past the circle the label sits; an angle's, its arc's radius once pulled off its corner

package/src/render/draw.ts

@@ -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, type ElevAct } from './elevation';
 import type { Constraint, Page, Sketch, WallFace, XY } from '../model/types';
@@ -41,8 +42,8 @@ export function rr(c: C2D, x: number, y: number, w: number, h: number, r: number
 }
 
 export interface ChipOpts {
-  /** `r`: its corners' radius (5) */
-  bg: string; fg: string; border?: [string, number?] | null; font?: string; pad?: number; h?: number; minW?: number; r?: number;
+  /** `r`: its corners' radius (5); `dash`: its border dashed so (a grey number nothing keeps yet: editor/refDim.ts) */
+  bg: string; fg: string; border?: [string, number?] | null; font?: string; pad?: number; h?: number; minW?: number; r?: number; dash?: number[];
   kind?: HitChip['kind']; id?: string; rot?: number;
   /**
    * 'link': a measurement of the job sets it. The chip is then Figma's linked measurement (2795:77149): a white badge
@@ -98,7 +99,7 @@ export function chip(c: C2D, text: string, cx: number, cy: number, opts: ChipOpt
   if (rot) { c.translate(cx, cy); c.rotate(rot); c.translate(-cx, -cy); }
   rr(c, x, y, w, h, opts.r ?? 5);
   c.fillStyle = bg; c.fill();
-  if (border) { c.lineWidth = border[1] || 1; c.strokeStyle = border[0]; c.stroke(); }
+  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'; c.textBaseline = 'middle';
   if (mark) {
     const k = h / LINKED.h, inset = LINKED.pad * k, bw = LINKED.badge * k, bx = x + inset, tx = bx + bw + LINKED.gap * k;
@@ -592,76 +593,93 @@ function dimLive(sk: Sketch, id: string, d: Constraint): boolean {
 
 /**
  * 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: C2D, T: Xform, sk: Sketch): void {
   if (!settings.layers.dims) return;
   for (const id in sk.cons) {
     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: [string, number] | null = selected ? [TH.yellow, 2.5] : null;
-    const mark = linked ? 'link' as const : undefined;
-    const wrap = (s: string) => (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]] as const) {
-          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();
+    if (d.driving === false && !d.kept && !bad && !dimLive(sk, id, d)) continue;
+    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: C2D, T: Xform, sk: Sketch, d: Constraint, id: string | null, bad: boolean): void {
+  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: [string, number] | null = 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: ChipOpts = {
+    bg, fg, border, ...(id === null ? {} : { kind: 'dim' as const, id }),
+    mark: linked ? 'link' : undefined, dash: faded && !selected ? [3, 2] : undefined, ...dimChip(),
+  };
+  const wrap = (s: string) => (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(); c.strokeStyle = lineColor; c.lineWidth = 1.2;
+      if (grey) 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]] as const) {
+        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(); }
       }
-      const text = wrap(fmtAng(val)), opts: ChipOpts = { 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)) 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);
-      c.save(); if (ref) c.setLineDash([3, 3]); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue; c.lineWidth = 1.2;
-      c.beginPath(); c.moveTo(ax, ay); c.lineTo(bx, by); c.stroke(); c.restore();
+      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);
 }
 
 /**
@@ -945,9 +963,10 @@ function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
     const lid = lineBetween(sk, c.a!, c.b!);
     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)) {
     onLine(c.l1, 0.75, -1); onLine(c.l2, 0.75, -1);
@@ -976,16 +995,46 @@ function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
   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: Sketch, k: Constraint): [XY, XY] | null {
+  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: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
   const selIds = new Set(ed.sel.map(s => s.id)), selPts = selPoints(sk);
+  const shown: string[] = [];
   for (const id in sk.cons) {
     const k = sk.cons[id];
-    if (isDim(k) || k.elev) continue;
-    const g = GLYPH[k.type];
-    if (!g) continue;
+    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;
       const selected = isSel('cons', id), bad = ed.highlight.has(id) || ed.ana.bad.has(id);