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

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;
@@ -2028,10 +2037,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;
@@ -2259,7 +2268,7 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   opacity: 1,
   background: null,
   autoAnimateTexture: !1,
-  textureRatio: 0,
+  textureRatio: 1,
   textureOptions: null,
   backgroundOpacity: 1,
   backgroundCornerRadius: 0,
@@ -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,
@@ -2413,8 +2423,10 @@ 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",
   width: 300,
   height: 300,
   ellipsis: !0,
@@ -2852,14 +2864,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 +2900,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 +2910,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 +4406,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 +4854,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 +5071,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));
@@ -5441,7 +5467,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) {
@@ -5506,9 +5532,10 @@ class Graphic extends Node {
     this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
   }
   removeState(stateName, hasAnimation) {
-    if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
-      const currentStates = this.currentStates.filter(state => state !== stateName);
-      this.useStates(currentStates, hasAnimation);
+    if (this.currentStates) {
+      const filter = isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
+        newStates = this.currentStates.filter(filter);
+      newStates.length !== this.currentStates.length && this.useStates(newStates, hasAnimation);
     }
   }
   toggleState(stateName, hasAnimation) {
@@ -5645,7 +5672,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);
@@ -5749,7 +5776,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 {
@@ -5801,7 +5828,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;
@@ -6295,6 +6322,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) {
@@ -8341,6 +8373,20 @@ let Symbol$1 = class Symbol extends Graphic {
   getParsedPath() {
     return this.shouldUpdateShape() && (this.doUpdateParsedPath(), this.clearUpdateShapeTag()), this._parsedPath;
   }
+  getParsedPath2D() {
+    let x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    let path = null;
+    try {
+      path = new Path2D();
+    } catch (err) {
+      return null;
+    }
+    const parsedPath = this.getParsedPath();
+    if (!parsedPath) return null;
+    parsedPath.draw(path, size, x, y);
+  }
   isValid() {
     return super.isValid() && this._isValid();
   }
@@ -8483,7 +8529,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 +8540,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 +8792,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 +8813,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,11 +8822,11 @@ 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) {
-    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;
@@ -8789,7 +8839,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);
         }
       }
@@ -8813,7 +8863,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 +8883,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 +8911,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 +8920,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 +9109,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");
@@ -9106,7 +9156,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 +9209,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 +9303,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 +9329,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 +9349,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;
@@ -9312,7 +9372,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);
@@ -9340,47 +9400,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
-    } = 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;
@@ -9402,8 +9468,11 @@ 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++) 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,
       maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -9411,7 +9480,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++) {
@@ -9427,7 +9496,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;
@@ -10137,6 +10206,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 +10228,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 +10239,7 @@ class DefaultBaseBackgroundRenderContribution {
     const {
         backgroundMode: backgroundMode,
         backgroundFit: backgroundFit,
+        backgroundKeepAspectRatio: backgroundKeepAspectRatio,
         backgroundScale = 1,
         backgroundOffsetX = 0,
         backgroundOffsetY = 0
@@ -10177,7 +10249,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);
@@ -10248,7 +10325,7 @@ function drawWave(ctx, ratio, boundsWidth, boundsHeight, textureOptions, offsetX
 }
 class DefaultBaseTextureRenderContribution {
   constructor() {
-    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10;
+    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10, this._tempSymbolGraphic = null;
   }
   createCommonPattern(size, padding, color, targetContext, cb) {
     const r = (size - 2 * padding) / 2,
@@ -10362,7 +10439,35 @@ class DefaultBaseTextureRenderContribution {
       case "grid":
         pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
     }
-    if (pattern) context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();else if ("wave" === texture) {
+    if (textureOptions && textureOptions.dynamicTexture) {
+      context.save(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.clip();
+      const {
+          gridConfig = {}
+        } = textureOptions,
+        b = graphic.AABBBounds,
+        width = b.width(),
+        height = b.height(),
+        padding = texturePadding,
+        cellSize = textureSize,
+        gridColumns = gridConfig.columns ? gridConfig.columns : Math.ceil(width / cellSize),
+        gridRows = gridConfig.rows ? gridConfig.rows : Math.ceil(height / cellSize),
+        gutterColumn = gridConfig.gutterColumn ? gridConfig.gutterColumn : 2 * padding,
+        gutterRow = gridConfig.gutterRow ? gridConfig.gutterRow : 2 * padding;
+      this._tempSymbolGraphic || (this._tempSymbolGraphic = createSymbol({}));
+      const sizeW = gridConfig.columns ? width / gridConfig.columns : cellSize,
+        sizeH = gridConfig.rows ? height / gridConfig.rows : cellSize;
+      this._tempSymbolGraphic.setAttributes({
+        size: [sizeW - gutterColumn, sizeH - gutterRow],
+        symbolType: texture
+      });
+      const parsedPath = this._tempSymbolGraphic.getParsedPath();
+      for (let i = 0; i < gridRows; i++) for (let j = 0; j < gridColumns; j++) {
+        const _x = x + cellSize / 2 + j * cellSize,
+          _y = y + cellSize / 2 + i * cellSize;
+        context.beginPath(), !1 === parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) && context.closePath(), context.fillStyle = textureColor, textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic);
+      }
+      context.restore();
+    } else if (pattern) context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();else if ("wave" === texture) {
       context.save(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.clip();
       const b = graphic.AABBBounds;
       drawWave(context, textureRatio, b.width(), b.height(), Object.assign(Object.assign({}, textureOptions || {}), {
@@ -10483,6 +10588,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 +10601,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 +10783,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 +11247,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 +11260,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 +11292,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 +11305,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 +11329,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 +11348,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 +11380,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 +11389,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 +11411,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 +11522,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 +11540,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 +11556,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 +11579,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 +11590,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 +11636,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 +11658,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 +11666,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 +11676,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 +11933,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 +11973,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 +13091,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 +13894,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 : {};
@@ -14764,7 +14782,9 @@ const DEFAULT_HTML_TEXT_SPEC = {
     height: 30,
     style: {}
 };
+const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
+const SCROLLBAR_END_EVENT = 'scrollUp';
 
 const delayMap$2 = {
     debounce: debounce,
@@ -14806,7 +14826,7 @@ class ScrollBar extends AbstractComponent {
             const { direction } = this.attribute;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = direction === 'horizontal' ? x : y;
-            this._dispatchEvent('scrollDown', {
+            this._dispatchEvent(SCROLLBAR_START_EVENT, {
                 pos: this._prePos,
                 event: e
             });
@@ -14854,11 +14874,11 @@ class ScrollBar extends AbstractComponent {
             : delayMap$2[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
         this._onSliderPointerUp = (e) => {
             e.preventDefault();
-            const { realTime = true, range: preRange, limitRange = [0, 1] } = this.attribute;
+            const { range: preRange, limitRange = [0, 1] } = this.attribute;
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
             const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
-            this._dispatchEvent('scrollUp', {
+            this._dispatchEvent(SCROLLBAR_END_EVENT, {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
@@ -20581,15 +20601,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 +20621,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 => {
@@ -22915,14 +22939,11 @@ class DataZoom extends AbstractComponent {
             }
             this._activeState = false;
             brushSelect && this.renderDragMask();
-            if (start !== this.state.start || end !== this.state.end) {
-                this.setStateAttr(this.state.start, this.state.end, true);
-                this._dispatchEvent('change', {
-                    start: this.state.start,
-                    end: this.state.end,
-                    tag: this._activeTag
-                });
-            }
+            this._dispatchEvent('change', {
+                start: this.state.start,
+                end: this.state.end,
+                tag: this._activeTag
+            });
             if (vglobal.env === 'browser') {
                 vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
                 vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
@@ -23006,7 +23027,8 @@ class DataZoom extends AbstractComponent {
         shouldRender && this.setAttributes({ start, end });
     }
     eventPosToStagePos(e) {
-        return this.stage.eventPointTransform(e);
+        var _a, _b;
+        return (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
     }
     _onHandlerPointerEnter(e) {
         e.stopPropagation();
@@ -24699,34 +24721,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 +28167,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 +28211,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 +28255,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 +28287,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 +31315,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.0-vstory.9";
+const version = "0.22.1";
 
 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 };