screengraft 0.54.4 → 0.54.5

package/package.json

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

@@ -639,8 +639,11 @@
      photograph; the thinness is the request. */
   #dofGizmo .case{stroke:rgba(0,0,0,.45);fill:none;vector-effect:non-scaling-stroke}
   #dofGizmo .focus{stroke:#f5623d;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
-  #dofGizmo .far{stroke:#f5623d;stroke-width:0.8;stroke-dasharray:6 5;fill:none;vector-effect:non-scaling-stroke}
-  #dofGizmo .far.out{stroke-dasharray:3 6;opacity:.75}
+  #dofGizmo .far{stroke:#f5623d;stroke-width:0.8;fill:none;vector-effect:non-scaling-stroke}
+  #dofGizmo .far.out{opacity:.75}
+  /* 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.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}
@@ -2728,13 +2731,15 @@ function paintGizmo(){
   const r = 6 * k, rp = 4 * k, fs11 = 11 * k, off = 14 * k;
   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
+  const dash = out => `stroke-dasharray="${(out ? 3 : GUIDE_DASH[0]) * k} ${(out ? 6 : GUIDE_DASH[1]) * k}"`;
   const away = unit(sub(bc, ac));                        // label offsets: away from the other line
   const beyond = dofEnd > 1.0001;
   const beyond2 = two && dofEnd2 < -0.0001;
   gz.innerHTML =
     L(a0, a1, 'case', 'stroke-width="2.6"') + L(a0, a1, 'focus') +
-    L(b0, b1, 'case', 'stroke-width="2.4"') + L(b0, b1, 'far' + (beyond ? ' out' : '')) +
-    (two ? L(c0, c1, 'case', 'stroke-width="2.4"') + L(c0, c1, 'far' + (beyond2 ? ' out' : '')) : '') +
+    L(b0, b1, 'case', `stroke-width="2.4" ${dash(beyond)}`) + L(b0, b1, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
+    (two ? L(c0, c1, 'case', `stroke-width="2.4" ${dash(beyond2)}`) + L(c0, c1, '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"/>` +