@visactor/vrender-core 0.22.0-vstory.9 → 0.22.1

package/es/plugins/builtin-plugin/richtext-edit-plugin.d.ts

@@ -1,5 +1,5 @@
 import type { IPointLike } from '@visactor/vutils';
-import type { IGroup, ILine, IPlugin, IPluginService, IRect, IRichText, IRichTextCharacter, IRichTextFrame, IRichTextIcon, IRichTextLine, IRichTextParagraph, ITicker, ITimeline } from '../../interface';
+import type { IGraphic, IGroup, ILine, IPlugin, IPluginService, IRect, IRichText, IRichTextCharacter, IRichTextFrame, IRichTextIcon, IRichTextLine, IRichTextParagraph, ITicker, ITimeline } from '../../interface';
 import { EditModule } from './edit-module';
 type UpdateType = 'input' | 'change' | 'onfocus' | 'beforeOnfocus' | 'defocus' | 'beforeDefocus' | 'selection' | 'dispatch';
 declare class Selection {
@@ -11,8 +11,8 @@ declare class Selection {
     getSelectionPureText(): string;
     hasFormat(key: string): boolean;
     _getFormat(key: string, cursorIdx: number): any;
-    getFormat(key: string): any;
-    getAllFormat(key: string): any;
+    getFormat(key: string, supportOutAttr?: boolean): any;
+    getAllFormat(key: string, supportOutAttr?: boolean): any;
 }
 export declare const FORMAT_TEXT_COMMAND = "FORMAT_TEXT_COMMAND";
 export declare const FORMAT_ALL_TEXT_COMMAND = "FORMAT_ALL_TEXT_COMMAND";
@@ -56,12 +56,14 @@ export declare class RichTextEditPlugin implements IPlugin {
     copyToClipboard(e: KeyboardEvent): boolean;
     selectionRange(startIdx: number, endIdx: number): void;
     selectionRangeByCursorIdx(startCursorIdx: number, endCursorIdx: number, cache: IRichTextFrame): void;
-    fullSelection(e: KeyboardEvent): boolean;
-    directKey(e: KeyboardEvent): boolean;
+    fullSelection(): void;
+    protected fullSelectionKeyHandler(e: KeyboardEvent): boolean;
+    directKeyHandler(e: KeyboardEvent): boolean;
     handleKeyDown: (e: KeyboardEvent) => void;
     handleInput: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText) => void;
     handleChange: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText) => void;
     tryShowShadowPlaceholder(): void;
+    getRichTextAABBBounds(rt: IRichText): any;
     tryShowInputBounds(): void;
     trySyncPlaceholderToTextConfig(): void;
     handleFocusIn: () => never;
@@ -73,7 +75,11 @@ export declare class RichTextEditPlugin implements IPlugin {
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: (e: PointerEvent) => void;
     handleDBLClick: (e: PointerEvent) => void;
+    protected stopPropagation(e: Event): void;
+    addEditLineOrBgOrBounds(graphic: IGraphic, shadowRoot: IGroup): void;
+    removeEditLineOrBgOrBounds(graphic: IGraphic, shadowRoot: IGroup): void;
     onFocus(e: PointerEvent, data?: any): void;
+    offsetShadowRoot(rt?: IRichText): void;
     protected offsetLineBgAndShadowBounds(): void;
     protected deFocus(trulyDeFocus?: boolean): void;
     protected addAnimateToLine(line: ILine): void;

package/es/plugins/builtin-plugin/richtext-edit-plugin.js

@@ -40,14 +40,15 @@ class Selection {
         for (let i = 0; i < config.length; i++) if ("\n" !== config[i].text && (idx--, idx < 0)) return config[i][key];
         return null !== (_a = config[Math.min(idx, config.length - 1)][key]) && void 0 !== _a ? _a : this.rt.attribute[key];
     }
-    getFormat(key) {
-        return this.getAllFormat(key)[0];
+    getFormat(key, supportOutAttr = !1) {
+        return this.getAllFormat(key, supportOutAttr)[0];
     }
-    getAllFormat(key) {
+    getAllFormat(key, supportOutAttr = !1) {
+        var _a, _b, _c, _d;
         const valSet = new Set, minCursorIdx = Math.min(this.selectionStartCursorIdx, this.curCursorIdx), maxCursorIdx = Math.max(this.selectionStartCursorIdx, this.curCursorIdx);
-        if (minCursorIdx === maxCursorIdx) return [ this._getFormat(key, minCursorIdx) ];
+        if (minCursorIdx === maxCursorIdx) return supportOutAttr ? [ null !== (_a = this._getFormat(key, minCursorIdx)) && void 0 !== _a ? _a : (null === (_b = this.rt) || void 0 === _b ? void 0 : _b.attribute)[key] ] : [ this._getFormat(key, minCursorIdx) ];
         for (let i = Math.ceil(minCursorIdx); i <= Math.floor(maxCursorIdx); i++) {
-            const val = this._getFormat(key, i);
+            const val = supportOutAttr ? null !== (_c = this._getFormat(key, i)) && void 0 !== _c ? _c : (null === (_d = this.rt) || void 0 === _d ? void 0 : _d.attribute)[key] : this._getFormat(key, i);
             val && valSet.add(val);
         }
         return Array.from(valSet.values());
@@ -91,7 +92,7 @@ export class RichTextEditPlugin {
             const config = rt.attribute.textConfig;
             this._formatTextCommand(payload, config, rt);
         }, this.handleKeyDown = e => {
-            this.currRt && this.editing && (this.copyToClipboard(e) || this.fullSelection(e) || this.directKey(e));
+            this.currRt && this.editing && (this.copyToClipboard(e) || this.fullSelectionKeyHandler(e) || this.directKeyHandler(e));
         }, this.handleInput = (text, isComposing, cursorIdx, rt) => {
             this.currRt && (this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.hideSelection(), 
             this.updateCbs.forEach((cb => cb("input", this))));
@@ -107,7 +108,9 @@ export class RichTextEditPlugin {
             throw new Error("不会走到这里 handleFocusOut");
         }, this.handleMove = e => {
             this.currRt && !this.currRt.attribute.editable && this.deFocus(!0), this.isEditableRichtext(e) ? (this.handleEnter(), 
-            e.target.once("pointerleave", this.handleLeave), this.tryShowSelection(e, !1)) : this.handleLeave();
+            e.target.once("pointerleave", this.handleLeave, {
+                capture: !0
+            }), this.tryShowSelection(e, !1)) : this.handleLeave();
         }, this.handleEnter = () => {
             this.editing = !0, this.pluginService.stage.setCursor("text");
         }, this.handleLeave = () => {
@@ -150,10 +153,17 @@ export class RichTextEditPlugin {
         idx > -1 && cbs.splice(idx, 1);
     }
     activate(context) {
-        this.pluginService = context, this.editModule = new EditModule, context.stage.on("pointermove", this.handleMove), 
-        context.stage.on("pointerdown", this.handlePointerDown), context.stage.on("pointerup", this.handlePointerUp), 
-        context.stage.on("pointerleave", this.handlePointerUp), context.stage.on("dblclick", this.handleDBLClick), 
-        application.global.addEventListener("keydown", this.handleKeyDown), this.editModule.onInput(this.handleInput), 
+        this.pluginService = context, this.editModule = new EditModule, context.stage.on("pointermove", this.handleMove, {
+            capture: !0
+        }), context.stage.on("pointerdown", this.handlePointerDown, {
+            capture: !0
+        }), context.stage.on("pointerup", this.handlePointerUp, {
+            capture: !0
+        }), context.stage.on("pointerleave", this.handlePointerUp, {
+            capture: !0
+        }), context.stage.on("dblclick", this.handleDBLClick, {
+            capture: !0
+        }), application.global.addEventListener("keydown", this.handleKeyDown), this.editModule.onInput(this.handleInput), 
         this.editModule.onChange(this.handleChange), this.editModule.onFocusOut(this.handleFocusOut);
     }
     copyToClipboard(e) {
@@ -182,21 +192,21 @@ export class RichTextEditPlugin {
         const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
         this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt), this._tryShowSelection(pos, cache);
     }
-    fullSelection(e) {
-        if (application.global.isMacOS() && e.metaKey && "a" === e.key || !application.global.isMacOS() && e.ctrlKey && "a" === e.key) {
-            const currRt = this.currRt;
-            if (!currRt) return;
-            const cache = currRt.getFrameCache();
-            if (!cache) return;
-            const {lines: lines} = cache;
-            if (0 === lines.length) return;
-            if (!lines[0].paragraphs || 0 === lines[0].paragraphs.length) return;
-            const totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
-            return this.selectionRange(-.1, totalCursorCount + .1), e.preventDefault(), !0;
-        }
-        return !1;
+    fullSelection() {
+        const currRt = this.currRt;
+        if (!currRt) return;
+        const cache = currRt.getFrameCache();
+        if (!cache) return;
+        const {lines: lines} = cache;
+        if (!lines.length || !lines[0].paragraphs.length) return;
+        const totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
+        this.selectionRange(-.1, totalCursorCount + .1);
+    }
+    fullSelectionKeyHandler(e) {
+        return !!(application.global.isMacOS() && e.metaKey && "a" === e.key || !application.global.isMacOS() && e.ctrlKey && "a" === e.key) && (this.fullSelection(), 
+        e.preventDefault(), !0);
     }
-    directKey(e) {
+    directKeyHandler(e) {
         if ("ArrowUp" !== e.key && "ArrowDown" !== e.key && "ArrowLeft" !== e.key && "ArrowRight" !== e.key) return !1;
         const cache = this.currRt.getFrameCache();
         if (!cache) return !1;
@@ -205,7 +215,8 @@ export class RichTextEditPlugin {
         const {lineInfo: lineInfo, columnInfo: columnInfo} = this.getColumnByIndex(cache, Math.round(this.curCursorIdx)), {lines: lines} = cache, totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
         if (x) {
             x > 0 && columnInfo === lineInfo.paragraphs[lineInfo.paragraphs.length - 2] && this.curCursorIdx < Math.round(this.curCursorIdx) ? this.curCursorIdx = this.curCursorIdx + .2 : x > 0 && columnInfo === lineInfo.paragraphs[lineInfo.paragraphs.length - 1] && this.curCursorIdx > Math.round(this.curCursorIdx) ? this.curCursorIdx = this.curCursorIdx + 1 - .2 : x < 0 && columnInfo === lineInfo.paragraphs[0] && this.curCursorIdx > Math.round(this.curCursorIdx) ? this.curCursorIdx = this.curCursorIdx - .2 : x < 0 && columnInfo === lineInfo.paragraphs[0] && this.curCursorIdx < Math.round(this.curCursorIdx) ? this.curCursorIdx = this.curCursorIdx - 1 + .2 : this.curCursorIdx += x, 
-            this.curCursorIdx < -.1 ? this.curCursorIdx = -.1 : this.curCursorIdx > totalCursorCount + .1 && (this.curCursorIdx = totalCursorCount + .1);
+            this.curCursorIdx < -.1 ? this.curCursorIdx = -.1 : this.curCursorIdx > totalCursorCount + .1 && (this.curCursorIdx = totalCursorCount + .1), 
+            this.selectionStartCursorIdx = this.curCursorIdx;
             const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
             this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt), this.hideSelection();
         }
@@ -236,7 +247,7 @@ export class RichTextEditPlugin {
             const placeholder = shadowRoot.getElementsByType("richtext")[0];
             placeholder && shadowRoot.removeChild(placeholder);
         }
-        const {textConfig: textConfig, editOptions: editOptions} = this.currRt.attribute;
+        const {textConfig: textConfig, editOptions: editOptions = {}} = this.currRt.attribute;
         if (textConfig && textConfig.length) return;
         if (!editOptions || !editOptions.placeholder) return;
         const {placeholder: placeholder, placeholderColor: placeholderColor = "rgba(0, 0, 0, 0.6)", placeholderFontFamily: placeholderFontFamily, placeholderFontSize: placeholderFontSize} = editOptions, shadow = this.getShadow(this.currRt), textConfigItem = Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
@@ -246,41 +257,45 @@ export class RichTextEditPlugin {
         placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), {
             x: 0,
             y: 0,
-            pickable: !1,
-            editable: !1,
-            editOptions: null,
+            dx: -this.deltaX,
+            dy: -this.deltaY,
             angle: 0,
-            _debug_bounds: !1,
             textConfig: [ textConfigItem ]
         })), shadow.add(this.shadowPlaceHolder);
     }
+    getRichTextAABBBounds(rt) {
+        const {attribute: attribute} = rt;
+        return attribute.textConfig.length ? rt.AABBBounds : getRichTextBounds(Object.assign(Object.assign({}, this.shadowPlaceHolder.attribute), {
+            x: attribute.x,
+            y: attribute.y,
+            textAlign: attribute.textAlign,
+            boundsMode: "accurate"
+        }));
+    }
     tryShowInputBounds() {
         if (!this.currRt || !this.focusing) return;
         const {editOptions: editOptions = {}} = this.currRt.attribute, {boundsStrokeWhenInput: boundsStrokeWhenInput} = editOptions;
         if (!editOptions || !boundsStrokeWhenInput) return;
-        const {attribute: attribute} = this.currRt;
-        let b = this.currRt.AABBBounds, h = b.height();
-        if (!attribute.textConfig.length && this.editLine) {
-            const {points: points} = this.editLine.attribute;
-            h = points[1].y - points[0].y, b = getRichTextBounds(Object.assign({}, this.shadowPlaceHolder.attribute));
-        }
+        const b = this.getRichTextAABBBounds(this.currRt), height = b.height(), width = b.width();
         this.shadowBounds = this.shadowBounds || createRect({}), this.shadowBounds.setAttributes({
             x: 0,
             y: 0,
-            width: b.width(),
-            height: h,
+            width: width,
+            height: height,
             fill: !1,
             stroke: boundsStrokeWhenInput,
             lineWidth: 1,
             zIndex: -1
         });
-        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+        const shadow = this.getShadow(this.currRt);
+        this.addEditLineOrBgOrBounds(this.shadowBounds, shadow), this.offsetLineBgAndShadowBounds(), 
+        this.offsetShadowRoot();
     }
     trySyncPlaceholderToTextConfig() {
         if (!this.currRt) return;
         const {textConfig: textConfig, editOptions: editOptions} = this.currRt.attribute;
         if (textConfig && textConfig.length) return;
-        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) return;
+        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceholderToTextConfig)) return;
         const {placeholder: placeholder} = editOptions;
         this.currRt.setAttributes({
             textConfig: [ Object.assign({
@@ -289,59 +304,95 @@ export class RichTextEditPlugin {
         });
     }
     deactivate(context) {
-        context.stage.off("pointermove", this.handleMove), context.stage.off("pointerdown", this.handlePointerDown), 
-        context.stage.off("pointerup", this.handlePointerUp), context.stage.off("pointerleave", this.handlePointerUp), 
-        context.stage.off("dblclick", this.handleDBLClick), application.global.addEventListener("keydown", this.handleKeyDown);
+        context.stage.off("pointermove", this.handleMove, {
+            capture: !0
+        }), context.stage.off("pointerdown", this.handlePointerDown, {
+            capture: !0
+        }), context.stage.off("pointerup", this.handlePointerUp, {
+            capture: !0
+        }), context.stage.off("pointerleave", this.handlePointerUp, {
+            capture: !0
+        }), context.stage.off("dblclick", this.handleDBLClick, {
+            capture: !0
+        }), application.global.addEventListener("keydown", this.handleKeyDown);
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    addEditLineOrBgOrBounds(graphic, shadowRoot) {
+        let group = shadowRoot.getElementById("emptyBoundsContainer");
+        group || (group = createGroup({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            boundsMode: "empty"
+        }), group.id = "emptyBoundsContainer", shadowRoot.add(group)), group.add(graphic);
+    }
+    removeEditLineOrBgOrBounds(graphic, shadowRoot) {
+        const group = shadowRoot.getElementById("emptyBoundsContainer");
+        group && group.removeChild(graphic);
     }
     onFocus(e, data) {
         this.updateCbs && this.updateCbs.forEach((cb => cb("beforeOnfocus", this))), this.deFocus(!1), 
-        this.focusing = !0;
+        this.focusing = !0, this.editing = !0;
         const target = e.target;
         if (!target || "richtext" !== target.type) return;
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
         const shadowRoot = this.getShadow(target), cache = target.getFrameCache();
-        if (cache) {
-            if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
-                shadowRootIdx: 1,
-                pickable: !1,
-                x: this.deltaX,
-                y: this.deltaY
-            }), !this.editLine) {
-                const line = createLine({
-                    x: 0,
-                    y: 0,
-                    lineWidth: 1,
-                    stroke: "black"
-                });
-                this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
-                const g = createGroup({
-                    x: 0,
-                    y: 0,
-                    width: 0,
-                    height: 0
-                });
-                this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
-            }
-            if (data = data || this.computedCursorPosByEvent(e, cache)) {
-                const {x: x, y1: y1, y2: y2, cursorIndex: cursorIndex} = data;
-                this.startCursorPos = {
-                    x: x,
-                    y: (y1 + y2) / 2
-                }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, 
-                this.setCursorAndTextArea(x, y1, y2, target);
-            } else {
-                const x = 0, y1 = 0, y2 = getRichTextBounds(Object.assign(Object.assign({}, target.attribute), {
-                    textConfig: [ {
-                        text: "a"
-                    } ]
-                })).height();
-                this.startCursorPos = {
-                    x: x,
-                    y: (y1 + y2) / 2
-                }, this.curCursorIdx = -.1, this.selectionStartCursorIdx = -.1, this.setCursorAndTextArea(x, y1, y2, target);
-            }
-            this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.currRt.addUpdateBoundTag();
+        if (!cache) return;
+        const {editOptions: editOptions = {}} = this.currRt.attribute;
+        if (editOptions.stopPropagation && target.addEventListener("*", this.stopPropagation), 
+        this.offsetShadowRoot(target), !this.editLine) {
+            const line = createLine({
+                x: 0,
+                y: 0,
+                lineWidth: 1,
+                stroke: "black"
+            });
+            this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
+            const g = createGroup({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+            this.editBg = g, this.addEditLineOrBgOrBounds(this.editLine, shadowRoot), this.addEditLineOrBgOrBounds(this.editBg, shadowRoot);
         }
+        if (data = data || this.computedCursorPosByEvent(e, cache)) {
+            const {x: x, y1: y1, y2: y2, cursorIndex: cursorIndex} = data;
+            this.startCursorPos = {
+                x: x,
+                y: (y1 + y2) / 2
+            }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, 
+            this.setCursorAndTextArea(x, y1, y2, target);
+        } else {
+            const x = 0, y1 = 0, y2 = getRichTextBounds(Object.assign(Object.assign({}, target.attribute), {
+                textConfig: [ {
+                    text: "a"
+                } ]
+            })).height();
+            this.startCursorPos = {
+                x: x,
+                y: (y1 + y2) / 2
+            }, this.curCursorIdx = -.1, this.selectionStartCursorIdx = -.1, this.setCursorAndTextArea(x, y1, y2, target);
+        }
+        this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.currRt.addUpdateBoundTag();
+    }
+    offsetShadowRoot(rt) {
+        if (!(rt = rt || this.currRt)) return;
+        const shadowRoot = this.getShadow(rt);
+        if (!shadowRoot) return;
+        const cache = rt.getFrameCache();
+        cache && (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
+            shadowRootIdx: 1,
+            pickable: !1,
+            x: this.deltaX,
+            y: this.deltaY
+        }), this.shadowPlaceHolder && this.shadowPlaceHolder.setAttributes({
+            dx: -this.deltaX,
+            dy: -this.deltaY
+        }));
     }
     offsetLineBgAndShadowBounds() {
         const rt = this.currRt, {textBaseline: textBaseline} = rt.attribute;
@@ -360,27 +411,27 @@ export class RichTextEditPlugin {
         });
     }
     deFocus(trulyDeFocus = !1) {
-        const target = this.currRt;
-        if (!target) return;
-        this.updateCbs && this.updateCbs.forEach((cb => cb("beforeDefocus", this, {
+        this.editing = !1, this.updateCbs && this.updateCbs.forEach((cb => cb("beforeDefocus", this, {
             trulyDeFocus: trulyDeFocus
-        }))), trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
+        })));
         const currRt = this.currRt;
-        this.currRt = null, this.editLine && (this.editLine.parent && this.editLine.parent.removeChild(this.editLine), 
-        this.editLine.release(), this.editLine = null, this.editBg.parent && this.editBg.parent.removeChild(this.editBg), 
-        this.editBg.release(), this.editBg = null), trulyDeFocus && (this.shadowBounds && (this.shadowBounds.parent && this.shadowBounds.parent.removeChild(this.shadowBounds), 
+        if (!currRt) return;
+        const {editOptions: editOptions = {}} = currRt.attribute;
+        editOptions.stopPropagation && currRt.removeEventListener("*", this.stopPropagation), 
+        trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), currRt.detachShadow()), 
+        this.currRt = null;
+        const shadowRoot = this.getShadow(currRt);
+        this.editLine && (this.removeEditLineOrBgOrBounds(this.editLine, shadowRoot), this.editLine.release(), 
+        this.editLine = null, this.removeEditLineOrBgOrBounds(this.editBg, shadowRoot), 
+        this.editBg.release(), this.editBg = null), trulyDeFocus && (this.shadowBounds && (this.removeEditLineOrBgOrBounds(this.shadowBounds, shadowRoot), 
         this.shadowBounds.release(), this.shadowBounds = null), this.shadowPlaceHolder && (this.shadowPlaceHolder.parent && this.shadowPlaceHolder.parent.removeChild(this.shadowPlaceHolder), 
-        this.shadowPlaceHolder.release(), this.shadowPlaceHolder = null)), this.focusing = !1;
-        const textConfig = currRt.attribute.textConfig;
-        let lastConfig = textConfig[textConfig.length - 1], cleared = !1;
-        for (;lastConfig && "\n" === lastConfig.text; ) textConfig.pop(), lastConfig = textConfig[textConfig.length - 1], 
-        cleared = !0;
-        cleared && currRt.setAttributes({
-            textConfig: textConfig
-        }), currRt.removeEventListener("pointerleave", this.handleLeave);
+        this.shadowPlaceHolder.release(), this.shadowPlaceHolder = null)), this.focusing = !1, 
+        currRt.removeEventListener("pointerleave", this.handleLeave);
     }
     addAnimateToLine(line) {
-        line.animates && line.animates.forEach((animate => {
+        line.setAttributes({
+            opacity: 1
+        }), line.animates && line.animates.forEach((animate => {
             animate.stop(), animate.release();
         }));
         line.animate({
@@ -418,63 +469,61 @@ export class RichTextEditPlugin {
             x: currCursorData.x,
             y: (currCursorData.y1 + currCursorData.y2) / 2
         }, line0Info = this.getLineByPoint(cache, startCursorPos), line1Info = this.getLineByPoint(cache, endCursorPos);
-        if (line0Info && line1Info) {
-            if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [ endCursorPos, startCursorPos ], 
-            [line1Info, line0Info] = [ line0Info, line1Info ]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
-                x: startCursorPos.x,
+        if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [ endCursorPos, startCursorPos ], 
+        [line1Info, line0Info] = [ line0Info, line1Info ]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
+            x: startCursorPos.x,
+            y: line0Info.top,
+            width: endCursorPos.x - startCursorPos.x,
+            height: line0Info.height,
+            fill: "#336df4",
+            fillOpacity: .2
+        }); else {
+            this.editBg.setAttributes({
+                x: 0,
                 y: line0Info.top,
-                width: endCursorPos.x - startCursorPos.x,
-                height: line0Info.height,
-                fill: "#336df4",
-                fillOpacity: .2
-            }); else {
-                this.editBg.setAttributes({
-                    x: 0,
-                    y: line0Info.top,
-                    width: 0,
-                    height: 0
-                });
-                const startIdx = cache.lines.findIndex((item => item === line0Info)), endIdx = cache.lines.findIndex((item => item === line1Info));
-                let y = 0;
-                for (let i = startIdx; i <= endIdx; i++) {
-                    const line = cache.lines[i];
-                    if (i === startIdx) {
-                        const p = line.paragraphs[line.paragraphs.length - 1];
-                        this.editBg.add(createRect({
-                            x: startCursorPos.x,
-                            y: y,
-                            width: p.left + p.width - startCursorPos.x,
-                            height: line.height,
-                            fill: "#336df4",
-                            fillOpacity: .2
-                        }));
-                    } else if (i === endIdx) {
-                        const p = line.paragraphs[0];
-                        this.editBg.add(createRect({
-                            x: p.left,
-                            y: y,
-                            width: endCursorPos.x - p.left,
-                            height: line.height,
-                            fill: "#336df4",
-                            fillOpacity: .2
-                        }));
-                    } else {
-                        const p0 = line.paragraphs[0], p1 = line.paragraphs[line.paragraphs.length - 1];
-                        this.editBg.add(createRect({
-                            x: p0.left,
-                            y: y,
-                            width: p1.left + p1.width - p0.left,
-                            height: line.height,
-                            fill: "#336df4",
-                            fillOpacity: .2
-                        }));
-                    }
-                    y += line.height;
+                width: 0,
+                height: 0
+            });
+            const startIdx = cache.lines.findIndex((item => item === line0Info)), endIdx = cache.lines.findIndex((item => item === line1Info));
+            let y = 0;
+            for (let i = startIdx; i <= endIdx; i++) {
+                const line = cache.lines[i];
+                if (i === startIdx) {
+                    const p = line.paragraphs[line.paragraphs.length - 1];
+                    this.editBg.add(createRect({
+                        x: startCursorPos.x,
+                        y: y,
+                        width: p.left + p.width - startCursorPos.x,
+                        height: line.height,
+                        fill: "#336df4",
+                        fillOpacity: .2
+                    }));
+                } else if (i === endIdx) {
+                    const p = line.paragraphs[0];
+                    this.editBg.add(createRect({
+                        x: p.left,
+                        y: y,
+                        width: endCursorPos.x - p.left,
+                        height: line.height,
+                        fill: "#336df4",
+                        fillOpacity: .2
+                    }));
+                } else {
+                    const p0 = line.paragraphs[0], p1 = line.paragraphs[line.paragraphs.length - 1];
+                    this.editBg.add(createRect({
+                        x: p0.left,
+                        y: y,
+                        width: p1.left + p1.width - p0.left,
+                        height: line.height,
+                        fill: "#336df4",
+                        fillOpacity: .2
+                    }));
                 }
+                y += line.height;
             }
-            this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), 
-            this.triggerRender(), this.updateCbs.forEach((cb => cb("selection", this)));
         }
+        this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), 
+        this.triggerRender(), this.updateCbs.forEach((cb => cb("selection", this)));
     }
     hideSelection() {
         this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
@@ -484,7 +533,8 @@ export class RichTextEditPlugin {
     getShadow(rt) {
         const sr = rt.shadowRoot || rt.attachShadow();
         return sr.setAttributes({
-            boundsMode: "empty"
+            width: 1,
+            height: 1
         }), sr;
     }
     getLineByPoint(cache, p1) {
@@ -527,7 +577,7 @@ export class RichTextEditPlugin {
         this.pluginService.stage.renderNextFrame();
     }
     computeGlobalDelta(cache) {
-        this.deltaX = 0, this.deltaY = 0;
+        this.deltaX = 0, this.deltaY = 0, 0 === cache.lines.length && this.shadowPlaceHolder && (cache = this.shadowPlaceHolder.getFrameCache());
         const height = cache.height, actualHeight = cache.actualHeight, width = cache.lines.reduce(((w, item) => Math.max(w, item.actualWidth)), 0);
         "center" === cache.globalAlign ? this.deltaX = -width / 2 : "right" === cache.globalAlign && (this.deltaX = -width), 
         "middle" === cache.verticalDirection ? this.deltaY = height / 2 - actualHeight / 2 : "bottom" === cache.verticalDirection && (this.deltaY = height - actualHeight);
@@ -566,7 +616,8 @@ export class RichTextEditPlugin {
             y: y1
         }, out);
         const {left: left, top: top} = this.pluginService.stage.window.getBoundingClientRect();
-        out.x += left, out.y += top, this.offsetLineBgAndShadowBounds(), this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
+        out.x += left, out.y += top, this.offsetLineBgAndShadowBounds(), this.offsetShadowRoot(), 
+        this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
     }
     computedCursorPosByEvent(e, cache) {
         const p1 = this.getEventPosition(e), lineInfo = this.getLineByPoint(cache, p1);