3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(studio): a drag on the photo holds the render until the finger lifts

Browse Source
This commit is contained in:
3dtours
2026-10-13 19:56:46 +07:00
parent db2fae9ada
commit 4eb74c3779
3 changed files with 150 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/scripts/studio-drag-check.mjs
+21
View File
@@ -279,6 +279,27 @@ const quarter = await rulerValue();
step('a finger dragged to the right lifts the knob with it', Math.abs(quarter - 50) <= 1, `CONTRAST ${quarter} for a quarter of the width`);
step('and the photo stayed where it was — the drag is the value, not the view', (await scale()) === 1, `scale ${await scale()}`);
// --- the look waits for the hand to come off ---------------------------------
// Rendering the look is the one thing in a drag that costs more than a frame, so
// it is held while the finger is down: the number moves on the row as the hand
// does, the photo's own src does not — not even over a pause a debounce would
// have rendered on — and it lands once, when the finger lifts.
const srcBefore = await page.$eval('.canvas-wrap img', (e) => e.src);
const from = await rulerValue();
await touch('touchStart', [[box.cx, box.cy]]);
await touch('touchMove', [[box.cx + box.w * 0.1, box.cy]]);
await page.waitForTimeout(600);
const srcMid = await page.$eval('.canvas-wrap img', (e) => e.src);
const live = await rulerValue();
step('the number is on the row while the hand is still on the photo', Math.abs(live - (from + 20)) <= 1, `CONTRAST ${from} -> ${live}`);
step('and the look itself is not rendered under it', srcMid === srcBefore, srcMid === srcBefore ? 'the photo held' : 'the photo re-rendered mid-drag');
await touch('touchMove', [[box.cx + box.w * 0.2, box.cy]]);
await touch('touchEnd', []);
await page.waitForFunction((before) => document.querySelector('.canvas-wrap img')?.src !== before, srcBefore, { timeout: 30_000 }).catch(() => {});
const srcAfter = await page.$eval('.canvas-wrap img', (e) => e.src);
step('the look lands once, when the finger lifts', srcAfter !== srcBefore, srcAfter === srcBefore ? 'nothing rendered' : 'one render for the gesture');
step('and the knob stopped where the hand left it', Math.abs((await rulerValue()) - (from + 40)) <= 1, `CONTRAST ${await rulerValue()}`);
// Past the far edge the number stops at its own end rather than running on.
await drag([box.cx, box.cy], [box.w * 0.6, 0]);
step('dragged past the edge, the knob stops at its own end', (await rulerValue()) === 100, `CONTRAST ${await rulerValue()}`);