screengraft 0.54.1 → 0.54.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.54.1",
+  "version": "0.54.3",
   "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

@@ -1472,14 +1472,29 @@ const recall = (k,d) => { try{ const v = localStorage.getItem('sg.'+k); return v
    The dark casing underneath is NOT optional and stays: flat accent measures
    ~1.06:1 against mid-tone photography, which is the failure the casing was
    introduced to fix. CORE_IDLE stays white for the strip's idle rule. */
-const CASE_A = 'rgba(0,0,0,.62)', CORE_IDLE = 'rgba(255,255,255,.92)';
+const CASE_A = 'rgba(0,0,0,.45)', CORE_IDLE = 'rgba(255,255,255,.92)';
 const CORE_ACTIVE = '#f5623d';
 const CORE_QUAD = '#f23b0d';
+// Line weights for the fit overlay, in one place. Thinned 13 Sep 2026 on
+// request: quad 1 -> 0.8, active edge 2 -> 1.5, casing +2.5 -> +1.6 at 45%
+// black instead of 62%. The casing is still there -- it is the part that
+// survives an arbitrary photograph -- just lighter.
+// There is no native rotate cursor; this is a 22px circular arrow, white
+// with a dark outline so it reads on any photograph, hotspot at its centre.
+const ROTATE_CURSOR = 'url("data:image/svg+xml;utf8,' + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">' +
+  '<path 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"/>' +
+  '<path d="M17.5 11a6.5 6.5 0 1 1-2.2-4.9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>' +
+  '<path 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"/>' +
+  '<path d="M15.6 2.6l0.4 4.2-4.2 0.3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+  '</svg>') + '") 11 11, crosshair';
+const QUAD_W = 0.8, QUAD_ACTIVE_W = 1.5, GUIDE_W = 0.8, CASE_PAD = 1.6;
+const GUIDE_DASH = [10, 7];
 function cased(c, path, coreW, coreColor, dash){
   c.save();
   if (dash) c.setLineDash(dash);
   c.lineCap = 'round'; c.lineJoin = 'round';
-  c.strokeStyle = CASE_A; c.lineWidth = coreW + 2.5; path(); c.stroke();
+  c.strokeStyle = CASE_A; c.lineWidth = coreW + CASE_PAD; path(); c.stroke();
   c.strokeStyle = coreColor; c.lineWidth = coreW; path(); c.stroke();
   c.restore();
 }
@@ -1488,8 +1503,8 @@ function cased(c, path, coreW, coreColor, dash){
    readability guarantee that makes markers survive an arbitrary photograph. */
 function casedDisc(c, x, y, r, coreColor){
   c.save();
-  c.strokeStyle = CASE_A; c.lineWidth = 2.5;
-  c.beginPath(); c.arc(x, y, r + 0.75, 0, Math.PI*2); c.stroke();
+  c.strokeStyle = CASE_A; c.lineWidth = 1.8;
+  c.beginPath(); c.arc(x, y, r + 0.6, 0, Math.PI*2); c.stroke();
   c.fillStyle = coreColor;
   c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.fill();
   c.restore();
@@ -2285,7 +2300,7 @@ function draw(){
     const a=P[active.i], b=P[(active.i+1)%4], d=unit(sub(b,a)), big=4000;
     cased(ctx, () => { ctx.beginPath();
       ctx.moveTo(a[0]-d[0]*big, a[1]-d[1]*big); ctx.lineTo(b[0]+d[0]*big, b[1]+d[1]*big); },
-      0.8, CORE_ACTIVE, [2,6]);
+      GUIDE_W, CORE_ACTIVE, GUIDE_DASH);
   }
 
   for (let i=0;i<4;i++){
@@ -2300,7 +2315,7 @@ function draw(){
     const s1 = add(a, mul(d, Math.max(0, L - gap)));
     if (L > 1){
       cased(ctx, () => { ctx.beginPath(); ctx.moveTo(s0[0],s0[1]); ctx.lineTo(s1[0],s1[1]); },
-            on ? 2 : 1, CORE_QUAD);
+            on ? QUAD_ACTIVE_W : QUAD_W, CORE_QUAD);
     }
     // Pivot pips on the active edge keep their meaning: grab near an end to
     // rotate. Filled, like the corners, but deliberately smaller — size is what
@@ -2382,7 +2397,7 @@ cv.onpointermove = e => {
     const h = hitTest(p);
     const changed = JSON.stringify(h) !== JSON.stringify(hover);
     hover = h;
-    cv.style.cursor = h ? (h.kind==='corner' ? 'grab' : (h.mode==='translate' ? 'move' : 'crosshair')) : 'default';
+    cv.style.cursor = h ? (h.kind==='corner' ? 'move' : (h.mode==='translate' ? 'move' : ROTATE_CURSOR)) : 'default';
     if (changed){ draw(); drawStrip(); }
     return;
   }
@@ -2655,6 +2670,10 @@ $('#dofMeasure').onclick = measureDof;
 const gz = $('#dofGizmo');
 const SIGMA_FULL_FRAC = 0.02;   // mirrors dof.DOF_MAX_FRAC -- keep in step
 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
+// handle stays on the point you turned about instead of sliding along the line.
+let dofK = 0.5;
 // The near limit. null = one-sided (the plane of focus at the screen's edge).
 let dofEnd2 = recall('dofEnd2','') === '' ? null : parseFloat(recall('dofEnd2','')); if (dofEnd2 !== null && !(dofEnd2 < 1)) dofEnd2 = null;
 function dofEndV(){ return dofOn ? dofEnd : 1; }
@@ -2695,10 +2714,10 @@ function paintGizmo(){
   const k = W / Math.max(im.clientWidth, 1);           // photo px per screen px
   const g = gizmoGeom(); if (!g.H || !g.Hi) return;
   const P = (f, q) => applyH(g.H, gzPt(g, f, q));
-  const a0 = P(dofStart, -0.06), a1 = P(dofStart, 1.06), ac = P(dofStart, 0.5);
-  const b0 = P(dofEnd, -0.06), b1 = P(dofEnd, 1.06), bc = P(dofEnd, 0.5);
+  const a0 = P(dofStart, -0.06), a1 = P(dofStart, 1.06), ac = P(dofStart, dofK);
+  const b0 = P(dofEnd, -0.06), b1 = P(dofEnd, 1.06), bc = P(dofEnd, dofK);
   const two = dofEnd2 !== null;
-  const c0 = two ? P(dofEnd2, -0.06) : null, c1 = two ? P(dofEnd2, 1.06) : null, cc = two ? P(dofEnd2, 0.5) : null;
+  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;
@@ -2733,7 +2752,19 @@ let gzDrag = null;
 gz.addEventListener('pointerdown', e => {
   const h = e.target.dataset && e.target.dataset.h; if (!h) return;
   e.preventDefault(); gz.setPointerCapture(e.pointerId);
-  gzDrag = {h}; gz.classList.add('drag');
+  gzDrag = {h};
+  if (h === 'rotA' || h === 'rotB'){
+    // Turning keeps the SHARP line's centre where it is on the screen and the
+    // limits at their distances from it, in screenshot pixels. The stored
+    // numbers are fractions of the screen's extent along the direction, and
+    // that extent changes with the angle -- so turning on the fractions alone
+    // slid every line as it turned (reported 13 Sep 2026).
+    const g = gizmoGeom();
+    gzDrag.pivot = gzPt(g, dofStart, dofK);
+    gzDrag.dFar = (dofEnd - dofStart) * (g.hi - g.lo);
+    gzDrag.dNear = dofEnd2 === null ? null : (dofStart - dofEnd2) * (g.hi - g.lo);
+  }
+  gz.classList.add('drag');
 });
 gz.addEventListener('pointermove', e => {
   if (!gzDrag) return;
@@ -2752,11 +2783,26 @@ gz.addEventListener('pointermove', e => {
   } else {
     // Turn about the SHARP line's centre -- the plane of focus is what turns;
     // the pip under the pointer follows.
-    const c = gzPt(g, dofStart, 0.5);
+    const c = gzDrag.pivot;
     const v = [p[0]-c[0], p[1]-c[1]];
     const sign = gzDrag.h === 'rotB' ? 1 : -1;      // rotB sits at +u, rotA at -u
-    dofAng = ((Math.atan2(v[1]*sign, v[0]*sign) * 180 / Math.PI - 90) % 360 + 360) % 360;
-    if (e.shiftKey) dofAng = Math.round(dofAng / 15) * 15;
+    let ang = ((Math.atan2(v[1]*sign, v[0]*sign) * 180 / Math.PI - 90) % 360 + 360) % 360;
+    if (e.shiftKey) ang = Math.round(ang / 15) * 15;
+    else {
+      // Magnetic to the screen's own axes: within 4° of 0/90/180/270 the lines
+      // run exactly along the screen's edges, which is what "along the phone"
+      // means in the photograph once the perspective is applied.
+      const near = Math.round(ang / 90) * 90;
+      if (Math.abs(((ang - near) + 180) % 360 - 180) < 4) ang = near % 360;
+    }
+    dofAng = ang;
+    // Re-express the lines against the new extent so nothing moves but the angle.
+    const g2 = gizmoGeom();
+    const f0 = (c[0]*g2.d[0] + c[1]*g2.d[1] - g2.lo) / (g2.hi - g2.lo);
+    dofStart = Math.max(0, Math.min(0.95, f0));
+    dofK = Math.max(0.05, Math.min(0.95, (c[0]*g2.u[0] + c[1]*g2.u[1] - g2.ulo) / (g2.uhi - g2.ulo)));
+    dofEnd = Math.max(dofStart + 0.05, Math.min(1.5, dofStart + gzDrag.dFar / (g2.hi - g2.lo)));
+    if (dofEnd2 !== null) dofEnd2 = Math.max(-0.5, Math.min(dofStart - 0.05, dofStart - gzDrag.dNear / (g2.hi - g2.lo)));
   }
   paintDof(); paintGizmo(); autoPreview();
 });