Ty_Tech/SlabUploader
6
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fe): debounce mask auto-run 500ms after slider/sheet changes

Browse Source 
Rapid sensitivity drags triggered a flood of async mask runs; an in-flight
run could settle after the owner pressed Approve and clobber the state, so
the Approve click read a snapshot with overlay:null and early-returned.
Debounce 500ms after the user stops adjusting so the mask settles before any
interaction and the click reads a stable state.
This commit is contained in:
Ty Balascio
2026-09-25 09:19:52 -07:00
parent 703655a763
commit 0bc86ecc6d
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/capture/SessionCapture.svelte
+8 -3
View File
@@ -71,12 +71,17 @@
let fileInput: HTMLInputElement; let fileInput: HTMLInputElement;
// Auto-run the mask so the overlay (and preview) populate without the owner // Auto-run the mask so the overlay (and preview) populate without the owner
// pressing Approve first. `controlKey` changes only on sheet/sensitivity // pressing Approve first. Debounced 500ms after the user stops adjusting the
// edits (never on the overlay itself), so this fires on entry and on each // sheet/sensitivity, so rapid slider drags don't trigger a flood of async
// control change - but not when approveMask settles the overlay (no loop). // mask runs (and an in-flight run can't clobber the state around an Approve
// click). Keyed on control values, not the overlay, so settling never loops.
let maskRunTimer = 0;
$: controlKey = kind === 'mask' && cap.control ? `${cap.control.sheet}:${cap.control.sensitivity}` : null; $: controlKey = kind === 'mask' && cap.control ? `${cap.control.sheet}:${cap.control.sensitivity}` : null;
$: if (controlKey && cap.source && cap.source.widthPx > 0) { $: if (controlKey && cap.source && cap.source.widthPx > 0) {
clearTimeout(maskRunTimer);
maskRunTimer = setTimeout(() => {
void session.approveMask(); void session.approveMask();
}, 500);
} }
function pickFiles(e: Event) { function pickFiles(e: Event) {