Merge branch 'fix/richtext-edit-bugfix' into pre-release/0.22.0-vstory.7

packages/vrender-core/src/graphic/group.ts

@@ -147,6 +147,10 @@ export class Group extends Graphic<IGroupGraphicAttribute> implements IGroup {
     const bounds = this.doUpdateAABBBounds();
     this.addUpdateLayoutTag();
     application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange);
+    // 直接返回空Bounds，但是前面的流程还是要走
+    if (this.attribute.boundsMode === 'empty') {
+      bounds.clear();
+    }
     return bounds;
   }
 

packages/vrender-core/src/graphic/richtext.ts

@@ -205,8 +205,19 @@ export class RichText extends Graphic<IRichTextGraphicAttribute> implements IRic
     );
   }
 
+  static splitEmoji(text: string) {
+    // 👈🏻这种emoji用Array.from还处理不了，所以得兼容一下
+    return [...new (Intl as any).Segmenter().segment(text)].map(x => x.segment);
+  }
+
   static splitText(text: string) {
     // 😁这种emoji长度算两个，所以得处理一下
+    try {
+      const arr = this.splitEmoji(text);
+      return arr;
+    } catch (e) {
+      // do nothing
+    }
     return Array.from(text);
   }
 

packages/vrender-core/src/graphic/richtext/paragraph.ts

@@ -7,15 +7,16 @@ function getFixedLRTB(left: number, right: number, top: number, bottom: number)
   const topInt = Math.round(top);
   const rightInt = Math.round(right);
   const bottomInt = Math.round(bottom);
-  const _left = left > leftInt ? leftInt : leftInt - 0.5;
-  const _top = top > topInt ? topInt : topInt - 0.5;
-  const _right = rightInt > right ? rightInt : rightInt + 0.5;
-  const _bottom = bottomInt > bottom ? bottomInt : bottomInt + 0.5;
+  // 会导致背景色重叠
+  // const _left = left > leftInt ? leftInt : leftInt - 0.5;
+  // const _top = top > topInt ? topInt : topInt - 0.5;
+  // const _right = rightInt > right ? rightInt : rightInt + 0.5;
+  // const _bottom = bottomInt > bottom ? bottomInt : bottomInt + 0.5;
   return {
-    left: _left,
-    top: _top,
-    right: _right,
-    bottom: _bottom
+    left: leftInt,
+    top: topInt,
+    right: rightInt,
+    bottom: bottomInt
   };
 }
 

packages/vrender-core/src/interface/graphic/richText.ts

@@ -6,6 +6,7 @@ import type { ITextGraphicAttribute } from './text';
 
 export type IRichTextEditOptionsType = {
   placeholder?: string;
+  syncPlaceHolderToTextConfig?: boolean;
   placeholderColor?: string;
   placeholderFontSize?: number;
   placeholderFontFamily?: string;

packages/vrender-core/src/plugins/builtin-plugin/edit-module.ts

@@ -267,6 +267,7 @@ export class EditModule {
     const textList: string[] = text ? Array.from(text.toString()) : [];
     for (let i = 0; i < textList.length; i++) {
       textConfig.splice(i + configIdx, 0, {
+        ...getDefaultCharacterConfig(this.currRt.attribute),
         fill: 'black',
         ...lastConfig,
         isComposing: false,

packages/vrender-core/src/plugins/builtin-plugin/richtext-edit-plugin.ts

@@ -32,7 +32,15 @@ import { application } from '../../application';
 import { getWordStartEndIdx } from '../../graphic/richtext/utils';
 // import { testLetter, testLetter2 } from '../../graphic/richtext/utils';
 
-type UpdateType = 'input' | 'change' | 'onfocus' | 'defocus' | 'selection' | 'dispatch';
+type UpdateType =
+  | 'input'
+  | 'change'
+  | 'onfocus'
+  | 'beforeOnfocus'
+  | 'defocus'
+  | 'beforeDefocus'
+  | 'selection'
+  | 'dispatch';
 
 class Selection {
   selectionStartCursorIdx: number;
@@ -150,7 +158,7 @@ export class RichTextEditPlugin implements IPlugin {
   editModule: EditModule;
 
   protected commandCbs: Map<string, Array<(payload: any, p: RichTextEditPlugin) => void>>;
-  protected updateCbs: Array<(type: UpdateType, p: RichTextEditPlugin) => void>;
+  protected updateCbs: Array<(type: UpdateType, p: RichTextEditPlugin, params?: any) => void>;
 
   // 富文本外部有align或者baseline的时候，需要对光标做偏移
   protected declare deltaX: number;
@@ -365,6 +373,12 @@ export class RichTextEditPlugin implements IPlugin {
         return;
       }
       const { lines } = cache;
+      if (lines.length === 0) {
+        return;
+      }
+      if (!lines[0].paragraphs || lines[0].paragraphs.length === 0) {
+        return;
+      }
       const totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
       this.selectionRange(-0.1, totalCursorCount + 0.1);
 
@@ -543,16 +557,28 @@ export class RichTextEditPlugin implements IPlugin {
       placeholderFontFamily,
       placeholderFontSize
     } = editOptions;
-    const shadow = this.currRt.shadowRoot || this.currRt.attachShadow();
+    const shadow = this.getShadow(this.currRt);
+    const textConfigItem = { ...getDefaultCharacterConfig(this.currRt.attribute), text: placeholder };
+    if (placeholderColor) {
+      textConfigItem.fill = placeholderColor;
+    }
+    if (placeholderFontFamily) {
+      textConfigItem.fontFamily = placeholderFontFamily;
+    }
+    if (placeholderFontSize) {
+      textConfigItem.fontSize = placeholderFontSize;
+    }
+
     this.shadowPlaceHolder = createRichText({
       ...this.currRt.attribute,
       x: 0,
       y: 0,
+      pickable: false,
+      editable: false,
+      editOptions: null,
       angle: 0,
       _debug_bounds: false,
-      textConfig: [
-        { text: placeholder, fill: placeholderColor, fontFamily: placeholderFontFamily, fontSize: placeholderFontSize }
-      ]
+      textConfig: [textConfigItem]
     });
     shadow.add(this.shadowPlaceHolder);
   }
@@ -568,11 +594,12 @@ export class RichTextEditPlugin implements IPlugin {
       return;
     }
     const { attribute } = this.currRt;
-    const b = this.currRt.AABBBounds;
+    let b = this.currRt.AABBBounds;
     let h = b.height();
     if (!attribute.textConfig.length && this.editLine) {
       const { points } = this.editLine.attribute;
       h = points[1].y - points[0].y;
+      b = getRichTextBounds({ ...this.shadowPlaceHolder.attribute });
     }
     this.shadowBounds = this.shadowBounds || createRect({});
     this.shadowBounds.setAttributes({
@@ -583,10 +610,9 @@ export class RichTextEditPlugin implements IPlugin {
       fill: false,
       stroke: boundsStrokeWhenInput,
       lineWidth: 1,
-      boundsMode: 'empty',
       zIndex: -1
     });
-    const shadow = this.currRt.shadowRoot || this.currRt.attachShadow();
+    const shadow = this.getShadow(this.currRt);
     shadow.add(this.shadowBounds);
 
     this.offsetLineBgAndShadowBounds();
@@ -600,7 +626,7 @@ export class RichTextEditPlugin implements IPlugin {
     if (textConfig && textConfig.length) {
       return;
     }
-    if (!(editOptions && editOptions.placeholder)) {
+    if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) {
       return;
     }
     const { placeholder } = editOptions;
@@ -685,6 +711,7 @@ export class RichTextEditPlugin implements IPlugin {
   };
 
   onFocus(e: PointerEvent, data?: any) {
+    this.updateCbs && this.updateCbs.forEach(cb => cb('beforeOnfocus', this));
     this.deFocus(false);
     this.focusing = true;
     const target = e.target as IRichText;
@@ -696,7 +723,7 @@ export class RichTextEditPlugin implements IPlugin {
     // 创建shadowGraphic
 
     RichTextEditPlugin.tryUpdateRichtext(target);
-    const shadowRoot = target.shadowRoot || target.attachShadow();
+    const shadowRoot = this.getShadow(target);
     const cache = target.getFrameCache();
     if (!cache) {
       return;
@@ -707,13 +734,13 @@ export class RichTextEditPlugin implements IPlugin {
     // 添加cursor节点，shadowRoot在上面
     shadowRoot.setAttributes({ shadowRootIdx: 1, pickable: false, x: this.deltaX, y: this.deltaY });
     if (!this.editLine) {
-      const line = createLine({ x: 0, y: 0, lineWidth: 1, stroke: 'black', boundsMode: 'empty' });
+      const line = createLine({ x: 0, y: 0, lineWidth: 1, stroke: 'black' });
       // 不使用stage的Ticker，避免影响其他的动画以及受到其他动画影响
       this.addAnimateToLine(line);
       this.editLine = line;
       this.ticker.start(true);
 
-      const g = createGroup({ x: 0, y: 0, width: 0, height: 0, boundsMode: 'empty' });
+      const g = createGroup({ x: 0, y: 0, width: 0, height: 0 });
       this.editBg = g;
       shadowRoot.add(this.editLine);
       shadowRoot.add(this.editBg);
@@ -775,6 +802,7 @@ export class RichTextEditPlugin implements IPlugin {
     if (!target) {
       return;
     }
+    this.updateCbs && this.updateCbs.forEach(cb => cb('beforeDefocus', this, { trulyDeFocus }));
     if (trulyDeFocus) {
       this.trySyncPlaceholderToTextConfig();
       target.detachShadow();
@@ -890,6 +918,9 @@ export class RichTextEditPlugin implements IPlugin {
     };
     let line0Info = this.getLineByPoint(cache, startCursorPos);
     let line1Info = this.getLineByPoint(cache, endCursorPos);
+    if (!line0Info || !line1Info) {
+      return;
+    }
 
     if (
       startCursorPos.y > endCursorPos.y ||
@@ -972,6 +1003,12 @@ export class RichTextEditPlugin implements IPlugin {
     }
   }
 
+  protected getShadow(rt: IRichText) {
+    const sr = rt.shadowRoot || rt.attachShadow();
+    sr.setAttributes({ boundsMode: 'empty' });
+    return sr;
+  }
+
   protected getLineByPoint(cache: IRichTextFrame, p1: IPointLike): IRichTextLine {
     let lineInfo = cache.lines[0];
     for (let i = 0; i < cache.lines.length; i++) {

packages/vrender-core/src/render/contributions/render/draw-contribution.ts

@@ -205,7 +205,11 @@ export class DefaultDrawContribution implements IDrawContribution {
       return;
     }
 
-    if (this.useDirtyBounds && !isRectIntersect(group.AABBBounds, this.dirtyBounds, false)) {
+    if (
+      this.useDirtyBounds &&
+      !isRectIntersect(group.AABBBounds, this.dirtyBounds, false) &&
+      group.attribute.boundsMode !== 'empty'
+    ) {
       return;
     }