@antv/infographic 0.1.2 → 0.1.3

package/src/editor/interactions/zoom-wheel.ts

@@ -0,0 +1,52 @@
+import { clamp } from 'lodash-es';
+import type { Padding } from '../../types';
+import { parsePadding } from '../../utils';
+import { UpdateOptionsCommand } from '../commands';
+import type { IInteraction, InteractionInitOptions } from '../types';
+import { Interaction } from './base';
+
+const MIN_VIEWBOX_SIZE = 1;
+const MIN_PADDING = -5000;
+const MAX_PADDING = 5000;
+
+export class ZoomWheel extends Interaction implements IInteraction {
+  name = 'zoom-wheel';
+
+  private wheelListener = (event: WheelEvent) => {
+    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 as Padding,
+    });
+    void this.commander.execute(command);
+  };
+
+  init(options: InteractionInitOptions) {
+    super.init(options);
+    document.addEventListener('wheel', this.wheelListener, { passive: false });
+  }
+
+  destroy() {
+    document.removeEventListener('wheel', this.wheelListener);
+  }
+}

package/src/editor/managers/command.ts

@@ -0,0 +1,83 @@
+import type { IEventEmitter } from '../../types';
+import { BatchCommand } from '../commands';
+import type {
+  CommandManagerInitOptions,
+  ICommand,
+  ICommandManager,
+  IStateManager,
+} from '../types';
+
+export class CommandManager implements ICommandManager {
+  private emitter!: IEventEmitter;
+  private state!: IStateManager;
+  private undoStack: ICommand[] = [];
+  private redoStack: ICommand[] = [];
+
+  init(options: CommandManagerInitOptions) {
+    Object.assign(this, options);
+  }
+
+  async execute(command: ICommand) {
+    await command.apply(this.state);
+    this.undoStack.push(command);
+    this.redoStack = [];
+    this.emitHistoryChange('execute');
+  }
+
+  async executeBatch(commands: ICommand[]) {
+    if (commands.length === 0) return;
+
+    const batchCommand = new BatchCommand(commands);
+    await this.execute(batchCommand);
+  }
+
+  async undo() {
+    const command = this.undoStack.pop();
+    if (command) {
+      await command.undo(this.state);
+      this.redoStack.push(command);
+      this.emitHistoryChange('undo');
+    }
+  }
+
+  async redo() {
+    const command = this.redoStack.pop();
+    if (command) {
+      await command.apply(this.state);
+      this.undoStack.push(command);
+      this.emitHistoryChange('redo');
+    }
+  }
+
+  serialize(): any[] {
+    return this.undoStack.map((cmd) => cmd.serialize());
+  }
+
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
+
+  canUndo(): boolean {
+    return this.undoStack.length > 0;
+  }
+
+  canRedo(): boolean {
+    return this.redoStack.length > 0;
+  }
+
+  getHistorySize(): number {
+    return this.undoStack.length;
+  }
+
+  destroy() {
+    this.clear();
+  }
+
+  private emitHistoryChange(action: 'execute' | 'undo' | 'redo') {
+    this.emitter?.emit('history:change', {
+      type: 'history:change',
+      action,
+    });
+  }
+}

package/src/editor/managers/index.ts

@@ -0,0 +1,4 @@
+export * from './command';
+export * from './interaction';
+export * from './plugin';
+export * from './state';

package/src/editor/managers/interaction.ts

@@ -0,0 +1,244 @@
+import type { IEventEmitter } from '../../types';
+import {
+  createElement,
+  getElementByRole,
+  isInfographicComponent,
+  setElementRole,
+} from '../../utils';
+import type {
+  ICommandManager,
+  IEditor,
+  IInteraction,
+  IInteractionManager,
+  InteractionManagerInitOptions,
+  IStateManager,
+  Selection,
+  SelectionChangePayload,
+  SelectMode,
+} from '../types';
+import { Extension } from '../utils';
+
+export class InteractionManager implements IInteractionManager {
+  private extensions = new Extension<IInteraction>();
+  private emitter!: IEventEmitter;
+  private editor!: IEditor;
+  private commander!: ICommandManager;
+  private state!: IStateManager;
+  private interactions: IInteraction[] = [];
+
+  private active = false;
+  private running: IInteraction | null = null;
+  private concurrentInteractions: Set<IInteraction> = new Set();
+  private selection: Set<Selection[number]> = new Set();
+
+  init(options: InteractionManagerInitOptions) {
+    Object.assign(this, options);
+    document.addEventListener('click', this.handleClick);
+
+    this.interactions.forEach((interaction) => {
+      this.extensions.register(interaction.name, interaction);
+      interaction.init({
+        emitter: this.emitter,
+        editor: this.editor,
+        commander: this.commander,
+        state: this.state,
+        interaction: this,
+      });
+      this.emitter.emit('interaction:registered', interaction);
+    });
+  }
+
+  isActive() {
+    return this.active;
+  }
+
+  select(items: Selection, mode: SelectMode) {
+    const previous = this.getSelection();
+    const added: Selection = [];
+    const removed: Selection = [];
+
+    if (mode === 'replace') {
+      const next = new Set(items);
+      previous.forEach((id) => {
+        if (!next.has(id)) removed.push(id);
+      });
+      items.forEach((id) => {
+        if (!this.selection.has(id)) added.push(id);
+      });
+      this.selection = next;
+    } else if (mode === 'add') {
+      items.forEach((id) => {
+        if (!this.selection.has(id)) {
+          this.selection.add(id);
+          added.push(id);
+        }
+      });
+    } else if (mode === 'remove') {
+      items.forEach((id) => {
+        if (this.selection.delete(id)) {
+          removed.push(id);
+        }
+      });
+    } else if (mode === 'toggle') {
+      items.forEach((id) => {
+        if (this.selection.has(id)) {
+          this.selection.delete(id);
+          removed.push(id);
+        } else {
+          this.selection.add(id);
+          added.push(id);
+        }
+      });
+    }
+
+    const next = this.getSelection();
+    const payload: SelectionChangePayload = {
+      type: 'selection:change',
+      previous,
+      next,
+      added,
+      removed,
+      mode,
+    };
+    this.emitter.emit('selection:change', payload);
+  }
+
+  getSelection() {
+    return [...this.selection];
+  }
+
+  isSelected(item: Selection[number]) {
+    return this.selection.has(item);
+  }
+
+  clearSelection() {
+    const previous = this.getSelection();
+    this.selection.clear();
+
+    const payload: SelectionChangePayload = {
+      type: 'selection:change',
+      previous,
+      next: [],
+      added: [],
+      removed: previous,
+      mode: 'replace',
+    };
+
+    this.emitter.emit('selection:change', payload);
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    const doc = this.editor.getDocument();
+    const target = event.target;
+
+    if (!target) {
+      this.deactivate();
+      return;
+    }
+    // 点击画布 SVG 或者标记为组件的元素
+    if (
+      doc.contains(target as Node) ||
+      isInfographicComponent(target as HTMLElement)
+    )
+      this.activate();
+    else this.deactivate();
+  };
+
+  private activate() {
+    this.active = true;
+    this.emitter.emit('activated');
+  }
+
+  private deactivate() {
+    this.active = false;
+    this.running = null;
+    this.clearSelection();
+    this.emitter.emit('deactivated');
+  }
+
+  /**
+   * 执行互斥交互操作（同一时间只能有一个互斥交互在进行）
+   */
+  async executeExclusiveInteraction(
+    instance: IInteraction,
+    callback: () => Promise<void>,
+  ) {
+    // 如果未激活或已有互斥交互在运行，则拒绝执行
+    if (!this.active || this.running) return;
+
+    this.running = instance;
+
+    try {
+      this.emitter.emit('interaction:started', instance);
+      await callback();
+      this.emitter.emit('interaction:ended', instance);
+    } catch (error) {
+      console.error(
+        `Error occurred during exclusive interaction "${instance.name}":`,
+        error,
+      );
+      this.emitter.emit('interaction:error', instance, error);
+    } finally {
+      this.running = null;
+    }
+  }
+
+  /**
+   * 执行协同交互操作（允许多个协同交互同时进行）
+   */
+  async executeConcurrentInteraction(
+    instance: IInteraction,
+    callback: () => Promise<void>,
+  ) {
+    if (!this.active) return;
+
+    this.concurrentInteractions.add(instance);
+
+    try {
+      this.emitter.emit('interaction:started', instance);
+      await callback();
+      this.emitter.emit('interaction:ended', instance);
+    } catch (error) {
+      console.error(
+        `Error occurred during concurrent interaction "${instance.name}":`,
+        error,
+      );
+      this.emitter.emit('interaction:error', instance, error);
+    } finally {
+      this.concurrentInteractions.delete(instance);
+    }
+  }
+
+  private getOrCreateTransientContainer() {
+    const role = 'transient-container';
+    const doc = this.editor.getDocument();
+    const container = getElementByRole(doc, role);
+    if (container && container.isConnected) return container;
+
+    const g = createElement('g');
+    setElementRole(g, role);
+    doc.appendChild(g);
+    return g;
+  }
+
+  appendTransientElement<T extends SVGElement>(element: T): T {
+    const container = this.getOrCreateTransientContainer();
+    container.appendChild(element);
+    return element;
+  }
+
+  destroy() {
+    this.extensions.forEach((interaction) => {
+      interaction.destroy();
+      this.emitter.emit('interaction:destroyed', interaction);
+    });
+    this.extensions.destroy();
+
+    this.active = false;
+    this.running = null;
+    this.clearSelection();
+
+    document.removeEventListener('click', this.handleClick);
+    this.getOrCreateTransientContainer().remove();
+  }
+}

package/src/editor/managers/plugin.ts

@@ -0,0 +1,66 @@
+import { IEventEmitter } from '../../types';
+import type {
+  ICommandManager,
+  IEditor,
+  IPlugin,
+  IPluginManager,
+  IStateManager,
+  PluginInitOptions,
+  PluginManagerInitOptions,
+} from '../types';
+import { Extension } from '../utils';
+
+export class PluginManager implements IPluginManager {
+  private extensions = new Extension<IPlugin>();
+
+  private emitter!: IEventEmitter;
+  private editor!: IEditor;
+  private commander!: ICommandManager;
+  private state!: IStateManager;
+
+  init(options: PluginManagerInitOptions, plugins: IPlugin[] = []) {
+    Object.assign(this, options);
+
+    plugins.forEach((plugin) => {
+      this.registerPlugin(plugin);
+    });
+  }
+
+  getPlugin<T extends IPlugin>(name: string): T | undefined {
+    return this.extensions.get(name) as T | undefined;
+  }
+
+  getPlugins(): ReadonlyMap<string, IPlugin> {
+    return this.extensions.getAll();
+  }
+
+  registerPlugin(plugin: IPlugin): void {
+    this.extensions.register(plugin.name, plugin);
+    const pluginInitOptions: PluginInitOptions = {
+      emitter: this.emitter,
+      editor: this.editor,
+      commander: this.commander,
+      plugin: this,
+      state: this.state,
+    };
+    plugin.init(pluginInitOptions);
+    this.emitter.emit('plugin:registered', plugin);
+  }
+
+  unregisterPlugin(name: string): void {
+    const plugin = this.extensions.get(name);
+    if (plugin) {
+      plugin.destroy();
+      this.extensions.unregister(name);
+      this.emitter.emit('plugin:unregistered', plugin);
+    }
+  }
+
+  destroy(): void {
+    this.extensions.getAll().forEach((plugin) => {
+      this.unregisterPlugin(plugin.name);
+      this.emitter.emit('plugin:destroyed', plugin);
+    });
+    this.extensions.destroy();
+  }
+}

package/src/editor/managers/state.ts

@@ -0,0 +1,186 @@
+import { ElementTypeEnum } from '../../constants';
+import type { ParsedInfographicOptions } from '../../options';
+import type { Element, IEventEmitter, ItemDatum } from '../../types';
+import {
+  getDatumByIndexes,
+  getElementRole,
+  isIconElement,
+  parsePadding,
+  setSVGPadding,
+} from '../../utils';
+import type {
+  ElementProps,
+  ICommandManager,
+  IEditor,
+  IStateManager,
+  StateChangePayload,
+  StateManagerInitOptions,
+} from '../types';
+import {
+  buildItemPath,
+  getChildrenDataByIndexes,
+  getIndexesFromElement,
+} from '../utils';
+
+export class StateManager implements IStateManager {
+  emitter!: IEventEmitter;
+  editor!: IEditor;
+  command!: ICommandManager;
+  options!: ParsedInfographicOptions;
+
+  init(options: StateManagerInitOptions) {
+    Object.assign(this, options);
+  }
+
+  addItemDatum(indexes: number[], datum: ItemDatum | ItemDatum[]): void {
+    const pre = indexes.slice(0, -1);
+    const last = indexes[indexes.length - 1];
+
+    const arr = Array.isArray(datum) ? datum : [datum];
+    const list = getChildrenDataByIndexes(this.options.data, pre);
+    list.splice(last, 0, ...arr);
+
+    this.emitter.emit('options:data:item:add', { indexes, datum });
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'add',
+          path: 'data.items',
+          indexes,
+          value: arr,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  updateItemDatum(indexes: number[], datum: Partial<ItemDatum>): void {
+    const item = getDatumByIndexes(this.options.data, indexes);
+    Object.assign(item, datum);
+    this.emitter.emit('options:data:item:update', { indexes, datum });
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'update',
+          path: 'data.items',
+          indexes,
+          value: datum,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  removeItemDatum(indexes: number[], count = 1): void {
+    const pre = indexes.slice(0, -1);
+    const last = indexes[indexes.length - 1];
+
+    const list = getChildrenDataByIndexes(this.options.data, pre);
+    const datum = list.splice(last, count);
+
+    this.emitter.emit('options:data:item:remove', { indexes, datum });
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'remove',
+          path: 'data.items',
+          indexes,
+          value: datum,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  updateData(key: string, value: any) {
+    (this.options.data as any)[key] = value;
+    this.emitter.emit('options:data:update', { key, value });
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'update',
+          path: `data.${key}`,
+          value,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  updateElement(element: Element, props: Partial<ElementProps>): void {
+    this.updateBuiltInElement(element, props);
+  }
+
+  updateOptions(options: ParsedInfographicOptions) {
+    this.options = { ...this.options, ...options };
+    if (this.options.padding !== undefined) {
+      setSVGPadding(
+        this.editor.getDocument(),
+        parsePadding(this.options.padding),
+      );
+    }
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'update',
+          path: '',
+          value: options,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  getOptions(): ParsedInfographicOptions {
+    return this.options;
+  }
+
+  /**
+   * 不包含文本内容、图标类型更新
+   */
+  private updateBuiltInElement(element: Element, props: Partial<ElementProps>) {
+    const { data } = this.options;
+    const { attributes = {} } = props;
+    const role = getElementRole(element);
+    const isItemElement =
+      isIconElement(element) ||
+      ElementTypeEnum.ItemLabel === role ||
+      ElementTypeEnum.ItemDesc === role ||
+      ElementTypeEnum.ItemValue === role ||
+      ElementTypeEnum.ItemsIllus === role;
+    const indexes = isItemElement ? getIndexesFromElement(element) : undefined;
+    if (isItemElement) {
+      const datum = getDatumByIndexes(data, indexes!);
+      const key = role.replace('item-', '');
+      datum.attributes ||= {};
+      datum.attributes[key] ||= {};
+      Object.assign(datum.attributes[key], attributes);
+    } else if (
+      ElementTypeEnum.Title === role ||
+      ElementTypeEnum.Desc === role ||
+      ElementTypeEnum.Illus === role
+    ) {
+      data.attributes ||= {};
+      data.attributes[role] ||= {};
+      Object.assign(data.attributes[role], attributes);
+    }
+
+    this.emitter.emit('options:element:update', { element, props });
+    this.emitter.emit('options:change', {
+      type: 'options:change',
+      changes: [
+        {
+          op: 'update',
+          role,
+          indexes,
+          path: isItemElement
+            ? `${buildItemPath(indexes!)}.attributes.${role.replace('item-', '')}`
+            : `data.attributes.${role}`,
+          value: props,
+        },
+      ],
+    } satisfies StateChangePayload);
+  }
+
+  destroy(): void {}
+}

package/src/editor/plugins/base.ts

@@ -0,0 +1,25 @@
+import type { IEventEmitter } from '../../types';
+import type {
+  ICommandManager,
+  IEditor,
+  IPlugin,
+  IPluginManager,
+  IStateManager,
+  PluginInitOptions,
+} from '../types';
+
+export abstract class Plugin implements IPlugin {
+  abstract name: string;
+
+  protected emitter!: IEventEmitter;
+  protected editor!: IEditor;
+  protected commander!: ICommandManager;
+  protected plugin!: IPluginManager;
+  protected state!: IStateManager;
+
+  init(options: PluginInitOptions): void {
+    Object.assign(this, options);
+  }
+
+  abstract destroy(): void;
+}