@antv/infographic 0.2.17 → 0.2.18

package/lib/utils/style.js

@@ -1,11 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectStyleOnce = injectStyleOnce;
-function injectStyleOnce(id, styles) {
-    if (document.getElementById(id))
+function resolveStyleRoot(target) {
+    if (!target)
+        return document;
+    if (target instanceof Document || target instanceof ShadowRoot)
+        return target;
+    if (!target.isConnected)
+        return document;
+    const root = target.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function hasStyle(root, id) {
+    if (root instanceof Document)
+        return Boolean(root.getElementById(id));
+    return Boolean(root.querySelector(`#${id}`));
+}
+function injectStyleOnce(id, styles, target) {
+    var _a;
+    const root = resolveStyleRoot(target);
+    if (hasStyle(root, id))
         return;
-    const style = document.createElement('style');
+    const doc = root instanceof Document ? root : ((_a = root.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const style = doc.createElement('style');
     style.id = id;
     style.textContent = styles;
-    document.head.appendChild(style);
+    if (root instanceof Document) {
+        root.head.appendChild(style);
+    }
+    else {
+        root.appendChild(style);
+    }
 }

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.17";
+export declare const VERSION = "0.2.18";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.17';
+exports.VERSION = '0.2.18';

package/package.json

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

package/src/constants/service.ts

@@ -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/src/designs/structures/chart-line.tsx

@@ -18,6 +18,9 @@ export interface ChartLineProps extends BaseStructureProps {
   valueFormatter?: (value: number, datum: ItemDatum) => string;
 }
 
+const ITEM_POSITION_H = 'center' as const;
+const ITEM_POSITION_V = 'normal' as const;
+
 export const ChartLine: ComponentType<ChartLineProps> = (props) => {
   const {
     Title,
@@ -55,8 +58,8 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
     indexes: [0],
     datum: items[0],
     data,
-    positionH: 'center',
-    positionV: 'normal',
+    positionH: ITEM_POSITION_H,
+    positionV: ITEM_POSITION_V,
   };
   const sampleBounds = getElementBounds(<Item {...itemProps} />);
   const labelWidth = sampleBounds.width;
@@ -396,7 +399,6 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
           </linearGradient>
           <linearGradient id={gradientAreaId} x1="0%" y1="0%" x2="100%" y2="0%">
             {areaStops}
-            <stop offset="100%" stopColor={colorPrimary} stopOpacity="0.04" />
           </linearGradient>
         </Defs>
         <Group>{gridElements}</Group>

package/src/editor/interactions/dblclick-edit-text.ts

@@ -92,7 +92,7 @@ function editText(text: TextElement, options?: EditTextOptions) {
   const entity = getTextEntity(text);
   if (!entity) return;
 
-  ensureEditorStyles();
+  ensureEditorStyles(entity);
   new InlineTextEditor(entity, options).start();
 }
 
@@ -240,7 +240,7 @@ class InlineTextEditor {
   }
 }
 
-function ensureEditorStyles() {
+function ensureEditorStyles(target?: Node) {
   injectStyleOnce(
     EDITOR_STYLE_ID,
     `
@@ -256,5 +256,6 @@ function ensureEditorStyles() {
   background-color: #b3d4fc;
 }
 `,
+    target,
   );
 }

package/src/editor/managers/interaction.ts

@@ -16,6 +16,7 @@ import type {
   SelectionChangePayload,
   SelectMode,
 } from '../types';
+import { eventPathContains } from '../utils';
 import { Extension } from '../utils';
 
 export class InteractionManager implements IInteractionManager {
@@ -129,18 +130,19 @@ export class InteractionManager implements IInteractionManager {
 
   private handleClick = (event: MouseEvent) => {
     const doc = this.editor.getDocument();
-    const target = event.target;
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    const insideInfographic =
+      eventPathContains(event, doc) ||
+      path.some(
+        (node) => node instanceof HTMLElement && isInfographicComponent(node),
+      );
 
-    if (!target) {
+    if (!event.target) {
       this.deactivate();
       return;
     }
     // 点击画布 SVG 或者标记为组件的元素
-    if (
-      doc.contains(target as Node) ||
-      isInfographicComponent(target as HTMLElement)
-    )
-      this.activate();
+    if (insideInfographic) this.activate();
     else this.deactivate();
   };
 

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

@@ -7,6 +7,7 @@ export interface IconButtonProps {
   icon: Icon;
   onClick?: () => void;
   activate?: boolean;
+  root?: Node;
 }
 
 export interface IconButtonHandle {
@@ -18,8 +19,9 @@ export const IconButton = ({
   icon,
   onClick,
   activate = false,
+  root,
 }: IconButtonProps): Button => {
-  ensureIconButtonStyle();
+  ensureIconButtonStyle(root);
 
   const button = document.createElement('button');
   button.type = 'button';
@@ -44,7 +46,7 @@ export const IconButton = ({
 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?: Node) {
   injectStyleOnce(
     ICON_BUTTON_STYLE_ID,
     `
@@ -73,5 +75,6 @@ function ensureIconButtonStyle() {
   background-color: #d9d9d9;
 }
 `,
+    target,
   );
 }

package/src/editor/plugins/components/color-picker.ts

@@ -6,6 +6,7 @@ export type ColorPickerProps = {
   value?: string;
   swatches?: string[];
   onChange?: (value: string) => void;
+  root?: Node;
 };
 
 export type ColorPickerHandle = {
@@ -66,7 +67,7 @@ export function ColorPicker(
     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);
@@ -279,7 +280,7 @@ function createSwitchLabel(text: string): HTMLSpanElement {
   return span;
 }
 
-function ensureColorPickerStyles() {
+function ensureColorPickerStyles(target?: Node) {
   injectStyleOnce(
     COLOR_PICKER_STYLE_ID,
     `
@@ -393,5 +394,6 @@ function ensureColorPickerStyles() {
   color: #ffffff;
 }
 `,
+    target,
   );
 }

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;