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

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.22.0-vstory.6";
+export declare const version = "0.22.0-vstory.8";
 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.6", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.22.0-vstory.8", (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,iBAAiB,CAAC;AAEzC,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.6\";\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,iBAAiB,CAAC;AAEzC,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.8\";\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

@@ -10912,7 +10912,7 @@ class Group extends Graphic {
     application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
     const selfChange = this.shouldSelfChangeUpdateAABBBounds(),
       bounds = this.doUpdateAABBBounds();
-    return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), bounds;
+    return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
   }
   doUpdateLocalMatrix() {
     const {
@@ -13882,15 +13882,11 @@ class Frame {
 }
 
 function getFixedLRTB(left, right, top, bottom) {
-  const leftInt = Math.round(left),
-    topInt = Math.round(top),
-    rightInt = Math.round(right),
-    bottomInt = Math.round(bottom);
   return {
-    left: left > leftInt ? leftInt : leftInt - .5,
-    top: top > topInt ? topInt : topInt - .5,
-    right: rightInt > right ? rightInt : rightInt + .5,
-    bottom: bottomInt > bottom ? bottomInt : bottomInt + .5
+    left: Math.round(left),
+    top: Math.round(top),
+    right: Math.round(right),
+    bottom: Math.round(bottom)
   };
 }
 class Paragraph {
@@ -13934,19 +13930,11 @@ class Paragraph {
         }
       }
     }
-    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,
@@ -14220,8 +14208,19 @@ class Line {
         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,
@@ -14384,7 +14383,13 @@ class RichText extends Graphic {
     }
     return cache.every(item => item.isComposing || !(item.text && isString$1(item.text) && RichText.splitText(item.text).length > 1));
   }
+  static splitEmoji(text) {
+    return [...new Intl.Segmenter().segment(text)].map(x => x.segment);
+  }
   static splitText(text) {
+    try {
+      return this.splitEmoji(text);
+    } catch (e) {}
     return Array.from(text);
   }
   static TransformTextConfig2SingleCharacter(textConfig) {
@@ -18430,7 +18435,7 @@ let DefaultDrawContribution = class {
   renderGroup(group, drawContext, parentMatrix, skipSort) {
     if (drawContext.break || !1 === group.attribute.visibleAll) return;
     if (group.incremental && (null == drawContext.startAtId || drawContext.startAtId === group._uid)) return drawContext.break = !0, void this._increaseRender(group, drawContext);
-    if (this.useDirtyBounds && !isRectIntersect(group.AABBBounds, this.dirtyBounds, !1)) return;
+    if (this.useDirtyBounds && !isRectIntersect(group.AABBBounds, this.dirtyBounds, !1) && "empty" !== group.attribute.boundsMode) return;
     let tempBounds,
       nextM = parentMatrix;
     if (this.useDirtyBounds) {
@@ -20425,9 +20430,9 @@ class EditModule {
     textConfig.splice(configIdx, 1);
     const text = lastConfig.text,
       textList = text ? Array.from(text.toString()) : [];
-    for (let i = 0; i < textList.length; i++) textConfig.splice(i + configIdx, 0, Object.assign(Object.assign({
+    for (let i = 0; i < textList.length; i++) textConfig.splice(i + configIdx, 0, Object.assign(Object.assign(Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
       fill: "black"
-    }, lastConfig), {
+    }), lastConfig), {
       isComposing: !1,
       text: textList[i]
     }));
@@ -20627,9 +20632,11 @@ class RichTextEditPlugin {
       const cache = currRt.getFrameCache();
       if (!cache) return;
       const {
-          lines: lines
-        } = cache,
-        totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
+        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;
@@ -20697,18 +20704,19 @@ class RichTextEditPlugin {
         placeholderFontFamily: placeholderFontFamily,
         placeholderFontSize: placeholderFontSize
       } = editOptions,
-      shadow = this.currRt.shadowRoot || this.currRt.attachShadow();
-    this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), {
+      shadow = this.getShadow(this.currRt),
+      textConfigItem = Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
+        text: placeholder
+      });
+    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,
+      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() {
@@ -20721,15 +20729,15 @@ class RichTextEditPlugin {
       } = editOptions;
     if (!editOptions || !boundsStrokeWhenInput) return;
     const {
-        attribute: attribute
-      } = this.currRt,
-      b = this.currRt.AABBBounds;
-    let h = b.height();
+      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 = getRichTextBounds(Object.assign({}, this.shadowPlaceHolder.attribute));
     }
     this.shadowBounds = this.shadowBounds || createRect({}), this.shadowBounds.setAttributes({
       x: 0,
@@ -20739,10 +20747,9 @@ 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;
@@ -20751,7 +20758,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;
@@ -20765,11 +20772,11 @@ class RichTextEditPlugin {
     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);
   }
   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(),
+    const shadowRoot = this.getShadow(target),
       cache = target.getFrameCache();
     if (cache) {
       if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
@@ -20782,16 +20789,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 = createGroup({
           x: 0,
           y: 0,
           width: 0,
-          height: 0,
-          boundsMode: "empty"
+          height: 0
         });
         this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
       }
@@ -20846,7 +20851,9 @@ class RichTextEditPlugin {
     let trulyDeFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !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), 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;
@@ -20903,67 +20910,75 @@ class RichTextEditPlugin {
       },
       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(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(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(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(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(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(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];
@@ -30459,7 +30474,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.22.0-vstory.6";
+const version = "0.22.0-vstory.8";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);