@antv/infographic 0.0.1-beta.1

package/src/renderer/stylize/patterns/dot.ts

@@ -0,0 +1,37 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+
+export const dot: PatternGenerator = ({
+  scale = 1,
+  backgroundColor,
+  foregroundColor,
+}) => {
+  const pattern = createElement('pattern', {
+    id: 'pattern-dot',
+    width: '20',
+    height: '20',
+    patternTransform: `scale(${scale})`,
+    patternUnits: 'userSpaceOnUse',
+  });
+  const rect = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  const circle1 = createElement('circle', {
+    cx: '5',
+    cy: '5',
+    r: '3',
+    fill: foregroundColor,
+  });
+  const circle2 = createElement('circle', {
+    cx: '15',
+    cy: '15',
+    r: '3',
+    fill: foregroundColor,
+  });
+  pattern.appendChild(rect);
+  pattern.appendChild(circle1);
+  pattern.appendChild(circle2);
+  return pattern;
+};

package/src/renderer/stylize/patterns/hex.ts

@@ -0,0 +1,29 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+
+export const hex: PatternGenerator = ({
+  scale = 0.3,
+  backgroundColor,
+  foregroundColor,
+}) => {
+  const pattern = createElement('pattern', {
+    id: 'pattern-hex',
+    width: '20',
+    height: '20',
+    patternTransform: `scale(${scale})`,
+    patternUnits: 'userSpaceOnUse',
+  });
+
+  const rect = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  const path = createElement('path', {
+    d: 'M10,0 L20,5 L20,15 L10,20 L0,15 L0,5 Z',
+    fill: foregroundColor,
+  });
+  pattern.appendChild(rect);
+  pattern.appendChild(path);
+  return pattern;
+};

package/src/renderer/stylize/patterns/index.ts

@@ -0,0 +1,6 @@
+export { diamond } from './diamond';
+export { dot } from './dot';
+export { hex } from './hex';
+export { line } from './line';
+export { mosaic } from './mosaic';
+export { square } from './square';

package/src/renderer/stylize/patterns/line.ts

@@ -0,0 +1,46 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+export const line: PatternGenerator = ({
+  scale = 1,
+  backgroundColor,
+  foregroundColor,
+}) => {
+  const strokeWidth = 6;
+  const hSW = strokeWidth / 2;
+
+  const pattern = createElement('pattern', {
+    id: 'pattern-line',
+    width: '20',
+    height: '20',
+    patternTransform: `scale(${scale})`,
+    patternUnits: 'userSpaceOnUse',
+  });
+
+  const rect = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  const line1 = createElement('line', {
+    x1: `${10 - hSW}`,
+    y1: `${0 - hSW}`,
+    x2: `${20 + hSW}`,
+    y2: `${10 + hSW}`,
+    stroke: foregroundColor,
+    'stroke-width': strokeWidth,
+    'stroke-opacity': '0.5',
+  });
+  const line2 = createElement('line', {
+    x1: `${0 - hSW}`,
+    y1: `${10 - hSW}`,
+    x2: `${10 + hSW}`,
+    y2: `${20 + hSW}`,
+    stroke: foregroundColor,
+    'stroke-width': strokeWidth,
+    'stroke-opacity': '0.5',
+  });
+  pattern.appendChild(rect);
+  pattern.appendChild(line1);
+  pattern.appendChild(line2);
+  return pattern;
+};

package/src/renderer/stylize/patterns/mosaic.ts

@@ -0,0 +1,45 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+export const mosaic: PatternGenerator = ({
+  scale = 1,
+  backgroundColor = '#ffffff',
+  foregroundColor = '#000000',
+}) => {
+  const patternSize = 20;
+  const tileSize = 5;
+  const rows = patternSize / tileSize;
+  const cols = patternSize / tileSize;
+
+  const pattern = createElement('pattern', {
+    id: 'pattern-mosaic',
+    width: patternSize,
+    height: patternSize,
+    patternUnits: 'userSpaceOnUse',
+    patternTransform: `scale(${scale})`,
+  });
+
+  // 背景填充
+  const background = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  pattern.appendChild(background);
+
+  for (let y = 0; y < rows; y++) {
+    for (let x = 0; x < cols; x++) {
+      if ((x + y) % 2 === 0) {
+        const rect = createElement('rect', {
+          x: x * tileSize,
+          y: y * tileSize,
+          width: tileSize,
+          height: tileSize,
+          fill: foregroundColor,
+        });
+        pattern.appendChild(rect);
+      }
+    }
+  }
+
+  return pattern;
+};

package/src/renderer/stylize/patterns/square.ts

@@ -0,0 +1,29 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+
+export const square: PatternGenerator = ({
+  scale = 0.3,
+  backgroundColor,
+  foregroundColor,
+}) => {
+  const pattern = createElement('pattern', {
+    id: 'pattern-square',
+    width: '20',
+    height: '20',
+    patternTransform: `scale(${scale})`,
+    patternUnits: 'userSpaceOnUse',
+  });
+
+  const rect = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  const path = createElement('path', {
+    d: 'M0,0 L20,0 L20,20 L0,20 Z',
+    fill: foregroundColor,
+  });
+  pattern.appendChild(rect);
+  pattern.appendChild(path);
+  return pattern;
+};

package/src/renderer/stylize/rough.ts

@@ -0,0 +1,149 @@
+import rough from 'roughjs';
+import { createElement, getAttributes, setAttributes } from '../../utils';
+import type { RoughConfig } from '../types';
+
+export function applyRoughStyle(
+  node: SVGElement,
+  svg: SVGSVGElement,
+  config: RoughConfig,
+) {
+  if (!node || !svg) {
+    console.warn('Invalid node or svg element');
+    return;
+  }
+
+  const rc = rough.svg(svg, {
+    options: {
+      seed: 1000,
+    },
+  });
+
+  const g = createElement('g');
+  const volume = node.cloneNode() as SVGElement;
+  setAttributes(volume, {
+    fill: '#fff',
+    stroke: 'transparent',
+  });
+  volume.classList.add('rough-volume');
+  g.appendChild(volume);
+
+  const element = createRoughShape(rc, node, config);
+  if (element) {
+    element.classList.add('rough-element');
+    element.style.pointerEvents = 'none';
+    g.appendChild(element);
+  }
+
+  if (node.id) {
+    g.id = node.id;
+    volume.setAttribute('id', `${node.id}-volume`);
+    if (element) element.setAttribute('id', `${node.id}-rough`);
+  }
+
+  if (g.childElementCount > 0) node.replaceWith(g);
+  else node.remove();
+}
+
+function createRoughShape(
+  rc: ReturnType<typeof rough.svg>,
+  node: SVGElement,
+  config: RoughConfig,
+) {
+  const shapeType = node.nodeName;
+
+  const getAttrs = (node: SVGElement, attrs: string[]): Record<string, any> => {
+    const {
+      fill,
+      stroke = fill || 'currentColor',
+      ...restAttrs
+    } = getAttributes(
+      node,
+      [
+        ...attrs,
+        'fill',
+        'fill-opacity',
+        'stroke',
+        'stroke-opacity',
+        'stroke-width',
+        'opacity',
+      ],
+      true,
+    );
+
+    return { fill, stroke, ...restAttrs, ...config };
+  };
+
+  if (shapeType === 'circle') {
+    const {
+      cx = '0',
+      cy = '0',
+      r = '0',
+      ...attrs
+    } = getAttrs(node, ['cx', 'cy', 'r']);
+    return rc.circle(+cx, +cy, +r * 2, attrs);
+  } else if (shapeType === 'ellipse') {
+    const {
+      cx = '0',
+      cy = '0',
+      rx = '0',
+      ry = '0',
+      ...attrs
+    } = getAttrs(node, ['cx', 'cy', 'rx', 'ry']);
+    return rc.ellipse(+cx, +cy, +rx * 2, +ry * 2, attrs);
+  } else if (shapeType === 'line') {
+    const {
+      x1 = '0',
+      y1 = '0',
+      x2 = '0',
+      y2 = '0',
+      ...attrs
+    } = getAttrs(node, ['x1', 'y1', 'x2', 'y2']);
+    return rc.line(+x1, +y1, +x2, +y2, attrs);
+  } else if (shapeType === 'rect') {
+    const {
+      x = '0',
+      y = '0',
+      width = '0',
+      height = '0',
+      ...attrs
+    } = getAttrs(node, ['x', 'y', 'width', 'height']);
+    return rc.rectangle(+x, +y, +width, +height, attrs);
+  } else if (shapeType === 'path') {
+    const { d = '', ...attrs } = getAttrs(node, ['d']);
+    return rc.path(d, attrs);
+  } else if (shapeType === 'polygon') {
+    const { points, ...attrs } = getAttrs(node, ['points']);
+    return rc.polygon(parsePolygonPoints(points), attrs);
+  } else if (shapeType === 'polyline') {
+    const { points, ...attrs } = getAttrs(node, ['points']);
+    const parsedPoints = parsePolygonPoints(points);
+    if (parsedPoints.length > 1) {
+      return rc.linearPath(parsedPoints, attrs);
+    }
+  }
+}
+
+function parsePolygonPoints(points: string): [number, number][] {
+  if (!points) return [];
+
+  try {
+    return points
+      .trim()
+      .replace(/,/g, ' ') // 处理逗号分隔的坐标
+      .split(/\s+/) // 按空白字符分割
+      .filter(Boolean) // 过滤空字符串
+      .reduce((acc: [number, number][], curr, index, arr) => {
+        if (index % 2 === 0 && index + 1 < arr.length) {
+          const x = parseFloat(curr);
+          const y = parseFloat(arr[index + 1]);
+          if (!isNaN(x) && !isNaN(y)) {
+            acc.push([x, y]);
+          }
+        }
+        return acc;
+      }, []);
+  } catch {
+    console.warn('Failed to parse polygon points:', points);
+    return [];
+  }
+}

package/src/renderer/types/index.ts

@@ -0,0 +1,3 @@
+export type * from './renderer';
+export type * from './stylize';
+export type * from './text';

package/src/renderer/types/renderer.ts

@@ -0,0 +1,7 @@
+import type { ParsedInfographicOptions } from '../../options';
+
+export interface IRenderer {
+  getSVG(): SVGSVGElement;
+  getOptions(): ParsedInfographicOptions;
+  render(): SVGSVGElement;
+}

package/src/renderer/types/stylize.ts

@@ -0,0 +1,43 @@
+export type StylizeConfig = RoughConfig | PatternConfig | GradientConfig;
+
+export interface RoughConfig {
+  type: 'rough';
+  roughness?: number;
+  bowing?: number;
+  fillWeight?: number;
+  hachureGap?: number;
+}
+
+export interface PatternConfig extends PatternStyle {
+  type: 'pattern';
+  pattern: string;
+}
+
+export interface PatternStyle {
+  backgroundColor?: string | null;
+  foregroundColor?: string | null;
+  scale?: number | null;
+}
+
+export interface PatternGenerator {
+  (style: PatternStyle): SVGElement;
+}
+
+export type GradientConfig = LinearGradient | RadialGradient;
+
+export interface LinearGradient {
+  type: 'linear-gradient';
+  colors?: string[] | { color: string; offset: string }[];
+  /**
+   * 颜色角度
+   *          270
+   *   180 <-  ·  -> 0
+   *          90
+   */
+  angle?: number;
+}
+
+export interface RadialGradient {
+  type: 'radial-gradient';
+  colors?: string[] | { color: string; offset: string }[];
+}

package/src/renderer/types/text.ts

@@ -0,0 +1,3 @@
+export type TextHorizontalAlign = 'LEFT' | 'CENTER' | 'RIGHT';
+export type TextVerticalAlign = 'TOP' | 'CENTER' | 'BOTTOM';
+export type TextAlignment = [TextHorizontalAlign, TextVerticalAlign];

package/src/renderer/utils/attrs.ts

@@ -0,0 +1,27 @@
+import type { DynamicAttributes, DynamicItemAttribute } from '../../themes';
+import { hasColor } from '../../utils';
+
+export function parseDynamicAttributes<T extends object>(
+  node: SVGElement,
+  attributes: DynamicAttributes<T> | DynamicItemAttribute<T>,
+  primaryColor?: string,
+): T {
+  const attrs = Object.entries(attributes).reduce((acc, [key, value]) => {
+    if (typeof value === 'function') {
+      const staticValue = value(node.getAttribute(key), primaryColor);
+      if (staticValue) acc[key as keyof T] = staticValue;
+    } else {
+      Object.assign(acc, { [key]: value });
+    }
+    return acc;
+  }, {} as T);
+
+  if (primaryColor) {
+    if (!('fill' in attrs) && hasColor(node.getAttribute('fill')))
+      Object.assign(attrs, { fill: primaryColor });
+    if (!('stroke' in attrs) && hasColor(node.getAttribute('stroke')))
+      Object.assign(attrs, { stroke: primaryColor });
+  }
+
+  return attrs;
+}

package/src/renderer/utils/id.ts

@@ -0,0 +1,3 @@
+export function getSafetyId(id: string) {
+  return id.replace(/#|%|\.| |\/|\(|\)/g, '').replace(/,/g, '-');
+}

package/src/renderer/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './attrs';
+export * from './id';

package/src/resource/index.ts

@@ -0,0 +1,5 @@
+export { loadResource } from './loader';
+export * from './loaders';
+export { registerResourceLoader } from './registry';
+export type * from './types';
+export { getResourceHref, getResourceId, parseResourceConfig } from './utils';

package/src/resource/loader.ts

@@ -0,0 +1,64 @@
+import { getOrCreateDefs } from '../utils';
+import {
+  loadImageBase64Resource,
+  loadRemoteResource,
+  loadSVGResource,
+} from './loaders';
+import { getCustomResourceLoader } from './registry';
+import type { Resource, ResourceConfig } from './types';
+import { getResourceId, parseResourceConfig } from './utils';
+
+async function getResource(
+  config: string | ResourceConfig,
+): Promise<Resource | null> {
+  const cfg = parseResourceConfig(config);
+  if (!cfg) return null;
+  const { type, data } = cfg;
+
+  if (type === 'image') {
+    return await loadImageBase64Resource(data);
+  } else if (type === 'svg') {
+    return loadSVGResource(data);
+  } else if (type === 'remote') {
+    return await loadRemoteResource(data);
+  } else {
+    const customLoader = getCustomResourceLoader();
+    if (customLoader) return await customLoader(cfg);
+  }
+
+  return null;
+}
+
+const RESOURCE_MAP = new Map<string, Resource>();
+const RESOURCE_LOAD_MAP = new WeakMap<SVGSVGElement, Map<string, SVGElement>>();
+
+/**
+ * load resource into svg defs
+ * @returns resource ref id
+ */
+export async function loadResource(
+  svg: SVGSVGElement | null,
+  config: string | ResourceConfig,
+): Promise<string | null> {
+  if (!svg) return null;
+  const cfg = parseResourceConfig(config);
+  if (!cfg) return null;
+  const id = getResourceId(cfg)!;
+
+  const resource = RESOURCE_MAP.has(id)
+    ? RESOURCE_MAP.get(id) || null
+    : await getResource(cfg);
+
+  if (!resource) return null;
+
+  if (!RESOURCE_LOAD_MAP.has(svg)) RESOURCE_LOAD_MAP.set(svg, new Map());
+  const map = RESOURCE_LOAD_MAP.get(svg)!;
+  if (map.has(id)) return id;
+
+  const defs = getOrCreateDefs(svg);
+  resource.id = id;
+  defs.appendChild(resource);
+  map.set(id, resource);
+
+  return id;
+}

package/src/resource/loaders/image.ts

@@ -0,0 +1,87 @@
+import { parseSVG } from '../../utils';
+
+function isImageBase64Resource(resource: string): boolean {
+  return resource.startsWith('data:');
+}
+
+export async function loadImageBase64Resource(data: string) {
+  if (!data || !isImageBase64Resource(data)) return null;
+
+  const mimeType = data.match(/^data:([^;]+)/)?.[1];
+  if (!mimeType) return null;
+
+  const analysis = () => {
+    return new Promise<{ width: number; height: number; hasAlpha: boolean }>(
+      (resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          const width = img.naturalWidth;
+          const height = img.naturalHeight;
+
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+
+          if (!ctx) {
+            return resolve({ width, height, hasAlpha: false });
+          }
+          // skip analysis for jpeg/jpg/webp/gif
+          if (
+            ['image/jpeg', 'image/jpg', 'image/webp', 'image/gif'].includes(
+              mimeType,
+            )
+          ) {
+            return resolve({ width, height, hasAlpha: false });
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+          ctx.drawImage(img, 0, 0);
+
+          let hasAlpha = false;
+          const step = 10;
+
+          for (let x = 0; x < width; x += step) {
+            if (hasAlpha) break;
+            for (let y = 0; y < height; y += step) {
+              const imageData = ctx.getImageData(x, y, 1, 1);
+              if (imageData.data[3] < 255) {
+                hasAlpha = true;
+                break;
+              }
+            }
+          }
+
+          resolve({ width, height, hasAlpha });
+        };
+        img.onerror = () => reject(new Error('Failed to analysis image'));
+        img.src = data;
+      },
+    );
+  };
+
+  const { width, height, hasAlpha } = await analysis();
+
+  const getPreserveAspectRatio = () => {
+    if (hasAlpha) return 'xMidYMid meet';
+
+    if (mimeType?.includes('image/gif') || mimeType?.includes('image/svg')) {
+      return 'xMidYMid meet';
+    }
+
+    const minDimension = Math.min(width, height);
+    if (minDimension <= 200) return 'xMidYMid meet';
+
+    const aspectRatio = width / height;
+    if (aspectRatio >= 0.6 && aspectRatio <= 1.67) return 'xMidYMid meet';
+    if (aspectRatio < 0.3 || aspectRatio > 3.33) return 'xMidYMid meet';
+
+    return 'xMidYMid slice';
+  };
+
+  const preserveAspectRatio = getPreserveAspectRatio();
+
+  return parseSVG<SVGSymbolElement>(`
+<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="${preserveAspectRatio}">
+  <image href="${data}" width="${width}" height="${height}" />
+</symbol>`);
+}

package/src/resource/loaders/index.ts

@@ -0,0 +1,3 @@
+export * from './image';
+export * from './remote';
+export * from './svg';

package/src/resource/loaders/remote.ts

@@ -0,0 +1,40 @@
+import { loadImageBase64Resource } from './image';
+import { loadSVGResource } from './svg';
+
+function isRemoteResource(resource: string): boolean {
+  try {
+    return Boolean(new URL(resource));
+  } catch {
+    return false;
+  }
+}
+
+export async function loadRemoteResource(resource: string) {
+  if (!resource || !isRemoteResource(resource)) return null;
+
+  const response = await fetch(resource);
+  if (!response.ok) throw new Error('Failed to load resource');
+
+  const contentType = response.headers.get('Content-Type') || '';
+
+  if (contentType.includes('image/svg+xml')) {
+    const svgText = await response.text();
+    return loadSVGResource(svgText);
+  }
+
+  const blob = await response.blob();
+  const base64 = await blobToBase64(blob);
+
+  return loadImageBase64Resource(base64);
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}

package/src/resource/loaders/svg.ts

@@ -0,0 +1,13 @@
+import { parseSVG } from '../../utils';
+
+function isSVGResource(resource: string): boolean {
+  return resource.startsWith('<svg') || resource.startsWith('<symbol');
+}
+
+export function loadSVGResource(data: string) {
+  if (!data || !isSVGResource(data)) return null;
+  const str = data.startsWith('<svg')
+    ? data.replace(/<svg/, '<symbol').replace(/svg>/, 'symbol>')
+    : data;
+  return parseSVG(str);
+}

package/src/resource/registry.ts

@@ -0,0 +1,11 @@
+import type { ResourceLoader } from './types';
+
+let customResourceLoader: ResourceLoader | null = null;
+
+export function registerResourceLoader(loader: ResourceLoader) {
+  customResourceLoader = loader;
+}
+
+export function getCustomResourceLoader(): ResourceLoader | null {
+  return customResourceLoader;
+}