@antv/infographic 0.0.1-beta.1

package/src/utils/padding.ts

@@ -0,0 +1,21 @@
+import type { Padding, ParsedPadding } from '../types';
+
+export function parsePadding(padding: Padding | undefined): ParsedPadding {
+  if (!padding) return [0, 0, 0, 0];
+  if (typeof padding === 'number') {
+    return [padding, padding, padding, padding];
+  }
+  if (padding.length === 1) {
+    return [padding[0], padding[0], padding[0], padding[0]];
+  }
+  if (padding.length === 2) {
+    return [padding[0], padding[1], padding[0], padding[1]];
+  }
+  if (padding.length === 3) {
+    return [padding[0], padding[1], padding[2], padding[1]];
+  }
+  if (padding.length === 4) {
+    return [padding[0], padding[1], padding[2], padding[3]];
+  }
+  return [0, 0, 0, 0];
+}

package/src/utils/recognizer.ts

@@ -0,0 +1,70 @@
+const INDEX_KEY = '\\d+(_\\d+)*';
+const ITEM_PATTERN = `item-${INDEX_KEY}`;
+
+const REGEXP = {
+  btnAdd: new RegExp(`^btn-add-${INDEX_KEY}$`),
+  btnRemove: new RegExp(`^btn-remove-${INDEX_KEY}$`),
+  btnsGroup: /^btns-group$/,
+  desc: /^desc$/,
+  editArea: /^edit-area$/,
+  illus: /^illus(?:-\w+)+$/,
+  itemDesc: new RegExp(`^${ITEM_PATTERN}-desc$`),
+  itemElement: new RegExp(`^${ITEM_PATTERN}`),
+  itemGroup: new RegExp(`^${ITEM_PATTERN}$`),
+  itemIcon: new RegExp(`^${ITEM_PATTERN}-icon`),
+  itemIconGroup: new RegExp(`^${ITEM_PATTERN}-group-icon$`),
+  itemIllus: new RegExp(`^${ITEM_PATTERN}-illus(?:-\\w+)*$`),
+  itemLabel: new RegExp(`^${ITEM_PATTERN}-label$`),
+  itemsGroup: /^items-group$/,
+  itemShape: new RegExp(`^${ITEM_PATTERN}-shape(?:-\\w+)*$`),
+  itemShapesGroup: new RegExp(`^${ITEM_PATTERN}-union-shapes(?:-\\w+)*$`),
+  itemStaticElement: new RegExp(`^${ITEM_PATTERN}-static(?:-\\w+)*$`),
+  itemValue: new RegExp(`^${ITEM_PATTERN}-value$`),
+  shape: /^shape-/,
+  shapesGroup: /^union-shapes(?:-\w+)*$/,
+  title: /^title$/,
+};
+
+const is = (element: SVGElement, regexp: RegExp) => {
+  return element.id ? regexp.test(element.id) : false;
+};
+export const isSVG = (element: any): element is SVGSVGElement =>
+  element instanceof SVGElement && element.tagName === 'svg';
+export const isTitle = (element: SVGElement) => is(element, REGEXP.title);
+export const isDesc = (element: SVGElement) => is(element, REGEXP.desc);
+export const isShape = (element: SVGElement) => is(element, REGEXP.shape);
+export const isIllus = (element: SVGElement) => is(element, REGEXP.illus);
+export const isText = (element: SVGElement): element is SVGTextElement =>
+  element instanceof SVGElement && element.tagName === 'text';
+export const isGroup = (element: SVGElement): element is SVGGElement =>
+  element instanceof SVGElement && element.tagName === 'g';
+export const isShapeGroup = (element: SVGElement) =>
+  is(element, REGEXP.shapesGroup);
+export const isItemsGroup = (element: SVGElement) =>
+  is(element, REGEXP.itemsGroup);
+export const isItemElement = (element: SVGElement) =>
+  is(element, REGEXP.itemElement);
+export const isItemGroup = (element: SVGElement) =>
+  is(element, REGEXP.itemGroup);
+export const isItemIcon = (element: SVGElement) => is(element, REGEXP.itemIcon);
+export const isItemIconGroup = (element: SVGElement) =>
+  is(element, REGEXP.itemIconGroup);
+export const isItemLabel = (element: SVGElement) =>
+  is(element, REGEXP.itemLabel);
+export const isItemDesc = (element: SVGElement) => is(element, REGEXP.itemDesc);
+export const isItemValue = (element: SVGElement) =>
+  is(element, REGEXP.itemValue);
+export const isItemIllus = (element: SVGElement) =>
+  is(element, REGEXP.itemIllus);
+export const isItemShape = (element: SVGElement) =>
+  is(element, REGEXP.itemShape);
+export const isItemShapesGroup = (element: SVGElement) =>
+  is(element, REGEXP.itemShapesGroup);
+export const isItemStaticElement = (element: SVGElement) =>
+  is(element, REGEXP.itemStaticElement);
+export const isEditArea = (element: SVGElement) => is(element, REGEXP.editArea);
+export const isBtnsGroup = (element: SVGElement) =>
+  is(element, REGEXP.btnsGroup);
+export const isBtnAdd = (element: SVGElement) => is(element, REGEXP.btnAdd);
+export const isBtnRemove = (element: SVGElement) =>
+  is(element, REGEXP.btnRemove);

package/src/utils/svg.ts

@@ -0,0 +1,104 @@
+export function createElement<T extends SVGElement = SVGElement>(
+  tagName: string,
+  attributes: Record<string, any> = {},
+) {
+  const element = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    tagName,
+  ) as T;
+
+  setAttributes(element, attributes);
+
+  return element;
+}
+
+export function parseSVG<T extends SVGElement = SVGSVGElement>(
+  svg: string,
+): T | null {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(svg, 'image/svg+xml');
+
+  const errorNode = doc.querySelector('parsererror');
+  if (errorNode) {
+    throw new Error('Invalid SVG string');
+  }
+
+  return doc.documentElement as unknown as T;
+}
+
+export function setAttributes(element: SVGElement, attrs: Record<string, any>) {
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (value === null) {
+      element.removeAttribute(key);
+    } else {
+      element.setAttribute(key, value);
+    }
+  });
+}
+
+export function getAttributes(
+  element: SVGElement,
+  attrs: readonly string[],
+  ignoreEmpty = true,
+) {
+  return attrs.reduce(
+    (acc, attr) => {
+      const value = element.getAttribute(attr);
+      if (!ignoreEmpty || (value !== null && value !== '')) {
+        acc[attr] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, string | null>,
+  );
+}
+
+export function removeAttributes(element: SVGElement, attrs: string[]) {
+  attrs.forEach((attr) => {
+    element.removeAttribute(attr);
+  });
+}
+
+export function traverse(
+  node: SVGElement,
+  callback: <T extends SVGElement = SVGElement>(child: T) => boolean | void,
+) {
+  if (callback(node as SVGElement) === false) return;
+
+  const children = Array.from(node.children);
+  children.forEach((child) => {
+    traverse(child as SVGElement, callback);
+  });
+}
+
+export function getOrCreateDefs(
+  svg: SVGSVGElement,
+  defsId: string = 'infographic-defs',
+): SVGDefsElement {
+  const selector = defsId ? `defs#${defsId}` : 'defs';
+  const defs = svg.querySelector<SVGDefsElement>(selector);
+
+  if (defs) return defs;
+
+  const newDefs = createElement<SVGDefsElement>('defs');
+  if (defsId) newDefs.id = defsId;
+  svg.prepend(newDefs);
+  return newDefs;
+}
+
+export function getSizeBaseVal(svg: SVGSVGElement): [number, number] {
+  try {
+    const width = svg.width.baseVal.value || 0;
+    const height = svg.height.baseVal.value || 0;
+    return [width, height];
+  } catch (error) {
+    const viewBox = svg.getAttribute('viewBox');
+    if (viewBox) {
+      const [x, y, width, height] = viewBox.split(' ').map(Number);
+      return [width - x, height - y];
+    }
+
+    console.error('Error getting size baseVal from SVG:', error);
+    return [0, 0];
+  }
+}

package/src/utils/text.ts

@@ -0,0 +1,150 @@
+import camelCase from 'lodash-es/camelCase';
+import { ElementTypeEnum } from '../constants';
+import { encodeFontFamily, TextAlignment } from '../renderer';
+import type { TextAttributes, TextElement } from '../types';
+import { createElement } from './svg';
+
+export function createTextElement(
+  textContent: string,
+  attributes: TextAttributes,
+): TextElement {
+  const span = document.createElement('span');
+
+  span.textContent = textContent;
+  Object.assign(span.style, { fontSize: '16px' }, getTextStyle(attributes));
+
+  let { width, height } = attributes;
+
+  if (!width || !height) {
+    const rect = measureTextSpan(span);
+    if (!width) width = String(rect.width);
+    if (!height) height = String(rect.height);
+  }
+
+  // 以下属性需要完成包围盒测量后再设置
+  const { id, x, y, 'text-alignment': TextAlignment = 'LEFT TOP' } = attributes;
+  const [horizontal, vertical] = getTextAlignment(TextAlignment);
+  Object.assign(span.style, alignToFlex(horizontal, vertical));
+
+  const foreignObject = createElement<SVGForeignObjectElement>(
+    'foreignObject',
+    {
+      id,
+      x,
+      y,
+      width,
+      height,
+      overflow: 'visible',
+      'data-element-type': ElementTypeEnum.Text,
+    },
+  );
+
+  foreignObject.appendChild(span);
+
+  return foreignObject;
+}
+
+function alignToFlex(
+  horizontal: string | undefined,
+  vertical: string | undefined,
+) {
+  const style: Record<string, any> = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+    wordBreak: 'break-word',
+  };
+  switch (horizontal) {
+    case 'LEFT':
+      style.textAlign = 'left';
+      style.justifyContent = 'flex-start';
+      break;
+    case 'CENTER':
+      style.textAlign = 'center';
+      style.justifyContent = 'center';
+      break;
+    case 'RIGHT':
+      style.textAlign = 'right';
+      style.justifyContent = 'flex-end';
+      break;
+  }
+
+  switch (vertical) {
+    case 'TOP':
+      style.alignContent = 'flex-start';
+      style.alignItems = 'flex-start';
+      break;
+    case 'CENTER':
+      style.alignContent = 'center';
+      style.alignItems = 'center';
+      break;
+    case 'BOTTOM':
+      style.alignContent = 'flex-end';
+      style.alignItems = 'flex-end';
+      break;
+  }
+
+  return style;
+}
+
+function getTextStyle(attributes: TextAttributes) {
+  const {
+    x,
+    y,
+    width,
+    height,
+    ['text-alignment']: textAlignment,
+    ['font-size']: fontSize,
+    ['letter-spacing']: letterSpacing,
+    ['line-height']: lineHeight,
+    fill,
+    ['stroke-width']: strokeWidth,
+    ['text-anchor']: textAnchor, // omit
+    ['dominant-baseline']: dominantBaseline, // omit
+    ['font-family']: fontFamily,
+    ...restAttrs
+  } = attributes;
+
+  const style: Record<string, any> = {
+    color: fill,
+    overflow: 'visible',
+    // userSelect: 'none',
+  };
+
+  Object.entries(restAttrs).forEach(([key, value]) => {
+    style[camelCase(key)] = value;
+  });
+
+  if (fontSize) style.fontSize = `${fontSize}px`;
+  if (lineHeight)
+    style.lineHeight =
+      typeof lineHeight === 'string' && lineHeight.endsWith('px')
+        ? lineHeight
+        : +lineHeight;
+  if (letterSpacing) style.letterSpacing = `${letterSpacing}px`;
+  if (strokeWidth) style.strokeWidth = `${strokeWidth}px`;
+  if (fontFamily) style.fontFamily = encodeFontFamily(fontFamily);
+
+  return style;
+}
+
+function measureTextSpan(span: HTMLSpanElement) {
+  const parentNode = span.parentNode;
+  span.style.visibility = 'hidden';
+  document.body.appendChild(span);
+  const rect = span.getBoundingClientRect();
+  if (parentNode) parentNode.appendChild(span);
+  else document.body.removeChild(span);
+  span.style.visibility = 'visible';
+  return rect;
+}
+
+function getTextAlignment(alignment: string): TextAlignment {
+  if (!alignment) {
+    return ['CENTER', 'CENTER'];
+  }
+
+  const [horizontal = 'CENTER', vertical = 'CENTER'] = alignment.split(' ');
+  return [horizontal, vertical] as TextAlignment;
+}

package/src/utils/uuid.ts

@@ -0,0 +1,11 @@
+export function uuid() {
+  if (crypto && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+
+  return 'xxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}