@antv/infographic 0.1.2 → 0.1.3

package/esm/templates/hierarchy-mindmap.js

@@ -0,0 +1,61 @@
+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,
+        },
+    },
+];
+export const 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/esm/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/esm/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/esm/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/esm/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/esm/types/event.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/{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/esm/types/text.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/attrs.d.ts

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

package/esm/utils/attrs.js

@@ -0,0 +1,9 @@
+export 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/esm/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/esm/utils/element.js

@@ -0,0 +1,13 @@
+import { isIconElement } from './recognizer';
+export function setElementRole(element, role) {
+    element.setAttribute('data-element-type', role);
+}
+export function getElementByRole(element, role) {
+    return element.querySelector(`[data-element-type="${role}"]`);
+}
+export function getElementRole(element) {
+    if (isIconElement(element))
+        return "item-icon" /* ElementTypeEnum.ItemIcon */;
+    return (element.getAttribute('data-element-type') ||
+        "unknown" /* ElementTypeEnum.Unknown */);
+}

package/esm/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/esm/utils/icon.js

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

package/esm/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/esm/utils/index.js

@@ -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/esm/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/esm/utils/measure-text.js

@@ -0,0 +1,22 @@
+import { measureText as measure, registerFont } from 'measury';
+import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
+import { DEFAULT_FONT } from '../renderer';
+registerFont(AlibabaPuHuiTi);
+export function measureText(text = '', attrs) {
+    if (attrs.width && attrs.height) {
+        return { width: attrs.width, height: attrs.height };
+    }
+    let width = 0;
+    let height = 0;
+    const { fontFamily = DEFAULT_FONT, fontSize = 14, fontWeight = 'normal', lineHeight = 1.4, } = attrs;
+    const metrics = measure(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/esm/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/esm/utils/recognizer.js

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

package/esm/utils/style.d.ts

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

package/esm/utils/style.js

@@ -0,0 +1,8 @@
+export 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/esm/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>;