fix: fix issue with text edit include textAlign and bounds

VisActor · Feb 24, 2025 · 7eb2d22 · 7eb2d22
1 parent 143ec08
commit 7eb2d22
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 299 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-text-edit_2025-02-24-09-19.json b/common/changes/@visactor/vrender-core/fix-text-edit_2025-02-24-09-19.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with text edit include textAlign and bounds",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/plugins/builtin-plugin/edit-module.ts b/packages/vrender-core/src/plugins/builtin-plugin/edit-module.ts
@@ -18,7 +18,14 @@ import type {
 // }
 
 export function getDefaultCharacterConfig(attribute: IRichTextGraphicAttribute) {
-  const { fill = 'black', stroke = false, fontWeight = 'normal', lineHeight, fontFamily = 'Arial' } = attribute;
+  const {
+    fill = 'black',
+    stroke = false,
+    fontWeight = 'normal',
+    lineHeight,
+    fontFamily = 'Arial',
+    textAlign
+  } = attribute;
   let { fontSize = 12 } = attribute;
   if (!isFinite(fontSize)) {
     fontSize = 12;
@@ -29,7 +36,8 @@ export function getDefaultCharacterConfig(attribute: IRichTextGraphicAttribute)
     fontSize,
     fontWeight,
     fontFamily,
-    lineHeight
+    lineHeight,
+    textAlign
   } as any;
 }
 
@@ -219,7 +227,12 @@ export class EditModule {
     } else {
       const configIdx = this.composingConfigIdx;
       const lastConfig = textConfig[configIdx] || textConfig[configIdx - 1];
-      textConfig.splice(configIdx, 0, { fill: 'black', ...lastConfig, text: '' });
+      textConfig.splice(configIdx, 0, {
+        fill: 'black',
+        ...getDefaultCharacterConfig(this.currRt.attribute),
+        ...lastConfig,
+        text: ''
+      });
     }
   };
   handleCompositionEnd = () => {

diff --git a/packages/vrender-core/src/plugins/builtin-plugin/richtext-edit-plugin.ts b/packages/vrender-core/src/plugins/builtin-plugin/richtext-edit-plugin.ts
@@ -617,6 +617,8 @@ export class RichTextEditPlugin implements IPlugin {
     if (!editOptions || !boundsStrokeWhenInput) {
       return;
     }
+    // 得先偏移，不然上一次的Bounds会影响后续的计算
+    this.offsetShadowRoot();
     // const { attribute } = this.currRt;
     const b = this.getRichTextAABBBounds(this.currRt);
     const height = b.height();
@@ -641,7 +643,6 @@ export class RichTextEditPlugin implements IPlugin {
     // shadow.add(this.shadowBounds);
 
     this.offsetLineBgAndShadowBounds();
-    this.offsetShadowRoot();
   }
 
   trySyncPlaceholderToTextConfig() {
@@ -1089,7 +1090,7 @@ export class RichTextEditPlugin implements IPlugin {
   protected getShadow(rt: IRichText) {
     const sr = rt.shadowRoot || rt.attachShadow();
     // TODO 这里比较hack，因为emptyBoundsContainer是empty，导致shadowRoot的Bounds为空，所以这里给一个1*1的rect，让其能绘制
-    sr.setAttributes({ width: 1, height: 1 });
+    sr.setAttributes({ width: 0, height: 0 });
     return sr;
   }