@visactor/vrender-core 0.22.0-vstory.8 → 0.22.0

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

@@ -35,14 +35,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());
@@ -85,7 +86,7 @@ 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))));
@@ -100,8 +101,9 @@ class RichTextEditPlugin {
         }, this.handleFocusOut = () => {
             throw new Error("不会走到这里 handleFocusOut");
         }, this.handleMove = e => {
-            this.isRichtext(e) && (this.currRt = e.target, this.handleEnter(e), e.target.once("pointerleave", this.handleLeave), 
-            this.tryShowSelection(e, !1));
+            this.isRichtext(e) && (this.currRt = e.target, this.handleEnter(e), e.target.once("pointerleave", this.handleLeave, {
+                capture: !0
+            }), this.tryShowSelection(e, !1));
         }, this.handleEnter = e => {
             this.editing = !0, this.pluginService.stage.setCursor("text");
         }, this.handleLeave = e => {
@@ -145,10 +147,17 @@ class RichTextEditPlugin {
         idx > -1 && cbs.splice(idx, 1);
     }
     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), context.stage.on("dblclick", this.handleDBLClick), 
-        application_1.application.global.addEventListener("keydown", this.handleKeyDown), 
+        this.pluginService = context, this.editModule = new edit_module_1.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_1.application.global.addEventListener("keydown", this.handleKeyDown), 
         this.editModule.onInput(this.handleInput), this.editModule.onChange(this.handleChange), 
         this.editModule.onFocusOut(this.handleFocusOut);
     }
@@ -179,21 +188,21 @@ 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_1.application.global.isMacOS() && e.metaKey && "a" === e.key || !application_1.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_1.application.global.isMacOS() && e.metaKey && "a" === e.key || !application_1.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;
@@ -233,7 +242,7 @@ 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({}, (0, 
@@ -245,41 +254,44 @@ class RichTextEditPlugin {
         graphic_1.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 : (0, graphic_1.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 = (0, graphic_1.getRichTextBounds)(Object.assign({}, this.shadowPlaceHolder.attribute));
-        }
+        const b = this.getRichTextAABBBounds(this.currRt), height = b.height(), width = b.width();
         this.shadowBounds = this.shadowBounds || (0, graphic_1.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();
+        this.getShadow(this.currRt).add(this.shadowBounds), 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({
@@ -288,9 +300,20 @@ 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_1.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_1.application.global.addEventListener("keydown", this.handleKeyDown);
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
     }
     onFocus(e, data) {
         this.updateCbs && this.updateCbs.forEach((cb => cb("beforeOnfocus", this))), this.deFocus(!1), 
@@ -299,48 +322,59 @@ class RichTextEditPlugin {
         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 = (0, graphic_1.createLine)({
-                    x: 0,
-                    y: 0,
-                    lineWidth: 1,
-                    stroke: "black"
-                });
-                this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
-                const g = (0, graphic_1.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 = (0, graphic_1.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 = (0, graphic_1.createLine)({
+                x: 0,
+                y: 0,
+                lineWidth: 1,
+                stroke: "black"
+            });
+            this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
+            const g = (0, graphic_1.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 = (0, graphic_1.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;
@@ -359,11 +393,14 @@ class RichTextEditPlugin {
         });
     }
     deFocus(trulyDeFocus = !1) {
-        const target = this.currRt;
-        if (!target) return;
         this.updateCbs && this.updateCbs.forEach((cb => cb("beforeDefocus", this, {
             trulyDeFocus: trulyDeFocus
-        }))), trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
+        })));
+        const target = this.currRt;
+        if (!target) return;
+        const {editOptions: editOptions = {}} = target.attribute;
+        editOptions.stopPropagation && target.removeEventListener("*", this.stopPropagation), 
+        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), 
@@ -417,63 +454,61 @@ 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((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;
+                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, 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({
@@ -523,7 +558,7 @@ 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);
@@ -562,7 +597,8 @@ 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);