@antv/infographic 0.2.13 → 0.2.15

package/lib/editor/plugins/reset-viewbox.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetViewBox = void 0;
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const commands_1 = require("../commands");
+const base_1 = require("./base");
+const components_1 = require("./components");
+const icons_1 = require("./components/icons");
+const MARGIN_X = 25;
+const MARGIN_Y = 25;
+const BUTTON_SIZE = 40;
+class ResetViewBox extends base_1.Plugin {
+    constructor(options) {
+        super();
+        this.options = options;
+        this.name = 'reset-viewBox';
+        this.viewBoxChanged = false;
+        this.handleResize = () => {
+            this.updateOriginViewBox();
+            this.updatePosition();
+        };
+        this.handleViewBoxChange = (viewBox) => {
+            const svg = this.editor.getDocument();
+            this.viewBoxChanged = viewBox !== this.originViewBox;
+            if (!this.viewBoxChanged) {
+                if (this.resetButton)
+                    this.hideButton(this.resetButton);
+                return;
+            }
+            const button = this.getOrCreateResetButton();
+            this.placeButton(button, svg);
+            this.showButton(button);
+        };
+        this.getOrCreateResetButton = () => {
+            if (this.resetButton)
+                return this.resetButton;
+            const { style, className } = this.options || {};
+            const button = (0, components_1.IconButton)({
+                icon: icons_1.RESET_ICON,
+                onClick: this.resetViewBox,
+            });
+            button.classList.add(RESET_BUTTON_CLASS);
+            if (className) {
+                button.classList.add(className);
+            }
+            if (style) {
+                Object.assign(button.style, style);
+            }
+            (0, utils_1.setElementRole)(button, constants_1.COMPONENT_ROLE);
+            this.resetButton = button;
+            const { getContainer } = this.options || {};
+            const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
+            const containerParent = resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : document.body;
+            containerParent === null || containerParent === void 0 ? void 0 : containerParent.appendChild(button);
+            return button;
+        };
+        /** Get CSS transform scale of an element */
+        this.getTransformScale = (element) => {
+            const rect = element.getBoundingClientRect();
+            const scaleX = element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1;
+            const scaleY = element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1;
+            return { scaleX, scaleY };
+        };
+        /** Find the nearest stable overflow container */
+        this.findStableContainer = (svg) => {
+            let current = svg.parentElement;
+            while (current) {
+                if (current instanceof HTMLElement) {
+                    const style = window.getComputedStyle(current);
+                    // Look for overflow container or positioned element as stable reference
+                    if ((style.overflow && style.overflow !== 'visible') ||
+                        (style.overflowX && style.overflowX !== 'visible') ||
+                        (style.overflowY && style.overflowY !== 'visible')) {
+                        return current;
+                    }
+                }
+                current = current.parentElement;
+            }
+            return null;
+        };
+        this.placeButton = (button, svg) => {
+            var _a;
+            if (!svg.isConnected)
+                return;
+            const svgRect = svg.getBoundingClientRect();
+            const offsetParent = (_a = button.offsetParent) !== null && _a !== void 0 ? _a : document.documentElement;
+            // Use stable container bounds to clamp button position when SVG overflows
+            const stableContainer = this.findStableContainer(svg);
+            const containerRect = stableContainer === null || stableContainer === void 0 ? void 0 : stableContainer.getBoundingClientRect();
+            // Prefer SVG bounds, but clamp to container if SVG overflows
+            const effectiveRect = containerRect
+                ? {
+                    right: Math.min(svgRect.right, containerRect.right),
+                    bottom: Math.min(svgRect.bottom, containerRect.bottom),
+                }
+                : svgRect;
+            if (offsetParent === document.body ||
+                offsetParent === document.documentElement) {
+                const scrollX = window.scrollX || document.documentElement.scrollLeft;
+                const scrollY = window.scrollY || document.documentElement.scrollTop;
+                const left = scrollX + effectiveRect.right - MARGIN_X - BUTTON_SIZE;
+                const top = scrollY + effectiveRect.bottom - MARGIN_Y - BUTTON_SIZE;
+                button.style.left = `${left}px`;
+                button.style.top = `${top}px`;
+                return;
+            }
+            const parentRect = offsetParent.getBoundingClientRect();
+            // Compensate for parent transform scale
+            const { scaleX, scaleY } = this.getTransformScale(offsetParent);
+            // Convert to offsetParent local coordinates
+            const left = (effectiveRect.right - parentRect.left) / scaleX - MARGIN_X - BUTTON_SIZE;
+            const top = (effectiveRect.bottom - parentRect.top) / scaleY - MARGIN_Y - BUTTON_SIZE;
+            button.style.left = `${left}px`;
+            button.style.top = `${top}px`;
+        };
+        this.updatePosition = () => {
+            if (this.resetButton && this.viewBoxChanged) {
+                this.placeButton(this.resetButton, this.editor.getDocument());
+            }
+        };
+        this.resetViewBox = () => {
+            const command = new commands_1.UpdateOptionsCommand({
+                viewBox: this.originViewBox,
+            });
+            void this.commander.execute(command);
+        };
+        this.showButton = (button) => {
+            button.style.display = 'flex';
+            button.style.visibility = 'visible';
+        };
+        this.hideButton = (button) => {
+            button.style.display = 'none';
+        };
+        this.removeButton = () => {
+            var _a;
+            this.viewBoxChanged = false;
+            (_a = this.resetButton) === null || _a === void 0 ? void 0 : _a.remove();
+            this.resetButton = undefined;
+        };
+    }
+    init(options) {
+        super.init(options);
+        // Initialize originViewBox
+        this.ensureButtonStyle();
+        this.updateOriginViewBox();
+        this.unregisterSync = this.editor.registerSync('viewBox', this.handleViewBoxChange);
+        window.addEventListener('resize', this.handleResize);
+    }
+    destroy() {
+        var _a;
+        (_a = this.unregisterSync) === null || _a === void 0 ? void 0 : _a.call(this);
+        window.removeEventListener('resize', this.handleResize);
+        this.removeButton();
+    }
+    updateOriginViewBox() {
+        const svg = this.editor.getDocument();
+        // In Node env or before render, fallback to current viewBox attribute
+        if (!svg.getBBox) {
+            this.originViewBox = (0, utils_1.viewBoxToString)((0, utils_1.getViewBox)(svg));
+            return;
+        }
+        // In Browser, calculate fit
+        const { padding } = this.state.getOptions();
+        this.originViewBox = (0, utils_1.getBoundViewBox)(svg, (0, utils_1.parsePadding)(padding));
+    }
+    ensureButtonStyle() {
+        (0, utils_1.injectStyleOnce)(RESET_BUTTON_STYLE_ID, `
+      button.${RESET_BUTTON_CLASS} {
+        visibility: hidden;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: ${BUTTON_SIZE}px;
+        height: ${BUTTON_SIZE}px;
+        border-radius: 50%;
+        padding: 4px;
+        background-color: #fff;
+        border: 1px solid #e5e7eb;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+      }
+      `);
+    }
+}
+exports.ResetViewBox = ResetViewBox;
+const RESET_BUTTON_CLASS = 'infographic-reset-viewbox-btn';
+const RESET_BUTTON_STYLE_ID = 'infographic-reset-viewbox-btn-style';

package/lib/editor/types/editor.d.ts

@@ -1,4 +1,18 @@
+import type { InfographicOptionPath } from '../../options';
+import type { ICommandManager } from './command';
+import type { IInteractionManager } from './interaction';
+import type { IPluginManager } from './plugin';
+import type { IStateManager } from './state';
+import type { ISyncRegistry, SyncHandler } from './sync';
 export interface IEditor {
+    commander: ICommandManager;
+    interaction: IInteractionManager;
+    plugin: IPluginManager;
+    state: IStateManager;
+    syncRegistry: ISyncRegistry;
     getDocument(): SVGSVGElement;
+    registerSync(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
+        immediate?: boolean;
+    }): () => void;
     destroy(): void;
 }

package/lib/editor/types/index.d.ts

@@ -5,3 +5,4 @@ export type * from './plugin';
 export type * from './selection';
 export type * from './shape';
 export type * from './state';
+export type * from './sync';

package/lib/editor/types/interaction.d.ts

@@ -3,6 +3,11 @@ import type { ICommandManager } from './command';
 import type { IEditor } from './editor';
 import type { Selection } from './selection';
 import type { IStateManager } from './state';
+/**
+ * Union type of common key codes, using (string & {}) trick to provide completion suggestions without limiting specific strings
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+ */
+export type KeyCode = 'Space' | 'ShiftLeft' | 'ShiftRight' | 'ControlLeft' | 'ControlRight' | 'AltLeft' | 'AltRight' | 'MetaLeft' | 'MetaRight' | 'CapsLock' | 'Tab' | 'Enter' | 'Escape' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | `Key${string}` | `Digit${number}` | (string & {});
 export interface IInteraction {
     name: string;
     init(options: InteractionInitOptions): void;
@@ -17,6 +22,10 @@ export interface SelectionChangePayload {
     removed: Selection;
     mode: SelectMode;
 }
+export interface viewBoxChangePayload {
+    type: 'viewBox:change';
+    viewBox: string | undefined;
+}
 export interface IInteractionManager {
     isActive(): boolean;
     select(items: Selection, mode: SelectMode): void;

package/lib/editor/types/state.d.ts

@@ -1,4 +1,4 @@
-import type { ParsedInfographicOptions } from '../../options';
+import type { ParsedInfographicOptions, UpdatableInfographicOptions } from '../../options';
 import type { Element, IEventEmitter, ItemDatum } from '../../types';
 import type { ICommandManager } from './command';
 import type { IEditor } from './editor';
@@ -21,7 +21,9 @@ export interface IStateManager {
     removeItemDatum(indexes: number[], count?: number): void;
     updateData(key: string, value: any): void;
     updateElement(element: Element, props: Partial<ElementProps>): void;
-    updateOptions(options: ParsedInfographicOptions): void;
+    updateOptions(options: UpdatableInfographicOptions, execOptions?: {
+        bubbleUp?: boolean;
+    }): void;
     getOptions(): ParsedInfographicOptions;
     destroy(): void;
 }

package/lib/editor/types/sync.d.ts

@@ -0,0 +1,27 @@
+import type { InfographicOptionPath } from '../../options';
+/**
+ * Sync callback
+ * @param newValue The new value after modification
+ * @param oldValue The old value before modification. Note: This value is undefined when triggered by parent path bubbling notification (i.e., listening to a non-leaf node).
+ */
+export type SyncHandler = (newValue: any, oldValue: any) => void;
+export interface ISyncRegistry {
+    /**
+     * Register synchronization logic
+     * @param path Configuration path, such as 'design.background'
+     * @param handler Sync callback
+     * @param options.immediate Whether to execute immediately (used for view initialization)
+     * @returns unregister function
+     */
+    register(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
+        immediate?: boolean;
+    }): () => void;
+    /**
+     * Trigger synchronization (usually called by StateManager)
+     * @param path Configuration path
+     * @param newVal New value
+     * @param oldVal Old value
+     */
+    trigger(path: string, newVal: any, oldVal: any): void;
+    destroy(): void;
+}

package/lib/editor/types/sync.js

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

package/lib/editor/utils/data.js

@@ -8,8 +8,10 @@ const utils_1 = require("../../utils");
  */
 function getChildrenDataByIndexes(data, indexes) {
     if (indexes.length === 0)
-        return data.data;
+        return data.items;
     const datum = (0, utils_1.getDatumByIndexes)(data, indexes);
+    if (datum == null)
+        return [];
     datum.children || (datum.children = []);
     return datum.children;
 }

package/lib/editor/utils/event.d.ts

@@ -1,3 +1,4 @@
 import { Element } from '../../types';
 export declare function getEventTarget(element: SVGElement | null): Element | null;
 export declare function getSelectableTarget(element: SVGElement | null): Element | null;
+export declare function isTextSelectionTarget(target: EventTarget | null): boolean;

package/lib/editor/utils/event.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEventTarget = getEventTarget;
 exports.getSelectableTarget = getSelectableTarget;
+exports.isTextSelectionTarget = isTextSelectionTarget;
 const utils_1 = require("../../utils");
 function getEventTarget(element) {
     if (!element)
@@ -66,3 +67,11 @@ const getIconEventTarget = (element) => {
     }
     return null;
 };
+function isTextSelectionTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    const tag = target.tagName.toLowerCase();
+    return tag === 'input' || tag === 'textarea';
+}

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

@@ -5,3 +5,4 @@ export * from './element';
 export * from './event';
 export * from './extension';
 export * from './hotkey';
+export * from './object';

package/lib/editor/utils/index.js

@@ -21,3 +21,4 @@ __exportStar(require("./element"), exports);
 __exportStar(require("./event"), exports);
 __exportStar(require("./extension"), exports);
 __exportStar(require("./hotkey"), exports);
+__exportStar(require("./object"), exports);

package/lib/editor/utils/object.d.ts

@@ -0,0 +1,15 @@
+export interface ApplyOptionUpdatesOptions {
+    /** Whether to notify parent paths of changes (bubbling) */
+    bubbleUp?: boolean;
+    /** Callback triggered whenever a property value changes */
+    collector?: (path: string, newVal: any, oldVal: any) => void;
+}
+/**
+ * Recursively applies properties from 'source' to 'target' and collects changes.
+ *
+ * @param target - The object to be updated
+ * @param source - The source object containing partial updates
+ * @param basePath - Current path prefix for nested properties
+ * @param options - Configuration options
+ */
+export declare function applyOptionUpdates(target: any, source: any, basePath?: string, options?: ApplyOptionUpdatesOptions): void;

package/lib/editor/utils/object.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyOptionUpdates = applyOptionUpdates;
+const lodash_es_1 = require("lodash-es");
+/**
+ * Recursively applies properties from 'source' to 'target' and collects changes.
+ *
+ * @param target - The object to be updated
+ * @param source - The source object containing partial updates
+ * @param basePath - Current path prefix for nested properties
+ * @param options - Configuration options
+ */
+function applyOptionUpdates(target, source, basePath = '', options) {
+    const { bubbleUp = false, collector } = options !== null && options !== void 0 ? options : {};
+    const hasChange = applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp);
+    if (basePath === '' && hasChange && bubbleUp && collector) {
+        collector('', (0, lodash_es_1.cloneDeep)(target), undefined);
+    }
+}
+/**
+ * Internal recursive function.
+ * Returns true if any change occurred within this branch (or its children).
+ */
+function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp) {
+    let hasChange = false;
+    Object.keys(source).forEach((key) => {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+            return;
+        }
+        const fullPath = basePath ? `${basePath}.${key}` : key;
+        const updateValue = source[key];
+        const oldValue = target[key];
+        let childChanged = false;
+        if (updateValue === undefined) {
+            // Handle deletion: Only delete and notify if the key actually exists
+            if (key in target) {
+                delete target[key];
+                collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
+                childChanged = true;
+            }
+        }
+        else if ((0, lodash_es_1.isPlainObject)(updateValue)) {
+            // Handle nested object
+            const oldValueIsObject = (0, lodash_es_1.isPlainObject)(target[key]);
+            if (!oldValueIsObject) {
+                target[key] = {};
+            }
+            const grandChildChanged = applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp);
+            if (!oldValueIsObject) {
+                // Overwriting a primitive with an object is always a change.
+                childChanged = true;
+                // If the object was empty (grandChildChanged is false), we still need to report it.
+                if (!grandChildChanged) {
+                    collector === null || collector === void 0 ? void 0 : collector(fullPath, target[key], oldValue);
+                }
+            }
+            else {
+                childChanged = grandChildChanged;
+            }
+        }
+        else {
+            // Handle primitive update
+            target[key] = updateValue;
+            if (!(0, lodash_es_1.isEqual)(updateValue, oldValue)) {
+                collector === null || collector === void 0 ? void 0 : collector(fullPath, updateValue, oldValue);
+                childChanged = true;
+            }
+        }
+        if (childChanged) {
+            hasChange = true;
+        }
+    });
+    // Bubbling: Notify if any child changed in this branch
+    // The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
+    if (hasChange && bubbleUp && basePath !== '') {
+        // Current target is now fully updated for this scope.
+        collector === null || collector === void 0 ? void 0 : collector(basePath, (0, lodash_es_1.cloneDeep)(target), undefined);
+    }
+    return hasChange;
+}

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 export * from './designs';
 export { getItemProps, getThemeColors } from './designs/utils';
-export { BrushSelect, ClickSelect, DblClickEditText, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions';
-export { EditBar, Plugin, ResizeElement } from './editor/plugins';
+export { BatchCommand, UpdateElementCommand, UpdateOptionsCommand, UpdateTextCommand, } from './editor/commands';
+export { BrushSelect, ClickSelect, DblClickEditText, DragCanvas, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions';
+export { EditBar, Plugin, ResetViewBox, ResizeElement } from './editor/plugins';
 export { exportToSVG } from './exporter';
 export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement, createFragment, createLayout, getCombinedBounds, getElementBounds, getElementsBounds, jsx, jsxDEV, jsxs, renderSVG, } from './jsx';
 export { getFont, getFonts, getPalette, getPaletteColor, getPalettes, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
@@ -12,7 +13,7 @@ export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG, setFontExtendFactor } from './utils';
 export { VERSION } from './version';
-export type { EditBarOptions } from './editor';
+export type { EditBarOptions, ICommand, ICommandManager, IEditor, IInteraction, IInteractionManager, IPlugin, IPluginManager, IStateManager, ISyncRegistry, InteractionInitOptions, KeyCode, PluginInitOptions, SelectMode, Selection, SyncHandler, } from './editor';
 export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './exporter';
 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';

package/lib/index.js

@@ -14,16 +14,22 @@ 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 });
-exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.parseSyntax = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPalettes = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.exportToSVG = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = void 0;
-exports.VERSION = exports.setFontExtendFactor = exports.parseSVG = exports.registerTheme = void 0;
+exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPalettes = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.exportToSVG = exports.ResizeElement = exports.ResetViewBox = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DragCanvas = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.UpdateTextCommand = exports.UpdateOptionsCommand = exports.UpdateElementCommand = exports.BatchCommand = exports.getThemeColors = exports.getItemProps = void 0;
+exports.VERSION = exports.setFontExtendFactor = exports.parseSVG = exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.parseSyntax = void 0;
 __exportStar(require("./designs"), exports);
 var utils_1 = require("./designs/utils");
 Object.defineProperty(exports, "getItemProps", { enumerable: true, get: function () { return utils_1.getItemProps; } });
 Object.defineProperty(exports, "getThemeColors", { enumerable: true, get: function () { return utils_1.getThemeColors; } });
+var commands_1 = require("./editor/commands");
+Object.defineProperty(exports, "BatchCommand", { enumerable: true, get: function () { return commands_1.BatchCommand; } });
+Object.defineProperty(exports, "UpdateElementCommand", { enumerable: true, get: function () { return commands_1.UpdateElementCommand; } });
+Object.defineProperty(exports, "UpdateOptionsCommand", { enumerable: true, get: function () { return commands_1.UpdateOptionsCommand; } });
+Object.defineProperty(exports, "UpdateTextCommand", { enumerable: true, get: function () { return commands_1.UpdateTextCommand; } });
 var interactions_1 = require("./editor/interactions");
 Object.defineProperty(exports, "BrushSelect", { enumerable: true, get: function () { return interactions_1.BrushSelect; } });
 Object.defineProperty(exports, "ClickSelect", { enumerable: true, get: function () { return interactions_1.ClickSelect; } });
 Object.defineProperty(exports, "DblClickEditText", { enumerable: true, get: function () { return interactions_1.DblClickEditText; } });
+Object.defineProperty(exports, "DragCanvas", { enumerable: true, get: function () { return interactions_1.DragCanvas; } });
 Object.defineProperty(exports, "DragElement", { enumerable: true, get: function () { return interactions_1.DragElement; } });
 Object.defineProperty(exports, "HotkeyHistory", { enumerable: true, get: function () { return interactions_1.HotkeyHistory; } });
 Object.defineProperty(exports, "Interaction", { enumerable: true, get: function () { return interactions_1.Interaction; } });
@@ -32,6 +38,7 @@ Object.defineProperty(exports, "ZoomWheel", { enumerable: true, get: function ()
 var plugins_1 = require("./editor/plugins");
 Object.defineProperty(exports, "EditBar", { enumerable: true, get: function () { return plugins_1.EditBar; } });
 Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return plugins_1.Plugin; } });
+Object.defineProperty(exports, "ResetViewBox", { enumerable: true, get: function () { return plugins_1.ResetViewBox; } });
 Object.defineProperty(exports, "ResizeElement", { enumerable: true, get: function () { return plugins_1.ResizeElement; } });
 var exporter_1 = require("./exporter");
 Object.defineProperty(exports, "exportToSVG", { enumerable: true, get: function () { return exporter_1.exportToSVG; } });

package/lib/options/types.d.ts

@@ -2,6 +2,7 @@ import type { DesignOptions, ParsedDesignsOptions } from '../designs';
 import type { ElementProps, IInteraction, IPlugin } from '../editor';
 import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
+import type { Path } from '../utils';
 export interface InfographicOptions {
     /** 容器，可以是选择器或者 HTMLElement */
     container?: string | HTMLElement;
@@ -49,6 +50,7 @@ export interface ParsedInfographicOptions {
     interactions?: IInteraction[];
     shapes?: ElementProps[];
 }
+export type UpdatableInfographicOptions = Partial<Omit<ParsedInfographicOptions, 'container'>>;
 interface SVGOptions {
     style?: Record<string, string | number>;
     attributes?: Record<string, string | number | boolean>;
@@ -57,4 +59,9 @@ interface SVGOptions {
     /** 是否启用背景 */
     background?: boolean;
 }
+/**
+ * All valid property paths for Infographic Options.
+ * Use this to validate paths in SyncRegistry and other places.
+ */
+export type InfographicOptionPath = Path<UpdatableInfographicOptions>;
 export {};

package/lib/runtime/Infographic.js

@@ -105,18 +105,31 @@ class Infographic {
      * Compose the SVG template
      */
     compose(parsedOptions) {
-        const { design, data } = parsedOptions;
+        var _a, _b;
+        const { design, data, themeConfig } = parsedOptions;
         const { title, item, items, structure } = design;
         const { component: Structure, props: structureProps } = structure;
         const Title = title.component;
         const Item = item.component;
         const Items = items.map((it) => it.component);
-        const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
-        const template = (0, utils_1.parseSVG)(svg);
-        if (!template) {
-            throw new Error('Failed to parse SVG template');
+        // Apply theme font-family before measurement so measureText uses the correct font
+        const themeFontFamily = (_b = (_a = themeConfig === null || themeConfig === void 0 ? void 0 : themeConfig.base) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b['font-family'];
+        const previousDefaultFont = renderer_1.DEFAULT_FONT;
+        if (themeFontFamily)
+            (0, renderer_1.setDefaultFont)(themeFontFamily);
+        try {
+            const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
+            const template = (0, utils_1.parseSVG)(svg);
+            if (!template) {
+                throw new Error('Failed to parse SVG template');
+            }
+            return template;
+        }
+        finally {
+            // Restore previous default font
+            if (themeFontFamily)
+                (0, renderer_1.setDefaultFont)(previousDefaultFont);
         }
-        return template;
     }
     getTypes() {
         const parsedOptions = this.parsedOptions;

package/lib/runtime/options.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_OPTIONS = void 0;
 const editor_1 = require("../editor");
-const createDefaultPlugins = () => [new editor_1.EditBar(), new editor_1.ResizeElement()];
+const createDefaultPlugins = () => [
+    new editor_1.EditBar(),
+    new editor_1.ResizeElement(),
+    new editor_1.ResetViewBox(),
+];
 const createDefaultInteractions = () => [
+    new editor_1.DragCanvas(),
     new editor_1.DblClickEditText(),
     new editor_1.BrushSelect(),
     new editor_1.ClickSelect(),

package/lib/syntax/index.js

@@ -114,27 +114,47 @@ function parseSyntax(input) {
             const parsed = (0, relations_1.parseRelationsNode)(relationsNode, errors, 'data.relations');
             if (parsed.relations.length > 0 || parsed.items.length > 0) {
                 const current = ((_a = options.data) !== null && _a !== void 0 ? _a : {});
-                const existingItems = Array.isArray(current.items)
-                    ? current.items
-                    : [];
-                const normalizedItems = normalizeItems(existingItems);
-                const itemMap = new Map();
-                normalizedItems.forEach((item) => {
-                    if (item.id)
-                        itemMap.set(item.id, item);
-                });
-                parsed.items.forEach((item) => {
-                    const existing = itemMap.get(item.id);
-                    if (existing) {
-                        if (!existing.label && item.label)
-                            existing.label = item.label;
+                // 优先使用已存在的数据列表 (sequences, lists, etc.)
+                const dataKeys = Object.keys(schema_1.DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
+                let hasStructuredData = false;
+                // 尝试找到一个非空的数据源
+                for (const key of dataKeys) {
+                    if (Array.isArray(current[key]) && current[key].length > 0) {
+                        hasStructuredData = true;
+                        break;
                     }
-                    else {
-                        normalizedItems.push(item);
-                        itemMap.set(item.id, item);
-                    }
-                });
-                current.items = normalizedItems;
+                }
+                // 如果 items 已包含层级结构数据（带 children），也视为结构化数据
+                if (!hasStructuredData &&
+                    Array.isArray(current.items) &&
+                    current.items.length > 0 &&
+                    current.items.some((item) => Array.isArray(item.children) && item.children.length > 0)) {
+                    hasStructuredData = true;
+                }
+                // 如果没有找到其他数据源，才尝试合并 items
+                if (!hasStructuredData) {
+                    const existingItems = Array.isArray(current.items)
+                        ? current.items
+                        : [];
+                    const normalizedItems = normalizeItems(existingItems);
+                    const itemMap = new Map();
+                    normalizedItems.forEach((item) => {
+                        if (item.id)
+                            itemMap.set(item.id, item);
+                    });
+                    parsed.items.forEach((item) => {
+                        const existing = itemMap.get(item.id);
+                        if (existing) {
+                            if (!existing.label && item.label)
+                                existing.label = item.label;
+                        }
+                        else {
+                            normalizedItems.push(item);
+                            itemMap.set(item.id, item);
+                        }
+                    });
+                    current.items = normalizedItems;
+                }
                 current.relations = parsed.relations;
                 options.data = current;
             }