@antv/infographic 0.1.2 → 0.1.3

package/lib/templates/hierarchy-mindmap.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hierarchyMindmapTemplates = void 0;
+const BRANCH_GRADIENT = {
+    edgeType: 'curved',
+    edgeColorMode: 'gradient',
+    edgeWidth: 2,
+    colorMode: 'branch',
+    levelGap: 80,
+    nodeGap: 18,
+};
+const LEVEL_GRADIENT = {
+    edgeType: 'curved',
+    edgeWidth: 2,
+    edgeColorMode: 'gradient',
+    colorMode: 'level',
+    levelGap: 80,
+    nodeGap: 18,
+};
+const LINED_PALETTE = {
+    type: 'lined-text',
+    usePaletteColor: true,
+    showUnderline: true,
+    underlineThickness: 2,
+};
+const CAPSULE = {
+    type: 'capsule-item',
+};
+const CIRCULAR_PROGRESS = {
+    type: 'circular-progress',
+};
+const ROUNDED_RECT_NODE = {
+    type: 'rounded-rect-node',
+    positionH: 'center',
+};
+const COMPACT_CARD = {
+    type: 'compact-card',
+};
+const createStructure = (gradient, edgeAlign) => ({
+    type: 'hierarchy-mindmap',
+    ...(edgeAlign !== undefined ? { edgeAlign } : {}),
+    ...gradient,
+});
+const createTemplate = (key, gradient, item, edgeAlign) => [
+    key,
+    {
+        design: {
+            structure: createStructure(gradient, edgeAlign),
+            item,
+        },
+    },
+];
+exports.hierarchyMindmapTemplates = Object.fromEntries([
+    createTemplate('hierarchy-mindmap-branch-gradient-lined-palette', BRANCH_GRADIENT, LINED_PALETTE, 'bottom'),
+    createTemplate('hierarchy-mindmap-level-gradient-lined-palette', LEVEL_GRADIENT, LINED_PALETTE, 'bottom'),
+    createTemplate('hierarchy-mindmap-branch-gradient-capsule-item', BRANCH_GRADIENT, CAPSULE),
+    createTemplate('hierarchy-mindmap-level-gradient-capsule-item', LEVEL_GRADIENT, CAPSULE),
+    createTemplate('hierarchy-mindmap-branch-gradient-circle-progress', BRANCH_GRADIENT, CIRCULAR_PROGRESS, 0.4),
+    createTemplate('hierarchy-mindmap-level-gradient-circle-progress', LEVEL_GRADIENT, CIRCULAR_PROGRESS, 0.4),
+    createTemplate('hierarchy-mindmap-branch-gradient-rounded-rect', BRANCH_GRADIENT, ROUNDED_RECT_NODE),
+    createTemplate('hierarchy-mindmap-level-gradient-rounded-rect', LEVEL_GRADIENT, ROUNDED_RECT_NODE),
+    createTemplate('hierarchy-mindmap-branch-gradient-compact-card', BRANCH_GRADIENT, COMPACT_CARD),
+    createTemplate('hierarchy-mindmap-level-gradient-compact-card', LEVEL_GRADIENT, COMPACT_CARD),
+]);

package/lib/types/attrs.d.ts

@@ -1,3 +1,4 @@
+import { TextHorizontalAlign, TextVerticalAlign } from './text';
 export type NumericalValue = number | string | undefined;
 export type TextualValue = string | undefined;
 export type BaseAttributes = {
@@ -8,25 +9,24 @@ export type BaseAttributes = {
     'stroke-opacity'?: NumericalValue;
 };
 export type IconAttributes = {
-    id?: NumericalValue;
-    class?: NumericalValue;
+    id?: TextualValue;
+    class?: TextualValue;
     x?: NumericalValue;
     y?: NumericalValue;
     width?: NumericalValue;
     height?: NumericalValue;
-    href?: NumericalValue;
-    fill?: NumericalValue;
+    href?: TextualValue;
+    fill?: TextualValue;
     'fill-opacity'?: NumericalValue;
     opacity?: NumericalValue;
 };
 export type TextAttributes = {
-    id?: NumericalValue;
-    class?: NumericalValue;
+    id?: TextualValue;
+    class?: TextualValue;
     x?: NumericalValue;
     y?: NumericalValue;
     width?: NumericalValue;
     height?: NumericalValue;
-    'text-alignment'?: TextualValue;
     'font-family'?: TextualValue;
     'font-size'?: NumericalValue;
     'font-weight'?: NumericalValue;
@@ -34,11 +34,13 @@ export type TextAttributes = {
     'font-variant'?: NumericalValue;
     'letter-spacing'?: NumericalValue;
     'line-height'?: NumericalValue;
-    fill?: NumericalValue;
-    stroke?: NumericalValue;
+    fill?: TextualValue;
+    stroke?: TextualValue;
     'stroke-width'?: NumericalValue;
-    'text-anchor'?: NumericalValue;
-    'dominant-baseline'?: NumericalValue;
+    'text-anchor'?: TextualValue;
+    'dominant-baseline'?: TextualValue;
+    'data-horizontal-align'?: TextHorizontalAlign;
+    'data-vertical-align'?: TextVerticalAlign;
 };
 export type ShapeAttributes = {
     opacity?: NumericalValue;
@@ -47,8 +49,8 @@ export type ShapeAttributes = {
     'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined;
     stroke?: TextualValue;
     'stroke-width'?: NumericalValue;
-    'stroke-linecap'?: NumericalValue;
-    'stroke-linejoin'?: NumericalValue;
+    'stroke-linecap'?: TextualValue;
+    'stroke-linejoin'?: TextualValue;
     'stroke-dasharray'?: NumericalValue;
     'stroke-dashoffset'?: NumericalValue;
     'stroke-opacity'?: NumericalValue;

package/lib/types/data.d.ts

@@ -6,6 +6,7 @@ export interface ItemDatum {
     value?: number;
     illus?: string | ResourceConfig;
     children?: ItemDatum[];
+    attributes?: Record<string, object>;
     [key: string]: any;
 }
 export interface Data {
@@ -13,5 +14,6 @@ export interface Data {
     desc?: string;
     items: ItemDatum[];
     illus?: Record<string, string | ResourceConfig>;
+    attributes?: Record<string, object>;
     [key: string]: any;
 }

package/lib/types/element.d.ts

@@ -1,6 +1,6 @@
 export type GeometryElement = SVGGraphicsElement;
 export type TextElement = SVGForeignObjectElement;
-export type IconElement = SVGUseElement;
+export type IconElement = SVGUseElement | SVGGElement;
 export type ButtonElement = SVGUseElement;
 export type IllusElement = SVGGElement;
 export type IllusEntity = SVGUseElement;

package/lib/types/event.d.ts

@@ -0,0 +1,6 @@
+export interface IEventEmitter {
+    on(event: string | symbol, listener: (...args: any[]) => void): this;
+    emit(event: string | symbol, ...args: any[]): boolean;
+    off(event: string | symbol, listener: (...args: any[]) => void): this;
+    removeAllListeners(event?: string | symbol): this;
+}

package/lib/types/event.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/types/index.d.ts

@@ -1,6 +1,8 @@
 export type * from './attrs';
 export type * from './data';
 export type * from './element';
+export type * from './event';
 export type * from './font';
 export type * from './padding';
 export type * from './resource';
+export type * from './text';

package/lib/{renderer/types → types}/text.d.ts

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

package/lib/types/text.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/attrs.d.ts

@@ -0,0 +1 @@
+export declare function getCommonAttrs<T extends Record<string, any>>(attrs: T[]): T;

package/lib/utils/attrs.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommonAttrs = getCommonAttrs;
+function getCommonAttrs(attrs) {
+    return Object.keys(attrs[0]).reduce((acc, key) => {
+        const k = key;
+        if (attrs.every((attr) => attr[k] === attrs[0][k])) {
+            acc[k] = attrs[0][k];
+        }
+        return acc;
+    }, {});
+}

package/lib/utils/element.d.ts

@@ -0,0 +1,4 @@
+import { ElementTypeEnum } from '../constants';
+export declare function setElementRole(element: SVGElement | HTMLElement, role: string): void;
+export declare function getElementByRole(element: SVGElement | HTMLElement, role: string): Element | null;
+export declare function getElementRole(element: SVGElement | HTMLElement): ElementTypeEnum;

package/lib/utils/element.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setElementRole = setElementRole;
+exports.getElementByRole = getElementByRole;
+exports.getElementRole = getElementRole;
+const recognizer_1 = require("./recognizer");
+function setElementRole(element, role) {
+    element.setAttribute('data-element-type', role);
+}
+function getElementByRole(element, role) {
+    return element.querySelector(`[data-element-type="${role}"]`);
+}
+function getElementRole(element) {
+    if ((0, recognizer_1.isIconElement)(element))
+        return "item-icon" /* ElementTypeEnum.ItemIcon */;
+    return (element.getAttribute('data-element-type') ||
+        "unknown" /* ElementTypeEnum.Unknown */);
+}

package/lib/utils/icon.d.ts

@@ -1,6 +1,8 @@
 import { ResourceConfig } from '../resource';
 import type { IconAttributes, IconElement } from '../types';
+export declare function getIconResourceConfig(icon: IconElement): string | ResourceConfig | null;
 export declare function createIconElement(value: string | ResourceConfig, attrs?: IconAttributes): IconElement;
-export declare function updateIconElement(icon: IconElement, name?: string, attrs?: IconAttributes): void;
-export declare function getIconElement(element: SVGElement): IconElement | null;
-export declare function isIconElement(element: SVGElement): element is IconElement;
+export declare function applyIconColor(icon: IconElement): void;
+export declare function getIconEntity(icon: IconElement): SVGUseElement | null;
+export declare function getIconAttrs(icon: IconElement): IconAttributes;
+export declare function updateIconElement(icon: IconElement, value?: string | ResourceConfig, attrs?: IconAttributes): void;

package/lib/utils/icon.js

@@ -1,40 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconResourceConfig = getIconResourceConfig;
 exports.createIconElement = createIconElement;
+exports.applyIconColor = applyIconColor;
+exports.getIconEntity = getIconEntity;
+exports.getIconAttrs = getIconAttrs;
 exports.updateIconElement = updateIconElement;
-exports.getIconElement = getIconElement;
-exports.isIconElement = isIconElement;
 const resource_1 = require("../resource");
 const svg_1 = require("./svg");
+const ICON_RESOURCE_CACHE = new WeakMap();
+function getIconResourceConfig(icon) {
+    return ICON_RESOURCE_CACHE.get(icon) || null;
+}
 function createIconElement(value, attrs = {}) {
     const icon = (0, svg_1.createElement)('use', {
-        'data-element-type': "icon" /* ElementTypeEnum.Icon */,
         ...attrs,
         href: (0, resource_1.getResourceHref)(value),
     });
     applyIconColor(icon);
+    ICON_RESOURCE_CACHE.set(icon, value);
     return icon;
 }
-function updateIconElement(icon, name, attrs) {
-    if (name)
-        (0, svg_1.setAttributes)(icon, { href: (0, resource_1.getResourceHref)(name) });
-    if (attrs)
-        (0, svg_1.setAttributes)(icon, attrs);
-    applyIconColor(icon);
+function applyIconColor(icon) {
+    const { stroke, fill } = (0, svg_1.getAttributes)(icon, ['fill', 'stroke']);
+    icon.style.color = fill || stroke || 'currentColor';
 }
-function getIconElement(element) {
-    if (!isIconElement(element))
-        return null;
-    if (element.tagName === 'use') {
-        return element;
+function getIconEntity(icon) {
+    if (icon.tagName === 'use') {
+        return icon;
     }
-    return element.querySelector(`use[data-element-type="${"icon" /* ElementTypeEnum.Icon */}"]`);
+    return icon.querySelector('use');
 }
-function isIconElement(element) {
-    return (element?.getAttribute('data-element-type') === "icon" /* ElementTypeEnum.Icon */ ||
-        element?.getAttribute('data-element-type') === "icon-group" /* ElementTypeEnum.IconGroup */);
+function getIconAttrs(icon) {
+    const entity = getIconEntity(icon);
+    if (!entity)
+        return {};
+    const attrs = (0, svg_1.getAttributes)(entity, [
+        'width',
+        'height',
+        'x',
+        'y',
+        'width',
+        'height',
+        'fill',
+        'fill-opacity',
+        'stroke',
+        'opacity',
+    ]);
+    return attrs;
 }
-function applyIconColor(icon) {
-    const { stroke, fill } = (0, svg_1.getAttributes)(icon, ['fill', 'stroke']);
-    icon.style.color = fill || stroke || 'currentColor';
+function updateIconElement(icon, value, attrs) {
+    const entity = getIconEntity(icon);
+    if (!entity)
+        return;
+    if (value)
+        (0, svg_1.setAttributes)(entity, { href: (0, resource_1.getResourceHref)(value) });
+    if (attrs)
+        (0, svg_1.setAttributes)(entity, attrs);
+    applyIconColor(entity);
 }

package/lib/utils/index.d.ts

@@ -1,12 +1,17 @@
+export * from './attrs';
 export * from './color';
 export * from './data';
+export * from './element';
 export * from './font';
 export * from './get-types';
+export * from './hash';
 export * from './icon';
 export * from './item';
 export * from './join';
+export * from './measure-text';
 export * from './padding';
 export * from './recognizer';
+export * from './style';
 export * from './svg';
 export * from './text';
 export * from './uuid';

package/lib/utils/index.js

@@ -14,15 +14,20 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./attrs"), exports);
 __exportStar(require("./color"), exports);
 __exportStar(require("./data"), exports);
+__exportStar(require("./element"), exports);
 __exportStar(require("./font"), exports);
 __exportStar(require("./get-types"), exports);
+__exportStar(require("./hash"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./item"), exports);
 __exportStar(require("./join"), exports);
+__exportStar(require("./measure-text"), exports);
 __exportStar(require("./padding"), exports);
 __exportStar(require("./recognizer"), exports);
+__exportStar(require("./style"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./uuid"), exports);

package/lib/utils/measure-text.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '../jsx';
+export declare function measureText(text: string | number | undefined, attrs: TextProps): {
+    width: number;
+    height: number;
+};

package/lib/utils/measure-text.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureText = measureText;
+const measury_1 = require("measury");
+const AlibabaPuHuiTi_Regular_1 = __importDefault(require("measury/fonts/AlibabaPuHuiTi-Regular"));
+const renderer_1 = require("../renderer");
+(0, measury_1.registerFont)(AlibabaPuHuiTi_Regular_1.default);
+function measureText(text = '', attrs) {
+    if (attrs.width && attrs.height) {
+        return { width: attrs.width, height: attrs.height };
+    }
+    let width = 0;
+    let height = 0;
+    const { fontFamily = renderer_1.DEFAULT_FONT, fontSize = 14, fontWeight = 'normal', lineHeight = 1.4, } = attrs;
+    const metrics = (0, measury_1.measureText)(text.toString(), {
+        fontFamily,
+        fontSize: +fontSize,
+        fontWeight,
+        lineHeight,
+    });
+    // 额外添加 1% 宽高
+    width || (width = Math.ceil(metrics.width * 1.01));
+    height || (height = Math.ceil(metrics.height * 1.01));
+    return { width, height };
+}

package/lib/utils/recognizer.d.ts

@@ -1,3 +1,4 @@
+import { Element, GeometryElement, TextElement } from '../types';
 export declare const isSVG: (element: any) => element is SVGSVGElement;
 export declare const isTitle: (element: SVGElement) => boolean;
 export declare const isDesc: (element: SVGElement) => boolean;
@@ -7,6 +8,7 @@ export declare const isIllus: (element: SVGElement) => boolean;
 export declare const isText: (element: SVGElement) => element is SVGTextElement;
 export declare const isGroup: (element: SVGElement) => element is SVGGElement;
 export declare const isItemIcon: (element: SVGElement) => boolean;
+export declare const isItemIconGroup: (element: SVGElement) => boolean;
 export declare const isItemLabel: (element: SVGElement) => boolean;
 export declare const isItemDesc: (element: SVGElement) => boolean;
 export declare const isItemValue: (element: SVGElement) => boolean;
@@ -15,3 +17,16 @@ export declare const isEditArea: (element: SVGElement) => boolean;
 export declare const isBtnsGroup: (element: SVGElement) => boolean;
 export declare const isBtnAdd: (element: SVGElement) => boolean;
 export declare const isBtnRemove: (element: SVGElement) => boolean;
+export declare const isRoughElement: (element: SVGElement) => boolean;
+export declare const isRoughVolume: (element: SVGElement) => boolean;
+export declare function isForeignObjectElement(element: any): element is SVGForeignObjectElement;
+export declare function isTextEntity(element: any): element is HTMLSpanElement;
+export declare function isEditableText(node: SVGElement): node is TextElement;
+export declare function isEditingText(element: SVGElement | null): boolean;
+export declare function isGeometryElement(element: Element): element is GeometryElement;
+export declare function isIconElement(element: SVGElement): boolean;
+/**
+ * 对于编辑器插件、交互挂载的DOM元素，识别其是否为信息图组件的一部分
+ * 在元素中操作时不会触发编辑器的取消激活行为
+ */
+export declare function isInfographicComponent(element: HTMLElement): boolean;

package/lib/utils/recognizer.js

@@ -1,8 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBtnRemove = exports.isBtnAdd = exports.isBtnsGroup = exports.isEditArea = exports.isItemIllus = exports.isItemValue = exports.isItemDesc = exports.isItemLabel = exports.isItemIcon = exports.isGroup = exports.isText = exports.isIllus = exports.isShapesGroup = exports.isShape = exports.isDesc = exports.isTitle = exports.isSVG = void 0;
+exports.isRoughVolume = exports.isRoughElement = exports.isBtnRemove = exports.isBtnAdd = exports.isBtnsGroup = exports.isEditArea = exports.isItemIllus = exports.isItemValue = exports.isItemDesc = exports.isItemLabel = exports.isItemIconGroup = exports.isItemIcon = exports.isGroup = exports.isText = exports.isIllus = exports.isShapesGroup = exports.isShape = exports.isDesc = exports.isTitle = exports.isSVG = void 0;
+exports.isForeignObjectElement = isForeignObjectElement;
+exports.isTextEntity = isTextEntity;
+exports.isEditableText = isEditableText;
+exports.isEditingText = isEditingText;
+exports.isGeometryElement = isGeometryElement;
+exports.isIconElement = isIconElement;
+exports.isInfographicComponent = isInfographicComponent;
+const constants_1 = require("../constants");
+const element_1 = require("./element");
+const text_1 = require("./text");
 const is = (element, role) => {
-    return element.dataset.elementType === role;
+    return element?.dataset?.elementType === role;
 };
 const isSVG = (element) => element instanceof SVGElement && element.tagName === 'svg';
 exports.isSVG = isSVG;
@@ -22,6 +32,8 @@ const isGroup = (element) => element instanceof SVGElement && element.tagName ==
 exports.isGroup = isGroup;
 const isItemIcon = (element) => is(element, 'item-icon');
 exports.isItemIcon = isItemIcon;
+const isItemIconGroup = (element) => is(element, 'item-icon-group');
+exports.isItemIconGroup = isItemIconGroup;
 const isItemLabel = (element) => is(element, 'item-label');
 exports.isItemLabel = isItemLabel;
 const isItemDesc = (element) => is(element, 'item-desc');
@@ -38,3 +50,61 @@ const isBtnAdd = (element) => is(element, 'btn-add');
 exports.isBtnAdd = isBtnAdd;
 const isBtnRemove = (element) => is(element, 'btn-remove');
 exports.isBtnRemove = isBtnRemove;
+const isRoughElement = (element) => is(element, 'rough-element');
+exports.isRoughElement = isRoughElement;
+const isRoughVolume = (element) => is(element, 'rough-volume');
+exports.isRoughVolume = isRoughVolume;
+function isForeignObjectElement(element) {
+    return element.tagName === 'foreignObject';
+}
+function isTextEntity(element) {
+    return element.tagName === 'SPAN';
+}
+function isEditableText(node) {
+    const role = (0, element_1.getElementRole)(node);
+    return [
+        "title" /* ElementTypeEnum.Title */,
+        "desc" /* ElementTypeEnum.Desc */,
+        "item-label" /* ElementTypeEnum.ItemLabel */,
+        "item-desc" /* ElementTypeEnum.ItemDesc */,
+    ].includes(role);
+}
+function isEditingText(element) {
+    if (!element)
+        return false;
+    if (!isEditableText(element))
+        return false;
+    const span = (0, text_1.getTextEntity)(element);
+    if (!span)
+        return false;
+    return span.hasAttribute('contenteditable');
+}
+function isGeometryElement(element) {
+    const tagName = element.tagName.toLowerCase();
+    return [
+        'rect',
+        'circle',
+        'ellipse',
+        'line',
+        'polygon',
+        'polyline',
+        'path',
+    ].includes(tagName);
+}
+function isIconElement(element) {
+    return (0, exports.isItemIcon)(element) || (0, exports.isItemIconGroup)(element);
+}
+/**
+ * 对于编辑器插件、交互挂载的DOM元素，识别其是否为信息图组件的一部分
+ * 在元素中操作时不会触发编辑器的取消激活行为
+ */
+function isInfographicComponent(element) {
+    let current = element;
+    while (current) {
+        if ((0, element_1.getElementByRole)(current, constants_1.COMPONENT_ROLE)) {
+            return true;
+        }
+        current = current.parentElement;
+    }
+    return false;
+}

package/lib/utils/style.d.ts

@@ -0,0 +1 @@
+export declare function injectStyleOnce(id: string, styles: string): void;

package/lib/utils/style.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectStyleOnce = injectStyleOnce;
+function injectStyleOnce(id, styles) {
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = styles;
+    document.head.appendChild(style);
+}

package/lib/utils/text.d.ts

@@ -1,2 +1,9 @@
+import { TextProps } from '../editor';
 import type { TextAttributes, TextElement } from '../types';
+export declare function getTextEntity(text: SVGElement): HTMLSpanElement | null;
 export declare function createTextElement(textContent: string, attributes: TextAttributes): TextElement;
+export declare function updateTextElement(text: TextElement, props: Partial<TextProps>): void;
+export declare function getTextStyle(attributes: TextAttributes): Record<string, any>;
+export declare function getTextContent(text: TextElement): string;
+export declare function setTextContent(text: TextElement, content: string): void;
+export declare function getTextElementProps(text: TextElement): Partial<TextProps>;