@antv/infographic 0.1.2 → 0.1.3

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

@@ -0,0 +1,391 @@
+import { getCombinedBounds } from '../../jsx/utils/bounds';
+import { createElement, getAttributes, isEditableText, isEditingText, setAttributes, } from '../../utils';
+import { UpdateElementCommand } from '../commands';
+import { clientToViewport, getElementViewportBounds, getEventTarget, } from '../utils';
+import { Interaction } from './base';
+export class DragElement extends Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'drag-element';
+        this.selectionForDrag = [];
+        this.willReplaceSelection = false;
+        this.exclusiveStarted = false;
+        this.dragItems = [];
+        this.dragging = false;
+        this.dragThreshold = 4;
+        this.handleStart = (event) => {
+            if (!this.interaction.isActive())
+                return;
+            if (event.pointerType === 'mouse' && event.button !== 0)
+                return;
+            const target = getEventTarget(event.target);
+            if (!target)
+                return;
+            if (isEditingText(target))
+                return;
+            const svg = this.editor.getDocument();
+            this.pointerId = event.pointerId;
+            this.startPoint = clientToViewport(svg, event.clientX, event.clientY);
+            this.dragging = false;
+            this.startTarget = target;
+            const isSelected = this.interaction.isSelected(target);
+            this.selectionForDrag = isSelected
+                ? this.interaction.getSelection()
+                : [target];
+            this.willReplaceSelection = !isSelected;
+            this.exclusiveStarted = false;
+            this.startBounds = this.getSelectionBounds(this.selectionForDrag);
+            this.guideCandidates = this.collectGuideCandidates(this.selectionForDrag);
+            window.addEventListener('pointermove', this.handleMove);
+            window.addEventListener('pointerup', this.handleEnd);
+            window.addEventListener('pointercancel', this.handleEnd);
+        };
+        this.handleMove = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            const svg = this.editor.getDocument();
+            const current = 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;
+                if (!this.startDrag()) {
+                    this.reset();
+                    return;
+                }
+                this.dragging = true;
+            }
+            const altKey = event.altKey;
+            const snap = !altKey
+                ? this.getSnappedDelta(dx, dy)
+                : { dx, dy };
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateGuides(snap);
+            this.applyTranslation(snap.dx, snap.dy);
+            this.emitGeometryChange();
+        };
+        this.handleEnd = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            this.detachPointerListeners();
+            const svg = this.editor.getDocument();
+            const endPoint = clientToViewport(svg, event.clientX, event.clientY);
+            const dx = endPoint.x - this.startPoint.x;
+            const dy = endPoint.y - this.startPoint.y;
+            const moved = this.dragging || Math.hypot(dx, dy) >= this.dragThreshold;
+            if (moved && this.dragItems.length && this.exclusiveStarted) {
+                event.preventDefault();
+                event.stopPropagation();
+                const snap = event.altKey
+                    ? { dx, dy }
+                    : this.getSnappedDelta(dx, dy);
+                this.updateGuides(snap);
+                this.applyTranslation(snap.dx, snap.dy);
+                this.commitTranslation(snap.dx, snap.dy);
+                this.emitGeometryChange();
+            }
+            this.reset();
+        };
+    }
+    init(options) {
+        super.init(options);
+        this.editor.getDocument().addEventListener('pointerdown', this.handleStart);
+    }
+    destroy() {
+        this.detachPointerListeners();
+        this.editor
+            .getDocument()
+            .removeEventListener('pointerdown', this.handleStart);
+    }
+    startDrag() {
+        if (this.exclusiveStarted)
+            return true;
+        if (!this.startTarget)
+            return false;
+        if (this.willReplaceSelection) {
+            this.interaction.select([this.startTarget], 'replace');
+        }
+        this.dragItems = this.selectionForDrag
+            .filter((element) => isEditableText(element))
+            .map((element) => this.createDragItem(element))
+            .filter(Boolean);
+        if (this.dragItems.length === 0)
+            return false;
+        let started = false;
+        this.interaction.executeExclusiveInteraction(this, async () => new Promise((resolve) => {
+            this.completeInteraction = resolve;
+            started = true;
+        }));
+        this.exclusiveStarted = started;
+        return started;
+    }
+    applyTranslation(dx, dy) {
+        this.dragItems.forEach((item) => {
+            if (item.mode === 'attr') {
+                const x = item.startX + dx;
+                const y = item.startY + dy;
+                const attrs = { x, y };
+                if (item.hasDataX)
+                    attrs['data-x'] = x;
+                if (item.hasDataY)
+                    attrs['data-y'] = y;
+                setAttributes(item.element, attrs);
+            }
+            else {
+                const transform = this.composeTransform(item.startX + dx, item.startY + dy, item.restTransform);
+                setAttributes(item.element, { transform });
+            }
+        });
+    }
+    commitTranslation(dx, dy) {
+        if (Math.abs(dx) < 1e-6 && Math.abs(dy) < 1e-6)
+            return;
+        const commands = this.dragItems.map((item) => {
+            if (item.mode === 'attr') {
+                const x = item.startX + dx;
+                const y = item.startY + dy;
+                const modifiedAttrs = { x, y };
+                const originalAttrs = {};
+                if (item.hasX) {
+                    originalAttrs.x = item.startX;
+                }
+                else {
+                    originalAttrs.x = null;
+                }
+                if (item.hasY) {
+                    originalAttrs.y = item.startY;
+                }
+                else {
+                    originalAttrs.y = null;
+                }
+                if (item.hasDataX) {
+                    modifiedAttrs['data-x'] = x;
+                    originalAttrs['data-x'] = item.startX;
+                }
+                if (item.hasDataY) {
+                    modifiedAttrs['data-y'] = y;
+                    originalAttrs['data-y'] = item.startY;
+                }
+                return new UpdateElementCommand(item.element, { attributes: modifiedAttrs }, { attributes: originalAttrs });
+            }
+            const transform = this.composeTransform(item.startX + dx, item.startY + dy, item.restTransform);
+            const originalTransform = item.originalTransform !== undefined ? item.originalTransform : null;
+            return new UpdateElementCommand(item.element, { attributes: { transform } }, { attributes: { transform: originalTransform } });
+        });
+        if (commands.length) {
+            this.commander.executeBatch(commands);
+        }
+    }
+    createDragItem(element) {
+        const transformInfo = this.getTransformInfo(element);
+        if (transformInfo) {
+            return {
+                element,
+                mode: 'transform',
+                startX: transformInfo.x,
+                startY: transformInfo.y,
+                hasX: false,
+                hasY: false,
+                hasDataX: false,
+                hasDataY: false,
+                restTransform: transformInfo.rest,
+                originalTransform: transformInfo.original,
+            };
+        }
+        const { x, y, hasX, hasY, hasDataX, hasDataY } = this.getAttrInfo(element);
+        return {
+            element,
+            mode: 'attr',
+            startX: x,
+            startY: y,
+            hasX,
+            hasY,
+            hasDataX,
+            hasDataY,
+        };
+    }
+    getAttrInfo(element) {
+        const svg = this.editor.getDocument();
+        const { x: bx, y: by } = getElementViewportBounds(svg, element);
+        const attrs = getAttributes(element, ['x', 'y', 'data-x', 'data-y'], false);
+        const hasX = attrs.x !== null && attrs.x !== undefined;
+        const hasY = attrs.y !== null && attrs.y !== undefined;
+        const hasDataX = attrs['data-x'] !== null && attrs['data-x'] !== undefined;
+        const hasDataY = attrs['data-y'] !== null && attrs['data-y'] !== undefined;
+        const parseNumber = (value, fallback) => {
+            const num = value !== null && value !== undefined ? Number(value) : NaN;
+            return Number.isFinite(num) ? num : fallback;
+        };
+        const xFromAttr = parseNumber(attrs.x, NaN);
+        const yFromAttr = parseNumber(attrs.y, NaN);
+        const xFromData = parseNumber(attrs['data-x'], NaN);
+        const yFromData = parseNumber(attrs['data-y'], NaN);
+        const x = Number.isFinite(xFromAttr)
+            ? xFromAttr
+            : Number.isFinite(xFromData)
+                ? xFromData
+                : bx;
+        const y = Number.isFinite(yFromAttr)
+            ? yFromAttr
+            : Number.isFinite(yFromData)
+                ? yFromData
+                : by;
+        return { x, y, hasX, hasY, hasDataX, hasDataY };
+    }
+    getTransformInfo(element) {
+        const transform = element.getAttribute('transform');
+        if (transform === null)
+            return null;
+        const match = transform.match(/translate\(\s*([-\d.]+)(?:[ ,]\s*([-\d.]+))?\s*\)/i);
+        if (!match) {
+            return { x: 0, y: 0, rest: transform, original: transform };
+        }
+        const x = Number(match[1]) || 0;
+        const y = match[2] !== undefined ? Number(match[2]) || 0 : 0;
+        const rest = transform.replace(match[0], '').trim();
+        return { x, y, rest, original: transform };
+    }
+    composeTransform(x, y, rest) {
+        const translate = `translate(${x}, ${y})`;
+        return rest && rest.length ? `${translate} ${rest}` : translate;
+    }
+    emitGeometryChange() {
+        const target = this.dragItems[0]?.element;
+        if (!target)
+            return;
+        const rect = getElementViewportBounds(this.editor.getDocument(), target);
+        this.emitter.emit('selection:geometrychange', {
+            type: 'selection:geometrychange',
+            target,
+            rect,
+        });
+    }
+    detachPointerListeners() {
+        window.removeEventListener('pointermove', this.handleMove);
+        window.removeEventListener('pointerup', this.handleEnd);
+        window.removeEventListener('pointercancel', this.handleEnd);
+    }
+    reset() {
+        this.detachPointerListeners();
+        this.clearGuides();
+        this.pointerId = undefined;
+        this.startPoint = undefined;
+        this.dragItems = [];
+        this.startTarget = undefined;
+        this.selectionForDrag = [];
+        this.willReplaceSelection = false;
+        this.exclusiveStarted = false;
+        this.dragging = false;
+        this.startBounds = undefined;
+        this.guideCandidates = undefined;
+        this.completeInteraction?.();
+        this.completeInteraction = undefined;
+    }
+    getSelectionBounds(selection) {
+        if (!selection.length)
+            return undefined;
+        const svg = this.editor.getDocument();
+        const rects = selection.map((el) => getElementViewportBounds(svg, el));
+        return getCombinedBounds(rects);
+    }
+    collectGuideCandidates(selection) {
+        const svg = this.editor.getDocument();
+        const skip = new Set(selection);
+        const elements = Array.from(svg.querySelectorAll('[data-element-type]')).filter((el) => !skip.has(el));
+        const vertical = [];
+        const horizontal = [];
+        elements.forEach((el) => {
+            const { x, y, width, height } = getElementViewportBounds(svg, el);
+            vertical.push(x, x + width / 2, x + width);
+            horizontal.push(y, y + height / 2, y + height);
+        });
+        return { vertical, horizontal };
+    }
+    getSnappedDelta(dx, dy) {
+        if (!this.startBounds || !this.guideCandidates)
+            return { dx, dy };
+        const moving = {
+            x: this.startBounds.x + dx,
+            y: this.startBounds.y + dy,
+            width: this.startBounds.width,
+            height: this.startBounds.height,
+        };
+        const snapX = this.getSnapOffset([moving.x, moving.x + moving.width / 2, moving.x + moving.width], this.guideCandidates.vertical);
+        const snapY = this.getSnapOffset([moving.y, moving.y + moving.height / 2, moving.y + moving.height], this.guideCandidates.horizontal);
+        return {
+            dx: dx + (snapX?.offset || 0),
+            dy: dy + (snapY?.offset || 0),
+            snapX,
+            snapY,
+        };
+    }
+    getSnapOffset(points, candidates, threshold = 5) {
+        let best = null;
+        points.forEach((point) => {
+            candidates.forEach((c) => {
+                const delta = c - point;
+                if (Math.abs(delta) <= threshold) {
+                    if (!best || Math.abs(delta) < Math.abs(best.offset)) {
+                        best = { offset: delta, at: c };
+                    }
+                }
+            });
+        });
+        return best || undefined;
+    }
+    ensureGuideLine(orientation) {
+        const existing = orientation === 'vertical' ? this.guideVertical : this.guideHorizontal;
+        if (existing)
+            return existing;
+        const line = this.interaction.appendTransientElement(createElement('line', {
+            stroke: '#FF7A45',
+            'stroke-width': 1,
+            'stroke-dasharray': '4 4',
+            'pointer-events': 'none',
+            visibility: 'hidden',
+        }));
+        if (orientation === 'vertical')
+            this.guideVertical = line;
+        else
+            this.guideHorizontal = line;
+        return line;
+    }
+    updateGuides(snap) {
+        const svg = this.editor.getDocument();
+        const { width, height } = svg.viewBox.baseVal;
+        if (snap.snapX) {
+            const line = this.ensureGuideLine('vertical');
+            setAttributes(line, {
+                x1: snap.snapX.at,
+                y1: 0,
+                x2: snap.snapX.at,
+                y2: height,
+                visibility: 'visible',
+            });
+        }
+        else if (this.guideVertical) {
+            this.guideVertical.setAttribute('visibility', 'hidden');
+        }
+        if (snap.snapY) {
+            const line = this.ensureGuideLine('horizontal');
+            setAttributes(line, {
+                x1: 0,
+                y1: snap.snapY.at,
+                x2: width,
+                y2: snap.snapY.at,
+                visibility: 'visible',
+            });
+        }
+        else if (this.guideHorizontal) {
+            this.guideHorizontal.setAttribute('visibility', 'hidden');
+        }
+    }
+    clearGuides() {
+        this.guideVertical?.remove();
+        this.guideHorizontal?.remove();
+        this.guideVertical = undefined;
+        this.guideHorizontal = undefined;
+    }
+}

package/esm/editor/interactions/hotkey-history.d.ts

@@ -0,0 +1,10 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class HotkeyHistory extends Interaction implements IInteraction {
+    name: string;
+    private hotkey?;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleUndo;
+    private handleRedo;
+}

package/esm/editor/interactions/hotkey-history.js

@@ -0,0 +1,27 @@
+import { Hotkey } from '../utils';
+import { Interaction } from './base';
+export class HotkeyHistory extends Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'hotkey-history';
+        this.handleUndo = async (event) => {
+            event.preventDefault();
+            await this.commander.undo();
+        };
+        this.handleRedo = async (event) => {
+            event.preventDefault();
+            await this.commander.redo();
+        };
+    }
+    init(options) {
+        super.init(options);
+        this.hotkey = new Hotkey({
+            filter: () => this.interaction.isActive(),
+        });
+        this.hotkey.bind('mod+z', this.handleUndo);
+        this.hotkey.bind(['mod+shift+z', 'mod+y'], this.handleRedo);
+    }
+    destroy() {
+        this.hotkey?.destroy();
+    }
+}

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

@@ -0,0 +1,8 @@
+export { Interaction } from './base';
+export { BrushSelect } from './brush-select';
+export { ClickSelect } from './click-select';
+export { DblClickEditText } from './dblclick-edit-text';
+export { DragElement } from './drag-element';
+export { HotkeyHistory } from './hotkey-history';
+export { SelectHighlight } from './select-highlight';
+export { ZoomWheel } from './zoom-wheel';

package/esm/editor/interactions/index.js

@@ -0,0 +1,8 @@
+export { Interaction } from './base';
+export { BrushSelect } from './brush-select';
+export { ClickSelect } from './click-select';
+export { DblClickEditText } from './dblclick-edit-text';
+export { DragElement } from './drag-element';
+export { HotkeyHistory } from './hotkey-history';
+export { SelectHighlight } from './select-highlight';
+export { ZoomWheel } from './zoom-wheel';

package/esm/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/esm/editor/interactions/select-highlight.js

@@ -0,0 +1,99 @@
+import { getCombinedBounds } from '../../jsx/utils/bounds';
+import { createElement, isEditableText, setAttributes } from '../../utils';
+import { getElementViewportBounds } from '../utils';
+import { Interaction } from './base';
+export class SelectHighlight extends 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 && 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 } = 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) {
+                setAttributes(mask, attrs);
+            }
+            else {
+                this.highlightMasks[index] = this.interaction.appendTransientElement(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 = getCombinedBounds(selection.map((element) => getElementViewportBounds(this.editor.getDocument(), element)));
+        const attrs = {
+            ...bounds,
+            fill: 'none',
+            stroke: '#3384F5',
+            'stroke-width': 2,
+            'pointer-events': 'none',
+        };
+        if (this.combinedBoundsMask) {
+            setAttributes(this.combinedBoundsMask, attrs);
+        }
+        else {
+            this.combinedBoundsMask = this.interaction.appendTransientElement(createElement('rect', attrs));
+        }
+    }
+    clearMasks() {
+        this.highlightMasks.forEach((mask) => mask.remove());
+        this.highlightMasks = [];
+        this.combinedBoundsMask?.remove();
+        this.combinedBoundsMask = undefined;
+    }
+}

package/esm/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/esm/editor/interactions/zoom-wheel.js

@@ -0,0 +1,46 @@
+import { clamp } from 'lodash-es';
+import { parsePadding } from '../../utils';
+import { UpdateOptionsCommand } from '../commands';
+import { Interaction } from './base';
+const MIN_VIEWBOX_SIZE = 1;
+const MIN_PADDING = -5000;
+const MAX_PADDING = 5000;
+export class ZoomWheel extends 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 = parsePadding(currentPadding);
+            const svg = this.editor.getDocument();
+            const bbox = svg.getBBox();
+            const scaled = parsed.map((value) => {
+                const base = value === 0 ? 1 : value;
+                return 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 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);
+    }
+}

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