Merge pull request #810 from VisActor/fix/text-wrap

fix: fix issue with text while whitespace is normal
VisActor · Dec 19, 2023 · dd83584 · dd83584
2 parents 4965812 + d5237dd
commit dd83584
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-text-wrap_2023-12-19-09-00.json b/common/changes/@visactor/vrender-core/fix-text-wrap_2023-12-19-09-00.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with text while whitespace is normal",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/graphic/text.ts b/packages/vrender-core/src/graphic/text.ts
@@ -56,7 +56,7 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
   get clipedText(): string | undefined {
     const attribute = this.attribute;
     const textTheme = getTheme(this).text;
-    if (Array.isArray(attribute.text)) {
+    if (this.isMultiLine) {
       return undefined;
     }
     const { maxLineWidth = textTheme.maxLineWidth } = attribute;
@@ -67,7 +67,7 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     return this.cache.clipedText;
   }
   get clipedWidth(): number | undefined {
-    if (Array.isArray(this.attribute.text)) {
+    if (this.isMultiLine) {
       return undefined;
     }
     this.tryUpdateAABBBounds();
@@ -76,7 +76,7 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
   get cliped(): boolean | undefined {
     const textTheme = getTheme(this).text;
     const attribute = this.attribute;
-    if (Array.isArray(attribute.text)) {
+    if (this.isMultiLine) {
       return undefined;
     }
     const { maxLineWidth = textTheme.maxLineWidth } = attribute;
@@ -87,13 +87,17 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     return this.clipedText !== attribute.text.toString();
   }
   get multilineLayout(): LayoutType | undefined {
-    if (!Array.isArray(this.attribute.text)) {
+    if (!this.isMultiLine) {
       return undefined;
     }
     this.tryUpdateAABBBounds();
     return this.cache.layoutData;
   }
 
+  get isMultiLine(): boolean {
+    return Array.isArray(this.attribute.text) || this.attribute.whiteSpace === 'normal';
+  }
+
   constructor(params: ITextGraphicAttribute = { text: '', fontSize: 16 }) {
     super(params);
     this.numberType = TEXT_NUMBER_TYPE;

diff --git a/packages/vrender-core/src/interface/graphic/text.ts b/packages/vrender-core/src/interface/graphic/text.ts
@@ -82,6 +82,7 @@ export interface IText extends IGraphic<ITextGraphicAttribute> {
   cliped?: boolean;
   multilineLayout?: LayoutType;
   font?: string;
+  isMultiLine: boolean;
   cache?: ITextCache;
 
   getBaselineMapAlign: () => Record<string, string>;

diff --git a/packages/vrender-core/src/render/contributions/render/text-render.ts b/packages/vrender-core/src/render/contributions/render/text-render.ts
@@ -64,6 +64,7 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
       keepDirIn3d = textAttribute.keepDirIn3d,
       direction = textAttribute.direction,
       // lineHeight = textAttribute.lineHeight,
+      whiteSpace = textAttribute.whiteSpace,
       fontSize = textAttribute.fontSize,
       verticalMode = textAttribute.verticalMode,
       x: originX = textAttribute.x,
@@ -147,7 +148,7 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
         context.setTransformForCurrent();
       }
     };
-    if (Array.isArray(str)) {
+    if (text.isMultiLine) {
       context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
       if (direction === 'horizontal') {
         const { multilineLayout } = text;

diff --git a/packages/vrender/__tests__/browser/src/pages/text.ts b/packages/vrender/__tests__/browser/src/pages/text.ts
@@ -49,12 +49,26 @@ function performance(stage: any) {
 export const page = () => {
   const graphics: IGraphic[] = [];
   const t = createText({
-    x: 100,
-    y: 100,
-    fontFamily: 'Arial',
-    text: 'aaa这是aaa',
-    fill: 'red',
-    background: 'green'
+    autoWrapText: false,
+    dx: 0,
+    ellipsis: '...',
+    fill: '#000',
+    fontFamily: 'Arial,sans-serif',
+    fontSize: 16,
+    fontWeight: null,
+    heightLimit: 52,
+    lineClamp: undefined,
+    lineHeight: 16,
+    lineThrough: undefined,
+    maxLineWidth: 40,
+    text: ['129.696', '这是第二行'],
+    textAlign: 'left',
+    textBaseline: 'top',
+    underline: undefined,
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    x: 16,
+    y: 28
   });
   console.log(t.AABBBounds);
   graphics.push(t);