@visactor/vrender 0.22.0-vstory.14 → 0.22.0-vstory.16

package/dist/index.js

@@ -2500,6 +2500,8 @@
             return color.getLuminance2();
           case "lum3":
             return color.getLuminance3();
+          case "wcag":
+            return color.getLuminanceWCAG();
         }
       }
       static parseColorString(value) {
@@ -2601,6 +2603,14 @@
       getLuminance3() {
         return (.299 * this.color.r + .587 * this.color.g + .114 * this.color.b) / 255;
       }
+      getLuminanceWCAG() {
+        const RsRGB = this.color.r / 255,
+          GsRGB = this.color.g / 255,
+          BsRGB = this.color.b / 255;
+        let R, G, B;
+        R = RsRGB <= .03928 ? RsRGB / 12.92 : Math.pow((RsRGB + .055) / 1.055, 2.4), G = GsRGB <= .03928 ? GsRGB / 12.92 : Math.pow((GsRGB + .055) / 1.055, 2.4), B = BsRGB <= .03928 ? BsRGB / 12.92 : Math.pow((BsRGB + .055) / 1.055, 2.4);
+        return .2126 * R + .7152 * G + .0722 * B;
+      }
       clone() {
         return new Color(this.color.toString());
       }
@@ -3914,10 +3924,10 @@
               x = current[5], y = current[6], controlX = current[3], controlY = current[4], this.bezierCurveTo(current[1] + l, current[2] + t, controlX + l, controlY + t, x + l, y + t);
               break;
             case "s":
-              tempX = x + current[3], tempY = y + current[4], controlX = 2 * x - controlX, controlY = 2 * y - controlY, this.bezierCurveTo(controlX + l, controlY + t, x + current[1] + l, y + current[2] + t, tempX + l, tempY + t), controlX = x + current[1], controlY = y + current[2], x = tempX, y = tempY;
+              tempX = x + current[3], tempY = y + current[4], null === previous[0].match(/[CcSs]/) ? (controlX = x, controlY = y) : (controlX = 2 * x - controlX, controlY = 2 * y - controlY), tempControlX = x + current[1], tempControlY = y + current[2], this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t), controlX = tempControlX, controlY = tempControlY, x = tempX, y = tempY;
               break;
             case "S":
-              tempX = current[3], tempY = current[4], controlX = 2 * x - controlX, controlY = 2 * y - controlY, this.bezierCurveTo(controlX + l, controlY + t, current[1] + l, current[2] + t, tempX + l, tempY + t), x = tempX, y = tempY, controlX = current[1], controlY = current[2];
+              tempX = current[3], tempY = current[4], null === previous[0].match(/[CcSs]/) ? (controlX = x, controlY = y) : (controlX = 2 * x - controlX, controlY = 2 * y - controlY), tempControlX = current[1], tempControlY = current[2], this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t), controlX = tempControlX, controlY = tempControlY, x = tempX, y = tempY;
               break;
             case "q":
               tempX = x + current[3], tempY = y + current[4], controlX = x + current[1], controlY = y + current[2], this.quadraticCurveTo(controlX + l, controlY + t, tempX + l, tempY + t), x = tempX, y = tempY;
@@ -4308,6 +4318,7 @@
       keepDirIn3d: !0
     });
     const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+      upgradeAttrs: null,
       editable: !1,
       editOptions: null,
       ascentDescentMode: "actual",
@@ -10144,7 +10155,7 @@
           null != onStart && animate.onStart(onStart), null != onFrame && animate.onFrame(onFrame), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove), animate.interpolateFunc = params.interpolate;
         }
         return this.animates.set(animate.id, animate), animate.onRemove(() => {
-          this.animates.delete(animate.id);
+          animate.stop(), this.animates.delete(animate.id);
         }), animate;
       }
       onAttributeUpdate(context) {
@@ -10348,7 +10359,7 @@
           if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), this.animates && this.animates.size) {
             const timeline = stage.getTimeline();
             this.animates.forEach(a => {
-              a.setTimeline(timeline);
+              a.timeline === defaultTimeline && a.setTimeline(timeline);
             });
           }
           this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
@@ -10452,7 +10463,7 @@
         return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null != shadowRoot ? shadowRoot : application.graphicService.creator.shadowRoot(this), this.addUpdateBoundTag(), this.shadowRoot.setStage(this.stage, this.layer), this.shadowRoot;
       }
       detachShadow() {
-        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot = null);
+        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot.release(!0), this.shadowRoot = null);
       }
       toJson() {
         return {
@@ -10504,7 +10515,7 @@
         });
       }
       release() {
-        this.releaseStatus = "released", application.graphicService.onRelease(this);
+        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
       }
       _emitCustomEvent(type, context) {
         var _a, _b;
@@ -11080,6 +11091,11 @@
       getNoWorkAnimateAttr() {
         return Group.NOWORK_ANIMATE_ATTR;
       }
+      release(all) {
+        all && this.forEachChildren(g => {
+          g.release(all);
+        }), super.release();
+      }
     }
     Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
     function createGroup(attributes) {
@@ -13947,7 +13963,7 @@
         this.width = width, "vertical" === this.direction && (this.widthOrigin = this.width, this.width = this.heightOrigin, this.height = this.widthOrigin);
       }
       drawBackground(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
-        if (!this.character.background || this.character.backgroundOpacity && !(this.character.backgroundOpacity > 0)) return;
+        if ("" === this.text || "\n" === this.text || !this.character.background || this.character.backgroundOpacity && !(this.character.backgroundOpacity > 0)) return;
         let baseline = top + ascent,
           text = this.text,
           left = this.left + deltaLeft;
@@ -13965,19 +13981,11 @@
             }
           }
         }
-        switch (this.character.script) {
-          case "super":
-            baseline -= this.ascent * (1 / 3);
-            break;
-          case "sub":
-            baseline += this.descent / 2;
-        }
-        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
-        const fillStyle = ctx.fillStyle,
-          globalAlpha = ctx.globalAlpha;
-        ctx.fillStyle = this.character.background, void 0 !== this.character.backgroundOpacity && (ctx.globalAlpha = this.character.backgroundOpacity);
         const lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + lineHeight);
-        ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top), ctx.fillStyle = fillStyle, ctx.globalAlpha = globalAlpha;
+        return Object.assign(Object.assign({}, lrtb), {
+          fillStyle: this.character.background,
+          globalAlpha: this.character.backgroundOpacity
+        });
       }
       draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
         let baseline = top + ascent,
@@ -14251,8 +14259,19 @@
             paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
           }
         }
+        let fillStyle = "",
+          globalAlpha = -1,
+          currBgList = [];
+        const bgList = [currBgList];
         this.paragraphs.forEach((paragraph, index) => {
-          paragraph instanceof RichTextIcon || paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+          if (paragraph instanceof RichTextIcon) return;
+          const data = paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+          data && (fillStyle === data.fillStyle && globalAlpha === data.globalAlpha || (currBgList = [], bgList.push(currBgList), fillStyle = data.fillStyle, globalAlpha = data.globalAlpha), currBgList.push(data));
+        }), bgList.forEach(bg => {
+          if (0 === bg.length) return;
+          const data = bg[0],
+            end = bg[bg.length - 1];
+          ctx.fillStyle = data.fillStyle, ctx.globalAlpha = data.globalAlpha, ctx.fillRect(data.left, data.top, end.right - data.left, end.bottom - data.top);
         }), this.paragraphs.forEach((paragraph, index) => {
           if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
             x: x + paragraph._x,
@@ -14490,7 +14509,7 @@
           case "right":
             deltaX = -aabbBounds.width();
         }
-        return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), aabbBounds;
+        return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -14518,48 +14537,53 @@
       }
       combinedStyleToCharacter(config) {
         const {
-          fill: fill,
-          stroke: stroke,
-          fontSize: fontSize,
-          fontFamily: fontFamily,
-          fontStyle: fontStyle,
-          fontWeight: fontWeight,
-          lineWidth: lineWidth,
-          opacity: opacity,
-          fillOpacity: fillOpacity,
-          strokeOpacity: strokeOpacity
-        } = this.attribute;
-        return Object.assign({
-          fill: fill,
-          stroke: stroke,
-          fontSize: fontSize,
-          fontFamily: fontFamily,
-          fontStyle: fontStyle,
-          fontWeight: fontWeight,
-          lineWidth: lineWidth,
-          opacity: opacity,
-          fillOpacity: fillOpacity,
-          strokeOpacity: strokeOpacity
-        }, config);
+            fill: fill,
+            stroke: stroke,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            fontStyle: fontStyle,
+            fontWeight: fontWeight,
+            lineWidth: lineWidth,
+            opacity: opacity,
+            fillOpacity: fillOpacity,
+            lineHeight: lineHeight,
+            strokeOpacity: strokeOpacity,
+            upgradeAttrs: upgradeAttrs
+          } = this.attribute,
+          out = Object.assign({
+            fill: fill,
+            stroke: stroke,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            fontStyle: fontStyle,
+            fontWeight: fontWeight,
+            lineWidth: lineWidth,
+            opacity: opacity,
+            fillOpacity: fillOpacity,
+            strokeOpacity: strokeOpacity
+          }, config);
+        return (null == upgradeAttrs ? void 0 : upgradeAttrs.lineHeight) && (out.lineHeight = lineHeight), out;
       }
       doUpdateFrameCache(tc) {
         var _a;
         const {
-          maxWidth: maxWidth,
-          maxHeight: maxHeight,
-          width: width,
-          height: height,
-          ellipsis: ellipsis,
-          wordBreak: wordBreak,
-          verticalDirection: verticalDirection,
-          textAlign: textAlign,
-          textBaseline: textBaseline,
-          layoutDirection: layoutDirection,
-          singleLine: singleLine,
-          disableAutoWrapLine: disableAutoWrapLine,
-          editable: editable,
-          ascentDescentMode: ascentDescentMode
-        } = this.attribute;
+            maxWidth: maxWidth,
+            maxHeight: maxHeight,
+            width: width,
+            height: height,
+            ellipsis: ellipsis,
+            wordBreak: wordBreak,
+            verticalDirection: verticalDirection,
+            textAlign: textAlign,
+            textBaseline: textBaseline,
+            layoutDirection: layoutDirection,
+            singleLine: singleLine,
+            disableAutoWrapLine: disableAutoWrapLine,
+            editable: editable,
+            ascentDescentMode: ascentDescentMode,
+            upgradeAttrs: upgradeAttrs
+          } = this.attribute,
+          enableMultiBreakLine = upgradeAttrs && upgradeAttrs.multiBreakLine;
         let {
           textConfig: _tc = []
         } = this.attribute;
@@ -14581,7 +14605,10 @@
           const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           if (isNumber$1(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text && richTextConfig.text.includes("\n")) {
             const textParts = richTextConfig.text.split("\n");
-            for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig, ascentDescentMode));
+            for (let j = 0; j < textParts.length; j++) if (0 === j) paragraphs.push(new Paragraph(textParts[j], !1, richTextConfig, ascentDescentMode));else if (textParts[j] || i === textConfig.length - 1) paragraphs.push(new Paragraph(textParts[j], !0, richTextConfig, ascentDescentMode));else {
+              const nextRichTextConfig = this.combinedStyleToCharacter(textConfig[i + 1]);
+              paragraphs.push(new Paragraph(textParts[j], !0, nextRichTextConfig, ascentDescentMode));
+            }
           } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig, ascentDescentMode));
         }
         const maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
@@ -14590,7 +14617,7 @@
           richTextHeightEnable = "number" == typeof height && Number.isFinite(height) && height > 0 && (!maxHeightFinite || height <= maxHeight),
           frame = new Frame(0, 0, (richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0) || 0, (richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
           wrapper = new Wrapper(frame);
-        if (wrapper.newLine = editable, disableAutoWrapLine) {
+        if (wrapper.newLine = enableMultiBreakLine, disableAutoWrapLine) {
           let lineCount = 0,
             skip = !1;
           for (let i = 0; i < paragraphs.length; i++) {
@@ -14606,7 +14633,7 @@
             l.calcOffset(offsetSize, !1);
           });
         }
-        editable && frame.lines.forEach(item => {
+        enableMultiBreakLine && frame.lines.forEach(item => {
           const lastParagraphs = item.paragraphs;
           item.paragraphs = item.paragraphs.filter(p => "" !== p.text), 0 === item.paragraphs.length && lastParagraphs.length && (lastParagraphs[0].text = "\n", item.paragraphs.push(lastParagraphs[0]));
         }), this._frameCache = frame;
@@ -20264,6 +20291,7 @@
         fill = "black",
         stroke = !1,
         fontWeight = "normal",
+        lineHeight: lineHeight,
         fontFamily = "Arial"
       } = attribute;
       let {
@@ -20274,7 +20302,8 @@
         stroke: stroke,
         fontSize: fontSize,
         fontWeight: fontWeight,
-        fontFamily: fontFamily
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
       };
     }
     function findConfigIndexByCursorIdx(textConfig, cursorIndex) {
@@ -20523,15 +20552,15 @@
         }, 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.currRt && !this.currRt.attribute.editable && this.deFocus(!0), this.isEditableRichtext(e) ? (this.handleEnter(), e.target.once("pointerleave", this.handleLeave, {
             capture: !0
-          }), this.tryShowSelection(e, !1));
-        }, this.handleEnter = e => {
+          }), this.tryShowSelection(e, !1)) : this.handleLeave();
+        }, this.handleEnter = () => {
           this.editing = !0, this.pluginService.stage.setCursor("text");
-        }, this.handleLeave = e => {
+        }, this.handleLeave = () => {
           this.editing = !1, this.pluginService.stage.setCursor("default");
         }, this.handlePointerDown = e => {
-          this.editing ? this.onFocus(e) : this.deFocus(!0), this.triggerRender(), this.pointerDown = !0, this.updateCbs.forEach(cb => cb(this.editing ? "onfocus" : "defocus", this));
+          this.editing && this.isEditableRichtext(e) ? this.onFocus(e) : this.deFocus(!0), this.triggerRender(), this.pointerDown = !0, this.updateCbs.forEach(cb => cb(this.editing ? "onfocus" : "defocus", this));
         }, this.handlePointerUp = e => {
           this.pointerDown = !1;
         }, this.handleDBLClick = e => {
@@ -20639,7 +20668,7 @@
           } = 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);
+          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.selectionStartCursorIdx = this.curCursorIdx;
           const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
           this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt), this.hideSelection();
         }
@@ -20732,7 +20761,8 @@
           lineWidth: 1,
           zIndex: -1
         });
-        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds(), this.offsetShadowRoot();
+        const shadow = this.getShadow(this.currRt);
+        this.addEditLineOrBgOrBounds(this.shadowBounds, shadow), this.offsetLineBgAndShadowBounds(), this.offsetShadowRoot();
       }
       trySyncPlaceholderToTextConfig() {
         if (!this.currRt) return;
@@ -20767,8 +20797,22 @@
       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.updateCbs && this.updateCbs.forEach(cb => cb("beforeOnfocus", this)), this.deFocus(!1), this.focusing = !0, this.editing = !0;
         const target = e.target;
         if (!target || "richtext" !== target.type) return;
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
@@ -20792,7 +20836,7 @@
             width: 0,
             height: 0
           });
-          this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
+          this.editBg = g, this.addEditLineOrBgOrBounds(this.editLine, shadowRoot), this.addEditLineOrBgOrBounds(this.editBg, shadowRoot);
         }
         if (data = data || this.computedCursorPosByEvent(e, cache)) {
           const {
@@ -20857,27 +20901,29 @@
       }
       deFocus() {
         let trulyDeFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
-        this.updateCbs && this.updateCbs.forEach(cb => cb("beforeDefocus", this, {
+        this.editing = !1, this.updateCbs && this.updateCbs.forEach(cb => cb("beforeDefocus", this, {
           trulyDeFocus: trulyDeFocus
         }));
-        const target = this.currRt;
-        if (!target) return;
+        const currRt = this.currRt;
+        if (!currRt) return;
         const {
           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), this.editBg.release(), this.editBg = null), trulyDeFocus && (this.shadowBounds && (this.shadowBounds.parent && this.shadowBounds.parent.removeChild(this.shadowBounds), 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;
+        } = 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);
       }
       addAnimateToLine(line) {
-        line.animates && line.animates.forEach(animate => {
+        line.setAttributes({
+          opacity: 1
+        }), line.animates && line.animates.forEach(animate => {
           animate.stop(), animate.release();
         });
         line.animate({
@@ -20986,7 +21032,8 @@
       getShadow(rt) {
         const sr = rt.shadowRoot || rt.attachShadow();
         return sr.setAttributes({
-          boundsMode: "empty"
+          width: 1,
+          height: 1
         }), sr;
       }
       getLineByPoint(cache, p1) {
@@ -21020,7 +21067,10 @@
         return -1;
       }
       isRichtext(e) {
-        return !(!e.target || "richtext" !== e.target.type || !e.target.attribute.editable);
+        return !(!e.target || "richtext" !== e.target.type);
+      }
+      isEditableRichtext(e) {
+        return this.isRichtext(e) && !!e.target.attribute.editable;
       }
       triggerRender() {
         this.pluginService.stage.renderNextFrame();
@@ -21166,7 +21216,7 @@
         target && (this.currRt = target, e ? this._forceFocusByEvent(e) : this._forceFocusByCursorIndex(null != cursorIndex ? cursorIndex : -.1));
       }
       _forceFocusByEvent(e) {
-        this.handleEnter(e), this.handlePointerDown(e), this.handlePointerUp(e);
+        this.handleEnter(), this.handlePointerDown(e), this.handlePointerUp(e);
       }
       _forceFocusByCursorIndex(cursorIndex) {
         const richtext = this.currRt;
@@ -27487,13 +27537,15 @@
         this.canvas = new NodeCanvas(options);
       }
       createWindowByCanvas(params) {
-        const canvas = params.canvas;
+        var _a;
+        const canvas = params.canvas,
+          dpr = null !== (_a = params.dpr) && void 0 !== _a ? _a : 1;
         let width = params.width,
           height = params.height;
-        null != width && null != height && params.canvasControled || (width = canvas.width, height = canvas.height), this.canvas = new NodeCanvas({
+        null != width && null != height && params.canvasControled || (width = canvas.width / dpr, height = canvas.height / dpr), this.canvas = new NodeCanvas({
           width: width,
           height: height,
-          dpr: 1,
+          dpr: dpr,
           nativeCanvas: canvas,
           canvasControled: params.canvasControled
         });
@@ -31233,7 +31285,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.22.0-vstory.14";
+    const version = "0.22.0-vstory.16";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);