@antv/infographic 0.1.2 → 0.1.3

package/lib/jsx/components/Text.js

@@ -1,59 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = Text;
-const TEXT_ANCHOR_MAP = {
-    center: 'middle',
-    right: 'end',
-    left: 'start',
-};
+const utils_1 = require("../../utils");
 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 = (0, utils_1.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,
@@ -65,40 +71,32 @@ 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/lib/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/lib/renderer/composites/background.js

@@ -6,7 +6,7 @@ function renderBackground(svg, background) {
     const container = svg.parentElement;
     if (container)
         container.style.backgroundColor = background || 'none';
-    const element = svg.querySelector('#background');
+    const element = (0, utils_1.getElementByRole)(svg, "background" /* ElementTypeEnum.Background */);
     if (!background) {
         return element?.remove();
     }

package/lib/renderer/composites/button.js

@@ -12,8 +12,10 @@ function renderButtonsGroup(svg, group) {
     addBtns.forEach(renderAddButton);
     removeBtns.forEach(renderRemoveButton);
 }
+const btnIconDefRole = 'btn-icon-defs';
 function defineButtonIcon(svg) {
-    const defs = (0, utils_1.createElement)('defs', { id: 'btn-icon-defs' });
+    const defs = (0, utils_1.createElement)('defs');
+    (0, utils_1.setElementRole)(defs, btnIconDefRole);
     const addIconSymbol = (0, utils_1.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"
@@ -39,7 +41,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/lib/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/lib/renderer/composites/icon.js

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

package/lib/renderer/composites/text.js

@@ -54,7 +54,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 = (0, utils_1.createTextElement)(textContent, attributes);
     return element;

package/lib/renderer/renderer.js

@@ -112,6 +112,7 @@ function fill(svg, options) {
             return (0, composites_1.renderStaticShape)(element, options);
         }
     });
+    (0, composites_1.renderSVG)(svg, options);
 }
 function setSVG(svg, options) {
     const { width, height } = options;
@@ -130,7 +131,7 @@ function setSVG(svg, options) {
     (0, utils_1.setAttributes)(svg, attributes);
 }
 function setView(svg, options) {
-    const { padding = 20, viewBox } = options;
+    const { padding = 0, viewBox } = options;
     if (viewBox) {
         svg.setAttribute('viewBox', viewBox);
     }

package/lib/renderer/stylize/rough.js

@@ -27,22 +27,18 @@ 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/lib/renderer/types/index.d.ts

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

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

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

package/lib/resource/utils/index.js

@@ -15,6 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./data-uri"), exports);
-__exportStar(require("./hash"), exports);
 __exportStar(require("./parser"), exports);
 __exportStar(require("./ref"), exports);

package/lib/resource/utils/ref.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getResourceId = getResourceId;
 exports.getResourceHref = getResourceHref;
+const utils_1 = require("../../utils");
 const data_uri_1 = require("./data-uri");
-const hash_1 = require("./hash");
 function getResourceId(config) {
     const cfg = typeof config === 'string' ? (0, data_uri_1.parseDataURI)(config) : config;
     if (!cfg)
         return null;
-    return 'rsc-' + (0, hash_1.getSimpleHash)(JSON.stringify(cfg));
+    return 'rsc-' + (0, utils_1.getSimpleHash)(JSON.stringify(cfg));
 }
 function getResourceHref(config) {
     const id = getResourceId(config);

package/lib/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/lib/runtime/Infographic.js

@@ -1,17 +1,34 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Infographic = void 0;
 const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const eventemitter3_1 = __importDefault(require("eventemitter3"));
+const lodash_es_1 = require("lodash-es");
+const editor_1 = require("../editor");
 const exporter_1 = require("../exporter");
 const jsx_1 = require("../jsx");
 const options_1 = require("../options");
 const renderer_1 = require("../renderer");
 const utils_1 = require("../utils");
+const options_2 = require("./options");
+const utils_2 = require("./utils");
 class Infographic {
     constructor(options) {
-        this.options = options;
+        this.rendered = false;
+        this.emitter = new eventemitter3_1.default();
         this.node = null;
-        this.parsedOptions = (0, options_1.parseOptions)(this.options);
+        this.options = {
+            ...options,
+            data: (0, lodash_es_1.cloneDeep)(options.data),
+            elements: (0, lodash_es_1.cloneDeep)(options.elements || []),
+        };
+        this.parsedOptions = (0, options_1.parseOptions)((0, utils_2.mergeOptions)(options_2.DEFAULT_OPTIONS, this.options));
+    }
+    getOptions() {
+        return this.options;
     }
     /**
      * Render the infographic into the container
@@ -22,6 +39,11 @@ class Infographic {
         const renderer = new renderer_1.Renderer(this.parsedOptions, template);
         this.node = renderer.render();
         container.replaceChildren(this.node);
+        if (this.options.editable) {
+            this.editor = new editor_1.Editor(this.emitter, this.node, this.parsedOptions);
+        }
+        this.rendered = true;
+        this.emitter.emit('rendered', { node: this.node, options: this.options });
     }
     /**
      * Compose the SVG template
@@ -61,9 +83,19 @@ class Infographic {
         }
         return await (0, exporter_1.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();
     }
 }
 exports.Infographic = Infographic;

package/lib/runtime/options.d.ts

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

package/lib/runtime/options.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_OPTIONS = void 0;
+const editor_1 = require("../editor");
+const createDefaultPlugins = () => [new editor_1.EditBar(), new editor_1.ResizeElement()];
+const createDefaultInteractions = () => [
+    new editor_1.DblClickEditText(),
+    new editor_1.BrushSelect(),
+    new editor_1.ClickSelect(),
+    new editor_1.DragElement(),
+    new editor_1.HotkeyHistory(),
+    new editor_1.ZoomWheel(),
+    new editor_1.SelectHighlight(),
+];
+exports.DEFAULT_OPTIONS = {
+    padding: 20,
+    theme: 'light',
+    themeConfig: {
+        palette: 'antv',
+    },
+    get plugins() {
+        return createDefaultPlugins();
+    },
+    get interactions() {
+        return createDefaultInteractions();
+    },
+};

package/lib/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/lib/runtime/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOptions = mergeOptions;
+function mergeOptions(object, source) {
+    return {
+        ...object,
+        ...source,
+        design: {
+            ...object.design,
+            ...source.design,
+        },
+        themeConfig: {
+            ...object.themeConfig,
+            ...source.themeConfig,
+        },
+        svg: {
+            ...object.svg,
+            ...source.svg,
+        },
+    };
+}

package/lib/templates/built-in.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const hierarchy_mindmap_1 = require("./hierarchy-mindmap");
 const hierarchy_tree_1 = require("./hierarchy-tree");
 const registry_1 = require("./registry");
 const BUILT_IN_TEMPLATES = {
@@ -209,7 +210,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': {
@@ -691,7 +692,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',
+                },
+            ],
+        },
+    },
     ...hierarchy_tree_1.hierarchyTreeTemplates,
+    ...hierarchy_mindmap_1.hierarchyMindmapTemplates,
 };
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {
     (0, registry_1.registerTemplate)(name, options);

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

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