🐛 fix: fix text position parsing

Author: arvinxx

src/model/Layer/Text.ts

@@ -128,10 +128,13 @@ class Text extends BaseLayer {
     switch (whiteSpace) {
       case 'normal':
       case 'nowrap':
-        return text
-          .trim()
-          .replace(/\n/g, ' ') // replace newline characters with space
-          .replace(/\s+/g, ' '); // collapse whitespace
+        return (
+          text
+            // replace newline characters with space
+            .replace(/\n/g, ' ')
+            // collapse whitespace
+            .replace(/\s+/g, ' ')
+        );
       case 'pre-line':
         return text
           .replace(/(^[^\S\n]+)|([^\S\n]+$)/g, '') // trim but leave \n

src/parser/pseudoText.ts

@@ -1,5 +1,5 @@
 import Text from '../model/Layer/Text';
-import { getTextContext } from '../utils/text';
+import { getTextLinesAndRange } from '../utils/text';
 
 /**
  * 解析伪类
@@ -43,12 +43,12 @@ export const parsePseudoToText = (
 
   document.body.append(pseudoNode); // 插入到 dom 中 用于获取文本宽度
 
-  const { textBCR } = getTextContext(pseudoNode);
+  const { rangeBCR } = getTextLinesAndRange(pseudoNode);
 
   let x = nodeBCR.left;
   switch (pseudoElt) {
     case 'after':
-      x = nodeBCR.right - parseFloat(marginRight) - textBCR.width;
+      x = nodeBCR.right - parseFloat(marginRight) - rangeBCR.width;
       break;
     case 'placeholder':
       x = nodeBCR.left + parseFloat(paddingLeft);
@@ -64,9 +64,9 @@ export const parsePseudoToText = (
     const nodeDisplay = getComputedStyle(node).display;
     // 处理垂直居中的样式
     if (nodeDisplay !== 'inline') {
-      y += (nodeBCR.height - textBCR.height) / 2;
+      y += (nodeBCR.height - rangeBCR.height) / 2;
     } else {
-      y += (nodeBCR.height - textBCR.height) / 2;
+      y += (nodeBCR.height - rangeBCR.height) / 2;
     }
   }
 
@@ -107,12 +107,12 @@ export const parsePseudoToText = (
   } else {
     textStyle = Text.getTextStyleFromNode(node);
   }
-  textStyle.lineHeight = textBCR.height;
+  textStyle.lineHeight = rangeBCR.height;
 
   return new Text({
     x,
     y,
-    width: textBCR.width,
+    width: rangeBCR.width,
     height: nodeBCR.height,
     text: pseudoText,
     style: textStyle,

src/parser/text.ts

@@ -1,7 +1,7 @@
 import Text from '../model/Layer/Text';
 
 import {
-  getTextContext,
+  getTextLinesAndRange,
   getTextAbsBCR,
   getLineTextWithWidth,
 } from '../utils/text';
@@ -29,24 +29,35 @@ export const parseToText = (node: Element): Text | Text[] | undefined => {
       // 上述 4 个要素综合影响文本的 x y 坐标
       // 有待重构
 
-      const { lines, textBCR } = getTextContext(childNode);
-      const { x, y, width: bcrWidth, height } = getTextAbsBCR(node, childNode);
+      // 大部分时候可以直接使用 rangeBCR 作为文本的 BCR
+      const { lines, rangeBCR } = getTextLinesAndRange(childNode);
+
+      const {
+        // x,
+        y,
+        width: bcrWidth,
+        height,
+      } = getTextAbsBCR(node, childNode);
       let textWidth = bcrWidth;
 
       const { display, whiteSpace, overflow, textOverflow, width } = styles;
 
-      if (display === 'inline') {
-        textStyle.lineHeight = textBCR.height / lines;
+      if ('inline'.includes(display)) {
+        textStyle.lineHeight = rangeBCR.height / lines;
       }
-      // **** 处理文本 ****** //
+      // **** 处理文本带省略的情况 ****** //
 
       let textValue = Text.fixWhiteSpace(childNode.nodeValue || '', whiteSpace);
       const originText = textValue;
       // 针对隐藏或者带省略号的
       if (overflow === 'hidden') {
-        textWidth = parseFloat(width); // 修改其宽度
-
+        // 修改宽度
+        textWidth = parseFloat(width);
+        // 并对比修改后的文本内容
         textValue = getLineTextWithWidth(childNode, textWidth);
+
+        // 如果是 ellipsis 类型且存在省略号
+        // 按省略号添加
         if (
           textOverflow === 'ellipsis' &&
           originText.length !== textValue.length
@@ -57,7 +68,8 @@ export const parseToText = (node: Element): Text | Text[] | undefined => {
       }
 
       return new Text({
-        x: ['inline-block'].includes(display) ? x : textBCR.x,
+        // x: ['inline-block'].includes(display) ? x : rangeBCR.x,
+        x: rangeBCR.x,
         // y: textBCR.y,
         y,
         width: textWidth,

src/utils/text.ts

@@ -2,19 +2,19 @@
  * 获取文本定界框与行数
  * @param textNode
  */
-export const getTextContext = (textNode: Node) => {
+export const getTextLinesAndRange = (textNode: Node) => {
   // 创建Range 对象
   const rangeHelper = document.createRange();
   rangeHelper.selectNodeContents(textNode); // 选中文本节点
 
   const textRanges = Array.from(rangeHelper.getClientRects());
 
   const lines = textRanges.length;
-  const textBCR = rangeHelper.getBoundingClientRect();
+  const rangeBCR = rangeHelper.getBoundingClientRect();
 
   rangeHelper.detach();
   return {
-    textBCR,
+    rangeBCR,
     lines,
     textRanges,
   };
@@ -35,7 +35,7 @@ export const getTextAbsBCR = (parentNode: Element, textNode: Node) => {
   let { x } = nodeBCR;
   let { y } = nodeBCR;
 
-  const { lines, textBCR } = getTextContext(textNode);
+  const { lines, rangeBCR } = getTextLinesAndRange(textNode);
 
   const {
     lineHeight,
@@ -48,9 +48,9 @@ export const getTextAbsBCR = (parentNode: Element, textNode: Node) => {
     borderTopWidth,
   } = styles;
 
-  const textWidth = textBCR.width;
+  const textWidth = rangeBCR.width;
   const lineHeightInt = parseInt(lineHeight, 10);
-  const textBCRHeight = textBCR.height;
+  const textBCRHeight = rangeBCR.height;
 
   let fixY = 0;
 
@@ -113,9 +113,9 @@ export const getLineTextWithWidth = (textNode: ChildNode, width: number) => {
     const charNode = textNode.cloneNode(true);
     charNode.textContent = textContent;
     document.body.appendChild(charNode);
-    const { textBCR } = getTextContext(charNode);
+    const { rangeBCR } = getTextLinesAndRange(charNode);
     document.body.removeChild(charNode);
-    if (textBCR.width < width) {
+    if (rangeBCR.width < width) {
       textContent += text[i];
     }
   }

tests/__tests__/model/Layer/Text.spec.ts

@@ -10,7 +10,7 @@ describe('fixWhiteSpace', () => {
 
 
   your      father `;
-    const output = "Luke, I'm your father";
+    const output = " Luke, I'm your father ";
 
     expect(fixWhiteSpace(input, 'normal')).toEqual(output);
     expect(fixWhiteSpace(input, 'nowrap')).toEqual(output);