@antv/infographic 0.1.1 → 0.1.3

package/esm/editor/managers/command.js

@@ -0,0 +1,63 @@
+import { BatchCommand } from '../commands';
+export class CommandManager {
+    constructor() {
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+    init(options) {
+        Object.assign(this, options);
+    }
+    async execute(command) {
+        await command.apply(this.state);
+        this.undoStack.push(command);
+        this.redoStack = [];
+        this.emitHistoryChange('execute');
+    }
+    async executeBatch(commands) {
+        if (commands.length === 0)
+            return;
+        const batchCommand = new BatchCommand(commands);
+        await this.execute(batchCommand);
+    }
+    async undo() {
+        const command = this.undoStack.pop();
+        if (command) {
+            await command.undo(this.state);
+            this.redoStack.push(command);
+            this.emitHistoryChange('undo');
+        }
+    }
+    async redo() {
+        const command = this.redoStack.pop();
+        if (command) {
+            await command.apply(this.state);
+            this.undoStack.push(command);
+            this.emitHistoryChange('redo');
+        }
+    }
+    serialize() {
+        return this.undoStack.map((cmd) => cmd.serialize());
+    }
+    clear() {
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+    canUndo() {
+        return this.undoStack.length > 0;
+    }
+    canRedo() {
+        return this.redoStack.length > 0;
+    }
+    getHistorySize() {
+        return this.undoStack.length;
+    }
+    destroy() {
+        this.clear();
+    }
+    emitHistoryChange(action) {
+        this.emitter?.emit('history:change', {
+            type: 'history:change',
+            action,
+        });
+    }
+}

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

@@ -0,0 +1,4 @@
+export * from './command';
+export * from './interaction';
+export * from './plugin';
+export * from './state';

package/esm/editor/managers/index.js

@@ -0,0 +1,4 @@
+export * from './command';
+export * from './interaction';
+export * from './plugin';
+export * from './state';

package/esm/editor/managers/interaction.d.ts

@@ -0,0 +1,33 @@
+import type { IInteraction, IInteractionManager, InteractionManagerInitOptions, Selection, SelectMode } from '../types';
+export declare class InteractionManager implements IInteractionManager {
+    private extensions;
+    private emitter;
+    private editor;
+    private commander;
+    private state;
+    private interactions;
+    private active;
+    private running;
+    private concurrentInteractions;
+    private selection;
+    init(options: InteractionManagerInitOptions): void;
+    isActive(): boolean;
+    select(items: Selection, mode: SelectMode): void;
+    getSelection(): import("../../types").Element[];
+    isSelected(item: Selection[number]): boolean;
+    clearSelection(): void;
+    private handleClick;
+    private activate;
+    private deactivate;
+    /**
+     * 执行互斥交互操作（同一时间只能有一个互斥交互在进行）
+     */
+    executeExclusiveInteraction(instance: IInteraction, callback: () => Promise<void>): Promise<void>;
+    /**
+     * 执行协同交互操作（允许多个协同交互同时进行）
+     */
+    executeConcurrentInteraction(instance: IInteraction, callback: () => Promise<void>): Promise<void>;
+    private getOrCreateTransientContainer;
+    appendTransientElement<T extends SVGElement>(element: T): T;
+    destroy(): void;
+}

package/esm/editor/managers/interaction.js

@@ -0,0 +1,196 @@
+import { createElement, getElementByRole, isInfographicComponent, setElementRole, } from '../../utils';
+import { Extension } from '../utils';
+export class InteractionManager {
+    constructor() {
+        this.extensions = new Extension();
+        this.interactions = [];
+        this.active = false;
+        this.running = null;
+        this.concurrentInteractions = new Set();
+        this.selection = new Set();
+        this.handleClick = (event) => {
+            const doc = this.editor.getDocument();
+            const target = event.target;
+            if (!target) {
+                this.deactivate();
+                return;
+            }
+            // 点击画布 SVG 或者标记为组件的元素
+            if (doc.contains(target) ||
+                isInfographicComponent(target))
+                this.activate();
+            else
+                this.deactivate();
+        };
+    }
+    init(options) {
+        Object.assign(this, options);
+        document.addEventListener('click', this.handleClick);
+        this.interactions.forEach((interaction) => {
+            this.extensions.register(interaction.name, interaction);
+            interaction.init({
+                emitter: this.emitter,
+                editor: this.editor,
+                commander: this.commander,
+                state: this.state,
+                interaction: this,
+            });
+            this.emitter.emit('interaction:registered', interaction);
+        });
+    }
+    isActive() {
+        return this.active;
+    }
+    select(items, mode) {
+        const previous = this.getSelection();
+        const added = [];
+        const removed = [];
+        if (mode === 'replace') {
+            const next = new Set(items);
+            previous.forEach((id) => {
+                if (!next.has(id))
+                    removed.push(id);
+            });
+            items.forEach((id) => {
+                if (!this.selection.has(id))
+                    added.push(id);
+            });
+            this.selection = next;
+        }
+        else if (mode === 'add') {
+            items.forEach((id) => {
+                if (!this.selection.has(id)) {
+                    this.selection.add(id);
+                    added.push(id);
+                }
+            });
+        }
+        else if (mode === 'remove') {
+            items.forEach((id) => {
+                if (this.selection.delete(id)) {
+                    removed.push(id);
+                }
+            });
+        }
+        else if (mode === 'toggle') {
+            items.forEach((id) => {
+                if (this.selection.has(id)) {
+                    this.selection.delete(id);
+                    removed.push(id);
+                }
+                else {
+                    this.selection.add(id);
+                    added.push(id);
+                }
+            });
+        }
+        const next = this.getSelection();
+        const payload = {
+            type: 'selection:change',
+            previous,
+            next,
+            added,
+            removed,
+            mode,
+        };
+        this.emitter.emit('selection:change', payload);
+    }
+    getSelection() {
+        return [...this.selection];
+    }
+    isSelected(item) {
+        return this.selection.has(item);
+    }
+    clearSelection() {
+        const previous = this.getSelection();
+        this.selection.clear();
+        const payload = {
+            type: 'selection:change',
+            previous,
+            next: [],
+            added: [],
+            removed: previous,
+            mode: 'replace',
+        };
+        this.emitter.emit('selection:change', payload);
+    }
+    activate() {
+        this.active = true;
+        this.emitter.emit('activated');
+    }
+    deactivate() {
+        this.active = false;
+        this.running = null;
+        this.clearSelection();
+        this.emitter.emit('deactivated');
+    }
+    /**
+     * 执行互斥交互操作（同一时间只能有一个互斥交互在进行）
+     */
+    async executeExclusiveInteraction(instance, callback) {
+        // 如果未激活或已有互斥交互在运行，则拒绝执行
+        if (!this.active || this.running)
+            return;
+        this.running = instance;
+        try {
+            this.emitter.emit('interaction:started', instance);
+            await callback();
+            this.emitter.emit('interaction:ended', instance);
+        }
+        catch (error) {
+            console.error(`Error occurred during exclusive interaction "${instance.name}":`, error);
+            this.emitter.emit('interaction:error', instance, error);
+        }
+        finally {
+            this.running = null;
+        }
+    }
+    /**
+     * 执行协同交互操作（允许多个协同交互同时进行）
+     */
+    async executeConcurrentInteraction(instance, callback) {
+        if (!this.active)
+            return;
+        this.concurrentInteractions.add(instance);
+        try {
+            this.emitter.emit('interaction:started', instance);
+            await callback();
+            this.emitter.emit('interaction:ended', instance);
+        }
+        catch (error) {
+            console.error(`Error occurred during concurrent interaction "${instance.name}":`, error);
+            this.emitter.emit('interaction:error', instance, error);
+        }
+        finally {
+            this.concurrentInteractions.delete(instance);
+        }
+    }
+    getOrCreateTransientContainer() {
+        const role = 'transient-container';
+        const doc = this.editor.getDocument();
+        const container = getElementByRole(doc, role);
+        if (container && container.isConnected)
+            return container;
+        const g = createElement('g');
+        setElementRole(g, role);
+        doc.appendChild(g);
+        return g;
+    }
+    appendTransientElement(element) {
+        const container = this.getOrCreateTransientContainer();
+        container.appendChild(element);
+        return element;
+    }
+    destroy() {
+        this.extensions.forEach((interaction) => {
+            interaction.destroy();
+            this.emitter.emit('interaction:destroyed', interaction);
+        });
+        this.extensions.destroy();
+        this.active = false;
+        this.running = null;
+        this.clearSelection();
+        document.removeEventListener('click', this.handleClick);
+        this.getOrCreateTransientContainer().remove();
+    }
+}

package/esm/editor/managers/plugin.d.ts

@@ -0,0 +1,14 @@
+import type { IPlugin, IPluginManager, PluginManagerInitOptions } from '../types';
+export declare class PluginManager implements IPluginManager {
+    private extensions;
+    private emitter;
+    private editor;
+    private commander;
+    private state;
+    init(options: PluginManagerInitOptions, plugins?: IPlugin[]): void;
+    getPlugin<T extends IPlugin>(name: string): T | undefined;
+    getPlugins(): ReadonlyMap<string, IPlugin>;
+    registerPlugin(plugin: IPlugin): void;
+    unregisterPlugin(name: string): void;
+    destroy(): void;
+}

package/esm/editor/managers/plugin.js

@@ -0,0 +1,45 @@
+import { Extension } from '../utils';
+export class PluginManager {
+    constructor() {
+        this.extensions = new Extension();
+    }
+    init(options, plugins = []) {
+        Object.assign(this, options);
+        plugins.forEach((plugin) => {
+            this.registerPlugin(plugin);
+        });
+    }
+    getPlugin(name) {
+        return this.extensions.get(name);
+    }
+    getPlugins() {
+        return this.extensions.getAll();
+    }
+    registerPlugin(plugin) {
+        this.extensions.register(plugin.name, plugin);
+        const pluginInitOptions = {
+            emitter: this.emitter,
+            editor: this.editor,
+            commander: this.commander,
+            plugin: this,
+            state: this.state,
+        };
+        plugin.init(pluginInitOptions);
+        this.emitter.emit('plugin:registered', plugin);
+    }
+    unregisterPlugin(name) {
+        const plugin = this.extensions.get(name);
+        if (plugin) {
+            plugin.destroy();
+            this.extensions.unregister(name);
+            this.emitter.emit('plugin:unregistered', plugin);
+        }
+    }
+    destroy() {
+        this.extensions.getAll().forEach((plugin) => {
+            this.unregisterPlugin(plugin.name);
+            this.emitter.emit('plugin:destroyed', plugin);
+        });
+        this.extensions.destroy();
+    }
+}

package/esm/editor/managers/state.d.ts

@@ -0,0 +1,22 @@
+import type { ParsedInfographicOptions } from '../../options';
+import type { Element, IEventEmitter, ItemDatum } from '../../types';
+import type { ElementProps, ICommandManager, IEditor, IStateManager, StateManagerInitOptions } from '../types';
+export declare class StateManager implements IStateManager {
+    emitter: IEventEmitter;
+    editor: IEditor;
+    command: ICommandManager;
+    options: ParsedInfographicOptions;
+    init(options: StateManagerInitOptions): void;
+    addItemDatum(indexes: number[], datum: ItemDatum | ItemDatum[]): void;
+    updateItemDatum(indexes: number[], datum: Partial<ItemDatum>): void;
+    removeItemDatum(indexes: number[], count?: number): void;
+    updateData(key: string, value: any): void;
+    updateElement(element: Element, props: Partial<ElementProps>): void;
+    updateOptions(options: ParsedInfographicOptions): void;
+    getOptions(): ParsedInfographicOptions;
+    /**
+     * 不包含文本内容、图标类型更新
+     */
+    private updateBuiltInElement;
+    destroy(): void;
+}

package/esm/editor/managers/state.js

@@ -0,0 +1,141 @@
+import { getDatumByIndexes, getElementRole, isIconElement, parsePadding, setSVGPadding, } from '../../utils';
+import { buildItemPath, getChildrenDataByIndexes, getIndexesFromElement, } from '../utils';
+export class StateManager {
+    init(options) {
+        Object.assign(this, options);
+    }
+    addItemDatum(indexes, datum) {
+        const pre = indexes.slice(0, -1);
+        const last = indexes[indexes.length - 1];
+        const arr = Array.isArray(datum) ? datum : [datum];
+        const list = getChildrenDataByIndexes(this.options.data, pre);
+        list.splice(last, 0, ...arr);
+        this.emitter.emit('options:data:item:add', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'add',
+                    path: 'data.items',
+                    indexes,
+                    value: arr,
+                },
+            ],
+        });
+    }
+    updateItemDatum(indexes, datum) {
+        const item = getDatumByIndexes(this.options.data, indexes);
+        Object.assign(item, datum);
+        this.emitter.emit('options:data:item:update', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: 'data.items',
+                    indexes,
+                    value: datum,
+                },
+            ],
+        });
+    }
+    removeItemDatum(indexes, count = 1) {
+        const pre = indexes.slice(0, -1);
+        const last = indexes[indexes.length - 1];
+        const list = getChildrenDataByIndexes(this.options.data, pre);
+        const datum = list.splice(last, count);
+        this.emitter.emit('options:data:item:remove', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'remove',
+                    path: 'data.items',
+                    indexes,
+                    value: datum,
+                },
+            ],
+        });
+    }
+    updateData(key, value) {
+        this.options.data[key] = value;
+        this.emitter.emit('options:data:update', { key, value });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: `data.${key}`,
+                    value,
+                },
+            ],
+        });
+    }
+    updateElement(element, props) {
+        this.updateBuiltInElement(element, props);
+    }
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+        if (this.options.padding !== undefined) {
+            setSVGPadding(this.editor.getDocument(), parsePadding(this.options.padding));
+        }
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: '',
+                    value: options,
+                },
+            ],
+        });
+    }
+    getOptions() {
+        return this.options;
+    }
+    /**
+     * 不包含文本内容、图标类型更新
+     */
+    updateBuiltInElement(element, props) {
+        var _a, _b;
+        const { data } = this.options;
+        const { attributes = {} } = props;
+        const role = getElementRole(element);
+        const isItemElement = isIconElement(element) ||
+            "item-label" /* ElementTypeEnum.ItemLabel */ === role ||
+            "item-desc" /* ElementTypeEnum.ItemDesc */ === role ||
+            "item-value" /* ElementTypeEnum.ItemValue */ === role ||
+            "items-illus" /* ElementTypeEnum.ItemsIllus */ === role;
+        const indexes = isItemElement ? getIndexesFromElement(element) : undefined;
+        if (isItemElement) {
+            const datum = getDatumByIndexes(data, indexes);
+            const key = role.replace('item-', '');
+            datum.attributes || (datum.attributes = {});
+            (_a = datum.attributes)[key] || (_a[key] = {});
+            Object.assign(datum.attributes[key], attributes);
+        }
+        else if ("title" /* ElementTypeEnum.Title */ === role ||
+            "desc" /* ElementTypeEnum.Desc */ === role ||
+            "illus" /* ElementTypeEnum.Illus */ === role) {
+            data.attributes || (data.attributes = {});
+            (_b = data.attributes)[role] || (_b[role] = {});
+            Object.assign(data.attributes[role], attributes);
+        }
+        this.emitter.emit('options:element:update', { element, props });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    role,
+                    indexes,
+                    path: isItemElement
+                        ? `${buildItemPath(indexes)}.attributes.${role.replace('item-', '')}`
+                        : `data.attributes.${role}`,
+                    value: props,
+                },
+            ],
+        });
+    }
+    destroy() { }
+}

package/esm/editor/plugins/base.d.ts

@@ -0,0 +1,12 @@
+import type { IEventEmitter } from '../../types';
+import type { ICommandManager, IEditor, IPlugin, IPluginManager, IStateManager, PluginInitOptions } from '../types';
+export declare abstract class Plugin implements IPlugin {
+    abstract name: string;
+    protected emitter: IEventEmitter;
+    protected editor: IEditor;
+    protected commander: ICommandManager;
+    protected plugin: IPluginManager;
+    protected state: IStateManager;
+    init(options: PluginInitOptions): void;
+    abstract destroy(): void;
+}

package/esm/editor/plugins/base.js

@@ -0,0 +1,5 @@
+export class Plugin {
+    init(options) {
+        Object.assign(this, options);
+    }
+}

package/esm/editor/plugins/edit-bar/components/button.d.ts

@@ -0,0 +1,12 @@
+import type { Icon } from './icons';
+export type Button = HTMLButtonElement & IconButtonHandle;
+export interface IconButtonProps {
+    icon: Icon;
+    onClick?: () => void;
+    activate?: boolean;
+}
+export interface IconButtonHandle {
+    activate: boolean;
+    setActivate: (activate: boolean) => void;
+}
+export declare const IconButton: ({ icon, onClick, activate, }: IconButtonProps) => Button;

package/esm/editor/plugins/edit-bar/components/button.js

@@ -0,0 +1,53 @@
+import { injectStyleOnce } from '../../../../utils';
+export const IconButton = ({ icon, onClick, activate = false, }) => {
+    ensureIconButtonStyle();
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add(ICON_BUTTON_CLASS);
+    if (activate)
+        button.setAttribute('data-activate', 'true');
+    if (onClick)
+        button.addEventListener('click', onClick);
+    const iconElement = icon();
+    button.appendChild(iconElement);
+    const setActivate = (next) => {
+        if (next)
+            button.setAttribute('data-activate', 'true');
+        else
+            button.removeAttribute('data-activate');
+    };
+    return Object.assign(button, {
+        setActivate: setActivate.bind(button),
+        activate,
+    });
+};
+const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
+const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
+function ensureIconButtonStyle() {
+    injectStyleOnce(ICON_BUTTON_STYLE_ID, `
+.${ICON_BUTTON_CLASS} {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  color: #000000d9;
+  border: none;
+  border-radius: 6px;
+  background-color: #fff;
+  cursor: pointer;
+  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.${ICON_BUTTON_CLASS}:hover {
+  background-color: #f5f5f5;
+}
+.${ICON_BUTTON_CLASS}:active {
+  background-color: #d9d9d9;
+}
+.${ICON_BUTTON_CLASS}[data-activate="true"] {
+  background-color: #d9d9d9;
+}
+`);
+}

package/esm/editor/plugins/edit-bar/components/color-picker.d.ts

@@ -0,0 +1,10 @@
+export type ColorPickerProps = {
+    value?: string;
+    swatches?: string[];
+    onChange?: (value: string) => void;
+};
+export type ColorPickerHandle = {
+    setValue: (value?: string) => void;
+    destroy: () => void;
+};
+export declare function ColorPicker(props: ColorPickerProps): HTMLDivElement & ColorPickerHandle;