@antv/infographic 0.2.4 → 0.2.6

package/lib/utils/is-browser.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowser = isBrowser;
+let _isBrowser;
+function isBrowser() {
+    if (_isBrowser !== undefined) {
+        return _isBrowser;
+    }
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        _isBrowser = false;
+        return false;
+    }
+    const body = document.body;
+    if (!body) {
+        _isBrowser = false;
+        return false;
+    }
+    let hasRealLayout = false;
+    try {
+        const el = document.createElement('div');
+        el.style.cssText = `
+      position: absolute;
+      left: 11px;
+      top: 13px;
+      width: 37px;
+      height: 19px;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      visibility: hidden;
+    `;
+        body.appendChild(el);
+        void el.offsetHeight;
+        const rect = el.getBoundingClientRect();
+        body.removeChild(el);
+        hasRealLayout =
+            rect.width === 37 &&
+                rect.height === 19 &&
+                rect.left !== 0 &&
+                rect.top !== 0;
+    }
+    catch {
+        hasRealLayout = false;
+    }
+    if (!hasRealLayout) {
+        _isBrowser = false;
+        return false;
+    }
+    let hasRealCanvas = false;
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = 100;
+        canvas.height = 50;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            _isBrowser = false;
+            return false;
+        }
+        ctx.font = '20px sans-serif';
+        const metrics = ctx.measureText('Hello');
+        hasRealCanvas =
+            typeof metrics.width === 'number' &&
+                metrics.width > 0 &&
+                metrics.width < 1000;
+    }
+    catch {
+        hasRealCanvas = false;
+    }
+    _isBrowser = hasRealCanvas;
+    return hasRealCanvas;
+}

package/lib/utils/measure-text.d.ts

@@ -1,4 +1,5 @@
 import { TextProps } from '../jsx';
+export declare const setFontExtendFactor: (factor: number) => void;
 export declare function measureText(text: string | number | undefined, attrs: TextProps): {
     width: number;
     height: number;

package/lib/utils/measure-text.js

@@ -3,21 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFontExtendFactor = void 0;
 exports.measureText = measureText;
 const measury_1 = require("measury");
 const AlibabaPuHuiTi_Regular_1 = __importDefault(require("measury/fonts/AlibabaPuHuiTi-Regular"));
 const renderer_1 = require("../renderer");
 const font_1 = require("./font");
+const is_browser_1 = require("./is-browser");
 const is_node_1 = require("./is-node");
+let FONT_EXTEND_FACTOR = 1.01;
+const setFontExtendFactor = (factor) => {
+    FONT_EXTEND_FACTOR = factor;
+};
+exports.setFontExtendFactor = setFontExtendFactor;
 if (is_node_1.isNode) {
     (0, measury_1.registerFont)(AlibabaPuHuiTi_Regular_1.default);
 }
-const canUseDOM = !is_node_1.isNode && typeof window !== 'undefined' && typeof document !== 'undefined';
 let canvasContext = null;
 let measureSpan = null;
 function getCanvasContext() {
-    if (!canUseDOM)
-        return null;
     if (canvasContext)
         return canvasContext;
     const canvas = document.createElement('canvas');
@@ -25,7 +29,7 @@ function getCanvasContext() {
     return canvasContext;
 }
 function getMeasureSpan() {
-    if (!canUseDOM || !document.body)
+    if (!document.body)
         return null;
     if (measureSpan)
         return measureSpan;
@@ -97,12 +101,12 @@ function measureText(text = '', attrs) {
         lineHeight,
     };
     const fallback = () => (0, measury_1.measureText)(content, options);
-    const metrics = canUseDOM
+    const metrics = (0, is_browser_1.isBrowser)()
         ? (measureTextInBrowser(content, options) ?? fallback())
         : fallback();
     // 额外添加 1% 宽高
     return {
-        width: Math.ceil(metrics.width * 1.01),
-        height: Math.ceil(metrics.height * 1.01),
+        width: Math.ceil(metrics.width * FONT_EXTEND_FACTOR),
+        height: Math.ceil(metrics.height * FONT_EXTEND_FACTOR),
     };
 }

package/package.json

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

package/src/exporter/index.ts

@@ -1,5 +1,5 @@
 export { exportToPNGString } from './png';
-export { exportToSVGString } from './svg';
+export { exportToSVG, exportToSVGString } from './svg';
 export type {
   ExportOptions,
   PNGExportOptions,

package/src/exporter/svg.ts

@@ -23,12 +23,17 @@ export async function exportToSVG(
   svg: SVGSVGElement,
   options: Omit<SVGExportOptions, 'type'> = {},
 ) {
-  const { embedResources = true } = options;
+  const { embedResources = true, removeIds = false } = options;
   const clonedSVG = svg.cloneNode(true) as SVGSVGElement;
   const { width, height } = getViewBox(svg);
   setAttributes(clonedSVG, { width, height });
 
-  await embedIcons(clonedSVG);
+  if (removeIds) {
+    inlineUseElements(clonedSVG);
+    inlineDefsReferences(clonedSVG);
+  } else {
+    await embedIcons(clonedSVG);
+  }
   await embedFonts(clonedSVG, embedResources);
 
   cleanSVG(clonedSVG);
@@ -62,6 +67,253 @@ function getDefs(svg: SVGSVGElement) {
   return _defs;
 }
 
+function inlineUseElements(svg: SVGSVGElement) {
+  const uses = Array.from(svg.querySelectorAll<SVGUseElement>('use'));
+  if (!uses.length) return;
+
+  uses.forEach((use) => {
+    const href = getUseHref(use);
+    if (!href || !href.startsWith('#')) return;
+    const target = resolveUseTarget(svg, href);
+    if (!target || target === use) return;
+
+    const replacement = createInlineElement(use, target);
+    if (!replacement) return;
+    use.replaceWith(replacement);
+  });
+}
+
+function getUseHref(use: SVGUseElement) {
+  return use.getAttribute('href') ?? use.getAttribute('xlink:href');
+}
+
+function resolveUseTarget(svg: SVGSVGElement, href: string) {
+  const localTarget = svg.querySelector(href);
+  if (localTarget) return localTarget as SVGElement;
+  const docTarget = document.querySelector(href);
+  return docTarget as SVGElement | null;
+}
+
+function createInlineElement(use: SVGUseElement, target: SVGElement) {
+  const tag = target.tagName.toLowerCase();
+  if (tag === 'symbol') {
+    return materializeSymbol(use, target as SVGSymbolElement);
+  }
+  if (tag === 'svg') {
+    return materializeSVG(use, target as SVGSVGElement);
+  }
+  return materializeElement(use, target);
+}
+
+function materializeSymbol(use: SVGUseElement, symbol: SVGSymbolElement) {
+  const symbolClone = symbol.cloneNode(true) as SVGSymbolElement;
+  const svg = createElement<SVGSVGElement>('svg');
+
+  applyAttributes(svg, symbolClone, new Set(['id']));
+  applyAttributes(svg, use, new Set(['href', 'xlink:href']));
+
+  while (symbolClone.firstChild) {
+    svg.appendChild(symbolClone.firstChild);
+  }
+
+  return svg;
+}
+
+function materializeSVG(use: SVGUseElement, source: SVGSVGElement) {
+  const clone = source.cloneNode(true) as SVGSVGElement;
+  clone.removeAttribute('id');
+  applyAttributes(clone, use, new Set(['href', 'xlink:href']));
+  return clone;
+}
+
+function materializeElement(use: SVGUseElement, source: SVGElement) {
+  const clone = source.cloneNode(true) as SVGElement;
+  clone.removeAttribute('id');
+
+  const wrapper = createElement<SVGGElement>('g');
+  applyAttributes(
+    wrapper,
+    use,
+    new Set(['href', 'xlink:href', 'x', 'y', 'width', 'height', 'transform']),
+  );
+
+  const transform = buildUseTransform(use);
+  if (transform) {
+    wrapper.setAttribute('transform', transform);
+  }
+
+  wrapper.appendChild(clone);
+  return wrapper;
+}
+
+function buildUseTransform(use: SVGUseElement) {
+  const x = use.getAttribute('x');
+  const y = use.getAttribute('y');
+  const translate = x || y ? `translate(${x ?? 0} ${y ?? 0})` : '';
+  const transform = use.getAttribute('transform') ?? '';
+  if (translate && transform) return `${translate} ${transform}`;
+  return translate || transform || null;
+}
+
+function applyAttributes(
+  target: SVGElement,
+  source: SVGElement,
+  exclude: Set<string> = new Set(),
+) {
+  Array.from(source.attributes).forEach((attr) => {
+    if (exclude.has(attr.name)) return;
+    if (attr.name === 'style') {
+      mergeStyleAttribute(target, attr.value);
+      return;
+    }
+    if (attr.name === 'class') {
+      mergeClassAttribute(target, attr.value);
+      return;
+    }
+    target.setAttribute(attr.name, attr.value);
+  });
+}
+
+function mergeStyleAttribute(target: SVGElement, value: string) {
+  const current = target.getAttribute('style');
+  if (!current) {
+    target.setAttribute('style', value);
+    return;
+  }
+  const separator = current.trim().endsWith(';') ? '' : ';';
+  target.setAttribute('style', `${current}${separator}${value}`);
+}
+
+function mergeClassAttribute(target: SVGElement, value: string) {
+  const current = target.getAttribute('class');
+  if (!current) {
+    target.setAttribute('class', value);
+    return;
+  }
+  target.setAttribute('class', `${current} ${value}`.trim());
+}
+
+const urlRefRegex = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/g;
+function inlineDefsReferences(svg: SVGSVGElement) {
+  const referencedIds = collectReferencedIds(svg);
+  if (referencedIds.size === 0) {
+    removeDefs(svg);
+    return;
+  }
+
+  const defsDataUrl = createDefsDataUrl(svg, referencedIds);
+  if (!defsDataUrl) return;
+
+  traverse(svg, (node) => {
+    if (node.tagName.toLowerCase() === 'defs') return false;
+    const attrs = Array.from(node.attributes);
+    attrs.forEach((attr) => {
+      const value = attr.value;
+      if (!value.includes('url(')) return;
+      const updated = value.replace(urlRefRegex, (_match, id) => {
+        const encodedId = encodeURIComponent(id);
+        return `url("${defsDataUrl}#${encodedId}")`;
+      });
+      if (updated !== value) node.setAttribute(attr.name, updated);
+    });
+  });
+
+  removeDefs(svg);
+}
+
+function collectReferencedIds(svg: SVGSVGElement) {
+  const ids = new Set<string>();
+  traverse(svg, (node) => {
+    if (node.tagName.toLowerCase() === 'defs') return false;
+    collectIdsFromAttributes(node, (id) => ids.add(id));
+  });
+  return ids;
+}
+
+function collectIdsFromAttributes(
+  node: SVGElement,
+  addId: (id: string) => void,
+) {
+  for (const attr of Array.from(node.attributes)) {
+    const value = attr.value;
+    if (value.includes('url(')) {
+      for (const match of value.matchAll(urlRefRegex)) {
+        if (match[1]) addId(match[1]);
+      }
+    }
+    if (
+      (attr.name === 'href' || attr.name === 'xlink:href') &&
+      value[0] === '#'
+    ) {
+      addId(value.slice(1));
+    }
+  }
+}
+
+function createDefsDataUrl(svg: SVGSVGElement, ids: Set<string>) {
+  if (ids.size === 0) return null;
+
+  const collected = collectDefElements(svg, ids);
+  if (collected.size === 0) return null;
+
+  const defsSvg = createElement<SVGSVGElement>('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+  });
+  const defs = createElement<SVGDefsElement>('defs');
+
+  collected.forEach((node) => {
+    defs.appendChild(node.cloneNode(true));
+  });
+
+  if (!defs.children.length) return null;
+  defsSvg.appendChild(defs);
+
+  const serialized = new XMLSerializer().serializeToString(defsSvg);
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized);
+}
+
+function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
+  const collected = new Map<string, SVGElement>();
+  const queue = Array.from(ids);
+  const queued = new Set(queue);
+  const visited = new Set<string>();
+  const enqueue = (id: string) => {
+    if (visited.has(id) || queued.has(id)) return;
+    queue.push(id);
+    queued.add(id);
+  };
+
+  while (queue.length) {
+    const id = queue.shift()!;
+    if (visited.has(id)) continue;
+    visited.add(id);
+
+    const selector = `#${escapeCssId(id)}`;
+    const target = svg.querySelector(selector);
+    if (!target) continue;
+    collected.set(id, target as SVGElement);
+
+    traverse(target as SVGElement, (node) => {
+      collectIdsFromAttributes(node, enqueue);
+    });
+  }
+
+  return collected;
+}
+
+function escapeCssId(id: string) {
+  if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
+    return globalThis.CSS.escape(id);
+  }
+  return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+}
+
+function removeDefs(svg: SVGSVGElement) {
+  const defsList = Array.from(svg.querySelectorAll('defs'));
+  defsList.forEach((defs) => defs.remove());
+}
+
 function cleanSVG(svg: SVGSVGElement) {
   removeBtnGroup(svg);
   removeTransientContainer(svg);

package/src/exporter/types.ts

@@ -5,6 +5,11 @@ export interface SVGExportOptions {
    * @default true
    */
   embedResources?: boolean;
+  /**
+   * 是否移除 id 依赖（展开 <use> 并内联 defs 引用）
+   * @default false
+   */
+  removeIds?: boolean;
 }
 
 export interface PNGExportOptions {

package/src/index.ts

@@ -14,6 +14,7 @@ export {
   ZoomWheel,
 } from './editor/interactions';
 export { EditBar, Plugin, ResizeElement } from './editor/plugins';
+export { exportToSVG } from './exporter';
 export {
   Defs,
   Ellipse,
@@ -38,9 +39,8 @@ export {
   getFont,
   getFonts,
   getPalette,
-  getPalettes,
   getPaletteColor,
-
+  getPalettes,
   registerFont,
   registerPalette,
   registerPattern,
@@ -51,9 +51,14 @@ export { Infographic } from './runtime';
 export { parseSyntax } from './syntax';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
-export { parseSVG } from './utils';
+export { parseSVG, setFontExtendFactor } from './utils';
 
 export type { EditBarOptions } from './editor';
+export type {
+  ExportOptions,
+  PNGExportOptions,
+  SVGExportOptions,
+} from './exporter';
 export type {
   Bounds,
   ComponentType,

package/src/renderer/fonts/loader.ts

@@ -1,3 +1,7 @@
+import {
+  getSvgLoadPromise,
+  trackSvgLoadPromise,
+} from '../../resource/load-tracker';
 import { join, normalizeFontWeightName, splitFontFamily } from '../../utils';
 import { getFont, getFonts } from './registry';
 
@@ -36,6 +40,66 @@ const FONT_LOAD_MAP = new WeakMap<
   HTMLHeadElement,
   Map<string, HTMLLinkElement>
 >();
+const FONT_PROMISE_MAP = new WeakMap<
+  HTMLHeadElement,
+  Map<string, Promise<void>>
+>();
+
+function trackFontPromise(
+  target: HTMLHeadElement,
+  id: string,
+  promise: Promise<void>,
+): Promise<void> {
+  let map = FONT_PROMISE_MAP.get(target);
+  if (!map) {
+    map = new Map();
+    FONT_PROMISE_MAP.set(target, map);
+  }
+
+  map.set(id, promise);
+
+  promise.finally(() => {
+    const map = FONT_PROMISE_MAP.get(target);
+    if (!map) return;
+    if (map.get(id) === promise) map.delete(id);
+    if (map.size === 0) FONT_PROMISE_MAP.delete(target);
+  });
+
+  return promise;
+}
+
+function isLinkLoaded(link: HTMLLinkElement): boolean {
+  if (link.dataset.infographicFontLoaded === 'true') return true;
+  try {
+    return !!link.sheet;
+  } catch {
+    return false;
+  }
+}
+
+function getFontLoadPromise(
+  target: HTMLHeadElement,
+  id: string,
+  link?: HTMLLinkElement,
+): Promise<void> {
+  const existing = FONT_PROMISE_MAP.get(target)?.get(id);
+  if (existing) return existing;
+
+  if (!link || isLinkLoaded(link)) {
+    return trackFontPromise(target, id, Promise.resolve());
+  }
+
+  const promise = new Promise<void>((resolve) => {
+    const done = () => {
+      link.dataset.infographicFontLoaded = 'true';
+      resolve();
+    };
+    link.addEventListener('load', done, { once: true });
+    link.addEventListener('error', done, { once: true });
+  });
+
+  return trackFontPromise(target, id, promise);
+}
 
 export function loadFont(svg: SVGSVGElement, font: string) {
   const doc = svg.ownerDocument;
@@ -45,18 +109,27 @@ export function loadFont(svg: SVGSVGElement, font: string) {
   if (!FONT_LOAD_MAP.has(target)) FONT_LOAD_MAP.set(target, new Map());
   const map = FONT_LOAD_MAP.get(target)!;
 
-  const links: HTMLLinkElement[] = [];
   const urls = getFontURLs(font);
+  if (!urls.length) return;
+
+  const links: HTMLLinkElement[] = [];
   urls.forEach((url) => {
     const id = `${font}-${url}`;
-    if (map.has(id)) return;
-
-    const link = doc.createElement('link');
-    link.id = id;
-    link.rel = 'stylesheet';
-    link.href = url;
-    links.push(link);
-    map.set(id, link);
+    const promiseKey = `font:${id}`;
+    if (getSvgLoadPromise<void>(svg, promiseKey)) return;
+
+    let link = map.get(id);
+    if (!link) {
+      link = doc.createElement('link');
+      link.id = id;
+      link.rel = 'stylesheet';
+      link.href = url;
+      links.push(link);
+      map.set(id, link);
+    }
+
+    const promise = getFontLoadPromise(target, id, link);
+    trackSvgLoadPromise(svg, promiseKey, promise);
   });
 
   if (!links.length) return;

package/src/renderer/stylize/gradient.ts

@@ -30,7 +30,7 @@ export function applyGradientStyle(
     }
   });
 
-  const id = getGradientId(config);
+  const id = getGradientId(actualConfig);
 
   if (type === 'linear-gradient') {
     const { angle = 0 } = actualConfig;

package/src/resource/index.ts

@@ -1,4 +1,4 @@
-export { loadResource } from './loader';
+export { getSvgLoadPromises, loadResource, waitForSvgLoads } from './loader';
 export * from './loaders';
 export { registerResourceLoader } from './registry';
 export type * from './types';

package/src/resource/load-tracker.ts

@@ -0,0 +1,51 @@
+type SvgLoadPromise = Promise<unknown>;
+
+const SVG_LOAD_PROMISE_MAP = new WeakMap<
+  SVGSVGElement,
+  Map<string, SvgLoadPromise>
+>();
+
+export function getSvgLoadPromises(svg: SVGSVGElement): SvgLoadPromise[] {
+  const map = SVG_LOAD_PROMISE_MAP.get(svg);
+  return map ? Array.from(map.values()) : [];
+}
+
+export function getSvgLoadPromise<T = unknown>(
+  svg: SVGSVGElement,
+  key: string,
+): Promise<T> | undefined {
+  return SVG_LOAD_PROMISE_MAP.get(svg)?.get(key) as Promise<T> | undefined;
+}
+
+export function trackSvgLoadPromise<T>(
+  svg: SVGSVGElement,
+  key: string,
+  promise: Promise<T>,
+): Promise<T> {
+  let map = SVG_LOAD_PROMISE_MAP.get(svg);
+  if (!map) {
+    map = new Map();
+    SVG_LOAD_PROMISE_MAP.set(svg, map);
+  }
+
+  map.set(key, promise as SvgLoadPromise);
+
+  promise.finally(() => {
+    const map = SVG_LOAD_PROMISE_MAP.get(svg);
+    if (!map) return;
+    if (map.get(key) === promise) map.delete(key);
+    if (map.size === 0) SVG_LOAD_PROMISE_MAP.delete(svg);
+  });
+
+  return promise;
+}
+
+export async function waitForSvgLoads(svg: SVGSVGElement): Promise<void> {
+  await Promise.resolve();
+  while (true) {
+    const promises = getSvgLoadPromises(svg);
+    if (!promises.length) break;
+    await Promise.allSettled(promises);
+    await Promise.resolve();
+  }
+}