@antv/infographic 0.1.1 → 0.1.3

package/src/jsx/components/Text.ts

@@ -1,18 +1,13 @@
+import { measureText } from '../../utils';
 import type { GroupProps, JSXElement, RectProps, TextProps } from '../types';
 
-const TEXT_ANCHOR_MAP = {
-  center: 'middle',
-  right: 'end',
-  left: 'start',
-} as const;
-
 export function Text(props: TextProps): JSXElement {
   const {
     id,
     x = 0,
     y = 0,
-    width = 0,
-    height = 0,
+    width: w,
+    height: h,
     alignHorizontal = 'left',
     alignVertical = 'top',
     children,
@@ -33,55 +28,69 @@ export function Text(props: TextProps): JSXElement {
     ...restProps
   } = props;
 
+  let width = w;
+  let height = h;
+  let textX = 0;
+  let textY = 0;
+  if (!width || !height) {
+    const metrics = measureText(children, props);
+    width ||= metrics.width;
+    height ||= metrics.height;
+  }
+
+  // 如果由指定容器，那么需要对文本设置偏移量
+  if (w) {
+    textX =
+      alignHorizontal === 'center'
+        ? width / 2
+        : alignHorizontal === 'right'
+          ? width
+          : 0;
+  }
+  if (h) {
+    textY =
+      alignVertical === 'middle'
+        ? height / 2
+        : alignVertical === 'bottom'
+          ? height
+          : 0;
+  }
+
   const dataAttrs = Object.entries({
+    width,
+    height,
     ...(lineHeight !== undefined && { 'line-height': lineHeight }),
     ...(wordWrap !== undefined && { 'data-word-wrap': wordWrap }),
-    ...(width !== undefined && { width: width }),
-    ...(height !== undefined && { height: height }),
   }).reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
 
-  const textX =
+  const textAnchor =
     alignHorizontal === 'center'
-      ? x + width / 2
+      ? 'middle'
       : alignHorizontal === 'right'
-        ? x + width
-        : x;
-
-  const calculateTextY = () => {
-    if (alignVertical === 'middle') return y + height / 2;
-    if (alignVertical === 'bottom') return y + height;
-
-    const fz = +fontSize;
-    const ratio = 0.88;
-    if (lineHeight && lineHeight > 1) {
-      const lineHeightPx = fz * lineHeight;
-      const extraSpace = lineHeightPx - fz;
-      return y + extraSpace / 2 + fz * ratio;
-    }
-    return y + fz * ratio;
-  };
-
-  const textY = calculateTextY();
+        ? 'end'
+        : 'start';
 
-  const getDominantBaseline = () => {
-    if (alignVertical === 'middle') return 'central';
-    if (alignVertical === 'bottom') return 'baseline';
-    return 'baseline';
-  };
+  const dominantBaseline =
+    alignVertical === 'middle'
+      ? 'central'
+      : alignVertical === 'bottom'
+        ? 'baseline'
+        : 'hanging';
 
   const textProps = {
     'data-element-type': 'text',
-    ...(textX && { x: textX }),
-    ...(textY && { y: textY }),
-    ...(width && { width }),
-    ...(height && { height }),
-    ...(x && { 'data-x': x }),
-    ...(y && { 'data-y': y }),
+    width,
+    height,
+    x: textX,
+    y: textY,
+    'data-x': 0,
+    'data-y': 0,
     fill,
     fontSize,
-    textAnchor: TEXT_ANCHOR_MAP[alignHorizontal],
-    dominantBaseline: getDominantBaseline(),
-    'data-text-alignment': `${alignHorizontal.toUpperCase()} ${alignVertical.toUpperCase()}`,
+    textAnchor,
+    dominantBaseline,
+    'data-horizontal-align': alignHorizontal.toUpperCase(),
+    'data-vertical-align': alignVertical.toUpperCase(),
     children,
     ...dataAttrs,
     ...restProps,
@@ -94,45 +103,35 @@ export function Text(props: TextProps): JSXElement {
     ...(opacity !== undefined && opacity !== 1 && { opacity }),
   };
 
-  const bounds = {
-    ...(x && { x }),
-    ...(y && { y }),
-    ...(width && { width }),
-    ...(height && { height }),
-  };
-
   const containerProps: GroupProps = {
-    ...bounds,
+    ...(x !== 0 || y !== 0 ? { x, y, transform: `translate(${x}, ${y})` } : {}),
+    width,
+    height,
     ...(id && { id }),
   };
 
   const hasBackground = backgroundColor && backgroundColor !== 'none';
 
-  if (!hasBackground) {
-    return {
-      type: 'text',
-      props: {
-        ...containerProps,
-        ...textProps,
-      },
-    };
-  }
-
-  const rectProps: RectProps = {
-    'data-element-type': 'shape',
-    ...bounds,
-    fill: backgroundColor,
-    fillOpacity: backgroundOpacity,
-    rx: backgroundRadius,
-    ry: backgroundRadius,
-  };
+  const rectProps: RectProps | undefined = hasBackground
+    ? {
+        'data-element-type': 'shape',
+        x: 0,
+        y: 0,
+        width,
+        height,
+        fill: backgroundColor,
+        fillOpacity: backgroundOpacity,
+        rx: backgroundRadius,
+        ry: backgroundRadius,
+      }
+    : undefined;
 
   return {
     type: 'g',
     props: {
       ...containerProps,
       children: [
-        { type: 'rect', props: rectProps },
+        ...(rectProps ? [{ type: 'rect', props: rectProps }] : []),
         { type: 'text', props: textProps },
       ],
     },

package/src/options/types.ts

@@ -1,5 +1,6 @@
-import { DesignOptions, ParsedDesignsOptions } from '../designs';
-import { ThemeConfig } from '../themes';
+import type { DesignOptions, ParsedDesignsOptions } from '../designs';
+import type { ElementProps, IInteraction, IPlugin } from '../editor';
+import type { ThemeConfig } from '../themes';
 import type { Data, Padding } from '../types';
 
 export interface InfographicOptions {
@@ -23,6 +24,15 @@ export interface InfographicOptions {
   themeConfig?: ThemeConfig;
   /** svg 容器上的配置 */
   svg?: SVGOptions;
+
+  /** 启用编辑 */
+  editable?: boolean;
+  /** 启用插件 */
+  plugins?: IPlugin[];
+  /** 启用交互 */
+  interactions?: IInteraction[];
+  /** 用于向画布添加图形 */
+  elements?: ElementProps[];
 }
 
 export interface ParsedInfographicOptions {
@@ -37,6 +47,11 @@ export interface ParsedInfographicOptions {
   theme?: string;
   themeConfig: ThemeConfig;
   svg?: SVGOptions;
+
+  editable?: boolean;
+  plugins?: IPlugin[];
+  interactions?: IInteraction[];
+  shapes?: ElementProps[];
 }
 
 interface SVGOptions {

package/src/renderer/composites/background.ts

@@ -1,4 +1,4 @@
-import { createElement } from '../../utils';
+import { createElement, getElementByRole } from '../../utils';
 import { ElementTypeEnum } from '../constants';
 
 export function renderBackground(
@@ -7,7 +7,7 @@ export function renderBackground(
 ): void {
   const container = svg.parentElement;
   if (container) container.style.backgroundColor = background || 'none';
-  const element = svg.querySelector('#background');
+  const element = getElementByRole(svg, ElementTypeEnum.Background);
 
   if (!background) {
     return element?.remove();

package/src/renderer/composites/button.ts

@@ -3,8 +3,8 @@ import {
   getAttributes,
   parseSVG,
   setAttributes,
+  setElementRole,
 } from '../../utils';
-import { ElementTypeEnum } from '../constants';
 
 const ADD_ICON_ID = 'btn-add-icon';
 const REMOVE_ICON_ID = 'btn-remove-icon';
@@ -22,8 +22,10 @@ export function renderButtonsGroup(svg: SVGSVGElement, group: SVGGElement) {
   removeBtns.forEach(renderRemoveButton);
 }
 
+const btnIconDefRole = 'btn-icon-defs';
 function defineButtonIcon(svg: SVGSVGElement) {
-  const defs = createElement('defs', { id: 'btn-icon-defs' });
+  const defs = createElement('defs');
+  setElementRole(defs, btnIconDefRole);
 
   const addIconSymbol =
     parseSVG(`<symbol class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
@@ -62,7 +64,6 @@ function renderButtonIcon(node: SVGElement, name: string) {
     id,
     class: 'btn-group',
     transform: `translate(${x}, ${y})`,
-    'data-element-type': ElementTypeEnum.Button,
   });
 
   const dataItems = node.getAttribute('data-items');

package/src/renderer/composites/icon.ts

@@ -51,6 +51,8 @@ function createIcon(
       'height',
       'fill',
       'stroke',
+      'data-element-type',
+      'data-indexes',
     ]),
     ...attrs,
   });

package/src/renderer/composites/text.ts

@@ -88,7 +88,8 @@ function layoutText(textContent: string, text: SVGTextElement): SVGElement {
     y,
     width,
     height,
-    'text-alignment': text.dataset.textAlignment || 'LEFT TOP',
+    'data-horizontal-align': text.dataset.horizontalAlign || 'LEFT',
+    'data-vertical-align': text.dataset.verticalAlign || 'TOP',
   });
 
   const element = createTextElement(textContent, attributes as any);

package/src/renderer/renderer.ts

@@ -29,6 +29,7 @@ import {
   renderShape,
   renderStaticShape,
   renderStaticText,
+  renderSVG,
   renderText,
 } from './composites';
 import { loadFonts } from './fonts';
@@ -61,7 +62,6 @@ export class Renderer implements IRenderer {
     if (this.rendered) return svg;
 
     renderTemplate(svg, this.options);
-
     svg.style.visibility = 'hidden';
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -183,6 +183,8 @@ function fill(svg: SVGSVGElement, options: ParsedInfographicOptions) {
       return renderStaticShape(element, options);
     }
   });
+
+  renderSVG(svg, options);
 }
 
 function setSVG(svg: SVGSVGElement, options: ParsedInfographicOptions) {
@@ -204,7 +206,7 @@ function setSVG(svg: SVGSVGElement, options: ParsedInfographicOptions) {
 }
 
 function setView(svg: SVGSVGElement, options: ParsedInfographicOptions) {
-  const { padding = 20, viewBox } = options;
+  const { padding = 0, viewBox } = options;
 
   if (viewBox) {
     svg.setAttribute('viewBox', viewBox);

package/src/renderer/stylize/rough.ts

@@ -32,23 +32,19 @@ export function applyRoughStyle(
   if (volume.hasAttribute('transform')) {
     volume.removeAttribute('transform');
   }
-  volume.classList.add('rough-volume');
+  volume.dataset.elementType = 'rough-volume';
   g.appendChild(volume);
 
   const result = createRoughShape(rc, node, config);
   if (result) {
     const { element, svgAttributes } = result;
-    element.classList.add('rough-element');
+    element.dataset.elementType = 'rough-element';
     element.style.pointerEvents = 'none';
     applySVGAttributes(element, svgAttributes);
     g.appendChild(element);
   }
 
-  if (node.id) {
-    g.id = node.id;
-    volume.setAttribute('id', `${node.id}-volume`);
-    if (result?.element) result.element.setAttribute('id', `${node.id}-rough`);
-  }
+  if (node.id) g.id = node.id;
 
   const classList = Array.from(node.classList);
   classList.forEach((cls) => {

package/src/renderer/types/index.ts

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

package/src/resource/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './data-uri';
-export * from './hash';
 export * from './parser';
 export * from './ref';

package/src/resource/utils/ref.ts

@@ -1,6 +1,6 @@
+import { getSimpleHash } from '../../utils';
 import type { ResourceConfig } from '../types';
 import { parseDataURI } from './data-uri';
-import { getSimpleHash } from './hash';
 
 export function getResourceId(config: string | ResourceConfig): string | null {
   const cfg = typeof config === 'string' ? parseDataURI(config) : config;

package/src/runtime/Infographic.tsx

@@ -1,7 +1,10 @@
+import EventEmitter from 'eventemitter3';
+import { cloneDeep } from 'lodash-es';
+import { Editor, type IEditor } from '../editor';
 import {
-  ExportOptions,
   exportToPNGString,
   exportToSVGString,
+  type ExportOptions,
 } from '../exporter';
 import { renderSVG } from '../jsx';
 import {
@@ -10,15 +13,36 @@ import {
   parseOptions,
 } from '../options';
 import { Renderer } from '../renderer';
+import { IEventEmitter } from '../types';
 import { getTypes, parseSVG } from '../utils';
+import { DEFAULT_OPTIONS } from './options';
+import { mergeOptions } from './utils';
 
 export class Infographic {
+  rendered: boolean = false;
+
+  private emitter: IEventEmitter = new EventEmitter();
+
   private node: SVGSVGElement | null = null;
 
+  private editor?: IEditor;
+
+  private options: InfographicOptions;
   private parsedOptions: ParsedInfographicOptions;
 
-  constructor(private options: InfographicOptions) {
-    this.parsedOptions = parseOptions(this.options);
+  constructor(options: InfographicOptions) {
+    this.options = {
+      ...options,
+      data: cloneDeep(options.data),
+      elements: cloneDeep(options.elements || []),
+    };
+    this.parsedOptions = parseOptions(
+      mergeOptions(DEFAULT_OPTIONS, this.options),
+    );
+  }
+
+  getOptions() {
+    return this.options;
   }
 
   /**
@@ -28,9 +52,14 @@ export class Infographic {
     const { container } = this.parsedOptions;
     const template = this.compose();
     const renderer = new Renderer(this.parsedOptions, template);
-
     this.node = renderer.render();
     container.replaceChildren(this.node);
+    if (this.options.editable) {
+      this.editor = new Editor(this.emitter, this.node, this.parsedOptions);
+    }
+
+    this.rendered = true;
+    this.emitter.emit('rendered', { node: this.node, options: this.options });
   }
 
   /**
@@ -85,8 +114,20 @@ export class Infographic {
     return await exportToPNGString(this.node, options);
   }
 
+  on(event: string, listener: (...args: any[]) => void) {
+    this.emitter.on(event, listener);
+  }
+
+  off(event: string, listener: (...args: any[]) => void) {
+    this.emitter.off(event, listener);
+  }
+
   destroy() {
+    this.editor?.destroy();
     this.node?.remove();
     this.node = null;
+    this.rendered = false;
+    this.emitter.emit('destroyed');
+    this.emitter.removeAllListeners();
   }
 }

package/src/runtime/options.ts

@@ -0,0 +1,37 @@
+import {
+  BrushSelect,
+  ClickSelect,
+  DblClickEditText,
+  DragElement,
+  EditBar,
+  HotkeyHistory,
+  ResizeElement,
+  SelectHighlight,
+  ZoomWheel,
+} from '../editor';
+import { InfographicOptions } from '../options';
+
+const createDefaultPlugins = () => [new EditBar(), new ResizeElement()];
+const createDefaultInteractions = () => [
+  new DblClickEditText(),
+  new BrushSelect(),
+  new ClickSelect(),
+  new DragElement(),
+  new HotkeyHistory(),
+  new ZoomWheel(),
+  new SelectHighlight(),
+];
+
+export const DEFAULT_OPTIONS: Partial<InfographicOptions> = {
+  padding: 20,
+  theme: 'light',
+  themeConfig: {
+    palette: 'antv',
+  },
+  get plugins() {
+    return createDefaultPlugins();
+  },
+  get interactions() {
+    return createDefaultInteractions();
+  },
+};

package/src/runtime/utils.ts

@@ -0,0 +1,23 @@
+import { InfographicOptions } from '../options/types';
+
+export function mergeOptions(
+  object: Partial<InfographicOptions>,
+  source: Partial<InfographicOptions>,
+): InfographicOptions {
+  return {
+    ...object,
+    ...source,
+    design: {
+      ...object.design,
+      ...source.design,
+    },
+    themeConfig: {
+      ...object.themeConfig,
+      ...source.themeConfig,
+    },
+    svg: {
+      ...object.svg,
+      ...source.svg,
+    },
+  } as InfographicOptions;
+}

package/src/templates/built-in.ts

@@ -1,3 +1,4 @@
+import { hierarchyMindmapTemplates } from './hierarchy-mindmap';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { registerTemplate } from './registry';
 import type { TemplateOptions } from './types';
@@ -209,7 +210,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
     design: {
       title: 'default',
       structure: { type: 'sequence-timeline', gap: 20 },
-      items: [{ type: 'simple' }],
+      items: [{ type: 'simple', positionV: 'middle' }],
     },
   },
   'sequence-cylinders-3d-simple': {
@@ -691,7 +692,117 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
       items: [{ type: 'compact-card' }],
     },
   },
+  'chart-bar-plain-text': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-bar',
+      },
+      items: [
+        {
+          type: 'plain-text',
+          positionH: 'flipped',
+        },
+      ],
+    },
+  },
+  'chart-line-plain-text': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-line',
+      },
+      items: [
+        {
+          type: 'plain-text',
+          lineNumber: 2,
+        },
+      ],
+    },
+  },
+  'chart-pie-plain-text': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+      },
+      items: [
+        {
+          type: 'plain-text',
+        },
+      ],
+    },
+  },
+  'chart-pie-compact-card': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+      },
+      items: [
+        {
+          type: 'compact-card',
+        },
+      ],
+    },
+  },
+  'chart-pie-pill-badge': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+      },
+      items: [
+        {
+          type: 'pill-badge',
+        },
+      ],
+    },
+  },
+  'chart-pie-donut-plain-text': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+        innerRadius: 90,
+      },
+      items: [
+        {
+          type: 'plain-text',
+        },
+      ],
+    },
+  },
+  'chart-pie-donut-compact-card': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+        innerRadius: 90,
+      },
+      items: [
+        {
+          type: 'compact-card',
+        },
+      ],
+    },
+  },
+  'chart-pie-donut-pill-badge': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'chart-pie',
+        innerRadius: 90,
+      },
+      items: [
+        {
+          type: 'pill-badge',
+        },
+      ],
+    },
+  },
   ...hierarchyTreeTemplates,
+  ...hierarchyMindmapTemplates,
 };
 
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {