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

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.22.0-vstory.14";
+export declare const version = "0.22.0-vstory.16";
 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.14", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.22.0-vstory.16", (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.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"]}
+{"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.16\";\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

@@ -2494,6 +2494,8 @@ class Color {
         return color.getLuminance2();
       case "lum3":
         return color.getLuminance3();
+      case "wcag":
+        return color.getLuminanceWCAG();
     }
   }
   static parseColorString(value) {
@@ -2595,6 +2597,14 @@ class Color {
   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());
   }
@@ -3908,10 +3918,10 @@ class CustomPath2D extends CurvePath {
           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;
@@ -4302,6 +4312,7 @@ const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, Defau
   keepDirIn3d: !0
 });
 const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+  upgradeAttrs: null,
   editable: !1,
   editOptions: null,
   ascentDescentMode: "actual",
@@ -10138,7 +10149,7 @@ class Graphic extends Node {
       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) {
@@ -10342,7 +10353,7 @@ class Graphic extends Node {
       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);
@@ -10446,7 +10457,7 @@ class Graphic extends Node {
     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 {
@@ -10498,7 +10509,7 @@ class Graphic extends Node {
     });
   }
   release() {
-    this.releaseStatus = "released", application.graphicService.onRelease(this);
+    this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
   }
   _emitCustomEvent(type, context) {
     var _a, _b;
@@ -11074,6 +11085,11 @@ class Group extends Graphic {
   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) {
@@ -13941,7 +13957,7 @@ class Paragraph {
     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;
@@ -13959,19 +13975,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,
@@ -14245,8 +14253,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,
@@ -14484,7 +14503,7 @@ class RichText extends Graphic {
       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);
@@ -14512,48 +14531,53 @@ class RichText extends Graphic {
   }
   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;
@@ -14575,7 +14599,10 @@ class RichText extends Graphic {
       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,
@@ -14584,7 +14611,7 @@ class RichText extends Graphic {
       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++) {
@@ -14600,7 +14627,7 @@ class RichText extends Graphic {
         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;
@@ -20258,6 +20285,7 @@ function getDefaultCharacterConfig(attribute) {
     fill = "black",
     stroke = !1,
     fontWeight = "normal",
+    lineHeight: lineHeight,
     fontFamily = "Arial"
   } = attribute;
   let {
@@ -20268,7 +20296,8 @@ function getDefaultCharacterConfig(attribute) {
     stroke: stroke,
     fontSize: fontSize,
     fontWeight: fontWeight,
-    fontFamily: fontFamily
+    fontFamily: fontFamily,
+    lineHeight: lineHeight
   };
 }
 function findConfigIndexByCursorIdx(textConfig, cursorIndex) {
@@ -20517,15 +20546,15 @@ 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.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 => {
@@ -20633,7 +20662,7 @@ class RichTextEditPlugin {
       } = 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();
     }
@@ -20726,7 +20755,8 @@ class RichTextEditPlugin {
       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;
@@ -20761,8 +20791,22 @@ class RichTextEditPlugin {
   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);
@@ -20786,7 +20830,7 @@ class RichTextEditPlugin {
         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 {
@@ -20851,27 +20895,29 @@ class RichTextEditPlugin {
   }
   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({
@@ -20980,7 +21026,8 @@ class RichTextEditPlugin {
   getShadow(rt) {
     const sr = rt.shadowRoot || rt.attachShadow();
     return sr.setAttributes({
-      boundsMode: "empty"
+      width: 1,
+      height: 1
     }), sr;
   }
   getLineByPoint(cache, p1) {
@@ -21014,7 +21061,10 @@ class RichTextEditPlugin {
     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();
@@ -21160,7 +21210,7 @@ class RichTextEditPlugin {
     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;
@@ -27481,13 +27531,15 @@ let NodeWindowHandlerContribution = class extends BaseWindowHandlerContribution
     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
     });
@@ -31227,7 +31279,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.22.0-vstory.14";
+const version = "0.22.0-vstory.16";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);