@visactor/vrender-components 0.16.13 → 0.16.14-alpha.11

package/dist/index.js

@@ -7463,6 +7463,12 @@
   }();
   RafBasedSTO.TimeOut = 1e3 / 60;
   new RafBasedSTO();
+  var calculateLineHeight = function calculateLineHeight(lineHeight, fontSize) {
+    if (vutils.isString(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
+      return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
+    }
+    return lineHeight;
+  };
 
   var IncreaseCount = /*#__PURE__*/function (_ACustomAnimate) {
     _inherits(IncreaseCount, _ACustomAnimate);
@@ -8580,8 +8586,7 @@
     }, {
       key: "addChild",
       value: function addChild(node) {
-        var _this$child$push2;
-        "__proto__" === node.tagname && (node.tagname = "#__proto__"), node[":@"] && Object.keys(node[":@"]).length > 0 ? this.child.push((_this$child$push2 = {}, _defineProperty(_this$child$push2, node.tagname, node.child), _defineProperty(_this$child$push2, ":@", node[":@"]), _this$child$push2)) : this.child.push(_defineProperty({}, node.tagname, node.child));
+        "__proto__" === node.tagname && (node.tagname = "#__proto__"), node[":@"] && Object.keys(node[":@"]).length > 0 ? this.child.push(_defineProperty(_defineProperty({}, node.tagname, node.child), ":@", node[":@"])) : this.child.push(_defineProperty({}, node.tagname, node.child));
       }
     }]);
     return XmlNode;
@@ -10044,7 +10049,7 @@
     }, {
       key: "updateWrapAABBBounds",
       value: function updateWrapAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var textTheme = getTheme(this).text,
           _this$attribute = this.attribute,
           _this$attribute$fontF = _this$attribute.fontFamily,
@@ -10055,8 +10060,6 @@
           textBaseline = _this$attribute$textB === void 0 ? textTheme.textBaseline : _this$attribute$textB,
           _this$attribute$fontS = _this$attribute.fontSize,
           fontSize = _this$attribute$fontS === void 0 ? textTheme.fontSize : _this$attribute$fontS,
-          _this$attribute$lineH = _this$attribute.lineHeight,
-          lineHeight = _this$attribute$lineH === void 0 ? this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize : _this$attribute$lineH,
           _this$attribute$ellip = _this$attribute.ellipsis,
           ellipsis = _this$attribute$ellip === void 0 ? textTheme.ellipsis : _this$attribute$ellip,
           maxLineWidth = _this$attribute.maxLineWidth,
@@ -10073,8 +10076,9 @@
           _this$attribute$heigh = _this$attribute.heightLimit,
           heightLimit = _this$attribute$heigh === void 0 ? 0 : _this$attribute$heigh,
           lineClamp = _this$attribute.lineClamp,
+          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
           buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
           var _bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
@@ -10106,7 +10110,7 @@
             if ("" !== str && "" === clip.str) {
               if (ellipsis) {
                 var clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -10203,8 +10207,8 @@
           whiteSpace = _attribute$whiteSpace === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace;
         if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
         var buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          _attribute$lineHeight = attribute.lineHeight,
-          lineHeight = _attribute$lineHeight === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight;
+          textFontSize = attribute.fontSize || textTheme.fontSize,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
         if (!this.shouldUpdateShape() && this.cache) {
           width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
           var _dx = textDrawOffsetX(textAlign, width),
@@ -10274,12 +10278,11 @@
           fontFamily = _attribute$fontFamily2 === void 0 ? textTheme.fontFamily : _attribute$fontFamily2,
           _attribute$stroke2 = attribute.stroke,
           stroke = _attribute$stroke2 === void 0 ? textTheme.stroke : _attribute$stroke2,
-          _attribute$lineHeight2 = attribute.lineHeight,
-          lineHeight = _attribute$lineHeight2 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight2,
           _attribute$lineWidth2 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth2 === void 0 ? textTheme.lineWidth : _attribute$lineWidth2,
           _attribute$verticalMo = attribute.verticalMode,
-          verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo;
+          verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         var _attribute$textAlign2 = attribute.textAlign,
           textAlign = _attribute$textAlign2 === void 0 ? textTheme.textAlign : _attribute$textAlign2,
           _attribute$textBaseli2 = attribute.textBaseline,
@@ -10329,7 +10332,7 @@
     }, {
       key: "updateHorizontalMultilineAABBBounds",
       value: function updateHorizontalMultilineAABBBounds(text) {
-        var _a;
+        var _a, _b;
         var textTheme = getTheme(this).text,
           attribute = this.attribute,
           _attribute$fontFamily3 = attribute.fontFamily,
@@ -10342,8 +10345,6 @@
           fontSize = _attribute$fontSize3 === void 0 ? textTheme.fontSize : _attribute$fontSize3,
           _attribute$fontWeight3 = attribute.fontWeight,
           fontWeight = _attribute$fontWeight3 === void 0 ? textTheme.fontWeight : _attribute$fontWeight3,
-          _attribute$lineHeight3 = attribute.lineHeight,
-          lineHeight = _attribute$lineHeight3 === void 0 ? attribute.lineHeight || attribute.fontSize || textTheme.fontSize : _attribute$lineHeight3,
           _attribute$ellipsis3 = attribute.ellipsis,
           ellipsis = _attribute$ellipsis3 === void 0 ? textTheme.ellipsis : _attribute$ellipsis3,
           maxLineWidth = attribute.maxLineWidth,
@@ -10352,9 +10353,10 @@
           _attribute$lineWidth3 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth3 === void 0 ? textTheme.lineWidth : _attribute$lineWidth3,
           _attribute$whiteSpace2 = attribute.whiteSpace,
-          whiteSpace = _attribute$whiteSpace2 === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace2;
+          whiteSpace = _attribute$whiteSpace2 === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace2,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
         if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
           var _bbox2 = this.cache.layoutData.bbox;
           return this._AABBBounds.set(_bbox2.xOffset, _bbox2.yOffset, _bbox2.xOffset + _bbox2.width, _bbox2.yOffset + _bbox2.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
@@ -10390,12 +10392,11 @@
           fontWeight = _attribute$fontWeight4 === void 0 ? textTheme.fontWeight : _attribute$fontWeight4,
           _attribute$stroke4 = attribute.stroke,
           stroke = _attribute$stroke4 === void 0 ? textTheme.stroke : _attribute$stroke4,
-          _attribute$lineHeight4 = attribute.lineHeight,
-          lineHeight = _attribute$lineHeight4 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight4,
           _attribute$lineWidth4 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth4 === void 0 ? textTheme.lineWidth : _attribute$lineWidth4,
           _attribute$verticalMo2 = attribute.verticalMode,
-          verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2;
+          verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         var _attribute$textAlign4 = attribute.textAlign,
           textAlign = _attribute$textAlign4 === void 0 ? textTheme.textAlign : _attribute$textAlign4,
           _attribute$textBaseli4 = attribute.textBaseline,
@@ -10528,7 +10529,7 @@
     }, {
       key: "updateMultilineAABBBounds",
       value: function updateMultilineAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var textTheme = getTheme(this).text,
           _this$attribute = this.attribute,
           _this$attribute$fontF = _this$attribute.fontFamily,
@@ -10539,8 +10540,6 @@
           textBaseline = _this$attribute$textB === void 0 ? textTheme.textBaseline : _this$attribute$textB,
           _this$attribute$fontS = _this$attribute.fontSize,
           fontSize = _this$attribute$fontS === void 0 ? textTheme.fontSize : _this$attribute$fontS,
-          _this$attribute$lineH = _this$attribute.lineHeight,
-          lineHeight = _this$attribute$lineH === void 0 ? this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize : _this$attribute$lineH,
           _this$attribute$ellip = _this$attribute.ellipsis,
           ellipsis = _this$attribute$ellip === void 0 ? textTheme.ellipsis : _this$attribute$ellip,
           maxLineWidth = _this$attribute.maxLineWidth,
@@ -10557,8 +10556,9 @@
           _this$attribute$heigh = _this$attribute.heightLimit,
           heightLimit = _this$attribute$heigh === void 0 ? 0 : _this$attribute$heigh,
           lineClamp = _this$attribute.lineClamp,
+          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
           buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
           var _bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
@@ -10590,7 +10590,7 @@
             if ("" !== str && "" === clip.str) {
               if (ellipsis) {
                 var clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -11337,32 +11337,37 @@
   }(BaseSymbol);
   var close$1 = new CloseSymbol();
 
-  function rect(ctx, size, x, y) {
+  function rectSizeArray(ctx, size, x, y) {
     return ctx.rect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]), !1;
   }
+  function rectSize(ctx, size, x, y) {
+    var w = size,
+      h = size / 2;
+    return ctx.rect(x - w / 2, y - h / 2, w, h), !1;
+  }
   var RectSymbol = /*#__PURE__*/function (_BaseSymbol) {
     _inherits(RectSymbol, _BaseSymbol);
     var _super = _createSuper(RectSymbol);
     function RectSymbol() {
       var _this;
       _classCallCheck(this, RectSymbol);
-      _this = _super.apply(this, arguments), _this.type = "rect", _this.pathStr = "M-0.5,-0.5h1v1h-1Z";
+      _this = _super.apply(this, arguments), _this.type = "rect", _this.pathStr = "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z";
       return _this;
     }
     _createClass(RectSymbol, [{
       key: "draw",
       value: function draw(ctx, size, x, y) {
-        return rect(ctx, vutils.isNumber(size) ? [size, size] : size, x, y);
+        return vutils.isNumber(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
     }, {
       key: "drawOffset",
       value: function drawOffset(ctx, size, x, y, offset) {
-        return rect(ctx, vutils.isNumber(size) ? [size + 2 * offset, size + 2 * offset] : [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return vutils.isNumber(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }]);
     return RectSymbol;
   }(BaseSymbol);
-  var rect$1 = new RectSymbol();
+  var rect = new RectSymbol();
 
   var tempBounds = new vutils.AABBBounds();
   var CustomSymbolClass = /*#__PURE__*/function () {
@@ -11401,11 +11406,17 @@
     return CustomSymbolClass;
   }();
 
-  var builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect$1, lineV$1, lineH$1, close$1];
+  var builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect, lineV$1, lineH$1, close$1];
   var builtinSymbolsMap = {};
   builtinSymbols.forEach(function (symbol) {
     builtinSymbolsMap[symbol.type] = symbol;
   });
+  var builtInSymbolStrMap = {
+    arrowLeft: "M 0.25 -0.5 L -0.25 0 l 0.5 0.5",
+    arrowRight: "M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5",
+    rectRound: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
+    roundLine: "M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z"
+  };
 
   var SYMBOL_UPDATE_TAG_KEY = ["symbolType", "size"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var _Symbol = /*#__PURE__*/function (_Graphic) {
@@ -11439,12 +11450,13 @@
     }, {
       key: "doUpdateParsedPath",
       value: function doUpdateParsedPath() {
-        var symbolTheme = getTheme(this).symbol,
-          _this$attribute$symbo = this.attribute.symbolType,
-          symbolType = _this$attribute$symbo === void 0 ? symbolTheme.symbolType : _this$attribute$symbo;
-        var path = builtinSymbolsMap[symbolType];
+        var symbolTheme = getTheme(this).symbol;
+        var _this$attribute$symbo = this.attribute.symbolType,
+          symbolType = _this$attribute$symbo === void 0 ? symbolTheme.symbolType : _this$attribute$symbo,
+          path = builtinSymbolsMap[symbolType];
         if (path) return this._parsedPath = path, path;
         if (path = _Symbol.userSymbolMap[symbolType], path) return this._parsedPath = path, path;
+        symbolType = builtInSymbolStrMap[symbolType] || symbolType;
         if (!0 === isSvg(symbolType)) {
           var parser = new XMLParser(),
             _parser$parse = parser.parse(symbolType),
@@ -11930,7 +11942,9 @@
   var Paragraph = /*#__PURE__*/function () {
     function Paragraph(text, newLine, character) {
       _classCallCheck(this, Paragraph);
-      this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", "number" == typeof character.lineHeight ? this.lineHeight = character.lineHeight > this.fontSize ? character.lineHeight : this.fontSize : this.lineHeight = Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
+      this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic";
+      var 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;
       var _measureTextCanvas = measureTextCanvas(text, character),
         ascent = _measureTextCanvas.ascent,
         height = _measureTextCanvas.height,
@@ -12469,7 +12483,8 @@
         var _this2 = this;
         var _a;
         var _this$attribute = this.attribute,
-          textConfig = _this$attribute.textConfig,
+          _this$attribute$textC = _this$attribute.textConfig,
+          textConfig = _this$attribute$textC === void 0 ? [] : _this$attribute$textC,
           maxWidth = _this$attribute.maxWidth,
           maxHeight = _this$attribute.maxHeight,
           width = _this$attribute.width,
@@ -15461,7 +15476,7 @@
           var t = textAlign;
           textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
         }
-        var lineHeight = null !== (_c = text.attribute.lineHeight) && void 0 !== _c ? _c : fontSize,
+        var lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         var fVisible = data.fVisible,
@@ -20781,18 +20796,18 @@
 
   const defaultAlternativeColors = ['#ffffff', '#000000'];
   const { Color } = vutils.ColorUtil;
-  function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
+  function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors, mode) {
       if (typeof foregroundColorOrigin !== 'string' || typeof backgroundColorOrogin !== 'string') {
           return foregroundColorOrigin;
       }
       const foregroundColor = new Color(foregroundColorOrigin).toHex();
       const backgroundColor = new Color(backgroundColorOrogin).toHex();
-      if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold)) {
-          return improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
+      if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode)) {
+          return improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
       }
       return foregroundColor;
   }
-  function improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) {
+  function improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode) {
       const alternativeColorPalletes = [];
       if (alternativeColors) {
           if (alternativeColors instanceof Array) {
@@ -20807,13 +20822,27 @@
           if (foregroundColor === alternativeColor) {
               continue;
           }
-          if (contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold)) {
+          if (contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold, mode)) {
               return alternativeColor;
           }
       }
       return undefined;
   }
-  function contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold) {
+  function contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode) {
+      if (mode === 'lightness') {
+          const backgroundColorLightness = Color.getColorBrightness(new Color(backgroundColor));
+          const foregroundColorLightness = Color.getColorBrightness(new Color(foregroundColor));
+          if (foregroundColorLightness < 0.5) {
+              if (backgroundColorLightness >= 0.5) {
+                  return true;
+              }
+              return false;
+          }
+          if (backgroundColorLightness < 0.5) {
+              return true;
+          }
+          return false;
+      }
       if (contrastRatiosThreshold) {
           if (contrastRatios(foregroundColor, backgroundColor) > contrastRatiosThreshold) {
               return true;
@@ -20940,6 +20969,12 @@
       [StateValue.hover]: {},
       [StateValue.hoverReverse]: {}
   };
+  const DEFAULT_HTML_TEXT_SPEC = {
+      container: '',
+      width: 30,
+      height: 30,
+      style: {}
+  };
 
   const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
       return new vutils.TextMeasure(Object.assign({ defaultFontParams: {
@@ -20972,8 +21007,8 @@
           this.name = 'tag';
       }
       render() {
-          var _a;
-          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state } = this.attribute;
+          var _a, _b, _c;
+          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
           let symbol;
@@ -20995,75 +21030,100 @@
           }
           tagWidth += symbolPlaceWidth;
           textX += symbolPlaceWidth;
-          const textAttrs = Object.assign(Object.assign({ text, visible: vutils.isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
-          if (vutils.isNil(textAttrs.lineHeight)) {
-              textAttrs.lineHeight = textAttrs.fontSize;
-          }
-          const textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
-          if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
-              textShape.states = state.text;
-          }
-          const textBounds = measureTextSize(textAttrs.text, textStyle);
-          const textWidth = textBounds.width;
-          const textHeight = textBounds.height;
-          tagWidth += textWidth;
-          const size = (_a = shape.size) !== null && _a !== void 0 ? _a : 10;
-          const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
-          tagHeight += Math.max(textHeight, (shape === null || shape === void 0 ? void 0 : shape.visible) ? maxSize : 0);
-          const { textAlign, textBaseline } = textStyle;
-          if (vutils.isValid(minWidth) || vutils.isValid(maxWidth)) {
-              if (vutils.isValid(minWidth) && tagWidth < minWidth) {
-                  tagWidth = minWidth;
-              }
-              if (vutils.isValid(maxWidth) && tagWidth > maxWidth) {
-                  tagWidth = maxWidth;
-                  textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
-              }
-          }
-          let x = 0;
-          let y = 0;
-          if (textAlign === 'center') {
-              x -= tagWidth / 2;
-              if (symbol) {
-                  symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+          let textShape;
+          if (type === 'rich') {
+              const richTextAttrs = Object.assign(Object.assign({ textConfig: text, visible: vutils.isValid(text) && visible !== false }, textStyle), { x: textX, y: 0, width: (_a = textStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = textStyle.height) !== null && _b !== void 0 ? _b : 0 });
+              textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x: textShape.AABBBounds.x1, y: textShape.AABBBounds.y1, width: textShape.AABBBounds.width(), height: textShape.AABBBounds.height() }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
-              group.setAttribute('x', -symbolPlaceWidth / 2);
           }
-          else if (textAlign === 'right' || textAlign === 'end') {
-              x -= tagWidth;
-              if (symbol) {
-                  symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+          else if (type === 'html') {
+              const richTextAttrs = Object.assign(Object.assign({ textConfig: [], visible: vutils.isValid(text) && visible !== false, html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle) }, textStyle), { x: textX, y: 0 });
+              textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x: textShape.AABBBounds.x1, y: textShape.AABBBounds.y1, width: textShape.AABBBounds.width(), height: textShape.AABBBounds.height() }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
-              group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
           }
-          else if (textAlign === 'left' || textAlign === 'start') {
-              group.setAttribute('x', parsedPadding[3]);
-          }
-          if (textBaseline === 'middle') {
-              y -= tagHeight / 2;
-              if (symbol) {
-                  symbol.setAttribute('y', 0);
+          else {
+              const textAttrs = Object.assign(Object.assign({ text: text, visible: vutils.isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
+              if (vutils.isNil(textAttrs.lineHeight)) {
+                  textAttrs.lineHeight = textStyle.fontSize;
+              }
+              textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
+              if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
+                  textShape.states = state.text;
+              }
+              const textBounds = measureTextSize(textAttrs.text, textStyle);
+              const textWidth = textBounds.width;
+              const textHeight = textBounds.height;
+              tagWidth += textWidth;
+              const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
+              const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
+              tagHeight += Math.max(textHeight, (shape === null || shape === void 0 ? void 0 : shape.visible) ? maxSize : 0);
+              const { textAlign, textBaseline } = textStyle;
+              if (vutils.isValid(minWidth) || vutils.isValid(maxWidth)) {
+                  if (vutils.isValid(minWidth) && tagWidth < minWidth) {
+                      tagWidth = minWidth;
+                  }
+                  if (vutils.isValid(maxWidth) && tagWidth > maxWidth) {
+                      tagWidth = maxWidth;
+                      textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
+                  }
               }
-          }
-          else if (textBaseline === 'bottom') {
-              y -= tagHeight;
-              if (symbol) {
-                  symbol.setAttribute('y', -textHeight / 2);
+              let x = 0;
+              let y = 0;
+              if (textAlign === 'center') {
+                  x -= tagWidth / 2;
+                  if (symbol) {
+                      symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+                  }
+                  group.setAttribute('x', -symbolPlaceWidth / 2);
               }
-              group.setAttribute('y', -parsedPadding[2]);
-          }
-          else if (textBaseline === 'top') {
-              group.setAttribute('y', parsedPadding[0]);
-              if (symbol) {
-                  symbol.setAttribute('y', textHeight / 2);
+              else if (textAlign === 'right' || textAlign === 'end') {
+                  x -= tagWidth;
+                  if (symbol) {
+                      symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+                  }
+                  group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
               }
-          }
-          const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
-          if (visible && vutils.isBoolean(bgVisible)) {
-              const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
-                  y, width: tagWidth, height: tagHeight }), 'rect');
-              if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
-                  bgRect.states = state.panel;
+              else if (textAlign === 'left' || textAlign === 'start') {
+                  group.setAttribute('x', parsedPadding[3]);
+              }
+              if (textBaseline === 'middle') {
+                  y -= tagHeight / 2;
+                  if (symbol) {
+                      symbol.setAttribute('y', 0);
+                  }
+              }
+              else if (textBaseline === 'bottom') {
+                  y -= tagHeight;
+                  if (symbol) {
+                      symbol.setAttribute('y', -textHeight / 2);
+                  }
+                  group.setAttribute('y', -parsedPadding[2]);
+              }
+              else if (textBaseline === 'top') {
+                  group.setAttribute('y', parsedPadding[0]);
+                  if (symbol) {
+                      symbol.setAttribute('y', textHeight / 2);
+                  }
+              }
+              const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+              if (visible && vutils.isBoolean(bgVisible)) {
+                  const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
+                      y, width: tagWidth, height: tagHeight }), 'rect');
+                  if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                      bgRect.states = state.panel;
+                  }
               }
           }
       }
@@ -21935,6 +21995,45 @@
       var _a, _b;
       return (_b = (_a = animationEffects[type]) === null || _a === void 0 ? void 0 : _a.call(animationEffects, textAttribute)) !== null && _b !== void 0 ? _b : { from: {}, to: {} };
   }
+  function updateAnimation(prev, next, animationConfig) {
+      if (!vutils.isArray(animationConfig)) {
+          const { duration, easing, increaseEffect = true } = animationConfig;
+          prev.animate().to(next.attribute, duration, easing);
+          increaseEffect && playIncreaseCount(prev, next, duration, easing);
+          return;
+      }
+      animationConfig.forEach((cfg, i) => {
+          const { duration, easing, increaseEffect = true, channel } = cfg;
+          const { from, to } = update(prev, next, channel, cfg.options);
+          if (!vutils.isEmpty(to)) {
+              prev.animate().to(to, duration, easing);
+          }
+          if ('text' in from && 'text' in to && increaseEffect) {
+              playIncreaseCount(prev, next, duration, easing);
+          }
+      });
+  }
+  const update = (prev, next, channel, options) => {
+      const from = Object.assign({}, prev.attribute);
+      const to = Object.assign({}, next.attribute);
+      vutils.array(options === null || options === void 0 ? void 0 : options.excludeChannels).forEach(key => {
+          delete to[key];
+      });
+      Object.keys(to).forEach(key => {
+          if (channel && !channel.includes(key)) {
+              delete to[key];
+          }
+      });
+      return { from, to };
+  };
+  function playIncreaseCount(prev, next, duration, easing) {
+      if (prev.attribute.text !== next.attribute.text &&
+          vutils.isValidNumber(Number(prev.attribute.text) * Number(next.attribute.text))) {
+          prev
+              .animate()
+              .play(new IncreaseCount({ text: prev.attribute.text }, { text: next.attribute.text }, duration, easing));
+      }
+  }
   const DefaultLabelAnimation = {
       mode: 'same-time',
       duration: 300,
@@ -22128,6 +22227,24 @@
       }
       return points;
   };
+  function labelingLineOrArea(textBounds, graphicBounds, position = 'end', offset = 0) {
+      if (!textBounds || !graphicBounds) {
+          return;
+      }
+      const { x1, x2 } = textBounds;
+      const width = Math.abs(x2 - x1);
+      const anchorX = graphicBounds.x1;
+      const anchorY = graphicBounds.y1;
+      let x = anchorX;
+      const y = anchorY;
+      if (position === 'end') {
+          x = anchorX + width / 2 + offset;
+      }
+      else if (position === 'start') {
+          x = anchorX - width / 2 - offset;
+      }
+      return { x, y };
+  }
 
   class LabelBase extends AbstractComponent {
       setBitmap(bitmap) {
@@ -22275,13 +22392,31 @@
           target.states = state;
       }
       _createLabelText(attributes) {
+          var _a, _b;
+          if (attributes.textType === 'rich') {
+              attributes.textConfig = attributes.text;
+              attributes.width = (_a = attributes.width) !== null && _a !== void 0 ? _a : 0;
+              attributes.height = (_b = attributes.height) !== null && _b !== void 0 ? _b : 0;
+              const text = createRichText(attributes);
+              this._bindEvent(text);
+              this._setStatesOfText(text);
+              return text;
+          }
+          else if (attributes.textType === 'html') {
+              attributes.textConfig = [];
+              attributes.html = Object.assign(Object.assign({ dom: attributes.text }, DEFAULT_HTML_TEXT_SPEC), attributes);
+              const text = createRichText(attributes);
+              this._bindEvent(text);
+              this._setStatesOfText(text);
+              return text;
+          }
           const text = createText(attributes);
           this._bindEvent(text);
           this._setStatesOfText(text);
           return text;
       }
       _prepare() {
-          var _a, _b, _c, _d;
+          var _a, _b, _c, _d, _e;
           const currentBaseMarks = [];
           let baseMarks;
           if (vutils.isFunction(this.attribute.getBaseMarks)) {
@@ -22298,7 +22433,7 @@
           (_a = this._idToGraphic) === null || _a === void 0 ? void 0 : _a.clear();
           (_b = this._idToPoint) === null || _b === void 0 ? void 0 : _b.clear();
           this._baseMarks = currentBaseMarks;
-          this._isCollectionBase = ((_c = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _c === void 0 ? void 0 : _c.type) === 'line' || ((_d = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _d === void 0 ? void 0 : _d.type) === 'area';
+          this._isCollectionBase = this.attribute.type === 'line-data';
           if (!currentBaseMarks || currentBaseMarks.length === 0) {
               return;
           }
@@ -22344,6 +22479,15 @@
                   }
               }
           }
+          if (this.attribute.animation !== false) {
+              this._animationConfig = {
+                  enter: vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_c = this.attribute.animationEnter) !== null && _c !== void 0 ? _c : {}),
+                  exit: vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_d = this.attribute.animationExit) !== null && _d !== void 0 ? _d : {}),
+                  update: vutils.isArray(this.attribute.animationUpdate)
+                      ? this.attribute.animationUpdate
+                      : vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_e = this.attribute.animationUpdate) !== null && _e !== void 0 ? _e : {})
+              };
+          }
       }
       getRelatedGrphic(item) {
           return this._idToGraphic.get(item.id);
@@ -22361,10 +22505,11 @@
                       : baseMark.attribute.fill }, textStyle), textData);
               const text = this._createLabelText(labelAttribute);
               const textBounds = this.getGraphicBounds(text);
+              const actualPosition = vutils.isFunction(position) ? position(textData) : position;
               const graphicBounds = this._isCollectionBase
-                  ? this.getGraphicBounds(null, this._idToPoint.get(textData.id))
-                  : this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
-              const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
+                  ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition)
+                  : this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y }, actualPosition);
+              const textLocation = this.labeling(textBounds, graphicBounds, actualPosition, offset);
               if (textLocation) {
                   labelAttribute.x = textLocation.x;
                   labelAttribute.y = textLocation.y;
@@ -22445,13 +22590,19 @@
               }
               if (!hasPlace && clampForce) {
                   const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
-                  if (!(dx === 0 && dy === 0) &&
-                      canPlace(bmpTool, bitmap, {
-                          x1: text.AABBBounds.x1 + dx,
-                          x2: text.AABBBounds.x2 + dx,
-                          y1: text.AABBBounds.y1 + dy,
-                          y2: text.AABBBounds.y2 + dy
-                      })) {
+                  if (dx === 0 && dy === 0) {
+                      if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
+                          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
+                          result.push(text);
+                          continue;
+                      }
+                  }
+                  else if (canPlace(bmpTool, bitmap, {
+                      x1: text.AABBBounds.x1 + dx,
+                      x2: text.AABBBounds.x2 + dx,
+                      y1: text.AABBBounds.y1 + dy,
+                      y2: text.AABBBounds.y2 + dy
+                  })) {
                       text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
                       bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                       result.push(text);
@@ -22491,12 +22642,6 @@
           }
       }
       _renderWithAnimation(labels) {
-          var _a, _b, _c, _d, _e;
-          const animationConfig = ((_a = this.attribute.animation) !== null && _a !== void 0 ? _a : {});
-          const mode = (_b = animationConfig.mode) !== null && _b !== void 0 ? _b : DefaultLabelAnimation.mode;
-          const duration = (_c = animationConfig.duration) !== null && _c !== void 0 ? _c : DefaultLabelAnimation.duration;
-          const easing = (_d = animationConfig.easing) !== null && _d !== void 0 ? _d : DefaultLabelAnimation.easing;
-          const delay = (_e = animationConfig.delay) !== null && _e !== void 0 ? _e : 0;
           const currentTextMap = new Map();
           const prevTextMap = this._graphicToText || new Map();
           const texts = [];
@@ -22520,13 +22665,7 @@
                       this._syncStateWithRelatedGraphic(relatedGraphic);
                       relatedGraphic.once('animate-bind', a => {
                           text.setAttributes(from);
-                          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
-                              mode,
-                              duration,
-                              easing,
-                              to,
-                              delay
-                          });
+                          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, this._animationConfig.enter);
                           relatedGraphic.on('afterAttributeUpdate', listener);
                       });
                   }
@@ -22536,25 +22675,19 @@
                   prevTextMap.delete(textKey);
                   currentTextMap.set(textKey, prevLabel);
                   const prevText = prevLabel.text;
-                  prevText.animate().to(text.attribute, duration, easing);
+                  const { duration, easing } = this._animationConfig.update;
+                  updateAnimation(prevText, text, this._animationConfig.update);
                   if (prevLabel.labelLine) {
                       prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
                           visible: (_f = (_d = (((_b = (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.line) === null || _b === void 0 ? void 0 : _b.visible) && ((_c = text.attribute) === null || _c === void 0 ? void 0 : _c.visible))) !== null && _d !== void 0 ? _d : (_e = text.attribute) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true,
                           points: (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.points
                       }), duration, easing);
                   }
-                  if (animationConfig.increaseEffect !== false &&
-                      prevText.attribute.text !== text.attribute.text &&
-                      vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
-                      prevText
-                          .animate()
-                          .play(new IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
-                  }
               }
           });
           prevTextMap.forEach(label => {
               var _a;
-              (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+              (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
                   this.removeChild(label.text);
                   if (label === null || label === void 0 ? void 0 : label.labelLine) {
                       this.removeChild(label.labelLine);
@@ -22603,7 +22736,7 @@
               relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
           }
       }
-      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
+      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, { mode, duration, easing, delay }) {
           const listener = (event) => {
               var _a, _b;
               const { detail } = event;
@@ -22621,7 +22754,7 @@
                   text.setAttributes(to);
                   return;
               }
-              const onEnd = () => {
+              const onStart = () => {
                   if (relatedGraphic) {
                       relatedGraphic.onAnimateBind = undefined;
                       relatedGraphic.removeEventListener('afterAttributeUpdate', listener);
@@ -22630,14 +22763,14 @@
               switch (mode) {
                   case 'after':
                       if (detail.animationState.end) {
-                          text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          text.animate({ onStart }).wait(delay).to(to, duration, easing);
                       }
                       break;
                   case 'after-all':
                       if (index === texts.length - 1) {
                           if (detail.animationState.end) {
                               texts.forEach(t => {
-                                  t.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                                  t.animate({ onStart }).wait(delay).to(to, duration, easing);
                               });
                           }
                       }
@@ -22648,12 +22781,12 @@
                           const point = this._idToPoint.get(text.attribute.id);
                           if (point &&
                               (!text.animates || !text.animates.has('label-animate')) &&
-                              this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
-                              text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                              relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
+                              text.animate({ onStart }).wait(delay).to(to, duration, easing);
                           }
                       }
                       else if (detail.animationState.isFirstFrameOfStep) {
-                          text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          text.animate({ onStart }).wait(delay).to(to, duration, easing);
                       }
                       break;
               }
@@ -22663,7 +22796,7 @@
       _smartInvert(labels) {
           var _a, _b, _c, _d, _e;
           const option = (this.attribute.smartInvert || {});
-          const { textType, contrastRatiosThreshold, alternativeColors } = option;
+          const { textType, contrastRatiosThreshold, alternativeColors, mode } = option;
           const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertBase';
           const strokeStrategy = (_b = option.strokeStrategy) !== null && _b !== void 0 ? _b : 'base';
           const brightColor = (_c = option.brightColor) !== null && _c !== void 0 ? _c : '#ffffff';
@@ -22681,7 +22814,7 @@
               const backgroundColor = baseMark.attribute.fill;
               const foregroundColor = label.attribute.fill;
               const baseColor = backgroundColor;
-              const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
+              const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
               const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
               if (outsideEnable) {
                   const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
@@ -22709,7 +22842,7 @@
                       }
                       if (label.attribute.stroke) {
                           label.setAttributes({
-                              fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                              fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
                           });
                           continue;
                       }
@@ -22871,12 +23004,11 @@
           super(vutils.merge({}, LineLabel.defaultAttributes, attributes));
           this.name = 'line-label';
       }
-      getGraphicBounds(graphic, point = {}) {
+      getGraphicBounds(graphic, point = {}, position = 'end') {
           var _a;
           if (graphic.type !== 'line') {
               return super.getGraphicBounds(graphic, point);
           }
-          const { position = 'end' } = this.attribute;
           const points = ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.attribute) === null || _a === void 0 ? void 0 : _a.points) || [point];
           const index = position === 'start' ? 0 : points.length - 1;
           return {
@@ -22887,22 +23019,7 @@
           };
       }
       labeling(textBounds, graphicBounds, position = 'end', offset = 0) {
-          if (!textBounds || !graphicBounds) {
-              return;
-          }
-          const { x1, x2 } = textBounds;
-          const width = Math.abs(x2 - x1);
-          const anchorX = graphicBounds.x1;
-          const anchorY = graphicBounds.y1;
-          let x = anchorX;
-          const y = anchorY;
-          if (position === 'end') {
-              x = anchorX + width / 2 + offset;
-          }
-          else if (position === 'start') {
-              x = anchorX - width / 2 - offset;
-          }
-          return { x, y };
+          return labelingLineOrArea(textBounds, graphicBounds, position, offset);
       }
   }
   LineLabel.defaultAttributes = {
@@ -23642,6 +23759,42 @@
       pickable: false
   };
 
+  class AreaLabel extends LabelBase {
+      constructor(attributes) {
+          super(vutils.merge({}, AreaLabel.defaultAttributes, attributes));
+          this.name = 'line-label';
+      }
+      getGraphicBounds(graphic, point = {}, position = 'end') {
+          var _a;
+          if (graphic.type !== 'area') {
+              return super.getGraphicBounds(graphic, point);
+          }
+          const points = ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.attribute) === null || _a === void 0 ? void 0 : _a.points) || [point];
+          const index = position === 'start' ? 0 : points.length - 1;
+          return {
+              x1: points[index].x,
+              x2: points[index].x,
+              y1: points[index].y,
+              y2: points[index].y
+          };
+      }
+      labeling(textBounds, graphicBounds, position = 'end', offset = 0) {
+          return labelingLineOrArea(textBounds, graphicBounds, position, offset);
+      }
+  }
+  AreaLabel.defaultAttributes = {
+      textStyle: {
+          fontSize: 12,
+          fill: '#000',
+          textAlign: 'center',
+          textBaseline: 'middle',
+          boundsPadding: [-1, 0, -1, 0]
+      },
+      position: 'end',
+      offset: 6,
+      pickable: false
+  };
+
   class LineDataLabel extends LabelBase {
       constructor(attributes) {
           super(vutils.merge({}, LineDataLabel.defaultAttributes, attributes));
@@ -23668,6 +23821,8 @@
       rect: RectLabel,
       symbol: SymbolLabel,
       arc: ArcLabel,
+      line: LineLabel,
+      area: AreaLabel,
       'line-data': LineDataLabel
   };
   class DataLabel extends AbstractComponent {
@@ -23676,6 +23831,7 @@
           this.name = 'data-label';
       }
       render() {
+          var _a;
           const { dataLabels, size } = this.attribute;
           if (!dataLabels || dataLabels.length === 0) {
               return;
@@ -23695,20 +23851,21 @@
               const dataLabel = dataLabels[i];
               const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
               if (labelComponent) {
-                  const { baseMarkGroupName } = dataLabel;
-                  let component = this._componentMap.get(baseMarkGroupName);
+                  const { baseMarkGroupName, type } = dataLabel;
+                  const id = (_a = dataLabel.id) !== null && _a !== void 0 ? _a : `${baseMarkGroupName}-${type}-${i}`;
+                  let component = this._componentMap.get(id);
                   if (component) {
                       component.setBitmapTool(tool);
                       component.setBitmap(bitmap);
                       component.setAttributes(dataLabel);
-                      currentComponentMap.set(baseMarkGroupName, component);
+                      currentComponentMap.set(id, component);
                   }
                   else {
                       component = new labelComponent(dataLabel);
                       component.setBitmap(bitmap);
                       component.setBitmapTool(tool);
                       this.add(component);
-                      currentComponentMap.set(baseMarkGroupName, component);
+                      currentComponentMap.set(id, component);
                   }
               }
           }
@@ -24220,12 +24377,26 @@
           let textAlign = 'center';
           let textBaseline = 'middle';
           data.forEach((item, index) => {
-              var _a, _b;
+              var _a, _b, _c, _d;
               const labelStyle = this._getLabelAttribute(item, index, data, layer);
-              const text = createText(labelStyle);
+              let text;
+              if (labelStyle.type === 'rich') {
+                  labelStyle.textConfig = labelStyle.text;
+                  labelStyle.width = (_a = labelStyle.width) !== null && _a !== void 0 ? _a : 0;
+                  labelStyle.height = (_b = labelStyle.height) !== null && _b !== void 0 ? _b : 0;
+                  text = createRichText(labelStyle);
+              }
+              else if (labelStyle.type === 'html') {
+                  labelStyle.textConfig = [];
+                  labelStyle.html = Object.assign(Object.assign({ dom: labelStyle.text }, DEFAULT_HTML_TEXT_SPEC), labelStyle);
+                  text = createRichText(labelStyle);
+              }
+              else {
+                  text = createText(labelStyle);
+              }
               text.name = exports.AXIS_ELEMENT_NAME.label;
               text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
-              if (vutils.isEmpty((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.state)) {
+              if (vutils.isEmpty((_c = this.attribute.label) === null || _c === void 0 ? void 0 : _c.state)) {
                   text.states = DEFAULT_STATES$2;
               }
               else {
@@ -24238,7 +24409,7 @@
                   text.states = labelState;
               }
               labelGroup.add(text);
-              const angle = (_b = labelStyle.angle) !== null && _b !== void 0 ? _b : 0;
+              const angle = (_d = labelStyle.angle) !== null && _d !== void 0 ? _d : 0;
               maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width());
               maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height());
               if (angle) {
@@ -24387,7 +24558,7 @@
       }
       _getLabelAttribute(tickDatum, index, tickData, layer) {
           var _a, _b, _c, _d, _e, _f;
-          const _g = this.attribute.label, { space = 4, inside = false, formatMethod } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod"]);
+          const _g = this.attribute.label, { space = 4, inside = false, formatMethod, type = 'text', text } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod", "type", "text"]);
           let offset = space;
           let tickLength = 0;
           if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.inside) === inside) {
@@ -24408,7 +24579,9 @@
           }
           const point = this.getVerticalCoord(tickDatum.point, offset, inside);
           const vector = this.getVerticalVector(offset, inside, point);
-          const text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
+          const textContent = formatMethod
+              ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer)
+              : tickDatum.label;
           let { style: textStyle } = tagAttributes;
           textStyle = vutils.isFunction(textStyle)
               ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
@@ -24423,7 +24596,7 @@
                   layer
               });
           }
-          return Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, text, textStyle)), { text, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }), textStyle);
+          return Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), { text: text !== null && text !== void 0 ? text : textContent, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize, type }), textStyle);
       }
       getLabelPosition(point, vector, text, style) {
           return point;
@@ -25161,7 +25334,7 @@
           let titleSpacing = 0;
           const axisLineWidth = (line === null || line === void 0 ? void 0 : line.visible) ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
           const tickLength = (tick === null || tick === void 0 ? void 0 : tick.visible) ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
-          if (title === null || title === void 0 ? void 0 : title.visible) {
+          if ((title === null || title === void 0 ? void 0 : title.visible) && typeof title.text === 'string') {
               titleHeight = measureTextSize(title.text, title.textStyle).height;
               const padding = vutils.normalizePadding(title.padding);
               titleSpacing = title.space + padding[0] + padding[2];
@@ -25956,13 +26129,6 @@
   }
   vutils.mixin(CircleAxisGrid, CircleAxisMixin);
 
-  var DataZoomActiveTag;
-  (function (DataZoomActiveTag) {
-      DataZoomActiveTag["startHandler"] = "startHandler";
-      DataZoomActiveTag["endHandler"] = "endHandler";
-      DataZoomActiveTag["middleHandler"] = "middleHandler";
-      DataZoomActiveTag["background"] = "background";
-  })(DataZoomActiveTag || (DataZoomActiveTag = {}));
   const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
       orient: 'bottom',
       showDetail: 'auto',
@@ -26061,6 +26227,14 @@
       }
   };
 
+  exports.DataZoomActiveTag = void 0;
+  (function (DataZoomActiveTag) {
+      DataZoomActiveTag["startHandler"] = "startHandler";
+      DataZoomActiveTag["endHandler"] = "endHandler";
+      DataZoomActiveTag["middleHandler"] = "middleHandler";
+      DataZoomActiveTag["background"] = "background";
+  })(exports.DataZoomActiveTag || (exports.DataZoomActiveTag = {}));
+
   const delayMap$1 = {
       debounce: vutils.debounce,
       throttle: vutils.throttle
@@ -26088,23 +26262,23 @@
           this._onHandlerPointerDown = (e, tag) => {
               e.stopPropagation();
               if (tag === 'start') {
-                  this._activeTag = DataZoomActiveTag.startHandler;
+                  this._activeTag = exports.DataZoomActiveTag.startHandler;
                   this._activeItem = this._startHandler;
               }
               else if (tag === 'end') {
-                  this._activeTag = DataZoomActiveTag.endHandler;
+                  this._activeTag = exports.DataZoomActiveTag.endHandler;
                   this._activeItem = this._endHandler;
               }
               else if (tag === 'middleRect') {
-                  this._activeTag = DataZoomActiveTag.middleHandler;
+                  this._activeTag = exports.DataZoomActiveTag.middleHandler;
                   this._activeItem = this._middleHandlerRect;
               }
               else if (tag === 'middleSymbol') {
-                  this._activeTag = DataZoomActiveTag.middleHandler;
+                  this._activeTag = exports.DataZoomActiveTag.middleHandler;
                   this._activeItem = this._middleHandlerSymbol;
               }
               else if (tag === 'background') {
-                  this._activeTag = DataZoomActiveTag.background;
+                  this._activeTag = exports.DataZoomActiveTag.background;
                   this._activeItem = this._background;
               }
               this._activeState = true;
@@ -26112,6 +26286,7 @@
               this._activeCache.lastPos = this.eventPosToStagePos(e);
           };
           this._onHandlerPointerMove = (e) => {
+              var _a;
               e.stopPropagation();
               const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
               const pos = this.eventPosToStagePos(e);
@@ -26119,24 +26294,24 @@
               const dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
               let { start, end } = this.state;
               if (this._activeState) {
-                  if (this._activeTag === DataZoomActiveTag.middleHandler) {
+                  if (this._activeTag === exports.DataZoomActiveTag.middleHandler) {
                       this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis);
                   }
-                  else if (this._activeTag === DataZoomActiveTag.startHandler) {
+                  else if (this._activeTag === exports.DataZoomActiveTag.startHandler) {
                       if (start + dis > end) {
                           start = end;
                           end = start + dis;
-                          this._activeTag = DataZoomActiveTag.endHandler;
+                          this._activeTag = exports.DataZoomActiveTag.endHandler;
                       }
                       else {
                           start = start + dis;
                       }
                   }
-                  else if (this._activeTag === DataZoomActiveTag.endHandler) {
+                  else if (this._activeTag === exports.DataZoomActiveTag.endHandler) {
                       if (end + dis < start) {
                           end = start;
                           start = end + dis;
-                          this._activeTag = DataZoomActiveTag.startHandler;
+                          this._activeTag = exports.DataZoomActiveTag.startHandler;
                       }
                       else {
                           end = end + dis;
@@ -26149,7 +26324,7 @@
               end = Math.min(Math.max(end, 0), 1);
               if (startAttr !== start || endAttr !== end) {
                   this.setStateAttr(start, end, true);
-                  realTime && this._updateStateCallback && this._updateStateCallback(start, end);
+                  realTime && ((_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag));
                   this._dispatchChangeEvent(start, end);
               }
           };
@@ -26254,10 +26429,11 @@
           };
       }
       _onHandlerPointerUp(e) {
+          var _a;
           e.preventDefault();
           const { start, end, brushSelect, realTime = true } = this.attribute;
           if (this._activeState) {
-              if (this._activeTag === DataZoomActiveTag.background) {
+              if (this._activeTag === exports.DataZoomActiveTag.background) {
                   const pos = this.eventPosToStagePos(e);
                   this.backgroundDragZoom(this._activeCache.startPos, pos);
               }
@@ -26266,7 +26442,7 @@
           brushSelect && this.renderDragMask();
           if (!realTime || start !== this.state.start || end !== this.state.end) {
               this.setStateAttr(this.state.start, this.state.end, true);
-              this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end);
+              (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.state.start, this.state.end, this._activeTag);
               this._dispatchChangeEvent(this.state.start, this.state.end);
           }
       }
@@ -26316,11 +26492,11 @@
           const { dragMaskStyle } = this.attribute;
           const { position, width, height } = this.getLayoutAttrFromConfig();
           if (this._isHorizontal) {
-              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === exports.DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
                       0, height }, dragMaskStyle), 'rect');
           }
           else {
-              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === exports.DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
                       0 }, dragMaskStyle), 'rect');
           }
       }
@@ -26639,13 +26815,14 @@
           this.dispatchEvent(changeEvent);
       }
       setStartAndEnd(start, end) {
+          var _a;
           const { start: startAttr, end: endAttr } = this.attribute;
           if (vutils.isValid(start) && vutils.isValid(end) && (start !== this.state.start || end !== this.state.end)) {
               this.state.start = start;
               this.state.end = end;
               if (startAttr !== this.state.start || endAttr !== this.state.end) {
                   this.setStateAttr(start, end, true);
-                  this._updateStateCallback && this._updateStateCallback(start, end);
+                  (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag);
                   this._dispatchChangeEvent(start, end);
               }
           }
@@ -27732,51 +27909,23 @@
               const target = e.target;
               if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                   const legendItem = target.delegate;
-                  const selected = legendItem.hasState(exports.LegendStateValue.selected);
-                  if (selected) {
-                      this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
-                  }
-                  else {
-                      this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
-                  }
-                  const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
-                  if (focusButton) {
-                      focusButton.setAttribute('visible', true);
+                  if (this._lastActiveItem) {
+                      if (this._lastActiveItem.id === legendItem.id) {
+                          return;
+                      }
+                      this._unHover(this._lastActiveItem, e);
                   }
-                  this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+                  this._hover(legendItem, e);
+              }
+              else if (this._lastActiveItem) {
+                  this._unHover(this._lastActiveItem, e);
+                  this._lastActiveItem = null;
               }
           };
           this._onUnHover = (e) => {
-              var _a;
-              const target = e.target;
-              if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
-                  const legendItem = target.delegate;
-                  let attributeUpdate = false;
-                  if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) ||
-                      legendItem.hasState(exports.LegendStateValue.selectedHover)) {
-                      attributeUpdate = true;
-                  }
-                  legendItem.removeState(exports.LegendStateValue.unSelectedHover);
-                  legendItem.removeState(exports.LegendStateValue.selectedHover);
-                  legendItem
-                      .getChildren()[0]
-                      .getChildren()
-                      .forEach((child) => {
-                      if (!attributeUpdate &&
-                          (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
-                          attributeUpdate = true;
-                      }
-                      child.removeState(exports.LegendStateValue.unSelectedHover);
-                      child.removeState(exports.LegendStateValue.selectedHover);
-                  });
-                  const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
-                  if (focusButton) {
-                      focusButton.setAttribute('visible', false);
-                  }
-                  if (attributeUpdate) {
-                      this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
-                  }
-                  this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+              if (this._lastActiveItem) {
+                  this._unHover(this._lastActiveItem, e);
+                  this._lastActiveItem = null;
               }
           };
           this._onClick = (e) => {
@@ -27966,7 +28115,7 @@
           const { hover = true, select = true } = this.attribute;
           if (hover) {
               this._itemsContainer.addEventListener('pointermove', this._onHover);
-              this._itemsContainer.addEventListener('pointerout', this._onUnHover);
+              this._itemsContainer.addEventListener('pointerleave', this._onUnHover);
           }
           if (select) {
               this._itemsContainer.addEventListener('pointerdown', this._onClick);
@@ -27994,6 +28143,7 @@
               itemGroup = createGroup(Object.assign({ x: 0, y: 0 }, background === null || background === void 0 ? void 0 : background.style));
               this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup, background === null || background === void 0 ? void 0 : background.state);
           }
+          itemGroup.id = `${id !== null && id !== void 0 ? id : label}-${index}`;
           itemGroup.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
           const innerGroup = createGroup({
               x: 0,
@@ -28002,22 +28152,26 @@
           });
           itemGroup.add(innerGroup);
           let focusStartX = 0;
-          const shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
-          const shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
-          const itemShape = createSymbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
-          Object.keys(shapeAttr.state || {}).forEach(key => {
-              const color = shapeAttr.state[key].fill ||
-                  shapeAttr.state[key].stroke;
-              if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
-                  shapeAttr.state[key].fill = color;
-              }
-              if (shape.stroke && vutils.isNil(shapeAttr.state[key].stroke) && color) {
-                  shapeAttr.state[key].stroke = color;
-              }
-          });
-          this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.state);
-          itemShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
-          innerGroup.add(itemShape);
+          let shapeSize = 0;
+          let shapeSpace = 0;
+          if ((shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.visible) !== false) {
+              shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
+              shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
+              const itemShape = createSymbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
+              Object.keys(shapeAttr.state || {}).forEach(key => {
+                  const color = shapeAttr.state[key].fill ||
+                      shapeAttr.state[key].stroke;
+                  if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
+                      shapeAttr.state[key].fill = color;
+                  }
+                  if (shape.stroke && vutils.isNil(shapeAttr.state[key].stroke) && color) {
+                      shapeAttr.state[key].stroke = color;
+                  }
+              });
+              this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.state);
+              itemShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
+              innerGroup.add(itemShape);
+          }
           let focusShape;
           let focusSpace = 0;
           if (focus) {
@@ -28219,6 +28373,48 @@
           this._pager.addEventListener('toNext', onPaging);
           return true;
       }
+      _hover(legendItem, e) {
+          this._lastActiveItem = legendItem;
+          const selected = legendItem.hasState(exports.LegendStateValue.selected);
+          if (selected) {
+              this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
+          }
+          else {
+              this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
+          }
+          const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
+          if (focusButton) {
+              focusButton.setAttribute('visible', true);
+          }
+          this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+      }
+      _unHover(legendItem, e) {
+          let attributeUpdate = false;
+          if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) || legendItem.hasState(exports.LegendStateValue.selectedHover)) {
+              attributeUpdate = true;
+          }
+          legendItem.removeState(exports.LegendStateValue.unSelectedHover);
+          legendItem.removeState(exports.LegendStateValue.selectedHover);
+          legendItem
+              .getChildren()[0]
+              .getChildren()
+              .forEach((child) => {
+              if (!attributeUpdate &&
+                  (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
+                  attributeUpdate = true;
+              }
+              child.removeState(exports.LegendStateValue.unSelectedHover);
+              child.removeState(exports.LegendStateValue.selectedHover);
+          });
+          const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
+          if (focusButton) {
+              focusButton.setAttribute('visible', false);
+          }
+          if (attributeUpdate) {
+              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+          }
+          this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+      }
       _setLegendItemState(legendItem, stateName, e) {
           const keepCurrentStates = true;
           let attributeUpdate = false;
@@ -29369,58 +29565,46 @@
           this.name = 'title';
       }
       render() {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
-          const { text, textStyle, subtext, subtextStyle, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55;
+          const { textType, text, subtextType, textStyle, subtext, subtextStyle, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('title-container', { x: parsedPadding[3], y: parsedPadding[0], zIndex: 1 }, 'group');
           if (((_a = this.attribute) === null || _a === void 0 ? void 0 : _a.visible) !== false && (textStyle === null || textStyle === void 0 ? void 0 : textStyle.visible) !== false) {
-              if (textStyle && vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.character)) {
-                  const attr = {
-                      x: (_b = textStyle.x) !== null && _b !== void 0 ? _b : 0,
-                      y: (_c = textStyle.y) !== null && _c !== void 0 ? _c : 0,
-                      width: (_e = (_d = textStyle.width) !== null && _d !== void 0 ? _d : width) !== null && _e !== void 0 ? _e : 0,
-                      height: (_g = (_f = textStyle.height) !== null && _f !== void 0 ? _f : height) !== null && _g !== void 0 ? _g : 0,
-                      ellipsis: (_h = textStyle.ellipsis) !== null && _h !== void 0 ? _h : true,
-                      wordBreak: (_j = textStyle.wordBreak) !== null && _j !== void 0 ? _j : 'break-word',
-                      maxHeight: textStyle.maxHeight,
-                      maxWidth: textStyle.maxWidth,
-                      textConfig: textStyle.character
-                  };
+              if (textType === 'rich' || vutils.isValid(textStyle.character)) {
+                  const attr = Object.assign({ x: (_b = textStyle.x) !== null && _b !== void 0 ? _b : 0, y: (_c = textStyle.y) !== null && _c !== void 0 ? _c : 0, width: (_e = (_d = textStyle.width) !== null && _d !== void 0 ? _d : width) !== null && _e !== void 0 ? _e : 0, height: (_g = (_f = textStyle.height) !== null && _f !== void 0 ? _f : height) !== null && _g !== void 0 ? _g : 0, ellipsis: (_h = textStyle.ellipsis) !== null && _h !== void 0 ? _h : true, wordBreak: (_j = textStyle.wordBreak) !== null && _j !== void 0 ? _j : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: (_k = text) !== null && _k !== void 0 ? _k : textStyle.character }, 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: (_l = textStyle.x) !== null && _l !== void 0 ? _l : 0, y: (_m = textStyle.y) !== null && _m !== void 0 ? _m : 0, width: (_p = (_o = textStyle.width) !== null && _o !== void 0 ? _o : width) !== null && _p !== void 0 ? _p : 0, height: (_r = (_q = textStyle.height) !== null && _q !== void 0 ? _q : height) !== null && _r !== void 0 ? _r : 0, ellipsis: (_s = textStyle.ellipsis) !== null && _s !== void 0 ? _s : true, wordBreak: (_t = textStyle.wordBreak) !== null && _t !== void 0 ? _t : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
                   this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
               }
               else if (vutils.isValid(text)) {
-                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_k = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _k !== void 0 ? _k : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_l = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _l !== void 0 ? _l : true, x: 0, y: 0 }), 'wrapText');
-              }
-          }
-          const maintextHeight = this._mainTitle ? (_m = this._mainTitle) === null || _m === void 0 ? void 0 : _m.AABBBounds.height() : 0;
-          const maintextWidth = this._mainTitle ? (_o = this._mainTitle) === null || _o === void 0 ? void 0 : _o.AABBBounds.width() : 0;
-          if (((_p = this.attribute) === null || _p === void 0 ? void 0 : _p.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
-              if (subtextStyle && vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.character)) {
-                  const attr = {
-                      x: (_q = subtextStyle.x) !== null && _q !== void 0 ? _q : 0,
-                      y: (_r = subtextStyle.y) !== null && _r !== void 0 ? _r : maintextHeight,
-                      width: (_t = (_s = subtextStyle.width) !== null && _s !== void 0 ? _s : width) !== null && _t !== void 0 ? _t : 0,
-                      height: (_v = (_u = subtextStyle.height) !== null && _u !== void 0 ? _u : height) !== null && _v !== void 0 ? _v : 0,
-                      ellipsis: (_w = subtextStyle.ellipsis) !== null && _w !== void 0 ? _w : true,
-                      wordBreak: (_x = subtextStyle.wordBreak) !== null && _x !== void 0 ? _x : 'break-word',
-                      maxHeight: subtextStyle.maxHeight,
-                      maxWidth: subtextStyle.maxWidth,
-                      textConfig: subtextStyle.character
-                  };
+                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_u = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _u !== void 0 ? _u : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_v = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _v !== void 0 ? _v : true, x: 0, y: 0 }), 'wrapText');
+              }
+          }
+          const maintextHeight = this._mainTitle ? (_w = this._mainTitle) === null || _w === void 0 ? void 0 : _w.AABBBounds.height() : 0;
+          const maintextWidth = this._mainTitle ? (_x = this._mainTitle) === null || _x === void 0 ? void 0 : _x.AABBBounds.width() : 0;
+          if (((_y = this.attribute) === null || _y === void 0 ? void 0 : _y.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
+              if (subtextType === 'rich' || vutils.isValid(subtextStyle.character)) {
+                  const attr = Object.assign({ x: (_z = subtextStyle.x) !== null && _z !== void 0 ? _z : 0, y: (_0 = subtextStyle.y) !== null && _0 !== void 0 ? _0 : 0, width: (_2 = (_1 = subtextStyle.width) !== null && _1 !== void 0 ? _1 : width) !== null && _2 !== void 0 ? _2 : 0, height: (_4 = (_3 = subtextStyle.height) !== null && _3 !== void 0 ? _3 : height) !== null && _4 !== void 0 ? _4 : 0, ellipsis: (_5 = subtextStyle.ellipsis) !== null && _5 !== void 0 ? _5 : true, wordBreak: (_6 = subtextStyle.wordBreak) !== null && _6 !== void 0 ? _6 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: (_7 = subtext) !== null && _7 !== void 0 ? _7 : subtextStyle.character }, subtextStyle);
+                  this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
+              }
+              else if (subtextType === 'html') {
+                  const attr = Object.assign({ html: Object.assign(Object.assign({ dom: subtext }, DEFAULT_HTML_TEXT_SPEC), subtextStyle), x: (_8 = subtextStyle.x) !== null && _8 !== void 0 ? _8 : 0, y: (_9 = subtextStyle.y) !== null && _9 !== void 0 ? _9 : 0, width: (_11 = (_10 = subtextStyle.width) !== null && _10 !== void 0 ? _10 : width) !== null && _11 !== void 0 ? _11 : 0, height: (_13 = (_12 = subtextStyle.height) !== null && _12 !== void 0 ? _12 : height) !== null && _13 !== void 0 ? _13 : 0, ellipsis: (_14 = subtextStyle.ellipsis) !== null && _14 !== void 0 ? _14 : true, wordBreak: (_15 = subtextStyle.wordBreak) !== null && _15 !== void 0 ? _15 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
                   this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
               }
               else if (vutils.isValid(subtext)) {
-                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_y = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _y !== void 0 ? _y : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_z = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _z !== void 0 ? _z : true, x: 0, y: maintextHeight }), 'wrapText');
+                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_16 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _16 !== void 0 ? _16 : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_17 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _17 !== void 0 ? _17 : true, x: 0, y: maintextHeight }), 'wrapText');
               }
           }
-          const subtextHeight = this._subTitle ? (_0 = this._subTitle) === null || _0 === void 0 ? void 0 : _0.AABBBounds.height() : 0;
-          const subtextWidth = this._subTitle ? (_1 = this._subTitle) === null || _1 === void 0 ? void 0 : _1.AABBBounds.width() : 0;
+          const subtextHeight = this._subTitle ? (_18 = this._subTitle) === null || _18 === void 0 ? void 0 : _18.AABBBounds.height() : 0;
+          const subtextWidth = this._subTitle ? (_19 = this._subTitle) === null || _19 === void 0 ? void 0 : _19.AABBBounds.width() : 0;
           let titleWidth = Math.max(maintextWidth, subtextWidth);
-          let titleHeight = maintextHeight + ((_2 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _2 !== void 0 ? _2 : subtextHeight);
+          let titleHeight = maintextHeight + ((_20 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _20 !== void 0 ? _20 : subtextHeight);
           if (vutils.isValid(width)) {
               titleWidth = width;
-              (_3 = this._mainTitle) === null || _3 === void 0 ? void 0 : _3.setAttribute('maxLineWidth', width);
-              (_4 = this._subTitle) === null || _4 === void 0 ? void 0 : _4.setAttribute('maxLineWidth', width);
+              (_21 = this._mainTitle) === null || _21 === void 0 ? void 0 : _21.setAttribute('maxLineWidth', width);
+              (_22 = this._subTitle) === null || _22 === void 0 ? void 0 : _22.setAttribute('maxLineWidth', width);
           }
           if (vutils.isValid(height)) {
               titleHeight = height;
@@ -29429,10 +29613,10 @@
               titleWidth = minWidth;
           }
           if (vutils.isValid(maxWidth)) {
-              (_5 = this._mainTitle) === null || _5 === void 0 ? void 0 : _5.setAttribute('maxLineWidth', maxWidth);
-              (_6 = this._subTitle) === null || _6 === void 0 ? void 0 : _6.setAttribute('maxLineWidth', maxWidth);
-              (_7 = this._mainTitle) === null || _7 === void 0 ? void 0 : _7.setAttribute('maxWidth', maxWidth);
-              (_8 = this._subTitle) === null || _8 === void 0 ? void 0 : _8.setAttribute('maxWidth', maxWidth);
+              (_23 = this._mainTitle) === null || _23 === void 0 ? void 0 : _23.setAttribute('maxLineWidth', maxWidth);
+              (_24 = this._subTitle) === null || _24 === void 0 ? void 0 : _24.setAttribute('maxLineWidth', maxWidth);
+              (_25 = this._mainTitle) === null || _25 === void 0 ? void 0 : _25.setAttribute('maxWidth', maxWidth);
+              (_26 = this._subTitle) === null || _26 === void 0 ? void 0 : _26.setAttribute('maxWidth', maxWidth);
               if (titleWidth > maxWidth) {
                   titleWidth = maxWidth;
               }
@@ -29441,8 +29625,8 @@
               titleHeight = minHeight;
           }
           if (vutils.isValid(maxHeight)) {
-              (_9 = this._mainTitle) === null || _9 === void 0 ? void 0 : _9.setAttribute('maxHeight', maxHeight);
-              (_10 = this._subTitle) === null || _10 === void 0 ? void 0 : _10.setAttribute('maxHeight', maxHeight - maintextHeight);
+              (_27 = this._mainTitle) === null || _27 === void 0 ? void 0 : _27.setAttribute('maxHeight', maxHeight);
+              (_28 = this._subTitle) === null || _28 === void 0 ? void 0 : _28.setAttribute('maxHeight', maxHeight - maintextHeight);
               if (titleHeight > maxHeight) {
                   titleHeight = maxHeight;
               }
@@ -29452,67 +29636,67 @@
           group.attribute.boundsPadding = parsedPadding;
           if (vutils.isValid(align) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.align)) {
               const mainTitleAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.align) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.align : align;
-              const mainTitleWidth = (_11 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _11 !== void 0 ? _11 : maintextWidth;
+              const mainTitleWidth = (_29 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _29 !== void 0 ? _29 : maintextWidth;
               if (mainTitleAlign === 'left') {
-                  (_12 = this._mainTitle) === null || _12 === void 0 ? void 0 : _12.setAttribute('x', 0);
-                  (_13 = this._mainTitle) === null || _13 === void 0 ? void 0 : _13.setAttribute('textAlign', 'left');
+                  (_30 = this._mainTitle) === null || _30 === void 0 ? void 0 : _30.setAttribute('x', 0);
+                  (_31 = this._mainTitle) === null || _31 === void 0 ? void 0 : _31.setAttribute('textAlign', 'left');
               }
               else if (mainTitleAlign === 'center') {
-                  (_14 = this._mainTitle) === null || _14 === void 0 ? void 0 : _14.setAttribute('x', mainTitleWidth / 2);
-                  (_15 = this._mainTitle) === null || _15 === void 0 ? void 0 : _15.setAttribute('textAlign', 'center');
+                  (_32 = this._mainTitle) === null || _32 === void 0 ? void 0 : _32.setAttribute('x', mainTitleWidth / 2);
+                  (_33 = this._mainTitle) === null || _33 === void 0 ? void 0 : _33.setAttribute('textAlign', 'center');
               }
               else if (mainTitleAlign === 'right') {
-                  (_16 = this._mainTitle) === null || _16 === void 0 ? void 0 : _16.setAttribute('x', mainTitleWidth);
-                  (_17 = this._mainTitle) === null || _17 === void 0 ? void 0 : _17.setAttribute('textAlign', 'right');
+                  (_34 = this._mainTitle) === null || _34 === void 0 ? void 0 : _34.setAttribute('x', mainTitleWidth);
+                  (_35 = this._mainTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('textAlign', 'right');
               }
           }
           if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
               const mainTitleVerticalAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign : verticalAlign;
               const mainTitleHeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.height) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.height : titleHeight;
               if (mainTitleVerticalAlign === 'top') {
-                  (_18 = this._mainTitle) === null || _18 === void 0 ? void 0 : _18.setAttribute('y', 0);
-                  (_19 = this._mainTitle) === null || _19 === void 0 ? void 0 : _19.setAttribute('textBaseline', 'top');
+                  (_36 = this._mainTitle) === null || _36 === void 0 ? void 0 : _36.setAttribute('y', 0);
+                  (_37 = this._mainTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('textBaseline', 'top');
               }
               else if (mainTitleVerticalAlign === 'middle') {
-                  (_20 = this._mainTitle) === null || _20 === void 0 ? void 0 : _20.setAttribute('y', mainTitleHeight / 2);
-                  (_21 = this._mainTitle) === null || _21 === void 0 ? void 0 : _21.setAttribute('textBaseline', 'middle');
+                  (_38 = this._mainTitle) === null || _38 === void 0 ? void 0 : _38.setAttribute('y', mainTitleHeight / 2);
+                  (_39 = this._mainTitle) === null || _39 === void 0 ? void 0 : _39.setAttribute('textBaseline', 'middle');
               }
               else if (mainTitleVerticalAlign === 'bottom') {
-                  (_22 = this._mainTitle) === null || _22 === void 0 ? void 0 : _22.setAttribute('y', mainTitleHeight);
-                  (_23 = this._mainTitle) === null || _23 === void 0 ? void 0 : _23.setAttribute('textBaseline', 'bottom');
+                  (_40 = this._mainTitle) === null || _40 === void 0 ? void 0 : _40.setAttribute('y', mainTitleHeight);
+                  (_41 = this._mainTitle) === null || _41 === void 0 ? void 0 : _41.setAttribute('textBaseline', 'bottom');
               }
           }
           if (vutils.isValid(align) || vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align)) {
               const subTitleAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align : align;
-              const subTitleWidth = (_24 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _24 !== void 0 ? _24 : subtextWidth;
+              const subTitleWidth = (_42 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _42 !== void 0 ? _42 : subtextWidth;
               if (subTitleAlign === 'left') {
-                  (_25 = this._subTitle) === null || _25 === void 0 ? void 0 : _25.setAttribute('x', 0);
-                  (_26 = this._subTitle) === null || _26 === void 0 ? void 0 : _26.setAttribute('textAlign', 'left');
+                  (_43 = this._subTitle) === null || _43 === void 0 ? void 0 : _43.setAttribute('x', 0);
+                  (_44 = this._subTitle) === null || _44 === void 0 ? void 0 : _44.setAttribute('textAlign', 'left');
               }
               else if (subTitleAlign === 'center') {
-                  (_27 = this._subTitle) === null || _27 === void 0 ? void 0 : _27.setAttribute('x', subTitleWidth / 2);
-                  (_28 = this._subTitle) === null || _28 === void 0 ? void 0 : _28.setAttribute('textAlign', 'center');
+                  (_45 = this._subTitle) === null || _45 === void 0 ? void 0 : _45.setAttribute('x', subTitleWidth / 2);
+                  (_46 = this._subTitle) === null || _46 === void 0 ? void 0 : _46.setAttribute('textAlign', 'center');
               }
               else if (subTitleAlign === 'right') {
-                  (_29 = this._subTitle) === null || _29 === void 0 ? void 0 : _29.setAttribute('x', subTitleWidth);
-                  (_30 = this._subTitle) === null || _30 === void 0 ? void 0 : _30.setAttribute('textAlign', 'right');
+                  (_47 = this._subTitle) === null || _47 === void 0 ? void 0 : _47.setAttribute('x', subTitleWidth);
+                  (_48 = this._subTitle) === null || _48 === void 0 ? void 0 : _48.setAttribute('textAlign', 'right');
               }
           }
           if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
               const subTitleVerticalAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign : verticalAlign;
               const subTitleYStart = maintextHeight;
-              const subTitleHeight = (_31 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _31 !== void 0 ? _31 : 0;
+              const subTitleHeight = (_49 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _49 !== void 0 ? _49 : 0;
               if (subTitleVerticalAlign === 'top') {
-                  (_32 = this._subTitle) === null || _32 === void 0 ? void 0 : _32.setAttribute('y', subTitleYStart);
-                  (_33 = this._subTitle) === null || _33 === void 0 ? void 0 : _33.setAttribute('textBaseline', 'top');
+                  (_50 = this._subTitle) === null || _50 === void 0 ? void 0 : _50.setAttribute('y', subTitleYStart);
+                  (_51 = this._subTitle) === null || _51 === void 0 ? void 0 : _51.setAttribute('textBaseline', 'top');
               }
               else if (subTitleVerticalAlign === 'middle') {
-                  (_34 = this._subTitle) === null || _34 === void 0 ? void 0 : _34.setAttribute('y', subTitleYStart + subTitleHeight / 2);
-                  (_35 = this._subTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('textBaseline', 'middle');
+                  (_52 = this._subTitle) === null || _52 === void 0 ? void 0 : _52.setAttribute('y', subTitleYStart + subTitleHeight / 2);
+                  (_53 = this._subTitle) === null || _53 === void 0 ? void 0 : _53.setAttribute('textBaseline', 'middle');
               }
               else if (subTitleVerticalAlign === 'bottom') {
-                  (_36 = this._subTitle) === null || _36 === void 0 ? void 0 : _36.setAttribute('y', subTitleYStart + subTitleHeight);
-                  (_37 = this._subTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('textBaseline', 'bottom');
+                  (_54 = this._subTitle) === null || _54 === void 0 ? void 0 : _54.setAttribute('y', subTitleYStart + subTitleHeight);
+                  (_55 = this._subTitle) === null || _55 === void 0 ? void 0 : _55.setAttribute('textBaseline', 'bottom');
               }
           }
       }
@@ -29567,7 +29751,7 @@
           this.name = 'indicator';
       }
       render() {
-          var _a;
+          var _a, _b, _c;
           const { visible, title, content, size, limitRatio = Infinity } = this.attribute;
           const limit = Math.min(size.width, size.height) * limitRatio;
           const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group');
@@ -29578,7 +29762,15 @@
           if (vutils.isValid(title)) {
               if (title.visible !== false) {
                   const titleStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'title.style'), title.style);
-                  this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({}, titleStyle), { lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, visible: title.visible, x: 0, y: 0 }), 'text');
+                  if (titleStyle.type === 'rich') {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({ textConfig: titleStyle.text }, titleStyle), { visible: title.visible, x: 0, y: 0, width: (_a = titleStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = titleStyle.height) !== null && _b !== void 0 ? _b : 0 }), 'richtext');
+                  }
+                  else if (titleStyle.type === 'html') {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({ textConfig: [], html: Object.assign(Object.assign({ dom: titleStyle.text }, DEFAULT_HTML_TEXT_SPEC), titleStyle) }, titleStyle), { visible: title.visible, x: 0, y: 0 }), 'richtext');
+                  }
+                  else {
+                      this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({}, titleStyle), { lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, visible: title.visible, x: 0, y: 0 }), 'text');
+                  }
                   if (title.autoFit && vutils.isValidNumber(limit)) {
                       this._setAutoFit(limit, this._title, title);
                   }
@@ -29599,9 +29791,19 @@
               const contentComponents = [];
               let lastContentHeight = 0;
               contents.forEach((contentItem, i) => {
+                  var _a, _b;
                   if (contentItem.visible !== false) {
                       const contentStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'content.style'), contentItem.style);
-                      const contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({}, contentStyle), { lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize, visible: contentItem.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'text');
+                      let contentComponent;
+                      if (contentStyle.type === 'rich') {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({ textConfig: contentStyle.text }, contentStyle), { visible: title.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight, width: (_a = contentStyle.width) !== null && _a !== void 0 ? _a : 0, height: (_b = contentStyle.height) !== null && _b !== void 0 ? _b : 0 }), 'richtext');
+                      }
+                      else if (contentStyle.type === 'html') {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({ textConfig: [], html: Object.assign(Object.assign({ dom: contentStyle.text }, DEFAULT_HTML_TEXT_SPEC), contentStyle) }, contentStyle), { visible: title.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'richtext');
+                      }
+                      else {
+                          contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({}, contentStyle), { lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize, visible: contentItem.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'text');
+                      }
                       if (contentItem.autoFit && vutils.isValidNumber(limit)) {
                           this._setAutoFit(limit, contentComponent, contentItem);
                       }
@@ -29619,13 +29821,13 @@
               });
               this._content = contentComponents;
           }
-          const totalHeight = (_a = group === null || group === void 0 ? void 0 : group.AABBBounds.height()) !== null && _a !== void 0 ? _a : 0;
+          const totalHeight = (_c = group === null || group === void 0 ? void 0 : group.AABBBounds.height()) !== null && _c !== void 0 ? _c : 0;
           group.setAttribute('y', size.height / 2 - totalHeight / 2);
           group.setAttribute('x', size.width / 2);
       }
       _setAutoFit(limit, indicatorItem, indicatorItemSpec) {
           var _a, _b, _c, _d, _e, _f;
-          const originWidth = measureTextSize((_b = (_a = indicatorItemSpec.style) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '', (_c = indicatorItemSpec.style) !== null && _c !== void 0 ? _c : {}).width;
+          const originWidth = measureTextSize(((_b = (_a = indicatorItemSpec.style) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ''), ((_c = indicatorItemSpec.style) !== null && _c !== void 0 ? _c : {})).width;
           if (originWidth > 0) {
               const ratio = (limit * ((_d = indicatorItemSpec.fitPercent) !== null && _d !== void 0 ? _d : 0.5)) / originWidth;
               const fontSize = Math.floor(((_f = (_e = indicatorItemSpec.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 20) * ratio);
@@ -30864,6 +31066,17 @@
   };
   const getRichTextAttribute = (attr) => {
       const { width, height, wordBreak = 'break-word', textAlign, textBaseline, text } = attr;
+      if (Array.isArray(text)) {
+          return {
+              width,
+              height,
+              wordBreak: wordBreak,
+              textAlign: textAlign,
+              textBaseline: textBaseline,
+              singleLine: false,
+              textConfig: vutils.array(text).map(text => (Object.assign(Object.assign({}, attr), { text })))
+          };
+      }
       return {
           width,
           height,
@@ -30871,7 +31084,7 @@
           textAlign: textAlign,
           textBaseline: textBaseline,
           singleLine: false,
-          textConfig: vutils.array(text).map(text => (Object.assign(Object.assign({}, attr), { text })))
+          textConfig: text.text
       };
   };
 
@@ -30960,6 +31173,7 @@
           this.name = 'tooltip';
       }
       render() {
+          var _a;
           const { visible, content, panel, keyWidth, valueWidth, hasContentShape, autoCalculatePosition, autoMeasure } = this.attribute;
           if (!visible) {
               this.hideAll();
@@ -30978,11 +31192,22 @@
           this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, vutils.merge({ symbolType: 'circle' }, titleAttr.shape, {
               visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
           }), 'symbol');
-          if (titleAttr.value.multiLine) {
+          if (typeof titleAttr.value.text === 'object' &&
+              titleAttr.value.text !== null &&
+              (titleAttr.value.text.type === 'rich' ||
+                  titleAttr.value.text.type === 'html')) {
+              if (titleAttr.value.text.type === 'rich') {
+                  this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, getRichTextAttribute(titleAttr.value)), 'richtext');
+              }
+              else if (titleAttr.value.text.type === 'html') {
+                  this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ html: Object.assign(Object.assign({ dom: titleAttr.value.text.text }, DEFAULT_HTML_TEXT_SPEC), titleAttr.value), visible: isVisible(titleAttr) && isVisible(titleAttr.value), width: titleAttr.value.width, height: titleAttr.value.height, wordBreak: titleAttr.value.wordBreak, textAlign: titleAttr.value.textAlign, textBaseline: titleAttr.value.textBaseline, singleLine: false, textConfig: [] }, titleAttr.value), 'richtext');
+              }
+          }
+          else if (titleAttr.value.multiLine) {
               this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, getRichTextAttribute(titleAttr.value)), 'richtext');
           }
           else {
-              this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ text: '', visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, titleAttr.value), 'text');
+              this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ text: ((_a = titleAttr.value.text) !== null && _a !== void 0 ? _a : ''), visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, titleAttr.value), 'text');
           }
           const titlePaddingLeft = isVisible(titleAttr.shape) ? titleAttr.shape.size + titleAttr.shape.spacing : 0;
           const { textAlign, textBaseline } = titleAttr.value;
@@ -31013,7 +31238,7 @@
               this._tooltipContent.setAttribute('y', padding[0] + titleHeight);
               let lastYPos = 0;
               content.forEach((item, i) => {
-                  var _a;
+                  var _a, _b, _c;
                   const itemAttr = Tooltip.getContentAttr(this.attribute, i);
                   if (!isVisible(itemAttr)) {
                       return;
@@ -31023,7 +31248,9 @@
                   let x = 0;
                   if (isVisible(itemAttr.shape)) {
                       itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
-                              (((_a = itemAttr.key.lineHeight) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2 }, itemAttr.shape), 'symbol');
+                              (((_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) -
+                                  itemAttr.shape.size) /
+                                  2 }, itemAttr.shape), 'symbol');
                   }
                   if (hasContentShape) {
                       x += itemAttr.shape.size + itemAttr.shape.spacing;
@@ -31033,8 +31260,21 @@
                       if (itemAttr.key.multiLine) {
                           element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
                       }
+                      else if (typeof itemAttr.key.text === 'object' &&
+                          itemAttr.key.text !== null &&
+                          (itemAttr.key.text.type === 'rich' ||
+                              itemAttr.key.text.type === 'html')) {
+                          if (itemAttr.key.text.type === 'rich') {
+                              element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
+                          }
+                          else {
+                              element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                                  html: Object.assign(Object.assign({ dom: itemAttr.key.text.text }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
+                              }, 'richtext');
+                          }
+                      }
                       else {
-                          element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, itemAttr.key), { textBaseline: 'top' }), 'text');
+                          element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_b = itemAttr.key.text) !== null && _b !== void 0 ? _b : '') }, itemAttr.key), { textBaseline: 'top' }), 'text');
                       }
                       const { textAlign } = itemAttr.key;
                       if (textAlign === 'center') {
@@ -31054,8 +31294,21 @@
                       if (itemAttr.value.multiLine) {
                           element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
                       }
+                      else if (typeof itemAttr.value.text === 'object' &&
+                          itemAttr.value.text !== null &&
+                          (itemAttr.value.text.type === 'rich' ||
+                              itemAttr.value.text.type === 'html')) {
+                          if (itemAttr.value.text.type === 'rich') {
+                              element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
+                          }
+                          else {
+                              element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                                  html: Object.assign({ dom: itemAttr.value.text.text, container: '', width: 30, height: 30, style: {} }, itemAttr.value)
+                              }, 'richtext');
+                          }
+                      }
                       else {
-                          element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, itemAttr.value), { textBaseline: 'top' }), 'text');
+                          element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_c = itemAttr.value.text) !== null && _c !== void 0 ? _c : '') }, itemAttr.value), { textBaseline: 'top' }), 'text');
                       }
                       let textAlign = 'right';
                       if (vutils.isValid(itemAttr.value.textAlign)) {
@@ -31147,7 +31400,7 @@
           let titleMaxHeight = 0;
           const { value: titleValue, shape: titleShape } = titleAttr;
           const { visible: titleHasShape = false, symbolType: titleShapeType = '' } = titleShape !== null && titleShape !== void 0 ? titleShape : {};
-          if (vutils.isValid(titleValue)) {
+          if (vutils.isValid(titleValue) && typeof titleAttr.value.text !== 'object') {
               const { width, height } = initTextMeasure(titleValue).quickMeasure(titleValue.text);
               maxWidth = width;
               titleMaxHeight = height;
@@ -31404,11 +31657,12 @@
       }
   };
 
-  const version = "0.16.13";
+  const version = "0.16.14-alpha.11";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
   exports.ArcLabel = ArcLabel;
+  exports.AreaLabel = AreaLabel;
   exports.BasePlayer = BasePlayer;
   exports.Brush = Brush;
   exports.CheckBox = CheckBox;