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

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.22.0-vstory.12";
+export declare const version = "0.22.0-vstory.14";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';

package/cjs/index.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "0.22.0-vstory.12", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.22.0-vstory.14", (0, vrender_core_1.preLoadAllModule)(), (0, 
 vrender_core_1.isBrowserEnv)() ? (0, vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, 
 vrender_core_1.isNodeEnv)() && (0, vrender_kits_1.loadNodeEnv)(vrender_core_1.container), 
 (0, vrender_kits_2.registerArc)(), (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,kBAAkB,CAAC;AAE1C,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.22.0-vstory.12\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,kBAAkB,CAAC;AAE1C,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.22.0-vstory.14\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/index.es.js

@@ -431,12 +431,15 @@ class Container {
           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;
   }
@@ -4146,6 +4149,7 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   texturePadding: 2,
   backgroundMode: "no-repeat",
   backgroundFit: !0,
+  backgroundKeepAspectRatio: !1,
   backgroundClip: !0,
   backgroundScale: 1,
   backgroundOffsetX: 0,
@@ -4784,6 +4788,9 @@ let ATextMeasure = class {
   }
   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
@@ -4791,6 +4798,13 @@ let ATextMeasure = class {
       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
@@ -14307,6 +14321,12 @@ class Wrapper {
   }
 }
 
+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) {
@@ -14396,6 +14416,16 @@ class RichText extends Graphic {
     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) {
@@ -14411,14 +14441,14 @@ class RichText extends Graphic {
     }), 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 {
@@ -14431,9 +14461,9 @@ class RichText extends Graphic {
         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;
@@ -15437,6 +15467,7 @@ class DefaultBaseBackgroundRenderContribution {
       opacity = graphicAttribute.opacity,
       backgroundMode = graphicAttribute.backgroundMode,
       backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
       backgroundOffsetY = graphicAttribute.backgroundOffsetY,
@@ -15458,6 +15489,7 @@ class DefaultBaseBackgroundRenderContribution {
       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
@@ -15468,6 +15500,7 @@ class DefaultBaseBackgroundRenderContribution {
     const {
         backgroundMode: backgroundMode,
         backgroundFit: backgroundFit,
+        backgroundKeepAspectRatio: backgroundKeepAspectRatio,
         backgroundScale = 1,
         backgroundOffsetX = 0,
         backgroundOffsetY = 0
@@ -15477,7 +15510,12 @@ class DefaultBaseBackgroundRenderContribution {
     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);
@@ -15783,6 +15821,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
       background: background,
       backgroundMode = graphicAttribute.backgroundMode,
       backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
       backgroundOffsetY = graphicAttribute.backgroundOffsetY
@@ -15795,6 +15834,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
       this.doDrawImage(context, res.data, b, {
         backgroundMode: backgroundMode,
         backgroundFit: backgroundFit,
+        backgroundKeepAspectRatio: backgroundKeepAspectRatio,
         backgroundScale: backgroundScale,
         backgroundOffsetX: backgroundOffsetX,
         backgroundOffsetY: backgroundOffsetY
@@ -17125,7 +17165,8 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
     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,
       {
@@ -17164,7 +17205,8 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
       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 {
@@ -18299,7 +18341,7 @@ var __decorate$1l = undefined && undefined.__decorate || function (decorators, t
   };
 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 => {
@@ -20342,10 +20384,11 @@ class EditModule {
     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()) : [];
@@ -20402,15 +20445,18 @@ class Selection {
     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());
@@ -20458,7 +20504,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)));
     }, this.handleChange = (text, isComposing, cursorIdx, rt) => {
@@ -20471,7 +20517,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 => {
@@ -20510,7 +20558,17 @@ class RichTextEditPlugin {
     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) {
@@ -20544,21 +20602,22 @@ 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.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;
@@ -20611,7 +20670,7 @@ class RichTextEditPlugin {
     }
     const {
       textConfig: textConfig,
-      editOptions: editOptions
+      editOptions = {}
     } = this.currRt.attribute;
     if (textConfig && textConfig.length) return;
     if (!editOptions || !editOptions.placeholder) return;
@@ -20628,11 +20687,23 @@ class RichTextEditPlugin {
     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 {
@@ -20642,28 +20713,20 @@ class RichTextEditPlugin {
         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;
@@ -20672,7 +20735,7 @@ class RichTextEditPlugin {
       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;
@@ -20683,7 +20746,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.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;
@@ -20692,54 +20768,66 @@ class RichTextEditPlugin {
     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,
@@ -20768,7 +20856,10 @@ class RichTextEditPlugin {
     }));
     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;
@@ -20929,7 +21020,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);
@@ -20976,7 +21067,7 @@ class RichTextEditPlugin {
       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),
@@ -26333,6 +26424,7 @@ class PickerBase {
   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 : {};
@@ -31135,7 +31227,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.22.0-vstory.12";
+const version = "0.22.0-vstory.14";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);