fix(exporter): correct wrapped foreignObject export bounds

xxMudCloudxx · xxMudCloudxx · commit 19550009db2b · 2026-05-02T03:49:41.000+08:00
diff --git a/__tests__/unit/exporter/svg.test.ts b/__tests__/unit/exporter/svg.test.ts
@@ -371,4 +371,127 @@ describe('exporter/svg', () => {
     expect(exported.getAttribute('width')).toBe('320');
     expect(exported.getAttribute('height')).toBe('270');
   });
+
+  it('keeps wrapped foreignObject text within the original export width', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('viewBox', '0 0 200 100');
+    mockSvgCoordinateSpace(svg);
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    const span = document.createElement('span');
+    span.style.width = '100%';
+    span.style.height = '100%';
+    span.style.display = 'flex';
+    span.style.flexWrap = 'wrap';
+    span.style.wordBreak = 'break-word';
+    span.style.whiteSpace = 'pre-wrap';
+
+    Object.defineProperty(span, 'scrollWidth', {
+      configurable: true,
+      get: () => 320,
+    });
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 160,
+    });
+
+    foreignObject.appendChild(span);
+    svg.appendChild(foreignObject);
+
+    mockRect(foreignObject, { left: 0, top: 0, width: 200, height: 100 });
+
+    const exported = await exportToSVG(svg);
+
+    expect(exported.getAttribute('viewBox')).toBe('0 0 200 160');
+    expect(exported.getAttribute('width')).toBe('200');
+    expect(exported.getAttribute('height')).toBe('160');
+  });
+
+  it('resizes exported foreignObject height to the measured wrapped content height', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('viewBox', '0 0 200 100');
+    mockSvgCoordinateSpace(svg);
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    foreignObject.setAttribute('x', '20');
+    foreignObject.setAttribute('y', '30');
+    foreignObject.setAttribute('width', '140');
+    foreignObject.setAttribute('height', '40');
+
+    const span = document.createElement('span');
+    span.style.width = '100%';
+    span.style.height = '100%';
+    span.style.display = 'flex';
+    span.style.flexWrap = 'wrap';
+    span.style.wordBreak = 'break-word';
+    span.style.whiteSpace = 'pre-wrap';
+
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 80,
+    });
+
+    foreignObject.appendChild(span);
+    svg.appendChild(foreignObject);
+
+    mockRect(foreignObject, { left: 20, top: 30, width: 140, height: 40 });
+
+    const exported = await exportToSVG(svg);
+    const exportedForeignObject = exported.querySelector('foreignObject');
+
+    expect(exportedForeignObject?.getAttribute('x')).toBe('20');
+    expect(exportedForeignObject?.getAttribute('y')).toBe('30');
+    expect(exportedForeignObject?.getAttribute('width')).toBe('140');
+    expect(exportedForeignObject?.getAttribute('height')).toBe('80');
+  });
+
+  it('uses rendered content height when it is larger than scrollHeight', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('viewBox', '0 0 200 100');
+    mockSvgCoordinateSpace(svg);
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    foreignObject.setAttribute('x', '20');
+    foreignObject.setAttribute('y', '30');
+    foreignObject.setAttribute('width', '140');
+    foreignObject.setAttribute('height', '40');
+
+    const span = document.createElement('span');
+    span.style.width = '100%';
+    span.style.height = '100%';
+    span.style.display = 'flex';
+    span.style.flexWrap = 'wrap';
+    span.style.wordBreak = 'break-word';
+    span.style.whiteSpace = 'pre-wrap';
+
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 80,
+    });
+    Object.defineProperty(span, 'getBoundingClientRect', {
+      configurable: true,
+      value: () =>
+        ({
+          x: 0,
+          y: 0,
+          left: 0,
+          top: 0,
+          width: 140,
+          height: 84.4,
+          right: 140,
+          bottom: 84.4,
+          toJSON: () => ({}),
+        }) as DOMRect,
+    });
+
+    foreignObject.appendChild(span);
+    svg.appendChild(foreignObject);
+
+    mockRect(foreignObject, { left: 20, top: 30, width: 140, height: 40 });
+
+    const exported = await exportToSVG(svg);
+    const exportedForeignObject = exported.querySelector('foreignObject');
+
+    expect(exportedForeignObject?.getAttribute('height')).toBe('84.4');
+  });
 });
diff --git a/src/exporter/svg.ts b/src/exporter/svg.ts
@@ -11,6 +11,12 @@ import { embedFonts } from './font';
 import type { SVGExportOptions } from './types';
 
 const VIEWBOX_CHANGE_TOLERANCE = 0.5;
+type BoundsTuple = [number, number, number, number];
+
+interface ForeignObjectExportAdjustment {
+  rootBounds: BoundsTuple;
+  localBounds: BoundsTuple;
+}
 
 export async function exportToSVGString(
   svg: SVGSVGElement,
@@ -58,7 +64,9 @@ function measureSpanContentHeight(span: HTMLElement): number {
     span.style.height = 'max-content';
     span.style.overflow = 'hidden';
     void span.offsetHeight; // force reflow
-    return span.scrollHeight;
+    const scrollHeight = span.scrollHeight;
+    const rectHeight = span.getBoundingClientRect().height;
+    return Math.max(scrollHeight, rectHeight);
   } finally {
     span.style.height = prevHeight;
     span.style.overflow = prevOverflow;
@@ -79,7 +87,39 @@ function measureSpanContentWidth(span: HTMLElement): number {
   }
 }
 
-// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+function shouldKeepForeignObjectWidth(style: CSSStyleDeclaration): boolean {
+  const whiteSpace = style.whiteSpace;
+  const flexWrap = style.flexWrap;
+  const wordBreak = style.wordBreak;
+
+  return (
+    flexWrap === 'wrap' ||
+    flexWrap === 'wrap-reverse' ||
+    whiteSpace === 'pre-wrap' ||
+    whiteSpace === 'normal' ||
+    wordBreak === 'break-word' ||
+    wordBreak === 'break-all'
+  );
+}
+
+function createCoordConverter(
+  svg: SVGSVGElement,
+  element: SVGGraphicsElement,
+): ((x: number, y: number) => SVGPoint) | null {
+  if (typeof element.getScreenCTM !== 'function') return null;
+  const screenCTM = element.getScreenCTM();
+  if (!screenCTM) return null;
+  const inverseCTM = screenCTM.inverse();
+
+  return (clientX: number, clientY: number) => {
+    const pt = svg.createSVGPoint();
+    pt.x = clientX;
+    pt.y = clientY;
+    return pt.matrixTransform(inverseCTM);
+  };
+}
+
+// Returns [left, top, right, bottom] in target coordinates for a foreignObject,
 // accounting for flex alignment: bottom/center-aligned content can overflow,
 // and horizontally aligned content can overflow as well.
 function getFOContentBoundsInSVG(
@@ -110,13 +150,17 @@ function getFOContentBoundsInSVG(
       ? realScrollHeight * svgUnitsPerClientPxY
       : foHeightSVG;
 
-  const realScrollWidth = measureSpanContentWidth(content);
-  const contentWidthSVG =
-    realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
-
   const computedStyle = window.getComputedStyle(content);
   const alignItems = computedStyle.alignItems;
   const justifyContent = computedStyle.justifyContent;
+  const contentWidthSVG = shouldKeepForeignObjectWidth(computedStyle)
+    ? foWidthSVG
+    : (() => {
+        const realScrollWidth = measureSpanContentWidth(content);
+        return realScrollWidth > 0
+          ? Math.max(foWidthSVG, realScrollWidth * svgUnitsPerClientPxX)
+          : foWidthSVG;
+      })();
 
   // Calculate vertical bounds
   let top: number, bottom: number;
@@ -153,47 +197,49 @@ function getFOContentBoundsInSVG(
   return [left, top, right, bottom];
 }
 
-/**
- * Computes a viewBox that fully covers all foreignObject text content,
- * accounting for overflow caused by flex alignment (bottom/center align
- * can push content outside the foreignObject bounds).
- */
-function computeFullViewBox(svg: SVGSVGElement): string | null {
-  const viewBox = getExportViewBox(svg);
-  if (!viewBox) return null;
+function collectForeignObjectExportAdjustments(svg: SVGSVGElement) {
+  const toSVGCoord = createCoordConverter(svg, svg);
+  if (!toSVGCoord) return [];
 
-  if (typeof svg.getScreenCTM !== 'function') return null;
-  const screenCTM = svg.getScreenCTM();
-  if (!screenCTM) return null;
-  const inverseCTM = screenCTM.inverse();
+  return Array.from(
+    svg.querySelectorAll<SVGForeignObjectElement>('foreignObject'),
+  ).flatMap((fo) => {
+    const content = fo.firstElementChild as HTMLElement | null;
+    if (!content) return [];
 
-  const toSVGCoord = (clientX: number, clientY: number) => {
-    const pt = svg.createSVGPoint();
-    pt.x = clientX;
-    pt.y = clientY;
-    return pt.matrixTransform(inverseCTM);
-  };
+    const parent =
+      fo.parentElement instanceof SVGGraphicsElement ? fo.parentElement : svg;
+    const toParentCoord = createCoordConverter(svg, parent);
+    if (!toParentCoord) return [];
+
+    return [
+      {
+        rootBounds: getFOContentBoundsInSVG(fo, content, toSVGCoord),
+        localBounds: getFOContentBoundsInSVG(fo, content, toParentCoord),
+      } satisfies ForeignObjectExportAdjustment,
+    ];
+  });
+}
+
+function computeFullViewBox(
+  svg: SVGSVGElement,
+  adjustments: ForeignObjectExportAdjustment[],
+): string | null {
+  const viewBox = getExportViewBox(svg);
+  if (!viewBox) return null;
 
   let minX = viewBox.x;
   let minY = viewBox.y;
   let maxX = viewBox.x + viewBox.width;
   let maxY = viewBox.y + viewBox.height;
 
-  svg
-    .querySelectorAll<SVGForeignObjectElement>('foreignObject')
-    .forEach((fo) => {
-      const content = fo.firstElementChild as HTMLElement;
-      if (!content) return;
-      const [left, top, right, bottom] = getFOContentBoundsInSVG(
-        fo,
-        content,
-        toSVGCoord,
-      );
-      minX = Math.min(minX, left);
-      minY = Math.min(minY, top);
-      maxX = Math.max(maxX, right);
-      maxY = Math.max(maxY, bottom);
-    });
+  adjustments.forEach(({ rootBounds }) => {
+    const [left, top, right, bottom] = rootBounds;
+    minX = Math.min(minX, left);
+    minY = Math.min(minY, top);
+    maxX = Math.max(maxX, right);
+    maxY = Math.max(maxY, bottom);
+  });
 
   const newX = minX;
   const newY = minY;
@@ -210,6 +256,28 @@ function computeFullViewBox(svg: SVGSVGElement): string | null {
   return `${newX} ${newY} ${newWidth} ${newHeight}`;
 }
 
+function applyForeignObjectExportAdjustments(
+  svg: SVGSVGElement,
+  adjustments: ForeignObjectExportAdjustment[],
+) {
+  const clonedForeignObjects = Array.from(
+    svg.querySelectorAll<SVGForeignObjectElement>('foreignObject'),
+  );
+
+  adjustments.forEach((adjustment, index) => {
+    const clonedForeignObject = clonedForeignObjects[index];
+    if (!clonedForeignObject) return;
+
+    const [left, top, right, bottom] = adjustment.localBounds;
+    setAttributes(clonedForeignObject, {
+      x: left,
+      y: top,
+      width: right - left,
+      height: bottom - top,
+    });
+  });
+}
+
 export async function exportToSVG(
   svg: SVGSVGElement,
   options: Omit<SVGExportOptions, 'type'> = {},
@@ -222,7 +290,9 @@ export async function exportToSVG(
   const clonedSVG = svg.cloneNode(true) as SVGSVGElement;
 
   if (typeof document !== 'undefined') {
-    const fullViewBox = computeFullViewBox(svg);
+    const adjustments = collectForeignObjectExportAdjustments(svg);
+    applyForeignObjectExportAdjustments(clonedSVG, adjustments);
+    const fullViewBox = computeFullViewBox(svg, adjustments);
     if (fullViewBox) {
       clonedSVG.setAttribute('viewBox', fullViewBox);
     }
