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

package/dist/index.js

@@ -437,12 +437,15 @@
               serviceIdentifier: injectIdentifier,
               constructorArgsMetadata: constructorArgsMetadata
             },
-            request = {
+            bindings = (this._bindingDictionary.get(injectIdentifier) || []).filter(b => b.constraint(target));
+          if (bindings.length) {
+            const request = {
               injectIdentifier: injectIdentifier,
               metadata: constructorArgsMetadata,
-              bindings: this._bindingDictionary.get(injectIdentifier).filter(b => b.constraint(target))
+              bindings: bindings
             };
-          arr.push(request);
+            arr.push(request);
+          }
         }
         return arr;
       }
@@ -4152,6 +4155,7 @@
       texturePadding: 2,
       backgroundMode: "no-repeat",
       backgroundFit: !0,
+      backgroundKeepAspectRatio: !1,
       backgroundClip: !0,
       backgroundScale: 1,
       backgroundOffsetX: 0,
@@ -4790,6 +4794,9 @@
       }
       compatibleMetrics(metrics, options) {
         if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
+          metrics = {
+            width: metrics.width
+          };
           const {
             ascent: ascent,
             descent: descent
@@ -4797,6 +4804,13 @@
           metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
         }
         if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+          metrics = {
+            width: metrics.width,
+            actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
+            actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
+            fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+            fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
+          };
           const {
             left: left,
             right: right
@@ -14313,6 +14327,12 @@
       }
     }
 
+    let supportIntl = !1;
+    try {
+      supportIntl = Intl && "function" == typeof Intl.Segmenter;
+    } catch (e) {
+      supportIntl = !1;
+    }
     const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", "fontFamily", "fontStyle", "fontWeight", "lineWidth", "opacity", "fillOpacity", "strokeOpacity", ...GRAPHIC_UPDATE_TAG_KEY];
     class RichText extends Graphic {
       constructor(params) {
@@ -14402,6 +14422,16 @@
         return cache.every(item => item.isComposing || !(item.text && isString$1(item.text) && RichText.splitText(item.text).length > 1));
       }
       static splitText(text) {
+        if (supportIntl) {
+          const segmenter = new Intl.Segmenter(void 0, {
+              granularity: "grapheme"
+            }),
+            segments = [];
+          for (const {
+            segment: segment
+          } of segmenter.segment(text)) segments.push(segment);
+          return segments;
+        }
         return Array.from(text);
       }
       static TransformTextConfig2SingleCharacter(textConfig) {
@@ -14417,14 +14447,14 @@
         }), tc;
       }
       updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const {
           width = richtextTheme.width,
           height = richtextTheme.height,
           maxWidth = richtextTheme.maxWidth,
           maxHeight = richtextTheme.maxHeight,
           textAlign = richtextTheme.textAlign,
-          textBaseline = richtextTheme.textBaseline,
+          verticalDirection = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : richtextTheme.verticalDirection,
           editOptions: editOptions
         } = attribute;
         if (width > 0 && height > 0) aabbBounds.set(0, 0, width, height);else {
@@ -14437,9 +14467,9 @@
             contentHeight = height || actualHeight || 0;
           contentHeight = "number" == typeof maxHeight && contentHeight > maxHeight ? maxHeight : contentHeight || 0, contentWidth = "number" == typeof maxWidth && contentWidth > maxWidth ? maxWidth : contentWidth || 0, aabbBounds.set(0, 0, contentWidth, contentHeight);
         }
-        editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !(null === (_a = attribute.textConfig) || void 0 === _a ? void 0 : _a.length) && (aabbBounds.y2 = aabbBounds.y1 + (null !== (_b = attribute.fontSize) && void 0 !== _b ? _b : 12), aabbBounds.x2 = aabbBounds.x1 + 2);
+        editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !(null === (_c = attribute.textConfig) || void 0 === _c ? void 0 : _c.length) && (aabbBounds.y2 = aabbBounds.y1 + (null !== (_d = attribute.fontSize) && void 0 !== _d ? _d : 12), aabbBounds.x2 = aabbBounds.x1 + 2);
         let deltaY = 0;
-        switch (textBaseline) {
+        switch (verticalDirection) {
           case "top":
             deltaY = 0;
             break;
@@ -15443,6 +15473,7 @@
           opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
           backgroundOffsetY = graphicAttribute.backgroundOffsetY,
@@ -15464,6 +15495,7 @@
           context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
             backgroundOffsetY: backgroundOffsetY
@@ -15474,6 +15506,7 @@
         const {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale = 1,
             backgroundOffsetX = 0,
             backgroundOffsetY = 0
@@ -15483,7 +15516,12 @@
         let w = targetW,
           h = targetH;
         if ("no-repeat" === backgroundMode) {
-          if (backgroundFit) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
+          if (backgroundFit) {
+            if (backgroundKeepAspectRatio) {
+              const maxScale = Math.max(targetW / data.width, targetH / data.height);
+              context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, data.width * maxScale * backgroundScale, data.height * maxScale * backgroundScale);
+            } else context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+          } else {
             const resW = data.width * backgroundScale,
               resH = data.height * backgroundScale;
             context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, resW, resH);
@@ -15789,6 +15827,7 @@
           background: background,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
           backgroundOffsetY = graphicAttribute.backgroundOffsetY
@@ -15801,6 +15840,7 @@
           this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
             backgroundOffsetY: backgroundOffsetY
@@ -17131,7 +17171,8 @@
         var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
           backgroundMode = graphicAttribute.backgroundMode,
-          backgroundFit = graphicAttribute.backgroundFit
+          backgroundFit = graphicAttribute.backgroundFit,
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio
         } = graphic.attribute;
         let matrix,
           {
@@ -17170,7 +17211,8 @@
           if ("success" !== res.state || !res.data) return void restore();
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
-            backgroundFit: backgroundFit
+            backgroundFit: backgroundFit,
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           const {
@@ -18305,7 +18347,7 @@
       };
     let DefaultDrawContribution = class {
       constructor(contributions, drawItemInterceptorContributions) {
-        this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, this.init();
+        this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray$1(this.contributions) || (this.contributions = [this.contributions]), this.init();
       }
       init() {
         this.contributions.forEach(item => {
@@ -20348,10 +20390,11 @@
         textAreaDom.setAttribute("style", "width: 100px; height: 30px; left: 0; top: 0; position: absolute; z-index: -1; outline: none; resize: none; border: none; overflow: hidden; color: transparent; user-select: none; caret-color: transparent;background-color: transparent;"), textAreaDom.addEventListener("input", this.handleInput), textAreaDom.addEventListener("compositionstart", this.handleCompositionStart), textAreaDom.addEventListener("compositionend", this.handleCompositionEnd), textAreaDom.addEventListener("focusin", this.handleFocusIn), textAreaDom.addEventListener("focusout", this.handleFocusOut), application.global.addEventListener("keydown", this.handleKeyDown);
       }
       parseCompositionStr(configIdx) {
+        var _a;
         const {
             textConfig = []
           } = this.currRt.attribute,
-          lastConfig = textConfig[configIdx];
+          lastConfig = null !== (_a = textConfig[configIdx]) && void 0 !== _a ? _a : {};
         textConfig.splice(configIdx, 1);
         const text = lastConfig.text,
           textList = text ? Array.from(text.toString()) : [];
@@ -20408,15 +20451,18 @@
         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];
+        let supportOutAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        return this.getAllFormat(key, supportOutAttr)[0];
       }
       getAllFormat(key) {
+        let supportOutAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !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());
@@ -20464,7 +20510,7 @@
           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)));
         }, this.handleChange = (text, isComposing, cursorIdx, rt) => {
@@ -20477,7 +20523,9 @@
         }, 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 => {
@@ -20516,7 +20564,17 @@
         idx > -1 && cbs.splice(idx, 1);
       }
       activate(context) {
-        this.pluginService = context, this.editModule = new EditModule(), context.stage.on("pointermove", this.handleMove), context.stage.on("pointerdown", this.handlePointerDown), context.stage.on("pointerup", this.handlePointerUp), context.stage.on("pointerleave", this.handlePointerUp), context.stage.on("dblclick", this.handleDBLClick), application.global.addEventListener("keydown", this.handleKeyDown), this.editModule.onInput(this.handleInput), this.editModule.onChange(this.handleChange), this.editModule.onFocusOut(this.handleFocusOut);
+        this.pluginService = context, this.editModule = new EditModule(), context.stage.on("pointermove", this.handleMove, {
+          capture: !0
+        }), context.stage.on("pointerdown", this.handlePointerDown, {
+          capture: !0
+        }), context.stage.on("pointerup", this.handlePointerUp, {
+          capture: !0
+        }), context.stage.on("pointerleave", this.handlePointerUp, {
+          capture: !0
+        }), context.stage.on("dblclick", this.handleDBLClick, {
+          capture: !0
+        }), application.global.addEventListener("keydown", this.handleKeyDown), this.editModule.onInput(this.handleInput), this.editModule.onChange(this.handleChange), this.editModule.onFocusOut(this.handleFocusOut);
       }
       copyToClipboard(e) {
         if (application.global.isMacOS() && e.metaKey && "c" === e.key || !application.global.isMacOS() && e.ctrlKey && "c" === e.key) {
@@ -20550,21 +20608,22 @@
         const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
         this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt), this._tryShowSelection(pos, cache);
       }
-      fullSelection(e) {
-        if (application.global.isMacOS() && e.metaKey && "a" === e.key || !application.global.isMacOS() && e.ctrlKey && "a" === e.key) {
-          const currRt = this.currRt;
-          if (!currRt) return;
-          const cache = currRt.getFrameCache();
-          if (!cache) return;
-          const {
-              lines: lines
-            } = cache,
-            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);
       }
-      directKey(e) {
+      fullSelectionKeyHandler(e) {
+        return !!(application.global.isMacOS() && e.metaKey && "a" === e.key || !application.global.isMacOS() && e.ctrlKey && "a" === e.key) && (this.fullSelection(), e.preventDefault(), !0);
+      }
+      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;
@@ -20617,7 +20676,7 @@
         }
         const {
           textConfig: textConfig,
-          editOptions: editOptions
+          editOptions = {}
         } = this.currRt.attribute;
         if (textConfig && textConfig.length) return;
         if (!editOptions || !editOptions.placeholder) return;
@@ -20634,11 +20693,23 @@
         placeholderColor && (textConfigItem.fill = placeholderColor), placeholderFontFamily && (textConfigItem.fontFamily = placeholderFontFamily), placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), {
           x: 0,
           y: 0,
+          dx: -this.deltaX,
+          dy: -this.deltaY,
           angle: 0,
-          _debug_bounds: !1,
           textConfig: [textConfigItem]
         })), shadow.add(this.shadowPlaceHolder);
       }
+      getRichTextAABBBounds(rt) {
+        const {
+          attribute: attribute
+        } = rt;
+        return attribute.textConfig.length ? rt.AABBBounds : getRichTextBounds(Object.assign(Object.assign({}, this.shadowPlaceHolder.attribute), {
+          x: attribute.x,
+          y: attribute.y,
+          textAlign: attribute.textAlign,
+          boundsMode: "accurate"
+        }));
+      }
       tryShowInputBounds() {
         if (!this.currRt || !this.focusing) return;
         const {
@@ -20648,28 +20719,20 @@
             boundsStrokeWhenInput: boundsStrokeWhenInput
           } = editOptions;
         if (!editOptions || !boundsStrokeWhenInput) return;
-        const {
-            attribute: attribute
-          } = this.currRt,
-          b = this.currRt.AABBBounds;
-        let h = b.height();
-        if (!attribute.textConfig.length && this.editLine) {
-          const {
-            points: points
-          } = this.editLine.attribute;
-          h = points[1].y - points[0].y;
-        }
+        const b = this.getRichTextAABBBounds(this.currRt),
+          height = b.height(),
+          width = b.width();
         this.shadowBounds = this.shadowBounds || createRect({}), this.shadowBounds.setAttributes({
           x: 0,
           y: 0,
-          width: b.width(),
-          height: h,
+          width: width,
+          height: height,
           fill: !1,
           stroke: boundsStrokeWhenInput,
           lineWidth: 1,
           zIndex: -1
         });
-        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds(), this.offsetShadowRoot();
       }
       trySyncPlaceholderToTextConfig() {
         if (!this.currRt) return;
@@ -20678,7 +20741,7 @@
           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;
@@ -20689,7 +20752,20 @@
         });
       }
       deactivate(context) {
-        context.stage.off("pointermove", this.handleMove), context.stage.off("pointerdown", this.handlePointerDown), context.stage.off("pointerup", this.handlePointerUp), context.stage.off("pointerleave", this.handlePointerUp), context.stage.off("dblclick", this.handleDBLClick), application.global.addEventListener("keydown", this.handleKeyDown);
+        context.stage.off("pointermove", this.handleMove, {
+          capture: !0
+        }), context.stage.off("pointerdown", this.handlePointerDown, {
+          capture: !0
+        }), context.stage.off("pointerup", this.handlePointerUp, {
+          capture: !0
+        }), context.stage.off("pointerleave", this.handlePointerUp, {
+          capture: !0
+        }), context.stage.off("dblclick", this.handleDBLClick, {
+          capture: !0
+        }), application.global.addEventListener("keydown", this.handleKeyDown);
+      }
+      stopPropagation(e) {
+        e.stopPropagation();
       }
       onFocus(e, data) {
         this.updateCbs && this.updateCbs.forEach(cb => cb("beforeOnfocus", this)), this.deFocus(!1), this.focusing = !0;
@@ -20698,54 +20774,66 @@
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
         const shadowRoot = this.getShadow(target),
           cache = target.getFrameCache();
-        if (cache) {
-          if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
-            shadowRootIdx: 1,
-            pickable: !1,
-            x: this.deltaX,
-            y: this.deltaY
-          }), !this.editLine) {
-            const line = createLine({
-              x: 0,
-              y: 0,
-              lineWidth: 1,
-              stroke: "black"
-            });
-            this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
-            const g = createGroup({
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0
-            });
-            this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
-          }
-          if (data = data || this.computedCursorPosByEvent(e, cache)) {
-            const {
-              x: x,
-              y1: y1,
-              y2: y2,
-              cursorIndex: cursorIndex
-            } = data;
-            this.startCursorPos = {
-              x: x,
-              y: (y1 + y2) / 2
-            }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, this.setCursorAndTextArea(x, y1, y2, target);
-          } else {
-            const x = 0,
-              y1 = 0,
-              y2 = getRichTextBounds(Object.assign(Object.assign({}, target.attribute), {
-                textConfig: [{
-                  text: "a"
-                }]
-              })).height();
-            this.startCursorPos = {
-              x: x,
-              y: (y1 + y2) / 2
-            }, this.curCursorIdx = -.1, this.selectionStartCursorIdx = -.1, this.setCursorAndTextArea(x, y1, y2, target);
-          }
-          this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.currRt.addUpdateBoundTag();
+        if (!cache) return;
+        const {
+          editOptions = {}
+        } = this.currRt.attribute;
+        if (editOptions.stopPropagation && target.addEventListener("*", this.stopPropagation), this.offsetShadowRoot(target), !this.editLine) {
+          const line = createLine({
+            x: 0,
+            y: 0,
+            lineWidth: 1,
+            stroke: "black"
+          });
+          this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
+          const g = createGroup({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+          });
+          this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
         }
+        if (data = data || this.computedCursorPosByEvent(e, cache)) {
+          const {
+            x: x,
+            y1: y1,
+            y2: y2,
+            cursorIndex: cursorIndex
+          } = data;
+          this.startCursorPos = {
+            x: x,
+            y: (y1 + y2) / 2
+          }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, this.setCursorAndTextArea(x, y1, y2, target);
+        } else {
+          const x = 0,
+            y1 = 0,
+            y2 = getRichTextBounds(Object.assign(Object.assign({}, target.attribute), {
+              textConfig: [{
+                text: "a"
+              }]
+            })).height();
+          this.startCursorPos = {
+            x: x,
+            y: (y1 + y2) / 2
+          }, this.curCursorIdx = -.1, this.selectionStartCursorIdx = -.1, this.setCursorAndTextArea(x, y1, y2, target);
+        }
+        this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.currRt.addUpdateBoundTag();
+      }
+      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,
@@ -20774,7 +20862,10 @@
         }));
         const target = this.currRt;
         if (!target) return;
-        trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
+        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;
         const textConfig = currRt.attribute.textConfig;
@@ -20935,7 +21026,7 @@
         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);
@@ -20982,7 +21073,7 @@
           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),
@@ -26339,6 +26430,7 @@
       contains(graphic, point, params) {
         if (!graphic.AABBBounds.containsPoint(point)) return !1;
         if ("imprecise" === graphic.attribute.pickMode) return !0;
+        if (!this.canvasRenderer) return !0;
         const {
           pickContext: pickContext
         } = null != params ? params : {};
@@ -31141,7 +31233,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.22.0-vstory.12";
+    const version = "0.22.0-vstory.14";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);