feat: F5.6d a drag is one change of the document; the others see it through the presence

Moving a device, moving or resizing a documentation item went into the
shared document at every pointer move: 59 updates a second, each leaving
about 18 bytes of history (M4 on test-filius). Now the editor keeps the drag
while it lasts, shows it itself and tells the others through the awareness
(moving, at most every 50 ms, the end at once), and writes it once when it
is let go. A drag the browser cancels or a second finger turns into a pinch
is written where it is; WebKit sends a second pointerdown for the first
finger when another comes, which had lost the drag.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-10 07:17:38 +00:00
co-authored by Claude Opus 5.5
parent 8991df8b83
commit 44b3f3ccb2
16 changed files with 418 additions and 45 deletions
+20 -3
View File
@@ -14,7 +14,7 @@ export interface Point {
readonly y: number;
}
type TouchType = 'touchStart' | 'touchMove' | 'touchEnd';
type TouchType = 'touchStart' | 'touchMove' | 'touchEnd' | 'touchCancel';
export interface Fingers {
tap(at: Point): Promise<void>;
@@ -24,6 +24,10 @@ export interface Fingers {
drag(from: Point, to: Point, steps?: number): Promise<void>;
/** Two fingers either side of a middle, moved from one distance apart to another. */
pinch(middle: Point, from: number, to: number, steps?: number): Promise<void>;
/** One finger moved from one point to another, then a second one put down beside it and both moved apart. */
dragThenPinch(from: Point, to: Point): Promise<void>;
/** One finger moved from one point to another, then the touch cancelled (the browser took it). */
dragThenCancel(from: Point, to: Point): Promise<void>;
}
interface WebKitSession {
@@ -47,8 +51,8 @@ export async function fingers(page: Page): Promise<Fingers> {
// WebKit ends a touch with the fingers lifted, not with none.
let last: readonly Point[] = [];
send = (type, points) => {
const touched = type === 'touchEnd' ? last : points;
if (type !== 'touchEnd') last = points;
const touched = type === 'touchEnd' || type === 'touchCancel' ? last : points;
if (type !== 'touchEnd' && type !== 'touchCancel') last = points;
return session.send('Input.dispatchTouchEvent', { type, touchPoints: touched.map(({ x, y }, id) => ({ x: Math.round(x), y: Math.round(y), id })) });
};
} else {
@@ -81,5 +85,18 @@ export async function fingers(page: Page): Promise<Fingers> {
await page.waitForTimeout(150);
await send('touchEnd', []);
},
async dragThenPinch(from, to) {
await send('touchStart', [from]);
for (const share of steps(8)) await send('touchMove', [{ x: from.x + (to.x - from.x) * share, y: from.y + (to.y - from.y) * share }]);
await send('touchStart', [to, { x: to.x + 60, y: to.y }]);
for (const share of steps(4)) await send('touchMove', [{ x: to.x - 20 * share, y: to.y }, { x: to.x + 60 + 20 * share, y: to.y }]);
await page.waitForTimeout(150);
await send('touchEnd', []);
},
async dragThenCancel(from, to) {
await send('touchStart', [from]);
for (const share of steps(8)) await send('touchMove', [{ x: from.x + (to.x - from.x) * share, y: from.y + (to.y - from.y) * share }]);
await send('touchCancel', []);
},
};
}