@antv/infographic 0.1.2 → 0.1.3

package/src/editor/plugins/resize-element.ts

@@ -0,0 +1,518 @@
+import type { TextElement } from '../../types';
+import {
+  createElement,
+  getAttributes,
+  isEditableText,
+  setAttributes,
+} from '../../utils';
+import { UpdateElementCommand } from '../commands';
+import type {
+  IPlugin,
+  PluginInitOptions,
+  Selection,
+  SelectionChangePayload,
+} from '../types';
+import { getElementViewportBounds } from '../utils';
+import { Plugin } from './base';
+
+type HandlePosition =
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'right'
+  | 'bottom-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'left';
+
+type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export class ResizeElement extends Plugin implements IPlugin {
+  name = 'resize-element';
+
+  private target: TextElement | null = null;
+
+  private container?: SVGGElement;
+  private outline?: SVGRectElement;
+  private overlay?: SVGRectElement;
+  private handles: SVGElement[] = [];
+
+  private activeHandle: HandlePosition | null = null;
+  private activePointerId: number | null = null;
+  private startPointer?: DOMPoint;
+  private startRect?: Rect;
+  private startAttrs?: Rect;
+  private lastRect?: Rect;
+  private lastViewportRect?: Rect;
+
+  init(options: PluginInitOptions) {
+    super.init(options);
+    const { emitter } = options;
+    emitter.on('selection:change', this.handleSelectionChange);
+    emitter.on('selection:geometrychange', this.handleGeometryChange);
+    emitter.on('history:change', this.handleHistoryChange);
+    emitter.on('deactivated', this.handleDeactivate);
+  }
+
+  destroy() {
+    this.cancelDrag();
+    this.removeContainer();
+    const { emitter } = this;
+    emitter.off('selection:change', this.handleSelectionChange);
+    emitter.off('selection:geometrychange', this.handleGeometryChange);
+    emitter.off('history:change', this.handleHistoryChange);
+    emitter.off('deactivated', this.handleDeactivate);
+  }
+
+  private handleSelectionChange = ({ next }: SelectionChangePayload) => {
+    const only = next.length === 1 ? next[0] : null;
+    if (only && isEditableText(only)) {
+      this.target = only as TextElement;
+      this.updateHandles();
+    } else {
+      this.target = null;
+      this.hideHandles();
+      this.cancelDrag();
+    }
+  };
+
+  private handleDeactivate = () => {
+    this.target = null;
+    this.hideHandles();
+    this.cancelDrag();
+  };
+
+  private handleGeometryChange = ({
+    target,
+  }: {
+    type: 'selection:geometrychange';
+    target: Selection[number];
+  }) => {
+    if (!this.target || target !== this.target) return;
+    const rect = this.getViewportRect(this.target);
+    this.lastViewportRect = rect;
+    this.updateHandles(rect);
+  };
+
+  private handleHistoryChange = () => {
+    if (!this.target) return;
+    const rect = this.getViewportRect(this.target);
+    this.lastViewportRect = rect;
+    this.updateHandles(rect);
+  };
+
+  private ensureContainer(): SVGGElement {
+    if (this.container) return this.container;
+
+    const container = createElement<SVGGElement>('g', {
+      'pointer-events': 'none',
+    });
+    this.overlay = createElement<SVGRectElement>('rect', {
+      fill: 'rgba(51, 132, 245, 0.06)',
+      stroke: 'none',
+      'pointer-events': 'none',
+    });
+    const outline = createElement<SVGRectElement>('rect', {
+      fill: 'none',
+      stroke: '#3384F5',
+      'stroke-width': 1,
+      'stroke-dasharray': '4 2',
+      'pointer-events': 'none',
+    });
+
+    container.appendChild(this.overlay);
+    container.appendChild(outline);
+    this.outline = outline;
+
+    const handlePositions = ResizeElement.HANDLE_POSITIONS;
+    const cursors: Record<HandlePosition, string> = {
+      'top-left': 'nwse-resize',
+      top: 'ns-resize',
+      'top-right': 'nesw-resize',
+      right: 'ew-resize',
+      'bottom-right': 'nwse-resize',
+      bottom: 'ns-resize',
+      'bottom-left': 'nesw-resize',
+      left: 'ew-resize',
+    };
+
+    handlePositions.forEach((pos, index) => {
+      const isEdge =
+        pos === 'top' || pos === 'right' || pos === 'bottom' || pos === 'left';
+      const handle = isEdge
+        ? createElement<SVGLineElement>('line', {
+            stroke: 'transparent',
+            'stroke-width': ResizeElement.LINE_STROKE_WIDTH,
+          })
+        : createElement<SVGCircleElement>('circle', {
+            r: ResizeElement.HANDLE_SIZE / 2,
+            fill: '#3384F5',
+            stroke: '#fff',
+            'stroke-width': 1.5,
+          });
+      handle.style.cursor = cursors[pos];
+      handle.style.pointerEvents = 'all';
+      handle.addEventListener('pointerdown', (event) =>
+        this.handlePointerDown(event as PointerEvent, pos),
+      );
+      handle.addEventListener('click', (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      });
+      container.appendChild(handle);
+      this.handles[index] = handle;
+    });
+
+    this.editor.getDocument().appendChild(container);
+    this.container = container;
+
+    return container;
+  }
+
+  private updateHandles(rect?: Rect) {
+    if (!this.target) {
+      this.hideHandles();
+      return;
+    }
+
+    const bounds =
+      rect ||
+      this.getViewportRect(this.target) ||
+      this.lastViewportRect ||
+      null;
+    if (!bounds) {
+      this.hideHandles();
+      return;
+    }
+    this.lastViewportRect = bounds;
+
+    const container = this.ensureContainer();
+    container.style.display = 'block';
+    this.outline!.style.display = 'block';
+    setAttributes(this.outline!, bounds);
+    if (this.overlay) {
+      this.overlay.style.display = 'block';
+      setAttributes(this.overlay, bounds);
+    }
+
+    const points = this.getHandlePoints(bounds);
+    this.handles.forEach((handle, index) => {
+      const [x, y] = points[index];
+      if (handle.tagName === 'circle') {
+        setAttributes(handle, { cx: x, cy: y });
+      } else {
+        const pos = ResizeElement.HANDLE_POSITIONS[index];
+        const line = this.getHandleLine(bounds, pos);
+        setAttributes(handle, line);
+      }
+      handle.style.display = 'block';
+    });
+  }
+
+  private hideHandles() {
+    if (this.container) this.container.style.display = 'none';
+    if (this.outline) this.outline.style.display = 'none';
+    if (this.overlay) this.overlay.style.display = 'none';
+    this.handles.forEach((handle) => (handle.style.display = 'none'));
+  }
+
+  private removeContainer() {
+    this.container?.remove();
+    this.container = undefined;
+    this.outline = undefined;
+    this.overlay = undefined;
+    this.handles = [];
+  }
+
+  private handlePointerDown(event: PointerEvent, handle: HandlePosition) {
+    if (!this.target) return;
+    if (event.button !== 0 && event.pointerType === 'mouse') return;
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    const point = this.clientToElement(
+      this.target,
+      event.clientX,
+      event.clientY,
+    );
+
+    this.activeHandle = handle;
+    this.activePointerId = event.pointerId;
+    this.startPointer = point;
+    const currentRect = this.getCurrentAttributes(this.target);
+    this.startRect = currentRect;
+    this.startAttrs = { ...currentRect };
+    this.lastRect = currentRect;
+    this.lastViewportRect = this.getViewportRect(this.target);
+
+    window.addEventListener('pointermove', this.handlePointerMove);
+    window.addEventListener('pointerup', this.handlePointerUp);
+    window.addEventListener('pointercancel', this.handlePointerUp);
+  }
+
+  private handlePointerMove = (event: PointerEvent) => {
+    if (
+      !this.target ||
+      !this.startPointer ||
+      !this.startRect ||
+      !this.activeHandle ||
+      (this.activePointerId !== null &&
+        event.pointerId !== this.activePointerId)
+    ) {
+      return;
+    }
+
+    const point = this.clientToElement(
+      this.target,
+      event.clientX,
+      event.clientY,
+    );
+    const dx = point.x - this.startPointer.x;
+    const dy = point.y - this.startPointer.y;
+
+    const next = this.clampRect(
+      this.applyDelta(this.startRect, dx, dy, this.activeHandle),
+      this.activeHandle,
+    );
+    this.lastRect = next;
+
+    this.applyRect(this.target, next);
+    this.lastViewportRect = this.getViewportRect(this.target);
+    this.updateHandles(this.lastViewportRect);
+    this.emitSelectionGeometryChange();
+  };
+
+  private handlePointerUp = (event: PointerEvent) => {
+    if (
+      this.activePointerId !== null &&
+      event.pointerId !== this.activePointerId
+    ) {
+      return;
+    }
+
+    const finalRect = this.lastRect;
+    const original = this.startAttrs;
+    const changed =
+      finalRect &&
+      this.startRect &&
+      this.hasRectChanged(this.startRect, finalRect);
+
+    this.cancelDrag();
+
+    if (changed && this.target && finalRect && original) {
+      this.commander.execute(
+        new UpdateElementCommand(
+          this.target,
+          { attributes: finalRect },
+          { attributes: original },
+        ),
+      );
+      this.lastViewportRect = this.getViewportRect(this.target);
+      this.updateHandles(this.lastViewportRect);
+      this.emitSelectionGeometryChange();
+    } else if (this.target) {
+      const viewportRect =
+        this.lastViewportRect || this.getViewportRect(this.target);
+      this.updateHandles(viewportRect);
+    }
+  };
+
+  private cancelDrag() {
+    this.activeHandle = null;
+    this.activePointerId = null;
+    this.startPointer = undefined;
+    this.startRect = undefined;
+    this.startAttrs = undefined;
+    this.lastRect = undefined;
+    this.lastViewportRect = undefined;
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    window.removeEventListener('pointercancel', this.handlePointerUp);
+  }
+
+  private applyRect(target: TextElement, rect: Rect) {
+    setAttributes(target, {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    });
+  }
+
+  private getViewportRect(element: TextElement): Rect {
+    const { x, y, width, height } = getElementViewportBounds(
+      this.editor.getDocument(),
+      element,
+    );
+    return { x, y, width, height };
+  }
+
+  private clientToElement(
+    element: TextElement,
+    x: number,
+    y: number,
+  ): DOMPoint {
+    const matrix =
+      element.getScreenCTM()?.inverse() ||
+      this.editor.getDocument().getScreenCTM()?.inverse() ||
+      new DOMMatrix();
+    return new DOMPoint(x, y).matrixTransform(matrix);
+  }
+
+  private getCurrentAttributes(element: TextElement): Rect {
+    const attrs = getAttributes(element, ['x', 'y', 'width', 'height'], false);
+    const fallback = this.getViewportRect(element);
+    const getNumber = (value: string | null, backup: number) => {
+      const numeric = value !== null ? Number(value) : NaN;
+      return Number.isFinite(numeric) ? numeric : backup;
+    };
+    return {
+      x: getNumber(attrs.x, fallback.x),
+      y: getNumber(attrs.y, fallback.y),
+      width: getNumber(attrs.width, fallback.width),
+      height: getNumber(attrs.height, fallback.height),
+    };
+  }
+
+  private getHandlePoints(rect: Rect): number[][] {
+    const { x, y, width, height } = rect;
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    return [
+      [x, y], // top-left
+      [cx, y], // top
+      [x + width, y], // top-right
+      [x + width, cy], // right
+      [x + width, y + height], // bottom-right
+      [cx, y + height], // bottom
+      [x, y + height], // bottom-left
+      [x, cy], // left
+    ];
+  }
+
+  private applyDelta(
+    rect: Rect,
+    dx: number,
+    dy: number,
+    handle: HandlePosition,
+  ): Rect {
+    let { x, y, width, height } = rect;
+
+    switch (handle) {
+      case 'top-left':
+        x += dx;
+        y += dy;
+        width -= dx;
+        height -= dy;
+        break;
+      case 'top':
+        y += dy;
+        height -= dy;
+        break;
+      case 'top-right':
+        y += dy;
+        width += dx;
+        height -= dy;
+        break;
+      case 'right':
+        width += dx;
+        break;
+      case 'bottom-right':
+        width += dx;
+        height += dy;
+        break;
+      case 'bottom':
+        height += dy;
+        break;
+      case 'bottom-left':
+        x += dx;
+        width -= dx;
+        height += dy;
+        break;
+      case 'left':
+        x += dx;
+        width -= dx;
+        break;
+    }
+
+    return { x, y, width, height };
+  }
+
+  private clampRect(rect: Rect, handle: HandlePosition): Rect {
+    let { x, y, width, height } = rect;
+
+    if (width < ResizeElement.MIN_SIZE) {
+      const diff = ResizeElement.MIN_SIZE - width;
+      if (
+        handle === 'top-left' ||
+        handle === 'bottom-left' ||
+        handle === 'left'
+      )
+        x -= diff;
+      width = ResizeElement.MIN_SIZE;
+    }
+
+    if (height < ResizeElement.MIN_SIZE) {
+      const diff = ResizeElement.MIN_SIZE - height;
+      if (handle === 'top-left' || handle === 'top-right' || handle === 'top')
+        y -= diff;
+      height = ResizeElement.MIN_SIZE;
+    }
+
+    return { x, y, width, height };
+  }
+
+  private hasRectChanged(a: Rect, b: Rect) {
+    return (
+      Math.abs(a.x - b.x) > 0.5 ||
+      Math.abs(a.y - b.y) > 0.5 ||
+      Math.abs(a.width - b.width) > 0.5 ||
+      Math.abs(a.height - b.height) > 0.5
+    );
+  }
+
+  private emitSelectionGeometryChange() {
+    if (this.target && this.lastViewportRect) {
+      this.emitter.emit('selection:geometrychange', {
+        type: 'selection:geometrychange',
+        target: this.target,
+        rect: this.lastViewportRect,
+      });
+    }
+  }
+
+  private getHandleLine(rect: Rect, pos: HandlePosition) {
+    const { x, y, width, height } = rect;
+    switch (pos) {
+      case 'top':
+        return { x1: x, y1: y, x2: x + width, y2: y };
+      case 'right':
+        return { x1: x + width, y1: y, x2: x + width, y2: y + height };
+      case 'bottom':
+        return { x1: x, y1: y + height, x2: x + width, y2: y + height };
+      case 'left':
+      default:
+        return { x1: x, y1: y, x2: x, y2: y + height };
+    }
+  }
+
+  private static readonly HANDLE_SIZE = 10;
+  private static readonly LINE_STROKE_WIDTH = 8;
+  private static readonly MIN_SIZE = 1;
+  private static readonly HANDLE_POSITIONS: HandlePosition[] = [
+    'top-left',
+    'top',
+    'top-right',
+    'right',
+    'bottom-right',
+    'bottom',
+    'bottom-left',
+    'left',
+  ];
+}

package/src/editor/types/command.ts

@@ -0,0 +1,32 @@
+import type { IEventEmitter } from '../../types';
+import type { IStateManager } from './state';
+
+export interface ICommandManager {
+  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;
+}
+
+export interface ICommand {
+  apply(state: IStateManager): Promise<void>;
+  undo(state: IStateManager): Promise<void>;
+  serialize(): any;
+}
+
+export interface CommandManagerInitOptions {
+  emitter: IEventEmitter;
+  state: IStateManager;
+}
+
+export type HistoryChangePayload = {
+  type: 'history:change';
+  action: 'execute' | 'undo' | 'redo';
+};

package/src/editor/types/editor.ts

@@ -0,0 +1,4 @@
+export interface IEditor {
+  getDocument(): SVGSVGElement;
+  destroy(): void;
+}

package/src/editor/types/index.ts

@@ -0,0 +1,7 @@
+export type * from './command';
+export type * from './editor';
+export type * from './interaction';
+export type * from './plugin';
+export type * from './selection';
+export type * from './shape';
+export type * from './state';

package/src/editor/types/interaction.ts

@@ -0,0 +1,56 @@
+import type { IEventEmitter } from '../../types';
+import type { ICommandManager } from './command';
+import type { IEditor } from './editor';
+import type { Selection } from './selection';
+import type { IStateManager } from './state';
+
+export interface IInteraction {
+  name: string;
+  init(options: InteractionInitOptions): void;
+  destroy(): void;
+}
+
+export type SelectMode = 'replace' | 'add' | 'remove' | 'toggle';
+
+export interface SelectionChangePayload {
+  type: 'selection:change';
+  previous: Selection;
+  next: Selection;
+  added: Selection;
+  removed: Selection;
+  mode: SelectMode;
+}
+
+export interface IInteractionManager {
+  isActive(): boolean;
+  select(items: Selection, mode: SelectMode): void;
+  getSelection(): Selection;
+  isSelected(item: Selection[number]): boolean;
+  clearSelection(): void;
+  executeExclusiveInteraction(
+    instance: IInteraction,
+    callback: () => Promise<void>,
+  ): Promise<void>;
+  executeConcurrentInteraction(
+    instance: IInteraction,
+    callback: () => Promise<void>,
+  ): Promise<void>;
+  appendTransientElement<T extends SVGElement>(element: T): T;
+  destroy(): void;
+}
+
+export interface InteractionInitOptions {
+  emitter: IEventEmitter;
+  editor: IEditor;
+  commander: ICommandManager;
+  state: IStateManager;
+  interaction: IInteractionManager;
+}
+
+export interface InteractionManagerInitOptions {
+  emitter: IEventEmitter;
+  editor: IEditor;
+  commander: ICommandManager;
+  state: IStateManager;
+  interactions?: IInteraction[];
+}

package/src/editor/types/plugin.ts

@@ -0,0 +1,34 @@
+import type { IEventEmitter } from '../../types';
+import type { ICommandManager } from './command';
+import type { IEditor } from './editor';
+import type { IStateManager } from './state';
+
+export interface IPluginManager {
+  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;
+}
+
+export interface IPlugin {
+  name: string;
+  init(options: PluginInitOptions): void;
+  destroy(): void;
+}
+
+export interface PluginManagerInitOptions {
+  emitter: IEventEmitter;
+  editor: IEditor;
+  commander: ICommandManager;
+  state: IStateManager;
+}
+
+export interface PluginInitOptions {
+  emitter: IEventEmitter;
+  editor: IEditor;
+  commander: ICommandManager;
+  plugin: IPluginManager;
+  state: IStateManager;
+}

package/src/editor/types/selection.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../types';
+
+export type Selection = Element[];

package/src/editor/types/shape.ts

@@ -0,0 +1,28 @@
+import { ShapeTypeEnum } from '../../constants';
+import type { TextAttributes } from '../../types';
+
+export type ID = string;
+
+interface BaseShapeProps {
+  attributes: Record<string, any>;
+}
+
+export interface GeometryProps extends BaseShapeProps {
+  type:
+    | ShapeTypeEnum.Rectangle
+    | ShapeTypeEnum.Circle
+    | ShapeTypeEnum.Ellipse
+    | ShapeTypeEnum.Line
+    | ShapeTypeEnum.Polyline
+    | ShapeTypeEnum.Polygon
+    | ShapeTypeEnum.Path
+    | ShapeTypeEnum.Image;
+}
+
+export interface TextProps extends BaseShapeProps {
+  type: ShapeTypeEnum.Text;
+  textContent: string;
+  attributes: TextAttributes;
+}
+
+export type ElementProps = GeometryProps | TextProps;