@visactor/vrender-components 0.16.17-alpha.3 → 0.16.17-alpha.8

package/dist/index.js

@@ -7715,7 +7715,7 @@
 
   var tempMatrix = new vutils.Matrix(),
     tempBounds$1 = new vutils.AABBBounds();
-  var GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "lineCap", "lineJoin", "miterLimit", "scaleX", "scaleY", "angle", "anchor"];
+  var GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
   var tempConstantXYKey = ["x", "y"],
     tempConstantScaleXYKey = ["scaleX", "scaleY"],
     tempConstantAngleKey = ["angle"],
@@ -11467,9 +11467,7 @@
             cacheList = [];
           _path.forEach(function (item) {
             var cache = new CustomPath2D().fromString(item.d),
-              attribute = {
-                fill: "black"
-              };
+              attribute = {};
             SVG_PARSE_ATTRIBUTE_MAP_KEYS.forEach(function (k) {
               item[k] && (attribute[SVG_PARSE_ATTRIBUTE_MAP[k]] = item[k]);
             }), cacheList.push({
@@ -12483,7 +12481,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,
@@ -13526,6 +13525,7 @@
     }, {
       key: "updateRectAABBBounds",
       value: function updateRectAABBBounds(attribute, rectTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, rectTheme, aabbBounds, graphic)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
           var _attribute$width = attribute.width,
             width = _attribute$width === void 0 ? rectTheme.width : _attribute$width,
@@ -13559,13 +13559,14 @@
     }, {
       key: "updateGlyphAABBBounds",
       value: function updateGlyphAABBBounds(attribute, theme, aabbBounds, graphic) {
-        return graphic.getSubGraphic().forEach(function (node) {
+        return this._validCheck(attribute, theme, aabbBounds, graphic) ? (graphic.getSubGraphic().forEach(function (node) {
           aabbBounds.union(node.AABBBounds);
-        }), aabbBounds;
+        }), aabbBounds) : aabbBounds;
       }
     }, {
       key: "updateRichTextAABBBounds",
       value: function updateRichTextAABBBounds(attribute, richtextTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, richtextTheme, aabbBounds, graphic)) return aabbBounds;
         if (!graphic) return aabbBounds;
         var _attribute$width2 = attribute.width,
           width = _attribute$width2 === void 0 ? richtextTheme.width : _attribute$width2,
@@ -13618,6 +13619,7 @@
     }, {
       key: "updateTextAABBBounds",
       value: function updateTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, textTheme, aabbBounds, graphic)) return aabbBounds;
         if (!graphic) return aabbBounds;
         var _graphic$attribute$te = graphic.attribute.text,
           text = _graphic$attribute$te === void 0 ? textTheme.text : _graphic$attribute$te;
@@ -13642,6 +13644,7 @@
     }, {
       key: "updatePathAABBBounds",
       value: function updatePathAABBBounds(attribute, pathTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, pathTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || this.updatePathAABBBoundsImprecise(attribute, pathTheme, aabbBounds, graphic);
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13693,6 +13696,7 @@
     }, {
       key: "updatePolygonAABBBounds",
       value: function updatePolygonAABBBounds(attribute, polygonTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, polygonTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds, graphic);
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13713,6 +13717,7 @@
     }, {
       key: "updateLineAABBBounds",
       value: function updateLineAABBBounds(attribute, lineTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, lineTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic));
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13746,6 +13751,7 @@
     }, {
       key: "updateAreaAABBBounds",
       value: function updateAreaAABBBounds(attribute, areaTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, areaTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds, graphic) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds, graphic));
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13781,6 +13787,7 @@
     }, {
       key: "updateCircleAABBBounds",
       value: function updateCircleAABBBounds(attribute, circleTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, circleTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds, graphic) : this.updateCircleAABBBoundsAccurate(attribute, circleTheme, aabbBounds, graphic));
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13809,6 +13816,7 @@
     }, {
       key: "updateArcAABBBounds",
       value: function updateArcAABBBounds(attribute, arcTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, arcTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds, graphic) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds, graphic));
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13850,6 +13858,7 @@
     }, {
       key: "updateSymbolAABBBounds",
       value: function updateSymbolAABBBounds(attribute, symbolTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, symbolTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds, graphic) : this.updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds, graphic));
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13882,6 +13891,7 @@
     }, {
       key: "updateImageAABBBounds",
       value: function updateImageAABBBounds(attribute, imageTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, imageTheme, aabbBounds, graphic)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
           var _attribute$width3 = attribute.width,
             width = _attribute$width3 === void 0 ? imageTheme.width : _attribute$width3,
@@ -13928,6 +13938,15 @@
         }
         this.combindShadowAABBBounds(aabbBounds, graphic), vutils.transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
       }
+    }, {
+      key: "_validCheck",
+      value: function _validCheck(attribute, theme, aabbBounds, graphic) {
+        if (!graphic) return !0;
+        if (!graphic.valid) return aabbBounds.clear(), !1;
+        var _attribute$visible = attribute.visible,
+          visible = _attribute$visible === void 0 ? theme.visible : _attribute$visible;
+        return !!visible || (aabbBounds.clear(), !1);
+      }
     }]);
     return DefaultGraphicService;
   }();
@@ -15386,10 +15405,20 @@
           var p = context.project(x, y, z),
             camera = context.camera;
           context.camera = null, !1 === parsedPath.draw(context, size, p.x, p.y, void 0, function (p, a) {
-            a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY), context.stroke()));
+            var _a, _b, _c;
+            if (symbol._parsedPath.svgCache) {
+              var obj = Object.assign({}, a);
+              obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.fill) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
+            }
+            a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
           }) && context.closePath(), context.camera = camera;
         } else !1 === parsedPath.draw(context, size, x, y, z, function (p, a) {
-          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY), context.stroke()));
+          var _a, _b, _c;
+          if (symbol._parsedPath.svgCache) {
+            var obj = Object.assign({}, a);
+            obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
+          }
+          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
         }) && context.closePath();
         context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
       }
@@ -15827,7 +15856,7 @@
           var repeat = 0;
           if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
             var pattern = context.createPattern(res.data, repeatStr[repeat]);
-            context.fillStyle = pattern, context.fillRect(x, y, width, height);
+            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
           } else context.drawImage(res.data, x, y, width, height);
           needRestore && context.restore();
         }
@@ -17055,7 +17084,7 @@
               graphic.add(g);
             });
           } else result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-          return context.camera = null, pickParams.in3dInterceptor = !1, result;
+          return context.camera = null, pickParams.in3dInterceptor = !1, context.restore(), result;
         }
         return context.restore(), null;
       }
@@ -20795,18 +20824,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) {
@@ -20821,13 +20850,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;
@@ -20954,6 +20997,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: {
@@ -20987,7 +21036,7 @@
       }
       render() {
           var _a, _b, _c;
-          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type = 'text' } = this.attribute;
+          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;
@@ -21022,7 +21071,7 @@
               }
           }
           else if (type === 'html') {
-              const richTextAttrs = Object.assign(Object.assign({ textConfig: [], visible: vutils.isValid(text) && visible !== false, html: Object.assign({ dom: text, container: '', width: 30, height: 30, style: {} }, textStyle) }, textStyle), { x: textX, y: 0 });
+              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)) {
@@ -22383,7 +22432,7 @@
           }
           else if (attributes.textType === 'html') {
               attributes.textConfig = [];
-              attributes.html = Object.assign({ dom: attributes.text, container: '', width: 30, height: 30, style: {} }, attributes);
+              attributes.html = Object.assign(Object.assign({ dom: attributes.text }, DEFAULT_HTML_TEXT_SPEC), attributes);
               const text = createRichText(attributes);
               this._bindEvent(text);
               this._setStatesOfText(text);
@@ -22484,10 +22533,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;
@@ -22568,13 +22618,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);
@@ -22768,7 +22824,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';
@@ -22786,7 +22842,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);
@@ -22814,7 +22870,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;
                       }
@@ -22976,12 +23032,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') {
+          if (!graphic || 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 {
@@ -23732,39 +23787,16 @@
       pickable: false
   };
 
-  class LineDataLabel extends LabelBase {
-      constructor(attributes) {
-          super(vutils.merge({}, LineDataLabel.defaultAttributes, attributes));
-          this.name = 'line-data-label';
-      }
-      labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
-          return labelingPoint(textBounds, graphicBounds, position, offset);
-      }
-  }
-  LineDataLabel.defaultAttributes = {
-      textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
-      },
-      position: 'top',
-      offset: 5,
-      pickable: false
-  };
-
   class AreaLabel extends LabelBase {
       constructor(attributes) {
           super(vutils.merge({}, AreaLabel.defaultAttributes, attributes));
           this.name = 'line-label';
       }
-      getGraphicBounds(graphic, point = {}) {
+      getGraphicBounds(graphic, point = {}, position = 'end') {
           var _a;
           if (graphic.type !== 'area') {
               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 {
@@ -23791,6 +23823,28 @@
       pickable: false
   };
 
+  class LineDataLabel extends LabelBase {
+      constructor(attributes) {
+          super(vutils.merge({}, LineDataLabel.defaultAttributes, attributes));
+          this.name = 'line-data-label';
+      }
+      labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
+          return labelingPoint(textBounds, graphicBounds, position, offset);
+      }
+  }
+  LineDataLabel.defaultAttributes = {
+      textStyle: {
+          fontSize: 12,
+          fill: '#000',
+          textAlign: 'center',
+          textBaseline: 'middle',
+          boundsPadding: [-1, 0, -1, 0]
+      },
+      position: 'top',
+      offset: 5,
+      pickable: false
+  };
+
   const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
@@ -24354,15 +24408,15 @@
               var _a, _b, _c, _d;
               const labelStyle = this._getLabelAttribute(item, index, data, layer);
               let text;
-              if ((labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.type) === 'rich') {
+              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 === null || labelStyle === void 0 ? void 0 : labelStyle.type) === 'html') {
+              else if (labelStyle.type === 'html') {
                   labelStyle.textConfig = [];
-                  labelStyle.html = Object.assign({ dom: labelStyle.text, container: '', width: 30, height: 30, style: {} }, labelStyle);
+                  labelStyle.html = Object.assign(Object.assign({ dom: labelStyle.text }, DEFAULT_HTML_TEXT_SPEC), labelStyle);
                   text = createRichText(labelStyle);
               }
               else {
@@ -28150,7 +28204,7 @@
           let focusSpace = 0;
           if (focus) {
               const focusSize = vutils.get(focusIconStyle, 'size', DEFAULT_SHAPE_SIZE);
-              focusShape = createSymbol(Object.assign(Object.assign({ x: 0, y: -focusSize / 2 - 1, strokeBoundsBuffer: 0 }, focusIconStyle), { visible: false, pickMode: 'imprecise', boundsPadding: parsedPadding }));
+              focusShape = createSymbol(Object.assign(Object.assign({ x: 0, y: -focusSize / 2 - 1, strokeBoundsBuffer: 0 }, focusIconStyle), { visible: true, pickMode: 'imprecise', boundsPadding: parsedPadding }));
               this._appendDataToShape(focusShape, exports.LEGEND_ELEMENT_NAME.focus, item, itemGroup);
               focusSpace = focusSize;
           }
@@ -28225,6 +28279,7 @@
           const itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
           itemGroup.attribute.width = itemGroupWidth;
           itemGroup.attribute.height = itemGroupHeight;
+          focusShape && focusShape.setAttribute('visible', false);
           innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]);
           return itemGroup;
       }
@@ -29539,74 +29594,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, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69;
+          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 (textType === 'rich') {
-                  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: text }, textStyle);
+              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 = textStyle.character) !== null && _k !== void 0 ? _k : text }, textStyle);
                   this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
               }
               else if (textType === 'html') {
-                  const attr = Object.assign({ html: Object.assign({ dom: text, container: '', width: 30, height: 30, style: '' }, textStyle), x: (_k = textStyle.x) !== null && _k !== void 0 ? _k : 0, y: (_l = textStyle.y) !== null && _l !== void 0 ? _l : 0, width: (_o = (_m = textStyle.width) !== null && _m !== void 0 ? _m : width) !== null && _o !== void 0 ? _o : 0, height: (_q = (_p = textStyle.height) !== null && _p !== void 0 ? _p : height) !== null && _q !== void 0 ? _q : 0, ellipsis: (_r = textStyle.ellipsis) !== null && _r !== void 0 ? _r : true, wordBreak: (_s = textStyle.wordBreak) !== null && _s !== void 0 ? _s : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
-                  this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
-              }
-              else if (textStyle && vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.character)) {
-                  const attr = {
-                      x: (_t = textStyle.x) !== null && _t !== void 0 ? _t : 0,
-                      y: (_u = textStyle.y) !== null && _u !== void 0 ? _u : 0,
-                      width: (_w = (_v = textStyle.width) !== null && _v !== void 0 ? _v : width) !== null && _w !== void 0 ? _w : 0,
-                      height: (_y = (_x = textStyle.height) !== null && _x !== void 0 ? _x : height) !== null && _y !== void 0 ? _y : 0,
-                      ellipsis: (_z = textStyle.ellipsis) !== null && _z !== void 0 ? _z : true,
-                      wordBreak: (_0 = textStyle.wordBreak) !== null && _0 !== void 0 ? _0 : 'break-word',
-                      maxHeight: textStyle.maxHeight,
-                      maxWidth: textStyle.maxWidth,
-                      textConfig: textStyle.character
-                  };
+                  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: (_1 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _1 !== void 0 ? _1 : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_2 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _2 !== void 0 ? _2 : true, x: 0, y: 0 }), 'wrapText');
+                  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 ? (_3 = this._mainTitle) === null || _3 === void 0 ? void 0 : _3.AABBBounds.height() : 0;
-          const maintextWidth = this._mainTitle ? (_4 = this._mainTitle) === null || _4 === void 0 ? void 0 : _4.AABBBounds.width() : 0;
-          if (((_5 = this.attribute) === null || _5 === void 0 ? void 0 : _5.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
-              if (subtextType === 'rich') {
-                  const attr = Object.assign({ x: (_6 = subtextStyle.x) !== null && _6 !== void 0 ? _6 : 0, y: (_7 = subtextStyle.y) !== null && _7 !== void 0 ? _7 : 0, width: (_9 = (_8 = subtextStyle.width) !== null && _8 !== void 0 ? _8 : width) !== null && _9 !== void 0 ? _9 : 0, height: (_11 = (_10 = subtextStyle.height) !== null && _10 !== void 0 ? _10 : height) !== null && _11 !== void 0 ? _11 : 0, ellipsis: (_12 = subtextStyle.ellipsis) !== null && _12 !== void 0 ? _12 : true, wordBreak: (_13 = subtextStyle.wordBreak) !== null && _13 !== void 0 ? _13 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: subtext }, subtextStyle);
+          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 = subtextStyle.character) !== null && _7 !== void 0 ? _7 : subtext }, subtextStyle);
                   this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
               }
-              else if (textType === 'html') {
-                  const attr = Object.assign({ html: Object.assign({ dom: subtext, container: '', width: 30, height: 30, style: {} }, subtextStyle), x: (_14 = subtextStyle.x) !== null && _14 !== void 0 ? _14 : 0, y: (_15 = subtextStyle.y) !== null && _15 !== void 0 ? _15 : 0, width: (_17 = (_16 = subtextStyle.width) !== null && _16 !== void 0 ? _16 : width) !== null && _17 !== void 0 ? _17 : 0, height: (_19 = (_18 = subtextStyle.height) !== null && _18 !== void 0 ? _18 : height) !== null && _19 !== void 0 ? _19 : 0, ellipsis: (_20 = subtextStyle.ellipsis) !== null && _20 !== void 0 ? _20 : true, wordBreak: (_21 = subtextStyle.wordBreak) !== null && _21 !== void 0 ? _21 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
-                  this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
-              }
-              else if (subtextStyle && vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.character)) {
-                  const attr = {
-                      x: (_22 = subtextStyle.x) !== null && _22 !== void 0 ? _22 : 0,
-                      y: (_23 = subtextStyle.y) !== null && _23 !== void 0 ? _23 : maintextHeight,
-                      width: (_25 = (_24 = subtextStyle.width) !== null && _24 !== void 0 ? _24 : width) !== null && _25 !== void 0 ? _25 : 0,
-                      height: (_27 = (_26 = subtextStyle.height) !== null && _26 !== void 0 ? _26 : height) !== null && _27 !== void 0 ? _27 : 0,
-                      ellipsis: (_28 = subtextStyle.ellipsis) !== null && _28 !== void 0 ? _28 : true,
-                      wordBreak: (_29 = subtextStyle.wordBreak) !== null && _29 !== void 0 ? _29 : 'break-word',
-                      maxHeight: subtextStyle.maxHeight,
-                      maxWidth: subtextStyle.maxWidth,
-                      textConfig: subtextStyle.character
-                  };
+              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: (_30 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _30 !== void 0 ? _30 : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_31 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _31 !== void 0 ? _31 : 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 ? (_32 = this._subTitle) === null || _32 === void 0 ? void 0 : _32.AABBBounds.height() : 0;
-          const subtextWidth = this._subTitle ? (_33 = this._subTitle) === null || _33 === void 0 ? void 0 : _33.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 + ((_34 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _34 !== void 0 ? _34 : 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;
-              (_35 = this._mainTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('maxLineWidth', width);
-              (_36 = this._subTitle) === null || _36 === void 0 ? void 0 : _36.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;
@@ -29615,10 +29642,10 @@
               titleWidth = minWidth;
           }
           if (vutils.isValid(maxWidth)) {
-              (_37 = this._mainTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('maxLineWidth', maxWidth);
-              (_38 = this._subTitle) === null || _38 === void 0 ? void 0 : _38.setAttribute('maxLineWidth', maxWidth);
-              (_39 = this._mainTitle) === null || _39 === void 0 ? void 0 : _39.setAttribute('maxWidth', maxWidth);
-              (_40 = this._subTitle) === null || _40 === void 0 ? void 0 : _40.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;
               }
@@ -29627,8 +29654,8 @@
               titleHeight = minHeight;
           }
           if (vutils.isValid(maxHeight)) {
-              (_41 = this._mainTitle) === null || _41 === void 0 ? void 0 : _41.setAttribute('maxHeight', maxHeight);
-              (_42 = this._subTitle) === null || _42 === void 0 ? void 0 : _42.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;
               }
@@ -29638,67 +29665,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 = (_43 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _43 !== void 0 ? _43 : maintextWidth;
+              const mainTitleWidth = (_29 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _29 !== void 0 ? _29 : maintextWidth;
               if (mainTitleAlign === 'left') {
-                  (_44 = this._mainTitle) === null || _44 === void 0 ? void 0 : _44.setAttribute('x', 0);
-                  (_45 = this._mainTitle) === null || _45 === void 0 ? void 0 : _45.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') {
-                  (_46 = this._mainTitle) === null || _46 === void 0 ? void 0 : _46.setAttribute('x', mainTitleWidth / 2);
-                  (_47 = this._mainTitle) === null || _47 === void 0 ? void 0 : _47.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') {
-                  (_48 = this._mainTitle) === null || _48 === void 0 ? void 0 : _48.setAttribute('x', mainTitleWidth);
-                  (_49 = this._mainTitle) === null || _49 === void 0 ? void 0 : _49.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') {
-                  (_50 = this._mainTitle) === null || _50 === void 0 ? void 0 : _50.setAttribute('y', 0);
-                  (_51 = this._mainTitle) === null || _51 === void 0 ? void 0 : _51.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') {
-                  (_52 = this._mainTitle) === null || _52 === void 0 ? void 0 : _52.setAttribute('y', mainTitleHeight / 2);
-                  (_53 = this._mainTitle) === null || _53 === void 0 ? void 0 : _53.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') {
-                  (_54 = this._mainTitle) === null || _54 === void 0 ? void 0 : _54.setAttribute('y', mainTitleHeight);
-                  (_55 = this._mainTitle) === null || _55 === void 0 ? void 0 : _55.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 = (_56 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _56 !== void 0 ? _56 : subtextWidth;
+              const subTitleWidth = (_42 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _42 !== void 0 ? _42 : subtextWidth;
               if (subTitleAlign === 'left') {
-                  (_57 = this._subTitle) === null || _57 === void 0 ? void 0 : _57.setAttribute('x', 0);
-                  (_58 = this._subTitle) === null || _58 === void 0 ? void 0 : _58.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') {
-                  (_59 = this._subTitle) === null || _59 === void 0 ? void 0 : _59.setAttribute('x', subTitleWidth / 2);
-                  (_60 = this._subTitle) === null || _60 === void 0 ? void 0 : _60.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') {
-                  (_61 = this._subTitle) === null || _61 === void 0 ? void 0 : _61.setAttribute('x', subTitleWidth);
-                  (_62 = this._subTitle) === null || _62 === void 0 ? void 0 : _62.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 = (_63 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _63 !== void 0 ? _63 : 0;
+              const subTitleHeight = (_49 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _49 !== void 0 ? _49 : 0;
               if (subTitleVerticalAlign === 'top') {
-                  (_64 = this._subTitle) === null || _64 === void 0 ? void 0 : _64.setAttribute('y', subTitleYStart);
-                  (_65 = this._subTitle) === null || _65 === void 0 ? void 0 : _65.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') {
-                  (_66 = this._subTitle) === null || _66 === void 0 ? void 0 : _66.setAttribute('y', subTitleYStart + subTitleHeight / 2);
-                  (_67 = this._subTitle) === null || _67 === void 0 ? void 0 : _67.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') {
-                  (_68 = this._subTitle) === null || _68 === void 0 ? void 0 : _68.setAttribute('y', subTitleYStart + subTitleHeight);
-                  (_69 = this._subTitle) === null || _69 === void 0 ? void 0 : _69.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');
               }
           }
       }
@@ -29768,7 +29795,7 @@
                       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({ dom: titleStyle.text, container: '', width: 30, height: 30, style: {} }, titleStyle) }, titleStyle), { visible: title.visible, x: 0, y: 0 }), 'richtext');
+                      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');
@@ -29801,7 +29828,7 @@
                           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({ dom: contentStyle.text, container: '', width: 30, height: 30, style: {} }, contentStyle) }, contentStyle), { visible: title.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'richtext');
+                          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');
@@ -29829,7 +29856,7 @@
       }
       _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);
@@ -31068,7 +31095,7 @@
   };
   const getRichTextAttribute = (attr) => {
       const { width, height, wordBreak = 'break-word', textAlign, textBaseline, text } = attr;
-      if (typeof text === 'object') {
+      if (Array.isArray(text)) {
           return {
               width,
               height,
@@ -31076,7 +31103,7 @@
               textAlign: textAlign,
               textBaseline: textBaseline,
               singleLine: false,
-              textConfig: text.text
+              textConfig: vutils.array(text).map(text => (Object.assign(Object.assign({}, attr), { text })))
           };
       }
       return {
@@ -31086,7 +31113,7 @@
           textAlign: textAlign,
           textBaseline: textBaseline,
           singleLine: false,
-          textConfig: vutils.array(text).map(text => (Object.assign(Object.assign({}, attr), { text })))
+          textConfig: text.text
       };
   };
 
@@ -31202,7 +31229,7 @@
                   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({ dom: titleAttr.value.text.text, container: '', width: 30, height: 30, style: {} }, 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');
+                  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) {
@@ -31271,7 +31298,7 @@
                           }
                           else {
                               element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                                  html: Object.assign({ dom: itemAttr.key.text.text, container: '', width: 30, height: 30, style: {} }, itemAttr.key)
+                                  html: Object.assign(Object.assign({ dom: itemAttr.key.text.text }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
                               }, 'richtext');
                           }
                       }
@@ -31659,11 +31686,12 @@
       }
   };
 
-  const version = "0.16.17-alpha.3";
+  const version = "0.16.17-alpha.8";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
   exports.ArcLabel = ArcLabel;
+  exports.AreaLabel = AreaLabel;
   exports.BasePlayer = BasePlayer;
   exports.Brush = Brush;
   exports.CheckBox = CheckBox;