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

blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts

@@ -6,6 +6,37 @@ import { SVGShapeBuilder } from '@blocksuite/global/gfx';
 
 import { manageClassNames, setStyles } from './utils';
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+type RetainedShapeDom = {
+  polygon: SVGPolygonElement | null;
+  svg: SVGSVGElement | null;
+  text: HTMLDivElement | null;
+};
+
+type RetainedShapeSvg = {
+  polygon: SVGPolygonElement;
+  svg: SVGSVGElement;
+};
+
+const retainedShapeDom = new WeakMap<HTMLElement, RetainedShapeDom>();
+
+function getRetainedShapeDom(element: HTMLElement): RetainedShapeDom {
+  const existing = retainedShapeDom.get(element);
+
+  if (existing) {
+    return existing;
+  }
+
+  const retained = {
+    svg: null,
+    polygon: null,
+    text: null,
+  };
+  retainedShapeDom.set(element, retained);
+  return retained;
+}
+
 function applyShapeSpecificStyles(
   model: ShapeElementModel,
   element: HTMLElement,
@@ -14,10 +45,6 @@ function applyShapeSpecificStyles(
   // Reset properties that might be set by different shape types
   element.style.removeProperty('clip-path');
   element.style.removeProperty('border-radius');
-  // Clear DOM for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
-  if (model.shapeType !== 'diamond' && model.shapeType !== 'triangle') {
-    while (element.firstChild) element.firstChild.remove();
-  }
 
   switch (model.shapeType) {
     case 'rect': {
@@ -42,6 +69,54 @@ function applyShapeSpecificStyles(
   // No 'else' needed to clear styles, as they are reset at the beginning of the function.
 }
 
+function getOrCreateSvg(
+  retained: RetainedShapeDom,
+  element: HTMLElement
+): RetainedShapeSvg {
+  if (retained.svg && retained.polygon) {
+    return {
+      svg: retained.svg,
+      polygon: retained.polygon,
+    };
+  }
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('width', '100%');
+  svg.setAttribute('height', '100%');
+  svg.setAttribute('preserveAspectRatio', 'none');
+
+  const polygon = document.createElementNS(SVG_NS, 'polygon');
+  svg.append(polygon);
+
+  retained.svg = svg;
+  retained.polygon = polygon;
+  element.prepend(svg);
+
+  return { svg, polygon };
+}
+
+function removeSvg(retained: RetainedShapeDom) {
+  retained.svg?.remove();
+  retained.svg = null;
+  retained.polygon = null;
+}
+
+function getOrCreateText(retained: RetainedShapeDom, element: HTMLElement) {
+  if (retained.text) {
+    return retained.text;
+  }
+
+  const text = document.createElement('div');
+  retained.text = text;
+  element.append(text);
+  return text;
+}
+
+function removeText(retained: RetainedShapeDom) {
+  retained.text?.remove();
+  retained.text = null;
+}
+
 function applyBorderStyles(
   model: ShapeElementModel,
   element: HTMLElement,
@@ -99,8 +174,7 @@ export const shapeDomRenderer = (
   const { zoom } = renderer.viewport;
   const unscaledWidth = model.w;
   const unscaledHeight = model.h;
-
-  const newChildren: Element[] = [];
+  const retained = getRetainedShapeDom(element);
 
   const fillColor = renderer.getColorValue(
     model.fillColor,
@@ -124,6 +198,7 @@ export const shapeDomRenderer = (
     // For diamond and triangle, fill and border are handled by inline SVG
     element.style.border = 'none'; // Ensure no standard CSS border interferes
     element.style.backgroundColor = 'transparent'; // Host element is transparent
+    const { polygon, svg } = getOrCreateSvg(retained, element);
 
     const strokeW = model.strokeWidth;
 
@@ -155,37 +230,30 @@ export const shapeDomRenderer = (
     // Determine fill color
     const finalFillColor = model.filled ? fillColor : 'transparent';
 
-    // Build SVG safely with DOM-API
-    const SVG_NS = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(SVG_NS, 'svg');
-    svg.setAttribute('width', '100%');
-    svg.setAttribute('height', '100%');
     svg.setAttribute('viewBox', `0 0 ${unscaledWidth} ${unscaledHeight}`);
-    svg.setAttribute('preserveAspectRatio', 'none');
-
-    const polygon = document.createElementNS(SVG_NS, 'polygon');
     polygon.setAttribute('points', svgPoints);
     polygon.setAttribute('fill', finalFillColor);
     polygon.setAttribute('stroke', finalStrokeColor);
     polygon.setAttribute('stroke-width', String(strokeW));
     if (finalStrokeDasharray !== 'none') {
       polygon.setAttribute('stroke-dasharray', finalStrokeDasharray);
+    } else {
+      polygon.removeAttribute('stroke-dasharray');
     }
-    svg.append(polygon);
-
-    newChildren.push(svg);
   } else {
     // Standard rendering for other shapes (e.g., rect, ellipse)
-    // innerHTML was already cleared by applyShapeSpecificStyles if necessary
+    removeSvg(retained);
     element.style.backgroundColor = model.filled ? fillColor : 'transparent';
     applyBorderStyles(model, element, strokeColor, zoom); // Uses standard CSS border
   }
 
   if (model.textDisplay && model.text) {
     const str = model.text.toString();
-    const textElement = document.createElement('div');
+    const textElement = getOrCreateText(retained, element);
     if (isRTL(str)) {
       textElement.dir = 'rtl';
+    } else {
+      textElement.removeAttribute('dir');
     }
     textElement.style.position = 'absolute';
     textElement.style.inset = '0';
@@ -210,12 +278,10 @@ export const shapeDomRenderer = (
       true
     );
     textElement.textContent = str;
-    newChildren.push(textElement);
+  } else {
+    removeText(retained);
   }
 
-  // Replace existing children to avoid memory leaks
-  element.replaceChildren(...newChildren);
-
   applyTransformStyles(model, element);
 
   manageClassNames(model, element);