@antv/infographic 0.1.1 → 0.1.3

package/src/editor/types/state.ts

@@ -0,0 +1,51 @@
+import type { ParsedInfographicOptions } from '../../options';
+import type { Element, IEventEmitter, ItemDatum } from '../../types';
+import type { ICommandManager } from './command';
+import type { IEditor } from './editor';
+import type { ElementProps } from './shape';
+
+export interface StateChangePayload {
+  type: 'options:change';
+  changes: StateChange[];
+}
+
+export interface StateChange {
+  op: 'add' | 'remove' | 'update';
+  role?: string;
+  path: string;
+  indexes?: number[];
+  value: any;
+}
+
+export interface IStateManager {
+  init(options: StateManagerInitOptions): void;
+  addItemDatum(indexes: number[], datum: ItemDatum | ItemDatum[]): void;
+  updateItemDatum(indexes: number[], datum: Partial<ItemDatum>): void;
+  removeItemDatum(indexes: number[], count?: number): void;
+  updateData(key: string, value: any): void;
+  updateElement(element: Element, props: Partial<ElementProps>): void;
+  updateOptions(options: ParsedInfographicOptions): void;
+  getOptions(): ParsedInfographicOptions;
+  destroy(): void;
+}
+
+export interface StateManagerInitOptions {
+  emitter: IEventEmitter;
+  editor: IEditor;
+  commander: ICommandManager;
+  options?: ParsedInfographicOptions;
+}
+
+export interface StateEventPayloadMap {
+  'options:change': StateChangePayload;
+  'options:data:item:add': {
+    indexes: number[];
+    datum: ItemDatum | ItemDatum[];
+  };
+  'options:data:item:update': { indexes: number[]; datum: Partial<ItemDatum> };
+  'options:data:item:remove': { indexes: number[]; datum: ItemDatum[] };
+  'options:data:update': { key: string; value: any };
+  'options:element:update': { element: Element; props: Partial<ElementProps> };
+}
+
+export type StateEventName = keyof StateEventPayloadMap;

package/src/editor/utils/click-handler.ts

@@ -0,0 +1,114 @@
+interface ClickHandlerOptions {
+  delay?: number;
+  dragThreshold?: number;
+}
+
+export class ClickHandler {
+  private element: SVGSVGElement;
+  private delay: number;
+  private dragThreshold: number;
+  private clickTimer: number | null = null;
+  private singleClickCallback: ((e: MouseEvent) => void) | null = null;
+  private doubleClickCallback: ((e: MouseEvent) => void) | null = null;
+  private pointerId: number | null = null;
+  private startX = 0;
+  private startY = 0;
+  private skipClick = false;
+  private dragged = false;
+
+  constructor(element: SVGSVGElement, options: ClickHandlerOptions = {}) {
+    this.element = element;
+    this.delay = options.delay || 300;
+    this.dragThreshold = options.dragThreshold ?? 4;
+    this.init();
+  }
+
+  private init(): void {
+    this.element.addEventListener('click', this.handleClick.bind(this));
+    this.element.addEventListener(
+      'dblclick',
+      this.handleDoubleClick.bind(this),
+    );
+    this.element.addEventListener('pointerdown', this.handlePointerDown);
+  }
+
+  private handleClick(e: MouseEvent): void {
+    if (this.skipClick) {
+      this.skipClick = false;
+      return;
+    }
+    if (this.clickTimer) clearTimeout(this.clickTimer);
+
+    this.clickTimer = window.setTimeout(() => {
+      this.singleClickCallback?.(e);
+    }, this.delay);
+  }
+
+  private handleDoubleClick(e: MouseEvent): void {
+    if (this.skipClick) {
+      this.skipClick = false;
+      return;
+    }
+    if (this.clickTimer) clearTimeout(this.clickTimer);
+    this.doubleClickCallback?.(e);
+  }
+
+  private handlePointerDown = (event: PointerEvent) => {
+    this.pointerId = event.pointerId;
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.dragged = false;
+    this.skipClick = false;
+    window.addEventListener('pointermove', this.handlePointerMove, {
+      passive: true,
+    });
+    window.addEventListener('pointerup', this.handlePointerUp, {
+      passive: true,
+    });
+    window.addEventListener('pointercancel', this.handlePointerUp, {
+      passive: true,
+    });
+  };
+
+  private handlePointerMove = (event: PointerEvent) => {
+    if (this.pointerId === null || event.pointerId !== this.pointerId) return;
+    const dx = event.clientX - this.startX;
+    const dy = event.clientY - this.startY;
+    if (Math.hypot(dx, dy) > this.dragThreshold) {
+      this.skipClick = true;
+      this.dragged = true;
+    }
+  };
+
+  private handlePointerUp = (event: PointerEvent) => {
+    if (this.pointerId !== null && event.pointerId === this.pointerId) {
+      this.pointerId = null;
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+      window.removeEventListener('pointercancel', this.handlePointerUp);
+      // Only allow click through if we did not detect a drag.
+      if (!this.dragged) this.skipClick = false;
+      this.dragged = false;
+    }
+  };
+
+  onClick(callback: (e: MouseEvent) => void): this {
+    this.singleClickCallback = callback;
+    return this;
+  }
+
+  onDoubleClick(callback: (e: MouseEvent) => void): this {
+    this.doubleClickCallback = callback;
+    return this;
+  }
+
+  destroy(): void {
+    if (this.clickTimer) clearTimeout(this.clickTimer);
+    this.element.removeEventListener('click', this.handleClick);
+    this.element.removeEventListener('dblclick', this.handleDoubleClick);
+    this.element.removeEventListener('pointerdown', this.handlePointerDown);
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    window.removeEventListener('pointercancel', this.handlePointerUp);
+  }
+}

package/src/editor/utils/coordinate.ts

@@ -0,0 +1,54 @@
+import type { Element } from '../../types';
+
+export function getScreenCTM(svg: SVGSVGElement): DOMMatrix {
+  return svg.getScreenCTM() || new DOMMatrix();
+}
+
+export function getInverseScreenCTM(svg: SVGSVGElement): DOMMatrix {
+  return svg.getScreenCTM()?.inverse() || new DOMMatrix();
+}
+
+export function viewportToClient(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+): DOMPoint {
+  const svgPoint = new DOMPoint(x, y).matrixTransform(getScreenCTM(svg));
+  const containerBounds = svg.getBoundingClientRect();
+  return new DOMPoint(
+    svgPoint.x - containerBounds.left,
+    svgPoint.y - containerBounds.top,
+  );
+}
+
+export function clientToViewport(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+): DOMPoint {
+  return new DOMPoint(x, y).matrixTransform(getInverseScreenCTM(svg));
+}
+
+export function getElementViewportBounds(
+  svg: SVGSVGElement,
+  element: Element,
+): DOMRect {
+  const bounds = element.getBoundingClientRect();
+  const points = [
+    { x: bounds.x, y: bounds.y }, // 左上
+    { x: bounds.x + bounds.width, y: bounds.y }, // 右上
+    { x: bounds.x, y: bounds.y + bounds.height }, // 左下
+    { x: bounds.x + bounds.width, y: bounds.y + bounds.height }, // 右下
+  ];
+
+  const transformedPoints = points.map((point) => {
+    return clientToViewport(svg, point.x, point.y);
+  });
+
+  const minX = Math.min(...transformedPoints.map((p) => p.x));
+  const maxX = Math.max(...transformedPoints.map((p) => p.x));
+  const minY = Math.min(...transformedPoints.map((p) => p.y));
+  const maxY = Math.max(...transformedPoints.map((p) => p.y));
+
+  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}

package/src/editor/utils/data.ts

@@ -0,0 +1,30 @@
+import type { Data, ItemDatum } from '../../types';
+import { getDatumByIndexes } from '../../utils';
+
+/**
+ * 获取数据项的子数据
+ */
+export function getChildrenDataByIndexes(
+  data: Data,
+  indexes: number[],
+): ItemDatum[] {
+  if (indexes.length === 0) return data.data;
+  const datum = getDatumByIndexes(data, indexes);
+  datum.children ||= [];
+  return datum.children;
+}
+
+/**
+ * Build lodash-style path for an item based on indexes.
+ * Example: [1,2] -> data.items[1].children[2]
+ */
+export function buildItemPath(
+  indexes: number[],
+  prefix = 'data.items',
+): string {
+  return indexes.reduce(
+    (path, idx, i) =>
+      i === 0 ? `${path}[${idx}]` : `${path}.children[${idx}]`,
+    prefix,
+  );
+}

package/src/editor/utils/element.ts

@@ -0,0 +1,13 @@
+import type { Element } from '../../types';
+import { getIconEntity, isIconElement } from '../../utils';
+
+export function getIndexesFromElement(element: Element): number[] {
+  return (
+    getElementEntity(element)?.dataset.indexes?.split(',').map(Number) || []
+  );
+}
+
+function getElementEntity(element: Element) {
+  if (isIconElement(element)) return getIconEntity(element);
+  return element;
+}

package/src/editor/utils/event.ts

@@ -0,0 +1,92 @@
+import { Element, IconElement, TextElement } from '../../types';
+import {
+  isEditArea,
+  isEditableText,
+  isForeignObjectElement,
+  isIconElement,
+  isItemIcon,
+  isItemIconGroup,
+  isRoughElement,
+  isRoughVolume,
+  isTextEntity,
+} from '../../utils';
+
+export function getEventTarget(element: SVGElement | null): Element | null {
+  if (!element) return null;
+  const preprocess = [getRoughEventTarget];
+
+  let target = element as SVGElement;
+
+  for (const fn of preprocess) {
+    const result = fn(target);
+    if (result) {
+      target = result;
+      break;
+    }
+  }
+
+  return getSelectableTarget(target);
+}
+
+export function getSelectableTarget(
+  element: SVGElement | null,
+): Element | null {
+  if (!element) return null;
+
+  const recognizers = [getTextEventTarget, getIconEventTarget];
+
+  for (const fn of recognizers) {
+    const result = fn(element);
+    if (result) {
+      return result;
+    }
+  }
+
+  if (isEditArea(element)) {
+    return element as unknown as Element;
+  }
+
+  if (isEditableText(element) || isIconElement(element)) {
+    return element as unknown as Element;
+  }
+
+  return null;
+}
+
+const getRoughEventTarget = (element: SVGElement): SVGElement | null => {
+  const is = (ele: SVGElement | null) => {
+    if (!ele) return false;
+    return isRoughElement(ele) || isRoughVolume(ele);
+  };
+
+  if (is(element)) {
+    return element.parentElement as unknown as SVGElement;
+  }
+
+  if (is(element.parentElement as unknown as SVGElement)) {
+    return element.parentElement?.parentElement as unknown as SVGElement;
+  }
+
+  return null;
+};
+
+const getTextEventTarget = (element: SVGElement): TextElement | null => {
+  if (isTextEntity(element) && isForeignObjectElement(element.parentElement)) {
+    return element.parentElement as unknown as TextElement;
+  }
+  return null;
+};
+
+const getIconEventTarget = (element: SVGElement): IconElement | null => {
+  const parent = element.parentElement as unknown as SVGElement;
+
+  if (isItemIconGroup(parent)) {
+    return parent as unknown as IconElement;
+  }
+
+  if (isItemIcon(element)) {
+    return element as unknown as IconElement;
+  }
+
+  return null;
+};

package/src/editor/utils/extension.ts

@@ -0,0 +1,45 @@
+export class Extension<T> {
+  private extensions: Map<string, T> = new Map();
+
+  register(name: string, extension: T, options?: { override?: boolean }) {
+    if (!options?.override && this.extensions.has(name)) {
+      throw new Error(`Extension "${name}" already registered`);
+    }
+    this.extensions.set(name, extension);
+  }
+
+  get(name: string): T | undefined {
+    return this.extensions.get(name);
+  }
+
+  has(name: string): boolean {
+    return this.extensions.has(name);
+  }
+
+  getAll(): ReadonlyMap<string, T> {
+    return this.extensions;
+  }
+
+  forEach(callback: (extension: T, name: string) => void) {
+    this.extensions.forEach((extension, name) => {
+      callback(extension, name);
+    });
+  }
+
+  [Symbol.iterator]() {
+    return this.extensions.entries();
+  }
+
+  unregister(name: string): boolean {
+    return this.extensions.delete(name);
+  }
+
+  destroy() {
+    this.extensions.forEach((extension) => {
+      if (extension && typeof (extension as any).dispose === 'function') {
+        (extension as any).dispose();
+      }
+    });
+    this.extensions.clear();
+  }
+}

package/src/editor/utils/hotkey.ts

@@ -0,0 +1,139 @@
+type HotkeyBinding = {
+  combos: HotkeyCombo[];
+  handler: (event: KeyboardEvent) => void;
+};
+
+type HotkeyCombo = {
+  key: string;
+  shift?: boolean;
+  alt?: boolean;
+  ctrl?: boolean;
+  meta?: boolean;
+  mod?: boolean;
+};
+
+export type HotkeyOptions = {
+  /**
+   * 热键监听的目标，默认监听 document。
+   */
+  target?: Document | HTMLElement;
+  /**
+   * 额外的过滤逻辑，返回 false 时会跳过本次事件。
+   */
+  filter?: (event: KeyboardEvent) => boolean;
+};
+
+const isEditableTarget = (target: EventTarget | null) => {
+  if (!target) return false;
+  if (!(target instanceof HTMLElement)) return false;
+
+  if (target.isContentEditable) return true;
+
+  const tagName = target.tagName.toLowerCase();
+  return tagName === 'input' || tagName === 'textarea' || tagName === 'select';
+};
+
+const normalizeCombo = (combo: string): HotkeyCombo => {
+  const parts = combo
+    .toLowerCase()
+    .split('+')
+    .map((p) => p.trim())
+    .filter(Boolean);
+
+  const comboObj: HotkeyCombo = { key: '' };
+
+  parts.forEach((part) => {
+    if (part === 'shift') comboObj.shift = true;
+    else if (part === 'alt' || part === 'option') comboObj.alt = true;
+    else if (part === 'ctrl' || part === 'control') comboObj.ctrl = true;
+    else if (part === 'meta' || part === 'cmd' || part === 'command')
+      comboObj.meta = true;
+    else if (part === 'mod') comboObj.mod = true;
+    else comboObj.key = part;
+  });
+
+  if (!comboObj.key) {
+    throw new Error(`Invalid hotkey combo: "${combo}"`);
+  }
+
+  return comboObj;
+};
+
+const matchCombo = (event: KeyboardEvent, combo: HotkeyCombo) => {
+  const key = event.key.toLowerCase();
+  if (key !== combo.key) return false;
+
+  const wantsMod = combo.mod ?? false;
+  const hasMeta = event.metaKey;
+  const hasCtrl = event.ctrlKey;
+  const hasMod = hasMeta || hasCtrl;
+  const matchesStrict = (expected: boolean | undefined, actual: boolean) =>
+    expected === undefined ? !actual : expected === actual;
+
+  if (wantsMod && !hasMod) return false;
+
+  if (wantsMod) {
+    if (!matchesStrict(combo.shift, event.shiftKey)) return false;
+    if (!matchesStrict(combo.alt, event.altKey)) return false;
+    if (combo.meta !== undefined && !matchesStrict(combo.meta, hasMeta))
+      return false;
+    if (combo.ctrl !== undefined && !matchesStrict(combo.ctrl, hasCtrl))
+      return false;
+    return true;
+  }
+
+  if (!matchesStrict(combo.meta, hasMeta)) return false;
+  if (!matchesStrict(combo.ctrl, hasCtrl)) return false;
+  if (!matchesStrict(combo.shift, event.shiftKey)) return false;
+  if (!matchesStrict(combo.alt, event.altKey)) return false;
+
+  return true;
+};
+
+export class Hotkey {
+  private target: Document | HTMLElement;
+  private filter?: (event: KeyboardEvent) => boolean;
+  private bindings: HotkeyBinding[] = [];
+
+  constructor(options: HotkeyOptions = {}) {
+    const { target = document, filter } = options;
+    this.target = target;
+    this.filter = filter;
+
+    this.target.addEventListener('keydown', this.handleKeydown);
+  }
+
+  bind(combo: string | string[], handler: (event: KeyboardEvent) => void) {
+    const combos = Array.isArray(combo) ? combo : [combo];
+    const binding: HotkeyBinding = {
+      combos: combos.map((c) => normalizeCombo(c)),
+      handler,
+    };
+    this.bindings.push(binding);
+
+    return () => this.unbind(binding);
+  }
+
+  destroy() {
+    this.target.removeEventListener('keydown', this.handleKeydown);
+    this.bindings = [];
+  }
+
+  private unbind(binding: HotkeyBinding) {
+    this.bindings = this.bindings.filter((item) => item !== binding);
+  }
+
+  private handleKeydown: EventListener = (event) => {
+    if (!(event instanceof KeyboardEvent)) return;
+    if (event.defaultPrevented) return;
+    if (isEditableTarget(event.target)) return;
+    if (this.filter && !this.filter(event)) return;
+
+    for (const binding of this.bindings) {
+      if (binding.combos.some((combo) => matchCombo(event, combo))) {
+        binding.handler(event);
+        break;
+      }
+    }
+  };
+}

package/src/editor/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './click-handler';
+export * from './coordinate';
+export * from './data';
+export * from './element';
+export * from './event';
+export * from './extension';
+export * from './hotkey';

package/src/exporter/svg.ts

@@ -1,4 +1,12 @@
-import { createElement, getViewBox, setAttributes, traverse } from '../utils';
+import { ElementTypeEnum } from '../constants';
+import {
+  createElement,
+  getElementByRole,
+  getViewBox,
+  setAttributes,
+  setElementRole,
+  traverse,
+} from '../utils';
 import { embedFonts } from './font';
 import type { SVGExportOptions } from './types';
 
@@ -44,10 +52,12 @@ async function embedIcons(svg: SVGSVGElement) {
   });
 }
 
+const iconRole = 'icon-defs';
 function getDefs(svg: SVGSVGElement) {
-  const defs = svg.querySelector('defs[id="icon-defs"]');
+  const defs = getElementByRole(svg, iconRole);
   if (defs) return defs;
-  const _defs = createElement('defs', { id: 'icon-defs' });
+  const _defs = createElement('defs');
+  setElementRole(_defs, iconRole);
   svg.prepend(_defs);
   return _defs;
 }
@@ -61,10 +71,10 @@ function cleanSVG(svg: SVGSVGElement) {
 }
 
 function removeBtnGroup(svg: SVGSVGElement) {
-  const btnGroup = svg.querySelector('[data-element-type=btns-group]');
+  const btnGroup = getElementByRole(svg, ElementTypeEnum.BtnsGroup);
   btnGroup?.remove();
 
-  const btnIconDefs = svg.querySelector('#btn-icon-defs');
+  const btnIconDefs = getElementByRole(svg, 'btn-icon-defs');
   btnIconDefs?.remove();
 }
 

package/src/index.ts

@@ -3,6 +3,17 @@ import pkg from '../package.json';
 export const VERSION = pkg.version;
 export * from './designs';
 export { getItemProps, getThemeColors } from './designs/utils';
+export {
+  BrushSelect,
+  ClickSelect,
+  DblClickEditText,
+  DragElement,
+  HotkeyHistory,
+  Interaction,
+  SelectHighlight,
+  ZoomWheel,
+} from './editor/interactions';
+export { EditBar, Plugin, ResizeElement } from './editor/plugins';
 export {
   Defs,
   Ellipse,
@@ -39,6 +50,7 @@ export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';
 
+export type { EditBarOptions } from './editor';
 export type {
   Bounds,
   ComponentType,
@@ -71,9 +83,6 @@ export type {
   RadialGradient,
   RoughConfig,
   StylizeConfig,
-  TextAlignment,
-  TextHorizontalAlign,
-  TextVerticalAlign,
 } from './renderer';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
@@ -83,4 +92,6 @@ export type {
   FontWeightName,
   ImageResource,
   ItemDatum,
+  TextHorizontalAlign,
+  TextVerticalAlign,
 } from './types';

package/src/jsx/components/Polygon.ts

@@ -10,7 +10,8 @@ export function Polygon({ points = [], ...props }: PolygonProps): JSXElement {
   };
 
   if (x !== undefined || y !== undefined) {
-    finalProps.transform = `translate(${x ?? 0}, ${y ?? 0})`;
+    finalProps.transform =
+      `translate(${x ?? 0}, ${y ?? 0})` + (finalProps.transform || '');
   }
 
   const node: JSXElement = {