@visactor/vrender-components 0.22.0-vstory.9 → 0.22.0

package/dist/index.es.js

@@ -434,12 +434,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;
   }
@@ -618,6 +621,12 @@ let DefaultGlobal = class {
   get env() {
     return this._env;
   }
+  get isImageAnonymous() {
+    return this._isImageAnonymous;
+  }
+  set isImageAnonymous(isImageAnonymous) {
+    this._isImageAnonymous = isImageAnonymous;
+  }
   get devicePixelRatio() {
     return this._env || this.setEnv("browser"), this.envContribution.getDevicePixelRatio();
   }
@@ -652,7 +661,7 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
@@ -1593,7 +1602,7 @@ let Step$1 = class Step {
       default:
         if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
           const x1 = this._x * (1 - this._t) + x * this._t;
-          this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
+          .5 === this._t ? this.context.lineTo(x1, this._y, !1 !== this._lastDefined, this.lastPoint) : this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
         }
     }
     this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
@@ -2269,6 +2278,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,
@@ -2415,6 +2425,7 @@ const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, Defau
 const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
   editable: !1,
   editOptions: null,
+  ascentDescentMode: "actual",
   width: 300,
   height: 300,
   ellipsis: !0,
@@ -2852,14 +2863,17 @@ function testLetter2(string, index) {
   return i + 1;
 }
 function measureTextCanvas(text, character) {
+  let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
   const measurement = application.graphicUtil.textMeasure.measureText(text, character),
     result = {
       ascent: 0,
       height: 0,
       descent: 0,
       width: 0
-    };
-  return "number" != typeof measurement.fontBoundingBoxAscent || "number" != typeof measurement.fontBoundingBoxDescent ? (result.width = measurement.width, result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = measurement.width, result.height = Math.floor(measurement.fontBoundingBoxAscent + measurement.fontBoundingBoxDescent), result.ascent = Math.floor(measurement.fontBoundingBoxAscent), result.descent = result.height - result.ascent), result;
+    },
+    ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
+    descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
+  return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
 }
 
 var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -2885,6 +2899,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
@@ -2892,6 +2909,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
@@ -4381,7 +4405,7 @@ class Animate {
     let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
     let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
     let slience = arguments.length > 2 ? arguments[2] : undefined;
-    this.id = id, this.timeline = timeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
+    this.id = id, this.timeline = timeline || defaultTimeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
   }
   setTimeline(timeline) {
     timeline !== this.timeline && (this.timeline.removeAnimate(this, !1), timeline.addAnimate(this));
@@ -4829,7 +4853,8 @@ class IncreaseCount extends ACustomAnimate {
   }
   onEnd() {}
   onUpdate(end, ratio, out) {
-    !1 !== this.valid && (out.text = end ? this.toNumber : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
+    var _a;
+    !1 !== this.valid && (out.text = end ? null === (_a = this.to) || void 0 === _a ? void 0 : _a.text : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
   }
 }
 var Direction;
@@ -5045,7 +5070,7 @@ class ResourceLoader {
   }
   static GetFile(url, type) {
     let data = ResourceLoader.cache.get(url);
-    return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
       type: type,
       loadState: "init"
     }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -8483,7 +8508,7 @@ let Line$1 = class Line extends Graphic {
       } = attribute,
       b = aabbBounds;
     return points.forEach(p => {
-      !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+      !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
     }), b;
   }
   updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
@@ -8494,7 +8519,7 @@ let Line$1 = class Line extends Graphic {
       b = aabbBounds;
     return segments.forEach(s => {
       s.points.forEach(p => {
-        !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+        !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
       });
     }), b;
   }
@@ -8746,16 +8771,20 @@ 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: Math.round(left),
-    top: Math.round(top),
-    right: Math.round(right),
-    bottom: Math.round(bottom)
+    left: left > leftInt ? leftInt : leftInt - .5,
+    top: top > topInt ? topInt : topInt - .5,
+    right: rightInt > right ? rightInt : rightInt + .5,
+    bottom: bottomInt > bottom ? bottomInt : bottomInt + .5
   };
 }
 class Paragraph {
-  constructor(text, newLine, character) {
-    this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic";
+  constructor(text, newLine, character, ascentDescentMode) {
+    this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
     const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
     this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
     const {
@@ -8763,7 +8792,7 @@ class Paragraph {
       height: height,
       descent: descent,
       width: width
-    } = measureTextCanvas(text, character);
+    } = measureTextCanvas(text, character, this.ascentDescentMode);
     let halfDetaHeight = 0,
       deltaAscent = 0,
       deltaDescent = 0;
@@ -8772,7 +8801,7 @@ class Paragraph {
   updateWidth() {
     const {
       width: width
-    } = measureTextCanvas(this.text, this.character);
+    } = measureTextCanvas(this.text, this.character, this.ascentDescentMode);
     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) {
@@ -8789,16 +8818,24 @@ class Paragraph {
         if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
           const {
             width: width
-          } = measureTextCanvas(this.text.slice(index), this.character);
+          } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
           "vertical" === direction || (left -= this.ellipsisWidth - width);
         }
       }
     }
+    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);
-    return Object.assign(Object.assign({}, lrtb), {
-      fillStyle: this.character.background,
-      globalAlpha: this.character.backgroundOpacity
-    });
+    ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top), ctx.fillStyle = fillStyle, ctx.globalAlpha = globalAlpha;
   }
   draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
     let baseline = top + ascent,
@@ -8813,7 +8850,7 @@ class Paragraph {
         if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
           const {
             width: width
-          } = measureTextCanvas(this.text.slice(index), this.character);
+          } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
           "vertical" === direction || (left -= this.ellipsisWidth - width);
         }
       }
@@ -8833,21 +8870,21 @@ class Paragraph {
       if (this.character.underline) {
         const top = 1 + baseline,
           lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-        ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+        ctx.fillRect(lrtb.left, 1 + baseline, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
       }
       if (this.character.lineThrough) {
         const top = 1 + baseline - this.ascent / 2,
           lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-        ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+        ctx.fillRect(lrtb.left, 1 + baseline - this.ascent / 2, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
       }
     } else if ("underline" === this.character.textDecoration) {
       const top = 1 + baseline,
         lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-      ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+      ctx.fillRect(lrtb.left, 1 + baseline, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
     } else if ("line-through" === this.character.textDecoration) {
       const top = 1 + baseline - this.ascent / 2,
         lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-      ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+      ctx.fillRect(lrtb.left, 1 + baseline - this.ascent / 2, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
     }
     "vertical" === direction && ctx.restore();
   }
@@ -8861,7 +8898,7 @@ class Paragraph {
       text = text.slice(0, index), text += this.ellipsisStr;
       const {
         width: measureWidth
-      } = measureTextCanvas(this.text.slice(index), this.character);
+      } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
       return width + this.ellipsisWidth - measureWidth;
     }
     return width;
@@ -8870,7 +8907,7 @@ class Paragraph {
 function seperateParagraph(paragraph, index) {
   const text1 = paragraph.text.slice(0, index),
     text2 = paragraph.text.slice(index);
-  return [new Paragraph(text1, paragraph.newLine, paragraph.character), new Paragraph(text2, !0, paragraph.character)];
+  return [new Paragraph(text1, paragraph.newLine, paragraph.character, paragraph.ascentDescentMode), new Paragraph(text2, !0, paragraph.character, paragraph.ascentDescentMode)];
 }
 
 const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", ...GRAPHIC_UPDATE_TAG_KEY];
@@ -9059,7 +9096,7 @@ class Line {
         paragraph.ellipsisStr = ellipsis;
         const {
             width: width
-          } = measureTextCanvas(ellipsis, paragraph.character),
+          } = measureTextCanvas(ellipsis, paragraph.character, paragraph.ascentDescentMode),
           ellipsisWidth = width || 0;
         if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
           lastLine && (paragraph.ellipsis = "add");
@@ -9072,19 +9109,8 @@ class Line {
         paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
       }
     }
-    let fillStyle = "",
-      globalAlpha = -1,
-      currBgList = [];
-    const bgList = [currBgList];
     this.paragraphs.forEach((paragraph, index) => {
-      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);
+      paragraph instanceof RichTextIcon || paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
     }), this.paragraphs.forEach((paragraph, index) => {
       if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
         x: x + paragraph._x,
@@ -9106,7 +9132,7 @@ class Line {
       if (paragraph instanceof RichTextIcon) break;
       const {
           width: width
-        } = measureTextCanvas(ellipsis, paragraph.character),
+        } = measureTextCanvas(ellipsis, paragraph.character, paragraph.ascentDescentMode),
         ellipsisWidth = width || 0;
       if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
         paragraph.ellipsis = "add", paragraph.ellipsisWidth = ellipsisWidth;
@@ -9159,6 +9185,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) {
@@ -9247,13 +9279,17 @@ class RichText extends Graphic {
     }
     return cache.every(item => item.isComposing || !(item.text && isString(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) {}
+    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) {
@@ -9269,14 +9305,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 {
@@ -9289,9 +9325,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;
@@ -9379,7 +9415,8 @@ class RichText extends Graphic {
       layoutDirection: layoutDirection,
       singleLine: singleLine,
       disableAutoWrapLine: disableAutoWrapLine,
-      editable: editable
+      editable: editable,
+      ascentDescentMode: ascentDescentMode
     } = this.attribute;
     let {
       textConfig: _tc = []
@@ -9402,8 +9439,8 @@ class RichText extends Graphic {
       const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
       if (isNumber(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));
-      } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+        for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig, ascentDescentMode));
+      } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig, ascentDescentMode));
     }
     const maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
       maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -10137,6 +10174,7 @@ class DefaultBaseBackgroundRenderContribution {
       opacity = graphicAttribute.opacity,
       backgroundMode = graphicAttribute.backgroundMode,
       backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
       backgroundOffsetY = graphicAttribute.backgroundOffsetY,
@@ -10158,6 +10196,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
@@ -10168,6 +10207,7 @@ class DefaultBaseBackgroundRenderContribution {
     const {
         backgroundMode: backgroundMode,
         backgroundFit: backgroundFit,
+        backgroundKeepAspectRatio: backgroundKeepAspectRatio,
         backgroundScale = 1,
         backgroundOffsetX = 0,
         backgroundOffsetY = 0
@@ -10177,7 +10217,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);
@@ -10483,6 +10528,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
@@ -10495,6 +10541,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
       this.doDrawImage(context, res.data, b, {
         backgroundMode: backgroundMode,
         backgroundFit: backgroundFit,
+        backgroundKeepAspectRatio: backgroundKeepAspectRatio,
         backgroundScale: backgroundScale,
         backgroundOffsetX: backgroundOffsetX,
         backgroundOffsetY: backgroundOffsetY
@@ -10676,8 +10723,8 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
   constructor() {
     super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-  drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-    return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+    return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
   }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -11140,7 +11187,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
     this._draw(line, lineAttribute, !1, drawContext, params);
   }
   drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     if (!cache) return;
     context.beginPath();
     const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
@@ -11153,27 +11200,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = attribute;
-    !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke()));
-    let {
-      connectedType: connectedType,
-      connectedX: connectedX,
-      connectedY: connectedY,
-      connectedStyle: connectedStyle
-    } = attribute;
-    if (isArray(defaultAttribute) ? (connectedType = null !== (_b = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _b ? _b : defaultAttribute[1].connectedType, connectedX = null !== (_c = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _c ? _c : defaultAttribute[1].connectedX, connectedY = null !== (_d = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _d ? _d : defaultAttribute[1].connectedY, connectedStyle = null !== (_e = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _e ? _e : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), "none" !== connectedType) {
-      context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
-        offsetX: offsetX,
-        offsetY: offsetY,
-        offsetZ: z,
-        drawConnect: !0,
-        mode: connectedType,
-        zeroX: connectedX,
-        zeroY: connectedY
-      });
-      const da = [];
-      isArray(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute), !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.stroke()));
-    }
-    return !1;
+    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke())), !1;
   }
   drawLinearLineHighPerformance(line, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, lineAttribute, drawContext, params, fillCb, strokeCb) {
     var _a;
@@ -11205,7 +11232,8 @@ let DefaultCanvasLineRender = class extends BaseRender {
         segments: segments,
         points: points,
         closePath: closePath,
-        curveTension = lineAttribute.curveTension
+        curveTension = lineAttribute.curveTension,
+        connectedType = lineAttribute.connectedType
       } = line.attribute;
     if (!this.valid(line, lineAttribute, fillCb, strokeCb)) return;
     let {
@@ -11217,6 +11245,9 @@ let DefaultCanvasLineRender = class extends BaseRender {
       clipRangeByDimension = lineAttribute.clipRangeByDimension
     } = line.attribute;
     if (1 === clipRange && !segments && !points.some(p => !1 === p.defined) && "linear" === curveType) return this.drawLinearLineHighPerformance(line, context, !!fill, !!stroke, fillOpacity, strokeOpacity, x, y, lineAttribute, drawContext, params, fillCb, strokeCb);
+    function parsePoint(points, connectedType) {
+      return "none" === connectedType ? points : points.filter(p => !1 !== p.defined);
+    }
     if (line.shouldUpdateShape()) {
       const {
           points: points,
@@ -11238,7 +11269,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
             y: lastSeg.endY,
             defined: lastSeg.curves[lastSeg.curves.length - 1].defined
           } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined);
-          const data = calcLineCache(seg.points, curveType, {
+          const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
             startPoint: startPoint,
             curveTension: curveTension
           });
@@ -11257,7 +11288,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
         }
       } else {
         if (!points || !points.length) return line.cache = null, void line.clearUpdateShapeTag();
-        line.cache = calcLineCache(_points, curveType, {
+        line.cache = calcLineCache(parsePoint(_points, connectedType), curveType, {
           curveTension: curveTension
         });
       }
@@ -11289,11 +11320,6 @@ DefaultCanvasLineRender = __decorate$E([injectable()], DefaultCanvasLineRender);
 
 function drawAreaSegments(path, segPath, percent, params) {
   var _a;
-  const {
-    drawConnect = !1,
-    mode = "none"
-  } = params || {};
-  if (drawConnect && "none" === mode) return;
   const {
     top: top,
     bottom: bottom
@@ -11303,34 +11329,11 @@ function drawAreaSegments(path, segPath, percent, params) {
     const topList = [],
       bottomList = [];
     let lastDefined = !0;
-    if (drawConnect) {
-      let lastCurve,
-        lastBottomCurve,
-        defined0 = !0;
-      const n = top.curves.length;
-      top.curves.forEach((curve, i) => {
-        const bototmCurve = bottom.curves[n - i - 1];
-        let currentTopCurve = curve,
-          currentBottomCurve = bototmCurve;
-        if (curve.originP1 === curve.originP2) return lastCurve = curve, void (lastBottomCurve = bototmCurve);
-        if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (currentTopCurve = lastCurve, currentBottomCurve = lastBottomCurve), curve.defined) defined0 || (topList.push(currentTopCurve), bottomList.push(currentBottomCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0, defined0 = !defined0);else {
-          const {
-            originP1: originP1,
-            originP2: originP2
-          } = curve;
-          let validTopCurve, validBottomCurve;
-          originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = curve, validBottomCurve = bototmCurve), defined0 ? (defined0 = !defined0, topList.push(validTopCurve || curve), bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (defined0 = !defined0, topList.push(validTopCurve || curve), bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0);
-        }
-        lastCurve = curve;
-      }), drawAreaConnectBlock(path, topList, bottomList, params);
-    } else {
-      for (let i = 0, n = top.curves.length; i < n; i++) {
-        const topCurve = top.curves[i];
-        lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1])), lastDefined = !lastDefined) : lastDefined && (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1]));
-      }
-      drawAreaBlock(path, topList, bottomList, params);
+    for (let i = 0, n = top.curves.length; i < n; i++) {
+      const topCurve = top.curves[i];
+      lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1])), lastDefined = !lastDefined) : lastDefined && (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1]));
     }
-    return;
+    return void drawAreaBlock(path, topList, bottomList, params);
   }
   if (percent <= 0) return;
   let {
@@ -11348,51 +11351,17 @@ function drawAreaSegments(path, segPath, percent, params) {
     lastDefined = !0;
   const topList = [],
     bottomList = [];
-  let lastTopCurve,
-    lastBottomCurve,
-    defined0 = !0;
   for (let i = 0, n = top.curves.length; i < n; i++) {
     const topCurve = top.curves[i],
       curCurveLength = topCurve.getLength(direction),
       percent = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
     if (percent < 0) break;
-    if (drawedLengthUntilLast += curCurveLength, drawConnect) {
-      const bototmCurve = bottom.curves[n - i - 1];
-      let currentTopCurve = topCurve,
-        currentBottomCurve = bototmCurve;
-      if (topCurve.originP1 === topCurve.originP2) {
-        lastTopCurve = topCurve, lastBottomCurve = bototmCurve;
-        continue;
-      }
-      if (lastTopCurve && lastTopCurve.originP1 === lastTopCurve.originP2 && (currentTopCurve = lastTopCurve, currentBottomCurve = lastBottomCurve), topCurve.defined) defined0 || (topList.push(currentTopCurve), bottomList.push(currentBottomCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0, defined0 = !defined0);else {
-        const {
-          originP1: originP1,
-          originP2: originP2
-        } = topCurve;
-        let validTopCurve, validBottomCurve;
-        originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = topCurve, validBottomCurve = bototmCurve), defined0 ? (defined0 = !defined0, topList.push(validTopCurve || topCurve), bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (defined0 = !defined0, topList.push(validTopCurve || topCurve), bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0);
-      }
-      lastTopCurve = topCurve;
-    } else {
-      let tc = null,
-        bc = null;
-      lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = topCurve, bc = bottom.curves[n - i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = topCurve, bc = bottom.curves[n - i - 1]), tc && bc && (percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic(tc, percent)[0] : divideLinear(tc, percent)[0], bc = bc.p2 && bc.p3 ? divideCubic(bc, 1 - percent)[1] : divideLinear(bc, 1 - percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
-    }
+    drawedLengthUntilLast += curCurveLength;
+    let tc = null,
+      bc = null;
+    lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = topCurve, bc = bottom.curves[n - i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = topCurve, bc = bottom.curves[n - i - 1]), tc && bc && (percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic(tc, percent)[0] : divideLinear(tc, percent)[0], bc = bc.p2 && bc.p3 ? divideCubic(bc, 1 - percent)[1] : divideLinear(bc, 1 - percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
   }
-  drawConnect ? drawAreaConnectBlock(path, topList, bottomList, params) : drawAreaBlock(path, topList, bottomList, params);
-}
-function drawAreaConnectBlock(path, topList, bottomList, params) {
-  if (topList.length < 2) return;
-  const {
-    offsetX = 0,
-    offsetY = 0,
-    offsetZ = 0,
-    mode: mode
-  } = params || {};
-  let curve = topList[0];
-  path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = topList[topList.length - 1];
-  let end = curve.p3 || curve.p1;
-  path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), curve = bottomList[bottomList.length - 1], path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = bottomList[0], end = curve.p3 || curve.p1, path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), path.closePath();
+  drawAreaBlock(path, topList, bottomList, params);
 }
 function drawAreaBlock(path, topList, bottomList, params) {
   const {
@@ -11493,7 +11462,8 @@ let DefaultCanvasAreaRender = class extends BaseRender {
         fillOpacity = areaAttribute.fillOpacity,
         z = areaAttribute.z,
         strokeOpacity = areaAttribute.strokeOpacity,
-        curveTension = areaAttribute.curveTension
+        curveTension = areaAttribute.curveTension,
+        connectedType = areaAttribute.connectedType
       } = area.attribute,
       data = this.valid(area, areaAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -11510,6 +11480,9 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     let {
       curveType = areaAttribute.curveType
     } = area.attribute;
+    function parsePoint(points, connectedType) {
+      return "connect" !== connectedType ? points : points.filter(p => !1 !== p.defined);
+    }
     if (closePath && "linear" === curveType && (curveType = "linearClosed"), 1 === clipRange && !segments && !points.some(p => !1 === p.defined) && "linear" === curveType) return this.drawLinearAreaHighPerformance(area, context, !!fill, doStroke, fillOpacity, strokeOpacity, x, y, areaAttribute, drawContext, params, fillCb, strokeCb);
     if (area.shouldUpdateShape()) {
       if (segments && segments.length) {
@@ -11523,7 +11496,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
             x: lastTopSeg.endX,
             y: lastTopSeg.endY
           } : index > 1 && (startPoint.x = lastTopSeg.endX, startPoint.y = lastTopSeg.endY);
-          const data = calcLineCache(seg.points, curveType, {
+          const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
             startPoint: startPoint,
             curveTension: curveTension
           });
@@ -11546,7 +11519,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
               y: null !== (_d = endPoint.y1) && void 0 !== _d ? _d : endPoint.y
             });
           }
-          bottomPoints.length > 1 && (lastBottomSeg = calcLineCache(bottomPoints, "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType, {
+          bottomPoints.length > 1 && (lastBottomSeg = calcLineCache(parsePoint(bottomPoints, connectedType), "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType, {
             curveTension: curveTension
           }), bottomCaches.unshift(lastBottomSeg));
         }
@@ -11557,11 +11530,11 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       } else {
         if (!points || !points.length) return area.cacheArea = null, void area.clearUpdateShapeTag();
         {
-          const topPoints = points,
+          const topPoints = parsePoint(points, connectedType),
             bottomPoints = [];
-          for (let i = points.length - 1; i >= 0; i--) bottomPoints.push({
-            x: null !== (_e = points[i].x1) && void 0 !== _e ? _e : points[i].x,
-            y: null !== (_f = points[i].y1) && void 0 !== _f ? _f : points[i].y
+          for (let i = topPoints.length - 1; i >= 0; i--) bottomPoints.push({
+            x: null !== (_e = topPoints[i].x1) && void 0 !== _e ? _e : topPoints[i].x,
+            y: null !== (_f = topPoints[i].y1) && void 0 !== _f ? _f : topPoints[i].y
           });
           const topCache = calcLineCache(topPoints, curveType, {
               curveTension: curveTension
@@ -11603,20 +11576,10 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     this._draw(area, areaAttribute, !1, drawContext, params);
   }
   drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
-    let ret = !1;
-    return ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !1, fillCb, strokeCb), ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !0, fillCb, strokeCb), ret;
+    return this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb);
   }
-  _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
-    var _a, _b, _c, _d;
+  _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
     if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
-    let {
-      connectedType: connectedType,
-      connectedX: connectedX,
-      connectedY: connectedY,
-      connectedStyle: connectedStyle
-    } = attribute;
-    const da = [];
-    if (connect && (isArray(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
     context.beginPath();
     const {
       points: points,
@@ -11635,11 +11598,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       offsetX: offsetX,
       offsetY: offsetY,
       offsetZ: offsetZ,
-      direction: direction,
-      drawConnect: connect,
-      mode: connectedType,
-      zeroX: connectedX,
-      zeroY: connectedY
+      direction: direction
     }), this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
       attribute: attribute
     }), context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
@@ -11647,7 +11606,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = attribute;
-    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
       attribute: attribute
     }), (() => {
       if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
@@ -11657,12 +11616,8 @@ let DefaultCanvasAreaRender = class extends BaseRender {
         isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
           offsetX: offsetX,
           offsetY: offsetY,
-          offsetZ: offsetZ,
-          drawConnect: connect,
-          mode: connectedType,
-          zeroX: connectedX,
-          zeroY: connectedY
-        })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+          offsetZ: offsetZ
+        })), context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke();
       }
     })(), !1;
   }
@@ -11918,7 +11873,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,
       {
@@ -11957,7 +11913,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 {
@@ -13074,7 +13031,7 @@ var __decorate$q = undefined && undefined.__decorate || function (decorators, ta
   };
 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(this.contributions) || (this.contributions = [this.contributions]), this.init();
   }
   init() {
     this.contributions.forEach(item => {
@@ -13877,6 +13834,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 : {};
@@ -20581,15 +20539,19 @@ class LabelBase extends AbstractComponent {
         if (isFunction(dataFilter)) {
             data = dataFilter(data);
         }
+        if (data && data.length) {
+            const seenIds = new Set();
+            data = data.filter(d => !seenIds.has(d.id) && seenIds.add(d.id));
+        }
         let labels = this._initText(data);
         if (isFunction(customLayoutFunc)) {
-            labels = customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+            labels = customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this);
         }
         else {
             labels = this._layout(labels);
         }
         if (isFunction(customOverlapFunc)) {
-            labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+            labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this);
         }
         else {
             if (overlap !== false) {
@@ -20597,7 +20559,7 @@ class LabelBase extends AbstractComponent {
             }
         }
         if (isFunction(this.attribute.onAfterOverlapping)) {
-            this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+            this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this);
         }
         if (labels && labels.length) {
             labels.forEach(label => {
@@ -24699,34 +24661,23 @@ class MarkArea extends Marker {
     }
     getPointAttrByPosition(position) {
         const { x1, x2, y1, y2 } = this._area.AABBBounds;
+        const result = {
+            x: (x1 + x2) / 2,
+            y: (y1 + y2) / 2
+        };
         if (position.includes('left') || position.includes('Left')) {
-            return {
-                x: x1,
-                y: (y1 + y2) / 2
-            };
+            result.x = x1;
         }
         if (position.includes('right') || position.includes('Right')) {
-            return {
-                x: x2,
-                y: (y1 + y2) / 2
-            };
+            result.x = x2;
         }
         if (position.includes('top') || position.includes('Top')) {
-            return {
-                x: (x1 + x2) / 2,
-                y: y1
-            };
+            result.y = y1;
         }
         if (position.includes('bottom') || position.includes('Bottom')) {
-            return {
-                x: (x1 + x2) / 2,
-                y: y2
-            };
+            result.y = y2;
         }
-        return {
-            x: (x1 + x2) / 2,
-            y: (y1 + y2) / 2
-        };
+        return result;
     }
     setLabelPos() {
         var _a;
@@ -28156,35 +28107,36 @@ class Title extends AbstractComponent {
         this.name = 'title';
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         const { textType, text, subtextType, textStyle = {}, subtext, subtextStyle = {}, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
         const parsedPadding = normalizePadding(padding);
         const group = this.createOrUpdateChild('title-container', { x: parsedPadding[3], y: parsedPadding[0], zIndex: 1 }, 'group');
+        const fixedMainTitleHeight = (_a = textStyle.height) !== null && _a !== void 0 ? _a : height;
         if (this.attribute.visible !== false && textStyle.visible !== false) {
-            const { width: mainTitleWidth, height: mainTitleHeight, maxHeight: mainTitleMaxHeight, maxWidth: mainTitleMaxWidth, x = 0, y = 0, ellipsis = true, wordBreak = 'break-word', maxWidth, lineClamp } = textStyle;
+            const { width: mainTitleWidth, maxHeight: mainTitleMaxHeight, maxWidth: mainTitleMaxWidth, x = 0, y = 0, ellipsis = true, wordBreak = 'break-word', maxWidth, lineClamp } = textStyle;
             if (textType === 'rich' || isValid(textStyle.character)) {
                 const attr = Object.assign({ x,
-                    y, width: (_a = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _a !== void 0 ? _a : 0, height: (_b = mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : height) !== null && _b !== void 0 ? _b : 0, ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true, wordBreak: wordBreak !== null && wordBreak !== void 0 ? wordBreak : 'break-word', maxHeight: mainTitleMaxHeight !== null && mainTitleMaxHeight !== void 0 ? mainTitleMaxHeight : maxHeight, maxWidth: mainTitleMaxWidth !== null && mainTitleMaxWidth !== void 0 ? mainTitleMaxWidth : maxWidth, textConfig: (_c = textStyle.character) !== null && _c !== void 0 ? _c : text }, textStyle);
+                    y, width: (_b = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _b !== void 0 ? _b : 0, height: fixedMainTitleHeight !== null && fixedMainTitleHeight !== void 0 ? fixedMainTitleHeight : 0, ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true, wordBreak: wordBreak !== null && wordBreak !== void 0 ? wordBreak : 'break-word', maxHeight: mainTitleMaxHeight !== null && mainTitleMaxHeight !== void 0 ? mainTitleMaxHeight : maxHeight, maxWidth: mainTitleMaxWidth !== null && mainTitleMaxWidth !== void 0 ? mainTitleMaxWidth : maxWidth, textConfig: (_c = textStyle.character) !== null && _c !== void 0 ? _c : text }, textStyle);
                 this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
             }
             else if (textType === 'html') {
                 const attr = Object.assign({ html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle), x,
-                    y, width: (_d = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _d !== void 0 ? _d : 0, height: (_e = mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : height) !== null && _e !== void 0 ? _e : 0, ellipsis,
+                    y, width: (_d = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _d !== void 0 ? _d : 0, height: fixedMainTitleHeight !== null && fixedMainTitleHeight !== void 0 ? fixedMainTitleHeight : 0, ellipsis,
                     wordBreak, maxHeight: mainTitleMaxHeight !== null && mainTitleMaxHeight !== void 0 ? mainTitleMaxHeight : maxHeight, maxWidth: mainTitleMaxWidth !== null && mainTitleMaxWidth !== void 0 ? mainTitleMaxWidth : maxWidth, textConfig: [] }, textStyle);
                 this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
             }
             else if (isValid(text)) {
-                this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: isArray(text) ? text : [text], whiteSpace: 'normal' }, textStyle), { maxLineWidth: (_g = (_f = textStyle.maxLineWidth) !== null && _f !== void 0 ? _f : mainTitleWidth) !== null && _g !== void 0 ? _g : width, heightLimit: mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : maxHeight, lineClamp,
+                this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: isArray(text) ? text : [text], whiteSpace: 'normal' }, textStyle), { maxLineWidth: (_f = (_e = textStyle.maxLineWidth) !== null && _e !== void 0 ? _e : mainTitleWidth) !== null && _f !== void 0 ? _f : width, heightLimit: (_g = textStyle.height) !== null && _g !== void 0 ? _g : maxHeight, lineClamp,
                     ellipsis,
                     x,
                     y }), 'text');
             }
         }
-        const maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0;
-        const maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
+        const mainTextBoundsHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0;
+        const mainTextBoundsWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
         if (this.attribute.visible !== false && subtextStyle.visible !== false) {
             const { width: subTitleWidth, height: subTitleHeight, maxWidth: subTitleMaxWidth, maxHeight: subTitleMaxHeight, x = 0, y = 0, ellipsis = true, wordBreak = 'break-word', lineClamp } = subtextStyle;
-            const maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - maintextHeight);
+            const maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - mainTextBoundsHeight);
             if (subtextType === 'rich' || isValid(subtextStyle.character)) {
                 const attr = Object.assign({ x,
                     y, width: (_h = subTitleWidth !== null && subTitleWidth !== void 0 ? subTitleWidth : width) !== null && _h !== void 0 ? _h : 0, height: (_j = subTitleHeight !== null && subTitleHeight !== void 0 ? subTitleHeight : height) !== null && _j !== void 0 ? _j : 0, ellipsis,
@@ -28199,47 +28151,43 @@ class Title extends AbstractComponent {
             }
             else if (isValid(subtext)) {
                 this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: isArray(subtext) ? subtext : [subtext], whiteSpace: 'normal' }, subtextStyle), { maxLineWidth: (_o = subtextStyle.maxLineWidth) !== null && _o !== void 0 ? _o : width, heightLimit: (_p = subtextStyle.heightLimit) !== null && _p !== void 0 ? _p : maxSubTextHeight, lineClamp,
-                    ellipsis, x: 0, y: maintextHeight }), 'text');
+                    ellipsis, x: 0, y: mainTextBoundsHeight }), 'text');
             }
         }
-        const subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0;
-        const subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
-        let titleWidth = Math.max(maintextWidth, subtextWidth);
-        let titleHeight = maintextHeight + ((_q = subtextStyle.height) !== null && _q !== void 0 ? _q : subtextHeight);
+        const subTextBoundsHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0;
+        const subTextBoundsWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
+        let totalWidth = Math.max(mainTextBoundsWidth, subTextBoundsWidth);
+        let totalHeight = mainTextBoundsHeight + ((_q = subtextStyle.height) !== null && _q !== void 0 ? _q : subTextBoundsHeight);
         if (isValid(width)) {
-            titleWidth = width;
+            totalWidth = width;
         }
         if (isValid(height)) {
-            titleHeight = height;
+            totalHeight = height;
         }
-        if (isValid(minWidth) && titleWidth < minWidth) {
-            titleWidth = minWidth;
+        if (isValid(minWidth) && totalWidth < minWidth) {
+            totalWidth = minWidth;
         }
         if (isValid(maxWidth)) {
-            if (titleWidth > maxWidth) {
-                titleWidth = maxWidth;
+            if (totalWidth > maxWidth) {
+                totalWidth = maxWidth;
             }
         }
-        if (isValid(minHeight) && titleHeight < minHeight) {
-            titleHeight = minHeight;
+        if (isValid(minHeight) && totalHeight < minHeight) {
+            totalHeight = minHeight;
         }
         if (isValid(maxHeight)) {
-            if (titleHeight > maxHeight) {
-                titleHeight = maxHeight;
+            if (totalHeight > maxHeight) {
+                totalHeight = maxHeight;
             }
         }
-        group.attribute.width = titleWidth;
-        group.attribute.height = titleHeight;
+        group.attribute.width = totalWidth;
+        group.attribute.height = totalHeight;
         group.attribute.boundsPadding = parsedPadding;
         if (this._mainTitle) {
             if (isValid(align) || isValid(textStyle.align)) {
                 const mainTitleAlign = textStyle.align ? textStyle.align : align;
-                const mainTitleWidth = (_r = textStyle.width) !== null && _r !== void 0 ? _r : maintextWidth;
-                if (mainTitleAlign === 'left') {
-                    this._mainTitle.setAttribute('x', 0);
-                    this._mainTitle.setAttribute('textAlign', 'left');
-                }
-                else if (mainTitleAlign === 'center') {
+                const mainTitleWidth = (_r = textStyle.width) !== null && _r !== void 0 ? _r : totalWidth;
+                if (mainTitleAlign === 'center') {
                     this._mainTitle.setAttribute('x', mainTitleWidth / 2);
                     this._mainTitle.setAttribute('textAlign', 'center');
                 }
@@ -28247,33 +28195,31 @@ class Title extends AbstractComponent {
                     this._mainTitle.setAttribute('x', mainTitleWidth);
                     this._mainTitle.setAttribute('textAlign', 'right');
                 }
-            }
-            if (isValid(verticalAlign) || isValid(textStyle.verticalAlign)) {
-                const mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign;
-                const mainTitleHeight = textStyle.height ? textStyle.height : titleHeight;
-                if (mainTitleVerticalAlign === 'top') {
-                    this._mainTitle.setAttribute('y', 0);
-                    this._mainTitle.setAttribute('textBaseline', 'top');
-                }
-                else if (mainTitleVerticalAlign === 'middle') {
-                    this._mainTitle.setAttribute('y', mainTitleHeight / 2);
-                    this._mainTitle.setAttribute('textBaseline', 'middle');
-                }
-                else if (mainTitleVerticalAlign === 'bottom') {
-                    this._mainTitle.setAttribute('y', mainTitleHeight);
-                    this._mainTitle.setAttribute('textBaseline', 'bottom');
+                else {
+                    this._mainTitle.setAttribute('x', 0);
+                    this._mainTitle.setAttribute('textAlign', 'left');
                 }
             }
+            const mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign;
+            const mainTitleHeight = fixedMainTitleHeight !== null && fixedMainTitleHeight !== void 0 ? fixedMainTitleHeight : (this._mainTitle.AABBBounds.empty() ? 0 : this._mainTitle.AABBBounds.height());
+            if (mainTitleVerticalAlign === 'middle') {
+                this._mainTitle.setAttribute('y', mainTitleHeight / 2);
+                this._mainTitle.setAttribute('textBaseline', 'middle');
+            }
+            else if (mainTitleVerticalAlign === 'bottom') {
+                this._mainTitle.setAttribute('y', mainTitleHeight);
+                this._mainTitle.setAttribute('textBaseline', 'bottom');
+            }
+            else {
+                this._mainTitle.setAttribute('y', 0);
+                this._mainTitle.setAttribute('textBaseline', 'top');
+            }
         }
         if (this._subTitle) {
             if (isValid(align) || isValid(subtextStyle.align)) {
                 const subTitleAlign = subtextStyle.align ? subtextStyle.align : align;
-                const subTitleWidth = (_s = subtextStyle.width) !== null && _s !== void 0 ? _s : subtextWidth;
-                if (subTitleAlign === 'left') {
-                    this._subTitle.setAttribute('x', 0);
-                    this._subTitle.setAttribute('textAlign', 'left');
-                }
-                else if (subTitleAlign === 'center') {
+                const subTitleWidth = (_t = (_s = subtextStyle.width) !== null && _s !== void 0 ? _s : textStyle.width) !== null && _t !== void 0 ? _t : totalWidth;
+                if (subTitleAlign === 'center') {
                     this._subTitle.setAttribute('x', subTitleWidth / 2);
                     this._subTitle.setAttribute('textAlign', 'center');
                 }
@@ -28281,24 +28227,32 @@ class Title extends AbstractComponent {
                     this._subTitle.setAttribute('x', subTitleWidth);
                     this._subTitle.setAttribute('textAlign', 'right');
                 }
-            }
-            if (isValid(verticalAlign) || isValid(textStyle.verticalAlign)) {
-                const subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign;
-                const subTitleYStart = maintextHeight;
-                const subTitleHeight = (_t = subtextStyle.height) !== null && _t !== void 0 ? _t : 0;
-                if (subTitleVerticalAlign === 'top') {
-                    this._subTitle.setAttribute('y', subTitleYStart);
-                    this._subTitle.setAttribute('textBaseline', 'top');
-                }
-                else if (subTitleVerticalAlign === 'middle') {
-                    this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight / 2);
-                    this._subTitle.setAttribute('textBaseline', 'middle');
-                }
-                else if (subTitleVerticalAlign === 'bottom') {
-                    this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight);
-                    this._subTitle.setAttribute('textBaseline', 'bottom');
+                else {
+                    this._subTitle.setAttribute('x', 0);
+                    this._subTitle.setAttribute('textAlign', 'left');
                 }
             }
+            const subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign;
+            const subTitleYStart = this._mainTitle
+                ? isValid(fixedMainTitleHeight)
+                    ?
+                        this._mainTitle.AABBBounds.y1 +
+                            Math.max(this._mainTitle.AABBBounds.empty() ? 0 : this._mainTitle.AABBBounds.height(), fixedMainTitleHeight)
+                    : this._mainTitle.AABBBounds.y2
+                : 0;
+            const subTitleHeight = (_v = (_u = subtextStyle.height) !== null && _u !== void 0 ? _u : height) !== null && _v !== void 0 ? _v : (this._subTitle.AABBBounds.empty() ? 0 : this._subTitle.AABBBounds.height());
+            if (subTitleVerticalAlign === 'middle') {
+                this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight / 2);
+                this._subTitle.setAttribute('textBaseline', 'middle');
+            }
+            else if (subTitleVerticalAlign === 'bottom') {
+                this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight);
+                this._subTitle.setAttribute('textBaseline', 'bottom');
+            }
+            else {
+                this._subTitle.setAttribute('y', subTitleYStart);
+                this._subTitle.setAttribute('textBaseline', 'top');
+            }
         }
     }
 }
@@ -31301,6 +31255,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.0-vstory.9";
+const version = "0.22.0";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };