@antv/infographic 0.2.17 → 0.2.19

package/esm/constants/service.d.ts

@@ -1 +1 @@
-export declare const ICON_SERVICE_URL = "https://lab.weavefox.cn/api/v1/infographic/icon";
+export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/v1/infographic/icon";

package/esm/constants/service.js

@@ -1 +1 @@
-export const ICON_SERVICE_URL = 'https://lab.weavefox.cn/api/v1/infographic/icon';
+export const ICON_SERVICE_URL = 'https://www.weavefox.cn/api/v1/infographic/icon';

package/esm/designs/structures/chart-line.js

@@ -6,6 +6,8 @@ import { ItemsGroup } from '../components/index.js';
 import { FlexLayout } from '../layouts/index.js';
 import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils/index.js';
 import { registerStructure } from './registry.js';
+const ITEM_POSITION_H = 'center';
+const ITEM_POSITION_V = 'normal';
 export const ChartLine = (props) => {
     const { Title, Item, data, width, height = 260, gap = 10, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
     const { title, desc, items = [], xTitle, yTitle } = data;
@@ -18,8 +20,8 @@ export const ChartLine = (props) => {
         indexes: [0],
         datum: items[0],
         data,
-        positionH: 'center',
-        positionV: 'normal',
+        positionH: ITEM_POSITION_H,
+        positionV: ITEM_POSITION_V,
     };
     const sampleBounds = getElementBounds(_jsx(Item, Object.assign({}, itemProps)));
     const labelWidth = sampleBounds.width;
@@ -159,7 +161,7 @@ export const ChartLine = (props) => {
     if (yTitle) {
         titleElements.push(_jsx(Text, { x: paddingLeft + yTitleSpace / 2, y: chartOriginY + height / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
     }
-    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: totalWidth, height: totalHeight, children: [_jsxs(Defs, { children: [_jsx("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), _jsxs("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [areaStops, _jsx("stop", { offset: "100%", stopColor: colorPrimary, stopOpacity: "0.04" })] })] }), _jsx(Group, { children: gridElements }), _jsx(Group, { children: [...axisElements, ...tickElements] }), _jsx(Group, { children: lineElements }), _jsx(Group, { children: pointElements }), _jsx(Group, { children: valueElements }), _jsx(Group, { children: titleElements }), _jsx(ItemsGroup, { children: xLabels })] })] }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: totalWidth, height: totalHeight, children: [_jsxs(Defs, { children: [_jsx("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), _jsx("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: areaStops })] }), _jsx(Group, { children: gridElements }), _jsx(Group, { children: [...axisElements, ...tickElements] }), _jsx(Group, { children: lineElements }), _jsx(Group, { children: pointElements }), _jsx(Group, { children: valueElements }), _jsx(Group, { children: titleElements }), _jsx(ItemsGroup, { children: xLabels })] })] }));
 };
 registerStructure('chart-line', {
     component: ChartLine,

package/esm/editor/interactions/dblclick-edit-text.js

@@ -72,7 +72,7 @@ function editText(text, options) {
     const entity = getTextEntity(text);
     if (!entity)
         return;
-    ensureEditorStyles();
+    ensureEditorStyles(entity);
     new InlineTextEditor(entity, options).start();
 }
 class InlineTextEditor {
@@ -203,7 +203,7 @@ class InlineTextEditor {
         return this.entity.textContent || '';
     }
 }
-function ensureEditorStyles() {
+function ensureEditorStyles(target) {
     injectStyleOnce(EDITOR_STYLE_ID, `
 .${EDITOR_BASE_CLASS} {
   margin: 0;
@@ -216,5 +216,5 @@ function ensureEditorStyles() {
 .${EDITOR_BASE_CLASS}::selection {
   background-color: #b3d4fc;
 }
-`);
+`, target);
 }

package/esm/editor/managers/interaction.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { createElement, getElementByRole, isInfographicComponent, setElementRole, } from '../../utils/index.js';
+import { eventPathContains } from '../utils/index.js';
 import { Extension } from '../utils/index.js';
 export class InteractionManager {
     constructor() {
@@ -19,14 +20,15 @@ export class InteractionManager {
         this.selection = new Set();
         this.handleClick = (event) => {
             const doc = this.editor.getDocument();
-            const target = event.target;
-            if (!target) {
+            const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+            const insideInfographic = eventPathContains(event, doc) ||
+                path.some((node) => node instanceof HTMLElement && isInfographicComponent(node));
+            if (!event.target) {
                 this.deactivate();
                 return;
             }
             // 点击画布 SVG 或者标记为组件的元素
-            if (doc.contains(target) ||
-                isInfographicComponent(target))
+            if (insideInfographic)
                 this.activate();
             else
                 this.deactivate();

package/esm/editor/plugins/components/button.d.ts

@@ -4,9 +4,10 @@ export interface IconButtonProps {
     icon: Icon;
     onClick?: () => void;
     activate?: boolean;
+    root?: Node;
 }
 export interface IconButtonHandle {
     activate: boolean;
     setActivate: (activate: boolean) => void;
 }
-export declare const IconButton: ({ icon, onClick, activate, }: IconButtonProps) => Button;
+export declare const IconButton: ({ icon, onClick, activate, root, }: IconButtonProps) => Button;

package/esm/editor/plugins/components/button.js

@@ -1,6 +1,6 @@
 import { injectStyleOnce } from '../../../utils/index.js';
-export const IconButton = ({ icon, onClick, activate = false, }) => {
-    ensureIconButtonStyle();
+export const IconButton = ({ icon, onClick, activate = false, root, }) => {
+    ensureIconButtonStyle(root);
     const button = document.createElement('button');
     button.type = 'button';
     button.classList.add(ICON_BUTTON_CLASS);
@@ -23,7 +23,7 @@ export const IconButton = ({ icon, onClick, activate = false, }) => {
 };
 const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
 const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
-function ensureIconButtonStyle() {
+function ensureIconButtonStyle(target) {
     injectStyleOnce(ICON_BUTTON_STYLE_ID, `
 .${ICON_BUTTON_CLASS} {
   padding: 0;
@@ -49,5 +49,5 @@ function ensureIconButtonStyle() {
 .${ICON_BUTTON_CLASS}[data-activate="true"] {
   background-color: #d9d9d9;
 }
-`);
+`, target);
 }

package/esm/editor/plugins/components/color-picker.d.ts

@@ -2,6 +2,7 @@ export type ColorPickerProps = {
     value?: string;
     swatches?: string[];
     onChange?: (value: string) => void;
+    root?: Node;
 };
 export type ColorPickerHandle = {
     setValue: (value?: string) => void;

package/esm/editor/plugins/components/color-picker.js

@@ -46,7 +46,7 @@ export function ColorPicker(props) {
     if (typeof document === 'undefined') {
         throw new Error('ColorPicker can only be used in the browser.');
     }
-    ensureColorPickerStyles();
+    ensureColorPickerStyles(props.root);
     const container = document.createElement('div');
     container.classList.add(COLOR_PICKER_CLASS);
     const swatchContainer = document.createElement('div');
@@ -239,7 +239,7 @@ function createSwitchLabel(text) {
     span.classList.add(COLOR_PICKER_SWITCH_LABEL_CLASS);
     return span;
 }
-function ensureColorPickerStyles() {
+function ensureColorPickerStyles(target) {
     injectStyleOnce(COLOR_PICKER_STYLE_ID, `
 .${COLOR_PICKER_CLASS} {
   width: 240px;
@@ -350,5 +350,5 @@ function ensureColorPickerStyles() {
 .${COLOR_PICKER_SWITCH_CLASS}[data-format="rgba"] .${COLOR_PICKER_SWITCH_LABEL_CLASS}:last-child {
   color: #ffffff;
 }
-`);
+`, target);
 }

package/esm/editor/plugins/components/popover.d.ts

@@ -3,7 +3,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;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     mouseLeaveDelay?: number;
     offset?: number;
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 export interface PopoverHandle {
     setOpen: (open: boolean) => void;
     toggle: () => void;
@@ -21,3 +22,4 @@ export interface PopoverHandle {
     destroy: () => void;
 }
 export declare function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle;
+export {};

package/esm/editor/plugins/components/popover.js

@@ -1,3 +1,4 @@
+import { eventPathContains, getOverlayContainer } from '../../utils/index.js';
 import { COMPONENT_ROLE } from '../../../constants/index.js';
 import { injectStyleOnce, setElementRole } from '../../../utils/index.js';
 const POPOVER_CLASS = 'infographic-edit-popover';
@@ -6,7 +7,6 @@ const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;
 const POPOVER_STYLE_ID = 'infographic-edit-popover-style';
 export function Popover(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    ensurePopoverStyle();
     const placement = (_a = props.placement) !== null && _a !== void 0 ? _a : 'top';
     const closeOnOutsideClick = (_b = props.closeOnOutsideClick) !== null && _b !== void 0 ? _b : true;
     const triggerActions = Array.isArray(props.trigger)
@@ -28,7 +28,7 @@ export function Popover(props) {
         const next = typeof props.getContainer === 'function'
             ? props.getContainer()
             : props.getContainer;
-        return next !== null && next !== void 0 ? next : document.body;
+        return next !== null && next !== void 0 ? next : getOverlayContainer(trigger);
     };
     const content = document.createElement('div');
     content.classList.add(POPOVER_CONTENT_CLASS);
@@ -41,7 +41,18 @@ export function Popover(props) {
     content.style.setProperty('--popover-arrow-size', `${arrowSize}px`);
     content.style.setProperty('--popover-arrow-inner-size', `${arrowInnerSize}px`);
     const contentContainer = getContentContainer();
+    ensurePopoverStyle(contentContainer);
     const isPortal = contentContainer !== container;
+    const getPortalOffsetParent = () => {
+        const offsetParent = content.offsetParent;
+        if (offsetParent)
+            return offsetParent;
+        if (contentContainer instanceof ShadowRoot)
+            return contentContainer.host;
+        if (contentContainer instanceof HTMLElement)
+            return contentContainer;
+        return document.documentElement;
+    };
     const arrow = document.createElement('div');
     arrow.classList.add(POPOVER_ARROW_CLASS);
     content.appendChild(arrow);
@@ -119,8 +130,17 @@ export function Popover(props) {
         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)';
@@ -164,9 +184,9 @@ export function Popover(props) {
     };
     const toggle = () => setOpen(!open);
     const handleOutsideClick = (event) => {
-        const targetNode = event.target;
-        if (!container.contains(targetNode) &&
-            (isPortal ? !content.contains(targetNode) : true)) {
+        const insideTrigger = eventPathContains(event, container);
+        const insideContent = eventPathContains(event, content);
+        if (!insideTrigger && !insideContent) {
             setOpen(false);
         }
     };
@@ -234,7 +254,7 @@ export function Popover(props) {
     };
     return Object.assign(container, api);
 }
-function ensurePopoverStyle() {
+function ensurePopoverStyle(target) {
     injectStyleOnce(POPOVER_STYLE_ID, `
 .${POPOVER_CLASS} {
   position: relative;
@@ -377,5 +397,5 @@ function ensurePopoverStyle() {
 .${POPOVER_CONTENT_CLASS}[data-placement="right"][data-open="true"] {
   transform: translate(0, -50%);
 }
-`);
+`, target);
 }

package/esm/editor/plugins/edit-bar/edit-bar.d.ts

@@ -4,8 +4,9 @@ import { Plugin } from '../base';
 export interface EditBarOptions {
     style?: Partial<CSSStyleDeclaration>;
     className?: string;
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: OverlayRoot | (() => OverlayRoot);
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 type EditItem = HTMLElement;
 export declare class EditBar extends Plugin implements IPlugin {
     private options?;
@@ -27,6 +28,7 @@ export declare class EditBar extends Plugin implements IPlugin {
     protected getGeometryEditItems(_selection: Selection): EditItem[];
     protected getGeometryCollectionEditItems(selection: Selection): EditItem[];
     protected getElementCollectionEditItems(selection: Selection): EditItem[];
+    private resolveOverlayRoot;
     private placeEditBar;
 }
 export {};

package/esm/editor/plugins/edit-bar/edit-bar.js

@@ -1,6 +1,7 @@
 import { COMPONENT_ROLE } from '../../../constants/index.js';
 import { getCombinedBounds } from '../../../jsx/index.js';
 import { getCommonAttrs, getIconAttrs, getTextElementProps, isEditableText, isGeometryElement, isIconElement, setElementRole, } from '../../../utils/index.js';
+import { getOverlayContainer } from '../../utils/index.js';
 import { Plugin } from '../base.js';
 import { ElementAlign, FontAlign, FontColor, FontFamily, FontSize, IconColor, } from './edit-items/index.js';
 export class EditBar extends Plugin {
@@ -109,29 +110,31 @@ export class EditBar extends Plugin {
         }
         setElementRole(container, COMPONENT_ROLE);
         this.container = container;
-        const { getContainer } = this.options || {};
-        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
-        const containerParent = resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : document.body;
+        const containerParent = this.resolveOverlayRoot();
         containerParent === null || containerParent === void 0 ? void 0 : containerParent.appendChild(container);
         return container;
     }
     getTextEditItems(text) {
         const { attributes = {} } = getTextElementProps(text);
-        return [FontColor, FontSize, FontAlign, FontFamily].map((item) => item([text], attributes, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [FontColor, FontSize, FontAlign, FontFamily].map((item) => item([text], attributes, this.commander, { root }));
     }
     getTextCollectionEditItems(selection) {
         const attrs = getCommonAttrs(selection.map((text) => getTextElementProps(text).attributes || {}));
-        const items = [FontColor, FontSize, FontAlign, FontFamily].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        const items = [FontColor, FontSize, FontAlign, FontFamily].map((item) => item(selection, attrs, this.commander, { root }));
         const commonItems = this.getElementCollectionEditItems(selection);
         return [...items, ...commonItems];
     }
     getIconEditItems(selection) {
         const attrs = getIconAttrs(selection[0]);
-        return [IconColor].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [IconColor].map((item) => item(selection, attrs, this.commander, { root }));
     }
     getIconCollectionEditItems(selection) {
         const attrs = getCommonAttrs(selection.map((icon) => getIconAttrs(icon)));
-        return [IconColor].map((item) => item(selection, attrs, this.commander));
+        const root = this.resolveOverlayRoot();
+        return [IconColor].map((item) => item(selection, attrs, this.commander, { root }));
     }
     getGeometryEditItems(_selection) {
         return [];
@@ -143,12 +146,19 @@ export class EditBar extends Plugin {
     getElementCollectionEditItems(selection) {
         if (selection.length <= 1)
             return [];
+        const root = this.resolveOverlayRoot();
         return [
             ElementAlign(selection, {}, this.commander, {
                 enableDistribution: selection.length > 2,
+                root,
             }),
         ];
     }
+    resolveOverlayRoot() {
+        const { getContainer } = this.options || {};
+        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
+        return resolvedContainer !== null && resolvedContainer !== void 0 ? resolvedContainer : getOverlayContainer(this.editor.getDocument());
+    }
     placeEditBar(container, selection) {
         var _a;
         if (selection.length === 0)

package/esm/editor/plugins/edit-bar/edit-items/align-elements.js

@@ -29,17 +29,18 @@ const ALIGN_OPTIONS = [
 ];
 export const ElementAlign = (selection, _attrs, commander, options) => {
     var _a;
-    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES, options === null || options === void 0 ? void 0 : options.root);
     const enableDistribution = (_a = options === null || options === void 0 ? void 0 : options.enableDistribution) !== null && _a !== void 0 ? _a : true;
-    const content = createAlignContent((action) => alignSelection(selection, action, commander), enableDistribution);
+    const content = createAlignContent((action) => alignSelection(selection, action, commander), enableDistribution, options === null || options === void 0 ? void 0 : options.root);
     return Popover({
-        target: IconButton({ icon: ELEMENT_ICONS.align }),
+        target: IconButton({ icon: ELEMENT_ICONS.align, root: options === null || options === void 0 ? void 0 : options.root }),
         content,
+        getContainer: options === null || options === void 0 ? void 0 : options.root,
         placement: 'top',
         offset: 12,
     });
 };
-function createAlignContent(onSelect, enableDistribution) {
+function createAlignContent(onSelect, enableDistribution, root) {
     const content = document.createElement('div');
     content.classList.add(GRID_CLASS);
     if (!enableDistribution)
@@ -49,6 +50,7 @@ function createAlignContent(onSelect, enableDistribution) {
         : ALIGN_OPTIONS.filter(({ action }) => action !== 'H_DISTRIBUTE' && action !== 'V_DISTRIBUTE');
     visibleOptions.forEach(({ icon, action }) => {
         const button = IconButton({
+            root,
             icon,
             onClick: () => onSelect(action),
         });

package/esm/editor/plugins/edit-bar/edit-items/font-align.js

@@ -22,13 +22,14 @@ const GRID_STYLES = `
   gap: 2px;
 }
 `;
-export const FontAlign = (selection, attrs, commander) => {
-    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+export const FontAlign = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES, root);
     const state = {
         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 = {};
         if (align.horizontal)
@@ -40,15 +41,16 @@ export const FontAlign = (selection, attrs, commander) => {
         commander.executeBatch(selection.map((text) => new UpdateElementCommand(text, {
             attributes,
         })));
-    });
+    }, root);
     return Popover({
         target: button,
         content,
+        getContainer: root,
         placement: 'top',
         offset: 12,
     });
 };
-function createAlignContent(state, onAlignChange) {
+function createAlignContent(state, onAlignChange, root) {
     const content = document.createElement('div');
     content.classList.add(GRID_CLASS);
     const buttons = {};
@@ -61,6 +63,7 @@ function createAlignContent(state, onAlignChange) {
     const createButtons = (options, stateKey) => {
         options.forEach(({ icon, align }) => {
             const button = IconButton({
+                root,
                 icon,
                 onClick: () => {
                     if (state[stateKey] === align)

package/esm/editor/plugins/edit-bar/edit-items/font-color.js

@@ -4,8 +4,9 @@ import { ColorPicker, Popover } from '../../components/index.js';
 const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';
 const FONT_COLOR_STYLE_ID = 'infographic-font-color-style';
 const DEFAULT_COLOR = '#1f1f1f';
-export const FontColor = (selection, attrs, commander) => {
-    ensureFontColorStyles();
+export const FontColor = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    ensureFontColorStyles(root);
     const color = normalizeColor(attrs.fill);
     const isMixed = attrs.fill === undefined && selection.length > 1;
     const button = document.createElement('button');
@@ -13,6 +14,7 @@ export const FontColor = (selection, attrs, commander) => {
     button.classList.add(FONT_COLOR_BUTTON_CLASS);
     setButtonColor(button, color !== null && color !== void 0 ? color : DEFAULT_COLOR, isMixed);
     const picker = ColorPicker({
+        root,
         value: color !== null && color !== void 0 ? color : DEFAULT_COLOR,
         onChange: (nextColor) => {
             setButtonColor(button, nextColor, false);
@@ -24,6 +26,7 @@ export const FontColor = (selection, attrs, commander) => {
     return Popover({
         target: button,
         content: picker,
+        getContainer: root,
         placement: ['top', 'bottom'],
         offset: 12,
         trigger: 'hover',
@@ -44,7 +47,7 @@ function setButtonColor(button, color, mixed) {
     else
         button.removeAttribute('data-mixed');
 }
-function ensureFontColorStyles() {
+function ensureFontColorStyles(target) {
     injectStyleOnce(FONT_COLOR_STYLE_ID, `
 .${FONT_COLOR_BUTTON_CLASS} {
   position: relative;
@@ -73,5 +76,5 @@ function ensureFontColorStyles() {
     #f5f5f5 12px
   );
 }
-`);
+`, target);
 }

package/esm/editor/plugins/edit-bar/edit-items/font-family.js

@@ -6,22 +6,23 @@ const FONT_LIST_CLASS = 'infographic-font-family-list';
 const FONT_OPTION_CLASS = `${FONT_LIST_CLASS}__option`;
 const FONT_LIST_STYLE_ID = 'infographic-font-family-list-style';
 const DEFAULT_FONT_LABEL = '默认';
-export const FontFamily = (selection, attrs, commander) => {
-    ensureFontFamilyListStyle();
+export const FontFamily = (selection, attrs, commander, editItemOptions) => {
+    const root = editItemOptions === null || editItemOptions === void 0 ? void 0 : 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)) {
-        options.unshift({
+    if (!fontOptions.some((option) => normalizeFontFamily(option.value) === current)) {
+        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;
@@ -29,10 +30,11 @@ export const FontFamily = (selection, attrs, commander) => {
             attributes: { 'font-family': decodeFontFamily(value) },
         })));
     });
-    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',
@@ -81,7 +83,7 @@ function normalizeFontFamily(font) {
         return encodeFontFamily(font.join(', '));
     return encodeFontFamily(String(font));
 }
-function ensureFontFamilyListStyle() {
+function ensureFontFamilyListStyle(target) {
     injectStyleOnce(FONT_LIST_STYLE_ID, `
 .${FONT_LIST_CLASS} {
   display: flex;
@@ -111,5 +113,5 @@ function ensureFontFamilyListStyle() {
   background: #e6f4ff;
   color: #0958d9;
 }
-`);
+`, target);
 }

package/esm/editor/plugins/edit-bar/edit-items/font-size.js

@@ -18,23 +18,25 @@ const FONT_SIZE_STYLES = `
   gap: 2px;
 }
 `;
-export const FontSize = (selection, attrs, commander) => {
-    injectStyleOnce(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES);
-    const button = IconButton({ icon: TEXT_ICONS.fontSize });
+export const FontSize = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    injectStyleOnce(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES, root);
+    const button = IconButton({ icon: TEXT_ICONS.fontSize, root });
     const currentSize = normalizeFontSize(attrs['font-size']);
     const content = createFontSizeContent(currentSize, (size) => {
         commander.executeBatch(selection.map((text) => new UpdateElementCommand(text, {
             attributes: { 'font-size': size },
         })));
-    });
+    }, root);
     return Popover({
         target: button,
         content,
+        getContainer: root,
         placement: 'top',
         offset: 12,
     });
 };
-function createFontSizeContent(defaultSize, onSizeChange) {
+function createFontSizeContent(defaultSize, onSizeChange, root) {
     const content = document.createElement('div');
     content.classList.add(FONT_SIZE_CLASS);
     let selected = defaultSize;
@@ -47,6 +49,7 @@ function createFontSizeContent(defaultSize, onSizeChange) {
     };
     FONT_SIZE_OPTIONS.forEach(({ label, value }) => {
         const button = IconButton({
+            root,
             icon: createLabelIcon(label),
             onClick: () => {
                 if (selected === value)

package/esm/editor/plugins/edit-bar/edit-items/icon-color.js

@@ -4,8 +4,9 @@ import { ColorPicker, Popover } from '../../components/index.js';
 const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';
 const ICON_COLOR_STYLE_ID = 'infographic-icon-color-style';
 const DEFAULT_COLOR = '#1f1f1f';
-export const IconColor = (selection, attrs, commander) => {
-    ensureIconColorStyles();
+export const IconColor = (selection, attrs, commander, options) => {
+    const root = options === null || options === void 0 ? void 0 : options.root;
+    ensureIconColorStyles(root);
     const color = normalizeColor(attrs.fill);
     const isMixed = attrs.fill === undefined && selection.length > 1;
     const button = document.createElement('button');
@@ -13,6 +14,7 @@ export const IconColor = (selection, attrs, commander) => {
     button.classList.add(ICON_COLOR_BUTTON_CLASS);
     setButtonColor(button, color !== null && color !== void 0 ? color : DEFAULT_COLOR, isMixed);
     const picker = ColorPicker({
+        root,
         value: color !== null && color !== void 0 ? color : DEFAULT_COLOR,
         onChange: (nextColor) => {
             setButtonColor(button, nextColor, false);
@@ -24,6 +26,7 @@ export const IconColor = (selection, attrs, commander) => {
     return Popover({
         target: button,
         content: picker,
+        getContainer: root,
         placement: ['top', 'bottom'],
         offset: 12,
         trigger: 'hover',
@@ -44,7 +47,7 @@ function setButtonColor(button, color, mixed) {
     else
         button.removeAttribute('data-mixed');
 }
-function ensureIconColorStyles() {
+function ensureIconColorStyles(target) {
     injectStyleOnce(ICON_COLOR_STYLE_ID, `
 .${ICON_COLOR_BUTTON_CLASS} {
   position: relative;
@@ -73,5 +76,5 @@ function ensureIconColorStyles() {
     #f5f5f5 12px
   );
 }
-`);
+`, target);
 }

package/esm/editor/plugins/edit-bar/edit-items/types.d.ts

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

package/esm/editor/plugins/reset-viewbox.d.ts

@@ -3,8 +3,9 @@ import { Plugin } from './base';
 export interface ResetViewBoxOptions {
     style?: Partial<CSSStyleDeclaration>;
     className?: string;
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: OverlayRoot | (() => OverlayRoot);
 }
+type OverlayRoot = HTMLElement | ShadowRoot;
 export declare class ResetViewBox extends Plugin implements IPlugin {
     private options?;
     name: string;
@@ -29,5 +30,7 @@ export declare class ResetViewBox extends Plugin implements IPlugin {
     private showButton;
     private hideButton;
     private removeButton;
+    private resolveOverlayRoot;
     private ensureButtonStyle;
 }
+export {};