@antv/infographic 0.2.13 → 0.2.15

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

@@ -9,12 +9,50 @@ import type { IInteraction, InteractionInitOptions } from '../types';
 import { clientToViewport } from '../utils';
 import { Interaction } from './base';
 
-const MIN_VIEWBOX_SIZE = 20;
-const MAX_VIEWBOX_SIZE = 2000;
+export interface ZoomWheelOptions {
+  minViewBoxSize?: number;
+  maxViewBoxSize?: number;
+}
+
 const ZOOM_FACTOR = 1.1;
 
 export class ZoomWheel extends Interaction implements IInteraction {
   name = 'zoom-wheel';
+  private minViewBoxSize = 20;
+  private maxViewBoxSize = 20000;
+
+  constructor(options?: ZoomWheelOptions) {
+    super();
+    if (options?.minViewBoxSize !== undefined) {
+      this.minViewBoxSize = options.minViewBoxSize;
+    }
+    if (options?.maxViewBoxSize !== undefined) {
+      this.maxViewBoxSize = options.maxViewBoxSize;
+    }
+  }
+
+  private initialViewBox: string | null = null;
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+    const isZoomModifierHeld = event.ctrlKey || event.metaKey || event.shiftKey;
+
+    if (!isZoomModifierHeld && this.initialViewBox) {
+      const currentViewBox = viewBoxToString(
+        getViewBox(this.editor.getDocument()),
+      );
+
+      if (currentViewBox !== this.initialViewBox) {
+        const command = new UpdateOptionsCommand(
+          { viewBox: currentViewBox },
+          { viewBox: this.initialViewBox },
+        );
+        void this.commander.execute(command);
+      }
+
+      this.initialViewBox = null;
+      document.removeEventListener('keyup', this.handleKeyUp);
+    }
+  };
 
   private wheelListener = (event: WheelEvent) => {
     if (!this.shouldZoom(event)) return;
@@ -32,19 +70,16 @@ export class ZoomWheel extends Interaction implements IInteraction {
     const newHeight = height * factor;
 
     if (
-      !inRange(newWidth, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE) ||
-      !inRange(newHeight, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE)
+      !inRange(newWidth, this.minViewBoxSize, this.maxViewBoxSize) ||
+      !inRange(newHeight, this.minViewBoxSize, this.maxViewBoxSize)
     )
       return;
 
-    // TODO: Remove after implementing the reset UI plugin
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
-      const command = new UpdateOptionsCommand({
-        viewBox: undefined,
-      });
-      void this.commander.execute(command);
-      return;
+    if (this.initialViewBox === null) {
+      this.initialViewBox = viewBoxToString(viewBox);
+      document.addEventListener('keyup', this.handleKeyUp);
     }
+
     const pivot =
       (event.ctrlKey || event.metaKey) && !event.shiftKey
         ? this.getMousePoint(svg, event)
@@ -52,10 +87,9 @@ export class ZoomWheel extends Interaction implements IInteraction {
 
     const newViewBox = calculateZoomedViewBox(viewBox, factor, pivot);
 
-    const command = new UpdateOptionsCommand({
+    this.state.updateOptions({
       viewBox: viewBoxToString(newViewBox),
     });
-    void this.commander.execute(command);
   };
 
   private getMousePoint = (svg: SVGSVGElement, event: WheelEvent) => {
@@ -79,6 +113,7 @@ export class ZoomWheel extends Interaction implements IInteraction {
 
     const isMouseZoom = event.ctrlKey || event.metaKey;
     const isCenterZoom = event.shiftKey;
+    if (isMouseZoom && isCenterZoom) return false;
 
     return isMouseZoom || isCenterZoom;
   };
@@ -90,5 +125,6 @@ export class ZoomWheel extends Interaction implements IInteraction {
 
   destroy() {
     document.removeEventListener('wheel', this.wheelListener);
+    document.removeEventListener('keyup', this.handleKeyUp);
   }
 }

package/src/editor/managers/index.ts

@@ -2,3 +2,4 @@ export * from './command';
 export * from './interaction';
 export * from './plugin';
 export * from './state';
+export * from './sync-registry';

package/src/editor/managers/state.ts

@@ -1,13 +1,10 @@
 import { ElementTypeEnum } from '../../constants';
-import type { ParsedInfographicOptions } from '../../options';
+import type {
+  ParsedInfographicOptions,
+  UpdatableInfographicOptions,
+} from '../../options';
 import type { Element, IEventEmitter, ItemDatum } from '../../types';
-import {
-  getDatumByIndexes,
-  getElementRole,
-  isIconElement,
-  parsePadding,
-  setSVGPadding,
-} from '../../utils';
+import { getDatumByIndexes, getElementRole, isIconElement } from '../../utils';
 import type {
   ElementProps,
   ICommandManager,
@@ -17,6 +14,7 @@ import type {
   StateManagerInitOptions,
 } from '../types';
 import {
+  applyOptionUpdates,
   buildItemPath,
   getChildrenDataByIndexes,
   getIndexesFromElement,
@@ -56,6 +54,7 @@ export class StateManager implements IStateManager {
 
   updateItemDatum(indexes: number[], datum: Partial<ItemDatum>): void {
     const item = getDatumByIndexes(this.options.data, indexes);
+    if (item == null || indexes.length === 0) return;
     Object.assign(item, datum);
     this.emitter.emit('options:data:item:update', { indexes, datum });
     this.emitter.emit('options:change', {
@@ -111,19 +110,19 @@ export class StateManager implements IStateManager {
     this.updateBuiltInElement(element, props);
   }
 
-  updateOptions(options: ParsedInfographicOptions) {
-    this.options = { ...this.options, ...options };
-    if (this.options.viewBox) {
-      this.editor.getDocument().setAttribute('viewBox', this.options.viewBox);
-    } else {
-      this.editor.getDocument().removeAttribute('viewBox');
-      if (this.options.padding !== undefined) {
-        setSVGPadding(
-          this.editor.getDocument(),
-          parsePadding(this.options.padding),
-        );
-      }
-    }
+  updateOptions(
+    options: UpdatableInfographicOptions,
+    execOptions?: { bubbleUp?: boolean },
+  ) {
+    const { bubbleUp = false } = execOptions || {};
+
+    applyOptionUpdates(this.options, options, '', {
+      bubbleUp,
+      collector: (path, newVal, oldVal) => {
+        this.editor.syncRegistry.trigger(path, newVal, oldVal);
+      },
+    });
+
     this.emitter.emit('options:change', {
       type: 'options:change',
       changes: [
@@ -156,6 +155,7 @@ export class StateManager implements IStateManager {
     const indexes = isItemElement ? getIndexesFromElement(element) : undefined;
     if (isItemElement) {
       const datum = getDatumByIndexes(data, indexes!);
+      if (datum == null) return;
       const key = role.replace('item-', '');
       datum.attributes ||= {};
       datum.attributes[key] ||= {};

package/src/editor/managers/sync-registry.ts

@@ -0,0 +1,66 @@
+import { get } from 'lodash-es';
+import type { InfographicOptionPath } from '../../options';
+import { ISyncRegistry, SyncHandler } from '../types';
+
+type OptionsGetter = () => any;
+
+export class SyncRegistry implements ISyncRegistry {
+  private handlers = new Map<string, Set<SyncHandler>>();
+  // lock to prevent recursive updates
+  private isDispatching = false;
+  private isDestroyed = false;
+
+  constructor(private getOptions: OptionsGetter) {}
+
+  register(
+    path: InfographicOptionPath | (string & {}),
+    handler: SyncHandler,
+    options?: { immediate?: boolean },
+  ): () => void {
+    if (!this.handlers.has(path)) {
+      this.handlers.set(path, new Set());
+    }
+    this.handlers.get(path)!.add(handler);
+
+    if (options?.immediate) {
+      const currentVal = get(this.getOptions(), path);
+      handler(currentVal, undefined);
+    }
+
+    return () => {
+      const set = this.handlers.get(path);
+      if (set) {
+        set.delete(handler);
+        if (set.size === 0) {
+          this.handlers.delete(path);
+        }
+      }
+    };
+  }
+  trigger(path: string, newVal: any, oldVal: any): void {
+    if (this.isDestroyed || this.isDispatching) {
+      if (this.isDispatching) {
+        console.warn(
+          `[SyncRegistry] Recursive update detected on ${path}. Skipped to prevent loop.`,
+        );
+      }
+      return;
+    }
+
+    const handlers = this.handlers.get(path);
+
+    if (handlers) {
+      this.isDispatching = true;
+      try {
+        handlers.forEach((fn) => fn(newVal, oldVal));
+      } finally {
+        this.isDispatching = false;
+      }
+    }
+  }
+
+  destroy() {
+    this.isDestroyed = true;
+    this.handlers.clear();
+  }
+}

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

@@ -1,4 +1,4 @@
-import { injectStyleOnce } from '../../../../utils';
+import { injectStyleOnce } from '../../../utils';
 import type { Icon } from './icons';
 
 export type Button = HTMLButtonElement & IconButtonHandle;

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

@@ -1,6 +1,6 @@
 import { parse } from 'culori';
 
-import { injectStyleOnce } from '../../../../utils';
+import { injectStyleOnce } from '../../../utils';
 
 export type ColorPickerProps = {
   value?: string;

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

@@ -54,6 +54,10 @@ export const TEXT_ICONS = {
   ),
 };
 
+export const RESET_ICON = createIcon(
+  `<path d="M502.714987 58.258904l-126.531056-54.617723a52.797131 52.797131 0 0 0-41.873587 96.855428A447.865322 447.865322 0 0 0 392.02307 946.707184a61.535967 61.535967 0 0 0 13.83649 1.820591 52.797131 52.797131 0 0 0 13.65443-103.773672 342.453118 342.453118 0 0 1-31.678278-651.771485l-8.374718 19.480321a52.615072 52.615072 0 0 0 27.855039 69.182448 51.522718 51.522718 0 0 0 20.572675 4.369418A52.797131 52.797131 0 0 0 476.498481 254.882703L530.205907 127.441352a52.979191 52.979191 0 0 0-27.49092-69.182448zM962.960326 509.765407A448.775617 448.775617 0 0 0 643.992829 68.090094a52.797131 52.797131 0 1 0-30.403866 101.042786A342.635177 342.635177 0 0 1 674.578753 801.059925a52.615072 52.615072 0 0 0-92.30395-50.612422l-71.913335 117.246043a52.433013 52.433013 0 0 0 17.295612 72.82363l117.063985 72.823629a52.797131 52.797131 0 1 0 54.617722-89.755123l-16.021198-10.013249A448.593558 448.593558 0 0 0 962.960326 509.765407z" p-id="1630"/>`,
+);
+
 export const ELEMENT_ICONS = {
   align: createIcon(
     `<path d="M555.188 715.059c17.673 0 32 14.327 32 32V875c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V747.059c0-17.673 14.327-32 32-32z m-32.001 63.999H203V843h320.187v-63.942zM854 416.529c17.673 0 32 14.327 32 32v127.942c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V448.529c0-17.673 14.327-32 32-32z m-32 64H203v63.941h619v-63.941zM683.25 118c17.673 0 32 14.327 32 32v127.941c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V150c0-17.673 14.327-32 32-32z m-32 64H203v63.941h448.25V182z"></path>`,

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

@@ -1,5 +1,5 @@
-import { COMPONENT_ROLE } from '../../../../constants';
-import { injectStyleOnce, setElementRole } from '../../../../utils';
+import { COMPONENT_ROLE } from '../../../constants';
+import { injectStyleOnce, setElementRole } from '../../../utils';
 
 export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type PopoverPlacementPreference = PopoverPlacement | PopoverPlacement[];

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';