@antv/infographic 0.2.18 → 0.2.19

package/esm/exporter/svg.js

@@ -44,38 +44,69 @@ function parseAbsoluteLength(value) {
         return Number.NaN;
     return Number.parseFloat(trimmed);
 }
-function measureSpanContentHeight(span) {
+function parseCoordinate(value) {
+    const parsed = parseAbsoluteLength(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+function measureSpanContentDimensions(span, measureWidth) {
     const prevHeight = span.style.height;
+    const prevWidth = span.style.width;
     const prevOverflow = span.style.overflow;
     try {
         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;
+        let width = span.scrollWidth;
+        if (measureWidth) {
+            span.style.width = 'max-content';
+            void span.offsetWidth; // force reflow
+            width = span.scrollWidth;
+        }
+        return {
+            height: Math.max(scrollHeight, rectHeight),
+            width,
+        };
     }
     finally {
         span.style.height = prevHeight;
-        span.style.overflow = prevOverflow;
-    }
-}
-function measureSpanContentWidth(span) {
-    const prevWidth = span.style.width;
-    const prevOverflow = span.style.overflow;
-    try {
-        span.style.width = 'max-content';
-        span.style.overflow = 'hidden';
-        void span.offsetWidth; // force reflow
-        return span.scrollWidth;
-    }
-    finally {
         span.style.width = prevWidth;
         span.style.overflow = prevOverflow;
     }
 }
-// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+function shouldKeepForeignObjectWidth(style) {
+    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');
+}
+function createCoordConverter(svg, element) {
+    if (typeof element.getScreenCTM !== 'function')
+        return null;
+    const screenCTM = element.getScreenCTM();
+    if (!screenCTM)
+        return null;
+    const inverseCTM = screenCTM.inverse();
+    return (clientX, clientY) => {
+        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(fo, content, toSVGCoord) {
+function getFOContentBoundsInSVG(fo, toSVGCoord, { contentHeight, contentWidth, keepForeignObjectWidth, }) {
     const foRect = fo.getBoundingClientRect();
     const foTopLeft = toSVGCoord(foRect.left, foRect.top);
     const foBottomRight = toSVGCoord(foRect.right, foRect.bottom);
@@ -87,16 +118,15 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     const foHeightSVG = foBottomSVG - foTopSVG;
     const svgUnitsPerClientPxY = foRect.height > 0 ? foHeightSVG / foRect.height : 1;
     const svgUnitsPerClientPxX = foRect.width > 0 ? foWidthSVG / foRect.width : 1;
-    // Measure actual content dimensions
-    const realScrollHeight = measureSpanContentHeight(content);
-    const contentHeightSVG = realScrollHeight > 0
-        ? realScrollHeight * svgUnitsPerClientPxY
+    const contentHeightSVG = contentHeight > 0
+        ? contentHeight * svgUnitsPerClientPxY
         : foHeightSVG;
-    const realScrollWidth = measureSpanContentWidth(content);
-    const contentWidthSVG = realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
-    const computedStyle = window.getComputedStyle(content);
+    const computedStyle = window.getComputedStyle(fo.firstElementChild);
     const alignItems = computedStyle.alignItems;
     const justifyContent = computedStyle.justifyContent;
+    const contentWidthSVG = keepForeignObjectWidth
+        ? foWidthSVG
+        : Math.max(foWidthSVG, contentWidth * svgUnitsPerClientPxX);
     // Calculate vertical bounds
     let top, bottom;
     if (alignItems === 'flex-end' || alignItems === 'end') {
@@ -131,38 +161,75 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     }
     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) {
+function collectForeignObjectExportAdjustments(svg) {
+    const toSVGCoord = createCoordConverter(svg, svg);
+    if (!toSVGCoord)
+        return [];
+    return Array.from(svg.querySelectorAll('foreignObject')).map((fo) => {
+        const content = fo.firstElementChild;
+        if (!content)
+            return null;
+        const computedStyle = window.getComputedStyle(content);
+        const keepForeignObjectWidth = shouldKeepForeignObjectWidth(computedStyle);
+        const measuredContent = measureSpanContentDimensions(content, !keepForeignObjectWidth);
+        const parent = fo.parentElement instanceof SVGGraphicsElement ? fo.parentElement : svg;
+        const toParentCoord = createCoordConverter(svg, parent);
+        const toLocalCoord = createCoordConverter(svg, fo);
+        if (!toParentCoord)
+            return null;
+        const parentBounds = getFOContentBoundsInSVG(fo, toParentCoord, {
+            contentHeight: measuredContent.height,
+            contentWidth: measuredContent.width,
+            keepForeignObjectWidth,
+        });
+        const originalX = parseCoordinate(fo.getAttribute('x'));
+        const originalY = parseCoordinate(fo.getAttribute('y'));
+        const localBounds = toLocalCoord
+            ? getFOContentBoundsInSVG(fo, toLocalCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            })
+            : null;
+        const hasTransform = fo.hasAttribute('transform');
+        if (hasTransform && !localBounds)
+            return null;
+        const exportBounds = localBounds
+            ? {
+                x: originalX + localBounds[0],
+                y: originalY + localBounds[1],
+                width: localBounds[2] - localBounds[0],
+                height: localBounds[3] - localBounds[1],
+            }
+            : {
+                x: parentBounds[0],
+                y: parentBounds[1],
+                width: parentBounds[2] - parentBounds[0],
+                height: parentBounds[3] - parentBounds[1],
+            };
+        return {
+            rootBounds: getFOContentBoundsInSVG(fo, toSVGCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            }),
+            exportBounds,
+        };
+    });
+}
+function computeFullViewBox(svg, adjustments) {
     const viewBox = getExportViewBox(svg);
     if (!viewBox)
         return null;
-    if (typeof svg.getScreenCTM !== 'function')
-        return null;
-    const screenCTM = svg.getScreenCTM();
-    if (!screenCTM)
-        return null;
-    const inverseCTM = screenCTM.inverse();
-    const toSVGCoord = (clientX, clientY) => {
-        const pt = svg.createSVGPoint();
-        pt.x = clientX;
-        pt.y = clientY;
-        return pt.matrixTransform(inverseCTM);
-    };
     let minX = viewBox.x;
     let minY = viewBox.y;
     let maxX = viewBox.x + viewBox.width;
     let maxY = viewBox.y + viewBox.height;
-    svg
-        .querySelectorAll('foreignObject')
-        .forEach((fo) => {
-        const content = fo.firstElementChild;
-        if (!content)
+    adjustments.forEach((adjustment) => {
+        if (!adjustment)
             return;
-        const [left, top, right, bottom] = getFOContentBoundsInSVG(fo, content, toSVGCoord);
+        const { rootBounds } = adjustment;
+        const [left, top, right, bottom] = rootBounds;
         minX = Math.min(minX, left);
         minY = Math.min(minY, top);
         maxX = Math.max(maxX, right);
@@ -179,12 +246,25 @@ function computeFullViewBox(svg) {
         return null;
     return `${newX} ${newY} ${newWidth} ${newHeight}`;
 }
+function applyForeignObjectExportAdjustments(svg, adjustments) {
+    const clonedForeignObjects = Array.from(svg.querySelectorAll('foreignObject'));
+    adjustments.forEach((adjustment, index) => {
+        if (!adjustment)
+            return;
+        const clonedForeignObject = clonedForeignObjects[index];
+        if (!clonedForeignObject)
+            return;
+        setAttributes(clonedForeignObject, adjustment.exportBounds);
+    });
+}
 export function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
         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);
             }

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.18";
+export declare const VERSION = "0.2.19";

package/esm/version.js

@@ -1 +1 @@
-export const VERSION = '0.2.18';
+export const VERSION = '0.2.19';

package/lib/exporter/svg.js

@@ -48,38 +48,69 @@ function parseAbsoluteLength(value) {
         return Number.NaN;
     return Number.parseFloat(trimmed);
 }
-function measureSpanContentHeight(span) {
+function parseCoordinate(value) {
+    const parsed = parseAbsoluteLength(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+function measureSpanContentDimensions(span, measureWidth) {
     const prevHeight = span.style.height;
+    const prevWidth = span.style.width;
     const prevOverflow = span.style.overflow;
     try {
         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;
+        let width = span.scrollWidth;
+        if (measureWidth) {
+            span.style.width = 'max-content';
+            void span.offsetWidth; // force reflow
+            width = span.scrollWidth;
+        }
+        return {
+            height: Math.max(scrollHeight, rectHeight),
+            width,
+        };
     }
     finally {
         span.style.height = prevHeight;
-        span.style.overflow = prevOverflow;
-    }
-}
-function measureSpanContentWidth(span) {
-    const prevWidth = span.style.width;
-    const prevOverflow = span.style.overflow;
-    try {
-        span.style.width = 'max-content';
-        span.style.overflow = 'hidden';
-        void span.offsetWidth; // force reflow
-        return span.scrollWidth;
-    }
-    finally {
         span.style.width = prevWidth;
         span.style.overflow = prevOverflow;
     }
 }
-// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+function shouldKeepForeignObjectWidth(style) {
+    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');
+}
+function createCoordConverter(svg, element) {
+    if (typeof element.getScreenCTM !== 'function')
+        return null;
+    const screenCTM = element.getScreenCTM();
+    if (!screenCTM)
+        return null;
+    const inverseCTM = screenCTM.inverse();
+    return (clientX, clientY) => {
+        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(fo, content, toSVGCoord) {
+function getFOContentBoundsInSVG(fo, toSVGCoord, { contentHeight, contentWidth, keepForeignObjectWidth, }) {
     const foRect = fo.getBoundingClientRect();
     const foTopLeft = toSVGCoord(foRect.left, foRect.top);
     const foBottomRight = toSVGCoord(foRect.right, foRect.bottom);
@@ -91,16 +122,15 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     const foHeightSVG = foBottomSVG - foTopSVG;
     const svgUnitsPerClientPxY = foRect.height > 0 ? foHeightSVG / foRect.height : 1;
     const svgUnitsPerClientPxX = foRect.width > 0 ? foWidthSVG / foRect.width : 1;
-    // Measure actual content dimensions
-    const realScrollHeight = measureSpanContentHeight(content);
-    const contentHeightSVG = realScrollHeight > 0
-        ? realScrollHeight * svgUnitsPerClientPxY
+    const contentHeightSVG = contentHeight > 0
+        ? contentHeight * svgUnitsPerClientPxY
         : foHeightSVG;
-    const realScrollWidth = measureSpanContentWidth(content);
-    const contentWidthSVG = realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
-    const computedStyle = window.getComputedStyle(content);
+    const computedStyle = window.getComputedStyle(fo.firstElementChild);
     const alignItems = computedStyle.alignItems;
     const justifyContent = computedStyle.justifyContent;
+    const contentWidthSVG = keepForeignObjectWidth
+        ? foWidthSVG
+        : Math.max(foWidthSVG, contentWidth * svgUnitsPerClientPxX);
     // Calculate vertical bounds
     let top, bottom;
     if (alignItems === 'flex-end' || alignItems === 'end') {
@@ -135,38 +165,75 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     }
     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) {
+function collectForeignObjectExportAdjustments(svg) {
+    const toSVGCoord = createCoordConverter(svg, svg);
+    if (!toSVGCoord)
+        return [];
+    return Array.from(svg.querySelectorAll('foreignObject')).map((fo) => {
+        const content = fo.firstElementChild;
+        if (!content)
+            return null;
+        const computedStyle = window.getComputedStyle(content);
+        const keepForeignObjectWidth = shouldKeepForeignObjectWidth(computedStyle);
+        const measuredContent = measureSpanContentDimensions(content, !keepForeignObjectWidth);
+        const parent = fo.parentElement instanceof SVGGraphicsElement ? fo.parentElement : svg;
+        const toParentCoord = createCoordConverter(svg, parent);
+        const toLocalCoord = createCoordConverter(svg, fo);
+        if (!toParentCoord)
+            return null;
+        const parentBounds = getFOContentBoundsInSVG(fo, toParentCoord, {
+            contentHeight: measuredContent.height,
+            contentWidth: measuredContent.width,
+            keepForeignObjectWidth,
+        });
+        const originalX = parseCoordinate(fo.getAttribute('x'));
+        const originalY = parseCoordinate(fo.getAttribute('y'));
+        const localBounds = toLocalCoord
+            ? getFOContentBoundsInSVG(fo, toLocalCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            })
+            : null;
+        const hasTransform = fo.hasAttribute('transform');
+        if (hasTransform && !localBounds)
+            return null;
+        const exportBounds = localBounds
+            ? {
+                x: originalX + localBounds[0],
+                y: originalY + localBounds[1],
+                width: localBounds[2] - localBounds[0],
+                height: localBounds[3] - localBounds[1],
+            }
+            : {
+                x: parentBounds[0],
+                y: parentBounds[1],
+                width: parentBounds[2] - parentBounds[0],
+                height: parentBounds[3] - parentBounds[1],
+            };
+        return {
+            rootBounds: getFOContentBoundsInSVG(fo, toSVGCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            }),
+            exportBounds,
+        };
+    });
+}
+function computeFullViewBox(svg, adjustments) {
     const viewBox = getExportViewBox(svg);
     if (!viewBox)
         return null;
-    if (typeof svg.getScreenCTM !== 'function')
-        return null;
-    const screenCTM = svg.getScreenCTM();
-    if (!screenCTM)
-        return null;
-    const inverseCTM = screenCTM.inverse();
-    const toSVGCoord = (clientX, clientY) => {
-        const pt = svg.createSVGPoint();
-        pt.x = clientX;
-        pt.y = clientY;
-        return pt.matrixTransform(inverseCTM);
-    };
     let minX = viewBox.x;
     let minY = viewBox.y;
     let maxX = viewBox.x + viewBox.width;
     let maxY = viewBox.y + viewBox.height;
-    svg
-        .querySelectorAll('foreignObject')
-        .forEach((fo) => {
-        const content = fo.firstElementChild;
-        if (!content)
+    adjustments.forEach((adjustment) => {
+        if (!adjustment)
             return;
-        const [left, top, right, bottom] = getFOContentBoundsInSVG(fo, content, toSVGCoord);
+        const { rootBounds } = adjustment;
+        const [left, top, right, bottom] = rootBounds;
         minX = Math.min(minX, left);
         minY = Math.min(minY, top);
         maxX = Math.max(maxX, right);
@@ -183,12 +250,25 @@ function computeFullViewBox(svg) {
         return null;
     return `${newX} ${newY} ${newWidth} ${newHeight}`;
 }
+function applyForeignObjectExportAdjustments(svg, adjustments) {
+    const clonedForeignObjects = Array.from(svg.querySelectorAll('foreignObject'));
+    adjustments.forEach((adjustment, index) => {
+        if (!adjustment)
+            return;
+        const clonedForeignObject = clonedForeignObjects[index];
+        if (!clonedForeignObject)
+            return;
+        (0, utils_1.setAttributes)(clonedForeignObject, adjustment.exportBounds);
+    });
+}
 function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
         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);
             }

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.18";
+export declare const VERSION = "0.2.19";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.18';
+exports.VERSION = '0.2.19';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",