@antv/infographic 0.2.13 → 0.2.15

package/src/editor/plugins/reset-viewbox.ts

@@ -0,0 +1,258 @@
+import { COMPONENT_ROLE } from '../../constants';
+import {
+  getBoundViewBox,
+  getViewBox,
+  injectStyleOnce,
+  parsePadding,
+  setElementRole,
+  viewBoxToString,
+} from '../../utils';
+import { UpdateOptionsCommand } from '../commands';
+import type { IPlugin, PluginInitOptions } from '../types';
+import { Plugin } from './base';
+import { IconButton } from './components';
+import { RESET_ICON } from './components/icons';
+
+const MARGIN_X = 25;
+const MARGIN_Y = 25;
+const BUTTON_SIZE = 40;
+export interface ResetViewBoxOptions {
+  style?: Partial<CSSStyleDeclaration>;
+  className?: string;
+  getContainer?: HTMLElement | (() => HTMLElement);
+}
+
+export class ResetViewBox extends Plugin implements IPlugin {
+  name = 'reset-viewBox';
+
+  private originViewBox!: string;
+  private resetButton?: HTMLButtonElement;
+  private viewBoxChanged = false;
+  private unregisterSync?: () => void;
+
+  constructor(private options?: ResetViewBoxOptions) {
+    super();
+  }
+
+  init(options: PluginInitOptions) {
+    super.init(options);
+
+    // Initialize originViewBox
+    this.ensureButtonStyle();
+    this.updateOriginViewBox();
+
+    this.unregisterSync = this.editor.registerSync(
+      'viewBox',
+      this.handleViewBoxChange,
+    );
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  destroy(): void {
+    this.unregisterSync?.();
+    window.removeEventListener('resize', this.handleResize);
+    this.removeButton();
+  }
+
+  private handleResize = () => {
+    this.updateOriginViewBox();
+    this.updatePosition();
+  };
+
+  private updateOriginViewBox() {
+    const svg = this.editor.getDocument();
+    // In Node env or before render, fallback to current viewBox attribute
+    if (!svg.getBBox) {
+      this.originViewBox = viewBoxToString(getViewBox(svg));
+      return;
+    }
+
+    // In Browser, calculate fit
+    const { padding } = this.state.getOptions();
+    this.originViewBox = getBoundViewBox(svg, parsePadding(padding));
+  }
+
+  private handleViewBoxChange = (viewBox?: string) => {
+    const svg = this.editor.getDocument();
+
+    this.viewBoxChanged = viewBox !== this.originViewBox;
+
+    if (!this.viewBoxChanged) {
+      if (this.resetButton) this.hideButton(this.resetButton);
+      return;
+    }
+    const button = this.getOrCreateResetButton();
+
+    this.placeButton(button, svg);
+    this.showButton(button);
+  };
+
+  protected getOrCreateResetButton = () => {
+    if (this.resetButton) return this.resetButton;
+
+    const { style, className } = this.options || {};
+
+    const button = IconButton({
+      icon: RESET_ICON,
+      onClick: this.resetViewBox,
+    });
+
+    button.classList.add(RESET_BUTTON_CLASS);
+
+    if (className) {
+      button.classList.add(className);
+    }
+
+    if (style) {
+      Object.assign(button.style, style);
+    }
+
+    setElementRole(button, COMPONENT_ROLE);
+
+    this.resetButton = button;
+
+    const { getContainer } = this.options || {};
+    const resolvedContainer =
+      typeof getContainer === 'function' ? getContainer() : getContainer;
+    const containerParent = resolvedContainer ?? document.body;
+
+    containerParent?.appendChild(button);
+
+    return button;
+  };
+
+  /** Get CSS transform scale of an element */
+  private getTransformScale = (
+    element: HTMLElement,
+  ): { scaleX: number; scaleY: number } => {
+    const rect = element.getBoundingClientRect();
+    const scaleX =
+      element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1;
+    const scaleY =
+      element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1;
+    return { scaleX, scaleY };
+  };
+
+  /** Find the nearest stable overflow container */
+  private findStableContainer = (svg: SVGSVGElement): HTMLElement | null => {
+    let current: Element | null = svg.parentElement;
+    while (current) {
+      if (current instanceof HTMLElement) {
+        const style = window.getComputedStyle(current);
+        // Look for overflow container or positioned element as stable reference
+        if (
+          (style.overflow && style.overflow !== 'visible') ||
+          (style.overflowX && style.overflowX !== 'visible') ||
+          (style.overflowY && style.overflowY !== 'visible')
+        ) {
+          return current;
+        }
+      }
+      current = current.parentElement;
+    }
+    return null;
+  };
+
+  private placeButton = (button: HTMLButtonElement, svg: SVGSVGElement) => {
+    if (!svg.isConnected) return;
+    const svgRect = svg.getBoundingClientRect();
+    const offsetParent =
+      (button.offsetParent as HTMLElement | null) ??
+      (document.documentElement as HTMLElement);
+
+    // Use stable container bounds to clamp button position when SVG overflows
+    const stableContainer = this.findStableContainer(svg);
+    const containerRect = stableContainer?.getBoundingClientRect();
+
+    // Prefer SVG bounds, but clamp to container if SVG overflows
+    const effectiveRect = containerRect
+      ? {
+          right: Math.min(svgRect.right, containerRect.right),
+          bottom: Math.min(svgRect.bottom, containerRect.bottom),
+        }
+      : svgRect;
+
+    if (
+      offsetParent === document.body ||
+      offsetParent === document.documentElement
+    ) {
+      const scrollX = window.scrollX || document.documentElement.scrollLeft;
+      const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+      const left = scrollX + effectiveRect.right - MARGIN_X - BUTTON_SIZE;
+      const top = scrollY + effectiveRect.bottom - MARGIN_Y - BUTTON_SIZE;
+
+      button.style.left = `${left}px`;
+      button.style.top = `${top}px`;
+      return;
+    }
+
+    const parentRect = offsetParent.getBoundingClientRect();
+
+    // Compensate for parent transform scale
+    const { scaleX, scaleY } = this.getTransformScale(offsetParent);
+
+    // Convert to offsetParent local coordinates
+    const left =
+      (effectiveRect.right - parentRect.left) / scaleX - MARGIN_X - BUTTON_SIZE;
+    const top =
+      (effectiveRect.bottom - parentRect.top) / scaleY - MARGIN_Y - BUTTON_SIZE;
+
+    button.style.left = `${left}px`;
+    button.style.top = `${top}px`;
+  };
+  private updatePosition = () => {
+    if (this.resetButton && this.viewBoxChanged) {
+      this.placeButton(this.resetButton, this.editor.getDocument());
+    }
+  };
+
+  private resetViewBox = () => {
+    const command = new UpdateOptionsCommand({
+      viewBox: this.originViewBox,
+    });
+    void this.commander.execute(command);
+  };
+
+  private showButton = (button: HTMLButtonElement) => {
+    button.style.display = 'flex';
+    button.style.visibility = 'visible';
+  };
+
+  private hideButton = (button: HTMLButtonElement) => {
+    button.style.display = 'none';
+  };
+
+  private removeButton = () => {
+    this.viewBoxChanged = false;
+    this.resetButton?.remove();
+    this.resetButton = undefined;
+  };
+
+  private ensureButtonStyle() {
+    injectStyleOnce(
+      RESET_BUTTON_STYLE_ID,
+      `
+      button.${RESET_BUTTON_CLASS} {
+        visibility: hidden;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: ${BUTTON_SIZE}px;
+        height: ${BUTTON_SIZE}px;
+        border-radius: 50%;
+        padding: 4px;
+        background-color: #fff;
+        border: 1px solid #e5e7eb;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+      }
+      `,
+    );
+  }
+}
+
+const RESET_BUTTON_CLASS = 'infographic-reset-viewbox-btn';
+const RESET_BUTTON_STYLE_ID = 'infographic-reset-viewbox-btn-style';

package/src/editor/types/editor.ts

@@ -1,4 +1,22 @@
+import type { InfographicOptionPath } from '../../options';
+import type { ICommandManager } from './command';
+import type { IInteractionManager } from './interaction';
+import type { IPluginManager } from './plugin';
+import type { IStateManager } from './state';
+import type { ISyncRegistry, SyncHandler } from './sync';
+
 export interface IEditor {
+  commander: ICommandManager;
+  interaction: IInteractionManager;
+  plugin: IPluginManager;
+  state: IStateManager;
+  syncRegistry: ISyncRegistry;
+
   getDocument(): SVGSVGElement;
+  registerSync(
+    path: InfographicOptionPath | (string & {}),
+    handler: SyncHandler,
+    options?: { immediate?: boolean },
+  ): () => void;
   destroy(): void;
 }

package/src/editor/types/index.ts

@@ -5,3 +5,4 @@ export type * from './plugin';
 export type * from './selection';
 export type * from './shape';
 export type * from './state';
+export type * from './sync';

package/src/editor/types/interaction.ts

@@ -4,6 +4,32 @@ import type { IEditor } from './editor';
 import type { Selection } from './selection';
 import type { IStateManager } from './state';
 
+/**
+ * Union type of common key codes, using (string & {}) trick to provide completion suggestions without limiting specific strings
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+ */
+export type KeyCode =
+  | 'Space'
+  | 'ShiftLeft'
+  | 'ShiftRight'
+  | 'ControlLeft'
+  | 'ControlRight'
+  | 'AltLeft'
+  | 'AltRight'
+  | 'MetaLeft'
+  | 'MetaRight'
+  | 'CapsLock'
+  | 'Tab'
+  | 'Enter'
+  | 'Escape'
+  | 'ArrowUp'
+  | 'ArrowDown'
+  | 'ArrowLeft'
+  | 'ArrowRight'
+  | `Key${string}`
+  | `Digit${number}`
+  | (string & {});
+
 export interface IInteraction {
   name: string;
   init(options: InteractionInitOptions): void;
@@ -21,6 +47,11 @@ export interface SelectionChangePayload {
   mode: SelectMode;
 }
 
+export interface viewBoxChangePayload {
+  type: 'viewBox:change';
+  viewBox: string | undefined;
+}
+
 export interface IInteractionManager {
   isActive(): boolean;
   select(items: Selection, mode: SelectMode): void;

package/src/editor/types/state.ts

@@ -1,4 +1,7 @@
-import type { ParsedInfographicOptions } from '../../options';
+import type {
+  ParsedInfographicOptions,
+  UpdatableInfographicOptions,
+} from '../../options';
 import type { Element, IEventEmitter, ItemDatum } from '../../types';
 import type { ICommandManager } from './command';
 import type { IEditor } from './editor';
@@ -24,7 +27,16 @@ export interface IStateManager {
   removeItemDatum(indexes: number[], count?: number): void;
   updateData(key: string, value: any): void;
   updateElement(element: Element, props: Partial<ElementProps>): void;
-  updateOptions(options: ParsedInfographicOptions): void;
+  updateOptions(
+    options: UpdatableInfographicOptions,
+    // Configuration for this update execution
+    execOptions?: {
+      // Whether to bubble up notifications to parent paths.
+      // Enabling this might duplicate objects and impact performance.
+      // Default is false.
+      bubbleUp?: boolean;
+    },
+  ): void;
   getOptions(): ParsedInfographicOptions;
   destroy(): void;
 }

package/src/editor/types/sync.ts

@@ -0,0 +1,33 @@
+import type { InfographicOptionPath } from '../../options';
+
+/**
+ * Sync callback
+ * @param newValue The new value after modification
+ * @param oldValue The old value before modification. Note: This value is undefined when triggered by parent path bubbling notification (i.e., listening to a non-leaf node).
+ */
+export type SyncHandler = (newValue: any, oldValue: any) => void;
+
+export interface ISyncRegistry {
+  /**
+   * Register synchronization logic
+   * @param path Configuration path, such as 'design.background'
+   * @param handler Sync callback
+   * @param options.immediate Whether to execute immediately (used for view initialization)
+   * @returns unregister function
+   */
+  register(
+    path: InfographicOptionPath | (string & {}),
+    handler: SyncHandler,
+    options?: { immediate?: boolean },
+  ): () => void;
+
+  /**
+   * Trigger synchronization (usually called by StateManager)
+   * @param path Configuration path
+   * @param newVal New value
+   * @param oldVal Old value
+   */
+  trigger(path: string, newVal: any, oldVal: any): void;
+
+  destroy(): void;
+}

package/src/editor/utils/data.ts

@@ -8,8 +8,9 @@ export function getChildrenDataByIndexes(
   data: ParsedData,
   indexes: number[],
 ): ItemDatum[] {
-  if (indexes.length === 0) return data.data;
+  if (indexes.length === 0) return data.items;
   const datum = getDatumByIndexes(data, indexes);
+  if (datum == null) return [];
   datum.children ||= [];
   return datum.children;
 }

package/src/editor/utils/event.ts

@@ -90,3 +90,10 @@ const getIconEventTarget = (element: SVGElement): IconElement | null => {
 
   return null;
 };
+
+export function 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/utils/index.ts

@@ -5,3 +5,4 @@ export * from './element';
 export * from './event';
 export * from './extension';
 export * from './hotkey';
+export * from './object';

package/src/editor/utils/object.ts

@@ -0,0 +1,116 @@
+import { cloneDeep, isEqual, isPlainObject } from 'lodash-es';
+
+export interface ApplyOptionUpdatesOptions {
+  /** Whether to notify parent paths of changes (bubbling) */
+  bubbleUp?: boolean;
+  /** Callback triggered whenever a property value changes */
+  collector?: (path: string, newVal: any, oldVal: any) => void;
+}
+
+/**
+ * Recursively applies properties from 'source' to 'target' and collects changes.
+ *
+ * @param target - The object to be updated
+ * @param source - The source object containing partial updates
+ * @param basePath - Current path prefix for nested properties
+ * @param options - Configuration options
+ */
+export function applyOptionUpdates(
+  target: any,
+  source: any,
+  basePath: string = '',
+  options?: ApplyOptionUpdatesOptions,
+): void {
+  const { bubbleUp = false, collector } = options ?? {};
+
+  const hasChange = applyOptionUpdatesInternal(
+    target,
+    source,
+    basePath,
+    collector,
+    bubbleUp,
+  );
+
+  if (basePath === '' && hasChange && bubbleUp && collector) {
+    collector('', cloneDeep(target), undefined);
+  }
+}
+
+/**
+ * Internal recursive function.
+ * Returns true if any change occurred within this branch (or its children).
+ */
+function applyOptionUpdatesInternal(
+  target: any,
+  source: any,
+  basePath: string,
+  collector: ((path: string, newVal: any, oldVal: any) => void) | undefined,
+  bubbleUp: boolean,
+): boolean {
+  let hasChange = false;
+
+  Object.keys(source).forEach((key) => {
+    if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+      return;
+    }
+
+    const fullPath = basePath ? `${basePath}.${key}` : key;
+    const updateValue = source[key];
+    const oldValue = target[key];
+    let childChanged = false;
+
+    if (updateValue === undefined) {
+      // Handle deletion: Only delete and notify if the key actually exists
+      if (key in target) {
+        delete target[key];
+        collector?.(fullPath, undefined, oldValue);
+        childChanged = true;
+      }
+    } else if (isPlainObject(updateValue)) {
+      // Handle nested object
+      const oldValueIsObject = isPlainObject(target[key]);
+      if (!oldValueIsObject) {
+        target[key] = {};
+      }
+
+      const grandChildChanged = applyOptionUpdatesInternal(
+        target[key],
+        updateValue,
+        fullPath,
+        collector,
+        bubbleUp,
+      );
+
+      if (!oldValueIsObject) {
+        // Overwriting a primitive with an object is always a change.
+        childChanged = true;
+        // If the object was empty (grandChildChanged is false), we still need to report it.
+        if (!grandChildChanged) {
+          collector?.(fullPath, target[key], oldValue);
+        }
+      } else {
+        childChanged = grandChildChanged;
+      }
+    } else {
+      // Handle primitive update
+      target[key] = updateValue;
+      if (!isEqual(updateValue, oldValue)) {
+        collector?.(fullPath, updateValue, oldValue);
+        childChanged = true;
+      }
+    }
+
+    if (childChanged) {
+      hasChange = true;
+    }
+  });
+
+  // Bubbling: Notify if any child changed in this branch
+  // The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
+  if (hasChange && bubbleUp && basePath !== '') {
+    // Current target is now fully updated for this scope.
+    collector?.(basePath, cloneDeep(target), undefined);
+  }
+
+  return hasChange;
+}

package/src/index.ts

@@ -1,16 +1,23 @@
 export * from './designs';
 export { getItemProps, getThemeColors } from './designs/utils';
+export {
+  BatchCommand,
+  UpdateElementCommand,
+  UpdateOptionsCommand,
+  UpdateTextCommand,
+} from './editor/commands';
 export {
   BrushSelect,
   ClickSelect,
   DblClickEditText,
+  DragCanvas,
   DragElement,
   HotkeyHistory,
   Interaction,
   SelectHighlight,
   ZoomWheel,
 } from './editor/interactions';
-export { EditBar, Plugin, ResizeElement } from './editor/plugins';
+export { EditBar, Plugin, ResetViewBox, ResizeElement } from './editor/plugins';
 export { exportToSVG } from './exporter';
 export {
   Defs,
@@ -51,7 +58,24 @@ export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG, setFontExtendFactor } from './utils';
 export { VERSION } from './version';
 
-export type { EditBarOptions } from './editor';
+export type {
+  EditBarOptions,
+  ICommand,
+  ICommandManager,
+  IEditor,
+  IInteraction,
+  IInteractionManager,
+  IPlugin,
+  IPluginManager,
+  IStateManager,
+  ISyncRegistry,
+  InteractionInitOptions,
+  KeyCode,
+  PluginInitOptions,
+  SelectMode,
+  Selection,
+  SyncHandler,
+} from './editor';
 export type {
   ExportOptions,
   PNGExportOptions,

package/src/options/types.ts

@@ -2,6 +2,7 @@ import type { DesignOptions, ParsedDesignsOptions } from '../designs';
 import type { ElementProps, IInteraction, IPlugin } from '../editor';
 import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
+import type { Path } from '../utils';
 
 export interface InfographicOptions {
   /** 容器，可以是选择器或者 HTMLElement */
@@ -54,6 +55,10 @@ export interface ParsedInfographicOptions {
   shapes?: ElementProps[];
 }
 
+export type UpdatableInfographicOptions = Partial<
+  Omit<ParsedInfographicOptions, 'container'>
+>;
+
 interface SVGOptions {
   style?: Record<string, string | number>;
   attributes?: Record<string, string | number | boolean>;
@@ -62,3 +67,9 @@ interface SVGOptions {
   /** 是否启用背景 */
   background?: boolean;
 }
+
+/**
+ * All valid property paths for Infographic Options.
+ * Use this to validate paths in SyncRegistry and other places.
+ */
+export type InfographicOptionPath = Path<UpdatableInfographicOptions>;

package/src/runtime/Infographic.tsx

@@ -11,7 +11,7 @@ import {
   ParsedInfographicOptions,
   parseOptions,
 } from '../options';
-import { Renderer } from '../renderer';
+import { DEFAULT_FONT, Renderer, setDefaultFont } from '../renderer';
 import { waitForSvgLoads } from '../resource';
 import { parseSyntax, type SyntaxError } from '../syntax';
 import { IEventEmitter } from '../types';
@@ -133,29 +133,39 @@ export class Infographic {
    * Compose the SVG template
    */
   compose(parsedOptions: ParsedInfographicOptions): SVGSVGElement {
-    const { design, data } = parsedOptions;
+    const { design, data, themeConfig } = parsedOptions;
     const { title, item, items, structure } = design;
     const { component: Structure, props: structureProps } = structure;
     const Title = title.component;
     const Item = item.component;
     const Items = items.map((it) => it.component);
 
-    const svg = renderSVG(
-      <Structure
-        data={data}
-        Title={Title}
-        Item={Item}
-        Items={Items}
-        options={parsedOptions}
-        {...structureProps}
-      />,
-    );
-
-    const template = parseSVG(svg);
-    if (!template) {
-      throw new Error('Failed to parse SVG template');
+    // Apply theme font-family before measurement so measureText uses the correct font
+    const themeFontFamily = themeConfig?.base?.text?.['font-family'];
+    const previousDefaultFont = DEFAULT_FONT;
+    if (themeFontFamily) setDefaultFont(themeFontFamily);
+
+    try {
+      const svg = renderSVG(
+        <Structure
+          data={data}
+          Title={Title}
+          Item={Item}
+          Items={Items}
+          options={parsedOptions}
+          {...structureProps}
+        />,
+      );
+
+      const template = parseSVG(svg);
+      if (!template) {
+        throw new Error('Failed to parse SVG template');
+      }
+      return template;
+    } finally {
+      // Restore previous default font
+      if (themeFontFamily) setDefaultFont(previousDefaultFont);
     }
-    return template;
   }
 
   getTypes() {