fix(exporter): ensure PNG/SVG export covers all foreignObject text (#227)

* fix(exporter): ensure PNG/SVG export covers all foreignObject text content

* refactor(exporter): optimize svg exporter

* feat(dev): support download image

* refactor(exporter): resolve issue comments

---------

Co-authored-by: Aaron <antvaaron@gmail.com>

Author: rnb-tron

__tests__/unit/exporter/svg.test.ts

@@ -9,6 +9,84 @@ vi.mock('../../../src/exporter/font', () => ({
 
 const svgNS = 'http://www.w3.org/2000/svg';
 
+function mockRect(
+  element: Element,
+  {
+    left = 0,
+    top = 0,
+    width,
+    height,
+  }: {
+    left?: number;
+    top?: number;
+    width: number;
+    height: number;
+  },
+) {
+  Object.defineProperty(element, 'getBoundingClientRect', {
+    configurable: true,
+    value: () =>
+      ({
+        x: left,
+        y: top,
+        left,
+        top,
+        width,
+        height,
+        right: left + width,
+        bottom: top + height,
+        toJSON: () => ({}),
+      }) as DOMRect,
+  });
+}
+
+function mockSvgCoordinateSpace(
+  svg: SVGSVGElement,
+  { scaleX = 1, scaleY = 1 }: { scaleX?: number; scaleY?: number } = {},
+) {
+  const screenCTM = {
+    a: scaleX,
+    d: scaleY,
+    e: 0,
+    f: 0,
+    inverse() {
+      return {
+        a: 1 / scaleX,
+        d: 1 / scaleY,
+        e: 0,
+        f: 0,
+      };
+    },
+  };
+
+  Object.defineProperty(svg, 'getScreenCTM', {
+    configurable: true,
+    value: () => screenCTM,
+  });
+
+  Object.defineProperty(svg, 'createSVGPoint', {
+    configurable: true,
+    value: () => {
+      const point = {
+        x: 0,
+        y: 0,
+        matrixTransform(transform: {
+          a?: number;
+          d?: number;
+          e?: number;
+          f?: number;
+        }) {
+          return {
+            x: point.x * (transform.a ?? 1) + (transform.e ?? 0),
+            y: point.y * (transform.d ?? 1) + (transform.f ?? 0),
+          };
+        },
+      };
+      return point;
+    },
+  });
+}
+
 describe('exporter/svg', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
@@ -166,4 +244,79 @@ describe('exporter/svg', () => {
     expect(exportedRect?.getAttribute('fill')).toContain('data:image/svg+xml');
     expect(exportedRect?.getAttribute('fill')).not.toContain('url(#');
   });
+
+  it('converts foreignObject overflow measurements from client pixels to svg units', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('viewBox', '0 0 100 100');
+    mockSvgCoordinateSpace(svg, { scaleX: 2, scaleY: 2 });
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    const span = document.createElement('span');
+    span.style.alignItems = 'flex-end';
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 300,
+    });
+    foreignObject.appendChild(span);
+    svg.appendChild(foreignObject);
+
+    mockRect(foreignObject, { left: 0, top: 0, width: 200, height: 200 });
+
+    const exported = await exportToSVG(svg);
+
+    expect(exported.getAttribute('viewBox')).toBe('0 -50 100 150');
+    expect(exported.getAttribute('width')).toBe('100');
+    expect(exported.getAttribute('height')).toBe('150');
+  });
+
+  it('expands exports for root svg elements without an explicit viewBox', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('width', '200');
+    svg.setAttribute('height', '100');
+    mockSvgCoordinateSpace(svg);
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    const span = document.createElement('span');
+    span.style.alignItems = 'flex-end';
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 150,
+    });
+    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 -50 200 150');
+    expect(exported.getAttribute('width')).toBe('200');
+    expect(exported.getAttribute('height')).toBe('150');
+  });
+
+  it('uses rendered bounds when root svg width and height are relative values', async () => {
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    mockSvgCoordinateSpace(svg);
+    mockRect(svg, { left: 0, top: 0, width: 320, height: 180 });
+
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    const span = document.createElement('span');
+    span.style.alignItems = 'flex-end';
+    Object.defineProperty(span, 'scrollHeight', {
+      configurable: true,
+      get: () => 270,
+    });
+    foreignObject.appendChild(span);
+    svg.appendChild(foreignObject);
+
+    mockRect(foreignObject, { left: 0, top: 0, width: 320, height: 180 });
+
+    const exported = await exportToSVG(svg);
+
+    expect(exported.getAttribute('viewBox')).toBe('0 -90 320 270');
+    expect(exported.getAttribute('width')).toBe('320');
+    expect(exported.getAttribute('height')).toBe('270');
+  });
 });

dev/src/Infographic.tsx

@@ -4,7 +4,7 @@ import {
   registerResourceLoader,
   Infographic as Renderer,
 } from '@antv/infographic';
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 const svgTextCache = new Map<string, string>();
 const pendingRequests = new Map<string, Promise<string | null>>();
@@ -91,57 +91,90 @@ registerResourceLoader(async (config) => {
   }
 });
 
-export const Infographic = ({
-  options,
-  init,
-  onError,
-}: {
+type ExportType = 'png' | 'svg';
+
+export interface InfographicHandle {
+  download: (type: ExportType, filename?: string) => Promise<void>;
+}
+
+type InfographicProps = {
   options: string | InfographicOptions;
   init?: Partial<InfographicOptions>;
   onError?: (error: Error | null) => void;
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const instanceRef = useRef<Renderer | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    if (instanceRef.current) return;
-
-    const instance = new Renderer({
-      container: containerRef.current,
-      svg: {
-        attributes: {
-          width: '100%',
-          height: '100%',
+};
+
+function downloadDataURL(dataURL: string, filename: string) {
+  const link = document.createElement('a');
+  link.href = dataURL;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+export const Infographic = forwardRef<InfographicHandle, InfographicProps>(
+  ({ options, init, onError }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const instanceRef = useRef<Renderer | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        async download(type, filename = `infographic.${type}`) {
+          const instance = instanceRef.current;
+          if (!instance) {
+            throw new Error('Infographic is not ready yet.');
+          }
+
+          const dataURL = await instance.toDataURL({ type });
+          downloadDataURL(dataURL, filename);
         },
-        style: {
-          maxHeight: '80vh',
+      }),
+      [],
+    );
+
+    useEffect(() => {
+      if (!containerRef.current) return;
+      if (instanceRef.current) return;
+
+      const instance = new Renderer({
+        container: containerRef.current,
+        svg: {
+          attributes: {
+            width: '100%',
+            height: '100%',
+          },
+          style: {
+            maxHeight: '80vh',
+          },
         },
-      },
-      ...init,
-    });
-    instanceRef.current = instance;
-    Object.assign(window, { infographic: instance });
-
-    return () => {
-      instance.destroy();
-      instanceRef.current = null;
-    };
-  }, [init]);
-
-  useEffect(() => {
-    const instance = instanceRef.current;
-    if (!instance || !options) return;
-
-    try {
-      onError?.(null);
-      instance.render(options);
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      console.error('Dev Infographic render error', error);
-      onError?.(error);
-    }
-  }, [options, onError]);
+        ...init,
+      });
+      instanceRef.current = instance;
+      Object.assign(window, { infographic: instance });
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-};
+      return () => {
+        instance.destroy();
+        instanceRef.current = null;
+      };
+    }, [init]);
+
+    useEffect(() => {
+      const instance = instanceRef.current;
+      if (!instance || !options) return;
+
+      try {
+        onError?.(null);
+        instance.render(options);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        console.error('Dev Infographic render error', error);
+        onError?.(error);
+      }
+    }, [options, onError]);
+
+    return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  },
+);
+
+Infographic.displayName = 'Infographic';