@antv/infographic 0.1.1 → 0.1.3

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

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

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

@@ -0,0 +1,167 @@
+import { createElement, setAttributes } from '../../utils';
+import { clientToViewport, getElementViewportBounds, getEventTarget, getSelectableTarget, } from '../utils';
+import { Interaction } from './base';
+export class BrushSelect extends 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 = 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 = 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 = 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(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);
+        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 = getSelectableTarget(node);
+            if (!element || collected.has(element))
+                return selection;
+            const bounds = 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 (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';
+    }
+}

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

package/esm/editor/interactions/click-select.js

@@ -0,0 +1,67 @@
+import { isEditingText } from '../../utils';
+import { ClickHandler, getEventTarget } from '../utils';
+import { Interaction } from './base';
+export class ClickSelect extends Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'click-select';
+        this.shiftKey = false;
+        this.onShiftKeyDown = (event) => {
+            if (event.key === 'Shift') {
+                this.shiftKey = true;
+            }
+        };
+        this.onShiftKeyUp = (event) => {
+            if (event.key === 'Shift') {
+                this.shiftKey = false;
+            }
+        };
+        this.onEscKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                this.interaction.clearSelection();
+            }
+        };
+    }
+    init(options) {
+        super.init(options);
+        const { editor, interaction } = this;
+        this.clickHandler = new ClickHandler(editor.getDocument(), { delay: 0 });
+        const handleSelect = (event) => {
+            if (!interaction.isActive())
+                return;
+            interaction.executeExclusiveInteraction(this, async () => {
+                const target = getEventTarget(event.target);
+                if (isEditingText(target))
+                    return;
+                if (this.shiftKey) {
+                    // 多选
+                    if (target) {
+                        if (interaction.isSelected(target)) {
+                            interaction.select([target], 'remove');
+                        }
+                        else {
+                            interaction.select([target], 'add');
+                        }
+                    }
+                }
+                else {
+                    // 单选
+                    if (target)
+                        interaction.select([target], 'replace');
+                    else
+                        interaction.clearSelection();
+                }
+            });
+        };
+        this.clickHandler.onClick(handleSelect);
+        document.addEventListener('keydown', this.onShiftKeyDown);
+        document.addEventListener('keyup', this.onShiftKeyUp);
+        document.addEventListener('keydown', this.onEscKeyDown);
+    }
+    destroy() {
+        this.clickHandler?.destroy();
+        document.removeEventListener('keydown', this.onShiftKeyDown);
+        document.removeEventListener('keyup', this.onShiftKeyUp);
+        document.removeEventListener('keydown', this.onEscKeyDown);
+    }
+}

package/esm/editor/interactions/dblclick-edit-text.d.ts

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

package/esm/editor/interactions/dblclick-edit-text.js

@@ -0,0 +1,204 @@
+import { getTextContent, getTextEntity, injectStyleOnce, isEditableText, } from '../../utils';
+import { UpdateTextCommand } from '../commands';
+import { ClickHandler, getEventTarget } from '../utils';
+import { Interaction } from './base';
+export class DblClickEditText extends Interaction {
+    constructor() {
+        super(...arguments);
+        this.name = 'dblclick-edit-text';
+    }
+    init(options) {
+        super.init(options);
+        const { editor, commander, interaction } = options;
+        this.clickHandler = new ClickHandler(editor.getDocument()).onDoubleClick((event) => {
+            if (!interaction.isActive())
+                return;
+            interaction.executeExclusiveInteraction(this, async () => {
+                const target = getEventTarget(event.target);
+                if (!target)
+                    return;
+                if (isEditableText(target)) {
+                    interaction.select([target], 'replace');
+                    const originalText = getTextContent(target);
+                    const text = await new Promise((resolve) => {
+                        const stopListen = this.listenSelectionChange(target);
+                        editText(target, {
+                            cursorPosition: {
+                                clientX: event.clientX,
+                                clientY: event.clientY,
+                            },
+                            onBlur: resolve,
+                            onCancel: resolve,
+                        });
+                        this.detachSelectionListener = stopListen;
+                    });
+                    commander.execute(new UpdateTextCommand(target, text, originalText));
+                }
+            });
+        });
+    }
+    destroy() {
+        this.clickHandler?.destroy();
+        this.detachSelectionListener?.();
+    }
+    listenSelectionChange(target) {
+        const handler = ({ next }) => {
+            if (!next.includes(target)) {
+                this.detachSelectionListener?.();
+                this.detachSelectionListener = undefined;
+                const entity = getTextEntity(target);
+                if (entity)
+                    entity.blur();
+            }
+        };
+        this.emitter.on('selection:change', handler);
+        return () => this.emitter.off('selection:change', handler);
+    }
+}
+const EDITOR_STYLE_ID = 'infographic-inline-text-editor-style';
+const EDITOR_BASE_CLASS = 'infographic-inline-text-editor';
+function editText(text, options) {
+    const entity = getTextEntity(text);
+    if (!entity)
+        return;
+    ensureEditorStyles();
+    new InlineTextEditor(entity, options).start();
+}
+class InlineTextEditor {
+    constructor(entity, options) {
+        this.entity = entity;
+        this.options = options;
+        this.handlePaste = (event) => {
+            if (!event.clipboardData)
+                return;
+            event.preventDefault();
+            this.insertPlainText(event.clipboardData.getData('text/plain'));
+        };
+        this.handleKeydown = (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                this.insertPlainText('\n');
+            }
+        };
+        this.handleInput = () => {
+            this.normalizeSpanContent();
+            this.options?.onInput?.(this.getText());
+        };
+        this.handleBlur = () => {
+            this.entity.removeAttribute('contenteditable');
+            this.entity.classList.remove(EDITOR_BASE_CLASS);
+            this.normalizeSpanContent();
+            this.options?.onBlur?.(this.getText());
+            this.detachListeners();
+        };
+    }
+    start() {
+        this.entity.setAttribute('contenteditable', 'true');
+        this.entity.classList.add(EDITOR_BASE_CLASS);
+        this.entity.focus();
+        this.placeCaretAtClickPosition();
+        this.attachListeners();
+    }
+    attachListeners() {
+        this.entity.addEventListener('paste', this.handlePaste);
+        this.entity.addEventListener('keydown', this.handleKeydown);
+        this.entity.addEventListener('input', this.handleInput);
+        this.entity.addEventListener('blur', this.handleBlur, { once: true });
+    }
+    detachListeners() {
+        this.entity.removeEventListener('paste', this.handlePaste);
+        this.entity.removeEventListener('keydown', this.handleKeydown);
+        this.entity.removeEventListener('input', this.handleInput);
+    }
+    insertPlainText(text) {
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        if (!selection.rangeCount) {
+            this.placeCaretAtEnd();
+        }
+        const range = selection.rangeCount
+            ? selection.getRangeAt(0)
+            : document.createRange();
+        range.deleteContents();
+        const textNode = document.createTextNode(text);
+        range.insertNode(textNode);
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // Mirror native input behavior so consumers stay in sync.
+        this.normalizeSpanContent();
+        this.options?.onInput?.(this.getText());
+    }
+    normalizeSpanContent() {
+        if (this.entity.childNodes.length === 1 &&
+            this.entity.firstChild?.nodeType === Node.TEXT_NODE) {
+            return;
+        }
+        const plainText = this.getText();
+        this.entity.textContent = plainText;
+    }
+    placeCaretAtClickPosition() {
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        const rangeFromPoint = this.getRangeFromPoint();
+        if (rangeFromPoint) {
+            selection.removeAllRanges();
+            selection.addRange(rangeFromPoint);
+            return;
+        }
+        this.placeCaretAtEnd();
+    }
+    getRangeFromPoint() {
+        const { cursorPosition } = this.options || {};
+        if (!cursorPosition)
+            return null;
+        const { clientX, clientY } = cursorPosition;
+        const doc = document;
+        const rangeFromPoint = doc.caretRangeFromPoint?.(clientX, clientY) ??
+            (() => {
+                const caretPosition = doc.caretPositionFromPoint?.(clientX, clientY);
+                if (!caretPosition)
+                    return null;
+                const caretRange = document.createRange();
+                caretRange.setStart(caretPosition.offsetNode, caretPosition.offset);
+                caretRange.collapse(true);
+                return caretRange;
+            })();
+        if (!rangeFromPoint)
+            return null;
+        if (!this.entity.contains(rangeFromPoint.startContainer))
+            return null;
+        return rangeFromPoint;
+    }
+    placeCaretAtEnd() {
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        const range = document.createRange();
+        range.selectNodeContents(this.entity);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    getText() {
+        return this.entity.textContent || '';
+    }
+}
+function ensureEditorStyles() {
+    injectStyleOnce(EDITOR_STYLE_ID, `
+.${EDITOR_BASE_CLASS} {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: none;
+  cursor: text;
+}
+.${EDITOR_BASE_CLASS}::selection {
+  background-color: #b3d4fc;
+}
+`);
+}

package/esm/editor/interactions/drag-element.d.ts

@@ -0,0 +1,41 @@
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+export declare class DragElement extends Interaction implements IInteraction {
+    name: string;
+    private pointerId?;
+    private startPoint?;
+    private startTarget?;
+    private selectionForDrag;
+    private willReplaceSelection;
+    private exclusiveStarted;
+    private dragItems;
+    private dragging;
+    private dragThreshold;
+    private completeInteraction?;
+    private guideCandidates?;
+    private startBounds?;
+    private guideVertical?;
+    private guideHorizontal?;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleStart;
+    private handleMove;
+    private handleEnd;
+    private startDrag;
+    private applyTranslation;
+    private commitTranslation;
+    private createDragItem;
+    private getAttrInfo;
+    private getTransformInfo;
+    private composeTransform;
+    private emitGeometryChange;
+    private detachPointerListeners;
+    private reset;
+    private getSelectionBounds;
+    private collectGuideCandidates;
+    private getSnappedDelta;
+    private getSnapOffset;
+    private ensureGuideLine;
+    private updateGuides;
+    private clearGuides;
+}