@antv/infographic 0.1.1 → 0.1.3

package/src/editor/interactions/brush-select.ts

@@ -0,0 +1,204 @@
+import { createElement, setAttributes } from '../../utils';
+import type { IInteraction, InteractionInitOptions, Selection } from '../types';
+import {
+  clientToViewport,
+  getElementViewportBounds,
+  getEventTarget,
+  getSelectableTarget,
+} from '../utils';
+import { Interaction } from './base';
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+export class BrushSelect extends Interaction implements IInteraction {
+  name = 'brush-select';
+
+  private brush?: SVGRectElement;
+  private startPoint?: DOMPoint;
+  private pointerId?: number;
+  private shiftKey = false;
+  private completeInteraction?: () => void;
+  private dragging = false;
+  private dragThreshold = 4;
+
+  init(options: InteractionInitOptions) {
+    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);
+  }
+
+  private handleStart = (event: PointerEvent) => {
+    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<void>((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);
+        }),
+    );
+  };
+
+  private handleMove = (event: PointerEvent) => {
+    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);
+  };
+
+  private handleEnd = (event: PointerEvent) => {
+    if (event.pointerId !== this.pointerId || !this.startPoint) return;
+
+    window.removeEventListener('pointermove', this.handleMove);
+    window.removeEventListener('pointerup', this.handleEnd);
+
+    let rect: Rect | null = 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: 'replace' | 'add' = withShift ? 'add' : 'replace';
+    this.interaction.select(selection, mode);
+  };
+
+  private ensureBrush() {
+    if (this.brush) return this.brush;
+    this.brush = this.interaction.appendTransientElement(
+      createElement<SVGRectElement>('rect', {
+        fill: 'rgba(51, 132, 245, 0.08)',
+        stroke: '#3384F5',
+        'stroke-dasharray': '4 2',
+        'stroke-width': 1,
+        'pointer-events': 'none',
+      }),
+    );
+    return this.brush;
+  }
+
+  private updateBrush(start: DOMPoint, current: DOMPoint) {
+    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 } as Rect;
+  }
+
+  private clearBrush() {
+    this.brush?.remove();
+    this.brush = undefined;
+  }
+
+  private collectSelection(rect: Rect): Selection {
+    const svg = this.editor.getDocument();
+
+    const candidates = Array.from(
+      svg.querySelectorAll<SVGElement>('[data-element-type]'),
+    );
+
+    const intersects = (a: Rect, b: Rect) => {
+      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<Selection[number]>();
+    return candidates.reduce<Selection>((selection, node) => {
+      const element = getSelectableTarget(node as unknown as SVGElement) as
+        | Selection[number]
+        | null;
+      if (!element || collected.has(element)) return selection;
+
+      const bounds = getElementViewportBounds(svg, element);
+      const targetRect: Rect = {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+      };
+
+      if (intersects(rect, targetRect)) {
+        selection.push(element);
+        collected.add(element);
+      }
+      return selection;
+    }, []);
+  }
+
+  private hasElementAtStart(target: EventTarget | null) {
+    if (!(target instanceof Element)) return false;
+    if (getEventTarget(target as unknown as SVGElement)) return true;
+    return Boolean(target.closest?.('[data-element-type]'));
+  }
+
+  private isTextSelectionTarget(target: EventTarget | null) {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable) return true;
+    const tag = target.tagName.toLowerCase();
+    return tag === 'input' || tag === 'textarea';
+  }
+}

package/src/editor/interactions/click-select.ts

@@ -0,0 +1,72 @@
+import { isEditingText } from '../../utils';
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { ClickHandler, getEventTarget } from '../utils';
+import { Interaction } from './base';
+export class ClickSelect extends Interaction implements IInteraction {
+  name = 'click-select';
+
+  private clickHandler?: ClickHandler;
+
+  init(options: InteractionInitOptions) {
+    super.init(options);
+    const { editor, interaction } = this;
+
+    this.clickHandler = new ClickHandler(editor.getDocument(), { delay: 0 });
+
+    const handleSelect = (event: MouseEvent) => {
+      if (!interaction.isActive()) return;
+      interaction.executeExclusiveInteraction(this, async () => {
+        const target = getEventTarget(event.target as SVGElement);
+        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);
+  }
+
+  private shiftKey = false;
+
+  private onShiftKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      this.shiftKey = true;
+    }
+  };
+
+  private onShiftKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      this.shiftKey = false;
+    }
+  };
+
+  private onEscKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.interaction.clearSelection();
+    }
+  };
+}

package/src/editor/interactions/dblclick-edit-text.ts

@@ -0,0 +1,260 @@
+import type { TextElement } from '../../types';
+import {
+  getTextContent,
+  getTextEntity,
+  injectStyleOnce,
+  isEditableText,
+} from '../../utils';
+import { UpdateTextCommand } from '../commands';
+import type {
+  IInteraction,
+  InteractionInitOptions,
+  Selection,
+  SelectionChangePayload,
+} from '../types';
+import { ClickHandler, getEventTarget } from '../utils';
+import { Interaction } from './base';
+
+export class DblClickEditText extends Interaction implements IInteraction {
+  name = 'dblclick-edit-text';
+
+  private clickHandler?: ClickHandler;
+  private detachSelectionListener?: () => void;
+
+  init(options: InteractionInitOptions) {
+    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 as SVGElement);
+          if (!target) return;
+          if (isEditableText(target)) {
+            interaction.select([target], 'replace');
+            const originalText = getTextContent(target);
+            const text = await new Promise<string>((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?.();
+  }
+
+  private listenSelectionChange(target: Selection[number]) {
+    const handler = ({ next }: SelectionChangePayload) => {
+      if (!next.includes(target)) {
+        this.detachSelectionListener?.();
+        this.detachSelectionListener = undefined;
+        const entity = getTextEntity(target as TextElement);
+        if (entity) entity.blur();
+      }
+    };
+    this.emitter.on('selection:change', handler);
+    return () => this.emitter.off('selection:change', handler);
+  }
+}
+
+type EditTextOptions = {
+  cursorPosition?: {
+    clientX: number;
+    clientY: number;
+  };
+  onInput?: (text: string) => void;
+  onBlur?: (text: string) => void;
+  onCancel?: (text: string) => void;
+};
+
+const EDITOR_STYLE_ID = 'infographic-inline-text-editor-style';
+const EDITOR_BASE_CLASS = 'infographic-inline-text-editor';
+
+function editText(text: TextElement, options?: EditTextOptions) {
+  const entity = getTextEntity(text);
+  if (!entity) return;
+
+  ensureEditorStyles();
+  new InlineTextEditor(entity, options).start();
+}
+
+class InlineTextEditor {
+  constructor(
+    private entity: HTMLSpanElement,
+    private options?: EditTextOptions,
+  ) {}
+
+  start() {
+    this.entity.setAttribute('contenteditable', 'true');
+    this.entity.classList.add(EDITOR_BASE_CLASS);
+    this.entity.focus();
+    this.placeCaretAtClickPosition();
+    this.attachListeners();
+  }
+
+  private 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 });
+  }
+
+  private detachListeners() {
+    this.entity.removeEventListener('paste', this.handlePaste);
+    this.entity.removeEventListener('keydown', this.handleKeydown);
+    this.entity.removeEventListener('input', this.handleInput);
+  }
+
+  private handlePaste = (event: ClipboardEvent) => {
+    if (!event.clipboardData) return;
+    event.preventDefault();
+    this.insertPlainText(event.clipboardData.getData('text/plain'));
+  };
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      this.insertPlainText('\n');
+    }
+  };
+
+  private handleInput = () => {
+    this.normalizeSpanContent();
+    this.options?.onInput?.(this.getText());
+  };
+
+  private handleBlur = () => {
+    this.entity.removeAttribute('contenteditable');
+    this.entity.classList.remove(EDITOR_BASE_CLASS);
+    this.normalizeSpanContent();
+    this.options?.onBlur?.(this.getText());
+    this.detachListeners();
+  };
+
+  private insertPlainText(text: string) {
+    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());
+  }
+
+  private normalizeSpanContent() {
+    if (
+      this.entity.childNodes.length === 1 &&
+      this.entity.firstChild?.nodeType === Node.TEXT_NODE
+    ) {
+      return;
+    }
+
+    const plainText = this.getText();
+    this.entity.textContent = plainText;
+  }
+
+  private placeCaretAtClickPosition() {
+    const selection = window.getSelection();
+    if (!selection) return;
+
+    const rangeFromPoint = this.getRangeFromPoint();
+    if (rangeFromPoint) {
+      selection.removeAllRanges();
+      selection.addRange(rangeFromPoint);
+      return;
+    }
+
+    this.placeCaretAtEnd();
+  }
+
+  private getRangeFromPoint(): Range | null {
+    const { cursorPosition } = this.options || {};
+    if (!cursorPosition) return null;
+
+    const { clientX, clientY } = cursorPosition;
+    const doc = document as any;
+    const rangeFromPoint: Range | null =
+      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;
+  }
+
+  private placeCaretAtEnd() {
+    const selection = window.getSelection();
+    if (!selection) return;
+
+    const range = document.createRange();
+    range.selectNodeContents(this.entity);
+    range.collapse(false);
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  private 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;
+}
+`,
+  );
+}