@antv/infographic 0.1.3 → 0.1.4

package/esm/designs/structures/sequence-stairs-front.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { getElementBounds, Group, Path, Polygon, Rect, Text } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+export const SequenceStairsFront = (props) => {
+    const { Title, Item, data, options, gap = 16, perspectiveFactor = 0.2, width = 720, } = props;
+    const { title, desc, items = [] } = data;
+    const TitleComponent = Title;
+    const titleContent = TitleComponent ? (_jsx(TitleComponent, { title: title, desc: desc })) : null;
+    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: [titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const colorPrimary = getColorPrimary(options);
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0] || {}, positionH: "center" }));
+    const connectorGap = 12;
+    const baseConnectorWidth = Math.min(width * 0.1, 100);
+    const bottomStepWidth = Math.min(width * 0.45, Math.max(80, width - itemBounds.width - connectorGap - baseConnectorWidth));
+    const baseDepth = Math.max(24, bottomStepWidth * perspectiveFactor * 0.35);
+    const baseStepHeight = 56;
+    const minStepHeight = baseStepHeight * 0.7;
+    const heightStep = items.length > 1
+        ? (baseStepHeight - minStepHeight) / (items.length - 1)
+        : 0;
+    const topMargin = Math.max(btnBounds.height + baseDepth + 20, baseDepth + 28);
+    const centerX = bottomStepWidth / 2;
+    const itemX = bottomStepWidth + baseConnectorWidth + connectorGap;
+    const stepHeights = items.map((_, index) => baseStepHeight - heightStep * index);
+    const stepDepths = items.map((_, index) => Math.max(baseDepth * (1 - index * 0.05), baseDepth * 0.7));
+    const stepYs = [];
+    const depthFromTop = [];
+    const lastIndex = items.length - 1;
+    stepYs[lastIndex] = topMargin;
+    depthFromTop[lastIndex] = 0;
+    for (let i = lastIndex - 1; i >= 0; i -= 1) {
+        depthFromTop[i] = depthFromTop[i + 1] + stepDepths[i] + gap;
+        stepYs[i] = stepYs[i + 1] + stepDepths[i] + stepHeights[i + 1] + gap;
+    }
+    const totalDepthSpan = depthFromTop[0] || stepDepths[0] || baseDepth;
+    const minStepWidth = bottomStepWidth * (0.55 + perspectiveFactor * 0.1);
+    const widthShrink = bottomStepWidth - minStepWidth;
+    const stepWidths = items.map((_, index) => {
+        const ratio = totalDepthSpan === 0 ? 1 : depthFromTop[index] / totalDepthSpan;
+        return minStepWidth + widthShrink * ratio;
+    });
+    const connectorWidths = stepWidths.map((stepWidth) => {
+        const connectorStartX = centerX + stepWidth / 2;
+        return Math.max(0, itemX - connectorGap - connectorStartX);
+    });
+    const stepElements = [];
+    const itemElements = [];
+    const btnElements = [];
+    const connectorElements = [];
+    const spineElements = [];
+    const spineTop = 0;
+    const spineBottom = (stepYs[0] || topMargin) + (stepHeights[0] || baseStepHeight);
+    const arrowHeight = spineBottom - spineTop;
+    const arrowHeadHeight = 35;
+    const topStepWidth = stepWidths[lastIndex] || minStepWidth;
+    const arrowTopWidth = topStepWidth * 0.8;
+    const arrowNeckWidth = arrowTopWidth * 0.65;
+    const arrowBottomWidth = (stepWidths[0] || bottomStepWidth) * 0.9;
+    spineElements.push(_jsx(Polygon, { points: [
+            { x: centerX, y: spineTop },
+            { x: centerX + arrowTopWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX + arrowNeckWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX + arrowBottomWidth / 2, y: spineBottom },
+            { x: centerX - arrowBottomWidth / 2, y: spineBottom },
+            { x: centerX - arrowNeckWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX - arrowTopWidth / 2, y: spineTop + arrowHeadHeight },
+        ], fill: "rgba(0,0,0,0.12)", width: arrowBottomWidth, height: arrowHeight, "data-element-type": "shape" }));
+    let previousCenterY = stepYs[lastIndex] + stepHeights[lastIndex] / 2;
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const stepWidth = stepWidths[index];
+        const stepDepth = stepDepths[index];
+        const stepX = centerX - stepWidth / 2;
+        const stepHeight = stepHeights[index];
+        const stepY = stepYs[index];
+        const topY = stepY - stepDepth;
+        const rectCenterY = stepY + stepHeight / 2;
+        const stepColor = getPaletteColor(options, indexes) || colorPrimary;
+        stepElements.push(_jsx(Rect, { x: stepX, y: stepY, width: stepWidth, height: stepHeight, fill: stepColor, "data-element-type": "shape" }), _jsx(Polygon, { points: [
+                { x: stepX, y: stepY },
+                { x: stepX + stepWidth, y: stepY },
+                { x: stepX + stepWidth - stepDepth / 2, y: topY },
+                { x: stepX + stepDepth / 2, y: topY },
+            ], fill: stepColor, opacity: "0.3", width: stepWidth, height: stepDepth, "data-element-type": "shape" }), _jsx(Text, { x: stepX, y: stepY, width: stepWidth, height: stepHeight, fontSize: stepHeight / 2, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: "#ffffff", children: String(index + 1).padStart(2, '0') }));
+        const connectorStartX = stepX + stepWidth;
+        const connectorEndY = rectCenterY;
+        const connectorWidth = connectorWidths[index];
+        const lineEndX = connectorStartX + connectorWidth;
+        connectorElements.push(_jsx(Path, { d: `M ${connectorStartX} ${connectorEndY} L ${lineEndX} ${connectorEndY}`, stroke: stepColor, strokeWidth: 2, fill: "none", width: connectorWidth, height: 2, "data-element-type": "shape" }), _jsx(Path, { d: `M ${lineEndX} ${connectorEndY} L ${lineEndX} ${connectorEndY}`, stroke: stepColor, strokeWidth: 6, strokeLinecap: "round", width: 1, height: 1, "data-element-type": "shape" }));
+        const itemY = rectCenterY - itemBounds.height / 2;
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionV: "middle" }));
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: itemX + itemBounds.width + 10, y: itemY + itemBounds.height / 2 - btnBounds.height / 2 }));
+        if (index === 0) {
+            btnElements.push(_jsx(BtnAdd, { indexes: [0], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - btnBounds.height - 12 }));
+        }
+        else {
+            btnElements.push(_jsx(BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: (previousCenterY + rectCenterY) / 2 - btnBounds.height / 2 }));
+        }
+        previousCenterY = rectCenterY;
+    });
+    const lastCenterY = previousCenterY;
+    const lastItemY = lastCenterY - itemBounds.height / 2;
+    btnElements.push(_jsx(BtnAdd, { indexes: [items.length], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: lastItemY + itemBounds.height + 12 }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: spineElements }), _jsx(Group, { children: stepElements }), _jsx(Group, { children: connectorElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-stairs-front', {
+    component: SequenceStairsFront,
+    composites: ['title', 'item'],
+});

package/esm/designs/types.d.ts

@@ -20,6 +20,14 @@ export interface ParsedDesignsOptions {
     item: WithProps<Item>;
     items: WithProps<Item>[];
 }
+export interface NullableParsedDesignsOptions {
+    structure: WithProps<Structure> | null;
+    title: {
+        component: ComponentType<any> | null;
+    };
+    item: WithProps<Item> | null;
+    items: (WithProps<Item> | null)[];
+}
 type WithType<T> = T & {
     type: string;
 };

package/esm/editor/managers/state.js

@@ -105,7 +105,7 @@ export class StateManager {
             "item-label" /* ElementTypeEnum.ItemLabel */ === role ||
             "item-desc" /* ElementTypeEnum.ItemDesc */ === role ||
             "item-value" /* ElementTypeEnum.ItemValue */ === role ||
-            "items-illus" /* ElementTypeEnum.ItemsIllus */ === role;
+            "item-illus" /* ElementTypeEnum.ItemIllus */ === role;
         const indexes = isItemElement ? getIndexesFromElement(element) : undefined;
         if (isItemElement) {
             const datum = getDatumByIndexes(data, indexes);

package/esm/index.d.ts

@@ -7,6 +7,7 @@ export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement
 export { getFont, getFonts, getPalette, getPaletteColor, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
 export { loadSVGResource, registerResourceLoader } from './resource';
 export { Infographic } from './runtime';
+export { parseSyntax } from './syntax';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';
@@ -14,6 +15,7 @@ export type { EditBarOptions } from './editor';
 export type { Bounds, ComponentType, DefsProps, EllipseProps, FragmentProps, GroupProps, JSXElement, JSXElementConstructor, JSXNode, PathProps, Point, PolygonProps, RectProps, RenderableNode, SVGAttributes, SVGProps, TextProps, WithChildren, } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';
 export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, } from './renderer';
+export type { SyntaxError, SyntaxParseResult } from './syntax';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
 export type { Data, Font, FontWeightName, ImageResource, ItemDatum, TextHorizontalAlign, TextVerticalAlign, } from './types';

package/esm/index.js

@@ -8,6 +8,7 @@ export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement
 export { getFont, getFonts, getPalette, getPaletteColor, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
 export { loadSVGResource, registerResourceLoader } from './resource';
 export { Infographic } from './runtime';
+export { parseSyntax } from './syntax';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';

package/esm/options/parser.d.ts

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

package/esm/options/parser.js

@@ -2,26 +2,44 @@ import { merge } from 'lodash-es';
 import { getItem, getStructure, getTemplate, Title, } from '../designs';
 import { getPaletteColor } from '../renderer';
 import { generateThemeColors, getTheme } from '../themes';
-import { isDarkColor, parsePadding } from '../utils';
+import { isDarkColor, isNonNullableParsedDesignsOptions, 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,
+        ? getTemplate(template)
+        : undefined;
+    const mergedThemeConfig = merge({}, templateOptions?.themeConfig, themeConfig);
+    const resolvedThemeConfig = theme || themeConfig || templateOptions?.themeConfig
+        ? parseTheme(theme, mergedThemeConfig)
+        : undefined;
+    const parsed = {
         container: parsedContainer,
         padding: parsePadding(padding),
-        template,
-        design: parseDesign({ ...templateDesign, ...design }, options),
-        theme,
-        themeConfig: parseTheme(theme, merge({ ...restTemplateOptions?.themeConfig }, themeConfig)),
     };
+    if (templateOptions) {
+        const { design: templateDesign, ...restTemplateOptions } = templateOptions;
+        Object.assign(parsed, restTemplateOptions);
+    }
+    Object.assign(parsed, restOptions);
+    if (template)
+        parsed.template = template;
+    if (templateOptions?.design || design) {
+        const parsedDesign = parseDesign({ ...templateOptions?.design, ...design }, resolvedThemeConfig
+            ? { ...options, themeConfig: resolvedThemeConfig }
+            : options);
+        if (isNonNullableParsedDesignsOptions(parsedDesign)) {
+            parsed.design = parsedDesign;
+        }
+    }
+    if (theme)
+        parsed.theme = theme;
+    if (resolvedThemeConfig) {
+        parsed.themeConfig = resolvedThemeConfig;
+    }
+    return parsed;
 }
 function normalizeWithType(obj) {
     if (typeof obj === 'string')
@@ -44,11 +62,11 @@ function parseDesign(config, options) {
 }
 function parseDesignStructure(config) {
     if (!config)
-        throw new Error('Structure is required in design or template');
+        return null;
     const { type, ...userProps } = normalizeWithType(config);
     const structure = getStructure(type);
     if (!structure)
-        throw new Error(`Structure ${type} not found`);
+        return null;
     const { component } = structure;
     return {
         ...structure,
@@ -69,11 +87,11 @@ function parseDesignTitle(config, options) {
 }
 function parseDesignItem(config, options) {
     if (!config)
-        throw new Error('Item is required in design or template');
+        return null;
     const { type, ...userProps } = normalizeWithType(config);
     const item = getItem(type);
     if (!item)
-        throw new Error(`Item ${type} not found`);
+        return null;
     const { component, options: itemOptions } = item;
     return {
         ...item,

package/esm/renderer/composites/icon.js

@@ -19,7 +19,7 @@ export function renderItemIcon(svg, node, value, options) {
 }
 function createIcon(svg, node, value, attrs) {
     // load async
-    loadResource(svg, value);
+    loadResource(svg, 'icon', value);
     return createIconElement(value, {
         ...getAttributes(node, [
             'id',

package/esm/renderer/composites/illus.js

@@ -8,7 +8,7 @@ export function renderIllus(svg, node, value) {
         return null;
     const id = getResourceId(config);
     const clipPathId = createClipPath(svg, node, id);
-    loadResource(svg, config);
+    loadResource(svg, 'illus', config);
     const { data, color } = config;
     return createIllusElement(id, {
         ...parseIllusBounds(node),

package/esm/resource/loader.d.ts

@@ -1,6 +1,6 @@
-import type { ResourceConfig } from './types';
+import type { ResourceConfig, ResourceScene } from './types';
 /**
  * load resource into svg defs
  * @returns resource ref id
  */
-export declare function loadResource(svg: SVGSVGElement | null, config: string | ResourceConfig): Promise<string | null>;
+export declare function loadResource(svg: SVGSVGElement | null, scene: ResourceScene, config: string | ResourceConfig): Promise<string | null>;

package/esm/resource/loader.js

@@ -1,20 +1,31 @@
 import { getOrCreateDefs } from '../utils';
-import { loadImageBase64Resource, loadRemoteResource, loadSVGResource, } from './loaders';
+import { loadImageBase64Resource, loadRemoteResource, loadSearchResource, loadSVGResource, } from './loaders';
 import { getCustomResourceLoader } from './registry';
 import { getResourceId, parseResourceConfig } from './utils';
-async function getResource(config) {
+async function getResource(scene, config) {
     const cfg = parseResourceConfig(config);
     if (!cfg)
         return null;
-    const { type, data } = cfg;
-    if (type === 'image') {
-        return await loadImageBase64Resource(data);
-    }
-    else if (type === 'svg') {
+    cfg.scene || (cfg.scene = scene);
+    const { source, data, format, encoding } = cfg;
+    if (source === 'inline') {
+        const isDataURI = data.startsWith('data:');
+        if (format === 'svg' && encoding === 'raw') {
+            return loadSVGResource(data);
+        }
+        if (format === 'svg' && isDataURI) {
+            return await loadImageBase64Resource(data);
+        }
+        if (isDataURI || format === 'image') {
+            return await loadImageBase64Resource(data);
+        }
         return loadSVGResource(data);
     }
-    else if (type === 'remote') {
-        return await loadRemoteResource(data);
+    else if (source === 'remote') {
+        return await loadRemoteResource(data, format);
+    }
+    else if (source === 'search') {
+        return await loadSearchResource(data, format);
     }
     else {
         const customLoader = getCustomResourceLoader();
@@ -29,7 +40,7 @@ const RESOURCE_LOAD_MAP = new WeakMap();
  * load resource into svg defs
  * @returns resource ref id
  */
-export async function loadResource(svg, config) {
+export async function loadResource(svg, scene, config) {
     if (!svg)
         return null;
     const cfg = parseResourceConfig(config);
@@ -38,7 +49,7 @@ export async function loadResource(svg, config) {
     const id = getResourceId(cfg);
     const resource = RESOURCE_MAP.has(id)
         ? RESOURCE_MAP.get(id) || null
-        : await getResource(cfg);
+        : await getResource(scene, cfg);
     if (!resource)
         return null;
     if (!RESOURCE_LOAD_MAP.has(svg))

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

@@ -1,3 +1,4 @@
 export * from './image';
 export * from './remote';
+export * from './search';
 export * from './svg';

package/esm/resource/loaders/index.js

@@ -1,3 +1,4 @@
 export * from './image';
 export * from './remote';
+export * from './search';
 export * from './svg';

package/esm/resource/loaders/remote.d.ts

@@ -1 +1 @@
-export declare function loadRemoteResource(resource: string): Promise<SVGSymbolElement | null>;
+export declare function loadRemoteResource(resource: string, format?: string): Promise<SVGSymbolElement | null>;

package/esm/resource/loaders/remote.js

@@ -8,14 +8,22 @@ function isRemoteResource(resource) {
         return false;
     }
 }
-export async function loadRemoteResource(resource) {
+function shouldParseAsSVG(contentType, format) {
+    const normalized = contentType.toLowerCase();
+    if (normalized.includes('image/svg'))
+        return true;
+    if (!contentType && format === 'svg')
+        return true;
+    return false;
+}
+export async function loadRemoteResource(resource, format) {
     if (!resource || !isRemoteResource(resource))
         return null;
     const response = await fetch(resource);
     if (!response.ok)
         throw new Error('Failed to load resource');
     const contentType = response.headers.get('Content-Type') || '';
-    if (contentType.includes('image/svg+xml')) {
+    if (shouldParseAsSVG(contentType, format)) {
         const svgText = await response.text();
         return loadSVGResource(svgText);
     }

package/esm/resource/loaders/search.d.ts

@@ -0,0 +1 @@
+export declare function loadSearchResource(query: string, format?: string): Promise<SVGSymbolElement | null>;

package/esm/resource/loaders/search.js

@@ -0,0 +1,51 @@
+import { ICON_SERVICE_URL } from '../../constants';
+import { loadImageBase64Resource } from './image';
+import { loadRemoteResource } from './remote';
+import { loadSVGResource } from './svg';
+const queryIcon = async (query) => {
+    try {
+        const params = new URLSearchParams({ text: query, topK: '1' });
+        const url = `${ICON_SERVICE_URL}?${params.toString()}`;
+        const response = await fetch(url);
+        if (!response.ok)
+            return null;
+        const result = await response.json();
+        if (!result?.status || !Array.isArray(result.data?.data))
+            return null;
+        return result.data.data[0] || null;
+    }
+    catch (error) {
+        console.error(`Failed to query icon for "${query}":`, error);
+        return null;
+    }
+};
+function isDataURI(resource) {
+    return resource.startsWith('data:');
+}
+function looksLikeSVG(resource) {
+    const str = resource.trim();
+    return str.startsWith('<svg') || str.startsWith('<symbol');
+}
+export async function loadSearchResource(query, format) {
+    if (!query)
+        return null;
+    const result = await queryIcon(query);
+    if (!result)
+        return null;
+    if (looksLikeSVG(result))
+        return loadSVGResource(result);
+    if (isDataURI(result)) {
+        const mimeType = result.match(/^data:([^;]+)/)?.[1] || '';
+        const isBase64 = result.includes(';base64,');
+        if (mimeType === 'image/svg+xml' && !isBase64) {
+            const commaIndex = result.indexOf(',');
+            const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
+            return loadSVGResource(svgText);
+        }
+        if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
+            return loadImageBase64Resource(result);
+        }
+        return loadImageBase64Resource(result);
+    }
+    return loadRemoteResource(result, format);
+}

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

@@ -1 +1,2 @@
 export type * from './resource';
+export type * from './scene';

package/esm/resource/types/resource.d.ts

@@ -1,6 +1,13 @@
+import { ResourceScene } from './scene';
+export type ResourceSource = 'inline' | 'remote' | 'search' | 'custom';
+export type ResourceFormat = 'svg' | 'image' | 'json' | 'binary' | string;
+export type ResourceEncoding = 'raw' | 'data-uri' | 'base64' | string;
 export interface ResourceConfig {
-    type: 'image' | 'svg' | 'remote' | 'custom';
+    source: ResourceSource;
+    format?: ResourceFormat;
+    encoding?: ResourceEncoding;
     data: string;
+    scene?: ResourceScene;
     [key: string]: any;
 }
 export type Resource = SVGSymbolElement;

package/esm/resource/types/scene.d.ts

@@ -0,0 +1 @@
+export type ResourceScene = 'icon' | 'illus';

package/esm/resource/utils/data-uri.js

@@ -1,6 +1,6 @@
 export function parseDataURI(resource) {
     if (!resource.startsWith('data:'))
-        return { type: 'custom', data: resource };
+        return null;
     const commaIndex = resource.indexOf(',');
     if (commaIndex === -1)
         return null;
@@ -8,15 +8,24 @@ export function parseDataURI(resource) {
     const data = resource.slice(commaIndex + 1);
     const parts = header.split(';');
     const mimeType = parts[0];
-    if (parts.includes('base64')) {
-        return { type: "image" /* DataURITypeEnum.Image */, data: resource };
+    const isBase64 = parts.includes('base64');
+    if (mimeType === 'image/svg+xml' && !isBase64) {
+        const decoded = data.startsWith('%3C') ? decodeURIComponent(data) : data;
+        return {
+            source: 'inline',
+            format: 'svg',
+            encoding: 'raw',
+            data: decoded,
+        };
+    }
+    if (mimeType.startsWith('image/')) {
+        const format = mimeType === 'image/svg+xml' ? 'svg' : 'image';
+        return {
+            source: 'inline',
+            format,
+            encoding: isBase64 ? 'base64' : 'data-uri',
+            data: resource,
+        };
     }
-    const typeMap = {
-        'text/url': "remote" /* DataURITypeEnum.Remote */,
-        'image/svg+xml': "svg" /* DataURITypeEnum.SVG */,
-    };
-    const type = typeMap[mimeType];
-    if (type)
-        return { type, data };
-    return { type: 'custom', data: resource };
+    return null;
 }

package/esm/resource/utils/parser.js

@@ -1,6 +1,97 @@
 import { parseDataURI } from './data-uri';
+const KNOWN_FORMATS = new Set(['svg', 'png', 'jpg', 'jpeg', 'webp', 'gif']);
+function looksLikeSVG(resource) {
+    const str = resource.trim();
+    return str.startsWith('<svg') || str.startsWith('<symbol');
+}
+function inferFormatFromUrl(url) {
+    const lower = url.toLowerCase();
+    if (lower.endsWith('.svg') || lower.includes('.svg?'))
+        return 'svg';
+    if (lower.endsWith('.png') ||
+        lower.endsWith('.jpg') ||
+        lower.endsWith('.jpeg') ||
+        lower.endsWith('.webp') ||
+        lower.endsWith('.gif')) {
+        return 'image';
+    }
+    return undefined;
+}
+function parseRefResource(resource) {
+    if (!resource.startsWith('ref:'))
+        return null;
+    const rest = resource.slice(4);
+    const [source, ...restParts] = rest.split(':');
+    if (!source || restParts.length === 0)
+        return null;
+    let format;
+    if (restParts.length > 1 && KNOWN_FORMATS.has(restParts[0].toLowerCase())) {
+        format = restParts.shift()?.toLowerCase();
+    }
+    const payload = restParts.join(':');
+    if (!payload)
+        return null;
+    const normalizedSource = source === 'url' ? 'remote' : source;
+    if (normalizedSource === 'remote') {
+        return {
+            source: 'remote',
+            format: format || inferFormatFromUrl(payload) || undefined,
+            data: payload,
+        };
+    }
+    if (normalizedSource === 'search') {
+        return {
+            source: 'search',
+            format: format || 'svg',
+            data: payload,
+        };
+    }
+    if (normalizedSource === 'svg') {
+        return { source: 'inline', format: 'svg', data: payload, encoding: 'raw' };
+    }
+    return { source: 'custom', data: resource, format };
+}
 export function parseResourceConfig(config) {
     if (!config)
         return null;
-    return typeof config === 'string' ? parseDataURI(config) : config;
+    if (typeof config !== 'string') {
+        if (config.source)
+            return config;
+        const legacy = config;
+        if (legacy.type === 'image') {
+            return { source: 'inline', format: 'image', data: legacy.data };
+        }
+        if (legacy.type === 'svg') {
+            return {
+                source: 'inline',
+                format: 'svg',
+                encoding: 'raw',
+                data: legacy.data,
+            };
+        }
+        if (legacy.type === 'remote') {
+            return { source: 'remote', format: legacy.format, data: legacy.data };
+        }
+        if (legacy.type === 'search') {
+            return {
+                source: 'search',
+                format: legacy.format || 'svg',
+                data: legacy.data,
+            };
+        }
+        if (legacy.type === 'custom') {
+            return { source: 'custom', data: legacy.data };
+        }
+        return null;
+    }
+    const dataURIConfig = parseDataURI(config);
+    if (dataURIConfig)
+        return dataURIConfig;
+    const refConfig = parseRefResource(config);
+    if (refConfig)
+        return refConfig;
+    if (looksLikeSVG(config)) {
+        return { source: 'inline', format: 'svg', encoding: 'raw', data: config };
+    }
+    return { source: 'custom', data: config };
 }

package/esm/resource/utils/ref.js

@@ -1,7 +1,7 @@
 import { getSimpleHash } from '../../utils';
-import { parseDataURI } from './data-uri';
+import { parseResourceConfig } from './parser';
 export function getResourceId(config) {
-    const cfg = typeof config === 'string' ? parseDataURI(config) : config;
+    const cfg = typeof config === 'string' ? parseResourceConfig(config) : config;
     if (!cfg)
         return null;
     return 'rsc-' + getSimpleHash(JSON.stringify(cfg));

package/esm/runtime/Infographic.d.ts

@@ -1,5 +1,5 @@
 import { type ExportOptions } from '../exporter';
-import { InfographicOptions } from '../options';
+import { InfographicOptions, ParsedInfographicOptions } from '../options';
 export declare class Infographic {
     rendered: boolean;
     private emitter;
@@ -7,17 +7,18 @@ export declare class Infographic {
     private editor?;
     private options;
     private parsedOptions;
-    constructor(options: InfographicOptions);
-    getOptions(): InfographicOptions;
+    constructor(options: string | Partial<InfographicOptions>);
+    getOptions(): Partial<InfographicOptions>;
+    private setOptions;
     /**
      * Render the infographic into the container
      */
-    render(): void;
+    render(options?: string | Partial<InfographicOptions>): void;
     /**
      * Compose the SVG template
      */
-    compose(): SVGSVGElement;
-    getTypes(): string;
+    compose(parsedOptions: ParsedInfographicOptions): SVGSVGElement;
+    getTypes(): string | undefined;
     /**
      * Export the infographic to data URL
      * @param options Export option