fix(capture): damp tape gesture sensitivity

This commit is contained in:
grokbot_ty
2026-09-26 07:58:36 -07:00
parent b841b16cc0
commit d7fc424b69
+14 -4
View File
@@ -147,6 +147,10 @@
let pinchStartAngle = 0; let pinchStartAngle = 0;
let pinchStartTilt = 0; let pinchStartTilt = 0;
const PAN_DAMP = 0.4; // Keep pointer pan movement deliberate without changing keyboard nudges.
const ROTATE_DAMP = 0.4; // Soften two-finger and rotation-handle tilt changes.
const PINCH_ZOOM_DAMP = 0.4; // Blend pinch distance changes toward 1 to avoid zoom jumps.
const stagePoint = (clientX: number, clientY: number): { x: number; y: number } => { const stagePoint = (clientX: number, clientY: number): { x: number; y: number } => {
const el = tapeWrap; const el = tapeWrap;
if (!el) return { x: 0, y: 0 }; if (!el) return { x: 0, y: 0 };
@@ -209,17 +213,23 @@
const dx = pts[1].x - pts[0].x; const dx = pts[1].x - pts[0].x;
const dy = pts[1].y - pts[0].y; const dy = pts[1].y - pts[0].y;
const dist = Math.hypot(dx, dy) || 1; const dist = Math.hypot(dx, dy) || 1;
const z = Math.min(3, Math.max(0.5, pinchStartZoom * (dist / pinchStartDist))); const ratio = dist / pinchStartDist;
const softenedRatio = 1 + (ratio - 1) * PINCH_ZOOM_DAMP;
const z = Math.min(3, Math.max(0.5, pinchStartZoom * softenedRatio));
// Screen y-down atan2 delta matches CSS rotate (positive = clockwise). // Screen y-down atan2 delta matches CSS rotate (positive = clockwise).
const angle = Math.atan2(dy, dx); const angle = Math.atan2(dy, dx);
const deltaDeg = ((angle - pinchStartAngle) * 180) / Math.PI; const deltaDeg = ((angle - pinchStartAngle) * 180) / Math.PI;
emit({ ...live, zoom: z, tiltDeg: clampTiltDeg(pinchStartTilt + deltaDeg) }); emit({ ...live, zoom: z, tiltDeg: clampTiltDeg(pinchStartTilt + deltaDeg * ROTATE_DAMP) });
return; return;
} }
if (!drag) return; if (!drag) return;
const p = stagePoint(e.clientX, e.clientY); const p = stagePoint(e.clientX, e.clientY);
if (drag.kind === 'pan') { if (drag.kind === 'pan') {
emit({ ...live, panX: drag.panX0 + (p.x - drag.x0), panY: drag.panY0 + (p.y - drag.y0) }); emit({
...live,
panX: drag.panX0 + (p.x - drag.x0) * PAN_DAMP,
panY: drag.panY0 + (p.y - drag.y0) * PAN_DAMP,
});
} else if (drag.kind === 'tickA' || drag.kind === 'tickB') { } else if (drag.kind === 'tickA' || drag.kind === 'tickB') {
const pair = drag.kind === 'tickA' const pair = drag.kind === 'tickA'
? clampTickPair(p.y, live.tickB) ? clampTickPair(p.y, live.tickB)
@@ -231,7 +241,7 @@
const a0 = Math.atan2(drag.y0 - cy, drag.x0 - cx); const a0 = Math.atan2(drag.y0 - cy, drag.x0 - cx);
const a1 = Math.atan2(p.y - cy, p.x - cx); const a1 = Math.atan2(p.y - cy, p.x - cx);
const delta = ((a1 - a0) * 180) / Math.PI; const delta = ((a1 - a0) * 180) / Math.PI;
emit({ ...live, tiltDeg: clampTiltDeg(drag.tilt0 + delta) }); emit({ ...live, tiltDeg: clampTiltDeg(drag.tilt0 + delta * ROTATE_DAMP) });
} }
}; };