oxedyne/daimond/dev/probe_sheetcancel.mjs
2.1 KiB, 1 run
created by r2519314175:75, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | // probe_sheetcancel.mjs — what the sheet does when the browser takes the gesture. |
| 2 | // |
| 3 | // A drag on the grabber is a pointer stream, and a pointer stream can end in |
| 4 | // `pointercancel` rather than `pointerup` — which is exactly what happens when the |
| 5 | // browser decides mid-drag that the gesture is its own (a pan, a back-swipe, a |
| 6 | // scroll it has claimed). `bindGrab` listens for `pointerup` only. |
| 7 | // |
| 8 | // eval "$(bash dev/world.sh 13 --env)" |
| 9 | // node dev/probe_sheetcancel.mjs |
| 10 | import { open, scratch } from './harness.mjs'; |
| 11 | |
| 12 | const s = await open({ name: 'sheetcancel', profile: scratch('pw', 'sheetcancel'), touch: true }); |
| 13 | const { page } = s; |
| 14 | const sleep = (ms) => new Promise(r => setTimeout(r, ms)); |
| 15 | |
| 16 | const state = (tag) => page.evaluate((tag) => { |
| 17 | const sh = document.getElementById('msheet'); |
| 18 | return { tag, h: Math.round(sh.getBoundingClientRect().height), |
| 19 | dragging: sh.classList.contains('dragging') }; |
| 20 | }, tag); |
| 21 | |
| 22 | try { |
| 23 | await page.waitForTimeout(1200); |
| 24 | await page.keyboard.press('Escape'); |
| 25 | await sleep(400); |
| 26 | await page.setViewportSize({ width: 390, height: 844 }); |
| 27 | await sleep(600); |
| 28 | await page.evaluate(() => window.DaimondSheet.open('web')); |
| 29 | await sleep(900); |
| 30 | console.log(JSON.stringify(await state('sheet up'))); |
| 31 | |
| 32 | // A drag that the browser then claims for itself. |
| 33 | await page.evaluate(() => { |
| 34 | const g = document.getElementById('msheet-grab'); |
| 35 | const r = g.getBoundingClientRect(); |
| 36 | const y = r.top + r.height / 2; |
| 37 | const ev = (type, cy) => g.dispatchEvent(new PointerEvent(type, { |
| 38 | pointerId: 1, pointerType: 'touch', isPrimary: true, |
| 39 | clientX: 195, clientY: cy, bubbles: true, cancelable: true })); |
| 40 | ev('pointerdown', y); |
| 41 | ev('pointermove', y + 140); |
| 42 | ev('pointercancel', y + 140); |
| 43 | }); |
| 44 | await sleep(400); |
| 45 | console.log(JSON.stringify(await state('after the browser cancelled the drag'))); |
| 46 | |
| 47 | // And what that costs: a keyboard show/hide no longer re-fits the sheet, |
| 48 | // because the re-fit is skipped while `.dragging` is on. |
| 49 | await page.setViewportSize({ width: 390, height: 600 }); |
| 50 | await sleep(700); |
| 51 | console.log(JSON.stringify(await state('after the viewport shrank (keyboard up)'))); |
| 52 | } finally { |
| 53 | await s.close(); |
| 54 | } |