@visactor/vrender-core 0.21.2-vstory.3 → 0.21.2

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

@@ -4,125 +4,76 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.RichTextEditPlugin = exports.FORMAT_ELEMENT_COMMAND = exports.FORMAT_TEXT_COMMAND = void 0;
 
-const vutils_1 = require("@visactor/vutils"), generator_1 = require("../../common/generator"), graphic_1 = require("../../graphic"), animate_1 = require("../../animate"), edit_module_1 = require("./edit-module"), application_1 = require("../../application");
+const vutils_1 = require("@visactor/vutils"), generator_1 = require("../../common/generator"), graphic_1 = require("../../graphic"), edit_module_1 = require("./edit-module");
 
 class Selection {
-    constructor(selectionStartCursorIdx, curCursorIdx, rt) {
+    constructor(cacheSelectionStartCursorIdx, cacheCurCursorIdx, selectionStartCursorIdx, curCursorIdx, rt) {
         this.curCursorIdx = curCursorIdx, this.selectionStartCursorIdx = selectionStartCursorIdx, 
+        this.cacheCurCursorIdx = cacheCurCursorIdx, this.cacheSelectionStartCursorIdx = cacheSelectionStartCursorIdx, 
         this.rt = rt;
     }
-    isEmpty() {
-        return this.selectionStartCursorIdx === this.curCursorIdx;
-    }
     hasFormat(key) {
         return null != this.getFormat(key);
     }
-    _getFormat(key, cursorIdx) {
-        var _a;
-        if (!this.rt) return null;
-        const idx = Math.round(cursorIdx), config = this.rt.attribute.textConfig;
-        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];
+        if (!this.rt) return null;
+        const config = this.rt.attribute.textConfig, val = config[this.selectionStartCursorIdx + 1][key];
+        if (null == val) return null;
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+            if (val !== config[i][key]) return null;
+        }
+        return val;
     }
     getAllFormat(key) {
-        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) ];
-        for (let i = minCursorIdx; i < maxCursorIdx; i++) {
-            const val = this._getFormat(key, i);
-            val && valSet.add(val);
+        if (!this.rt) return [];
+        const config = this.rt.attribute.textConfig, val = config[this.selectionStartCursorIdx + 1][key], set = new Set;
+        set.add(val);
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+            const item = config[i];
+            set.add(item[key]);
         }
-        return Array.from(valSet.values());
+        return Array.from(set.values());
     }
 }
 
 exports.FORMAT_TEXT_COMMAND = "FORMAT_TEXT_COMMAND", exports.FORMAT_ELEMENT_COMMAND = "FORMAT_ELEMENT_COMMAND";
 
 class RichTextEditPlugin {
-    static splitText(text) {
-        return Array.from(text);
-    }
-    static tryUpdateRichtext(richtext) {
-        if (!richtext.getFrameCache().lines.every((line => line.paragraphs.every((item => !(item.text && (0, 
-        vutils_1.isString)(item.text) && RichTextEditPlugin.splitText(item.text).length > 1)))))) {
-            const tc = [];
-            richtext.attribute.textConfig.forEach((item => {
-                const textList = RichTextEditPlugin.splitText(item.text.toString());
-                if ((0, vutils_1.isString)(item.text) && textList.length > 1) for (let i = 0; i < textList.length; i++) {
-                    const t = textList[i];
-                    tc.push(Object.assign(Object.assign({}, item), {
-                        text: t
-                    }));
-                } else tc.push(item);
-            })), richtext.setAttributes({
-                textConfig: tc
-            }), richtext.doUpdateFrameCache(tc);
-        }
-    }
-    static CreateSelection(rt) {
-        if (!rt) return null;
-        const {textConfig: textConfig = []} = rt.attribute;
-        return new Selection(0, textConfig.length - 1, rt);
-    }
     constructor() {
         this.name = "RichTextEditPlugin", this.activeEvent = "onRegister", this._uid = generator_1.Generator.GenAutoIncrementId(), 
-        this.key = this.name + this._uid, this.editing = !1, this.pointerDown = !1, this.handleKeyDown = e => {
-            if (!this.currRt || !this.editing) return;
-            const cache = this.currRt.getFrameCache();
-            if (!cache) return;
-            let x = 0, y = 0;
-            "ArrowUp" === e.key ? y = -1 : "ArrowDown" === e.key ? y = 1 : "ArrowLeft" === e.key ? x = -1 : "ArrowRight" === e.key && (x = 1);
-            const {lineInfo: lineInfo, columnInfo: columnInfo} = this.getColumnByIndex(cache, Math.round(this.curCursorIdx));
-            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;
-                const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
-                this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt), this.hideSelection();
-            }
-            if (y) {
-                if (y > 0 && lineInfo === cache.lines[cache.lines.length - 1]) return;
-                if (y < 0 && lineInfo === cache.lines[0]) return;
-                const lineIdx = cache.lines.findIndex((item => item === lineInfo)) + y;
-                if (lineIdx < 0 || lineIdx >= cache.lines.length) return;
-                const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt), posX = pos.x;
-                let posY = (pos.y1 + pos.y2) / 2;
-                posY += y * lineInfo.height;
-                const nextLineInfo = cache.lines[lineIdx], {columnInfo: columnInfo, delta: delta} = this.getColumnAndIndexByLinePoint(nextLineInfo, {
-                    x: posX,
-                    y: posY
-                });
-                if (!columnInfo) return;
-                const cursorIdx = this.getColumnIndex(cache, columnInfo) + delta, data = this.computedCursorPosByCursorIdx(cursorIdx, this.currRt);
-                this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx, this.setCursorAndTextArea(data.x, data.y1, data.y2, this.currRt);
-            }
-        }, this.handleInput = (text, isComposing, cursorIdx, rt) => {
-            this.hideSelection(), this.updateCbs.forEach((cb => cb("input", this)));
-        }, this.handleChange = (text, isComposing, cursorIdx, rt) => {
-            this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx;
-            const p = this.computedCursorPosByCursorIdx(cursorIdx, rt);
-            this.setCursorAndTextArea(p.x, p.y1, p.y2, rt), this.hideSelection(), this.updateCbs.forEach((cb => cb("change", this)));
+        this.key = this.name + this._uid, this.editing = !1, this.pointerDown = !1, this.handleInput = (text, isComposing, cursorIdx, rt, orient) => {
+            const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+            this.hideSelection(), this.setCursor(p.x, p.y1, p.y2), this.updateCbs.forEach((cb => cb("input", this)));
+        }, this.handleChange = (text, isComposing, cursorIdx, rt, orient) => {
+            const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+            this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx, this.setCursorAndTextArea(p.x, p.y1, p.y2, rt), 
+            this.hideSelection(), this.updateCbs.forEach((cb => cb("change", this)));
         }, this.handleMove = e => {
             this.isRichtext(e) && (this.currRt = e.target, this.handleEnter(e), e.target.once("pointerleave", this.handleLeave), 
-            this.tryShowSelection(e));
-        }, this.handleEnter = e => {
-            this.editing = !0, this.pluginService.stage.setCursor("text");
-        }, this.handleLeave = e => {
-            this.editing = !1, this.pluginService.stage.setCursor("default");
+            this.showSelection(e));
         }, this.handlePointerDown = e => {
-            this.editing ? this.onFocus(e) : this.deFocus(e), this.triggerRender(), this.pointerDown = !0, 
+            this.editing ? this.onFocus(e) : this.deFocus(e), this.applyUpdate(), this.pointerDown = !0, 
             this.updateCbs.forEach((cb => cb(this.editing ? "onfocus" : "defocus", this)));
         }, this.handlePointerUp = e => {
             this.pointerDown = !1;
+        }, this.handleEnter = e => {
+            this.editing = !0, this.pluginService.stage.setCursor("text");
+        }, this.handleLeave = e => {
+            this.editing = !1, this.pluginService.stage.setCursor("default");
         }, this.commandCbs = new Map, this.commandCbs.set(exports.FORMAT_TEXT_COMMAND, [ this.formatTextCommandCb ]), 
-        this.updateCbs = [], this.timeline = new animate_1.DefaultTimeline, this.ticker = new animate_1.DefaultTicker([ this.timeline ]), 
-        this.deltaX = 0, this.deltaY = 0;
+        this.updateCbs = [];
+    }
+    getSelection() {
+        return this.selectionStartCursorIdx && this.curCursorIdx && this.selectionStartCursorIdx !== this.curCursorIdx && this.currRt ? new Selection(this.selectionStartCursorIdx, this.curCursorIdx, (0, 
+        edit_module_1.findCursorIndexIgnoreLinebreak)(this.currRt.attribute.textConfig, this.selectionStartCursorIdx), (0, 
+        edit_module_1.findCursorIndexIgnoreLinebreak)(this.currRt.attribute.textConfig, this.curCursorIdx), this.currRt) : null;
     }
     formatTextCommandCb(payload, p) {
         const rt = p.currRt;
         if (!rt) return;
         const selectionData = p.getSelection();
         if (!selectionData) return;
-        const {selectionStartCursorIdx: selectionStartCursorIdx, curCursorIdx: curCursorIdx} = selectionData, minCursorIdx = Math.min(selectionStartCursorIdx, curCursorIdx), maxCursorIdx = Math.max(selectionStartCursorIdx, curCursorIdx), config = rt.attribute.textConfig.slice(minCursorIdx + 1, maxCursorIdx + 1);
+        const {selectionStartCursorIdx: selectionStartCursorIdx, curCursorIdx: curCursorIdx} = selectionData, config = rt.attribute.textConfig.slice(selectionStartCursorIdx + 1, curCursorIdx + 1);
         "bold" === payload ? config.forEach((item => item.fontWeight = "bold")) : "italic" === payload ? config.forEach((item => item.fontStyle = "italic")) : "underline" === payload ? config.forEach((item => item.underline = !0)) : "lineThrough" === payload ? config.forEach((item => item.lineThrough = !0)) : (0, 
         vutils_1.isObject)(payload) && config.forEach((item => (0, vutils_1.merge)(item, payload))), 
         rt.setAttributes(rt.attribute);
@@ -140,32 +91,125 @@ class RichTextEditPlugin {
     activate(context) {
         this.pluginService = context, this.editModule = new edit_module_1.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), application_1.application.global.addEventListener("keydown", this.handleKeyDown), 
-        this.editModule.onInput(this.handleInput), this.editModule.onChange(this.handleChange);
+        context.stage.on("pointerleave", this.handlePointerUp), this.editModule.onInput(this.handleInput), 
+        this.editModule.onChange(this.handleChange);
     }
-    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), 
-        application_1.application.global.addEventListener("keydown", this.handleKeyDown);
+    showSelection(e) {
+        const cache = e.target.getFrameCache();
+        if (cache && this.editBg && this.pointerDown) {
+            let p0 = this.lastPoint, p1 = this.getEventPosition(e), line1Info = this.getLineByPoint(cache, p1);
+            const column1 = this.getColumnByLinePoint(line1Info, p1), y1 = line1Info.top, y2 = line1Info.top + line1Info.height;
+            let x = column1.left + column1.width, cursorIndex = this.getColumnIndex(cache, column1);
+            p1.x < column1.left + column1.width / 2 && (x = column1.left, cursorIndex -= 1), 
+            p1.x = x, p1.y = (y1 + y2) / 2;
+            let line0Info = this.getLineByPoint(cache, p0);
+            if ((p0.y > p1.y || p0.y === p1.y && p0.x > p1.x) && ([p0, p1] = [ p1, p0 ], [line1Info, line0Info] = [ line0Info, line1Info ]), 
+            this.editBg.removeAllChild(), line0Info === line1Info) {
+                const column0 = this.getColumnByLinePoint(line0Info, p0);
+                this.editBg.setAttributes({
+                    x: p0.x,
+                    y: line0Info.top,
+                    width: p1.x - p0.x,
+                    height: column0.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((0, graphic_1.createRect)({
+                            x: p0.x,
+                            y: y,
+                            width: p.left + p.width - p0.x,
+                            height: line.height,
+                            fill: "#336df4",
+                            fillOpacity: .2
+                        }));
+                    } else if (i === endIdx) {
+                        const p = line.paragraphs[0];
+                        this.editBg.add((0, graphic_1.createRect)({
+                            x: p.left,
+                            y: y,
+                            width: p1.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((0, graphic_1.createRect)({
+                            x: p0.left,
+                            y: y,
+                            width: p1.left + p1.width - p0.left,
+                            height: line.height,
+                            fill: "#336df4",
+                            fillOpacity: .2
+                        }));
+                    }
+                    y += line.height;
+                }
+            }
+            this.curCursorIdx = cursorIndex, this.setCursorAndTextArea(x, y1 + 2, y2 - 2, e.target), 
+            this.applyUpdate(), this.updateCbs.forEach((cb => cb("selection", this)));
+        }
+    }
+    hideSelection() {
+        this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
+            fill: "transparent"
+        }));
+    }
+    isRichtext(e) {
+        return !(!e.target || "richtext" !== e.target.type || !e.target.attribute.editable);
+    }
+    getEventPosition(e) {
+        const p = this.pluginService.stage.eventPointTransform(e), p1 = {
+            x: 0,
+            y: 0
+        };
+        return e.target.globalTransMatrix.transformPoint(p, p1), p1;
+    }
+    getLineByPoint(cache, p1) {
+        let lineInfo = cache.lines[0];
+        for (let i = 0; i < cache.lines.length && !(lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y); i++) lineInfo = cache.lines[i + 1];
+        return lineInfo;
+    }
+    getColumnByLinePoint(lineInfo, p1) {
+        let columnInfo = lineInfo.paragraphs[0];
+        for (let i = 0; i < lineInfo.paragraphs.length && !(columnInfo.left <= p1.x && columnInfo.left + columnInfo.width >= p1.x); i++) columnInfo = lineInfo.paragraphs[i];
+        return columnInfo;
     }
     onFocus(e) {
-        this.deFocus(e), this.currRt = e.target;
+        this.deFocus(e);
         const target = e.target;
-        RichTextEditPlugin.tryUpdateRichtext(target);
-        const shadowRoot = target.attachShadow(), cache = target.getFrameCache();
+        this.tryUpdateRichtext(target);
+        const shadowRoot = target.attachShadow();
+        shadowRoot.setAttributes({
+            shadowRootIdx: -1
+        });
+        const cache = target.getFrameCache();
         if (!cache) return;
-        if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
-            shadowRootIdx: -1,
-            x: this.deltaX,
-            y: this.deltaY
-        }), !this.editLine) {
+        if (!this.editLine) {
             const line = (0, graphic_1.createLine)({
                 x: 0,
                 y: 0,
                 lineWidth: 1,
                 stroke: "black"
             });
-            this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
+            line.animate().to({
+                opacity: 1
+            }, 10, "linear").wait(700).to({
+                opacity: 0
+            }, 10, "linear").wait(700).loop(1 / 0), this.editLine = line;
             const g = (0, graphic_1.createGroup)({
                 x: 0,
                 y: 0,
@@ -174,125 +218,28 @@ class RichTextEditPlugin {
             });
             this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
         }
-        const data = this.computedCursorPosByEvent(e, cache);
-        if (data) {
-            const {x: x, y1: y1, y2: y2, cursorIndex: cursorIndex} = data;
-            this.startCursorPos = {
+        const p1 = this.getEventPosition(e), lineInfo = this.getLineByPoint(cache, p1);
+        if (lineInfo) {
+            const columnInfo = this.getColumnByLinePoint(lineInfo, p1);
+            if (!columnInfo) return;
+            let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height, x = columnInfo.left + columnInfo.width;
+            y1 += 2, y2 -= 2;
+            let cursorIndex = this.getColumnIndex(cache, columnInfo);
+            p1.x < columnInfo.left + columnInfo.width / 2 && (x = columnInfo.left, cursorIndex -= 1), 
+            this.lastPoint = {
                 x: x,
                 y: (y1 + y2) / 2
             }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, 
             this.setCursorAndTextArea(x, y1, y2, target);
         }
     }
-    deFocus(e) {
-        const target = this.currRt;
-        target && (target.detachShadow(), this.currRt = null, this.editLine && (this.editLine.parent.removeChild(this.editLine), 
-        this.editLine.release(), this.editLine = null, this.editBg.parent.removeChild(this.editBg), 
-        this.editBg.release(), this.editBg = null));
-    }
-    addAnimateToLine(line) {
-        line.animates && line.animates.forEach((animate => {
-            animate.stop(), animate.release();
-        }));
-        const animate = line.animate();
-        animate.setTimeline(this.timeline), animate.to({
-            opacity: 1
-        }, 10, "linear").wait(700).to({
-            opacity: 0
-        }, 10, "linear").wait(700).loop(1 / 0);
-    }
-    tryShowSelection(e) {
-        const cache = e.target.getFrameCache();
-        if (!(cache && this.editBg && this.pointerDown && this.startCursorPos)) return;
-        let startCursorPos = this.startCursorPos;
-        const currCursorData = this.computedCursorPosByEvent(e, cache);
-        if (!currCursorData) return;
-        this.curCursorIdx = currCursorData.cursorIndex;
-        let endCursorPos = {
-            x: currCursorData.x,
-            y: (currCursorData.y1 + currCursorData.y2) / 2
-        }, line0Info = this.getLineByPoint(cache, startCursorPos), line1Info = this.getLineByPoint(cache, endCursorPos);
-        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: 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((0, graphic_1.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((0, graphic_1.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((0, graphic_1.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 + 2, currCursorData.y2 - 2, e.target), 
-        this.triggerRender(), this.updateCbs.forEach((cb => cb("selection", this)));
-    }
-    hideSelection() {
-        this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
-            fill: "transparent"
-        }));
-    }
-    getLineByPoint(cache, p1) {
-        let lineInfo = cache.lines[0];
-        for (let i = 0; i < cache.lines.length && !(lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y); i++) lineInfo = cache.lines[i + 1];
-        return lineInfo;
-    }
-    getColumnAndIndexByLinePoint(lineInfo, p1) {
-        let columnInfo = lineInfo.paragraphs[0], delta = 0;
-        if (lineInfo.paragraphs.length) {
-            const start = lineInfo.paragraphs[0], end = lineInfo.paragraphs[lineInfo.paragraphs.length - 1];
-            p1.x <= start.left ? (delta = -.1, columnInfo = start) : p1.x >= end.left + end.width && (delta = .1, 
-            columnInfo = end);
-        }
-        if (!delta) for (let i = 0; i < lineInfo.paragraphs.length; i++) if (columnInfo = lineInfo.paragraphs[i], 
-        columnInfo.left <= p1.x && columnInfo.left + columnInfo.width >= p1.x) {
-            delta = p1.x > columnInfo.left + columnInfo.width / 2 ? .1 : -.1;
-            break;
-        }
-        return {
-            columnInfo: columnInfo,
-            delta: delta
+    getPointByColumnIdx(idx, rt, orient) {
+        const cache = rt.getFrameCache(), {lineInfo: lineInfo, columnInfo: columnInfo} = this.getColumnByIndex(cache, idx);
+        let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
+        return y1 += 2, y2 -= 2, {
+            x: columnInfo.left + ("left" === orient ? 0 : columnInfo.width),
+            y1: y1,
+            y2: y2
         };
     }
     getColumnIndex(cache, cInfo) {
@@ -303,25 +250,19 @@ class RichTextEditPlugin {
         }
         return -1;
     }
-    isRichtext(e) {
-        return !(!e.target || "richtext" !== e.target.type || !e.target.attribute.editable);
-    }
-    triggerRender() {
-        this.pluginService.stage.renderNextFrame();
-    }
-    computeGlobalDelta(cache) {
-        this.deltaX = 0, this.deltaY = 0;
-        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);
-    }
-    getEventPosition(e) {
-        const p = this.pluginService.stage.eventPointTransform(e), p1 = {
-            x: 0,
-            y: 0
-        };
-        return e.target.globalTransMatrix.transformPoint(p, p1), p1.x -= this.deltaX, p1.y -= this.deltaY, 
-        p1;
+    getColumnByIndex(cache, index) {
+        let inputIndex = -1;
+        for (let i = 0; i < cache.lines.length; i++) {
+            const lineInfo = cache.lines[i];
+            for (let j = 0; j < lineInfo.paragraphs.length; j++) {
+                const columnInfo = lineInfo.paragraphs[j];
+                if (inputIndex++, inputIndex === index) return {
+                    lineInfo: lineInfo,
+                    columnInfo: columnInfo
+                };
+            }
+        }
+        return null;
     }
     setCursorAndTextArea(x, y1, y2, rt) {
         this.editLine.setAttributes({
@@ -332,7 +273,7 @@ class RichTextEditPlugin {
                 x: x,
                 y: y2
             } ]
-        }), this.addAnimateToLine(this.editLine);
+        });
         const out = {
             x: 0,
             y: 0
@@ -344,57 +285,53 @@ class RichTextEditPlugin {
         const {left: left, top: top} = this.pluginService.stage.window.getBoundingClientRect();
         out.x += left, out.y += top, 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);
-        if (!lineInfo) return;
-        const {columnInfo: columnInfo, delta: delta} = this.getColumnAndIndexByLinePoint(lineInfo, p1);
-        if (!columnInfo) return;
-        let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
-        y1 += 2, y2 -= 2;
-        let cursorIndex = this.getColumnIndex(cache, columnInfo);
-        cursorIndex += delta;
-        return {
-            x: columnInfo.left + (delta > 0 ? columnInfo.width : 0),
-            y1: y1,
-            y2: y2,
-            cursorIndex: cursorIndex
-        };
+    setCursor(x, y1, y2) {
+        this.editLine.setAttributes({
+            points: [ {
+                x: x,
+                y: y1
+            }, {
+                x: x,
+                y: y2
+            } ]
+        });
     }
-    computedCursorPosByCursorIdx(cursorIdx, rt) {
-        var _a, _b, _c;
-        const idx = Math.round(cursorIdx), leftRight = cursorIdx - idx, cache = rt.getFrameCache(), column = this.getColumnByIndex(cache, idx), height = null !== (_a = rt.attribute.fontSize) && void 0 !== _a ? _a : null === (_c = null === (_b = rt.attribute.textConfig) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c.fontSize;
-        if (!column) return {
-            x: 0,
-            y1: 0,
-            y2: height
-        };
-        const {lineInfo: lineInfo, columnInfo: columnInfo} = column;
-        let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
-        return y1 += 2, y2 -= 2, {
-            x: columnInfo.left + (leftRight < 0 ? 0 : columnInfo.width),
-            y1: y1,
-            y2: y2
-        };
+    applyUpdate() {
+        this.pluginService.stage.renderNextFrame();
     }
-    getColumnByIndex(cache, index) {
-        for (let i = 0, inputIndex = 0; i < cache.lines.length; i++) {
-            const lineInfo = cache.lines[i];
-            for (let j = 0; j < lineInfo.paragraphs.length; j++) {
-                const columnInfo = lineInfo.paragraphs[j];
-                if (inputIndex === index) return {
-                    lineInfo: lineInfo,
-                    columnInfo: columnInfo
-                };
-                inputIndex++;
-            }
+    deFocus(e) {
+        const target = this.currRt;
+        target && (target.detachShadow(), this.currRt = null, this.editLine && (this.editLine.parent.removeChild(this.editLine), 
+        this.editLine.release(), this.editLine = null, this.editBg.parent.removeChild(this.editBg), 
+        this.editBg.release(), this.editBg = null));
+    }
+    splitText(text) {
+        return Array.from(text);
+    }
+    tryUpdateRichtext(richtext) {
+        if (!richtext.getFrameCache().lines.every((line => line.paragraphs.every((item => !(item.text && (0, 
+        vutils_1.isString)(item.text) && this.splitText(item.text).length > 1)))))) {
+            const tc = [];
+            richtext.attribute.textConfig.forEach((item => {
+                const textList = this.splitText(item.text.toString());
+                if ((0, vutils_1.isString)(item.text) && textList.length > 1) for (let i = 0; i < textList.length; i++) {
+                    const t = textList[i];
+                    tc.push(Object.assign(Object.assign({}, item), {
+                        text: t
+                    }));
+                } else tc.push(item);
+            })), richtext.setAttributes({
+                textConfig: tc
+            }), richtext.doUpdateFrameCache(tc);
         }
-        return null;
     }
-    release() {
-        this.deactivate(this.pluginService), this.editModule.release();
+    onSelect() {}
+    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);
     }
-    getSelection(defaultAll = !1) {
-        return this.currRt ? null != this.selectionStartCursorIdx && null != this.curCursorIdx ? new Selection(this.selectionStartCursorIdx, this.curCursorIdx, this.currRt) : defaultAll ? RichTextEditPlugin.CreateSelection(this.currRt) : null : null;
+    release() {
+        this.editModule.release();
     }
 }