@antv/infographic 0.1.2 → 0.1.3

package/lib/editor/interactions/index.js

@@ -0,0 +1,19 @@
+"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;
+var base_1 = require("./base");
+Object.defineProperty(exports, "Interaction", { enumerable: true, get: function () { return base_1.Interaction; } });
+var brush_select_1 = require("./brush-select");
+Object.defineProperty(exports, "BrushSelect", { enumerable: true, get: function () { return brush_select_1.BrushSelect; } });
+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_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");
+Object.defineProperty(exports, "HotkeyHistory", { enumerable: true, get: function () { return hotkey_history_1.HotkeyHistory; } });
+var select_highlight_1 = require("./select-highlight");
+Object.defineProperty(exports, "SelectHighlight", { enumerable: true, get: function () { return select_highlight_1.SelectHighlight; } });
+var zoom_wheel_1 = require("./zoom-wheel");
+Object.defineProperty(exports, "ZoomWheel", { enumerable: true, get: function () { return zoom_wheel_1.ZoomWheel; } });

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

@@ -0,0 +1,16 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class SelectHighlight extends Interaction implements IInteraction {
+    name: string;
+    private highlightMasks;
+    private combinedBoundsMask?;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleSelectionChanged;
+    private handleGeometryChanged;
+    private handleHistoryChanged;
+    private highlightSelection;
+    private drawElementMasks;
+    private drawCombinedBoundsMask;
+    private clearMasks;
+}

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectHighlight = void 0;
+const bounds_1 = require("../../jsx/utils/bounds");
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+const base_1 = require("./base");
+class SelectHighlight extends base_1.Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'select-highlight';
+        this.highlightMasks = [];
+        this.handleSelectionChanged = ({ next }) => {
+            this.highlightSelection(next);
+        };
+        this.handleGeometryChanged = ({ target, }) => {
+            if (this.interaction.isSelected(target)) {
+                this.highlightSelection(this.interaction.getSelection());
+            }
+        };
+        this.handleHistoryChanged = () => {
+            this.highlightSelection(this.interaction.getSelection());
+        };
+    }
+    init(options) {
+        super.init(options);
+        const { emitter } = options;
+        emitter.on('selection:change', this.handleSelectionChanged);
+        emitter.on('selection:geometrychange', this.handleGeometryChanged);
+        emitter.on('history:change', this.handleHistoryChanged);
+        this.highlightSelection(this.interaction.getSelection());
+    }
+    destroy() {
+        this.clearMasks();
+        const { emitter } = this;
+        emitter.off('selection:change', this.handleSelectionChanged);
+        emitter.off('selection:geometrychange', this.handleGeometryChanged);
+        emitter.off('history:change', this.handleHistoryChanged);
+    }
+    highlightSelection(selection) {
+        if (selection.length === 1 && (0, utils_1.isEditableText)(selection[0])) {
+            this.clearMasks();
+            return;
+        }
+        this.drawElementMasks(selection);
+        this.drawCombinedBoundsMask(selection);
+    }
+    drawElementMasks(selection) {
+        let index = 0;
+        for (; index < selection.length; index++) {
+            const { x, y, width, height } = (0, utils_2.getElementViewportBounds)(this.editor.getDocument(), selection[index]);
+            const attrs = {
+                x,
+                y,
+                width,
+                height,
+                fill: 'none',
+                stroke: '#3384F5',
+                'stroke-width': 1,
+                'pointer-events': 'none',
+            };
+            const mask = this.highlightMasks[index];
+            if (mask) {
+                (0, utils_1.setAttributes)(mask, attrs);
+            }
+            else {
+                this.highlightMasks[index] = this.interaction.appendTransientElement((0, utils_1.createElement)('rect', attrs));
+            }
+        }
+        for (; index < this.highlightMasks.length; index++) {
+            this.highlightMasks[index].remove();
+        }
+        this.highlightMasks = this.highlightMasks.slice(0, selection.length);
+    }
+    drawCombinedBoundsMask(selection) {
+        if (selection.length < 2) {
+            this.combinedBoundsMask?.remove();
+            this.combinedBoundsMask = undefined;
+            return;
+        }
+        const bounds = (0, bounds_1.getCombinedBounds)(selection.map((element) => (0, utils_2.getElementViewportBounds)(this.editor.getDocument(), element)));
+        const attrs = {
+            ...bounds,
+            fill: 'none',
+            stroke: '#3384F5',
+            'stroke-width': 2,
+            'pointer-events': 'none',
+        };
+        if (this.combinedBoundsMask) {
+            (0, utils_1.setAttributes)(this.combinedBoundsMask, attrs);
+        }
+        else {
+            this.combinedBoundsMask = this.interaction.appendTransientElement((0, utils_1.createElement)('rect', attrs));
+        }
+    }
+    clearMasks() {
+        this.highlightMasks.forEach((mask) => mask.remove());
+        this.highlightMasks = [];
+        this.combinedBoundsMask?.remove();
+        this.combinedBoundsMask = undefined;
+    }
+}
+exports.SelectHighlight = SelectHighlight;

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

@@ -0,0 +1,8 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class ZoomWheel extends Interaction implements IInteraction {
+    name: string;
+    private wheelListener;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomWheel = void 0;
+const lodash_es_1 = require("lodash-es");
+const utils_1 = require("../../utils");
+const commands_1 = require("../commands");
+const base_1 = require("./base");
+const MIN_VIEWBOX_SIZE = 1;
+const MIN_PADDING = -5000;
+const MAX_PADDING = 5000;
+class ZoomWheel extends base_1.Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'zoom-wheel';
+        this.wheelListener = (event) => {
+            if (!this.interaction.isActive())
+                return;
+            if (!event.ctrlKey && !event.metaKey)
+                return;
+            event.preventDefault();
+            const factor = event.deltaY > 0 ? 1.1 : 0.9;
+            const current = this.state.getOptions();
+            const currentPadding = current.padding ?? 0;
+            const parsed = (0, utils_1.parsePadding)(currentPadding);
+            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)
+                return;
+            const command = new commands_1.UpdateOptionsCommand({
+                padding: scaled,
+            });
+            void this.commander.execute(command);
+        };
+    }
+    init(options) {
+        super.init(options);
+        document.addEventListener('wheel', this.wheelListener, { passive: false });
+    }
+    destroy() {
+        document.removeEventListener('wheel', this.wheelListener);
+    }
+}
+exports.ZoomWheel = ZoomWheel;

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

@@ -0,0 +1,19 @@
+import type { CommandManagerInitOptions, ICommand, ICommandManager } from '../types';
+export declare class CommandManager implements ICommandManager {
+    private emitter;
+    private state;
+    private undoStack;
+    private redoStack;
+    init(options: CommandManagerInitOptions): void;
+    execute(command: ICommand): Promise<void>;
+    executeBatch(commands: ICommand[]): Promise<void>;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    serialize(): any[];
+    clear(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    getHistorySize(): number;
+    destroy(): void;
+    private emitHistoryChange;
+}

package/lib/editor/managers/command.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandManager = void 0;
+const commands_1 = require("../commands");
+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 commands_1.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,
+        });
+    }
+}
+exports.CommandManager = CommandManager;

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

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

package/lib/editor/managers/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./command"), exports);
+__exportStar(require("./interaction"), exports);
+__exportStar(require("./plugin"), exports);
+__exportStar(require("./state"), exports);

package/lib/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/lib/editor/managers/interaction.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionManager = void 0;
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+class InteractionManager {
+    constructor() {
+        this.extensions = new utils_2.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) ||
+                (0, utils_1.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 = (0, utils_1.getElementByRole)(doc, role);
+        if (container && container.isConnected)
+            return container;
+        const g = (0, utils_1.createElement)('g');
+        (0, utils_1.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();
+    }
+}
+exports.InteractionManager = InteractionManager;

package/lib/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/lib/editor/managers/plugin.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginManager = void 0;
+const utils_1 = require("../utils");
+class PluginManager {
+    constructor() {
+        this.extensions = new utils_1.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();
+    }
+}
+exports.PluginManager = PluginManager;

package/lib/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;
+}