@antv/infographic 0.0.1-beta.1

package/esm/designs/structures/sequence-zigzag-steps.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Defs, Ellipse, getElementBounds, Group, Path, } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemIcon, ItemsGroup, } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+// W 型路径参数
+const DX = 240;
+const DY = 130;
+const ITEM_TO_PATH_GAP = 105;
+// W 型路径宽度
+const W_PATH_W = 12;
+// 光晕尺寸 (Ellipse W/H)
+const GLOW_W = 120; // 椭圆宽度 (水平对角线)
+const GLOW_H = 50; // 椭圆高度 (垂直对角线)
+const GLOW_OPACITY = 0.6; // 控制光晕的透明度，实现颜色调淡
+// 原始装饰性 Path 的 D 属性
+const DECO_PATH_1 = 'M132.821 50.6599L87.6795 76.8925C78.0629 82.4807 62.4238 82.4807 52.7445 76.8925L7.30824 50.6599C2.43719 47.8482 0.00459679 44.1562 0.0152907 40.472L3.17695e-05 45.6925C-0.0101404 49.378 2.42245 53.0686 7.29298 55.8803L52.7289 82.1129C62.4094 87.7011 78.0485 87.7011 87.6652 82.1129L132.806 55.8803C137.583 53.1038 139.975 49.4705 139.986 45.832L140 40.6116C139.989 44.2501 137.598 47.8834 132.821 50.6599Z';
+const DECO_PATH_2 = 'M132.707 30.4224C142.386 36.0119 142.437 45.0704 132.821 50.6599L87.6795 76.8925C78.0629 82.4807 62.4238 82.4807 52.7445 76.8925L7.30825 50.6599C-2.37126 45.0717 -2.42225 36.0132 7.19414 30.4237L52.335 4.19115C61.9517 -1.39705 77.5908 -1.39705 87.2713 4.19115L132.707 30.4224Z';
+// 装饰元素的偏移量 - 改为正值
+const DECO_OFFSET_X = 70 + W_PATH_W / 2;
+const DECO_OFFSET_Y = 40 + W_PATH_W / 2;
+// 滤镜定义
+const GlowFilter = (_jsx("filter", { id: "sequence-zigzag-glow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15", result: "blur" }) }));
+export const SequenceZigzagSteps = (props) => {
+    const { Title, Item, data, options, dx = DX, dy = DY, iconSize = 30 } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = getColorPrimary(options);
+    if (items.length === 0) {
+        const btnAddElement = _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 });
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [_jsx(Defs, { children: GlowFilter }), titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0] }));
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const btnElements = [];
+    const itemElements = [];
+    const pathElements = [];
+    const decoElements = [];
+    const iconElements = [];
+    let currentX = 0;
+    let currentY = 0;
+    let pathD = '';
+    let minPathY = Infinity;
+    let maxItemY = -Infinity;
+    let minDecoX = Infinity;
+    let minDecoY = Infinity;
+    const pathPoints = [];
+    // Pass 1: 计算路径点和装饰元素的边界
+    items.forEach((item, index) => {
+        const cx = currentX;
+        const cy = currentY;
+        pathPoints.push({ x: cx, y: cy });
+        minPathY = Math.min(minPathY, cy);
+        // 计算装饰元素的位置
+        const decoX = cx - DECO_OFFSET_X;
+        const decoY = cy - DECO_OFFSET_Y;
+        minDecoX = Math.min(minDecoX, decoX);
+        minDecoY = Math.min(minDecoY, decoY);
+        const isPeak = index % 2 === 0;
+        if (index < items.length - 1) {
+            currentX += dx;
+            currentY = isPeak ? currentY + dy : currentY - dy;
+        }
+    });
+    // 计算偏移量以确保所有元素都在正坐标
+    const offsetX = Math.max(0, -minDecoX);
+    const offsetY = Math.max(0, -minDecoY);
+    currentX = 0;
+    currentY = 0;
+    // Pass 2: 放置元素，应用偏移量
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const pathPoint = pathPoints[index];
+        const cx = pathPoint.x + offsetX;
+        const cy = pathPoint.y + offsetY;
+        const currentColor = getPaletteColor(options, indexes);
+        // 装饰元素 - 确保坐标为正值
+        const decoX = Math.max(0, cx - DECO_OFFSET_X);
+        const decoY = Math.max(0, cy - DECO_OFFSET_Y);
+        const glowX = 10;
+        const glowY = GLOW_H + 10;
+        const { colorPrimaryBg } = getThemeColors({
+            colorPrimary: currentColor,
+        });
+        decoElements.push(_jsxs(Group, { x: decoX, y: decoY, id: `deco-group-${index}`, width: 140, height: 110, children: [_jsx(Ellipse, { x: glowX, y: glowY, width: GLOW_W, height: GLOW_H, fill: currentColor || colorPrimary, filter: "url(#sequence-zigzag-glow-filter)", opacity: GLOW_OPACITY }), _jsx(Path, { d: DECO_PATH_1, fill: currentColor || colorPrimary }), _jsx(Path, { d: DECO_PATH_2, fill: '#fff' }), _jsx(Path, { d: DECO_PATH_2, fill: colorPrimaryBg || colorPrimaryBg })] }));
+        // Icon 元素
+        if (item.icon) {
+            const iconX = Math.max(0, cx - iconSize / 2 - W_PATH_W / 2);
+            const iconY = Math.max(0, cy - iconSize / 2 - W_PATH_W / 2);
+            iconElements.push(_jsx(ItemIcon, { x: iconX, y: iconY, size: iconSize, indexes: indexes, fill: currentColor }));
+        }
+        // Item 元素和按钮
+        const itemX = cx - itemBounds.width / 2 - W_PATH_W / 2;
+        const itemY = Math.max(0, cy + ITEM_TO_PATH_GAP - W_PATH_W / 2);
+        maxItemY = Math.max(maxItemY, itemY + itemBounds.height);
+        if (index === 0) {
+            pathD = `M ${cx} ${cy}`;
+        }
+        else {
+            pathD += ` L ${cx} ${cy}`;
+        }
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY }));
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: Math.max(0, itemX + itemBounds.width - btnBounds.width / 2), y: Math.max(0, itemY + itemBounds.height - btnBounds.height / 2) }));
+        if (index < items.length - 1) {
+            const nextPoint = pathPoints[index + 1];
+            const nextCx = nextPoint.x + offsetX;
+            const nextCy = nextPoint.y + offsetY;
+            const btnAddX = Math.max(0, cx + (nextCx - cx) / 2 - btnBounds.width / 2);
+            const btnAddY = Math.max(0, cy + (nextCy - cy) / 2 - btnBounds.height / 2);
+            btnElements.push(_jsx(BtnAdd, { indexes: [index + 1], x: btnAddX, y: btnAddY }));
+        }
+        else {
+            btnElements.push(_jsx(BtnAdd, { indexes: [items.length], x: Math.max(0, itemX + itemBounds.width + dx / 4), y: Math.max(0, itemY + itemBounds.height / 2 - btnBounds.height / 2) }));
+        }
+    });
+    if (pathD) {
+        const finalX = (pathPoints[pathPoints.length - 1]?.x || 0) + offsetX;
+        pathElements.push(_jsx(Path, { d: pathD, stroke: "#f3f2f1", strokeWidth: W_PATH_W, fill: "none", width: finalX, height: maxItemY - Math.min(minPathY + offsetY, 0) }));
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [_jsx(Defs, { children: GlowFilter }), titleContent, _jsxs(Group, { x: 0, y: 0, children: [_jsx(Group, { children: [...pathElements, ...decoElements, ...iconElements] }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-zigzag-steps', {
+    component: SequenceZigzagSteps,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { ParsedInfographicOptions } from '../../options';
+import type { Data } from '../../types';
+import { TitleProps } from '../components';
+import type { BaseItemProps } from '../items';
+export interface BaseStructureProps {
+    Title?: ComponentType<Pick<TitleProps, 'title' | 'desc'>>;
+    Item: ComponentType<Omit<BaseItemProps, 'themeColors'> & Partial<Pick<BaseItemProps, 'themeColors'>>>;
+    Items: ComponentType<Omit<BaseItemProps, 'themeColors'>>[];
+    data: Data;
+    options: ParsedInfographicOptions;
+}
+export interface Structure {
+    component: ComponentType<BaseStructureProps>;
+    composites: string[];
+}
+export interface StructureOptions {
+    [key: string]: any;
+}

package/esm/designs/structures/types.js

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

package/esm/designs/title/index.d.ts

@@ -0,0 +1 @@
+export type * from './types';

package/esm/designs/title/index.js

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

package/esm/designs/title/types.d.ts

@@ -0,0 +1,4 @@
+export interface TitleOptions {
+    type: string;
+    [key: string]: any;
+}

package/esm/designs/title/types.js

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

package/esm/designs/types.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { Item, ItemOptions } from './items';
+import type { Structure, StructureOptions } from './structures';
+import { TitleOptions } from './title';
+export interface DesignOptions {
+    /** 结构 */
+    structure?: string | WithType<StructureOptions>;
+    /** 标题 */
+    title?: string | WithType<TitleOptions>;
+    /** 数据项 */
+    item?: string | WithType<ItemOptions>;
+    /** 针对层级布局，不同层级使用不同 item */
+    items?: (string | WithType<ItemOptions>)[];
+}
+export interface ParsedDesignsOptions {
+    structure: WithProps<Structure>;
+    title: {
+        component: ComponentType<any> | null;
+    };
+    item: WithProps<Item>;
+    items: WithProps<Item>[];
+}
+type WithType<T> = T & {
+    type: string;
+};
+type WithProps<T> = T & {
+    props?: any;
+};
+export {};

package/esm/designs/types.js

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

package/esm/designs/utils/color.d.ts

@@ -0,0 +1,8 @@
+import type { ParsedInfographicOptions } from '../../options';
+export declare function getColorPrimary(options: ParsedInfographicOptions): string;
+export declare function getPaletteColors(options: ParsedInfographicOptions): string[];
+export declare function getPaletteColor(options: ParsedInfographicOptions, indexes: number[]): string | undefined;
+export declare function getThemeColors(colors: {
+    colorPrimary?: string;
+    colorBg?: string;
+}, options?: ParsedInfographicOptions): import("../../themes").ThemeColors;

package/esm/designs/utils/color.js

@@ -0,0 +1,26 @@
+import { getPaletteColor as _getPaletteColor } from '../../renderer';
+import { generateThemeColors } from '../../themes';
+import { isDarkColor } from '../../utils';
+const DEFAULT_COLOR = '#1890FF';
+export function getColorPrimary(options) {
+    return options?.themeConfig?.colorPrimary || DEFAULT_COLOR;
+}
+export function getPaletteColors(options) {
+    const { themeConfig = {}, data } = options;
+    const { colorPrimary, palette } = themeConfig;
+    if (!palette || palette.length === 0) {
+        return Array(data?.items?.length || 1).fill(colorPrimary || DEFAULT_COLOR);
+    }
+    return data.items.map((_, i) => _getPaletteColor(palette, [i], data.items.length) || DEFAULT_COLOR);
+}
+export function getPaletteColor(options, indexes) {
+    return _getPaletteColor(options?.themeConfig?.palette, indexes, options.data?.items?.length);
+}
+export function getThemeColors(colors, options) {
+    const { colorBg = options?.themeConfig?.colorBg || 'white', colorPrimary = options ? getColorPrimary(options) : 'black', } = colors;
+    return generateThemeColors({
+        colorPrimary: colorPrimary,
+        isDarkMode: isDarkColor(colorBg),
+        colorBg: colorBg,
+    });
+}

package/esm/designs/utils/hierarchy-color.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 层级结构着色模式类型
+ */
+export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat';
+/**
+ * 层级节点信息接口
+ */
+export interface HierarchyNode {
+    /** 节点深度（层级），从 0 开始 */
+    depth: number;
+    /** 节点原始索引路径，如 [0, 1, 2] 表示根节点的第2个子节点的第3个子节点 */
+    originalIndexes: number[];
+    /** 节点在树中的扁平化序号（可选），用于 node-flat 模式 */
+    flatIndex?: number;
+}
+/**
+ * 根据层级着色模式获取节点的颜色索引
+ *
+ * @param node - 层级节点信息
+ * @param mode - 着色模式
+ * @returns 用于获取调色板颜色的索引数组
+ *
+ * @example
+ * ```typescript
+ * // 按层级着色
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'level');
+ * // 返回 [2]，表示使用第3个层级的颜色
+ *
+ * // 按分支着色
+ * const indexes = getHierarchyColorIndexes({ depth: 3, originalIndexes: [0, 1, 2, 0] }, 'branch');
+ * // 返回 [2]，表示继承第2个二级分支的颜色
+ *
+ * // 按节点着色（层级路径）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'node');
+ * // 返回 [0, 1, 2]，使用完整路径
+ *
+ * // 按节点着色（扁平序号）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2], flatIndex: 5 }, 'node-flat');
+ * // 返回 [5]，使用扁平化的序号
+ * ```
+ */
+export declare function getHierarchyColorIndexes(node: HierarchyNode, mode: HierarchyColorMode): number[];
+/**
+ * 从 d3 hierarchy 节点中提取层级节点信息
+ *
+ * @param d3Node - d3.hierarchy 生成的节点对象
+ * @returns 层级节点信息
+ *
+ * @example
+ * ```typescript
+ * const root = d3.hierarchy(data);
+ * const nodes = root.descendants();
+ *
+ * nodes.forEach(node => {
+ *   const hierarchyNode = extractHierarchyNode(node);
+ *   const colorIndexes = getHierarchyColorIndexes(hierarchyNode, 'branch');
+ *   const color = getPaletteColor(options, colorIndexes);
+ * });
+ * ```
+ */
+export declare function extractHierarchyNode(d3Node: any): HierarchyNode;

package/esm/designs/utils/hierarchy-color.js

@@ -0,0 +1,101 @@
+/**
+ * 根据层级着色模式获取节点的颜色索引
+ *
+ * @param node - 层级节点信息
+ * @param mode - 着色模式
+ * @returns 用于获取调色板颜色的索引数组
+ *
+ * @example
+ * ```typescript
+ * // 按层级着色
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'level');
+ * // 返回 [2]，表示使用第3个层级的颜色
+ *
+ * // 按分支着色
+ * const indexes = getHierarchyColorIndexes({ depth: 3, originalIndexes: [0, 1, 2, 0] }, 'branch');
+ * // 返回 [2]，表示继承第2个二级分支的颜色
+ *
+ * // 按节点着色（层级路径）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'node');
+ * // 返回 [0, 1, 2]，使用完整路径
+ *
+ * // 按节点着色（扁平序号）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2], flatIndex: 5 }, 'node-flat');
+ * // 返回 [5]，使用扁平化的序号
+ * ```
+ */
+export function getHierarchyColorIndexes(node, mode) {
+    const { depth, originalIndexes, flatIndex } = node;
+    switch (mode) {
+        case 'level':
+            // 按层级着色：同一层级使用相同颜色
+            // 层级 0 → 调色板[0]
+            // 层级 1 → 调色板[1]
+            // 层级 2 → 调色板[2]
+            // ...
+            return [depth];
+        case 'branch':
+            // 按分支着色：
+            // - 根节点（层级0）使用调色板[0]
+            // - 二级节点（层级1）及其子树按分支使用不同颜色
+            //   第1个二级分支 → 调色板[1]
+            //   第2个二级分支 → 调色板[2]
+            //   第3个二级分支 → 调色板[3]
+            //   ...
+            if (depth === 0) {
+                // 根节点固定使用颜色 0
+                return [0];
+            }
+            else if (depth === 1) {
+                // 二级节点使用其在根节点子节点中的索引 + 1
+                return [originalIndexes[1] + 1];
+            }
+            else {
+                // 更深层级的节点继承其二级祖先的颜色
+                // originalIndexes[1] 是二级祖先在根节点子节点中的索引
+                return [originalIndexes[1] + 1];
+            }
+        case 'node':
+            // 按节点着色：每个节点使用不同颜色
+            // 使用完整的节点索引路径作为颜色索引
+            // 这样可以确保每个节点获得独特的颜色
+            return originalIndexes;
+        case 'node-flat':
+            // 按节点扁平序号着色：使用树的遍历序号
+            // 如果提供了 flatIndex，直接使用
+            // 否则使用第一级索引作为后备方案
+            if (flatIndex !== undefined) {
+                return [flatIndex];
+            }
+            // 后备方案：如果没有提供 flatIndex，使用完整路径
+            console.warn('node-flat mode requires flatIndex in HierarchyNode, falling back to originalIndexes');
+            return originalIndexes;
+        default:
+            // 默认返回根节点颜色
+            return [0];
+    }
+}
+/**
+ * 从 d3 hierarchy 节点中提取层级节点信息
+ *
+ * @param d3Node - d3.hierarchy 生成的节点对象
+ * @returns 层级节点信息
+ *
+ * @example
+ * ```typescript
+ * const root = d3.hierarchy(data);
+ * const nodes = root.descendants();
+ *
+ * nodes.forEach(node => {
+ *   const hierarchyNode = extractHierarchyNode(node);
+ *   const colorIndexes = getHierarchyColorIndexes(hierarchyNode, 'branch');
+ *   const color = getPaletteColor(options, colorIndexes);
+ * });
+ * ```
+ */
+export function extractHierarchyNode(d3Node) {
+    return {
+        depth: d3Node.depth,
+        originalIndexes: d3Node.data._originalIndex || [],
+    };
+}

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

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './hierarchy-color';
+export * from './item';

package/esm/designs/utils/index.js

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './hierarchy-color';
+export * from './item';

package/esm/designs/utils/item.d.ts

@@ -0,0 +1,14 @@
+import type { BaseItemProps } from '../items/types';
+import { BaseStructureProps } from '../structures';
+export declare function getItemId(indexes: number[], type: 'static' | 'shape' | 'def' | 'shapes-group', appendix?: string): string;
+/**
+ * 从属性中拆分出组件属性和容器属性
+ * @param props
+ * @param extKeys
+ * @returns
+ */
+export declare function getItemProps<T extends BaseItemProps>(props: T, extKeys?: string[]): readonly [T, Record<string, any>];
+/**
+ * 针对层级结构，获取当前层级对应的组件
+ */
+export declare function getItemComponent(Items: BaseStructureProps['Items'], level?: number): import("@antv/infographic-jsx").ComponentType<Omit<BaseItemProps, "themeColors">>;

package/esm/designs/utils/item.js

@@ -0,0 +1,49 @@
+import { getItemKeyFromIndexes } from '../../utils';
+export function getItemId(indexes, type, appendix) {
+    return `item-${getItemKeyFromIndexes(indexes)}-${type}` + appendix
+        ? `-${appendix}`
+        : '';
+}
+/**
+ * 从属性中拆分出组件属性和容器属性
+ * @param props
+ * @param extKeys
+ * @returns
+ */
+export function getItemProps(props, extKeys = []) {
+    const restProps = { ...props };
+    const extProps = {};
+    const keys = [
+        'indexes',
+        'data',
+        'datum',
+        'positionH',
+        'positionV',
+        'themeColors',
+        'valueFormatter',
+        ...extKeys,
+    ];
+    keys.forEach((key) => {
+        if (key in restProps) {
+            extProps[key] = restProps[key];
+            delete restProps[key];
+        }
+    });
+    // keep x, y, width, height in rest
+    ['x', 'y', 'width', 'height'].forEach((key) => {
+        if (key in props) {
+            restProps[key] = props[key];
+        }
+    });
+    return [extProps, restProps];
+}
+/**
+ * 针对层级结构，获取当前层级对应的组件
+ */
+export function getItemComponent(Items, level) {
+    if (Items.length === 0)
+        return () => null;
+    if (level === undefined)
+        return Items[0];
+    return Items[level] ?? Items[0];
+}

package/esm/index.d.ts

@@ -0,0 +1,13 @@
+export * from '@antv/infographic-jsx';
+export * from './designs';
+export { getItemId, getItemProps, getThemeColors } from './designs/utils';
+export type { InfographicOptions, ParsedInfographicOptions } from './options';
+export * from './renderer';
+export { loadSVGResource, registerResourceLoader } from './resource';
+export { Infographic } from './runtime';
+export { getTemplate, getTemplates, registerTemplate } from './templates';
+export type { ParsedTemplateOptions, TemplateOptions } from './templates';
+export { getTheme, getThemes, registerTheme } from './themes';
+export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
+export type * from './types';
+export { parseSVG } from './utils';

package/esm/index.js

@@ -0,0 +1,9 @@
+export * from '@antv/infographic-jsx';
+export * from './designs';
+export { getItemId, getItemProps, getThemeColors } from './designs/utils';
+export * from './renderer';
+export { loadSVGResource, registerResourceLoader } from './resource';
+export { Infographic } from './runtime';
+export { getTemplate, getTemplates, registerTemplate } from './templates';
+export { getTheme, getThemes, registerTheme } from './themes';
+export { parseSVG } from './utils';

package/esm/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export * from '@antv/infographic-jsx/jsx-runtime';

package/esm/jsx-runtime.js

@@ -0,0 +1 @@
+export * from '@antv/infographic-jsx/jsx-runtime';

package/esm/options/index.d.ts

@@ -0,0 +1,2 @@
+export { parseOptions } from './parser';
+export type * from './types';

package/esm/options/index.js

@@ -0,0 +1 @@
+export { parseOptions } from './parser';

package/esm/options/parser.d.ts

@@ -0,0 +1,2 @@
+import type { InfographicOptions, ParsedInfographicOptions } from './types';
+export declare function parseOptions(options: InfographicOptions): ParsedInfographicOptions;

package/esm/options/parser.js

@@ -0,0 +1,113 @@
+import { getItem, getStructure, getTemplate, Title, } from '../designs';
+import { getPaletteColor } from '../renderer';
+import { generateThemeColors, getTheme } from '../themes';
+import { getItemKeyFromIndexes, isDarkColor, parsePadding } from '../utils';
+export function parseOptions(options) {
+    const { container = '#container', padding = 0, template, design, theme, themeConfig, ...restOptions } = options;
+    const parsedContainer = typeof container === 'string'
+        ? document.querySelector(container) || document.createElement('div')
+        : container;
+    const templateOptions = template
+        ? getTemplate(template) || {}
+        : {};
+    const { design: templateDesign, ...restTemplateOptions } = templateOptions;
+    return {
+        ...restTemplateOptions,
+        ...restOptions,
+        container: parsedContainer,
+        padding: parsePadding(padding),
+        template,
+        design: parseDesign({ ...templateDesign, ...design }, options),
+        theme,
+        themeConfig: parseTheme(theme, themeConfig),
+    };
+}
+function normalizeWithType(obj) {
+    if (typeof obj === 'string')
+        return { type: obj };
+    if (!('type' in obj))
+        throw new Error('Type is required');
+    return obj;
+}
+function parseDesign(config, options) {
+    const { structure, title, item, items } = config || {};
+    const defaultItem = parseDesignItem(item || items?.[0], options);
+    return {
+        structure: parseDesignStructure(structure),
+        title: parseDesignTitle(title, options),
+        item: defaultItem,
+        items: !items
+            ? [defaultItem]
+            : items.map((item) => parseDesignItem(item, options)),
+    };
+}
+function parseDesignStructure(config) {
+    if (!config)
+        throw new Error('Structure is required in design or template');
+    const { type, ...userProps } = normalizeWithType(config);
+    const structure = getStructure(type);
+    if (!structure)
+        throw new Error(`Structure ${type} not found`);
+    const { component } = structure;
+    return {
+        ...structure,
+        component: (props) => component({ ...props, ...userProps }),
+    };
+}
+function parseDesignTitle(config, options) {
+    if (!config)
+        return { component: null };
+    const { type, ...userProps } = normalizeWithType(config);
+    const { themeConfig } = options;
+    const background = themeConfig?.colorBg || '#fff';
+    const themeColors = generateColors(background, background);
+    // use default title for now
+    return {
+        component: (props) => Title({ ...props, themeColors, ...userProps }),
+    };
+}
+function parseDesignItem(config, options) {
+    if (!config)
+        throw new Error('Item is required in design or template');
+    const { type, ...userProps } = normalizeWithType(config);
+    const item = getItem(type);
+    if (!item)
+        throw new Error(`Item ${type} not found`);
+    const { component, options: itemOptions } = item;
+    return {
+        ...item,
+        component: (props) => {
+            const { indexes } = props;
+            const { data, themeConfig } = options;
+            const background = themeConfig?.colorBg || '#fff';
+            const { themeColors = generateColors(getPaletteColor(themeConfig?.palette, indexes, data?.items?.length) ||
+                themeConfig?.colorPrimary ||
+                '#1677FF', background), ...restProps } = props;
+            return component({
+                themeColors,
+                ...restProps,
+                ...userProps,
+                id: `item-${getItemKeyFromIndexes(indexes)}`,
+            });
+        },
+        options: itemOptions,
+    };
+}
+function parseTheme(theme, themeConfig = {}) {
+    const base = theme ? getTheme(theme) || {} : {};
+    const parsedThemeConfig = { ...base, ...themeConfig };
+    if (!parsedThemeConfig.colorPrimary) {
+        parsedThemeConfig.colorPrimary = '#1677FF';
+    }
+    if (!parsedThemeConfig.palette) {
+        parsedThemeConfig.palette = [parsedThemeConfig.colorPrimary];
+    }
+    return parsedThemeConfig;
+}
+function generateColors(colorPrimary, background = '#fff') {
+    return generateThemeColors({
+        colorPrimary,
+        isDarkMode: isDarkColor(background),
+        colorBg: background,
+    });
+}