@antv/infographic 0.2.13 → 0.2.14

package/src/editor/plugins/{edit-bar/components → components}/select.ts

@@ -1,4 +1,4 @@
-import { injectStyleOnce } from '../../../../utils';
+import { injectStyleOnce } from '../../../utils';
 
 export type SelectValue = string;
 

package/src/editor/plugins/core-sync.ts

@@ -0,0 +1,44 @@
+import { parsePadding, setSVGPadding } from '../../utils';
+import type { IPlugin, PluginInitOptions } from '../types';
+import { Plugin } from './base';
+
+export class CoreSyncPlugin extends Plugin implements IPlugin {
+  name = 'core-sync';
+
+  private unregisters: (() => void)[] = [];
+
+  init(options: PluginInitOptions) {
+    super.init(options);
+    const svg = this.editor.getDocument();
+
+    // viewBox Sync
+    this.unregisters.push(
+      this.editor.registerSync(
+        'viewBox',
+        (val) => {
+          if (val) {
+            svg.setAttribute('viewBox', val);
+          } else {
+            svg.removeAttribute('viewBox');
+          }
+        },
+        { immediate: true },
+      ),
+    );
+
+    // padding Sync
+    this.unregisters.push(
+      this.editor.registerSync(
+        'padding',
+        (val) => {
+          if (val !== undefined) setSVGPadding(svg, parsePadding(val));
+        },
+        { immediate: true },
+      ),
+    );
+  }
+
+  destroy() {
+    this.unregisters.forEach((fn) => fn());
+  }
+}

package/src/editor/plugins/edit-bar/edit-items/align-elements.ts

@@ -8,8 +8,8 @@ import {
 import { UpdateElementCommand } from '../../../commands';
 import type { ICommandManager, Selection } from '../../../types';
 import { getElementViewportBounds } from '../../../utils';
-import { ELEMENT_ICONS, IconButton, Popover } from '../components';
-import type { Icon } from '../components/icons';
+import { ELEMENT_ICONS, IconButton, Popover } from '../../components';
+import type { Icon } from '../../components/icons';
 import type { EditItem } from './types';
 
 const GRID_CLASS = 'infographic-align-grid';

package/src/editor/plugins/edit-bar/edit-items/font-align.ts

@@ -5,7 +5,7 @@ import type {
 } from '../../../../types';
 import { injectStyleOnce } from '../../../../utils';
 import { UpdateElementCommand } from '../../../commands';
-import { Button, IconButton, Popover, TEXT_ICONS } from '../components';
+import { Button, IconButton, Popover, TEXT_ICONS } from '../../components';
 import type { EditItem } from './types';
 
 // 常量定义

package/src/editor/plugins/edit-bar/edit-items/font-color.ts

@@ -1,7 +1,7 @@
 import type { TextAttributes } from '../../../../types';
 import { hasColor, injectStyleOnce } from '../../../../utils';
 import { UpdateElementCommand } from '../../../commands';
-import { ColorPicker, Popover } from '../components';
+import { ColorPicker, Popover } from '../../components';
 import type { EditItem } from './types';
 
 const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';

package/src/editor/plugins/edit-bar/edit-items/font-family.ts

@@ -6,7 +6,7 @@ import {
   injectStyleOnce,
 } from '../../../../utils';
 import { UpdateElementCommand } from '../../../commands';
-import { IconButton, Popover, TEXT_ICONS } from '../components';
+import { IconButton, Popover, TEXT_ICONS } from '../../components';
 import type { EditItem } from './types';
 
 const FONT_LIST_CLASS = 'infographic-font-family-list';

package/src/editor/plugins/edit-bar/edit-items/font-size.ts

@@ -1,9 +1,9 @@
 import type { TextAttributes } from '../../../../types';
 import { injectStyleOnce } from '../../../../utils';
 import { UpdateElementCommand } from '../../../commands';
-import { IconButton, Popover, TEXT_ICONS } from '../components';
-import type { Button } from '../components/button';
-import type { Icon } from '../components/icons';
+import { IconButton, Popover, TEXT_ICONS } from '../../components';
+import type { Button } from '../../components/button';
+import type { Icon } from '../../components/icons';
 import type { EditItem } from './types';
 
 const FONT_SIZE_CLASS = 'infographic-font-size-grid';

package/src/editor/plugins/edit-bar/edit-items/icon-color.ts

@@ -1,7 +1,7 @@
 import type { IconAttributes } from '../../../../types';
 import { hasColor, injectStyleOnce } from '../../../../utils';
 import { UpdateElementCommand } from '../../../commands';
-import { ColorPicker, Popover } from '../components';
+import { ColorPicker, Popover } from '../../components';
 import type { EditItem } from './types';
 
 const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';

package/src/editor/plugins/edit-bar/index.ts

@@ -1,4 +1,4 @@
-export { ColorPicker, Popover, Select } from './components';
+export { ColorPicker, Popover, Select } from '../components';
 export { EditBar } from './edit-bar';
 
 export type {
@@ -14,5 +14,5 @@ export type {
   SelectOption,
   SelectProps,
   SelectValue,
-} from './components';
+} from '../components';
 export type { EditBarOptions } from './edit-bar';

package/src/editor/plugins/index.ts

@@ -1,3 +1,5 @@
 export { Plugin } from './base';
+export { CoreSyncPlugin } from './core-sync';
 export * from './edit-bar';
+export { ResetViewBox } from './reset-viewbox';
 export { ResizeElement } from './resize-element';

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,21 @@
+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: 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,31 @@
+/**
+ * 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: 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,106 @@
+import { cloneDeep, get, 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 ?? {};
+  // Set to store unique parent paths that need notification
+  const parentPathsToNotify = new Set<string>();
+
+  applyOptionUpdatesInternal(
+    target,
+    source,
+    basePath,
+    collector,
+    bubbleUp,
+    parentPathsToNotify,
+  );
+
+  // Bubbling notification: from the deepest parent path to the shallowest
+  if (bubbleUp && collector && parentPathsToNotify.size > 0) {
+    // Sort by path depth in descending order (deepest first)
+    const sortedPaths = Array.from(parentPathsToNotify).sort((a, b) => {
+      const depthA = a === '' ? 0 : a.split('.').length;
+      const depthB = b === '' ? 0 : b.split('.').length;
+      return depthB - depthA;
+    });
+    for (const parentPath of sortedPaths) {
+      const newVal = parentPath ? get(target, parentPath) : target;
+      // For parent paths, we provide the cloned new value.
+      // oldVal is passed as undefined as tracking branch node state is complex.
+      collector(parentPath, cloneDeep(newVal), undefined);
+    }
+  }
+}
+
+function applyOptionUpdatesInternal(
+  target: any,
+  source: any,
+  basePath: string,
+  collector: ((path: string, newVal: any, oldVal: any) => void) | undefined,
+  bubbleUp: boolean,
+  parentPathsToNotify: Set<string>,
+): void {
+  Object.keys(source).forEach((key) => {
+    const fullPath = basePath ? `${basePath}.${key}` : key;
+    const updateValue = source[key];
+    const oldValue = target[key];
+
+    if (updateValue === undefined) {
+      delete target[key];
+      collector?.(fullPath, undefined, oldValue);
+      if (bubbleUp) collectParentPaths(basePath, parentPathsToNotify);
+    } else if (isPlainObject(updateValue)) {
+      if (!isPlainObject(target[key])) {
+        target[key] = {};
+      }
+      applyOptionUpdatesInternal(
+        target[key],
+        updateValue,
+        fullPath,
+        collector,
+        bubbleUp,
+        parentPathsToNotify,
+      );
+    } else {
+      target[key] = updateValue;
+      if (!isEqual(updateValue, oldValue)) {
+        collector?.(fullPath, updateValue, oldValue);
+        if (bubbleUp) collectParentPaths(basePath, parentPathsToNotify);
+      }
+    }
+  });
+}
+
+/**
+ * Collects all parent paths of a given path and adds them to the provided set.
+ */
+function collectParentPaths(path: string, set: Set<string>): void {
+  if (!path) {
+    set.add(''); // Root path
+    return;
+  }
+
+  const parts = path.split('.');
+  for (let i = parts.length; i >= 0; i--) {
+    set.add(parts.slice(0, i).join('.'));
+  }
+}