cb075b3e1a
* 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.
98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { describe, expect, mock, test } from 'bun:test'
|
|
|
|
import { createDefaultNode, SceneGraph } from '@open-pencil/scene-graph'
|
|
import type { SceneNode } from '@open-pencil/scene-graph'
|
|
|
|
import { drawGuides } from '#core/canvas/guides/draw'
|
|
|
|
import { createMockCanvas, createMockRenderer, mockCalls } from '../effects/helpers'
|
|
import { asCanvas } from '../helpers'
|
|
|
|
function graphWithGuides(guides: SceneNode['guides']): SceneGraph {
|
|
const graph = new SceneGraph()
|
|
graph.rootId = 'root'
|
|
graph.nodes = new Map([
|
|
['page', createDefaultNode(() => 'page', 'CANVAS', { childIds: [], guides })]
|
|
])
|
|
return graph
|
|
}
|
|
|
|
describe('page guide rendering', () => {
|
|
test('renders imported Figma page guides in screen space', () => {
|
|
const r = createMockRenderer({
|
|
pageId: 'page',
|
|
panX: 10,
|
|
panY: 20,
|
|
zoom: 2,
|
|
viewportWidth: 300,
|
|
viewportHeight: 200
|
|
})
|
|
const canvas = createMockCanvas()
|
|
const graph = graphWithGuides([
|
|
{ id: 'x', axis: 'x', position: 42 },
|
|
{ id: 'y', axis: 'y', position: 84 }
|
|
])
|
|
|
|
drawGuides(r, asCanvas(canvas), graph, undefined)
|
|
|
|
expect(mockCalls(canvas.drawRect)).toHaveLength(2)
|
|
expect(mockCalls(r.ck.LTRBRect)).toEqual([
|
|
[94, 0, 95, 200],
|
|
[0, 188, 300, 189]
|
|
])
|
|
})
|
|
|
|
test('renders nested frame guides', () => {
|
|
const r = createMockRenderer({ pageId: 'page', zoom: 1, panX: 0, panY: 0 })
|
|
const canvas = { ...createMockCanvas(), drawLine: mock(() => undefined) }
|
|
const nested = createDefaultNode(() => 'nested', 'FRAME', {
|
|
parentId: 'frame',
|
|
childIds: [],
|
|
x: 20,
|
|
y: 30,
|
|
width: 100,
|
|
height: 80,
|
|
rotation: 0,
|
|
flipX: false,
|
|
flipY: false,
|
|
guides: [{ id: 'nested-guide', axis: 'x', position: 10 }]
|
|
})
|
|
const frame: SceneNode = {
|
|
...nested,
|
|
id: 'frame',
|
|
parentId: 'page',
|
|
childIds: ['nested'],
|
|
x: 100,
|
|
y: 100,
|
|
guides: []
|
|
}
|
|
const page = createDefaultNode(() => 'page', 'CANVAS', {
|
|
parentId: null,
|
|
childIds: ['frame'],
|
|
guides: []
|
|
})
|
|
const nodes = new Map([
|
|
['page', page],
|
|
['frame', frame],
|
|
['nested', nested]
|
|
])
|
|
const graph = new SceneGraph()
|
|
graph.rootId = 'root'
|
|
graph.nodes = nodes
|
|
|
|
drawGuides(r, asCanvas(canvas), graph, undefined)
|
|
|
|
expect(canvas.drawLine).toHaveBeenCalled()
|
|
})
|
|
|
|
test('ignores pages without guides', () => {
|
|
const r = createMockRenderer({ pageId: 'page' })
|
|
const canvas = createMockCanvas()
|
|
const graph = graphWithGuides([])
|
|
|
|
drawGuides(r, asCanvas(canvas), graph, undefined)
|
|
|
|
expect(canvas.drawRect).not.toHaveBeenCalled()
|
|
})
|
|
})
|