@antv/infographic 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

package/src/editor/commands/UpdateOptions.ts

@@ -1,18 +1,23 @@
-import type { ParsedInfographicOptions } from '../../options';
+import type { UpdatableInfographicOptions } from '../../options';
 import type { ICommand, IStateManager } from '../types';
 
 export class UpdateOptionsCommand implements ICommand {
   constructor(
-    private options: Partial<ParsedInfographicOptions>,
-    private original?: ParsedInfographicOptions,
+    private options: UpdatableInfographicOptions,
+    private original?: UpdatableInfographicOptions,
   ) {}
 
   async apply(state: IStateManager) {
-    const prev = state.getOptions();
     if (!this.original) {
-      this.original = prev;
+      const prev = state.getOptions();
+      this.original = {};
+      (
+        Object.keys(this.options) as Array<keyof UpdatableInfographicOptions>
+      ).forEach((key) => {
+        (this.original as any)[key] = prev[key];
+      });
     }
-    state.updateOptions({ ...prev, ...this.options });
+    state.updateOptions(this.options);
   }
 
   async undo(state: IStateManager) {

package/src/editor/editor.ts

@@ -6,11 +6,15 @@ import {
   PluginManager,
   StateManager,
 } from './managers';
+import { SyncRegistry } from './managers/sync-registry';
+import { CoreSyncPlugin } from './plugins';
 import type {
   ICommandManager,
   IEditor,
   IPluginManager,
   IStateManager,
+  ISyncRegistry,
+  SyncHandler,
 } from './types';
 
 export class Editor implements IEditor {
@@ -18,6 +22,7 @@ export class Editor implements IEditor {
   commander: ICommandManager;
   plugin: IPluginManager;
   interaction: InteractionManager;
+  syncRegistry: ISyncRegistry;
 
   constructor(
     private emitter: IEventEmitter,
@@ -34,6 +39,14 @@ export class Editor implements IEditor {
     const plugin = new PluginManager();
     const interaction = new InteractionManager();
 
+    const syncRegistry = new SyncRegistry(() => state.getOptions());
+
+    this.commander = commander;
+    this.state = state;
+    this.plugin = plugin;
+    this.interaction = interaction;
+    this.syncRegistry = syncRegistry;
+
     commander.init({ state, emitter });
     state.init({
       emitter,
@@ -41,6 +54,10 @@ export class Editor implements IEditor {
       commander,
       options,
     });
+    // Load core plugin: CoreSyncPlugin (handles viewBox/padding sync)
+    const corePlugin = new CoreSyncPlugin();
+    const userPlugins = options.plugins || [];
+
     plugin.init(
       {
         emitter,
@@ -48,7 +65,7 @@ export class Editor implements IEditor {
         commander,
         state,
       },
-      options.plugins,
+      [corePlugin, ...userPlugins],
     );
     interaction.init({
       emitter,
@@ -57,11 +74,14 @@ export class Editor implements IEditor {
       state,
       interactions: options.interactions,
     });
+  }
 
-    this.commander = commander;
-    this.state = state;
-    this.plugin = plugin;
-    this.interaction = interaction;
+  registerSync(
+    path: string,
+    handler: SyncHandler,
+    options?: { immediate?: boolean },
+  ) {
+    return this.syncRegistry.register(path, handler, options);
   }
 
   getDocument() {
@@ -74,5 +94,6 @@ export class Editor implements IEditor {
     this.plugin.destroy();
     this.commander.destroy();
     this.state.destroy();
+    this.syncRegistry.destroy();
   }
 }

package/src/editor/index.ts

@@ -1,3 +1,4 @@
+export * from './commands';
 export { Editor } from './editor';
 export * from './interactions';
 export * from './plugins';

package/src/editor/interactions/brush-select.ts

@@ -5,6 +5,7 @@ import {
   getElementViewportBounds,
   getEventTarget,
   getSelectableTarget,
+  isTextSelectionTarget,
 } from '../utils';
 import { Interaction } from './base';
 
@@ -38,7 +39,7 @@ export class BrushSelect extends Interaction implements IInteraction {
   private handleStart = (event: PointerEvent) => {
     if (!this.interaction.isActive()) return;
     if (event.button !== 0) return;
-    if (this.isTextSelectionTarget(event.target)) return;
+    if (isTextSelectionTarget(event.target)) return;
     if (this.hasElementAtStart(event.target)) return;
 
     this.interaction.executeExclusiveInteraction(
@@ -194,11 +195,4 @@ export class BrushSelect extends Interaction implements IInteraction {
     if (getEventTarget(target as unknown as SVGElement)) return true;
     return Boolean(target.closest?.('[data-element-type]'));
   }
-
-  private 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/interactions/drag-canvas.ts

@@ -0,0 +1,203 @@
+import { getViewBox, viewBoxToString } from '../../utils';
+import { UpdateOptionsCommand } from '../commands';
+import { IInteraction, InteractionInitOptions, KeyCode } from '../types';
+import { clientToViewport, isTextSelectionTarget } from '../utils';
+import { Interaction } from './base';
+
+type CursorType = 'grab' | 'grabbing' | 'default';
+export interface DragCanvasOptions {
+  trigger?: KeyCode[];
+}
+
+export class DragCanvas extends Interaction implements IInteraction {
+  name = 'drag-canvas';
+
+  /**
+   * 触发交互的按键代码。
+   * 参考标准的 KeyboardEvent.code 值：
+   * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+   * @default ['Space']
+   */
+  public trigger: KeyCode[] = ['Space'];
+
+  constructor(options?: DragCanvasOptions) {
+    super();
+    if (options?.trigger) {
+      this.trigger = options.trigger;
+    }
+  }
+
+  private isTriggerPressed = false;
+
+  private pointerId?: number;
+  private startPoint?: DOMPoint;
+
+  private document!: SVGSVGElement;
+
+  private startViewBoxString?: string;
+
+  private completeInteraction?: () => void;
+
+  // 防止组件快捷键侵入性过强
+  private isHovering = false;
+
+  init(options: InteractionInitOptions): void {
+    super.init(options);
+    this.document = this.editor.getDocument();
+
+    this.document.addEventListener('mouseenter', this.onMouseEnter);
+    this.document.addEventListener('mouseleave', this.onMouseLeave);
+    window.addEventListener('keydown', this.handleKeyDown);
+    window.addEventListener('blur', this.handleBlur);
+  }
+
+  destroy(): void {
+    window.removeEventListener('keydown', this.handleKeyDown);
+    window.removeEventListener('keyup', this.handleKeyUp);
+
+    this.document.removeEventListener('pointerdown', this.handlePointerDown);
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    window.removeEventListener('pointercancel', this.handlePointerUp);
+
+    window.removeEventListener('blur', this.handleBlur);
+    this.document.removeEventListener('mouseenter', this.onMouseEnter);
+    this.document.removeEventListener('mouseleave', this.onMouseLeave);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (!this.interaction.isActive()) return;
+    if (isTextSelectionTarget(event.target)) return;
+
+    // 增加焦点的判断，防止对空格的preventDefault侵入性过强
+    const target = event.target as Element;
+    const isBody =
+      target === document.body || target === document.documentElement;
+    const isEditor = target === this.document || this.document.contains(target);
+    if (!isBody && !isEditor) return;
+
+    if (!this.trigger.includes(event.code)) return;
+    if (!this.isHovering && !this.isTriggerPressed) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.interaction.executeExclusiveInteraction(
+      this,
+      async () =>
+        new Promise<void>((resolve) => {
+          this.completeInteraction = resolve;
+
+          this.isTriggerPressed = true;
+          const viewBox = getViewBox(this.document);
+
+          this.startViewBoxString = viewBoxToString(viewBox);
+          this.setCursor('grab');
+
+          this.document.addEventListener('pointerdown', this.handlePointerDown);
+          window.addEventListener('keyup', this.handleKeyUp);
+        }),
+    );
+  };
+
+  private handlePointerDown = (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const svg = this.document;
+    this.startPoint = clientToViewport(svg, event.clientX, event.clientY);
+    this.pointerId = event.pointerId;
+
+    this.setCursor('grabbing');
+
+    window.addEventListener('pointermove', this.handlePointerMove);
+    window.addEventListener('pointerup', this.handlePointerUp);
+    window.addEventListener('pointercancel', this.handlePointerUp);
+  };
+
+  private handlePointerMove = (event: PointerEvent) => {
+    if (event.pointerId !== this.pointerId || !this.startPoint) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const svg = this.document;
+    const current = clientToViewport(svg, event.clientX, event.clientY);
+    const dx = current.x - this.startPoint.x;
+    const dy = current.y - this.startPoint.y;
+
+    const viewBox = getViewBox(svg);
+
+    const { x, y, width, height } = viewBox;
+
+    const newX = x - dx;
+    const newY = y - dy;
+
+    this.state.updateOptions({
+      viewBox: viewBoxToString({ x: newX, y: newY, width, height }),
+    });
+  };
+
+  private handlePointerUp = (event: PointerEvent) => {
+    if (event.pointerId !== this.pointerId) return;
+
+    this.startPoint = undefined;
+    this.pointerId = undefined;
+    this.setCursor('grab');
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    window.removeEventListener('pointercancel', this.handlePointerUp);
+  };
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+    if (!this.trigger.includes(event.code)) return;
+    this.stopDrag();
+  };
+
+  private stopDrag = () => {
+    if (this.startViewBoxString) {
+      const svg = this.document;
+      const viewBox = getViewBox(svg);
+      const currentViewBoxString = viewBoxToString(viewBox);
+
+      if (this.startViewBoxString !== currentViewBoxString) {
+        const command = new UpdateOptionsCommand(
+          { viewBox: currentViewBoxString },
+          { viewBox: this.startViewBoxString },
+        );
+        void this.commander.execute(command);
+      }
+    }
+    this.startViewBoxString = undefined;
+
+    this.isTriggerPressed = false;
+
+    this.setCursor('default');
+
+    this.startPoint = undefined;
+    this.pointerId = undefined;
+
+    window.removeEventListener('keyup', this.handleKeyUp);
+
+    this.document.removeEventListener('pointerdown', this.handlePointerDown);
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    window.removeEventListener('pointercancel', this.handlePointerUp);
+
+    this.completeInteraction?.();
+    this.completeInteraction = undefined;
+  };
+
+  private setCursor = (behavior: CursorType) => {
+    document.body.style.cursor = behavior;
+  };
+
+  private handleBlur = () => {
+    this.stopDrag();
+  };
+
+  private onMouseEnter = () => {
+    this.isHovering = true;
+  };
+  private onMouseLeave = () => {
+    this.isHovering = false;
+  };
+}

package/src/editor/interactions/drag-element.ts

@@ -157,10 +157,6 @@ export class DragElement extends Interaction implements IInteraction {
     if (this.exclusiveStarted) return true;
     if (!this.startTarget) return false;
 
-    if (this.willReplaceSelection) {
-      this.interaction.select([this.startTarget], 'replace');
-    }
-
     this.dragItems = this.selectionForDrag
       .filter((element) => isEditableText(element))
       .map((element) => this.createDragItem(element))
@@ -173,6 +169,11 @@ export class DragElement extends Interaction implements IInteraction {
       this,
       async () =>
         new Promise<void>((resolve) => {
+          // 只有拿到锁之后，才真正执行选中逻辑
+          if (this.willReplaceSelection && this.startTarget) {
+            this.interaction.select([this.startTarget], 'replace');
+          }
+
           this.completeInteraction = resolve;
           started = true;
         }),

package/src/editor/interactions/index.ts

@@ -2,6 +2,7 @@ export { Interaction } from './base';
 export { BrushSelect } from './brush-select';
 export { ClickSelect } from './click-select';
 export { DblClickEditText } from './dblclick-edit-text';
+export { DragCanvas } from './drag-canvas';
 export { DragElement } from './drag-element';
 export { HotkeyHistory } from './hotkey-history';
 export { SelectHighlight } from './select-highlight';

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,65 @@
+import { get } from 'lodash-es';
+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: 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[];