openpencil/tests/e2e/app/opened-documents.spec.ts
Danila Poyarkov cb075b3e1a
perf: speed up opening large pages (#953)
* perf(canvas): find guide owners from an index instead of walking the page

Drawing and hit-testing guides visited every layer of the page on each frame to find the few that carry guides; on a large page that took about 1.2s of a load's rendering. The graph now keeps the set of layers with guides current from its node events, and both read it.

* perf(layout): write only changed geometry and request one render per layout pass

Layout wrote every laid-out layer's geometry whether or not it changed, so each pass over a large page notified every graph listener for every layer; a page load spent about 1s handling those updates. Layout now writes only the fields that changed, and the updates a layout pass makes ask for a single render, queued for before the next frame, instead of bumping the editor's reactive versions once per layer.

* test(canvas): drop the graph double the guide tests no longer use

* perf(fig): copy an opened file once on the main thread instead of three times

Opening a .fig in the browser copied the file for a main-thread fallback the caller's buffer already served, then copied it twice more for the worker, which parses from one and keeps the other as the original archive. A 109MB file briefly took over 400MB on the main thread. The fallback now reuses the caller's buffer, and the worker receives one copy and makes its archive copy itself.

* docs(changelog): note faster large-page loads

* fix(app): run recovery and autosave after edits, not redraws

Recovery and autosave watched sceneVersion, a render counter that every
requestRender bumps: opening a file, layout passes, fonts, and each layer a
page loads. Safari has no File System Access API, so its opened files have
no writable source and always get recovery snapshots. Loading a page also
invalidated the original archive, so a snapshot encoded the whole document
again; on the Preline UI kit's CMS page that ran about 100 s on the main
thread in WebKit before failing.

Recovery, autosave, and saved versions now follow the content revision of
createDocumentChanges. A page's layers loading from the opened file, which
runs inside applyImportedStateDuring on both the worker and main-thread
paths, no longer counts as an edit for that revision or for the original
archive, and asks for one render rather than one per layer.

In WebKit the CMS page switch drops from 105-133 s to 21 s, and its longest
main-thread stall from 90-117 s to 1.4 s.

* refactor(app): stop storing a version with recovery snapshots

Adopting a snapshot now protects the document's current content revision,
so nothing reads the version a snapshot was taken at. Snapshots saved by
earlier versions carry a sceneVersion field instead; dropping the field
keeps the metadata type true for both. Tests tell snapshots apart by the
bytes they were built with.
2026-10-07 20:57:57 +00:00

64 lines
2.4 KiB
TypeScript

import { expect, test, type Page } from '@playwright/test'
import type * as AppTabs from '@/app/tabs'
import { CanvasHelper } from '#tests/helpers/canvas'
import { testPath } from '#tests/helpers/paths'
async function openFixture(page: Page, fixture: string) {
await page.route(`**/__fixtures/${fixture}`, (route) =>
route.fulfill({ path: testPath('fixtures', fixture) })
)
await page.goto('/?test')
await new CanvasHelper(page).waitForInit()
await page.evaluate(async (name) => {
const tabsURL = '/src/app/tabs/index.ts'
const tabs: typeof AppTabs = await import(tabsURL)
const response = await fetch(`/__fixtures/${name}`)
await tabs.openFileInNewTab(new File([await response.arrayBuffer()], name))
}, fixture)
const tab = page
.locator('[data-slot="tab-item"]')
.filter({ hasText: fixture.replace(/\.fig$/, '') })
await expect(tab).toBeVisible()
await waitForPreparation(page)
return tab
}
async function waitForPreparation(page: Page) {
await expect
.poll(() => page.evaluate(() => window.openPencil?.getStore?.()?.state.preparation ?? null))
.toBeNull()
}
// Opening a page lays it out, which updates node sizes and positions but is not an edit.
test('an opened .fig file stays saved until it is edited', async ({ page }) => {
// An auto-layout file whose layout the app recomputes on its first page.
const tab = await openFixture(page, 'gold-preview.fig')
await expect(tab.getByRole('img', { name: 'Unsaved changes' })).toHaveCount(0)
await tab.getByTestId('tabbar-close').click()
await expect(page.getByRole('alertdialog')).toHaveCount(0)
await expect(tab).toHaveCount(0)
})
// A page's layers load from the opened file the first time it is shown.
test('showing another page of an opened .fig file keeps it saved', async ({ page }) => {
const tab = await openFixture(page, 'slots.fig')
await page.getByTestId('pages-item').filter({ hasText: 'Slots fixture' }).click()
await waitForPreparation(page)
await expect
.poll(() =>
page.evaluate(() => {
const store = window.openPencil?.getStore?.()
return store ? store.graph.getChildren(store.state.currentPageId).length : 0
})
)
.toBeGreaterThan(0)
await expect(tab.getByRole('img', { name: 'Unsaved changes' })).toHaveCount(0)
await tab.getByTestId('tabbar-close').click()
await expect(page.getByRole('alertdialog')).toHaveCount(0)
await expect(tab).toHaveCount(0)
})