screengraft 0.54.6 → 0.54.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.54.6",
+  "version": "0.54.8",
   "description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right \u2014 a homography you confirm by hand, not a generative guess.",
   "keywords": [
     "mockup",

package/ui/index.html

@@ -643,11 +643,11 @@
   /* Dash lengths are set inline in photo px scaled by the zoom (SVG dashes
      are viewBox units; non-scaling-stroke does not cover them), so they read
      as 6/5 on screen at any zoom -- the fit overlay's GUIDE_DASH. */
-  #dofGizmo .h{fill:#f5623d;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:move}
+  #dofGizmo .h{fill:none;stroke:#f5623d;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:move}
+  #dofGizmo .hcase{fill:none;stroke:rgba(0,0,0,.35);stroke-width:4;vector-effect:non-scaling-stroke;pointer-events:none}
   #dofGizmo .h.pip{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M17.5 11a6.5 6.5 0 1 1-2.2-4.9' fill='none' stroke='rgba(0,0,0,.85)' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M17.5 11a6.5 6.5 0 1 1-2.2-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15.6 2.6l0.4 4.2-4.2 0.3' fill='none' stroke='rgba(0,0,0,.85)' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6 2.6l0.4 4.2-4.2 0.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, crosshair}
   #dofGizmo .h.thumb{cursor:ew-resize}
-  #dofGizmo .h.hollow{fill:#1a1a1a}
-  #dofGizmo .h.pip{fill:#f5623d}
+  #dofGizmo .h.pip{fill:#f5623d;stroke:#fff;stroke-width:1.2}
   #dofGizmo .h.thumb{fill:#fff;stroke:#f5623d;stroke-width:2}
   #dofGizmo .h:active{cursor:grabbing}
   #dofGizmo text{font:600 11px system-ui,-apple-system,sans-serif;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
@@ -1508,6 +1508,17 @@ function cased(c, path, coreW, coreColor, dash){
 /* A FILLED handle, still cased. cased() strokes twice; a disc has to fill the
    core and put the dark casing around its rim, or the handle loses the
    readability guarantee that makes markers survive an arbitrary photograph. */
+/* A HOLLOW handle: 8px circle, 2px stroke, nothing inside, so the pixel
+   under the handle stays visible; the casing sits outside the ring so the
+   ring itself reads on any photograph (13 Sep 2026, on request). */
+function casedRing(c, x, y, r, coreColor){
+  c.save();
+  c.strokeStyle = CASE_A; c.lineWidth = 2 + CASE_PAD;
+  c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.stroke();
+  c.strokeStyle = coreColor; c.lineWidth = 2;
+  c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.stroke();
+  c.restore();
+}
 function casedDisc(c, x, y, r, coreColor){
   c.save();
   c.strokeStyle = CASE_A; c.lineWidth = 2.0;
@@ -2299,7 +2310,12 @@ function draw(){
   // hollow; the pivot pips went 2.5 -> 3.5 and are filled too, staying visibly
   // smaller than a corner so the two never read as the same control. The gap the
   // edge leaves for each corner grows with it, or the disc sits on the line.
-  const HANDLE_R = 5.5, PIVOT_R = 3.5, HANDLE_GAP = 7.5;
+  // Corner handle: an 8px ring (r to the stroke centre = 4) with a 2px stroke
+  // and the casing outside it, so its visible outer edge is at r + 1 + CASE_PAD/2;
+  // the edge breaks 1px short of that, which is the gap that reads as
+  // "handle, then line" rather than a bead on a wire.
+  const HANDLE_R = 4, PIVOT_R = 3.5;
+  const HANDLE_GAP = HANDLE_R + 1 + CASE_PAD / 2 + 1;
 
   // Guide: the active edge extended to infinity, so you can see the line it
   // is really on. Thinner and dashed — it is a reference, not a handle.
@@ -2345,7 +2361,7 @@ function draw(){
   ctx.font='600 11px system-ui'; ctx.textBaseline='alphabetic';
   P.forEach(([x,y],i) => {
     const on = active && active.kind==='corner' && active.i===i;
-    casedDisc(ctx, x, y, on ? HANDLE_R + 1 : HANDLE_R, CORE_QUAD);
+    casedRing(ctx, x, y, on ? HANDLE_R + 1 : HANDLE_R, CORE_QUAD);
     casedText(ctx, LBL[i], x+13, y-11, 'rgba(255,255,255,.95)');
   });
 }
@@ -2676,6 +2692,7 @@ $('#dofMeasure').onclick = measureDof;
    the SVG's viewBox is the photo so it stays aligned at every zoom for free. */
 const gz = $('#dofGizmo');
 const SIGMA_FULL_FRAC = 0.02;   // mirrors dof.DOF_MAX_FRAC -- keep in step
+const HANDLE_BREAK = 4 + 1 + 2 + 1;   // ring radius + half its stroke + casing + the 1px gap, screen px
 let dofEnd = parseFloat(recall('dofEnd','1')); if (!(dofEnd > 0)) dofEnd = 1;
 // Where along the lines the handles sit (0..1 across the screen's extent).
 // Page-only: it changes nothing in the render. Turning re-derives it so the
@@ -2727,7 +2744,8 @@ function paintGizmo(){
   const c0 = two ? P(dofEnd2, -0.06) : null, c1 = two ? P(dofEnd2, 1.06) : null, cc = two ? P(dofEnd2, dofK) : null;
   const th = P(dofEnd, 0.08 + 0.84 * dofStr);           // the strength thumb slides along the dashed line
   const sigma = dofStr * SIGMA_FULL_FRAC * g.side;
-  const r = 6 * k, rp = 4 * k, fs11 = 11 * k, off = 14 * k;
+  const r = 4 * k, rp = 3.5 * k, fs11 = 11 * k, off = 14 * k;
+  const ring = (p, h, cls='') => `<circle cx="${p[0]}" cy="${p[1]}" r="${r}" class="hcase"/><circle cx="${p[0]}" cy="${p[1]}" r="${r}" class="h ${cls}" data-h="${h}"/>`;
   const L = (x, y, cls, extra='') => `<line x1="${x[0]}" y1="${x[1]}" x2="${y[0]}" y2="${y[1]}" class="${cls}" ${extra}/>`;
   const T = (p, txt, dy) => `<text x="${p[0]}" y="${p[1] + dy}" text-anchor="middle" font-size="${fs11}">${txt}</text>`;
   // GUIDE_DASH in screen px, expressed in photo px; a line past the screen gets a sparser dash
@@ -2735,15 +2753,18 @@ function paintGizmo(){
   const away = unit(sub(bc, ac));                        // label offsets: away from the other line
   const beyond = dofEnd > 1.0001;
   const beyond2 = two && dofEnd2 < -0.0001;
+  // Each line breaks around its ring handle: the ring is hollow, so a line
+  // running through it would show inside. Break = ring outer edge + 1px.
+  const brk = (HANDLE_BREAK) * k;
+  const split = (p0, p1, h) => { const v = unit(sub(p1, p0)); return [[p0, sub(h, mul(v, brk))], [add(h, mul(v, brk)), p1]]; };
+  const LL = (p0, p1, h, cls, extra='') => split(p0, p1, h).map(([x, y]) => L(x, y, cls, extra)).join('');
   gz.innerHTML =
-    L(a0, a1, 'case', 'stroke-width="3"') + L(a0, a1, 'focus') +
-    L(b0, b1, 'case', `stroke-width="2.9" ${dash(beyond)}`) + L(b0, b1, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
-    (two ? L(c0, c1, 'case', `stroke-width="2.9" ${dash(beyond2)}`) + L(c0, c1, 'far' + (beyond2 ? ' out' : ''), dash(beyond2)) : '') +
+    LL(a0, a1, ac, 'case', 'stroke-width="3"') + LL(a0, a1, ac, 'focus') +
+    LL(b0, b1, bc, 'case', `stroke-width="2.9" ${dash(beyond)}`) + LL(b0, b1, bc, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
+    (two ? LL(c0, c1, cc, 'case', `stroke-width="2.9" ${dash(beyond2)}`) + LL(c0, c1, cc, 'far' + (beyond2 ? ' out' : ''), dash(beyond2)) : '') +
     `<circle cx="${a0[0]}" cy="${a0[1]}" r="${rp}" class="h pip" data-h="rotA"/>` +
     `<circle cx="${a1[0]}" cy="${a1[1]}" r="${rp}" class="h pip" data-h="rotB"/>` +
-    `<circle cx="${ac[0]}" cy="${ac[1]}" r="${r}" class="h" data-h="start"/>` +
-    `<circle cx="${bc[0]}" cy="${bc[1]}" r="${r}" class="h hollow" data-h="end"/>` +
-    (two ? `<circle cx="${cc[0]}" cy="${cc[1]}" r="${r}" class="h hollow" data-h="end2"/>` : '') +
+    ring(ac, 'start') + ring(bc, 'end') + (two ? ring(cc, 'end2') : '') +
     `<rect x="${th[0]-r}" y="${th[1]-r}" width="${2*r}" height="${2*r}" transform="rotate(45 ${th[0]} ${th[1]})" class="h thumb" data-h="str"/>` +
     T([ac[0] - away[0]*off*(two ? 0 : 1), ac[1] - away[1]*off*(two ? 0 : 1) + (two ? -off : 0)], 'sharp', 4*k) +
     T([bc[0] + away[0]*off, bc[1] + away[1]*off], `σ ${sigma.toFixed(0)}px from here${beyond ? ' · past the screen' : ''}`, 4*k) +
@@ -2899,9 +2920,38 @@ function swingText(mode){
   if (mode === 'rotB') return 'the left end swings, pivot on the right';
   return 'flat on the rule means aligned';
 }
+/* A corner under the pointer gets a plain magnified view instead of the
+   rectified strip: the strip straightens ONE edge, and a corner is where two
+   meet, so straightening either would bend the other. Same magnification as
+   the strip (H / 2·stripHalf, so the ± buttons work here too), centred on the
+   corner, unrotated, with both edges drawn through it and the ring at the
+   centre. Requested 13 Sep 2026; edges keep the strip as it is. */
+function paintCorner(c, W, H, i){
+  c.setTransform(1,0,0,1,0,0);
+  c.fillStyle = '#0c0c0b'; c.fillRect(0,0,W,H);
+  const P = st.corners[i], M = H / (2*stripHalf);
+  c.save();
+  c.setTransform(M, 0, 0, M, W/2 - P[0]*M, H/2 - P[1]*M);
+  c.imageSmoothingEnabled = true;
+  c.drawImage(img, 0, 0);
+  c.restore();
+  if (stripHC) stretchContrast(c, W, H);
+  const toS = q => [W/2 + (q[0]-P[0])*M, H/2 + (q[1]-P[1])*M];
+  const prev = st.corners[(i+3)%4], next = st.corners[(i+1)%4];
+  for (const q of [prev, next]){
+    const e = toS(q), d = unit(sub(e, [W/2, H/2]));
+    const s0 = add([W/2, H/2], mul(d, HANDLE_GAP_S)), s1 = add([W/2, H/2], mul(d, 4000));
+    cased(c, () => { c.beginPath(); c.moveTo(s0[0], s0[1]); c.lineTo(s1[0], s1[1]); }, QUAD_W, CORE_QUAD);
+  }
+  casedRing(c, W/2, H/2, 4, CORE_QUAD);
+  c.font = '600 11px system-ui'; c.textBaseline = 'middle';
+  casedText(c, LBL[i], W/2 + 12, H/2 - 12, 'rgba(255,255,255,.95)');
+}
+const HANDLE_GAP_S = 4 + 1 + CASE_PAD/2 + 1;   // the same break the canvas leaves around a ring
 function drawStrip(){
   const a = drag || hover || pick;
-  const has = !!(st.corners && a && a.kind === 'edge' && img.naturalWidth);
+  const has = !!(st.corners && a && (a.kind === 'edge' || a.kind === 'corner') && img.naturalWidth);
+  const corner = has && a.kind === 'corner';
   $('#stripZ').textContent = '±' + stripHalf + 'px';
   if (loupeMode === 'dock'){
     $('#floatLoupe').classList.remove('on');
@@ -2911,13 +2961,23 @@ function drawStrip(){
       $('#stripSt').textContent = 'Hover or drag an edge — this straightens it, so misalignment shows as a wedge.';
       return;
     }
-    paintStrip(sctx, W, H, a.i, a.mode);
-    $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
+    if (corner){
+      paintCorner(sctx, W, H, a.i);
+      $('#stripSt').textContent = `${LBL[a.i]} corner · ${(H/(2*stripHalf)).toFixed(1)}× — where the two edges meet`;
+    } else {
+      paintStrip(sctx, W, H, a.i, a.mode);
+      $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
+    }
   } else {
     const fl = $('#floatLoupe');
     if (!has){ fl.classList.remove('on'); return; }
-    paintStrip(fctx, stripF.width, stripF.height, a.i, a.mode);
-    $('#stripFCap').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px — ${swingText(a.mode)}`;
+    if (corner){
+      paintCorner(fctx, stripF.width, stripF.height, a.i);
+      $('#stripFCap').textContent = `${LBL[a.i]} corner · ${(stripF.height/(2*stripHalf)).toFixed(1)}× — where the two edges meet`;
+    } else {
+      paintStrip(fctx, stripF.width, stripF.height, a.i, a.mode);
+      $('#stripFCap').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px — ${swingText(a.mode)}`;
+    }
     fl.classList.add('on');
     const w = fl.offsetWidth || 356, h = fl.offsetHeight || 130;
     let x = lastPointer[0] + 26, y = lastPointer[1] - h - 18;