@antv/infographic 0.2.7 → 0.2.8

package/src/utils/measure-text.ts

@@ -1,10 +1,9 @@
 import { measureText as measure, registerFont } from 'measury';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
-import { TextProps } from '../jsx';
+import { JSXNode, TextProps } from '../jsx';
 import { DEFAULT_FONT } from '../renderer';
 import { encodeFontFamily } from './font';
 import { isBrowser } from './is-browser';
-import { isNode } from './is-node';
 
 let FONT_EXTEND_FACTOR = 1.01;
 
@@ -12,9 +11,7 @@ export const setFontExtendFactor = (factor: number) => {
   FONT_EXTEND_FACTOR = factor;
 };
 
-if (isNode) {
-  registerFont(AlibabaPuHuiTi);
-}
+registerFont(AlibabaPuHuiTi);
 
 let canvasContext: CanvasRenderingContext2D | null = null;
 let measureSpan: HTMLSpanElement | null = null;
@@ -105,13 +102,15 @@ function measureTextInBrowser(
 }
 
 export function measureText(
-  text: string | number | undefined = '',
+  text: JSXNode = '',
   attrs: TextProps,
 ): { width: number; height: number } {
   if (attrs.width && attrs.height) {
     return { width: attrs.width, height: attrs.height };
   }
-
+  if (typeof text !== 'string' && typeof text !== 'number') {
+    return { width: 0, height: 0 };
+  }
   const {
     fontFamily = DEFAULT_FONT,
     fontSize = 14,

package/src/utils/recognizer.ts

@@ -6,8 +6,12 @@ import { getTextEntity } from './text';
 const is = (element: SVGElement, role: string) => {
   return element?.dataset?.elementType === role;
 };
+const isTagName = (element: HTMLElement | SVGElement, tagName: string) => {
+  return element.tagName.toLowerCase() === tagName.toLowerCase();
+};
+
 export const isSVG = (element: any): element is SVGSVGElement =>
-  element instanceof SVGElement && element.tagName === 'svg';
+  element instanceof SVGElement && isTagName(element, 'svg');
 export const isTitle = (element: SVGElement) => is(element, 'title');
 export const isDesc = (element: SVGElement) => is(element, 'desc');
 export const isShape = (element: SVGElement) => is(element, 'shape');
@@ -15,9 +19,9 @@ export const isShapesGroup = (element: SVGElement) =>
   is(element, 'shapes-group');
 export const isIllus = (element: SVGElement) => is(element, 'illus');
 export const isText = (element: SVGElement): element is SVGTextElement =>
-  element instanceof SVGElement && element.tagName === 'text';
+  element instanceof SVGElement && isTagName(element, 'text');
 export const isGroup = (element: SVGElement): element is SVGGElement =>
-  element instanceof SVGElement && element.tagName === 'g';
+  element instanceof SVGElement && isTagName(element, 'g');
 export const isItemIcon = (element: SVGElement) => is(element, 'item-icon');
 export const isItemIconGroup = (element: SVGElement) =>
   is(element, 'item-icon-group');
@@ -37,11 +41,11 @@ export const isRoughVolume = (element: SVGElement) =>
 export function isForeignObjectElement(
   element: any,
 ): element is SVGForeignObjectElement {
-  return element.tagName === 'foreignObject';
+  return isTagName(element, 'foreignObject');
 }
 
 export function isTextEntity(element: any): element is HTMLSpanElement {
-  return element.tagName === 'SPAN';
+  return isTagName(element, 'SPAN');
 }
 
 export function isEditableText(node: SVGElement): node is TextElement {

package/src/utils/svg.ts

@@ -82,7 +82,6 @@ export function getOrCreateDefs(
   const defs = svg.querySelector<SVGDefsElement>(selector);
 
   if (defs) return defs;
-
   const newDefs = createElement<SVGDefsElement>('defs');
   if (defsId) newDefs.id = defsId;
   svg.prepend(newDefs);

package/src/utils/text.ts

@@ -1,4 +1,4 @@
-import camelCase from 'lodash-es/camelCase';
+import { camelCase } from 'lodash-es';
 import { TextProps } from '../editor';
 import type {
   TextAttributes,
@@ -7,6 +7,7 @@ import type {
   TextVerticalAlign,
 } from '../types';
 import { decodeFontFamily, encodeFontFamily } from './font';
+import { measureText } from './measure-text';
 import { isForeignObjectElement } from './recognizer';
 import { createElement, setAttributes } from './svg';
 
@@ -20,6 +21,8 @@ export function createTextElement(
   attributes: TextAttributes,
 ): TextElement {
   const entity = document.createElement('span');
+  // Set xmlns on the span element (HTML content)
+  entity.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
   const foreignObject = createElement<SVGForeignObjectElement>(
     'foreignObject',
     { overflow: 'visible' },
@@ -46,9 +49,19 @@ export function updateTextElement(
 
   if (entity) {
     Object.assign(entity.style, getTextStyle(attributes));
-
     if (!width || !height) {
-      const rect = measureTextSpan(entity);
+      const content = textContent ?? getTextContent(text);
+      const { fontFamily, fontSize, fontWeight, lineHeight } = entity.style;
+      const fSize = fontSize ? parseFloat(String(fontSize)) : 12;
+      const rect = measureText(content, {
+        fontFamily,
+        fontSize: fSize,
+        fontWeight,
+        lineHeight: lineHeight.endsWith('px')
+          ? parseFloat(lineHeight)
+          : (parseFloat(lineHeight) || 1.4) * fSize,
+      });
+
       if (!width && !text.hasAttribute('width')) width = String(rect.width);
       if (!height && !text.hasAttribute('height')) height = String(rect.height);
     }
@@ -153,32 +166,25 @@ export function getTextStyle(attributes: TextAttributes) {
         : +lineHeight;
   if (letterSpacing) style.letterSpacing = `${letterSpacing}px`;
   if (strokeWidth) style.strokeWidth = `${strokeWidth}px`;
-  style.fontFamily = fontFamily
-    ? encodeFontFamily(fontFamily)
-    : fontFamily || '';
+  if (fontFamily) style.fontFamily = encodeFontFamily(fontFamily);
 
   return style;
 }
 
-function measureTextSpan(span: HTMLSpanElement) {
-  const parentNode = span.parentNode;
-  span.style.visibility = 'hidden';
-  document.body.appendChild(span);
-  const rect = span.getBoundingClientRect();
-  if (parentNode) parentNode.appendChild(span);
-  else document.body.removeChild(span);
-  span.style.visibility = 'visible';
-  return rect;
-}
-
 export function getTextContent(text: TextElement): string {
-  return getTextEntity(text)?.innerText || '';
+  const entity = getTextEntity(text);
+  if (!entity) return '';
+  return entity.innerText || entity.textContent || '';
 }
 
 export function setTextContent(text: TextElement, content: string): void {
   const entity = getTextEntity(text);
   if (entity) {
-    entity.innerText = content;
+    try {
+      entity.innerText = content;
+    } catch {
+      entity.textContent = content;
+    }
   }
 }