@antv/infographic 0.2.12 → 0.2.14

package/lib/editor/plugins/{edit-bar/components → components}/icons.d.ts

@@ -13,6 +13,7 @@ export declare const TEXT_ICONS: {
     alignCenter: ({ fill }?: IconProps) => HTMLElement;
     alignMiddle: ({ fill }?: IconProps) => HTMLElement;
 };
+export declare const RESET_ICON: ({ fill }?: IconProps) => HTMLElement;
 export declare const ELEMENT_ICONS: {
     align: ({ fill }?: IconProps) => HTMLElement;
     alignTop: ({ fill }?: IconProps) => HTMLElement;

package/lib/editor/plugins/{edit-bar/components → components}/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ELEMENT_ICONS = exports.TEXT_ICONS = void 0;
+exports.ELEMENT_ICONS = exports.RESET_ICON = exports.TEXT_ICONS = void 0;
 const createIcon = (children, { viewBox = '0 0 1024 1024', size = '1.5em' } = {}) => ({ fill = 'currentColor' } = {}) => {
     const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="${size}" height="${size}" fill="${fill}">
 ${children.trim()}
@@ -19,6 +19,7 @@ exports.TEXT_ICONS = {
     alignCenter: createIcon(`<path d="M768 800.339c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H256c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h512z m128-213.226c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h768zM768 373.887c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H256c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h512z m128-213.226c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768z"></path>`),
     alignMiddle: createIcon(`<path d="M534.246 617.448l0.377 0.371 128 127.952c12.5 12.494 12.503 32.755 0.009 45.255-12.37 12.374-32.352 12.501-44.878 0.38l-0.377-0.372-73.38-73.352V939c0 17.673-14.326 32-32 32-17.496 0-31.712-14.042-31.995-31.47l-0.004-0.53-0.001-221.314-73.374 73.348c-12.374 12.37-32.356 12.49-44.878 0.363l-0.377-0.371c-12.37-12.375-12.49-32.356-0.362-44.878l0.37-0.377 128-127.952c12.372-12.366 32.347-12.49 44.87-0.37zM896 480.508c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768zM511.998 54c17.496 0 31.713 14.042 31.996 31.47l0.004 0.53-0.001 221.314 73.38-73.349c12.499-12.494 32.76-12.49 45.255 0.009 12.37 12.374 12.49 32.356 0.362 44.878l-0.37 0.377-128 127.951c-12.372 12.366-32.347 12.49-44.87 0.371l-0.377-0.37-128-127.952c-12.5-12.495-12.503-32.756-0.009-45.255 12.37-12.374 32.352-12.502 44.878-0.38l0.377 0.371 73.374 73.346V86c0-17.673 14.328-32 32-32z"></path>`),
 };
+exports.RESET_ICON = createIcon(`<path d="M502.714987 58.258904l-126.531056-54.617723a52.797131 52.797131 0 0 0-41.873587 96.855428A447.865322 447.865322 0 0 0 392.02307 946.707184a61.535967 61.535967 0 0 0 13.83649 1.820591 52.797131 52.797131 0 0 0 13.65443-103.773672 342.453118 342.453118 0 0 1-31.678278-651.771485l-8.374718 19.480321a52.615072 52.615072 0 0 0 27.855039 69.182448 51.522718 51.522718 0 0 0 20.572675 4.369418A52.797131 52.797131 0 0 0 476.498481 254.882703L530.205907 127.441352a52.979191 52.979191 0 0 0-27.49092-69.182448zM962.960326 509.765407A448.775617 448.775617 0 0 0 643.992829 68.090094a52.797131 52.797131 0 1 0-30.403866 101.042786A342.635177 342.635177 0 0 1 674.578753 801.059925a52.615072 52.615072 0 0 0-92.30395-50.612422l-71.913335 117.246043a52.433013 52.433013 0 0 0 17.295612 72.82363l117.063985 72.823629a52.797131 52.797131 0 1 0 54.617722-89.755123l-16.021198-10.013249A448.593558 448.593558 0 0 0 962.960326 509.765407z" p-id="1630"/>`);
 exports.ELEMENT_ICONS = {
     align: createIcon(`<path d="M555.188 715.059c17.673 0 32 14.327 32 32V875c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V747.059c0-17.673 14.327-32 32-32z m-32.001 63.999H203V843h320.187v-63.942zM854 416.529c17.673 0 32 14.327 32 32v127.942c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V448.529c0-17.673 14.327-32 32-32z m-32 64H203v63.941h619v-63.941zM683.25 118c17.673 0 32 14.327 32 32v127.941c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V150c0-17.673 14.327-32 32-32z m-32 64H203v63.941h448.25V182z"></path>`),
     alignTop: createIcon(`

package/lib/editor/plugins/{edit-bar/components → components}/popover.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = Popover;
-const constants_1 = require("../../../../constants");
-const utils_1 = require("../../../../utils");
+const constants_1 = require("../../../constants");
+const utils_1 = require("../../../utils");
 const POPOVER_CLASS = 'infographic-edit-popover';
 const POPOVER_CONTENT_CLASS = `${POPOVER_CLASS}__content`;
 const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;

package/lib/editor/plugins/{edit-bar/components → components}/select.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = Select;
-const utils_1 = require("../../../../utils");
+const utils_1 = require("../../../utils");
 const SELECT_CLASS = 'infographic-edit-select';
 const SELECT_STYLE_ID = 'infographic-edit-select-style';
 const OPTION_CLASS = `${SELECT_CLASS}__option`;

package/lib/editor/plugins/core-sync.d.ts

@@ -0,0 +1,8 @@
+import type { IPlugin, PluginInitOptions } from '../types';
+import { Plugin } from './base';
+export declare class CoreSyncPlugin extends Plugin implements IPlugin {
+    name: string;
+    private unregisters;
+    init(options: PluginInitOptions): void;
+    destroy(): void;
+}

package/lib/editor/plugins/core-sync.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreSyncPlugin = void 0;
+const utils_1 = require("../../utils");
+const base_1 = require("./base");
+class CoreSyncPlugin extends base_1.Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'core-sync';
+        this.unregisters = [];
+    }
+    init(options) {
+        super.init(options);
+        const svg = this.editor.getDocument();
+        // viewBox Sync
+        this.unregisters.push(this.editor.registerSync('viewBox', (val) => {
+            if (val) {
+                svg.setAttribute('viewBox', val);
+            }
+            else {
+                svg.removeAttribute('viewBox');
+            }
+        }, { immediate: true }));
+        // padding Sync
+        this.unregisters.push(this.editor.registerSync('padding', (val) => {
+            if (val !== undefined)
+                (0, utils_1.setSVGPadding)(svg, (0, utils_1.parsePadding)(val));
+        }, { immediate: true }));
+    }
+    destroy() {
+        this.unregisters.forEach((fn) => fn());
+    }
+}
+exports.CoreSyncPlugin = CoreSyncPlugin;

package/lib/editor/plugins/edit-bar/edit-items/align-elements.js

@@ -5,7 +5,7 @@ const jsx_1 = require("../../../../jsx");
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
 const utils_2 = require("../../../utils");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 const GRID_CLASS = 'infographic-align-grid';
 const GRID_COMPACT_CLASS = `${GRID_CLASS}--compact`;
 const GRID_STYLE_ID = 'infographic-align-grid-style';

package/lib/editor/plugins/edit-bar/edit-items/font-align.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FontAlign = void 0;
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 // 常量定义
 const GRID_CLASS = 'infographic-font-align-grid';
 const GRID_STYLE_ID = 'infographic-font-align-grid-style';

package/lib/editor/plugins/edit-bar/edit-items/font-color.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FontColor = void 0;
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';
 const FONT_COLOR_STYLE_ID = 'infographic-font-color-style';
 const DEFAULT_COLOR = '#1f1f1f';

package/lib/editor/plugins/edit-bar/edit-items/font-family.js

@@ -4,7 +4,7 @@ exports.FontFamily = void 0;
 const renderer_1 = require("../../../../renderer");
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 const FONT_LIST_CLASS = 'infographic-font-family-list';
 const FONT_OPTION_CLASS = `${FONT_LIST_CLASS}__option`;
 const FONT_LIST_STYLE_ID = 'infographic-font-family-list-style';

package/lib/editor/plugins/edit-bar/edit-items/font-size.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FontSize = void 0;
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 const FONT_SIZE_CLASS = 'infographic-font-size-grid';
 const FONT_SIZE_STYLE_ID = 'infographic-font-size-grid-style';
 const FONT_SIZE_OPTIONS = [

package/lib/editor/plugins/edit-bar/edit-items/icon-color.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconColor = void 0;
 const utils_1 = require("../../../../utils");
 const commands_1 = require("../../../commands");
-const components_1 = require("../components");
+const components_1 = require("../../components");
 const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';
 const ICON_COLOR_STYLE_ID = 'infographic-icon-color-style';
 const DEFAULT_COLOR = '#1f1f1f';

package/lib/editor/plugins/edit-bar/index.d.ts

@@ -1,4 +1,4 @@
-export { ColorPicker, Popover, Select } from './components';
+export { ColorPicker, Popover, Select } from '../components';
 export { EditBar } from './edit-bar';
-export type { ColorPickerHandle, ColorPickerProps, IconButtonHandle, IconButtonProps, IconProps, PopoverHandle, PopoverPlacement, PopoverProps, SelectHandle, SelectOption, SelectProps, SelectValue, } from './components';
+export type { ColorPickerHandle, ColorPickerProps, IconButtonHandle, IconButtonProps, IconProps, PopoverHandle, PopoverPlacement, PopoverProps, SelectHandle, SelectOption, SelectProps, SelectValue, } from '../components';
 export type { EditBarOptions } from './edit-bar';

package/lib/editor/plugins/edit-bar/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditBar = exports.Select = exports.Popover = exports.ColorPicker = void 0;
-var components_1 = require("./components");
+var components_1 = require("../components");
 Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return components_1.ColorPicker; } });
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return components_1.Popover; } });
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return components_1.Select; } });

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

@@ -1,3 +1,5 @@
 export { Plugin } from './base';
+export { CoreSyncPlugin } from './core-sync';
 export * from './edit-bar';
+export { ResetViewBox } from './reset-viewbox';
 export { ResizeElement } from './resize-element';

package/lib/editor/plugins/index.js

@@ -14,9 +14,13 @@ 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.ResizeElement = exports.Plugin = void 0;
+exports.ResizeElement = exports.ResetViewBox = exports.CoreSyncPlugin = exports.Plugin = void 0;
 var base_1 = require("./base");
 Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return base_1.Plugin; } });
+var core_sync_1 = require("./core-sync");
+Object.defineProperty(exports, "CoreSyncPlugin", { enumerable: true, get: function () { return core_sync_1.CoreSyncPlugin; } });
 __exportStar(require("./edit-bar"), exports);
+var reset_viewbox_1 = require("./reset-viewbox");
+Object.defineProperty(exports, "ResetViewBox", { enumerable: true, get: function () { return reset_viewbox_1.ResetViewBox; } });
 var resize_element_1 = require("./resize-element");
 Object.defineProperty(exports, "ResizeElement", { enumerable: true, get: function () { return resize_element_1.ResizeElement; } });

package/lib/editor/plugins/reset-viewbox.d.ts

@@ -0,0 +1,33 @@
+import type { IPlugin, PluginInitOptions } from '../types';
+import { Plugin } from './base';
+export interface ResetViewBoxOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    className?: string;
+    getContainer?: HTMLElement | (() => HTMLElement);
+}
+export declare class ResetViewBox extends Plugin implements IPlugin {
+    private options?;
+    name: string;
+    private originViewBox;
+    private resetButton?;
+    private viewBoxChanged;
+    private unregisterSync?;
+    constructor(options?: ResetViewBoxOptions | undefined);
+    init(options: PluginInitOptions): void;
+    destroy(): void;
+    private handleResize;
+    private updateOriginViewBox;
+    private handleViewBoxChange;
+    protected getOrCreateResetButton: () => HTMLButtonElement;
+    /** Get CSS transform scale of an element */
+    private getTransformScale;
+    /** Find the nearest stable overflow container */
+    private findStableContainer;
+    private placeButton;
+    private updatePosition;
+    private resetViewBox;
+    private showButton;
+    private hideButton;
+    private removeButton;
+    private ensureButtonStyle;
+}

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,17 @@
+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: 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,26 @@
+/**
+ * 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: 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;