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
@@ -11,7 +11,7 @@
import { readFileSync } from 'node:fs';
import { expect, test, type Page } from '@playwright/test';
import { JAVA_LABEL_FONT } from '../src/canvas/layout.js';
import { drag, drawing, openEditor, serveEditor } from './editorPage.js';
import { documentUpdates, drag, drawing, openEditor, serveEditor } from './editorPage.js';
let server: { readonly base: string; readonly close: () => Promise<void> };
@@ -69,9 +69,11 @@ test('makes, moves, resizes, colours and types documentation as Java does, and p
// Java's paint in the documentation mode: grey at an opacity of 200.
expect(await fill(page, rectangle.id)).toBe('rgba(204, 204, 204, 0.784)');
// Moved by its middle, resized by its corner to Java's smallest (20 × 20).
// Moved by its middle, resized by its corner to Java's smallest (20 × 20); a drag is one change of the document, when it is let go.
const changes = await documentUpdates(page);
await drag(page, drop, { x: drop.x + 40, y: drop.y + 30 });
await expect.poll(async () => (await docOf(page, rectangle.id))!.x - rectangle.x).toBeGreaterThan(20);
expect(await documentUpdates(page)).toBe(changes + 1);
const moved = (await docOf(page, rectangle.id))!;
const corner = (await page.locator(`g[data-doc="${rectangle.id}"] .doc-focus`).boundingBox())!;
await drag(page, { x: corner.x + corner.width - 2, y: corner.y + corner.height - 2 }, { x: corner.x - 50, y: corner.y - 50 });