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)  ## 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.
2026-03-24 16:18:39 +08:00 · 2026-03-07 09:12:14 +08:00
parent 86d65b2f64
commit 9742e9735e
17 changed files with 1429 additions and 280 deletions
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts
@@ -5,6 +5,8 @@ import {
 import type { BrushElementModel } from '@blocksuite/affine-model';
 import { DefaultTheme } from '@blocksuite/affine-model';

+import { renderBrushLikeDom } from './shared';
+
 export const BrushDomRendererExtension = DomElementRendererExtension(
  'brush',
  (
@@ -12,58 +14,11 @@ export const BrushDomRendererExtension = DomElementRendererExtension(
    domElement: HTMLElement,
    renderer: DomRenderer
  ) => {
-    const { zoom } = renderer.viewport;
-    const [, , w, h] = model.deserializedXYWH;
-
-    // Early return if invalid dimensions
-    if (w <= 0 || h <= 0) {
-      return;
-    }
-
-    // Early return if no commands
-    if (!model.commands) {
-      return;
-    }
-
-    // Clear previous content
-    domElement.innerHTML = '';
-
-    // Get color value
-    const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
-
-    // Create SVG element
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.style.position = 'absolute';
-    svg.style.left = '0';
-    svg.style.top = '0';
-    svg.style.width = `${w * zoom}px`;
-    svg.style.height = `${h * zoom}px`;
-    svg.style.overflow = 'visible';
-    svg.style.pointerEvents = 'none';
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-
-    // Apply rotation transform
-    if (model.rotate !== 0) {
-      svg.style.transform = `rotate(${model.rotate}deg)`;
-      svg.style.transformOrigin = 'center';
-    }
-
-    // Create path element for the brush stroke
-    const pathElement = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path'
-    );
-    pathElement.setAttribute('d', model.commands);
-    pathElement.setAttribute('fill', color);
-    pathElement.setAttribute('stroke', 'none');
-
-    svg.append(pathElement);
-    domElement.replaceChildren(svg);
-
-    // Set element size and position
-    domElement.style.width = `${w * zoom}px`;
-    domElement.style.height = `${h * zoom}px`;
-    domElement.style.overflow = 'visible';
-    domElement.style.pointerEvents = 'none';
+    renderBrushLikeDom({
+      model,
+      domElement,
+      renderer,
+      color: renderer.getColorValue(model.color, DefaultTheme.black, true),
+    });
  }
 );
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts
@@ -5,6 +5,8 @@ import {
 import type { HighlighterElementModel } from '@blocksuite/affine-model';
 import { DefaultTheme } from '@blocksuite/affine-model';

+import { renderBrushLikeDom } from './shared';
+
 export const HighlighterDomRendererExtension = DomElementRendererExtension(
  'highlighter',
  (
@@ -12,62 +14,15 @@ export const HighlighterDomRendererExtension = DomElementRendererExtension(
    domElement: HTMLElement,
    renderer: DomRenderer
  ) => {
-    const { zoom } = renderer.viewport;
-    const [, , w, h] = model.deserializedXYWH;
-
-    // Early return if invalid dimensions
-    if (w <= 0 || h <= 0) {
-      return;
-    }
-
-    // Early return if no commands
-    if (!model.commands) {
-      return;
-    }
-
-    // Clear previous content
-    domElement.innerHTML = '';
-
-    // Get color value
-    const color = renderer.getColorValue(
-      model.color,
-      DefaultTheme.hightlighterColor,
-      true
-    );
-
-    // Create SVG element
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.style.position = 'absolute';
-    svg.style.left = '0';
-    svg.style.top = '0';
-    svg.style.width = `${w * zoom}px`;
-    svg.style.height = `${h * zoom}px`;
-    svg.style.overflow = 'visible';
-    svg.style.pointerEvents = 'none';
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-
-    // Apply rotation transform
-    if (model.rotate !== 0) {
-      svg.style.transform = `rotate(${model.rotate}deg)`;
-      svg.style.transformOrigin = 'center';
-    }
-
-    // Create path element for the highlighter stroke
-    const pathElement = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path'
-    );
-    pathElement.setAttribute('d', model.commands);
-    pathElement.setAttribute('fill', color);
-    pathElement.setAttribute('stroke', 'none');
-
-    svg.append(pathElement);
-    domElement.replaceChildren(svg);
-
-    // Set element size and position
-    domElement.style.width = `${w * zoom}px`;
-    domElement.style.height = `${h * zoom}px`;
-    domElement.style.overflow = 'visible';
-    domElement.style.pointerEvents = 'none';
+    renderBrushLikeDom({
+      model,
+      domElement,
+      renderer,
+      color: renderer.getColorValue(
+        model.color,
+        DefaultTheme.hightlighterColor,
+        true
+      ),
+    });
  }
 );
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/shared.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/shared.ts
@@ -0,0 +1,82 @@
+import type { DomRenderer } from '@blocksuite/affine-block-surface';
+import type {
+  BrushElementModel,
+  HighlighterElementModel,
+} from '@blocksuite/affine-model';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+type BrushLikeModel = BrushElementModel | HighlighterElementModel;
+
+type RetainedBrushDom = {
+  path: SVGPathElement;
+  svg: SVGSVGElement;
+};
+
+const retainedBrushDom = new WeakMap<HTMLElement, RetainedBrushDom>();
+
+function clearBrushLikeDom(domElement: HTMLElement) {
+  retainedBrushDom.delete(domElement);
+  domElement.replaceChildren();
+}
+
+function getRetainedBrushDom(domElement: HTMLElement) {
+  const existing = retainedBrushDom.get(domElement);
+
+  if (existing) {
+    return existing;
+  }
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.style.position = 'absolute';
+  svg.style.left = '0';
+  svg.style.top = '0';
+  svg.style.overflow = 'visible';
+  svg.style.pointerEvents = 'none';
+
+  const path = document.createElementNS(SVG_NS, 'path');
+  path.setAttribute('stroke', 'none');
+  svg.append(path);
+
+  const retained = { svg, path };
+  retainedBrushDom.set(domElement, retained);
+  domElement.replaceChildren(svg);
+
+  return retained;
+}
+
+export function renderBrushLikeDom({
+  color,
+  domElement,
+  model,
+  renderer,
+}: {
+  color: string;
+  domElement: HTMLElement;
+  model: BrushLikeModel;
+  renderer: DomRenderer;
+}) {
+  const { zoom } = renderer.viewport;
+  const [, , w, h] = model.deserializedXYWH;
+
+  if (w <= 0 || h <= 0 || !model.commands) {
+    clearBrushLikeDom(domElement);
+    return;
+  }
+
+  const { path, svg } = getRetainedBrushDom(domElement);
+
+  svg.style.width = `${w * zoom}px`;
+  svg.style.height = `${h * zoom}px`;
+  svg.style.transform = model.rotate === 0 ? '' : `rotate(${model.rotate}deg)`;
+  svg.style.transformOrigin = model.rotate === 0 ? '' : 'center';
+  svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+
+  path.setAttribute('d', model.commands);
+  path.setAttribute('fill', color);
+
+  domElement.style.width = `${w * zoom}px`;
+  domElement.style.height = `${h * zoom}px`;
+  domElement.style.overflow = 'visible';
+  domElement.style.pointerEvents = 'none';
+}
--- a/blocksuite/affine/gfx/connector/src/renderer/dom-renderer.ts
+++ b/blocksuite/affine/gfx/connector/src/renderer/dom-renderer.ts
@@ -14,6 +14,8 @@ import { PointLocation, SVGPathBuilder } from '@blocksuite/global/gfx';
 import { isConnectorWithLabel } from '../connector-manager';
 import { DEFAULT_ARROW_SIZE } from './utils';

+const SVG_NS = 'http://www.w3.org/2000/svg';
+
 interface PathBounds {
  minX: number;
  minY: number;
@@ -21,6 +23,15 @@ interface PathBounds {
  maxY: number;
 }

+type RetainedConnectorDom = {
+  defs: SVGDefsElement;
+  label: HTMLDivElement | null;
+  path: SVGPathElement;
+  svg: SVGSVGElement;
+};
+
+const retainedConnectorDom = new WeakMap<HTMLElement, RetainedConnectorDom>();
+
 function calculatePathBounds(path: PointLocation[]): PathBounds {
  if (path.length === 0) {
    return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
@@ -81,10 +92,7 @@ function createArrowMarker(
  strokeWidth: number,
  isStart: boolean = false
 ): SVGMarkerElement {
-  const marker = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'marker'
-  );
+  const marker = document.createElementNS(SVG_NS, 'marker');
  const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);

  marker.id = id;
@@ -98,10 +106,7 @@ function createArrowMarker(

  switch (style) {
    case 'Arrow': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
+      const path = document.createElementNS(SVG_NS, 'path');
      path.setAttribute(
        'd',
        isStart ? 'M 20 5 L 10 10 L 20 15 Z' : 'M 0 5 L 10 10 L 0 15 Z'
@@ -112,10 +117,7 @@ function createArrowMarker(
      break;
    }
    case 'Triangle': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
+      const path = document.createElementNS(SVG_NS, 'path');
      path.setAttribute(
        'd',
        isStart ? 'M 20 7 L 12 10 L 20 13 Z' : 'M 0 7 L 8 10 L 0 13 Z'
@@ -126,10 +128,7 @@ function createArrowMarker(
      break;
    }
    case 'Circle': {
-      const circle = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'circle'
-      );
+      const circle = document.createElementNS(SVG_NS, 'circle');
      circle.setAttribute('cx', '10');
      circle.setAttribute('cy', '10');
      circle.setAttribute('r', '4');
@@ -139,10 +138,7 @@ function createArrowMarker(
      break;
    }
    case 'Diamond': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
+      const path = document.createElementNS(SVG_NS, 'path');
      path.setAttribute('d', 'M 10 6 L 14 10 L 10 14 L 6 10 Z');
      path.setAttribute('fill', color);
      path.setAttribute('stroke', color);
@@ -154,13 +150,64 @@ function createArrowMarker(
  return marker;
 }

+function clearRetainedConnectorDom(element: HTMLElement) {
+  retainedConnectorDom.delete(element);
+  element.replaceChildren();
+}
+
+function getRetainedConnectorDom(element: HTMLElement): RetainedConnectorDom {
+  const existing = retainedConnectorDom.get(element);
+
+  if (existing) {
+    return existing;
+  }
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.style.position = 'absolute';
+  svg.style.overflow = 'visible';
+  svg.style.pointerEvents = 'none';
+
+  const defs = document.createElementNS(SVG_NS, 'defs');
+  const path = document.createElementNS(SVG_NS, 'path');
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+
+  svg.append(defs, path);
+  element.replaceChildren(svg);
+
+  const retained = {
+    svg,
+    defs,
+    path,
+    label: null,
+  };
+  retainedConnectorDom.set(element, retained);
+
+  return retained;
+}
+
+function getOrCreateLabelElement(retained: RetainedConnectorDom) {
+  if (retained.label) {
+    return retained.label;
+  }
+
+  const label = document.createElement('div');
+  retained.svg.insertAdjacentElement('afterend', label);
+  retained.label = label;
+
+  return label;
+}
+
 function renderConnectorLabel(
  model: ConnectorElementModel,
-  container: HTMLElement,
+  retained: RetainedConnectorDom,
  renderer: DomRenderer,
  zoom: number
 ) {
  if (!isConnectorWithLabel(model) || !model.labelXYWH) {
+    retained.label?.remove();
+    retained.label = null;
    return;
  }

@@ -176,8 +223,7 @@ function renderConnectorLabel(
    },
  } = model;

-  // Create label element
-  const labelElement = document.createElement('div');
+  const labelElement = getOrCreateLabelElement(retained);
  labelElement.style.position = 'absolute';
  labelElement.style.left = `${lx * zoom}px`;
  labelElement.style.top = `${ly * zoom}px`;
@@ -210,11 +256,7 @@ function renderConnectorLabel(
  labelElement.style.wordWrap = 'break-word';

  // Add text content
-  if (model.text) {
-    labelElement.textContent = model.text.toString();
-  }
-
-  container.append(labelElement);
+  labelElement.textContent = model.text ? model.text.toString() : '';
 }

 /**
@@ -241,14 +283,13 @@ export const connectorBaseDomRenderer = (
    stroke,
  } = model;

-  // Clear previous content
-  element.innerHTML = '';
-
-  // Early return if no path points
  if (!points || points.length < 2) {
+    clearRetainedConnectorDom(element);
    return;
  }

+  const retained = getRetainedConnectorDom(element);
+
  // Calculate bounds for the SVG viewBox
  const pathBounds = calculatePathBounds(points);
  const padding = Math.max(strokeWidth * 2, 20); // Add padding for arrows
@@ -257,8 +298,7 @@ export const connectorBaseDomRenderer = (
  const offsetX = pathBounds.minX - padding;
  const offsetY = pathBounds.minY - padding;

-  // Create SVG element
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const { defs, path, svg } = retained;
  svg.style.position = 'absolute';
  svg.style.left = `${offsetX * zoom}px`;
  svg.style.top = `${offsetY * zoom}px`;
@@ -268,49 +308,43 @@ export const connectorBaseDomRenderer = (
  svg.style.pointerEvents = 'none';
  svg.setAttribute('viewBox', `0 0 ${svgWidth / zoom} ${svgHeight / zoom}`);

-  // Create defs for markers
-  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-  svg.append(defs);
-
  const strokeColor = renderer.getColorValue(
    stroke,
    DefaultTheme.connectorColor,
    true
  );

-  // Create markers for endpoints
+  const markers: SVGMarkerElement[] = [];
  let startMarkerId = '';
  let endMarkerId = '';

  if (frontEndpointStyle !== 'None') {
    startMarkerId = `start-marker-${model.id}`;
-    const startMarker = createArrowMarker(
-      startMarkerId,
-      frontEndpointStyle,
-      strokeColor,
-      strokeWidth,
-      true
+    markers.push(
+      createArrowMarker(
+        startMarkerId,
+        frontEndpointStyle,
+        strokeColor,
+        strokeWidth,
+        true
+      )
    );
-    defs.append(startMarker);
  }

  if (rearEndpointStyle !== 'None') {
    endMarkerId = `end-marker-${model.id}`;
-    const endMarker = createArrowMarker(
-      endMarkerId,
-      rearEndpointStyle,
-      strokeColor,
-      strokeWidth,
-      false
+    markers.push(
+      createArrowMarker(
+        endMarkerId,
+        rearEndpointStyle,
+        strokeColor,
+        strokeWidth,
+        false
+      )
    );
-    defs.append(endMarker);
  }

-  // Create path element
-  const pathElement = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'path'
-  );
+  defs.replaceChildren(...markers);

  // Adjust points relative to the SVG coordinate system
  const adjustedPoints = points.map(point => {
@@ -334,29 +368,25 @@ export const connectorBaseDomRenderer = (
  });

  const pathData = createConnectorPath(adjustedPoints, mode);
-  pathElement.setAttribute('d', pathData);
-  pathElement.setAttribute('stroke', strokeColor);
-  pathElement.setAttribute('stroke-width', String(strokeWidth));
-  pathElement.setAttribute('fill', 'none');
-  pathElement.setAttribute('stroke-linecap', 'round');
-  pathElement.setAttribute('stroke-linejoin', 'round');
-
-  // Apply stroke style
+  path.setAttribute('d', pathData);
+  path.setAttribute('stroke', strokeColor);
+  path.setAttribute('stroke-width', String(strokeWidth));
  if (strokeStyle === 'dash') {
-    pathElement.setAttribute('stroke-dasharray', '12,12');
+    path.setAttribute('stroke-dasharray', '12,12');
+  } else {
+    path.removeAttribute('stroke-dasharray');
  }
-
-  // Apply markers
  if (startMarkerId) {
-    pathElement.setAttribute('marker-start', `url(#${startMarkerId})`);
+    path.setAttribute('marker-start', `url(#${startMarkerId})`);
+  } else {
+    path.removeAttribute('marker-start');
  }
  if (endMarkerId) {
-    pathElement.setAttribute('marker-end', `url(#${endMarkerId})`);
+    path.setAttribute('marker-end', `url(#${endMarkerId})`);
+  } else {
+    path.removeAttribute('marker-end');
  }

-  svg.append(pathElement);
-  element.append(svg);
-
  // Set element size and position
  element.style.width = `${model.w * zoom}px`;
  element.style.height = `${model.h * zoom}px`;
@@ -370,7 +400,11 @@ export const connectorDomRenderer = (
  renderer: DomRenderer
 ): void => {
  connectorBaseDomRenderer(model, element, renderer);
-  renderConnectorLabel(model, element, renderer, renderer.viewport.zoom);
+
+  const retained = retainedConnectorDom.get(element);
+  if (!retained) return;
+
+  renderConnectorLabel(model, retained, renderer, renderer.viewport.zoom);
 };

 /**
--- a/blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts
+++ b/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);