tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(canvas): 画布视口 - 交互期避免强制布局和整树样式重算

Browse Source 
拖拽和缩放时用世界坐标定位浮层，暂停更新继承缩放变量，概览优先用缩略图并限制解码缓存。
This commit is contained in:
ddcat666
2026-10-10 20:19:54 +08:00
parent dd66be15cb
commit 1f5ecca33a
6 changed files with 173 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/test/canvas-grid-viewport.test.tsx
View File

@@ -70,8 +70,9 @@ describe("canvas screen-space background", () => {
for (const viewport of viewports) {
applyCanvasLiveViewport(container as unknown as HTMLDivElement, viewport, false);
expect(world.style.transform).toBe(`translate3d(${viewport.x}px, ${viewport.y}px, 0) scale(${viewport.k / 0.5})`);
expect(properties.get("--canvas-live-scale")).toBe(String(viewport.k));
expect(properties.get("--canvas-live-inverse-scale")).toBe(String(1 / viewport.k));
// 交互期不改继承变量，避免整棵节点子树在每一帧强制重算样式。
expect(properties.has("--canvas-live-scale")).toBe(false);
expect(properties.has("--canvas-live-inverse-scale")).toBe(false);
expect(gridWrites).toEqual([]);
}
expect(graphics).toEqual(viewports);
@@ -81,6 +82,8 @@ describe("canvas screen-space background", () => {
container.dataset.canvasViewportInteracting = "false";
applyCanvasLiveViewport(container as unknown as HTMLDivElement, viewports[0]);
expect(properties.get("--canvas-live-scale")).toBe("1");
expect(properties.get("--canvas-live-inverse-scale")).toBe("1");
expect(world.style.willChange).toBe("");
expect(previews).toEqual([viewports[0]]);
expect(scrolls).toBe(1);