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 -->

tests/affine-local/e2e/blocksuite/edgeless/canvas-renderer.perf.spec.ts

@@ -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',
+    });
+  });
+});

tests/kit/src/utils/edgeless-perf.ts

@@ -0,0 +1,231 @@
+import type { Page } from '@playwright/test';
+
+import { locateEditorContainer } from './editor';
+
+export type CanvasRendererPerfSnapshot = {
+  heapMemory: {
+    jsHeapSizeLimit: number;
+    totalJSHeapSize: number;
+    usedJSHeapSize: number;
+  } | null;
+  layerSequence: Array<'block' | 'canvas'>;
+  metrics: Record<string, unknown> | null;
+  rendererType: string | null;
+  selectedIds: string[];
+};
+
+export type SeedEdgelessPerfSceneOptions = {
+  height?: number;
+  interleaved?: boolean;
+  noteCount?: number;
+  rowLength?: number;
+  shapeCount?: number;
+  startX?: number;
+  startY?: number;
+  width?: number;
+};
+
+export async function getCanvasRendererPerfSnapshot(
+  page: Page,
+  editorIndex = 0
+): Promise<CanvasRendererPerfSnapshot> {
+  const container = locateEditorContainer(page, editorIndex);
+  return container.evaluate(container => {
+    type PerfMemory = {
+      jsHeapSizeLimit: number;
+      totalJSHeapSize: number;
+      usedJSHeapSize: number;
+    };
+    type PerfRenderer = {
+      constructor?: { name?: string };
+      getDebugMetrics?: () => Record<string, unknown>;
+      resetDebugMetrics?: () => void;
+    };
+
+    const root = container.querySelector('affine-edgeless-root');
+    const surface = container.querySelector('affine-surface');
+
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+
+    if (!surface) {
+      throw new Error('Surface block not found');
+    }
+
+    const renderer = surface.renderer as PerfRenderer | undefined;
+    const metrics =
+      renderer &&
+      typeof renderer.getDebugMetrics === 'function' &&
+      renderer.constructor?.name === 'CanvasRenderer'
+        ? renderer.getDebugMetrics()
+        : null;
+    const memory = (
+      performance as Performance & {
+        memory?: PerfMemory;
+      }
+    ).memory;
+
+    return {
+      rendererType: renderer?.constructor?.name ?? null,
+      metrics,
+      selectedIds: [...root.gfx.selection.selectedIds],
+      layerSequence: root.gfx.layer.layers.map(
+        (layer: { type: 'block' | 'canvas' }) => layer.type
+      ),
+      heapMemory: memory
+        ? {
+            jsHeapSizeLimit: memory.jsHeapSizeLimit,
+            totalJSHeapSize: memory.totalJSHeapSize,
+            usedJSHeapSize: memory.usedJSHeapSize,
+          }
+        : null,
+    };
+  });
+}
+
+export async function resetCanvasRendererPerfMetrics(
+  page: Page,
+  editorIndex = 0
+) {
+  const container = locateEditorContainer(page, editorIndex);
+  await container.evaluate(container => {
+    type PerfRenderer = {
+      resetDebugMetrics?: () => void;
+    };
+    const surface = container.querySelector('affine-surface');
+
+    if (!surface) {
+      throw new Error('Surface block not found');
+    }
+
+    const renderer = surface.renderer as PerfRenderer | undefined;
+    if (!renderer || typeof renderer.resetDebugMetrics !== 'function') {
+      throw new Error('Canvas renderer debug metrics are unavailable');
+    }
+
+    renderer.resetDebugMetrics();
+  });
+}
+
+export async function seedEdgelessPerfScene(
+  page: Page,
+  options: SeedEdgelessPerfSceneOptions = {},
+  editorIndex = 0
+) {
+  const container = locateEditorContainer(page, editorIndex);
+  return container.evaluate((container, options) => {
+    const root = container.querySelector('affine-edgeless-root');
+
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+
+    const doc = root.service.doc;
+    const nextIndex = root.gfx.layer.createIndexGenerator();
+    const shapeCount = options.shapeCount ?? 120;
+    const noteCount = options.noteCount ?? 0;
+    const rowLength = options.rowLength ?? 12;
+    const width = options.width ?? 140;
+    const height = options.height ?? 100;
+    const startX = options.startX ?? 80;
+    const startY = options.startY ?? 160;
+    const interleaved = options.interleaved ?? false;
+    const gapX = width + 36;
+    const gapY = height + 36;
+
+    let shapeCursor = 0;
+    let noteCursor = 0;
+    const shapeIds: string[] = [];
+    const noteIds: string[] = [];
+
+    const getPosition = (cursor: number) => {
+      const row = Math.floor(cursor / rowLength);
+      const col = cursor % rowLength;
+
+      return {
+        x: startX + col * gapX,
+        y: startY + row * gapY,
+      };
+    };
+
+    const addShape = () => {
+      const { x, y } = getPosition(shapeCursor++);
+      const id = root.service.crud.addElement('shape', {
+        index: nextIndex(),
+        shapeType: 'rect',
+        xywh: `[${x}, ${y}, ${width}, ${height}]`,
+      });
+
+      if (id) {
+        shapeIds.push(id);
+      }
+    };
+
+    const addNote = () => {
+      const { x, y } = getPosition(noteCursor++);
+      const noteId = doc.addBlock(
+        'affine:note',
+        {
+          index: nextIndex(),
+          xywh: `[${x}, ${y}, ${Math.max(width * 2, 260)}, ${height}]`,
+        },
+        doc.root
+      );
+
+      doc.addBlock('affine:paragraph', {}, noteId);
+      noteIds.push(noteId);
+    };
+
+    if (interleaved) {
+      const maxCount = Math.max(shapeCount, noteCount);
+
+      for (let i = 0; i < maxCount; i++) {
+        if (i < noteCount) {
+          addNote();
+        }
+        if (i < shapeCount) {
+          addShape();
+        }
+      }
+    } else {
+      for (let i = 0; i < shapeCount; i++) {
+        addShape();
+      }
+      for (let i = 0; i < noteCount; i++) {
+        addNote();
+      }
+    }
+
+    return { noteIds, shapeIds };
+  }, options);
+}
+
+export async function deleteEdgelessElements(
+  page: Page,
+  ids: string[],
+  editorIndex = 0
+) {
+  const container = locateEditorContainer(page, editorIndex);
+  await container.evaluate((container, ids) => {
+    const root = container.querySelector('affine-edgeless-root');
+
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+
+    const doc = root.service.doc;
+
+    ids.forEach(id => {
+      const element = root.service.crud.getElementById(id);
+      if (element) {
+        root.service.removeElement(id);
+        return;
+      }
+
+      if (doc.getBlock(id)) {
+        doc.deleteBlock(id);
+      }
+    });
+  }, ids);
+}