@antv/infographic 0.2.12 → 0.2.14

package/lib/editor/editor.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const managers_1 = require("./managers");
+const sync_registry_1 = require("./managers/sync-registry");
+const plugins_1 = require("./plugins");
 class Editor {
     constructor(emitter, document, options) {
         this.emitter = emitter;
@@ -15,6 +17,12 @@ class Editor {
         const state = new managers_1.StateManager();
         const plugin = new managers_1.PluginManager();
         const interaction = new managers_1.InteractionManager();
+        const syncRegistry = new sync_registry_1.SyncRegistry(() => state.getOptions());
+        this.commander = commander;
+        this.state = state;
+        this.plugin = plugin;
+        this.interaction = interaction;
+        this.syncRegistry = syncRegistry;
         commander.init({ state, emitter });
         state.init({
             emitter,
@@ -22,12 +30,15 @@ class Editor {
             commander,
             options,
         });
+        // Load core plugin: CoreSyncPlugin (handles viewBox/padding sync)
+        const corePlugin = new plugins_1.CoreSyncPlugin();
+        const userPlugins = options.plugins || [];
         plugin.init({
             emitter,
             editor: this,
             commander,
             state,
-        }, options.plugins);
+        }, [corePlugin, ...userPlugins]);
         interaction.init({
             emitter,
             editor: this,
@@ -35,10 +46,9 @@ class Editor {
             state,
             interactions: options.interactions,
         });
-        this.commander = commander;
-        this.state = state;
-        this.plugin = plugin;
-        this.interaction = interaction;
+    }
+    registerSync(path, handler, options) {
+        return this.syncRegistry.register(path, handler, options);
     }
     getDocument() {
         return this.document;
@@ -49,6 +59,7 @@ class Editor {
         this.plugin.destroy();
         this.commander.destroy();
         this.state.destroy();
+        this.syncRegistry.destroy();
     }
 }
 exports.Editor = Editor;

package/lib/editor/index.d.ts

@@ -1,3 +1,4 @@
+export * from './commands';
 export { Editor } from './editor';
 export * from './interactions';
 export * from './plugins';

package/lib/editor/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
+__exportStar(require("./commands"), exports);
 var editor_1 = require("./editor");
 Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return editor_1.Editor; } });
 __exportStar(require("./interactions"), exports);

package/lib/editor/interactions/brush-select.d.ts

@@ -19,5 +19,4 @@ export declare class BrushSelect extends Interaction implements IInteraction {
     private clearBrush;
     private collectSelection;
     private hasElementAtStart;
-    private isTextSelectionTarget;
 }

package/lib/editor/interactions/brush-select.js

@@ -25,7 +25,7 @@ class BrushSelect extends base_1.Interaction {
                 return;
             if (event.button !== 0)
                 return;
-            if (this.isTextSelectionTarget(event.target))
+            if ((0, utils_2.isTextSelectionTarget)(event.target))
                 return;
             if (this.hasElementAtStart(event.target))
                 return;
@@ -173,13 +173,5 @@ class BrushSelect extends base_1.Interaction {
             return true;
         return Boolean((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-element-type]'));
     }
-    isTextSelectionTarget(target) {
-        if (!(target instanceof HTMLElement))
-            return false;
-        if (target.isContentEditable)
-            return true;
-        const tag = target.tagName.toLowerCase();
-        return tag === 'input' || tag === 'textarea';
-    }
 }
 exports.BrushSelect = BrushSelect;

package/lib/editor/interactions/drag-canvas.d.ts

@@ -0,0 +1,35 @@
+import { IInteraction, InteractionInitOptions, KeyCode } from '../types';
+import { Interaction } from './base';
+export interface DragCanvasOptions {
+    trigger?: KeyCode[];
+}
+export declare class DragCanvas extends Interaction implements IInteraction {
+    name: string;
+    /**
+     * 触发交互的按键代码。
+     * 参考标准的 KeyboardEvent.code 值：
+     * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+     * @default ['Space']
+     */
+    trigger: KeyCode[];
+    constructor(options?: DragCanvasOptions);
+    private isTriggerPressed;
+    private pointerId?;
+    private startPoint?;
+    private document;
+    private startViewBoxString?;
+    private completeInteraction?;
+    private isHovering;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleKeyDown;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handleKeyUp;
+    private stopDrag;
+    private setCursor;
+    private handleBlur;
+    private onMouseEnter;
+    private onMouseLeave;
+}

package/lib/editor/interactions/drag-canvas.js

@@ -0,0 +1,165 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragCanvas = void 0;
+const utils_1 = require("../../utils");
+const commands_1 = require("../commands");
+const utils_2 = require("../utils");
+const base_1 = require("./base");
+class DragCanvas extends base_1.Interaction {
+    constructor(options) {
+        super();
+        this.name = 'drag-canvas';
+        /**
+         * 触发交互的按键代码。
+         * 参考标准的 KeyboardEvent.code 值：
+         * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+         * @default ['Space']
+         */
+        this.trigger = ['Space'];
+        this.isTriggerPressed = false;
+        // 防止组件快捷键侵入性过强
+        this.isHovering = false;
+        this.handleKeyDown = (event) => {
+            if (!this.interaction.isActive())
+                return;
+            if ((0, utils_2.isTextSelectionTarget)(event.target))
+                return;
+            // 增加焦点的判断，防止对空格的preventDefault侵入性过强
+            const target = event.target;
+            const isBody = target === document.body || target === document.documentElement;
+            const isEditor = target === this.document || this.document.contains(target);
+            if (!isBody && !isEditor)
+                return;
+            if (!this.trigger.includes(event.code))
+                return;
+            if (!this.isHovering && !this.isTriggerPressed)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
+                return new Promise((resolve) => {
+                    this.completeInteraction = resolve;
+                    this.isTriggerPressed = true;
+                    const viewBox = (0, utils_1.getViewBox)(this.document);
+                    this.startViewBoxString = (0, utils_1.viewBoxToString)(viewBox);
+                    this.setCursor('grab');
+                    this.document.addEventListener('pointerdown', this.handlePointerDown);
+                    window.addEventListener('keyup', this.handleKeyUp);
+                });
+            }));
+        };
+        this.handlePointerDown = (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const svg = this.document;
+            this.startPoint = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+            this.pointerId = event.pointerId;
+            this.setCursor('grabbing');
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerup', this.handlePointerUp);
+            window.addEventListener('pointercancel', this.handlePointerUp);
+        };
+        this.handlePointerMove = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const svg = this.document;
+            const current = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+            const dx = current.x - this.startPoint.x;
+            const dy = current.y - this.startPoint.y;
+            const viewBox = (0, utils_1.getViewBox)(svg);
+            const { x, y, width, height } = viewBox;
+            const newX = x - dx;
+            const newY = y - dy;
+            this.state.updateOptions({
+                viewBox: (0, utils_1.viewBoxToString)({ x: newX, y: newY, width, height }),
+            });
+        };
+        this.handlePointerUp = (event) => {
+            if (event.pointerId !== this.pointerId)
+                return;
+            this.startPoint = undefined;
+            this.pointerId = undefined;
+            this.setCursor('grab');
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+            window.removeEventListener('pointercancel', this.handlePointerUp);
+        };
+        this.handleKeyUp = (event) => {
+            if (!this.trigger.includes(event.code))
+                return;
+            this.stopDrag();
+        };
+        this.stopDrag = () => {
+            var _a;
+            if (this.startViewBoxString) {
+                const svg = this.document;
+                const viewBox = (0, utils_1.getViewBox)(svg);
+                const currentViewBoxString = (0, utils_1.viewBoxToString)(viewBox);
+                if (this.startViewBoxString !== currentViewBoxString) {
+                    const command = new commands_1.UpdateOptionsCommand({ viewBox: currentViewBoxString }, { viewBox: this.startViewBoxString });
+                    void this.commander.execute(command);
+                }
+            }
+            this.startViewBoxString = undefined;
+            this.isTriggerPressed = false;
+            this.setCursor('default');
+            this.startPoint = undefined;
+            this.pointerId = undefined;
+            window.removeEventListener('keyup', this.handleKeyUp);
+            this.document.removeEventListener('pointerdown', this.handlePointerDown);
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+            window.removeEventListener('pointercancel', this.handlePointerUp);
+            (_a = this.completeInteraction) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.completeInteraction = undefined;
+        };
+        this.setCursor = (behavior) => {
+            document.body.style.cursor = behavior;
+        };
+        this.handleBlur = () => {
+            this.stopDrag();
+        };
+        this.onMouseEnter = () => {
+            this.isHovering = true;
+        };
+        this.onMouseLeave = () => {
+            this.isHovering = false;
+        };
+        if (options === null || options === void 0 ? void 0 : options.trigger) {
+            this.trigger = options.trigger;
+        }
+    }
+    init(options) {
+        super.init(options);
+        this.document = this.editor.getDocument();
+        this.document.addEventListener('mouseenter', this.onMouseEnter);
+        this.document.addEventListener('mouseleave', this.onMouseLeave);
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('blur', this.handleBlur);
+    }
+    destroy() {
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('keyup', this.handleKeyUp);
+        this.document.removeEventListener('pointerdown', this.handlePointerDown);
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        window.removeEventListener('pointerup', this.handlePointerUp);
+        window.removeEventListener('pointercancel', this.handlePointerUp);
+        window.removeEventListener('blur', this.handleBlur);
+        this.document.removeEventListener('mouseenter', this.onMouseEnter);
+        this.document.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+}
+exports.DragCanvas = DragCanvas;

package/lib/editor/interactions/drag-element.js

@@ -116,9 +116,6 @@ class DragElement extends base_1.Interaction {
             return true;
         if (!this.startTarget)
             return false;
-        if (this.willReplaceSelection) {
-            this.interaction.select([this.startTarget], 'replace');
-        }
         this.dragItems = this.selectionForDrag
             .filter((element) => (0, utils_1.isEditableText)(element))
             .map((element) => this.createDragItem(element))
@@ -128,6 +125,10 @@ class DragElement extends base_1.Interaction {
         let started = false;
         this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
+                // 只有拿到锁之后，才真正执行选中逻辑
+                if (this.willReplaceSelection && this.startTarget) {
+                    this.interaction.select([this.startTarget], 'replace');
+                }
                 this.completeInteraction = resolve;
                 started = true;
             });

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

@@ -2,6 +2,7 @@ export { Interaction } from './base';
 export { BrushSelect } from './brush-select';
 export { ClickSelect } from './click-select';
 export { DblClickEditText } from './dblclick-edit-text';
+export { DragCanvas } from './drag-canvas';
 export { DragElement } from './drag-element';
 export { HotkeyHistory } from './hotkey-history';
 export { SelectHighlight } from './select-highlight';

package/lib/editor/interactions/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomWheel = exports.SelectHighlight = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.Interaction = void 0;
+exports.ZoomWheel = exports.SelectHighlight = exports.HotkeyHistory = exports.DragElement = exports.DragCanvas = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.Interaction = void 0;
 var base_1 = require("./base");
 Object.defineProperty(exports, "Interaction", { enumerable: true, get: function () { return base_1.Interaction; } });
 var brush_select_1 = require("./brush-select");
@@ -9,6 +9,8 @@ var click_select_1 = require("./click-select");
 Object.defineProperty(exports, "ClickSelect", { enumerable: true, get: function () { return click_select_1.ClickSelect; } });
 var dblclick_edit_text_1 = require("./dblclick-edit-text");
 Object.defineProperty(exports, "DblClickEditText", { enumerable: true, get: function () { return dblclick_edit_text_1.DblClickEditText; } });
+var drag_canvas_1 = require("./drag-canvas");
+Object.defineProperty(exports, "DragCanvas", { enumerable: true, get: function () { return drag_canvas_1.DragCanvas; } });
 var drag_element_1 = require("./drag-element");
 Object.defineProperty(exports, "DragElement", { enumerable: true, get: function () { return drag_element_1.DragElement; } });
 var hotkey_history_1 = require("./hotkey-history");

package/lib/editor/interactions/zoom-wheel.d.ts

@@ -1,8 +1,20 @@
 import type { IInteraction, InteractionInitOptions } from '../types';
 import { Interaction } from './base';
+export interface ZoomWheelOptions {
+    minViewBoxSize?: number;
+    maxViewBoxSize?: number;
+}
 export declare class ZoomWheel extends Interaction implements IInteraction {
     name: string;
+    private minViewBoxSize;
+    private maxViewBoxSize;
+    constructor(options?: ZoomWheelOptions);
+    private initialViewBox;
+    private handleKeyUp;
     private wheelListener;
+    private getMousePoint;
+    private getCenterPoint;
+    private shouldZoom;
     init(options: InteractionInitOptions): void;
     destroy(): void;
 }

package/lib/editor/interactions/zoom-wheel.js

@@ -2,43 +2,82 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZoomWheel = void 0;
 const lodash_es_1 = require("lodash-es");
-const utils_1 = require("../../utils");
+const viewbox_1 = require("../../utils/viewbox");
 const commands_1 = require("../commands");
+const utils_1 = require("../utils");
 const base_1 = require("./base");
-const MIN_VIEWBOX_SIZE = 1;
-const MIN_PADDING = -5000;
-const MAX_PADDING = 5000;
+const ZOOM_FACTOR = 1.1;
 class ZoomWheel extends base_1.Interaction {
-    constructor() {
-        super(...arguments);
+    constructor(options) {
+        super();
         this.name = 'zoom-wheel';
+        this.minViewBoxSize = 20;
+        this.maxViewBoxSize = 20000;
+        this.initialViewBox = null;
+        this.handleKeyUp = (event) => {
+            const isZoomModifierHeld = event.ctrlKey || event.metaKey || event.shiftKey;
+            if (!isZoomModifierHeld && this.initialViewBox) {
+                const currentViewBox = (0, viewbox_1.viewBoxToString)((0, viewbox_1.getViewBox)(this.editor.getDocument()));
+                if (currentViewBox !== this.initialViewBox) {
+                    const command = new commands_1.UpdateOptionsCommand({ viewBox: currentViewBox }, { viewBox: this.initialViewBox });
+                    void this.commander.execute(command);
+                }
+                this.initialViewBox = null;
+                document.removeEventListener('keyup', this.handleKeyUp);
+            }
+        };
         this.wheelListener = (event) => {
-            var _a;
-            if (!this.interaction.isActive())
-                return;
-            if (!event.ctrlKey && !event.metaKey)
+            if (!this.shouldZoom(event))
                 return;
             event.preventDefault();
-            const factor = event.deltaY > 0 ? 1.1 : 0.9;
-            const current = this.state.getOptions();
-            const currentPadding = (_a = current.padding) !== null && _a !== void 0 ? _a : 0;
-            const parsed = (0, utils_1.parsePadding)(currentPadding);
+            // Standard Zoom: Scroll Up (deltaY < 0) = Zoom In
+            const isZoomIn = event.deltaY < 0;
+            const factor = isZoomIn ? 1 / ZOOM_FACTOR : ZOOM_FACTOR;
             const svg = this.editor.getDocument();
-            const bbox = svg.getBBox();
-            const scaled = parsed.map((value) => {
-                const base = value === 0 ? 1 : value;
-                return (0, lodash_es_1.clamp)(base * factor, MIN_PADDING, MAX_PADDING);
-            });
-            const [top, right, bottom, left] = scaled;
-            const newWidth = bbox.width + left + right;
-            const newHeight = bbox.height + top + bottom;
-            if (newWidth <= MIN_VIEWBOX_SIZE || newHeight <= MIN_VIEWBOX_SIZE)
+            const viewBox = (0, viewbox_1.getViewBox)(svg);
+            const { width, height } = viewBox;
+            const newWidth = width * factor;
+            const newHeight = height * factor;
+            if (!(0, lodash_es_1.inRange)(newWidth, this.minViewBoxSize, this.maxViewBoxSize) ||
+                !(0, lodash_es_1.inRange)(newHeight, this.minViewBoxSize, this.maxViewBoxSize))
                 return;
-            const command = new commands_1.UpdateOptionsCommand({
-                padding: scaled,
+            if (this.initialViewBox === null) {
+                this.initialViewBox = (0, viewbox_1.viewBoxToString)(viewBox);
+                document.addEventListener('keyup', this.handleKeyUp);
+            }
+            const pivot = (event.ctrlKey || event.metaKey) && !event.shiftKey
+                ? this.getMousePoint(svg, event)
+                : this.getCenterPoint(viewBox);
+            const newViewBox = (0, viewbox_1.calculateZoomedViewBox)(viewBox, factor, pivot);
+            this.state.updateOptions({
+                viewBox: (0, viewbox_1.viewBoxToString)(newViewBox),
             });
-            void this.commander.execute(command);
         };
+        this.getMousePoint = (svg, event) => {
+            return (0, utils_1.clientToViewport)(svg, event.clientX, event.clientY);
+        };
+        this.getCenterPoint = (viewBox) => {
+            const centerX = viewBox.x + viewBox.width / 2;
+            const centerY = viewBox.y + viewBox.height / 2;
+            return { x: centerX, y: centerY };
+        };
+        this.shouldZoom = (event) => {
+            if (!this.interaction.isActive())
+                return false;
+            if (event.deltaY === 0)
+                return false;
+            const isMouseZoom = event.ctrlKey || event.metaKey;
+            const isCenterZoom = event.shiftKey;
+            if (isMouseZoom && isCenterZoom)
+                return false;
+            return isMouseZoom || isCenterZoom;
+        };
+        if ((options === null || options === void 0 ? void 0 : options.minViewBoxSize) !== undefined) {
+            this.minViewBoxSize = options.minViewBoxSize;
+        }
+        if ((options === null || options === void 0 ? void 0 : options.maxViewBoxSize) !== undefined) {
+            this.maxViewBoxSize = options.maxViewBoxSize;
+        }
     }
     init(options) {
         super.init(options);
@@ -46,6 +85,7 @@ class ZoomWheel extends base_1.Interaction {
     }
     destroy() {
         document.removeEventListener('wheel', this.wheelListener);
+        document.removeEventListener('keyup', this.handleKeyUp);
     }
 }
 exports.ZoomWheel = ZoomWheel;

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

@@ -2,3 +2,4 @@ export * from './command';
 export * from './interaction';
 export * from './plugin';
 export * from './state';
+export * from './sync-registry';

package/lib/editor/managers/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./command"), exports);
 __exportStar(require("./interaction"), exports);
 __exportStar(require("./plugin"), exports);
 __exportStar(require("./state"), exports);
+__exportStar(require("./sync-registry"), exports);

package/lib/editor/managers/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 { ElementProps, ICommandManager, IEditor, IStateManager, StateManagerInitOptions } from '../types';
 export declare class StateManager implements IStateManager {
@@ -12,7 +12,9 @@ export declare class StateManager implements 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;
     /**
      * 不包含文本内容、图标类型更新

package/lib/editor/managers/state.js

@@ -28,6 +28,8 @@ class StateManager {
     }
     updateItemDatum(indexes, datum) {
         const item = (0, utils_1.getDatumByIndexes)(this.options.data, indexes);
+        if (item == null || indexes.length === 0)
+            return;
         Object.assign(item, datum);
         this.emitter.emit('options:data:item:update', { indexes, datum });
         this.emitter.emit('options:change', {
@@ -77,11 +79,14 @@ class StateManager {
     updateElement(element, props) {
         this.updateBuiltInElement(element, props);
     }
-    updateOptions(options) {
-        this.options = Object.assign(Object.assign({}, this.options), options);
-        if (this.options.padding !== undefined) {
-            (0, utils_1.setSVGPadding)(this.editor.getDocument(), (0, utils_1.parsePadding)(this.options.padding));
-        }
+    updateOptions(options, execOptions) {
+        const { bubbleUp = false } = execOptions || {};
+        (0, utils_2.applyOptionUpdates)(this.options, options, '', {
+            bubbleUp,
+            collector: (path, newVal, oldVal) => {
+                this.editor.syncRegistry.trigger(path, newVal, oldVal);
+            },
+        });
         this.emitter.emit('options:change', {
             type: 'options:change',
             changes: [
@@ -112,6 +117,8 @@ class StateManager {
         const indexes = isItemElement ? (0, utils_2.getIndexesFromElement)(element) : undefined;
         if (isItemElement) {
             const datum = (0, utils_1.getDatumByIndexes)(data, indexes);
+            if (datum == null)
+                return;
             const key = role.replace('item-', '');
             datum.attributes || (datum.attributes = {});
             (_a = datum.attributes)[key] || (_a[key] = {});

package/lib/editor/managers/sync-registry.d.ts

@@ -0,0 +1,15 @@
+import { ISyncRegistry, SyncHandler } from '../types';
+type OptionsGetter = () => any;
+export declare class SyncRegistry implements ISyncRegistry {
+    private getOptions;
+    private handlers;
+    private isDispatching;
+    private isDestroyed;
+    constructor(getOptions: OptionsGetter);
+    register(path: string, handler: SyncHandler, options?: {
+        immediate?: boolean;
+    }): () => void;
+    trigger(path: string, newVal: any, oldVal: any): void;
+    destroy(): void;
+}
+export {};

package/lib/editor/managers/sync-registry.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncRegistry = void 0;
+const lodash_es_1 = require("lodash-es");
+class SyncRegistry {
+    constructor(getOptions) {
+        this.getOptions = getOptions;
+        this.handlers = new Map();
+        // lock to prevent recursive updates
+        this.isDispatching = false;
+        this.isDestroyed = false;
+    }
+    register(path, handler, options) {
+        if (!this.handlers.has(path)) {
+            this.handlers.set(path, new Set());
+        }
+        this.handlers.get(path).add(handler);
+        if (options === null || options === void 0 ? void 0 : options.immediate) {
+            const currentVal = (0, lodash_es_1.get)(this.getOptions(), path);
+            handler(currentVal, undefined);
+        }
+        return () => {
+            const set = this.handlers.get(path);
+            if (set) {
+                set.delete(handler);
+                if (set.size === 0) {
+                    this.handlers.delete(path);
+                }
+            }
+        };
+    }
+    trigger(path, newVal, oldVal) {
+        if (this.isDestroyed || this.isDispatching) {
+            if (this.isDispatching) {
+                console.warn(`[SyncRegistry] Recursive update detected on ${path}. Skipped to prevent loop.`);
+            }
+            return;
+        }
+        const handlers = this.handlers.get(path);
+        if (handlers) {
+            this.isDispatching = true;
+            try {
+                handlers.forEach((fn) => fn(newVal, oldVal));
+            }
+            finally {
+                this.isDispatching = false;
+            }
+        }
+    }
+    destroy() {
+        this.isDestroyed = true;
+        this.handlers.clear();
+    }
+}
+exports.SyncRegistry = SyncRegistry;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
-const utils_1 = require("../../../../utils");
+const utils_1 = require("../../../utils");
 const IconButton = ({ icon, onClick, activate = false, }) => {
     ensureIconButtonStyle();
     const button = document.createElement('button');

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = ColorPicker;
 const culori_1 = require("culori");
-const utils_1 = require("../../../../utils");
+const utils_1 = require("../../../utils");
 const COLOR_PICKER_CLASS = 'infographic-color-picker';
 const COLOR_PICKER_SWATCHES_CLASS = `${COLOR_PICKER_CLASS}__swatches`;
 const COLOR_PICKER_SWATCH_CLASS = `${COLOR_PICKER_CLASS}__swatch`;