@antv/infographic 0.1.0 → 0.1.2

package/src/designs/structures/hierarchy-tree.tsx

@@ -9,7 +9,6 @@ import {
   Polygon,
 } from '../../jsx';
 import { Data } from '../../types';
-import { getDatumByIndexes } from '../../utils';
 import {
   BtnAdd,
   BtnRemove,
@@ -176,19 +175,28 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
   };
 
   // 内置工具方法：计算各层节点边界
-  const computeLevelBounds = (maxLevels: number) => {
+  const computeLevelBounds = (rootNode: d3.HierarchyNode<any>) => {
     let maxWidth = 0,
       maxHeight = 0;
     const levelBounds = new Map<number, any>();
+    const sampleDatumByLevel = new Map<number, any>();
 
-    for (let level = 0; level < maxLevels; level++) {
+    // 记录每个深度遇到的首个节点，用于计算该层的尺寸
+    rootNode.each((node) => {
+      if (!sampleDatumByLevel.has(node.depth)) {
+        sampleDatumByLevel.set(node.depth, node.data);
+      }
+    });
+
+    for (let level = 0; level < rootNode.height + 1; level++) {
       const ItemComponent = getItemComponent(Items, level);
-      const indexes = Array(level + 1).fill(0);
+      const sampleDatum = sampleDatumByLevel.get(level) ?? {};
+      const indexes = sampleDatum._originalIndex ?? Array(level + 1).fill(0);
       const bounds = getElementBounds(
         <ItemComponent
           indexes={indexes}
           data={data}
-          datum={getDatumByIndexes(items, indexes)}
+          datum={sampleDatum}
           positionH="center"
         />,
       );
@@ -529,9 +537,7 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
   // 构建和布局
   const hierarchyData = buildHierarchyData(items);
   const root = d3.hierarchy(hierarchyData);
-  const { levelBounds, maxWidth, maxHeight } = computeLevelBounds(
-    root.height + 1,
-  );
+  const { levelBounds, maxWidth, maxHeight } = computeLevelBounds(root);
 
   const treeLayout = d3
     .tree<any>()

package/src/exporter/font.ts

@@ -0,0 +1,273 @@
+import type { FontFace as CSSFontFace, Declaration, Stylesheet } from 'css';
+// @ts-expect-error ignore
+import parse from 'css/lib/parse';
+import { getFontURLs, getWoff2BaseURL } from '../renderer';
+import {
+  createElement,
+  decodeFontFamily,
+  join,
+  normalizeFontWeightName,
+} from '../utils';
+
+interface FontFaceAttributes {
+  'font-family': string;
+  src: string;
+  'font-style': string;
+  'font-display': string;
+  'font-weight': string;
+  'unicode-range': string;
+}
+
+const fontDataUrlCache = new Map<string, string>();
+
+export async function embedFonts(svg: SVGSVGElement, embedResources = true) {
+  // 1. 收集使用到的 font-family
+  const usedFonts = collectUsedFonts(svg);
+  if (usedFonts.size === 0) return;
+
+  const parsedFontsFaces: FontFaceAttributes[] = [];
+
+  // 2. 对每个使用到的字体，解析 CSS + 结合 document.fonts 的实际加载子集
+  await Promise.all(
+    Array.from(usedFonts).map(async (fontFamily) => {
+      const loadedFonts = getActualLoadedFontFace(fontFamily);
+      if (!loadedFonts.length) return;
+
+      const cssFontFaces = await parseFontFamily(fontFamily);
+      if (!cssFontFaces.length) return;
+
+      const processed = await Promise.all(
+        cssFontFaces.map(async (rawFace) => {
+          const fontFace = normalizeFontFace(rawFace);
+
+          const unicodeRange = fontFace['unicode-range'].replace(/\s/g, '');
+          const subset = loadedFonts.find(
+            (font) =>
+              font.unicodeRange &&
+              font.unicodeRange.replace(/\s/g, '') === unicodeRange,
+          );
+
+          // 如果找不到对应子集，就不处理这个 font-face
+          if (!subset) return null;
+
+          const baseURL = getWoff2BaseURL(
+            fontFace['font-family'],
+            normalizeFontWeightName(fontFace['font-weight']),
+          );
+          if (!baseURL) return null;
+
+          // 更宽松地从 src 中提取 .woff2 URL 片段
+          const urlMatch = fontFace.src.match(
+            /url\(["']?(.*?\.woff2)[^"']*["']?\)/,
+          );
+          if (!urlMatch?.[1]) return null;
+
+          const woff2URL = join(baseURL, urlMatch[1]);
+
+          if (embedResources) {
+            const woff2DataUrl = await loadWoff2(woff2URL);
+            fontFace.src = `url(${woff2DataUrl}) format('woff2')`;
+          } else {
+            fontFace.src = `url(${woff2URL}) format('woff2')`;
+          }
+
+          return fontFace;
+        }),
+      );
+
+      parsedFontsFaces.push(
+        ...((processed.filter(Boolean) as FontFaceAttributes[]) || []),
+      );
+    }),
+  );
+
+  // 3. 创建 <style>@font-face...</style> 并插入 SVG
+  if (parsedFontsFaces.length > 0) {
+    insertFontStyle(svg, parsedFontsFaces);
+  }
+}
+
+/**
+ * 收集 SVG 中用到的 font-family
+ */
+function collectUsedFonts(svg: SVGSVGElement) {
+  const usedFonts = new Set<string>();
+
+  const svgFontFamily = svg.getAttribute('font-family');
+  if (svgFontFamily) {
+    const decodedFontFamily = decodeFontFamily(svgFontFamily);
+    if (decodedFontFamily) {
+      usedFonts.add(decodedFontFamily);
+    }
+  }
+
+  const textElements =
+    svg.querySelectorAll<HTMLSpanElement>('foreignObject span');
+
+  for (const span of textElements) {
+    const fontFamily = decodeFontFamily(span.style.fontFamily);
+    if (fontFamily) usedFonts.add(fontFamily);
+  }
+
+  return usedFonts;
+}
+
+/**
+ * 解析给定 font-family 对应的 CSS @font-face
+ */
+export async function parseFontFamily(fontFamily: string) {
+  const urls = getFontURLs(fontFamily);
+
+  const fontFaces: Partial<FontFaceAttributes>[] = [];
+
+  await Promise.allSettled(
+    urls.map(async (url) => {
+      const css = await fetch(url)
+        .then((res) => res.text())
+        .then((text) => parse(text) as Stylesheet)
+        .catch(() => {
+          console.error(`Failed to fetch or parse font CSS: ${url}`);
+          return null;
+        });
+
+      css?.stylesheet?.rules.forEach((rule) => {
+        if (rule.type === 'font-face') {
+          const fontFace = parseFontFace(rule as CSSFontFace);
+          fontFaces.push(fontFace);
+        }
+      });
+    }),
+  );
+
+  return fontFaces;
+}
+
+/**
+ * 从 document.fonts 中获取给定 family 且已加载的 FontFace
+ */
+export function getActualLoadedFontFace(fontFamily: string) {
+  const fonts: FontFace[] = [];
+
+  document.fonts.forEach((font) => {
+    if (
+      decodeFontFamily(font.family) === decodeFontFamily(fontFamily) &&
+      font.status === 'loaded'
+    ) {
+      fonts.push(font);
+    }
+  });
+
+  return fonts;
+}
+
+/**
+ * 从 css 的 FontFace 规则中提取声明
+ */
+function parseFontFace(rule: CSSFontFace) {
+  const declarations = (rule.declarations || []) as Declaration[];
+  const attrs: Record<string, string> = {};
+
+  declarations.forEach((declaration) => {
+    const { property, value } = declaration;
+    if (property && value) {
+      attrs[property] = value;
+    }
+  });
+
+  // 这里返回 Partial，后面统一 normalize
+  return attrs as Partial<FontFaceAttributes>;
+}
+
+/**
+ * 将不完整的 FontFaceAttributes 补全为完整结构，给后续逻辑使用
+ */
+function normalizeFontFace(
+  face: Partial<FontFaceAttributes>,
+): FontFaceAttributes {
+  return {
+    'font-family': face['font-family'] ?? '',
+    src: face.src ?? '',
+    'font-style': face['font-style'] ?? 'normal',
+    'font-display': face['font-display'] ?? 'swap',
+    'font-weight': face['font-weight'] ?? '400',
+    'unicode-range': face['unicode-range'] ?? 'U+0-FFFF',
+  };
+}
+
+/**
+ * 将 @font-face 写入 <style>，插入到 SVG 中合适的位置
+ */
+function insertFontStyle(svg: SVGSVGElement, fontFaces: FontFaceAttributes[]) {
+  // 简单去重：相同 family + weight + style + unicode-range + src 只保留一条
+  const unique: FontFaceAttributes[] = [];
+  const seen = new Set<string>();
+
+  for (const f of fontFaces) {
+    const key = [
+      f['font-family'],
+      f['font-weight'],
+      f['font-style'],
+      f['unicode-range'],
+      f.src,
+    ].join('|');
+
+    if (!seen.has(key)) {
+      seen.add(key);
+      unique.push(f);
+    }
+  }
+
+  if (unique.length === 0) return;
+
+  const style = createElement('style', { type: 'text/css' });
+
+  style.innerHTML = unique
+    .map((f) =>
+      `
+@font-face {
+  font-family: ${f['font-family']};
+  src: ${f.src};
+  font-style: ${f['font-style']};
+  font-weight: ${f['font-weight']};
+  font-display: ${f['font-display']};
+  unicode-range: ${f['unicode-range']};
+}
+`.trim(),
+    )
+    .join('\n');
+
+  // 尽量插在 <defs> 后面，否则插在第一个子节点前
+  const defs = svg.querySelector('defs');
+  if (defs && defs.parentNode) {
+    defs.parentNode.insertBefore(style, defs.nextSibling);
+  } else {
+    svg.insertBefore(style, svg.firstChild);
+  }
+}
+
+/**
+ * 加载 woff2 并转为 DataURL，带缓存
+ */
+async function loadWoff2(url: string) {
+  const cached = fontDataUrlCache.get(url);
+  if (cached) return cached;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to load font: ${url}`);
+  }
+
+  const blob = await response.blob();
+
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+
+  fontDataUrlCache.set(url, dataUrl);
+  return dataUrl;
+}

package/src/exporter/index.ts

@@ -0,0 +1,7 @@
+export { exportToPNGString } from './png';
+export { exportToSVGString } from './svg';
+export type {
+  ExportOptions,
+  PNGExportOptions,
+  SVGExportOptions,
+} from './types';

package/src/exporter/png.ts

@@ -0,0 +1,58 @@
+import { getViewBox } from '../utils';
+import { exportToSVG } from './svg';
+import { PNGExportOptions } from './types';
+
+export async function exportToPNGString(
+  svg: SVGSVGElement,
+  options: Omit<PNGExportOptions, 'type'> = {},
+): Promise<string> {
+  const { dpr = globalThis.devicePixelRatio ?? 2 } = options;
+  const node = await exportToSVG(svg);
+
+  const { width, height } = getViewBox(node);
+
+  return new Promise<string>((resolve, reject) => {
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'));
+        return;
+      }
+
+      // 应用 DPR 缩放
+      ctx.scale(dpr, dpr);
+
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+
+      node.setAttribute('width', String(width));
+      node.setAttribute('height', String(height));
+
+      const updatedSvgData = new XMLSerializer().serializeToString(node);
+      const svgURL =
+        'data:image/svg+xml;charset=utf-8,' +
+        encodeURIComponent(updatedSvgData);
+
+      const img = new Image();
+      img.onload = function () {
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(img, 0, 0, width, height);
+
+        const pngURL = canvas.toDataURL('image/png');
+        resolve(pngURL);
+      };
+
+      img.onerror = function (error) {
+        reject(new Error('Image load failed: ' + error));
+      };
+
+      img.src = svgURL;
+    } catch (error) {
+      reject(error);
+    }
+  });
+}

package/src/exporter/svg.ts

@@ -0,0 +1,94 @@
+import { createElement, getViewBox, setAttributes, traverse } from '../utils';
+import { embedFonts } from './font';
+import type { SVGExportOptions } from './types';
+
+export async function exportToSVGString(
+  svg: SVGSVGElement,
+  options: Omit<SVGExportOptions, 'type'> = {},
+) {
+  const node = await exportToSVG(svg, options);
+  const str = new XMLSerializer().serializeToString(node);
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
+}
+
+export async function exportToSVG(
+  svg: SVGSVGElement,
+  options: Omit<SVGExportOptions, 'type'> = {},
+) {
+  const { embedResources = true } = options;
+  const clonedSVG = svg.cloneNode(true) as SVGSVGElement;
+  const { width, height } = getViewBox(svg);
+  setAttributes(clonedSVG, { width, height });
+
+  await embedIcons(clonedSVG);
+  await embedFonts(clonedSVG, embedResources);
+
+  cleanSVG(clonedSVG);
+
+  return clonedSVG;
+}
+
+async function embedIcons(svg: SVGSVGElement) {
+  const icons = svg.querySelectorAll('use');
+  const defs = getDefs(svg);
+
+  icons.forEach((icon) => {
+    const href = icon.getAttribute('href');
+    if (!href) return;
+    const existsSymbol = svg.querySelector(href);
+
+    if (!existsSymbol) {
+      const symbolElement = document.querySelector(href);
+      if (symbolElement) defs.appendChild(symbolElement.cloneNode(true));
+    }
+  });
+}
+
+function getDefs(svg: SVGSVGElement) {
+  const defs = svg.querySelector('defs[id="icon-defs"]');
+  if (defs) return defs;
+  const _defs = createElement('defs', { id: 'icon-defs' });
+  svg.prepend(_defs);
+  return _defs;
+}
+
+function cleanSVG(svg: SVGSVGElement) {
+  removeBtnGroup(svg);
+  removeTransientContainer(svg);
+  removeUselessAttrs(svg);
+
+  clearDataset(svg);
+}
+
+function removeBtnGroup(svg: SVGSVGElement) {
+  const btnGroup = svg.querySelector('[data-element-type=btns-group]');
+  btnGroup?.remove();
+
+  const btnIconDefs = svg.querySelector('#btn-icon-defs');
+  btnIconDefs?.remove();
+}
+
+function removeTransientContainer(svg: SVGSVGElement) {
+  const transientContainer = svg.querySelector(
+    '[data-element-type=transient-container]',
+  );
+  transientContainer?.remove();
+}
+
+function removeUselessAttrs(svg: SVGSVGElement) {
+  const groups = svg.querySelectorAll('g');
+  groups.forEach((group) => {
+    group.removeAttribute('x');
+    group.removeAttribute('y');
+    group.removeAttribute('width');
+    group.removeAttribute('height');
+  });
+}
+
+function clearDataset(svg: SVGSVGElement) {
+  traverse(svg, (node) => {
+    for (const key in node.dataset) {
+      delete node.dataset[key];
+    }
+  });
+}

package/src/exporter/types.ts

@@ -0,0 +1,19 @@
+export interface SVGExportOptions {
+  type: 'svg';
+  /**
+   * 是否将远程资源嵌入到 SVG 中
+   * @default true
+   */
+  embedResources?: boolean;
+}
+
+export interface PNGExportOptions {
+  type: 'png';
+  /**
+   * 设备像素比，默认为浏览器的 devicePixelRatio
+   * @default globalThis.devicePixelRatio || 2
+   */
+  dpr?: number;
+}
+
+export type ExportOptions = SVGExportOptions | PNGExportOptions;

package/src/index.ts

@@ -61,8 +61,6 @@ export type {
 } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';
 export type {
-  Font,
-  FontWeightName,
   GradientConfig,
   IRenderer,
   LinearGradient,
@@ -79,4 +77,10 @@ export type {
 } from './renderer';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
-export type { Data, ImageResource, ItemDatum } from './types';
+export type {
+  Data,
+  Font,
+  FontWeightName,
+  ImageResource,
+  ItemDatum,
+} from './types';

package/src/renderer/composites/text.ts

@@ -4,12 +4,12 @@ import type { DynamicAttributes } from '../../themes';
 import type { TextAttributes } from '../../types';
 import {
   createTextElement,
+  encodeFontFamily,
   getAttributes,
   getDatumByIndexes,
   getItemIndexes,
   setAttributes,
 } from '../../utils';
-import { encodeFontFamily } from '../fonts';
 import { parseDynamicAttributes } from '../utils';
 
 export function renderText(
@@ -34,7 +34,6 @@ export function renderText(
     );
   }
 
-  renderedText.setAttribute('id', node.getAttribute('id')!);
   return renderedText;
 }
 

package/src/renderer/fonts/built-in.ts

@@ -1,4 +1,4 @@
-import { Font } from './types';
+import type { Font } from '../../types';
 
 const BASE_FONT_URL = 'https://assets.antv.antgroup.com';
 

package/src/renderer/fonts/index.ts

@@ -1,4 +1,4 @@
-export { getFontURLs, getWoff2BaseURL, loadFont,loadFonts } from './loader';
+export { getFontURLs, getWoff2BaseURL, loadFont, loadFonts } from './loader';
 export {
   DEFAULT_FONT,
   getFont,
@@ -6,8 +6,6 @@ export {
   registerFont,
   setDefaultFont,
 } from './registry';
-export type * from './types';
-export { decodeFontFamily, encodeFontFamily } from './utils';
 
 import { BUILT_IN_FONTS } from './built-in';
 import { registerFont } from './registry';

package/src/renderer/fonts/loader.ts

@@ -1,6 +1,5 @@
-import { join } from '../../utils';
+import { join, normalizeFontWeightName } from '../../utils';
 import { getFont, getFonts } from './registry';
-import { normalizeFontWeightName } from './utils';
 
 export function getFontURLs(font: string): string[] {
   const config = getFont(font);

package/src/renderer/fonts/registry.ts

@@ -1,5 +1,5 @@
-import type { Font } from './types';
-import { decodeFontFamily, encodeFontFamily } from './utils';
+import type { Font } from '../../types';
+import { decodeFontFamily, encodeFontFamily } from '../../utils';
 
 const FONT_REGISTRY: Map<string, Font> = new Map();
 

package/src/renderer/renderer.ts

@@ -1,9 +1,7 @@
 import type { ParsedInfographicOptions } from '../options';
-import type { ParsedPadding } from '../types';
 import {
   getDatumByIndexes,
   getItemIndexes,
-  getSizeBaseVal,
   isBtnsGroup,
   isDesc,
   isGroup,
@@ -19,6 +17,7 @@ import {
   isTitle,
   parsePadding,
   setAttributes,
+  setSVGPadding,
 } from '../utils';
 import {
   renderBackground,
@@ -213,70 +212,3 @@ function setView(svg: SVGSVGElement, options: ParsedInfographicOptions) {
     setSVGPadding(svg, parsePadding(padding));
   }
 }
-
-interface SVGPaddingOptions {
-  /** 是否保持宽高比 (默认: true) */
-  preserveAspectRatio?: boolean;
-}
-
-function setSVGPadding(
-  svg: SVGSVGElement,
-  padding: ParsedPadding,
-  options: SVGPaddingOptions = {},
-): boolean {
-  const { preserveAspectRatio = false } = options;
-
-  if (!svg.isConnected) return false;
-
-  try {
-    const bbox = svg.getBBox();
-
-    // 检查包围盒是否有效
-    if (bbox.width === 0 || bbox.height === 0) {
-      return false;
-    }
-    const [widthBaseVal, heightBaseVal] = getSizeBaseVal(svg);
-    const svgWidth = widthBaseVal || svg.clientWidth || 0;
-    const svgHeight = heightBaseVal || svg.clientHeight || 0;
-
-    const parentElement = svg.parentElement;
-    const effectiveWidth =
-      svgWidth || (parentElement ? parentElement.clientWidth : 300);
-    const effectiveHeight =
-      svgHeight || (parentElement ? parentElement.clientHeight : 150);
-
-    let viewBoxPadding: number[];
-
-    if (effectiveWidth > 0 && effectiveHeight > 0) {
-      const scaleX = bbox.width / effectiveWidth;
-      const scaleY = bbox.height / effectiveHeight;
-
-      if (preserveAspectRatio) {
-        const scale = Math.max(scaleX, scaleY);
-        viewBoxPadding = padding.map((p) => p * scale);
-      } else {
-        viewBoxPadding = [
-          padding[0] * scaleY,
-          padding[1] * scaleX,
-          padding[2] * scaleY,
-          padding[3] * scaleX,
-        ];
-      }
-    } else {
-      viewBoxPadding = [...padding];
-    }
-
-    const newViewBox = [
-      bbox.x - viewBoxPadding[3],
-      bbox.y - viewBoxPadding[0],
-      bbox.width + viewBoxPadding[1] + viewBoxPadding[3],
-      bbox.height + viewBoxPadding[0] + viewBoxPadding[2],
-    ].join(' ');
-
-    svg.setAttribute('viewBox', newViewBox);
-
-    return true;
-  } catch {
-    return false;
-  }
-}

package/src/resource/utils/ref.ts

@@ -5,7 +5,7 @@ import { getSimpleHash } from './hash';
 export function getResourceId(config: string | ResourceConfig): string | null {
   const cfg = typeof config === 'string' ? parseDataURI(config) : config;
   if (!cfg) return null;
-  return getSimpleHash(JSON.stringify(cfg));
+  return 'rsc-' + getSimpleHash(JSON.stringify(cfg));
 }
 
 export function getResourceHref(config: string | ResourceConfig) {