@antv/infographic 0.1.2 → 0.1.3

package/esm/jsx/components/Text.js

@@ -1,56 +1,62 @@
-const TEXT_ANCHOR_MAP = {
-    center: 'middle',
-    right: 'end',
-    left: 'start',
-};
+import { measureText } from '../../utils';
 export function Text(props) {
-    const { id, x = 0, y = 0, width = 0, height = 0, alignHorizontal = 'left', alignVertical = 'top', children, fontSize = 14, fontFamily, fontStyle, fontWeight, textDecoration, letterSpacing, wordSpacing, opacity, fill = 'black', lineHeight, wordWrap, backgroundColor = 'none', backgroundOpacity = 1, backgroundRadius = 0, ...restProps } = props;
+    const { id, x = 0, y = 0, width: w, height: h, alignHorizontal = 'left', alignVertical = 'top', children, fontSize = 14, fontFamily, fontStyle, fontWeight, textDecoration, letterSpacing, wordSpacing, opacity, fill = 'black', lineHeight, wordWrap, backgroundColor = 'none', backgroundOpacity = 1, backgroundRadius = 0, ...restProps } = props;
+    let width = w;
+    let height = h;
+    let textX = 0;
+    let textY = 0;
+    if (!width || !height) {
+        const metrics = measureText(children, props);
+        width || (width = metrics.width);
+        height || (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 = alignHorizontal === 'center'
-        ? x + width / 2
+    const textAnchor = alignHorizontal === 'center'
+        ? '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();
-    const getDominantBaseline = () => {
-        if (alignVertical === 'middle')
-            return 'central';
-        if (alignVertical === 'bottom')
-            return 'baseline';
-        return 'baseline';
-    };
+            ? 'end'
+            : 'start';
+    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,
@@ -62,40 +68,32 @@ export function Text(props) {
         ...(wordSpacing && { wordSpacing }),
         ...(opacity !== undefined && opacity !== 1 && { opacity }),
     };
-    const bounds = {
-        ...(x && { x }),
-        ...(y && { y }),
-        ...(width && { width }),
-        ...(height && { height }),
-    };
     const containerProps = {
-        ...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 = {
-        'data-element-type': 'shape',
-        ...bounds,
-        fill: backgroundColor,
-        fillOpacity: backgroundOpacity,
-        rx: backgroundRadius,
-        ry: backgroundRadius,
-    };
+    const rectProps = 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/esm/options/types.d.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 {
     /** 容器，可以是选择器或者 HTMLElement */
@@ -22,6 +23,14 @@ export interface InfographicOptions {
     themeConfig?: ThemeConfig;
     /** svg 容器上的配置 */
     svg?: SVGOptions;
+    /** 启用编辑 */
+    editable?: boolean;
+    /** 启用插件 */
+    plugins?: IPlugin[];
+    /** 启用交互 */
+    interactions?: IInteraction[];
+    /** 用于向画布添加图形 */
+    elements?: ElementProps[];
 }
 export interface ParsedInfographicOptions {
     container: HTMLElement;
@@ -35,6 +44,10 @@ export interface ParsedInfographicOptions {
     theme?: string;
     themeConfig: ThemeConfig;
     svg?: SVGOptions;
+    editable?: boolean;
+    plugins?: IPlugin[];
+    interactions?: IInteraction[];
+    shapes?: ElementProps[];
 }
 interface SVGOptions {
     style?: Record<string, string | number>;

package/esm/renderer/composites/background.js

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

package/esm/renderer/composites/button.js

@@ -1,4 +1,4 @@
-import { createElement, getAttributes, parseSVG, setAttributes, } from '../../utils';
+import { createElement, getAttributes, parseSVG, setAttributes, setElementRole, } from '../../utils';
 const ADD_ICON_ID = 'btn-add-icon';
 const REMOVE_ICON_ID = 'btn-remove-icon';
 export function renderButtonsGroup(svg, group) {
@@ -9,8 +9,10 @@ export function renderButtonsGroup(svg, group) {
     addBtns.forEach(renderAddButton);
     removeBtns.forEach(renderRemoveButton);
 }
+const btnIconDefRole = 'btn-icon-defs';
 function defineButtonIcon(svg) {
-    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">
   <path
     d="M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m0-960C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m192 480h-160v160a32 32 0 0 1-64 0v-160h-160a32 32 0 0 1 0-64h160v-160a32 32 0 0 1 64 0v160h160a32 32 0 0 1 0 64z"
@@ -36,7 +38,6 @@ function renderButtonIcon(node, name) {
         id,
         class: 'btn-group',
         transform: `translate(${x}, ${y})`,
-        'data-element-type': "button" /* ElementTypeEnum.Button */,
     });
     const dataItems = node.getAttribute('data-items');
     if (dataItems) {

package/esm/renderer/composites/icon.d.ts

@@ -3,4 +3,4 @@ import { ResourceConfig } from '../../resource';
 import type { DynamicAttributes } from '../../themes';
 import type { IconAttributes, IconElement } from '../../types';
 export declare function renderIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, attrs?: DynamicAttributes<IconAttributes>): IconElement | null;
-export declare function renderItemIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, options: ParsedInfographicOptions): SVGUseElement | null;
+export declare function renderItemIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, options: ParsedInfographicOptions): SVGGElement | null;

package/esm/renderer/composites/icon.js

@@ -29,6 +29,8 @@ function createIcon(svg, node, value, attrs) {
             'height',
             'fill',
             'stroke',
+            'data-element-type',
+            'data-indexes',
         ]),
         ...attrs,
     });

package/esm/renderer/composites/text.js

@@ -49,7 +49,8 @@ function layoutText(textContent, text) {
         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);
     return element;

package/esm/renderer/renderer.js

@@ -1,5 +1,5 @@
 import { getDatumByIndexes, getItemIndexes, isBtnsGroup, isDesc, isGroup, isIllus, isItemDesc, isItemIcon, isItemIllus, isItemLabel, isItemValue, isShape, isShapesGroup, isText, isTitle, parsePadding, setAttributes, setSVGPadding, } from '../utils';
-import { renderBackground, renderBaseElement, renderButtonsGroup, renderIllus, renderItemIcon, renderItemText, renderShape, renderStaticShape, renderStaticText, renderText, } from './composites';
+import { renderBackground, renderBaseElement, renderButtonsGroup, renderIllus, renderItemIcon, renderItemText, renderShape, renderStaticShape, renderStaticText, renderSVG, renderText, } from './composites';
 import { loadFonts } from './fonts';
 const upsert = (original, modified) => {
     if (original === modified)
@@ -108,6 +108,7 @@ function fill(svg, options) {
             return renderStaticShape(element, options);
         }
     });
+    renderSVG(svg, options);
 }
 function setSVG(svg, options) {
     const { width, height } = options;
@@ -126,7 +127,7 @@ function setSVG(svg, options) {
     setAttributes(svg, attributes);
 }
 function setView(svg, options) {
-    const { padding = 20, viewBox } = options;
+    const { padding = 0, viewBox } = options;
     if (viewBox) {
         svg.setAttribute('viewBox', viewBox);
     }

package/esm/renderer/stylize/rough.js

@@ -21,22 +21,18 @@ export function applyRoughStyle(node, svg, config) {
     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) {
+    if (node.id)
         g.id = node.id;
-        volume.setAttribute('id', `${node.id}-volume`);
-        if (result?.element)
-            result.element.setAttribute('id', `${node.id}-rough`);
-    }
     const classList = Array.from(node.classList);
     classList.forEach((cls) => {
         if (!g.classList.contains(cls)) {

package/esm/renderer/types/index.d.ts

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

package/esm/resource/utils/index.d.ts

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

package/esm/resource/utils/index.js

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

package/esm/resource/utils/ref.js

@@ -1,5 +1,5 @@
+import { getSimpleHash } from '../../utils';
 import { parseDataURI } from './data-uri';
-import { getSimpleHash } from './hash';
 export function getResourceId(config) {
     const cfg = typeof config === 'string' ? parseDataURI(config) : config;
     if (!cfg)

package/esm/runtime/Infographic.d.ts

@@ -1,10 +1,14 @@
-import { ExportOptions } from '../exporter';
+import { type ExportOptions } from '../exporter';
 import { InfographicOptions } from '../options';
 export declare class Infographic {
-    private options;
+    rendered: boolean;
+    private emitter;
     private node;
+    private editor?;
+    private options;
     private parsedOptions;
     constructor(options: InfographicOptions);
+    getOptions(): InfographicOptions;
     /**
      * Render the infographic into the container
      */
@@ -21,5 +25,7 @@ export declare class Infographic {
      * @description This method need to be called after `render()` and in a browser environment.
      */
     toDataURL(options?: ExportOptions): Promise<string>;
+    on(event: string, listener: (...args: any[]) => void): void;
+    off(event: string, listener: (...args: any[]) => void): void;
     destroy(): void;
 }

package/esm/runtime/Infographic.js

@@ -1,14 +1,28 @@
 import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
+import EventEmitter from 'eventemitter3';
+import { cloneDeep } from 'lodash-es';
+import { Editor } from '../editor';
 import { exportToPNGString, exportToSVGString, } from '../exporter';
 import { renderSVG } from '../jsx';
 import { parseOptions, } from '../options';
 import { Renderer } from '../renderer';
 import { getTypes, parseSVG } from '../utils';
+import { DEFAULT_OPTIONS } from './options';
+import { mergeOptions } from './utils';
 export class Infographic {
     constructor(options) {
-        this.options = options;
+        this.rendered = false;
+        this.emitter = new EventEmitter();
         this.node = null;
-        this.parsedOptions = parseOptions(this.options);
+        this.options = {
+            ...options,
+            data: cloneDeep(options.data),
+            elements: cloneDeep(options.elements || []),
+        };
+        this.parsedOptions = parseOptions(mergeOptions(DEFAULT_OPTIONS, this.options));
+    }
+    getOptions() {
+        return this.options;
     }
     /**
      * Render the infographic into the container
@@ -19,6 +33,11 @@ export class Infographic {
         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 });
     }
     /**
      * Compose the SVG template
@@ -58,8 +77,18 @@ export class Infographic {
         }
         return await exportToPNGString(this.node, options);
     }
+    on(event, listener) {
+        this.emitter.on(event, listener);
+    }
+    off(event, listener) {
+        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/esm/runtime/options.d.ts

@@ -0,0 +1,2 @@
+import { InfographicOptions } from '../options';
+export declare const DEFAULT_OPTIONS: Partial<InfographicOptions>;

package/esm/runtime/options.js

@@ -0,0 +1,24 @@
+import { BrushSelect, ClickSelect, DblClickEditText, DragElement, EditBar, HotkeyHistory, ResizeElement, SelectHighlight, ZoomWheel, } from '../editor';
+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 = {
+    padding: 20,
+    theme: 'light',
+    themeConfig: {
+        palette: 'antv',
+    },
+    get plugins() {
+        return createDefaultPlugins();
+    },
+    get interactions() {
+        return createDefaultInteractions();
+    },
+};

package/esm/runtime/utils.d.ts

@@ -0,0 +1,2 @@
+import { InfographicOptions } from '../options/types';
+export declare function mergeOptions(object: Partial<InfographicOptions>, source: Partial<InfographicOptions>): InfographicOptions;

package/esm/runtime/utils.js

@@ -0,0 +1,18 @@
+export function mergeOptions(object, source) {
+    return {
+        ...object,
+        ...source,
+        design: {
+            ...object.design,
+            ...source.design,
+        },
+        themeConfig: {
+            ...object.themeConfig,
+            ...source.themeConfig,
+        },
+        svg: {
+            ...object.svg,
+            ...source.svg,
+        },
+    };
+}

package/esm/templates/built-in.js

@@ -1,3 +1,4 @@
+import { hierarchyMindmapTemplates } from './hierarchy-mindmap';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { registerTemplate } from './registry';
 const BUILT_IN_TEMPLATES = {
@@ -207,7 +208,7 @@ const BUILT_IN_TEMPLATES = {
         design: {
             title: 'default',
             structure: { type: 'sequence-timeline', gap: 20 },
-            items: [{ type: 'simple' }],
+            items: [{ type: 'simple', positionV: 'middle' }],
         },
     },
     'sequence-cylinders-3d-simple': {
@@ -689,7 +690,117 @@ const BUILT_IN_TEMPLATES = {
             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]) => {
     registerTemplate(name, options);

package/esm/templates/hierarchy-mindmap.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateOptions } from '../designs';
+export declare const hierarchyMindmapTemplates: Record<string, TemplateOptions>;