@antv/infographic 0.1.2 → 0.1.4

package/lib/editor/commands/Batch.d.ts

@@ -0,0 +1,11 @@
+import type { ICommand, IStateManager } from '../types';
+export declare class BatchCommand implements ICommand {
+    private commands;
+    constructor(commands: ICommand[]);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        commands: any[];
+    };
+}

package/lib/editor/commands/Batch.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BatchCommand = void 0;
+class BatchCommand {
+    constructor(commands) {
+        this.commands = commands;
+    }
+    async apply(state) {
+        for (const command of this.commands) {
+            await command.apply(state);
+        }
+    }
+    async undo(state) {
+        for (let i = this.commands.length - 1; i >= 0; i--) {
+            await this.commands[i].undo(state);
+        }
+    }
+    serialize() {
+        return {
+            type: 'batch',
+            commands: this.commands.map((cmd) => cmd.serialize()),
+        };
+    }
+}
+exports.BatchCommand = BatchCommand;

package/lib/editor/commands/UpdateElement.d.ts

@@ -0,0 +1,16 @@
+import type { Element } from '../../types';
+import type { ElementProps, ICommand, IStateManager } from '../types';
+export declare class UpdateElementCommand implements ICommand {
+    private element;
+    private modified;
+    private original?;
+    constructor(element: Element, modified: Partial<ElementProps>, original?: Partial<ElementProps>);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        elementId: string;
+        modified: Partial<ElementProps>;
+        original: Partial<ElementProps> | undefined;
+    };
+}

package/lib/editor/commands/UpdateElement.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateElementCommand = void 0;
+const utils_1 = require("../../utils");
+class UpdateElementCommand {
+    constructor(element, modified, original) {
+        this.element = element;
+        this.modified = modified;
+        const computedOriginal = getOriginalProps(element, modified);
+        this.original = mergeOriginalProps(computedOriginal, original);
+    }
+    async apply(state) {
+        updateElement(this.element, this.modified);
+        state.updateElement(this.element, this.modified);
+    }
+    async undo(state) {
+        if (this.original) {
+            updateElement(this.element, this.original);
+            state.updateElement(this.element, this.original);
+        }
+    }
+    serialize() {
+        return {
+            type: 'update-element',
+            elementId: this.element.id,
+            modified: this.modified,
+            original: this.original,
+        };
+    }
+}
+exports.UpdateElementCommand = UpdateElementCommand;
+function updateElement(element, props) {
+    if ((0, utils_1.isEditableText)(element)) {
+        (0, utils_1.updateTextElement)(element, props);
+    }
+    else if ((0, utils_1.isIconElement)(element)) {
+        (0, utils_1.updateIconElement)(element, undefined, props.attributes);
+    }
+    else if (props.attributes) {
+        (0, utils_1.setAttributes)(element, props.attributes);
+    }
+}
+function getOriginalProps(element, modified) {
+    const modifiedAttrKeys = Object.keys(modified.attributes || {});
+    const originalAttributes = (0, utils_1.getAttributes)(element, modifiedAttrKeys, false);
+    const assignModifiedAttributes = (attrs) => {
+        if (!attrs)
+            return;
+        modifiedAttrKeys.forEach((key) => {
+            if (key in attrs)
+                originalAttributes[key] = attrs[key];
+        });
+    };
+    const original = {
+        ...modified,
+        attributes: originalAttributes,
+    };
+    if ((0, utils_1.isEditableText)(element)) {
+        const { attributes } = (0, utils_1.getTextElementProps)(element);
+        assignModifiedAttributes(attributes);
+    }
+    else if ((0, utils_1.isIconElement)(element)) {
+        const entity = (0, utils_1.getIconEntity)(element);
+        if (!entity)
+            return;
+        assignModifiedAttributes((0, utils_1.getIconAttrs)(element));
+    }
+    // TODO illus
+    return original;
+}
+function mergeOriginalProps(computed, provided) {
+    if (!computed)
+        return provided;
+    if (!provided)
+        return computed;
+    const mergedAttributes = {
+        ...(computed.attributes || {}),
+        ...(provided.attributes || {}),
+    };
+    return {
+        ...computed,
+        ...provided,
+        attributes: Object.keys(mergedAttributes).length
+            ? mergedAttributes
+            : undefined,
+    };
+}

package/lib/editor/commands/UpdateOptions.d.ts

@@ -0,0 +1,14 @@
+import type { ParsedInfographicOptions } from '../../options';
+import type { ICommand, IStateManager } from '../types';
+export declare class UpdateOptionsCommand implements ICommand {
+    private options;
+    private original?;
+    constructor(options: Partial<ParsedInfographicOptions>, original?: ParsedInfographicOptions | undefined);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        options: Partial<ParsedInfographicOptions>;
+        original: ParsedInfographicOptions | undefined;
+    };
+}

package/lib/editor/commands/UpdateOptions.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateOptionsCommand = void 0;
+class UpdateOptionsCommand {
+    constructor(options, original) {
+        this.options = options;
+        this.original = original;
+    }
+    async apply(state) {
+        const prev = state.getOptions();
+        if (!this.original) {
+            this.original = prev;
+        }
+        state.updateOptions({ ...prev, ...this.options });
+    }
+    async undo(state) {
+        if (this.original) {
+            state.updateOptions(this.original);
+        }
+    }
+    serialize() {
+        return {
+            type: 'update-options',
+            options: this.options,
+            original: this.original,
+        };
+    }
+}
+exports.UpdateOptionsCommand = UpdateOptionsCommand;

package/lib/editor/commands/UpdateText.d.ts

@@ -0,0 +1,16 @@
+import type { TextElement } from '../../types';
+import type { ICommand, IStateManager } from '../types';
+export declare class UpdateTextCommand implements ICommand {
+    private element;
+    private originalText;
+    private modifiedText;
+    constructor(element: TextElement, newText: string, originalText?: string);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        elementId: string;
+        original: string;
+        modified: string;
+    };
+}

package/lib/editor/commands/UpdateText.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateTextCommand = void 0;
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+class UpdateTextCommand {
+    constructor(element, newText, originalText) {
+        this.element = element;
+        this.originalText = originalText ?? (0, utils_1.getTextContent)(element);
+        this.modifiedText = newText;
+    }
+    async apply(state) {
+        if (this.originalText === this.modifiedText)
+            return;
+        (0, utils_1.setTextContent)(this.element, this.modifiedText);
+        updateItemText(state, this.element, this.modifiedText);
+    }
+    async undo(state) {
+        if (this.originalText === this.modifiedText)
+            return;
+        (0, utils_1.setTextContent)(this.element, this.originalText);
+        updateItemText(state, this.element, this.originalText);
+    }
+    serialize() {
+        return {
+            type: 'update-text',
+            elementId: this.element.id,
+            original: this.originalText,
+            modified: this.modifiedText,
+        };
+    }
+}
+exports.UpdateTextCommand = UpdateTextCommand;
+function updateItemText(state, element, text) {
+    const role = (0, utils_1.getElementRole)(element);
+    if (role.startsWith('item-')) {
+        const key = role.replace('item-', '');
+        const indexes = (0, utils_2.getIndexesFromElement)(element);
+        state.updateItemDatum(indexes, { [key]: text });
+    }
+    else {
+        state.updateData(role, text);
+    }
+}

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

@@ -0,0 +1,4 @@
+export * from './Batch';
+export * from './UpdateElement';
+export * from './UpdateOptions';
+export * from './UpdateText';

package/lib/editor/commands/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("./Batch"), exports);
+__exportStar(require("./UpdateElement"), exports);
+__exportStar(require("./UpdateOptions"), exports);
+__exportStar(require("./UpdateText"), exports);

package/lib/editor/editor.d.ts

@@ -0,0 +1,16 @@
+import type { ParsedInfographicOptions } from '../options';
+import type { IEventEmitter } from '../types';
+import { InteractionManager } from './managers';
+import type { ICommandManager, IEditor, IPluginManager, IStateManager } from './types';
+export declare class Editor implements IEditor {
+    private emitter;
+    private document;
+    private options;
+    state: IStateManager;
+    commander: ICommandManager;
+    plugin: IPluginManager;
+    interaction: InteractionManager;
+    constructor(emitter: IEventEmitter, document: SVGSVGElement, options: ParsedInfographicOptions);
+    getDocument(): SVGSVGElement;
+    destroy(): void;
+}

package/lib/editor/editor.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const managers_1 = require("./managers");
+class Editor {
+    constructor(emitter, document, options) {
+        this.emitter = emitter;
+        this.document = document;
+        this.options = options;
+        if (!document.isConnected) {
+            throw new Error('The provided document is not connected to the DOM.');
+        }
+        document.style.userSelect = 'none';
+        const commander = new managers_1.CommandManager();
+        const state = new managers_1.StateManager();
+        const plugin = new managers_1.PluginManager();
+        const interaction = new managers_1.InteractionManager();
+        commander.init({ state, emitter });
+        state.init({
+            emitter,
+            editor: this,
+            commander,
+            options,
+        });
+        plugin.init({
+            emitter,
+            editor: this,
+            commander,
+            state,
+        }, options.plugins);
+        interaction.init({
+            emitter,
+            editor: this,
+            commander,
+            state,
+            interactions: options.interactions,
+        });
+        this.commander = commander;
+        this.state = state;
+        this.plugin = plugin;
+        this.interaction = interaction;
+    }
+    getDocument() {
+        return this.document;
+    }
+    destroy() {
+        this.document.style.userSelect = '';
+        this.interaction.destroy();
+        this.plugin.destroy();
+        this.commander.destroy();
+        this.state.destroy();
+    }
+}
+exports.Editor = Editor;

package/lib/editor/index.d.ts

@@ -0,0 +1,4 @@
+export { Editor } from './editor';
+export * from './interactions';
+export * from './plugins';
+export type * from './types';

package/lib/editor/index.js

@@ -0,0 +1,21 @@
+"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 });
+exports.Editor = void 0;
+var editor_1 = require("./editor");
+Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return editor_1.Editor; } });
+__exportStar(require("./interactions"), exports);
+__exportStar(require("./plugins"), exports);

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

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

package/lib/editor/interactions/base.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interaction = void 0;
+class Interaction {
+    init(options) {
+        Object.assign(this, options);
+    }
+}
+exports.Interaction = Interaction;

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

@@ -0,0 +1,23 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class BrushSelect extends Interaction implements IInteraction {
+    name: string;
+    private brush?;
+    private startPoint?;
+    private pointerId?;
+    private shiftKey;
+    private completeInteraction?;
+    private dragging;
+    private dragThreshold;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleStart;
+    private handleMove;
+    private handleEnd;
+    private ensureBrush;
+    private updateBrush;
+    private clearBrush;
+    private collectSelection;
+    private hasElementAtStart;
+    private isTextSelectionTarget;
+}

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

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrushSelect = void 0;
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+const base_1 = require("./base");
+class BrushSelect extends base_1.Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'brush-select';
+        this.shiftKey = false;
+        this.dragging = false;
+        this.dragThreshold = 4;
+        this.handleStart = (event) => {
+            if (!this.interaction.isActive())
+                return;
+            if (event.button !== 0)
+                return;
+            if (this.isTextSelectionTarget(event.target))
+                return;
+            if (this.hasElementAtStart(event.target))
+                return;
+            this.interaction.executeExclusiveInteraction(this, async () => new Promise((resolve) => {
+                this.completeInteraction = resolve;
+                const svg = this.editor.getDocument();
+                this.startPoint = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+                this.pointerId = event.pointerId;
+                this.shiftKey = event.shiftKey;
+                this.dragging = false;
+                window.addEventListener('pointermove', this.handleMove);
+                window.addEventListener('pointerup', this.handleEnd);
+            }));
+        };
+        this.handleMove = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            const svg = this.editor.getDocument();
+            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;
+            if (!this.dragging) {
+                if (Math.hypot(dx, dy) < this.dragThreshold)
+                    return;
+                this.dragging = true;
+                this.ensureBrush();
+                this.updateBrush(this.startPoint, current);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateBrush(this.startPoint, current);
+        };
+        this.handleEnd = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            window.removeEventListener('pointermove', this.handleMove);
+            window.removeEventListener('pointerup', this.handleEnd);
+            let rect = null;
+            if (this.dragging) {
+                event.preventDefault();
+                event.stopPropagation();
+                const svg = this.editor.getDocument();
+                const endPoint = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+                rect = this.updateBrush(this.startPoint, endPoint);
+                this.clearBrush();
+            }
+            this.pointerId = undefined;
+            this.startPoint = undefined;
+            this.dragging = false;
+            const withShift = this.shiftKey;
+            this.shiftKey = false;
+            if (!rect) {
+                this.completeInteraction?.();
+                this.completeInteraction = undefined;
+                return;
+            }
+            const selection = this.collectSelection(rect);
+            this.completeInteraction?.();
+            this.completeInteraction = undefined;
+            if (selection.length === 0) {
+                if (!withShift)
+                    this.interaction.clearSelection();
+                return;
+            }
+            const mode = withShift ? 'add' : 'replace';
+            this.interaction.select(selection, mode);
+        };
+    }
+    init(options) {
+        super.init(options);
+        this.editor.getDocument().addEventListener('pointerdown', this.handleStart);
+    }
+    destroy() {
+        this.clearBrush();
+        this.editor
+            .getDocument()
+            .removeEventListener('pointerdown', this.handleStart);
+        window.removeEventListener('pointermove', this.handleMove);
+        window.removeEventListener('pointerup', this.handleEnd);
+    }
+    ensureBrush() {
+        if (this.brush)
+            return this.brush;
+        this.brush = this.interaction.appendTransientElement((0, utils_1.createElement)('rect', {
+            fill: 'rgba(51, 132, 245, 0.08)',
+            stroke: '#3384F5',
+            'stroke-dasharray': '4 2',
+            'stroke-width': 1,
+            'pointer-events': 'none',
+        }));
+        return this.brush;
+    }
+    updateBrush(start, current) {
+        if (!this.brush)
+            return null;
+        const x = Math.min(start.x, current.x);
+        const y = Math.min(start.y, current.y);
+        const width = Math.abs(start.x - current.x);
+        const height = Math.abs(start.y - current.y);
+        (0, utils_1.setAttributes)(this.brush, { x, y, width, height });
+        return { x, y, width, height };
+    }
+    clearBrush() {
+        this.brush?.remove();
+        this.brush = undefined;
+    }
+    collectSelection(rect) {
+        const svg = this.editor.getDocument();
+        const candidates = Array.from(svg.querySelectorAll('[data-element-type]'));
+        const intersects = (a, b) => {
+            const ax2 = a.x + a.width;
+            const ay2 = a.y + a.height;
+            const bx2 = b.x + b.width;
+            const by2 = b.y + b.height;
+            return !(ax2 < b.x || bx2 < a.x || ay2 < b.y || by2 < a.y);
+        };
+        const collected = new Set();
+        return candidates.reduce((selection, node) => {
+            const element = (0, utils_2.getSelectableTarget)(node);
+            if (!element || collected.has(element))
+                return selection;
+            const bounds = (0, utils_2.getElementViewportBounds)(svg, element);
+            const targetRect = {
+                x: bounds.x,
+                y: bounds.y,
+                width: bounds.width,
+                height: bounds.height,
+            };
+            if (intersects(rect, targetRect)) {
+                selection.push(element);
+                collected.add(element);
+            }
+            return selection;
+        }, []);
+    }
+    hasElementAtStart(target) {
+        if (!(target instanceof Element))
+            return false;
+        if ((0, utils_2.getEventTarget)(target))
+            return true;
+        return Boolean(target.closest?.('[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/click-select.d.ts

@@ -0,0 +1,12 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class ClickSelect extends Interaction implements IInteraction {
+    name: string;
+    private clickHandler?;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private shiftKey;
+    private onShiftKeyDown;
+    private onShiftKeyUp;
+    private onEscKeyDown;
+}