fix(exporter): 修复 PNG 导出多行文本截断与宽度异常问题 (#244)

* fix(exporter): correct wrapped foreignObject export bounds

* fix(exporter): preserve foreignObject adjustment mapping

* fix: cr

* perf: optimize measurement methods to reduce reflows

Author: xxMudCloudxx

__tests__/unit/exporter/svg.test.ts

@@ -87,6 +87,47 @@ function mockSvgCoordinateSpace(
   });
 }
 
+function mockElementCoordinateSpace(
+  svg: SVGSVGElement,
+  element: SVGGraphicsElement,
+  {
+    scaleX = 1,
+    scaleY = 1,
+    translateX = 0,
+    translateY = 0,
+  }: {
+    scaleX?: number;
+    scaleY?: number;
+    translateX?: number;
+    translateY?: number;
+  } = {},
+) {
+  const screenCTM = {
+    a: scaleX,
+    d: scaleY,
+    e: translateX,
+    f: translateY,
+    inverse() {
+      return {
+        a: 1 / scaleX,
+        d: 1 / scaleY,
+        e: -translateX / scaleX,
+        f: -translateY / scaleY,
+      };
+    },
+  };
+
+  Object.defineProperty(element, 'getScreenCTM', {
+    configurable: true,
+    value: () => screenCTM,
+  });
+
+  Object.defineProperty(element, 'createSVGPoint', {
+    configurable: true,
+    value: () => svg.createSVGPoint(),
+  });
+}
+
 describe('exporter/svg', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
@@ -371,4 +412,230 @@ 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');
+  });
+
+  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');
+  });
+
+  it('does not double-apply foreignObject transforms when resizing exported bounds', 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');
+    foreignObject.setAttribute('transform', 'translate(5 7)');
+
+    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: 25, top: 37, width: 140, height: 40 });
+    mockElementCoordinateSpace(svg, foreignObject as SVGGraphicsElement, {
+      translateX: 25,
+      translateY: 37,
+    });
+
+    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');
+    expect(exportedForeignObject?.getAttribute('transform')).toBe(
+      'translate(5 7)',
+    );
+  });
 });