@antv/infographic 0.2.17 → 0.2.19

package/src/exporter/svg.ts

@@ -11,6 +11,17 @@ 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;
+  exportBounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}
 
 export async function exportToSVGString(
   svg: SVGSVGElement,
@@ -26,7 +37,12 @@ function getExportViewBox(svg: SVGSVGElement) {
 
   const width = parseAbsoluteLength(svg.getAttribute('width'));
   const height = parseAbsoluteLength(svg.getAttribute('height'));
-  if (width > 0 && height > 0) {
+  if (
+    !Number.isNaN(width) &&
+    width > 0 &&
+    !Number.isNaN(height) &&
+    height > 0
+  ) {
     return { x: 0, y: 0, width, height };
   }
 
@@ -46,41 +62,98 @@ function parseAbsoluteLength(value: string | null): number {
   return Number.parseFloat(trimmed);
 }
 
-function measureSpanContentHeight(span: HTMLElement): number {
+function parseCoordinate(value: string | null): number {
+  const parsed = parseAbsoluteLength(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+interface MeasuredSpanContentDimensions {
+  height: number;
+  width: number;
+}
+
+function measureSpanContentDimensions(
+  span: HTMLElement,
+  measureWidth: boolean,
+): MeasuredSpanContentDimensions {
   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.width = prevWidth;
     span.style.overflow = prevOverflow;
   }
 }
 
-function measureSpanContentWidth(span: HTMLElement): number {
-  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;
-  }
+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'
+  );
 }
 
-// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+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(
   fo: SVGForeignObjectElement,
-  content: HTMLElement,
   toSVGCoord: (x: number, y: number) => SVGPoint,
+  {
+    contentHeight,
+    contentWidth,
+    keepForeignObjectWidth,
+  }: {
+    contentHeight: number;
+    contentWidth: number;
+    keepForeignObjectWidth: boolean;
+  },
 ): [number, number, number, number] {
   const foRect = fo.getBoundingClientRect();
   const foTopLeft = toSVGCoord(foRect.left, foRect.top);
@@ -98,20 +171,17 @@ function getFOContentBoundsInSVG(
     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
+    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 as Element);
   const alignItems = computedStyle.alignItems;
   const justifyContent = computedStyle.justifyContent;
+  const contentWidthSVG = keepForeignObjectWidth
+    ? foWidthSVG
+    : Math.max(foWidthSVG, contentWidth * svgUnitsPerClientPxX);
 
   // Calculate vertical bounds
   let top: number, bottom: number;
@@ -148,47 +218,91 @@ 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 {
+function collectForeignObjectExportAdjustments(svg: SVGSVGElement) {
+  const toSVGCoord = createCoordConverter(svg, svg);
+  if (!toSVGCoord) return [];
+
+  return Array.from(
+    svg.querySelectorAll<SVGForeignObjectElement>('foreignObject'),
+  ).map((fo) => {
+    const content = fo.firstElementChild as HTMLElement | null;
+    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,
+    } satisfies ForeignObjectExportAdjustment;
+  });
+}
+
+function computeFullViewBox(
+  svg: SVGSVGElement,
+  adjustments: Array<ForeignObjectExportAdjustment | null>,
+): string | null {
   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: number, clientY: number) => {
-    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<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((adjustment) => {
+    if (!adjustment) return;
+    const { rootBounds } = adjustment;
+    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;
@@ -205,6 +319,23 @@ function computeFullViewBox(svg: SVGSVGElement): string | null {
   return `${newX} ${newY} ${newWidth} ${newHeight}`;
 }
 
+function applyForeignObjectExportAdjustments(
+  svg: SVGSVGElement,
+  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;
+
+    setAttributes(clonedForeignObject, adjustment.exportBounds);
+  });
+}
+
 export async function exportToSVG(
   svg: SVGSVGElement,
   options: Omit<SVGExportOptions, 'type'> = {},
@@ -217,7 +348,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);
     }
@@ -253,7 +386,9 @@ async function embedIcons(svg: SVGSVGElement) {
 
     if (!existsSymbol) {
       const symbolElement = document.querySelector(href);
-      if (symbolElement) defs.appendChild(symbolElement.cloneNode(true));
+      if (symbolElement) {
+        defs.appendChild(symbolElement.cloneNode(true));
+      }
     }
   });
 }
@@ -487,6 +622,7 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
 
   while (queue.length) {
     const id = queue.shift()!;
+    if (!id) continue;
     if (visited.has(id)) continue;
     visited.add(id);
 
@@ -503,11 +639,80 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
   return collected;
 }
 
+// Fallback implementation based on the CSS.escape algorithm
+function cssEscape(value: string): string {
+  const string = String(value);
+  const length = string.length;
+  let result = '';
+
+  if (length === 0) {
+    return '';
+  }
+
+  for (let i = 0; i < length; i++) {
+    const codeUnit = string.charCodeAt(i);
+
+    // Null character
+    if (codeUnit === 0x0000) {
+      result += '\uFFFD';
+      continue;
+    }
+
+    // Control characters or DEL
+    if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) || codeUnit === 0x007f) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if first character is a digit
+    if (i === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if second character is a digit and first is a hyphen
+    if (
+      i === 1 &&
+      codeUnit >= 0x0030 &&
+      codeUnit <= 0x0039 &&
+      string.charCodeAt(0) === 0x002d
+    ) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // If the character is the first and is a hyphen followed by end of string, escape it
+    if (i === 0 && length === 1 && codeUnit === 0x002d) {
+      result += '\\' + string.charAt(i);
+      continue;
+    }
+
+    // Characters that are safe to use unescaped
+    if (
+      codeUnit >= 0x0080 ||
+      (codeUnit >= 0x0030 && codeUnit <= 0x0039) || // 0-9
+      (codeUnit >= 0x0041 && codeUnit <= 0x005a) || // A-Z
+      (codeUnit >= 0x0061 && codeUnit <= 0x007a) || // a-z
+      codeUnit === 0x002d || // -
+      codeUnit === 0x005f // _
+    ) {
+      result += string.charAt(i);
+      continue;
+    }
+
+    // All other characters
+    result += '\\' + string.charAt(i);
+  }
+
+  return result;
+}
+
 function escapeCssId(id: string) {
   if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
     return globalThis.CSS.escape(id);
   }
-  return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+
+  return cssEscape(id);
 }
 
 function removeDefs(svg: SVGSVGElement) {

package/src/resource/loaders/search.ts

@@ -43,9 +43,6 @@ export async function loadSearchResource(query: string, format?: string) {
       const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
       return loadSVGResource(svgText);
     }
-    if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
-      return loadImageBase64Resource(result);
-    }
     return loadImageBase64Resource(result);
   }
 

package/src/templates/utils.ts

@@ -43,13 +43,34 @@ function getCommonPrefixLength(source: string, target: string): number {
   const limit = Math.min(source.length, target.length);
   let index = 0;
 
-  while (index < limit && source[index] === target[index]) {
+  while (
+    index < limit &&
+    source.charCodeAt(index) === target.charCodeAt(index)
+  ) {
     index += 1;
   }
 
   return index;
 }
 
+function isBetterMatch(
+  bestMatch: string | undefined,
+  bestDistance: number,
+  bestPrefixLength: number,
+  candidateKey: string,
+  candidateDistance: number,
+  candidatePrefixLength: number,
+): boolean {
+  return (
+    candidateDistance < bestDistance ||
+    (candidateDistance === bestDistance &&
+      candidatePrefixLength > bestPrefixLength) ||
+    (candidateDistance === bestDistance &&
+      candidatePrefixLength === bestPrefixLength &&
+      (!bestMatch || candidateKey < bestMatch))
+  );
+}
+
 export function findClosestTemplateKey(
   type: string,
   keys: Iterable<string>,
@@ -71,11 +92,14 @@ export function findClosestTemplateKey(
     const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
 
     if (
-      distance < bestDistance ||
-      (distance === bestDistance && prefixLength > bestPrefixLength) ||
-      (distance === bestDistance &&
-        prefixLength === bestPrefixLength &&
-        (!bestMatch || key < bestMatch))
+      isBetterMatch(
+        bestMatch,
+        bestDistance,
+        bestPrefixLength,
+        key,
+        distance,
+        prefixLength,
+      )
     ) {
       bestMatch = key;
       bestDistance = distance;

package/src/utils/padding.ts

@@ -27,7 +27,7 @@ export function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding) {
   if (isNode) {
     setSVGPaddingInNode(svg, padding);
   } else {
-    if (document.contains(svg)) {
+    if (svg.isConnected) {
       setSVGPaddingInBrowser(svg, padding);
     } else {
       try {

package/src/utils/style.ts

@@ -1,8 +1,35 @@
-export function injectStyleOnce(id: string, styles: string) {
-  if (document.getElementById(id)) return;
+type StyleTarget = Document | ShadowRoot | Node | null | undefined;
 
-  const style = document.createElement('style');
+function resolveStyleRoot(target?: StyleTarget): Document | ShadowRoot {
+  if (!target) return document;
+  if (target instanceof Document || target instanceof ShadowRoot) return target;
+  if (!target.isConnected) return document;
+
+  const root = target.getRootNode();
+  return root instanceof ShadowRoot ? root : document;
+}
+
+function hasStyle(root: Document | ShadowRoot, id: string) {
+  if (root instanceof Document) return Boolean(root.getElementById(id));
+  return Boolean(root.querySelector(`#${id}`));
+}
+
+export function injectStyleOnce(
+  id: string,
+  styles: string,
+  target?: StyleTarget,
+) {
+  const root = resolveStyleRoot(target);
+  if (hasStyle(root, id)) return;
+
+  const doc = root instanceof Document ? root : (root.ownerDocument ?? document);
+  const style = doc.createElement('style');
   style.id = id;
   style.textContent = styles;
-  document.head.appendChild(style);
+
+  if (root instanceof Document) {
+    root.head.appendChild(style);
+  } else {
+    root.appendChild(style);
+  }
 }

package/src/version.ts

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