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

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

@@ -185,7 +185,10 @@ class RichTextEditPlugin {
             if (!currRt) return;
             const cache = currRt.getFrameCache();
             if (!cache) return;
-            const {lines: lines} = cache, totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
+            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;
@@ -233,29 +236,32 @@ class RichTextEditPlugin {
         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.currRt.shadowRoot || this.currRt.attachShadow();
-        this.shadowPlaceHolder = (0, graphic_1.createRichText)(Object.assign(Object.assign({}, this.currRt.attribute), {
+        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, 
+        edit_module_1.getDefaultCharacterConfig)(this.currRt.attribute)), {
+            text: placeholder
+        });
+        placeholderColor && (textConfigItem.fill = placeholderColor), placeholderFontFamily && (textConfigItem.fontFamily = placeholderFontFamily), 
+        placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = (0, 
+        graphic_1.createRichText)(Object.assign(Object.assign({}, this.currRt.attribute), {
             x: 0,
             y: 0,
+            pickable: !1,
+            editable: !1,
+            editOptions: null,
             angle: 0,
             _debug_bounds: !1,
-            textConfig: [ {
-                text: placeholder,
-                fill: placeholderColor,
-                fontFamily: placeholderFontFamily,
-                fontSize: placeholderFontSize
-            } ]
+            textConfig: [ textConfigItem ]
         })), shadow.add(this.shadowPlaceHolder);
     }
     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, b = this.currRt.AABBBounds;
-        let h = b.height();
+        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;
+            h = points[1].y - points[0].y, b = (0, graphic_1.getRichTextBounds)(Object.assign({}, this.shadowPlaceHolder.attribute));
         }
         this.shadowBounds = this.shadowBounds || (0, graphic_1.createRect)({}), this.shadowBounds.setAttributes({
             x: 0,
@@ -265,16 +271,15 @@ class RichTextEditPlugin {
             fill: !1,
             stroke: boundsStrokeWhenInput,
             lineWidth: 1,
-            boundsMode: "empty",
             zIndex: -1
         });
-        (this.currRt.shadowRoot || this.currRt.attachShadow()).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
     }
     trySyncPlaceholderToTextConfig() {
         if (!this.currRt) return;
         const {textConfig: textConfig, editOptions: editOptions} = this.currRt.attribute;
         if (textConfig && textConfig.length) return;
-        if (!editOptions || !editOptions.placeholder) return;
+        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) return;
         const {placeholder: placeholder} = editOptions;
         this.currRt.setAttributes({
             textConfig: [ Object.assign({
@@ -288,11 +293,12 @@ class RichTextEditPlugin {
         context.stage.off("dblclick", this.handleDBLClick), application_1.application.global.addEventListener("keydown", this.handleKeyDown);
     }
     onFocus(e, data) {
-        this.deFocus(!1), this.focusing = !0;
+        this.updateCbs && this.updateCbs.forEach((cb => cb("beforeOnfocus", this))), this.deFocus(!1), 
+        this.focusing = !0;
         const target = e.target;
         if (!target || "richtext" !== target.type) return;
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
-        const shadowRoot = target.shadowRoot || target.attachShadow(), cache = target.getFrameCache();
+        const shadowRoot = this.getShadow(target), cache = target.getFrameCache();
         if (cache) {
             if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
                 shadowRootIdx: 1,
@@ -304,16 +310,14 @@ class RichTextEditPlugin {
                     x: 0,
                     y: 0,
                     lineWidth: 1,
-                    stroke: "black",
-                    boundsMode: "empty"
+                    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,
-                    boundsMode: "empty"
+                    height: 0
                 });
                 this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
             }
@@ -357,7 +361,9 @@ class RichTextEditPlugin {
     deFocus(trulyDeFocus = !1) {
         const target = this.currRt;
         if (!target) return;
-        trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
+        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), 
@@ -411,67 +417,75 @@ class RichTextEditPlugin {
             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,
+        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,
                 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
-                    }));
+                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;
                 }
-                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({
             fill: "transparent"
         }));
     }
+    getShadow(rt) {
+        const sr = rt.shadowRoot || rt.attachShadow();
+        return sr.setAttributes({
+            boundsMode: "empty"
+        }), sr;
+    }
     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];