@antv/infographic 0.2.16 → 0.2.18

package/src/editor/plugins/components/popover.ts

@@ -1,3 +1,4 @@
+import { eventPathContains, getOverlayContainer } from '../../utils';
 import { COMPONENT_ROLE } from '../../../constants';
 import { injectStyleOnce, setElementRole } from '../../../utils';
 
@@ -7,7 +8,7 @@ export type PopoverPlacementPreference = PopoverPlacement | PopoverPlacement[];
 export interface PopoverProps {
   content: HTMLElement | string | (() => HTMLElement | string);
   target?: HTMLElement;
-  getContainer?: HTMLElement | (() => HTMLElement);
+  getContainer?: OverlayRoot | (() => OverlayRoot);
   placement?: PopoverPlacementPreference;
   padding?: number | string;
   open?: boolean;
@@ -18,6 +19,8 @@ export interface PopoverProps {
   offset?: number;
 }
 
+type OverlayRoot = HTMLElement | ShadowRoot;
+
 export interface PopoverHandle {
   setOpen: (open: boolean) => void;
   toggle: () => void;
@@ -32,8 +35,6 @@ const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;
 const POPOVER_STYLE_ID = 'infographic-edit-popover-style';
 
 export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
-  ensurePopoverStyle();
-
   const placement = props.placement ?? 'top';
   const closeOnOutsideClick = props.closeOnOutsideClick ?? true;
   const triggerActions = Array.isArray(props.trigger)
@@ -60,7 +61,7 @@ export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
       typeof props.getContainer === 'function'
         ? props.getContainer()
         : props.getContainer;
-    return next ?? document.body;
+    return next ?? getOverlayContainer(trigger);
   };
 
   const content = document.createElement('div');
@@ -78,8 +79,17 @@ export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
   );
 
   const contentContainer = getContentContainer();
+  ensurePopoverStyle(contentContainer);
   const isPortal = contentContainer !== container;
 
+  const getPortalOffsetParent = () => {
+    const offsetParent = content.offsetParent as HTMLElement | null;
+    if (offsetParent) return offsetParent;
+    if (contentContainer instanceof ShadowRoot) return contentContainer.host;
+    if (contentContainer instanceof HTMLElement) return contentContainer;
+    return document.documentElement as HTMLElement;
+  };
+
   const arrow = document.createElement('div');
   arrow.classList.add(POPOVER_ARROW_CLASS);
   content.appendChild(arrow);
@@ -170,8 +180,18 @@ export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
     if (!isPortal) return;
 
     ({ left, top } = position);
-    content.style.left = `${left}px`;
-    content.style.top = `${top}px`;
+    const offsetParent = getPortalOffsetParent();
+    if (
+      offsetParent === document.body ||
+      offsetParent === document.documentElement
+    ) {
+      content.style.left = `${left}px`;
+      content.style.top = `${top}px`;
+    } else {
+      const parentRect = offsetParent.getBoundingClientRect();
+      content.style.left = `${left - parentRect.left + offsetParent.scrollLeft}px`;
+      content.style.top = `${top - parentRect.top + offsetParent.scrollTop}px`;
+    }
     content.style.right = 'auto';
     content.style.bottom = 'auto';
     content.style.transform = 'translate(0, 0)';
@@ -217,11 +237,9 @@ export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
   const toggle = () => setOpen(!open);
 
   const handleOutsideClick = (event: MouseEvent) => {
-    const targetNode = event.target as Node;
-    if (
-      !container.contains(targetNode) &&
-      (isPortal ? !content.contains(targetNode) : true)
-    ) {
+    const insideTrigger = eventPathContains(event, container);
+    const insideContent = eventPathContains(event, content);
+    if (!insideTrigger && !insideContent) {
       setOpen(false);
     }
   };
@@ -296,7 +314,7 @@ export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
   return Object.assign(container, api);
 }
 
-function ensurePopoverStyle() {
+function ensurePopoverStyle(target?: Node) {
   injectStyleOnce(
     POPOVER_STYLE_ID,
     `
@@ -442,5 +460,6 @@ function ensurePopoverStyle() {
   transform: translate(0, -50%);
 }
 `,
+    target,
   );
 }

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

@@ -10,6 +10,7 @@ import {
   isIconElement,
   setElementRole,
 } from '../../../utils';
+import { getOverlayContainer } from '../../utils';
 import type {
   IPlugin,
   PluginInitOptions,
@@ -29,9 +30,11 @@ import {
 export interface EditBarOptions {
   style?: Partial<CSSStyleDeclaration>;
   className?: string;
-  getContainer?: HTMLElement | (() => HTMLElement);
+  getContainer?: OverlayRoot | (() => OverlayRoot);
 }
 
+type OverlayRoot = HTMLElement | ShadowRoot;
+
 type EditItem = HTMLElement;
 
 export class EditBar extends Plugin implements IPlugin {
@@ -169,12 +172,7 @@ export class EditBar extends Plugin implements IPlugin {
     setElementRole(container, COMPONENT_ROLE);
 
     this.container = container;
-
-    const { getContainer } = this.options || {};
-    const resolvedContainer =
-      typeof getContainer === 'function' ? getContainer() : getContainer;
-    const containerParent = resolvedContainer ?? document.body;
-
+    const containerParent = this.resolveOverlayRoot();
     containerParent?.appendChild(container);
 
     return container;
@@ -182,8 +180,9 @@ export class EditBar extends Plugin implements IPlugin {
 
   protected getTextEditItems(text: TextElement): EditItem[] {
     const { attributes = {} } = getTextElementProps(text);
+    const root = this.resolveOverlayRoot();
     return [FontColor, FontSize, FontAlign, FontFamily].map((item) =>
-      item([text], attributes, this.commander),
+      item([text], attributes, this.commander, { root }),
     );
   }
 
@@ -191,8 +190,9 @@ export class EditBar extends Plugin implements IPlugin {
     const attrs = getCommonAttrs(
       selection.map((text) => getTextElementProps(text).attributes || {}),
     );
+    const root = this.resolveOverlayRoot();
     const items = [FontColor, FontSize, FontAlign, FontFamily].map((item) =>
-      item(selection, attrs, this.commander),
+      item(selection, attrs, this.commander, { root }),
     );
     const commonItems = this.getElementCollectionEditItems(selection);
     return [...items, ...commonItems];
@@ -200,13 +200,19 @@ export class EditBar extends Plugin implements IPlugin {
 
   protected getIconEditItems(selection: Selection): EditItem[] {
     const attrs = getIconAttrs(selection[0] as IconElement);
-    return [IconColor].map((item) => item(selection, attrs, this.commander));
+    const root = this.resolveOverlayRoot();
+    return [IconColor].map((item) =>
+      item(selection, attrs, this.commander, { root }),
+    );
   }
   protected getIconCollectionEditItems(selection: Selection): EditItem[] {
     const attrs = getCommonAttrs(
       selection.map((icon) => getIconAttrs(icon as IconElement)),
     );
-    return [IconColor].map((item) => item(selection, attrs, this.commander));
+    const root = this.resolveOverlayRoot();
+    return [IconColor].map((item) =>
+      item(selection, attrs, this.commander, { root }),
+    );
   }
 
   protected getGeometryEditItems(_selection: Selection): EditItem[] {
@@ -220,13 +226,22 @@ export class EditBar extends Plugin implements IPlugin {
 
   protected getElementCollectionEditItems(selection: Selection): EditItem[] {
     if (selection.length <= 1) return [];
+    const root = this.resolveOverlayRoot();
     return [
       ElementAlign(selection, {}, this.commander, {
         enableDistribution: selection.length > 2,
+        root,
       }),
     ];
   }
 
+  private resolveOverlayRoot(): OverlayRoot {
+    const { getContainer } = this.options || {};
+    const resolvedContainer =
+      typeof getContainer === 'function' ? getContainer() : getContainer;
+    return resolvedContainer ?? getOverlayContainer(this.editor.getDocument());
+  }
+
   private placeEditBar(container: HTMLDivElement, selection: Selection) {
     if (selection.length === 0) return;
 

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

@@ -40,6 +40,7 @@ type AlignAction =
 
 type AlignOptions = {
   enableDistribution?: boolean;
+  root?: HTMLElement | ShadowRoot;
 };
 
 type TransformParts = {
@@ -79,17 +80,19 @@ export const ElementAlign: EditItem = (
   commander: ICommandManager,
   options?: AlignOptions,
 ) => {
-  injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+  injectStyleOnce(GRID_STYLE_ID, GRID_STYLES, options?.root);
   const enableDistribution = options?.enableDistribution ?? true;
 
   const content = createAlignContent(
     (action) => alignSelection(selection, action, commander),
     enableDistribution,
+    options?.root,
   );
 
   return Popover({
-    target: IconButton({ icon: ELEMENT_ICONS.align }),
+    target: IconButton({ icon: ELEMENT_ICONS.align, root: options?.root }),
     content,
+    getContainer: options?.root,
     placement: 'top',
     offset: 12,
   });
@@ -98,6 +101,7 @@ export const ElementAlign: EditItem = (
 function createAlignContent(
   onSelect: (action: AlignAction) => void,
   enableDistribution: boolean,
+  root?: Node,
 ) {
   const content = document.createElement('div');
   content.classList.add(GRID_CLASS);
@@ -111,6 +115,7 @@ function createAlignContent(
 
   visibleOptions.forEach(({ icon, action }) => {
     const button = IconButton({
+      root,
       icon,
       onClick: () => onSelect(action),
     });

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

@@ -48,15 +48,17 @@ export const FontAlign: EditItem<TextAttributes> = (
   selection,
   attrs,
   commander,
+  options,
 ) => {
-  injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+  const root = options?.root;
+  injectStyleOnce(GRID_STYLE_ID, GRID_STYLES, root);
 
   const state: AlignState = {
     horizontal: attrs['data-horizontal-align'],
     vertical: attrs['data-vertical-align'],
   };
 
-  const button = IconButton({ icon: TEXT_ICONS.align });
+  const button = IconButton({ icon: TEXT_ICONS.align, root });
 
   const content = createAlignContent(state, (align) => {
     const attributes: Partial<TextAttributes> = {};
@@ -74,11 +76,12 @@ export const FontAlign: EditItem<TextAttributes> = (
           }),
       ),
     );
-  });
+  }, root);
 
   return Popover({
     target: button,
     content,
+    getContainer: root,
     placement: 'top',
     offset: 12,
   });
@@ -87,6 +90,7 @@ export const FontAlign: EditItem<TextAttributes> = (
 function createAlignContent(
   state: AlignState,
   onAlignChange: (align: AlignState) => void,
+  root?: Node,
 ) {
   const content = document.createElement('div');
   content.classList.add(GRID_CLASS);
@@ -106,6 +110,7 @@ function createAlignContent(
   ) => {
     options.forEach(({ icon, align }) => {
       const button = IconButton({
+        root,
         icon,
         onClick: () => {
           if (state[stateKey] === align) return;

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

@@ -12,8 +12,10 @@ export const FontColor: EditItem<TextAttributes> = (
   selection,
   attrs,
   commander,
+  options,
 ) => {
-  ensureFontColorStyles();
+  const root = options?.root;
+  ensureFontColorStyles(root);
 
   const color = normalizeColor(attrs.fill);
   const isMixed = attrs.fill === undefined && selection.length > 1;
@@ -24,6 +26,7 @@ export const FontColor: EditItem<TextAttributes> = (
   setButtonColor(button, color ?? DEFAULT_COLOR, isMixed);
 
   const picker = ColorPicker({
+    root,
     value: color ?? DEFAULT_COLOR,
     onChange: (nextColor) => {
       setButtonColor(button, nextColor, false);
@@ -41,6 +44,7 @@ export const FontColor: EditItem<TextAttributes> = (
   return Popover({
     target: button,
     content: picker,
+    getContainer: root,
     placement: ['top', 'bottom'],
     offset: 12,
     trigger: 'hover',
@@ -65,7 +69,7 @@ function setButtonColor(
   else button.removeAttribute('data-mixed');
 }
 
-function ensureFontColorStyles() {
+function ensureFontColorStyles(target?: Node) {
   injectStyleOnce(
     FONT_COLOR_STYLE_ID,
     `
@@ -97,5 +101,6 @@ function ensureFontColorStyles() {
   );
 }
 `,
+    target,
   );
 }

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

@@ -18,27 +18,29 @@ export const FontFamily: EditItem<TextAttributes> = (
   selection,
   attrs,
   commander,
+  editItemOptions,
 ) => {
-  ensureFontFamilyListStyle();
+  const root = editItemOptions?.root;
+  ensureFontFamilyListStyle(root);
 
   const fonts = getFonts();
   const current = normalizeFontFamily(attrs['font-family']);
 
-  const options = fonts.map((font) => ({
+  const fontOptions = fonts.map((font) => ({
     label: font.name || font.fontFamily,
     value: font.fontFamily,
   }));
   if (
-    !options.some((option) => normalizeFontFamily(option.value) === current)
+    !fontOptions.some((option) => normalizeFontFamily(option.value) === current)
   ) {
-    options.unshift({
+    fontOptions.unshift({
       label: DEFAULT_FONT_LABEL,
       value: current,
     });
   }
 
   let selected = current;
-  const content = createFontList(options, selected, (value) => {
+  const content = createFontList(fontOptions, selected, (value) => {
     if (selected === value) return;
     selected = value;
     commander.executeBatch(
@@ -51,11 +53,12 @@ export const FontFamily: EditItem<TextAttributes> = (
     );
   });
 
-  const button = IconButton({ icon: TEXT_ICONS.fontFamily });
+  const button = IconButton({ icon: TEXT_ICONS.fontFamily, root });
 
   const popover = Popover({
     target: button,
     content,
+    getContainer: root,
     placement: ['top', 'bottom'],
     offset: 12,
     trigger: 'hover',
@@ -110,7 +113,7 @@ function normalizeFontFamily(font: TextAttributes['font-family']) {
   return encodeFontFamily(String(font));
 }
 
-function ensureFontFamilyListStyle() {
+function ensureFontFamilyListStyle(target?: Node) {
   injectStyleOnce(
     FONT_LIST_STYLE_ID,
     `
@@ -143,5 +146,6 @@ function ensureFontFamilyListStyle() {
   color: #0958d9;
 }
 `,
+    target,
   );
 }

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

@@ -30,10 +30,12 @@ export const FontSize: EditItem<TextAttributes> = (
   selection,
   attrs,
   commander,
+  options,
 ) => {
-  injectStyleOnce(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES);
+  const root = options?.root;
+  injectStyleOnce(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES, root);
 
-  const button = IconButton({ icon: TEXT_ICONS.fontSize });
+  const button = IconButton({ icon: TEXT_ICONS.fontSize, root });
   const currentSize = normalizeFontSize(attrs['font-size']);
   const content = createFontSizeContent(currentSize, (size) => {
     commander.executeBatch(
@@ -44,11 +46,12 @@ export const FontSize: EditItem<TextAttributes> = (
           }),
       ),
     );
-  });
+  }, root);
 
   return Popover({
     target: button,
     content,
+    getContainer: root,
     placement: 'top',
     offset: 12,
   });
@@ -57,6 +60,7 @@ export const FontSize: EditItem<TextAttributes> = (
 function createFontSizeContent(
   defaultSize: number,
   onSizeChange: (size: number) => void,
+  root?: Node,
 ) {
   const content = document.createElement('div');
   content.classList.add(FONT_SIZE_CLASS);
@@ -73,6 +77,7 @@ function createFontSizeContent(
 
   FONT_SIZE_OPTIONS.forEach(({ label, value }) => {
     const button = IconButton({
+      root,
       icon: createLabelIcon(label),
       onClick: () => {
         if (selected === value) return;

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

@@ -12,8 +12,10 @@ export const IconColor: EditItem<IconAttributes> = (
   selection,
   attrs,
   commander,
+  options,
 ) => {
-  ensureIconColorStyles();
+  const root = options?.root;
+  ensureIconColorStyles(root);
 
   const color = normalizeColor(attrs.fill);
   const isMixed = attrs.fill === undefined && selection.length > 1;
@@ -24,6 +26,7 @@ export const IconColor: EditItem<IconAttributes> = (
   setButtonColor(button, color ?? DEFAULT_COLOR, isMixed);
 
   const picker = ColorPicker({
+    root,
     value: color ?? DEFAULT_COLOR,
     onChange: (nextColor) => {
       setButtonColor(button, nextColor, false);
@@ -41,6 +44,7 @@ export const IconColor: EditItem<IconAttributes> = (
   return Popover({
     target: button,
     content: picker,
+    getContainer: root,
     placement: ['top', 'bottom'],
     offset: 12,
     trigger: 'hover',
@@ -65,7 +69,7 @@ function setButtonColor(
   else button.removeAttribute('data-mixed');
 }
 
-function ensureIconColorStyles() {
+function ensureIconColorStyles(target?: Node) {
   injectStyleOnce(
     ICON_COLOR_STYLE_ID,
     `
@@ -97,5 +101,6 @@ function ensureIconColorStyles() {
   );
 }
 `,
+    target,
   );
 }

package/src/editor/plugins/edit-bar/edit-items/types.ts

@@ -1,9 +1,14 @@
 import type { BaseAttributes } from '../../../../types';
 import type { ICommandManager, Selection } from '../../../types';
 
+export type EditItemOptions = {
+  root?: HTMLElement | ShadowRoot;
+  [key: string]: any;
+};
+
 export type EditItem<T extends BaseAttributes = BaseAttributes> = (
   selection: Selection,
   attrs: T,
   commander: ICommandManager,
-  options?: Record<string, any>,
+  options?: EditItemOptions,
 ) => HTMLElement;

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

@@ -9,6 +9,7 @@ import {
 } from '../../utils';
 import { UpdateOptionsCommand } from '../commands';
 import type { IPlugin, PluginInitOptions } from '../types';
+import { getOverlayContainer } from '../utils';
 import { Plugin } from './base';
 import { IconButton } from './components';
 import { RESET_ICON } from './components/icons';
@@ -19,9 +20,11 @@ const BUTTON_SIZE = 40;
 export interface ResetViewBoxOptions {
   style?: Partial<CSSStyleDeclaration>;
   className?: string;
-  getContainer?: HTMLElement | (() => HTMLElement);
+  getContainer?: OverlayRoot | (() => OverlayRoot);
 }
 
+type OverlayRoot = HTMLElement | ShadowRoot;
+
 export class ResetViewBox extends Plugin implements IPlugin {
   name = 'reset-viewBox';
 
@@ -38,7 +41,7 @@ export class ResetViewBox extends Plugin implements IPlugin {
     super.init(options);
 
     // Initialize originViewBox
-    this.ensureButtonStyle();
+    this.ensureButtonStyle(this.resolveOverlayRoot());
     this.updateOriginViewBox();
 
     this.unregisterSync = this.editor.registerSync(
@@ -91,10 +94,13 @@ export class ResetViewBox extends Plugin implements IPlugin {
     if (this.resetButton) return this.resetButton;
 
     const { style, className } = this.options || {};
+    const containerParent = this.resolveOverlayRoot();
+    this.ensureButtonStyle(containerParent);
 
     const button = IconButton({
       icon: RESET_ICON,
       onClick: this.resetViewBox,
+      root: containerParent,
     });
 
     button.classList.add(RESET_BUTTON_CLASS);
@@ -111,11 +117,6 @@ export class ResetViewBox extends Plugin implements IPlugin {
 
     this.resetButton = button;
 
-    const { getContainer } = this.options || {};
-    const resolvedContainer =
-      typeof getContainer === 'function' ? getContainer() : getContainer;
-    const containerParent = resolvedContainer ?? document.body;
-
     containerParent?.appendChild(button);
 
     return button;
@@ -229,7 +230,14 @@ export class ResetViewBox extends Plugin implements IPlugin {
     this.resetButton = undefined;
   };
 
-  private ensureButtonStyle() {
+  private resolveOverlayRoot(): OverlayRoot {
+    const { getContainer } = this.options || {};
+    const resolvedContainer =
+      typeof getContainer === 'function' ? getContainer() : getContainer;
+    return resolvedContainer ?? getOverlayContainer(this.editor.getDocument());
+  }
+
+  private ensureButtonStyle(target?: Node) {
     injectStyleOnce(
       RESET_BUTTON_STYLE_ID,
       `
@@ -250,6 +258,7 @@ export class ResetViewBox extends Plugin implements IPlugin {
         cursor: pointer;
       }
       `,
+      target,
     );
   }
 }

package/src/editor/utils/index.ts

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

package/src/editor/utils/root.ts

@@ -0,0 +1,26 @@
+export type OverlayContainer = HTMLElement | ShadowRoot;
+
+function getConnectedRoot(node?: Node | null): Document | ShadowRoot {
+  if (!node?.isConnected) return document;
+
+  const root = node.getRootNode();
+  return root instanceof ShadowRoot ? root : document;
+}
+
+export function getOverlayContainer(node?: Node | null): OverlayContainer {
+  const root = getConnectedRoot(node);
+  return root instanceof ShadowRoot ? root : document.body;
+}
+
+export function eventPathContains(event: Event, node: Node) {
+  const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+  if (path.length > 0) {
+    return path.some(
+      (current) =>
+        current === node || (current instanceof Node && node.contains(current)),
+    );
+  }
+
+  const target = event.target;
+  return target instanceof Node && (target === node || node.contains(target));
+}