fix(exporter): preserve foreignObject adjustment mapping

Author: xxMudCloudxx

__tests__/unit/exporter/svg.test.ts

@@ -494,4 +494,61 @@ describe('exporter/svg', () => {
 
     expect(exportedForeignObject?.getAttribute('height')).toBe('84.4');
   });
+
+  it('keeps foreignObject adjustments aligned when earlier foreignObjects are skipped', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('viewBox', '0 0 200 100');
+    mockSvgCoordinateSpace(svg);
+
+    const skippedForeignObject = document.createElementNS(svgNS, 'foreignObject');
+    skippedForeignObject.setAttribute('x', '0');
+    skippedForeignObject.setAttribute('y', '0');
+    skippedForeignObject.setAttribute('width', '10');
+    skippedForeignObject.setAttribute('height', '10');
+    svg.appendChild(skippedForeignObject);
+
+    const adjustedForeignObject = document.createElementNS(
+      svgNS,
+      'foreignObject',
+    );
+    adjustedForeignObject.setAttribute('x', '20');
+    adjustedForeignObject.setAttribute('y', '30');
+    adjustedForeignObject.setAttribute('width', '140');
+    adjustedForeignObject.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,
+    });
+
+    adjustedForeignObject.appendChild(span);
+    svg.appendChild(adjustedForeignObject);
+
+    mockRect(skippedForeignObject, { left: 0, top: 0, width: 10, height: 10 });
+    mockRect(adjustedForeignObject, {
+      left: 20,
+      top: 30,
+      width: 140,
+      height: 40,
+    });
+
+    const exported = await exportToSVG(svg);
+    const [firstForeignObject, secondForeignObject] =
+      exported.querySelectorAll('foreignObject');
+
+    expect(firstForeignObject?.getAttribute('width')).toBe('10');
+    expect(firstForeignObject?.getAttribute('height')).toBe('10');
+    expect(secondForeignObject?.getAttribute('x')).toBe('20');
+    expect(secondForeignObject?.getAttribute('y')).toBe('30');
+    expect(secondForeignObject?.getAttribute('width')).toBe('140');
+    expect(secondForeignObject?.getAttribute('height')).toBe('80');
+  });
 });

src/exporter/svg.ts

@@ -91,12 +91,15 @@ function shouldKeepForeignObjectWidth(style: CSSStyleDeclaration): boolean {
   const whiteSpace = style.whiteSpace;
   const flexWrap = style.flexWrap;
   const wordBreak = style.wordBreak;
+  const overflowWrap = style.overflowWrap;
 
   return (
     flexWrap === 'wrap' ||
     flexWrap === 'wrap-reverse' ||
     whiteSpace === 'pre-wrap' ||
+    whiteSpace === 'pre-line' ||
     whiteSpace === 'normal' ||
+    overflowWrap === 'break-word' ||
     wordBreak === 'break-word' ||
     wordBreak === 'break-all'
   );
@@ -203,27 +206,25 @@ function collectForeignObjectExportAdjustments(svg: SVGSVGElement) {
 
   return Array.from(
     svg.querySelectorAll<SVGForeignObjectElement>('foreignObject'),
-  ).flatMap((fo) => {
+  ).map((fo) => {
     const content = fo.firstElementChild as HTMLElement | null;
-    if (!content) return [];
+    if (!content) return null;
 
     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,
-    ];
+    if (!toParentCoord) return null;
+
+    return {
+      rootBounds: getFOContentBoundsInSVG(fo, content, toSVGCoord),
+      localBounds: getFOContentBoundsInSVG(fo, content, toParentCoord),
+    } satisfies ForeignObjectExportAdjustment;
   });
 }
 
 function computeFullViewBox(
   svg: SVGSVGElement,
-  adjustments: ForeignObjectExportAdjustment[],
+  adjustments: Array<ForeignObjectExportAdjustment | null>,
 ): string | null {
   const viewBox = getExportViewBox(svg);
   if (!viewBox) return null;
@@ -233,7 +234,9 @@ function computeFullViewBox(
   let maxX = viewBox.x + viewBox.width;
   let maxY = viewBox.y + viewBox.height;
 
-  adjustments.forEach(({ rootBounds }) => {
+  adjustments.forEach((adjustment) => {
+    if (!adjustment) return;
+    const { rootBounds } = adjustment;
     const [left, top, right, bottom] = rootBounds;
     minX = Math.min(minX, left);
     minY = Math.min(minY, top);
@@ -258,13 +261,14 @@ function computeFullViewBox(
 
 function applyForeignObjectExportAdjustments(
   svg: SVGSVGElement,
-  adjustments: ForeignObjectExportAdjustment[],
+  adjustments: Array<ForeignObjectExportAdjustment | null>,
 ) {
   const clonedForeignObjects = Array.from(
     svg.querySelectorAll<SVGForeignObjectElement>('foreignObject'),
   );
 
   adjustments.forEach((adjustment, index) => {
+    if (!adjustment) return;
     const clonedForeignObject = clonedForeignObjects[index];
     if (!clonedForeignObject) return;