@antv/infographic 0.2.17 → 0.2.18

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));
+}

package/src/exporter/svg.ts

@@ -26,7 +26,12 @@ function getExportViewBox(svg: SVGSVGElement) {
 
   const width = parseAbsoluteLength(svg.getAttribute('width'));
   const height = parseAbsoluteLength(svg.getAttribute('height'));
-  if (width > 0 && height > 0) {
+  if (
+    !Number.isNaN(width) &&
+    width > 0 &&
+    !Number.isNaN(height) &&
+    height > 0
+  ) {
     return { x: 0, y: 0, width, height };
   }
 
@@ -253,7 +258,9 @@ async function embedIcons(svg: SVGSVGElement) {
 
     if (!existsSymbol) {
       const symbolElement = document.querySelector(href);
-      if (symbolElement) defs.appendChild(symbolElement.cloneNode(true));
+      if (symbolElement) {
+        defs.appendChild(symbolElement.cloneNode(true));
+      }
     }
   });
 }
@@ -487,6 +494,7 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
 
   while (queue.length) {
     const id = queue.shift()!;
+    if (!id) continue;
     if (visited.has(id)) continue;
     visited.add(id);
 
@@ -503,11 +511,80 @@ function collectDefElements(svg: SVGSVGElement, ids: Set<string>) {
   return collected;
 }
 
+// Fallback implementation based on the CSS.escape algorithm
+function cssEscape(value: string): string {
+  const string = String(value);
+  const length = string.length;
+  let result = '';
+
+  if (length === 0) {
+    return '';
+  }
+
+  for (let i = 0; i < length; i++) {
+    const codeUnit = string.charCodeAt(i);
+
+    // Null character
+    if (codeUnit === 0x0000) {
+      result += '\uFFFD';
+      continue;
+    }
+
+    // Control characters or DEL
+    if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) || codeUnit === 0x007f) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if first character is a digit
+    if (i === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // Escape if second character is a digit and first is a hyphen
+    if (
+      i === 1 &&
+      codeUnit >= 0x0030 &&
+      codeUnit <= 0x0039 &&
+      string.charCodeAt(0) === 0x002d
+    ) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    // If the character is the first and is a hyphen followed by end of string, escape it
+    if (i === 0 && length === 1 && codeUnit === 0x002d) {
+      result += '\\' + string.charAt(i);
+      continue;
+    }
+
+    // Characters that are safe to use unescaped
+    if (
+      codeUnit >= 0x0080 ||
+      (codeUnit >= 0x0030 && codeUnit <= 0x0039) || // 0-9
+      (codeUnit >= 0x0041 && codeUnit <= 0x005a) || // A-Z
+      (codeUnit >= 0x0061 && codeUnit <= 0x007a) || // a-z
+      codeUnit === 0x002d || // -
+      codeUnit === 0x005f // _
+    ) {
+      result += string.charAt(i);
+      continue;
+    }
+
+    // All other characters
+    result += '\\' + string.charAt(i);
+  }
+
+  return result;
+}
+
 function escapeCssId(id: string) {
   if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
     return globalThis.CSS.escape(id);
   }
-  return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+
+  return cssEscape(id);
 }
 
 function removeDefs(svg: SVGSVGElement) {

package/src/resource/loaders/search.ts

@@ -43,9 +43,6 @@ export async function loadSearchResource(query: string, format?: string) {
       const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
       return loadSVGResource(svgText);
     }
-    if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
-      return loadImageBase64Resource(result);
-    }
     return loadImageBase64Resource(result);
   }
 

package/src/templates/utils.ts

@@ -43,13 +43,34 @@ function getCommonPrefixLength(source: string, target: string): number {
   const limit = Math.min(source.length, target.length);
   let index = 0;
 
-  while (index < limit && source[index] === target[index]) {
+  while (
+    index < limit &&
+    source.charCodeAt(index) === target.charCodeAt(index)
+  ) {
     index += 1;
   }
 
   return index;
 }
 
+function isBetterMatch(
+  bestMatch: string | undefined,
+  bestDistance: number,
+  bestPrefixLength: number,
+  candidateKey: string,
+  candidateDistance: number,
+  candidatePrefixLength: number,
+): boolean {
+  return (
+    candidateDistance < bestDistance ||
+    (candidateDistance === bestDistance &&
+      candidatePrefixLength > bestPrefixLength) ||
+    (candidateDistance === bestDistance &&
+      candidatePrefixLength === bestPrefixLength &&
+      (!bestMatch || candidateKey < bestMatch))
+  );
+}
+
 export function findClosestTemplateKey(
   type: string,
   keys: Iterable<string>,
@@ -71,11 +92,14 @@ export function findClosestTemplateKey(
     const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
 
     if (
-      distance < bestDistance ||
-      (distance === bestDistance && prefixLength > bestPrefixLength) ||
-      (distance === bestDistance &&
-        prefixLength === bestPrefixLength &&
-        (!bestMatch || key < bestMatch))
+      isBetterMatch(
+        bestMatch,
+        bestDistance,
+        bestPrefixLength,
+        key,
+        distance,
+        prefixLength,
+      )
     ) {
       bestMatch = key;
       bestDistance = distance;

package/src/utils/padding.ts

@@ -27,7 +27,7 @@ export function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding) {
   if (isNode) {
     setSVGPaddingInNode(svg, padding);
   } else {
-    if (document.contains(svg)) {
+    if (svg.isConnected) {
       setSVGPaddingInBrowser(svg, padding);
     } else {
       try {

package/src/utils/style.ts

@@ -1,8 +1,35 @@
-export function injectStyleOnce(id: string, styles: string) {
-  if (document.getElementById(id)) return;
+type StyleTarget = Document | ShadowRoot | Node | null | undefined;
 
-  const style = document.createElement('style');
+function resolveStyleRoot(target?: StyleTarget): Document | ShadowRoot {
+  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: Document | ShadowRoot, id: string) {
+  if (root instanceof Document) return Boolean(root.getElementById(id));
+  return Boolean(root.querySelector(`#${id}`));
+}
+
+export function injectStyleOnce(
+  id: string,
+  styles: string,
+  target?: StyleTarget,
+) {
+  const root = resolveStyleRoot(target);
+  if (hasStyle(root, id)) return;
+
+  const doc = root instanceof Document ? root : (root.ownerDocument ?? 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/src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.2.17';
+export const VERSION = '0.2.18';