mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-22 20:41:50 +08:00
feat(editor): improve edgeless perf & memory usage (#14591)
#### PR Dependency Tree * **PR #14591** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * New canvas renderer debug metrics and controls for runtime inspection. * Mindmap/group reordering now normalizes group targets, improving reorder consistency. * **Bug Fixes** * Fixed connector behavior for empty/degenerate paths. * More aggressive viewport invalidation so structural changes display correctly. * Improved z-index synchronization during transforms and layer updates. * **Performance** * Retained DOM caching for brushes, shapes, and connectors to reduce DOM churn. * Targeted canvas refreshes, pooling, and reuse to lower redraw and memory overhead. * **Tests** * Added canvas renderer performance benchmarks and curve edge-case unit tests. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
DarkSky
@@ -0,0 +1,197 @@
|
||||
import { test } from '@affine-test/kit/playwright';
|
||||
import {
|
||||
type CanvasRendererPerfSnapshot,
|
||||
deleteEdgelessElements,
|
||||
getCanvasRendererPerfSnapshot,
|
||||
resetCanvasRendererPerfMetrics,
|
||||
seedEdgelessPerfScene,
|
||||
} from '@affine-test/kit/utils/edgeless-perf';
|
||||
import {
|
||||
clickEdgelessModeButton,
|
||||
dragView,
|
||||
fitViewportToContent,
|
||||
getEdgelessSelectedIds,
|
||||
getSelectedXYWH,
|
||||
locateEditorContainer,
|
||||
setEdgelessTool,
|
||||
setViewportZoom,
|
||||
} from '@affine-test/kit/utils/editor';
|
||||
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
||||
import {
|
||||
clickNewPageButton,
|
||||
waitForEditorLoad,
|
||||
} from '@affine-test/kit/utils/page-logic';
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
const PERF_ENV = 'AFFINE_RUN_PERF_E2E';
|
||||
const perfEnabled = process.env[PERF_ENV] === '1';
|
||||
const modKey = process.platform === 'darwin' ? 'Meta' : 'Control';
|
||||
|
||||
type PerfScenarioResult = {
|
||||
name: string;
|
||||
snapshot: CanvasRendererPerfSnapshot;
|
||||
};
|
||||
|
||||
test.describe.serial('canvas renderer perf probes', () => {
|
||||
test.skip(!perfEnabled, `Set ${PERF_ENV}=1 to run manual perf probes`);
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await openHomePage(page);
|
||||
await waitForEditorLoad(page);
|
||||
await clickNewPageButton(page);
|
||||
await clickEdgelessModeButton(page);
|
||||
await locateEditorContainer(page).click();
|
||||
});
|
||||
|
||||
test('collect metrics for common edgeless canvas scenarios', async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.slow();
|
||||
|
||||
const results: PerfScenarioResult[] = [];
|
||||
let addedShapeIds: string[] = [];
|
||||
|
||||
const selectWholePerfScene = async () => {
|
||||
await setEdgelessTool(page, 'default');
|
||||
await dragView(page, [80, 140], [2300, 1500]);
|
||||
await expect
|
||||
.poll(async () => (await getEdgelessSelectedIds(page)).length)
|
||||
.toBeGreaterThan(0);
|
||||
};
|
||||
|
||||
const recordScenario = async (
|
||||
name: string,
|
||||
action: () => Promise<void>
|
||||
) => {
|
||||
await resetCanvasRendererPerfMetrics(page);
|
||||
await action();
|
||||
await page.waitForTimeout(400);
|
||||
|
||||
const snapshot = await getCanvasRendererPerfSnapshot(page);
|
||||
results.push({ name, snapshot });
|
||||
console.log(
|
||||
`[canvas-perf] ${name}: ${JSON.stringify(snapshot.metrics, null, 2)}`
|
||||
);
|
||||
};
|
||||
|
||||
const initial = await seedEdgelessPerfScene(page, {
|
||||
shapeCount: 120,
|
||||
rowLength: 12,
|
||||
startX: 120,
|
||||
startY: 180,
|
||||
width: 160,
|
||||
height: 120,
|
||||
});
|
||||
addedShapeIds = initial.shapeIds;
|
||||
|
||||
await fitViewportToContent(page);
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
await recordScenario('add-shapes', async () => {
|
||||
const seeded = await seedEdgelessPerfScene(page, {
|
||||
shapeCount: 40,
|
||||
rowLength: 10,
|
||||
startX: 160,
|
||||
startY: 1720,
|
||||
width: 160,
|
||||
height: 120,
|
||||
});
|
||||
addedShapeIds = addedShapeIds.concat(seeded.shapeIds);
|
||||
await fitViewportToContent(page);
|
||||
});
|
||||
|
||||
await recordScenario('delete-shapes', async () => {
|
||||
await deleteEdgelessElements(page, addedShapeIds.slice(-20));
|
||||
});
|
||||
|
||||
await recordScenario('box-select', async () => {
|
||||
await selectWholePerfScene();
|
||||
});
|
||||
|
||||
await recordScenario('group-selection', async () => {
|
||||
await selectWholePerfScene();
|
||||
await page.keyboard.press(`${modKey}+g`);
|
||||
});
|
||||
|
||||
await recordScenario('ungroup-selection', async () => {
|
||||
await page.keyboard.press(`${modKey}+Shift+g`);
|
||||
});
|
||||
|
||||
await recordScenario('large-drag-selection', async () => {
|
||||
await selectWholePerfScene();
|
||||
const [x, y, w, h] = await getSelectedXYWH(page);
|
||||
const center: [number, number] = [x + w / 2, y + h / 2];
|
||||
await dragView(page, center, [center[0] + 1200, center[1] + 900]);
|
||||
});
|
||||
|
||||
await recordScenario('large-pan', async () => {
|
||||
await setEdgelessTool(page, 'pan');
|
||||
await dragView(page, [1200, 900], [200, 180]);
|
||||
});
|
||||
|
||||
await recordScenario('large-zoom', async () => {
|
||||
await setViewportZoom(page, 0.25);
|
||||
await page.waitForTimeout(200);
|
||||
await setViewportZoom(page, 2.2);
|
||||
await page.waitForTimeout(200);
|
||||
await fitViewportToContent(page);
|
||||
});
|
||||
|
||||
const finalSnapshot = await getCanvasRendererPerfSnapshot(page);
|
||||
|
||||
expect(finalSnapshot.rendererType).toBe('CanvasRenderer');
|
||||
expect(results.length).toBeGreaterThanOrEqual(7);
|
||||
|
||||
await testInfo.attach('canvas-renderer-perf-scenarios.json', {
|
||||
body: JSON.stringify(results, null, 2),
|
||||
contentType: 'application/json',
|
||||
});
|
||||
});
|
||||
|
||||
test('collect metrics for interleaved block and canvas layers', async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.slow();
|
||||
|
||||
await seedEdgelessPerfScene(page, {
|
||||
interleaved: true,
|
||||
noteCount: 21,
|
||||
shapeCount: 20,
|
||||
rowLength: 1,
|
||||
startX: 120,
|
||||
startY: 180,
|
||||
width: 180,
|
||||
height: 120,
|
||||
});
|
||||
|
||||
await fitViewportToContent(page);
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const snapshot = await getCanvasRendererPerfSnapshot(page);
|
||||
const metrics = snapshot.metrics as {
|
||||
canvasMemoryMegabytes?: number;
|
||||
lastRenderMetrics?: {
|
||||
renderByBoundCallCount?: number;
|
||||
};
|
||||
stackingCanvasCount?: number;
|
||||
visibleStackingCanvasCount?: number;
|
||||
} | null;
|
||||
console.log(
|
||||
`[canvas-perf] interleaved-layers: ${JSON.stringify(snapshot, null, 2)}`
|
||||
);
|
||||
|
||||
expect(snapshot.rendererType).toBe('CanvasRenderer');
|
||||
expect(metrics).not.toBeNull();
|
||||
expect(metrics?.stackingCanvasCount ?? 0).toBeGreaterThan(0);
|
||||
expect(
|
||||
metrics?.lastRenderMetrics?.renderByBoundCallCount ?? 0
|
||||
).toBeGreaterThan(1);
|
||||
expect(metrics?.visibleStackingCanvasCount ?? 0).toBeGreaterThan(0);
|
||||
expect(metrics?.canvasMemoryMegabytes ?? 0).toBeLessThan(5);
|
||||
|
||||
await testInfo.attach('canvas-renderer-layering.json', {
|
||||
body: JSON.stringify(snapshot, null, 2),
|
||||
contentType: 'application/json',
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user