@visactor/vrender-components 0.17.8 → 0.17.10

package/dist/index.js

@@ -2327,6 +2327,10 @@
     var defined0 = !1;
     for (var i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
   }
+  function genSegContext(curveType, direction, points) {
+    var curveDirection = null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN;
+    return "monotoneY" === curveType ? new ReflectSegContext(curveType, curveDirection) : new SegContext(curveType, curveDirection);
+  }
 
   var Linear = /*#__PURE__*/function () {
     function Linear(context, startPoint) {
@@ -2382,7 +2386,7 @@
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = new SegContext("linear", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
   }
   function genLinearTypeSegments(path, points) {
@@ -2452,7 +2456,7 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new SegContext("basis", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+    var segContext = genSegContext("basis", direction, points);
     return genBasisTypeSegments(new Basis(segContext, startPoint), points), segContext;
   }
 
@@ -2559,7 +2563,7 @@
     }]);
     return MonotoneY;
   }(MonotoneX);
-  function genMonotpneXTypeSegments(path, points) {
+  function genMonotoneXTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneXSegments(points) {
@@ -2568,10 +2572,10 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new SegContext("monotoneX", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
-    return genMonotpneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
+    var segContext = genSegContext("monotoneX", direction, points);
+    return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
   }
-  function genMonotpneYTypeSegments(path, points) {
+  function genMonotoneYTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneYSegments(points) {
@@ -2580,8 +2584,8 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new ReflectSegContext("monotoneY", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
-    return genMonotpneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
+    var segContext = genSegContext("monotoneY", direction, points);
+    return genMonotoneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
   }
 
   var Step$1 = /*#__PURE__*/function () {
@@ -2650,61 +2654,27 @@
     return genCurveSegments(path, points);
   }
 
-  var LinearClosed = /*#__PURE__*/function () {
-    function LinearClosed(context, startPoint) {
+  var LinearClosed = /*#__PURE__*/function (_Linear) {
+    _inherits(LinearClosed, _Linear);
+    var _super = _createSuper(LinearClosed);
+    function LinearClosed() {
       _classCallCheck(this, LinearClosed);
-      this.context = context, startPoint && (this.startPoint = startPoint);
+      return _super.apply(this, arguments);
     }
     _createClass(LinearClosed, [{
-      key: "areaStart",
-      value: function areaStart() {
-        this._line = 0;
-      }
-    }, {
-      key: "areaEnd",
-      value: function areaEnd() {
-        this._line = NaN;
-      }
-    }, {
-      key: "lineStart",
-      value: function lineStart() {
-        this._point = 0, this.startPoint && this.point(this.startPoint);
-      }
-    }, {
       key: "lineEnd",
       value: function lineEnd() {
         this.context.closePath();
       }
-    }, {
-      key: "point",
-      value: function point(p) {
-        var x = p.x,
-          y = p.y;
-        switch (this._point) {
-          case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
-            break;
-          case 1:
-            this._point = 2;
-          default:
-            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);
-        }
-        this._lastDefined = p.defined;
-      }
-    }, {
-      key: "tryUpdateLength",
-      value: function tryUpdateLength() {
-        return this.context.tryUpdateLength();
-      }
     }]);
     return LinearClosed;
-  }();
+  }(Linear);
   function genLinearClosedSegments(points) {
     var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = new SegContext("linear", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
   }
   function genLinearClosedTypeSegments(path, points) {
@@ -3198,6 +3168,8 @@
     strokeSeg: null,
     pickable: !0,
     childrenPickable: !0,
+    fillPickable: !0,
+    strokePickable: !0,
     visible: !0,
     zIndex: 0,
     layout: null,
@@ -12511,6 +12483,7 @@
     return DefaultBaseInteractiveRenderContribution;
   }();
   DefaultBaseInteractiveRenderContribution = __decorate$L([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(InteractiveSubRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -12611,16 +12584,20 @@
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
         this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _graphic$attribute2 = graphic.attribute,
-          _graphic$attribute2$t = _graphic$attribute2.texture,
-          texture = _graphic$attribute2$t === void 0 ? graphicAttribute.texture : _graphic$attribute2$t,
-          _graphic$attribute2$t2 = _graphic$attribute2.textureColor,
-          textureColor = _graphic$attribute2$t2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute2$t2,
-          _graphic$attribute2$t3 = _graphic$attribute2.textureSize,
-          textureSize = _graphic$attribute2$t3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute2$t3,
-          _graphic$attribute2$t4 = _graphic$attribute2.texturePadding,
-          texturePadding = _graphic$attribute2$t4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute2$t4;
-        if (!texture) return;
+        var _graphic$attribute = graphic.attribute,
+          _graphic$attribute$te = _graphic$attribute.texture,
+          texture = _graphic$attribute$te === void 0 ? graphicAttribute.texture : _graphic$attribute$te,
+          _graphic$attribute$te2 = _graphic$attribute.textureColor,
+          textureColor = _graphic$attribute$te2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute$te2,
+          _graphic$attribute$te3 = _graphic$attribute.textureSize,
+          textureSize = _graphic$attribute$te3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute$te3,
+          _graphic$attribute$te4 = _graphic$attribute.texturePadding,
+          texturePadding = _graphic$attribute$te4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute$te4;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    }, {
+      key: "drawTexture",
+      value: function drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
         var pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
           case "circle":
@@ -13136,6 +13113,37 @@
   var defaultSymbolTextureRenderContribution = defaultBaseTextureRenderContribution;
   var defaultSymbolBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
+    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
+    var _super = _createSuper(DefaultAreaTextureRenderContribution);
+    function DefaultAreaTextureRenderContribution() {
+      var _this;
+      _classCallCheck(this, DefaultAreaTextureRenderContribution);
+      _this = _super.apply(this, arguments), _this.time = BaseRenderContributionTime.afterFillStroke;
+      return _this;
+    }
+    _createClass(DefaultAreaTextureRenderContribution, [{
+      key: "drawShape",
+      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+        var _a, _b, _c, _d;
+        this.textureMap || this.initTextureMap(context, graphic.stage);
+        var _ref = options || {},
+          _ref$attribute = _ref.attribute,
+          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
+          _attribute$texture = attribute.texture,
+          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
+          _attribute$textureCol = attribute.textureColor,
+          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
+          _attribute$textureSiz = attribute.textureSize,
+          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
+          _attribute$texturePad = attribute.texturePadding,
+          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    }]);
+    return DefaultAreaTextureRenderContribution;
+  }(DefaultBaseTextureRenderContribution);
+
   var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -13376,6 +13384,26 @@
   }(BaseRender);
   DefaultCanvasCircleRender = __decorate$I([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(CircleRenderContribution)), __metadata$z("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
+  function drawSegItem(ctx, curve, endPercent, params) {
+    if (!curve.p1) return;
+    var _ref = params || {},
+      _ref$offsetX = _ref.offsetX,
+      offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
+      _ref$offsetY = _ref.offsetY,
+      offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
+      _ref$offsetZ = _ref.offsetZ,
+      offsetZ = _ref$offsetZ === void 0 ? 0 : _ref$offsetZ;
+    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
+      var _divideCubic = divideCubic(curve, endPercent),
+        _divideCubic2 = _slicedToArray(_divideCubic, 1),
+        curve1 = _divideCubic2[0];
+      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
+    } else {
+      var p = curve.getPointAt(endPercent);
+      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
+    }
+  }
+
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
     var _ref = params || {},
@@ -13418,7 +13446,7 @@
           } else _lastCurve = curve;
         });
       } else curves.forEach(function (curve) {
-        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
       });
       return;
     }
@@ -13457,7 +13485,7 @@
           needMoveTo = !0;
           continue;
         }
-        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, vutils.min(_p, 1), params), needMoveTo = !1;
+        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, vutils.min(_p, 1), params), needMoveTo = !1;
       }
     }
   }
@@ -13494,25 +13522,6 @@
       path.lineTo(null !== (_c = startP.x1) && void 0 !== _c ? _c : startP.x, null !== (_d = startP.y1) && void 0 !== _d ? _d : startP.y), path.closePath();
     });
   }
-  function drawSegItem$1(ctx, curve, endPercent, params) {
-    if (!curve.p1) return;
-    var _ref4 = params || {},
-      _ref4$offsetX = _ref4.offsetX,
-      offsetX = _ref4$offsetX === void 0 ? 0 : _ref4$offsetX,
-      _ref4$offsetY = _ref4.offsetY,
-      offsetY = _ref4$offsetY === void 0 ? 0 : _ref4$offsetY,
-      _ref4$offsetZ = _ref4.offsetZ,
-      offsetZ = _ref4$offsetZ === void 0 ? 0 : _ref4$offsetZ;
-    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-      var _divideCubic = divideCubic(curve, endPercent),
-        _divideCubic2 = _slicedToArray(_divideCubic, 1),
-        curve1 = _divideCubic2[0];
-      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-    } else {
-      var p = curve.getPointAt(endPercent);
-      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-    }
-  }
 
   var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
@@ -13584,10 +13593,10 @@
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
           points = line.attribute.points,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (var i = 1; i < points.length; i++) {
           var p = points[i];
-          context.lineTo(p.x, p.y, z);
+          context.lineTo(p.x + offsetX, p.y + offsetY, z);
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(line, line.attribute, lineAttribute);
         var _line$attribute = line.attribute,
@@ -13820,83 +13829,7 @@
     }
     path.closePath();
   }
-  function drawSegItem(ctx, curve, endPercent, params) {
-    if (!curve.p1) return;
-    var _ref5 = params || {},
-      _ref5$offsetX = _ref5.offsetX,
-      offsetX = _ref5$offsetX === void 0 ? 0 : _ref5$offsetX,
-      _ref5$offsetY = _ref5.offsetY,
-      offsetY = _ref5$offsetY === void 0 ? 0 : _ref5$offsetY,
-      _ref5$offsetZ = _ref5.offsetZ,
-      offsetZ = _ref5$offsetZ === void 0 ? 0 : _ref5$offsetZ;
-    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-      var _divideCubic = divideCubic(curve, endPercent),
-        _divideCubic2 = _slicedToArray(_divideCubic, 1),
-        curve1 = _divideCubic2[0];
-      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-    } else {
-      var p = curve.getPointAt(endPercent);
-      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-    }
-  }
 
-  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
-    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
-    var _super = _createSuper(DefaultAreaTextureRenderContribution);
-    function DefaultAreaTextureRenderContribution() {
-      var _this;
-      _classCallCheck(this, DefaultAreaTextureRenderContribution);
-      _this = _super.apply(this, arguments), _this.time = BaseRenderContributionTime.afterFillStroke;
-      return _this;
-    }
-    _createClass(DefaultAreaTextureRenderContribution, [{
-      key: "drawShape",
-      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        var _a, _b, _c, _d;
-        this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _ref = options || {},
-          _ref$attribute = _ref.attribute,
-          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
-          _attribute$texture = attribute.texture,
-          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
-          _attribute$textureCol = attribute.textureColor,
-          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
-          _attribute$textureSiz = attribute.textureSize,
-          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
-          _attribute$texturePad = attribute.texturePadding,
-          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
-        if (!texture) return;
-        var pattern = this.textureMap.get(texture);
-        if (!pattern) switch (texture) {
-          case "circle":
-            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "diamond":
-            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "rect":
-            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "vertical-line":
-            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "horizontal-line":
-            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-lr":
-            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-rl":
-            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "grid":
-            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
-        }
-        pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
-      }
-    }]);
-    return DefaultAreaTextureRenderContribution;
-  }(DefaultBaseTextureRenderContribution);
   var defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
   var defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -13953,39 +13886,43 @@
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
           points = area.attribute.points,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (var i = 1; i < points.length; i++) {
           var p = points[i];
-          context.lineTo(p.x, p.y, z);
+          context.lineTo(p.x + offsetX, p.y + offsetY, z);
         }
         for (var _i = points.length - 1; _i >= 0; _i--) {
           var _p = points[_i];
-          context.lineTo(null !== (_b = _p.x1) && void 0 !== _b ? _b : _p.x, null !== (_c = _p.y1) && void 0 !== _c ? _c : _p.y, z);
+          context.lineTo((null !== (_b = _p.x1) && void 0 !== _b ? _b : _p.x) + offsetX, (null !== (_c = _p.y1) && void 0 !== _c ? _c : _p.y) + offsetY, z);
         }
-        context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(area, area.attribute, areaAttribute);
+        context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(area, area.attribute, areaAttribute), this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+          attribute: area.attribute
+        });
         var _area$attribute = area.attribute,
           _area$attribute$x = _area$attribute.x,
           originX = _area$attribute$x === void 0 ? 0 : _area$attribute$x,
           _area$attribute$x2 = _area$attribute.x,
           originY = _area$attribute$x2 === void 0 ? 0 : _area$attribute$x2;
-        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), stroke) {
+        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+          attribute: area.attribute
+        }), stroke) {
           var _area$attribute$strok = area.attribute.stroke,
             _stroke = _area$attribute$strok === void 0 ? areaAttribute && areaAttribute.stroke : _area$attribute$strok;
           if (vutils.isArray(_stroke) && (_stroke[0] || _stroke[2]) && !1 === _stroke[1]) if (context.beginPath(), _stroke[0]) {
-            context.moveTo(startP.x, startP.y, z);
+            context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
             for (var _i2 = 1; _i2 < points.length; _i2++) {
               var _p2 = points[_i2];
-              context.lineTo(_p2.x, _p2.y, z);
+              context.lineTo(_p2.x + offsetX, _p2.y + offsetY, z);
             }
           } else if (_stroke[2]) {
             var endP = points[points.length - 1];
-            context.moveTo(endP.x, endP.y, z);
+            context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
             for (var _i3 = points.length - 2; _i3 >= 0; _i3--) {
               var _p3 = points[_i3];
-              context.lineTo(null !== (_d = _p3.x1) && void 0 !== _d ? _d : _p3.x, null !== (_e = _p3.y1) && void 0 !== _e ? _e : _p3.y, z);
+              context.lineTo((null !== (_d = _p3.x1) && void 0 !== _d ? _d : _p3.x) + offsetX, (null !== (_e = _p3.y1) && void 0 !== _e ? _e : _p3.y) + offsetY, z);
             }
           }
-          context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke();
+          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
         }
       }
     }, {
@@ -17506,13 +17443,24 @@
           x = _area$attribute$x === void 0 ? areaAttribute.x : _area$attribute$x,
           _area$attribute$y = _area$attribute.y,
           y = _area$attribute$y === void 0 ? areaAttribute.y : _area$attribute$y;
+        var _area$attribute2 = area.attribute,
+          _area$attribute2$fill = _area$attribute2.fillPickable,
+          fillPickable = _area$attribute2$fill === void 0 ? areaAttribute.fillPickable : _area$attribute2$fill,
+          _area$attribute2$stro = _area$attribute2.strokePickable,
+          strokePickable = _area$attribute2$stro === void 0 ? areaAttribute.strokePickable : _area$attribute2$stro;
         if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
           var _point = area.getOffsetXY(areaAttribute);
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
         var picked = !1;
         return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, function (context) {
-          return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
+          return !!picked || !!fillPickable && (picked = context.isPointInPath(point.x, point.y), picked);
+        }, function (context, areaAttribute, themeAttribute) {
+          if (picked) return !0;
+          if (!strokePickable) return !1;
+          var lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth,
+            pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
         }), pickContext.highPerformanceRestore(), picked;
       }
     }]);
@@ -18890,7 +18838,7 @@
       }
       render() {
           var _a, _b, _c;
-          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type } = this.attribute;
+          const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type, textAlwaysCenter } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
           let symbol;
@@ -18980,6 +18928,12 @@
               else if (textAlign === 'left' || textAlign === 'start') {
                   group.setAttribute('x', parsedPadding[3]);
               }
+              if (textAlwaysCenter && (textAlign === 'left' || textAlign === 'start')) {
+                  textShape.setAttributes({
+                      x: textX + tagWidth / 2,
+                      textAlign: 'center'
+                  });
+              }
               if (textBaseline === 'middle') {
                   y -= tagHeight / 2;
                   if (symbol) {
@@ -20165,6 +20119,37 @@
       }
       return { x, y };
   }
+  function connectLineBetweenBounds(boundA, boundB) {
+      if (!boundA || !boundB) {
+          return;
+      }
+      if (vutils.isRectIntersect(boundA, boundB, true)) {
+          return;
+      }
+      const x1 = Math.min(boundA.x1, boundA.x2);
+      const y1 = Math.min(boundA.y1, boundA.y2);
+      const x2 = Math.min(boundB.x1, boundB.x2);
+      const y2 = Math.min(boundB.y1, boundB.y2);
+      const w1 = Math.abs(boundA.x2 - x1) / 2;
+      const h1 = Math.abs(boundA.y2 - y1) / 2;
+      const w2 = Math.abs(boundB.x2 - x2) / 2;
+      const h2 = Math.abs(boundB.y2 - y2) / 2;
+      const cx1 = x1 + w1;
+      const cy1 = y1 + h1;
+      const cx2 = x2 + w2;
+      const cy2 = y2 + h2;
+      const dx = cx2 - cx1;
+      const dy = cy2 - cy1;
+      const p1 = getIntersection(dx, dy, cx1, cy1, w1, h1);
+      const p2 = getIntersection(-dx, -dy, cx2, cy2, w2, h2);
+      return [p1, p2];
+  }
+  function getIntersection(dx, dy, cx, cy, w, h) {
+      if (Math.abs(dy / dx) < h / w) {
+          return { x: cx + (dx > 0 ? w : -w), y: cy + (dy * w) / Math.abs(dx) };
+      }
+      return { x: cx + (dx * h) / Math.abs(dy), y: cy + (dy > 0 ? h : -h) };
+  }
 
   function loadLabelComponent() {
       registerGroup();
@@ -20230,9 +20215,10 @@
               }
           };
           this._handleRelatedGraphicSetState = (e) => {
-              var _a, _b, _c;
-              if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.type) === AttributeUpdateType.STATE) {
-                  const currentStates = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.currentStates) !== null && _c !== void 0 ? _c : [];
+              var _a, _b, _c, _d, _e;
+              if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.type) === AttributeUpdateType.STATE ||
+                  (((_b = e.detail) === null || _b === void 0 ? void 0 : _b.type) === AttributeUpdateType.ANIMATE_UPDATE && ((_c = e.detail.animationState) === null || _c === void 0 ? void 0 : _c.isFirstFrameOfStep))) {
+                  const currentStates = (_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.currentStates) !== null && _e !== void 0 ? _e : [];
                   const labels = this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)];
                   labels.forEach(label => {
                       if (label) {
@@ -20250,8 +20236,21 @@
       labeling(textBounds, graphicBounds, position, offset) {
           return;
       }
-      _labelLine(text) {
-          return;
+      _createLabelLine(text, baseMark) {
+          const points = connectLineBetweenBounds(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+          if (points) {
+              const line = graphicCreator.line({
+                  points
+              });
+              if (baseMark && baseMark.attribute.fill) {
+                  line.setAttribute('stroke', baseMark.attribute.fill);
+              }
+              if (this.attribute.line && !vutils.isEmpty(this.attribute.line.style)) {
+                  line.setAttributes(this.attribute.line.style);
+              }
+              this._setStatesOfLabelLine(line);
+              return line;
+          }
       }
       render() {
           this._prepare();
@@ -20380,7 +20379,7 @@
               for (let i = 0; i < currentBaseMarks.length; i++) {
                   const baseMark = currentBaseMarks[i];
                   const points = getPointsOfLineArea(baseMark);
-                  if (points === null || points === void 0 ? void 0 : points.length) {
+                  if (points && points.length) {
                       for (let j = 0; j < points.length; j++) {
                           const textData = data[cur];
                           if (textData && points[j]) {
@@ -20499,7 +20498,10 @@
                       result.push(text);
                       continue;
                   }
-                  if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
+                  if (checkBounds &&
+                      baseMark &&
+                      baseMark.AABBBounds &&
+                      this._canPlaceInside(text.AABBBounds, baseMark.AABBBounds)) {
                       bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                       result.push(text);
                       continue;
@@ -20570,17 +20572,21 @@
           }
       }
       _renderWithAnimation(labels) {
+          var _a;
           const currentTextMap = new Map();
           const prevTextMap = this._graphicToText || new Map();
           const texts = [];
           const labelLines = [];
+          const { visible: showLabelLine } = (_a = this.attribute.line) !== null && _a !== void 0 ? _a : {};
           labels.forEach((text, index) => {
-              var _a, _b, _c, _d, _e, _f, _g;
-              const labelLine = this._labelLine(text);
               const relatedGraphic = this.getRelatedGraphic(text.attribute);
               const textId = text.attribute.id;
               const textKey = this._isCollectionBase ? textId : relatedGraphic;
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(textKey)) ? 'update' : 'enter';
+              let labelLine;
+              if (showLabelLine) {
+                  labelLine = this._createLabelLine(text, relatedGraphic);
+              }
               if (state === 'enter') {
                   texts.push(text);
                   currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
@@ -20588,7 +20594,6 @@
                       const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                       this.add(text);
                       if (labelLine) {
-                          this._setStatesOfLabelLine(labelLine);
                           labelLines.push(labelLine);
                           this.add(labelLine);
                       }
@@ -20609,10 +20614,9 @@
                   const prevText = prevLabel.text;
                   const { duration, easing } = this._animationConfig.update;
                   updateAnimation(prevText, text, this._animationConfig.update);
-                  if (prevLabel.labelLine) {
+                  if (prevLabel.labelLine && 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
+                          points: labelLine.attribute.points
                       }), duration, easing);
                   }
               }
@@ -20621,7 +20625,7 @@
               var _a;
               (_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) {
+                  if (label.labelLine) {
                       this.removeChild(label.labelLine);
                   }
               });
@@ -20629,14 +20633,18 @@
           this._graphicToText = currentTextMap;
       }
       _renderWithOutAnimation(labels) {
+          var _a;
           const currentTextMap = new Map();
           const prevTextMap = this._graphicToText || new Map();
+          const { visible: showLabelLine } = (_a = this.attribute.line) !== null && _a !== void 0 ? _a : {};
           labels.forEach(text => {
-              var _a;
-              const labelLine = this._labelLine(text);
               const relatedGraphic = this.getRelatedGraphic(text.attribute);
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
               const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
+              let labelLine;
+              if (showLabelLine) {
+                  labelLine = this._createLabelLine(text, relatedGraphic);
+              }
               if (state === 'enter') {
                   currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                   this.add(text);
@@ -20650,14 +20658,14 @@
                   prevTextMap.delete(textKey);
                   currentTextMap.set(textKey, prevLabel);
                   prevLabel.text.setAttributes(text.attribute);
-                  if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
-                      prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
+                  if (prevLabel.labelLine && labelLine) {
+                      prevLabel.labelLine.setAttributes({ points: labelLine.attribute.points });
                   }
               }
           });
           prevTextMap.forEach(label => {
               this.removeChild(label.text);
-              if (label === null || label === void 0 ? void 0 : label.labelLine) {
+              if (label.labelLine) {
                   this.removeChild(label.labelLine);
               }
           });
@@ -20765,7 +20773,7 @@
                   stroke && label.setAttributes({ stroke });
               }
               else {
-                  const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                  const isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds);
                   if (isInside) {
                       const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
                       fill && label.setAttributes({ fill });
@@ -21028,18 +21036,20 @@
           for (let i = 0; i < data.length; i++) {
               const textData = data[i];
               const basedArc = arcs.find(arc => { var _a; return ((_a = arc.refDatum) === null || _a === void 0 ? void 0 : _a.id) === textData.id; });
-              const labelAttribute = {
-                  visible: basedArc.labelVisible,
-                  x: basedArc.labelPosition.x,
-                  y: basedArc.labelPosition.y,
-                  angle: basedArc.angle,
-                  maxLineWidth: basedArc.labelLimit,
-                  points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
-                      ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
-                      : undefined,
-                  line: basedArc === null || basedArc === void 0 ? void 0 : basedArc.labelLine
-              };
-              labels[i].setAttributes(labelAttribute);
+              if (basedArc) {
+                  const labelAttribute = {
+                      visible: basedArc.labelVisible,
+                      x: basedArc.labelPosition.x,
+                      y: basedArc.labelPosition.y,
+                      angle: basedArc.angle,
+                      maxLineWidth: basedArc.labelLimit,
+                      points: basedArc.pointA && basedArc.pointB && basedArc.pointC
+                          ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
+                          : undefined,
+                      line: basedArc.labelLine
+                  };
+                  labels[i].setAttributes(labelAttribute);
+              }
           }
           return labels;
       }
@@ -21102,8 +21112,8 @@
           var _a, _b;
           const labelConfig = attribute;
           const spaceWidth = labelConfig.spaceWidth;
-          const position = (_a = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.position) !== null && _a !== void 0 ? _a : 'inside';
-          const offsetRadius = (_b = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.offsetRadius) !== null && _b !== void 0 ? _b : -spaceWidth;
+          const position = (_a = labelConfig.position) !== null && _a !== void 0 ? _a : 'inside';
+          const offsetRadius = (_b = labelConfig.offsetRadius) !== null && _b !== void 0 ? _b : -spaceWidth;
           arcs.forEach((arc) => {
               var _a, _b, _c;
               const { labelSize, radian } = arc;
@@ -21124,7 +21134,7 @@
                   }
                   limit = outerRadius - minRadius - spaceWidth;
               }
-              if ((labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.rotate) !== true) {
+              if (labelConfig.rotate !== true) {
                   limit = outerRadius - spaceWidth;
               }
               const text = this._getFormatLabelText(arc.refDatum, limit);
@@ -21147,8 +21157,8 @@
               if (!vutils.isGreater(labelWidth, 0)) {
                   arc.labelVisible = false;
               }
-              arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : arc.middleAngle;
-              let offsetAngle = (_c = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.offsetAngle) !== null && _c !== void 0 ? _c : 0;
+              arc.angle = (_b = (_a = attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : arc.middleAngle;
+              let offsetAngle = (_c = labelConfig.offsetAngle) !== null && _c !== void 0 ? _c : 0;
               if (['inside-inner', 'inside-outer'].includes(position)) {
                   offsetAngle += Math.PI / 2;
               }
@@ -21157,8 +21167,8 @@
           return arcs;
       }
       _layoutOutsideLabels(arcs, attribute, currentMarks) {
-          var _a, _b, _c, _d, _e;
-          const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
+          var _a, _b, _c;
+          const center = { x: (_a = currentMarks[0].attribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = currentMarks[0].attribute.y) !== null && _b !== void 0 ? _b : 0 };
           const height = center.y * 2;
           const line2MinLength = attribute.line.line2MinLength;
           const labelLayout = attribute.layout;
@@ -21193,7 +21203,7 @@
               }
           }
           else {
-              const maxLabels = height / (((_e = attribute.textStyle) === null || _e === void 0 ? void 0 : _e.fontSize) || 16);
+              const maxLabels = height / (((_c = attribute.textStyle) === null || _c === void 0 ? void 0 : _c.fontSize) || 16);
               this._adjustY(arcs, maxLabels, attribute, currentMarks);
               const { minY, maxY } = arcs.reduce((yInfo, arc) => {
                   const { y1, y2 } = arc.getLabelBounds();
@@ -21216,11 +21226,11 @@
                       vutils.isGreater(arc.pointB.x, width - line2MinLength - spaceWidth))) {
                   arc.labelVisible = false;
               }
-              arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
-              if (attribute === null || attribute === void 0 ? void 0 : attribute.offsetAngle) {
+              arc.angle = (_b = (_a = attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
+              if (attribute.offsetAngle) {
                   arc.angle += attribute.offsetAngle;
               }
-              arc.labelLine = Object.assign({}, attribute === null || attribute === void 0 ? void 0 : attribute.line);
+              arc.labelLine = Object.assign({}, attribute.line);
           });
           return arcs;
       }
@@ -21302,8 +21312,8 @@
           return (_a = value === null || value === void 0 ? void 0 : value.text) !== null && _a !== void 0 ? _a : '';
       }
       _adjustY(arcs, maxLabels, attribute, currentMarks) {
-          var _a, _b, _c, _d;
-          const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
+          var _a, _b;
+          const center = { x: (_a = currentMarks[0].attribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = currentMarks[0].attribute.y) !== null && _b !== void 0 ? _b : 0 };
           const plotRect = { width: center.x * 2, height: center.y * 2 };
           const labelLayout = attribute.layout;
           if (labelLayout.strategy === 'vertical') {
@@ -21642,17 +21652,21 @@
               }
           }
       }
-      _labelLine(text) {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-          const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
+      _createLabelLine(text, baseMark) {
+          var _a, _b, _c, _d, _e, _f, _g;
+          const { points, line = {}, visible, fill } = text.attribute;
+          const labelLine = text.attribute.points
               ? graphicCreator.line({
-                  visible: (_g = (_e = (((_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.line) === null || _c === void 0 ? void 0 : _c.visible) && ((_d = text.attribute) === null || _d === void 0 ? void 0 : _d.visible))) !== null && _e !== void 0 ? _e : (_f = text.attribute) === null || _f === void 0 ? void 0 : _f.visible) !== null && _g !== void 0 ? _g : true,
-                  stroke: (_l = (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.fill,
-                  lineWidth: (_r = (_q = (_p = (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.line) === null || _p === void 0 ? void 0 : _p.style) === null || _q === void 0 ? void 0 : _q.lineWidth) !== null && _r !== void 0 ? _r : 1,
-                  points: (_s = text.attribute) === null || _s === void 0 ? void 0 : _s.points,
-                  curveType: ((_u = (_t = text.attribute) === null || _t === void 0 ? void 0 : _t.line) === null || _u === void 0 ? void 0 : _u.smooth) ? 'basis' : null
+                  visible: (_c = (_a = (line.visible && visible)) !== null && _a !== void 0 ? _a : (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
+                  stroke: (_e = (_d = line.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : fill,
+                  lineWidth: (_g = (_f = line.style) === null || _f === void 0 ? void 0 : _f.lineWidth) !== null && _g !== void 0 ? _g : 1,
+                  points: points,
+                  curveType: line.smooth ? 'basis' : null
               })
               : undefined;
+          if (labelLine) {
+              this._setStatesOfLabelLine(labelLine);
+          }
           return labelLine;
       }
       computeRadius(r, width, height, k) {
@@ -22250,6 +22264,32 @@
                       this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                       this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                       this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                      let maxTextWidth = 0;
+                      let maxTextHeight = 0;
+                      let textAlign = 'center';
+                      let textBaseline = 'middle';
+                      labels.forEach((label) => {
+                          var _a;
+                          const labelStyle = label.attribute;
+                          const angle = (_a = labelStyle.angle) !== null && _a !== void 0 ? _a : 0;
+                          const textBounds = label.AABBBounds;
+                          let textWidth = textBounds.width();
+                          let textHeight = textBounds.height();
+                          if (angle) {
+                              textWidth = Math.abs(textWidth * Math.cos(angle));
+                              textHeight = Math.abs(textHeight * Math.sin(angle));
+                          }
+                          maxTextWidth = Math.max(maxTextWidth, textWidth);
+                          maxTextHeight = Math.max(maxTextHeight, textHeight);
+                          textAlign = labelStyle.textAlign;
+                          textBaseline = labelStyle.textBaseline;
+                      });
+                      this.axisLabelLayerSize[layer] = {
+                          width: maxTextWidth,
+                          height: maxTextHeight,
+                          textAlign,
+                          textBaseline
+                      };
                   });
               }
           }
@@ -22320,12 +22360,8 @@
           labelGroup.name = `${exports.AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`;
           labelGroup.id = this._getNodeId(`label-container-layer-${layer}`);
           container.add(labelGroup);
-          let maxTextWidth = 0;
-          let maxTextHeight = 0;
-          let textAlign = 'center';
-          let textBaseline = 'middle';
           data.forEach((item, index) => {
-              var _a, _b, _c, _d;
+              var _a, _b, _c;
               const labelStyle = this._getLabelAttribute(item, index, data, layer);
               let text;
               if (labelStyle.type === 'rich') {
@@ -22357,22 +22393,7 @@
                   text.states = labelState;
               }
               labelGroup.add(text);
-              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) {
-                  maxTextWidth = Math.abs(maxTextWidth * Math.cos(angle));
-                  maxTextHeight = Math.abs(maxTextHeight * Math.sin(angle));
-              }
-              textAlign = labelStyle.textAlign;
-              textBaseline = labelStyle.textBaseline;
           });
-          this.axisLabelLayerSize[layer] = {
-              width: maxTextWidth,
-              height: maxTextHeight,
-              textAlign,
-              textBaseline
-          };
           return labelGroup;
       }
       renderTitle(container) {
@@ -22526,7 +22547,7 @@
               }
           }
           const point = this.getVerticalCoord(tickDatum.point, offset, inside);
-          const vector = this.getVerticalVector(offset, inside, point);
+          const vector = this.getVerticalVector(offset || 1, inside, point);
           const textContent = formatMethod
               ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer)
               : tickDatum.label;
@@ -22658,10 +22679,22 @@
           do {
               items = reduce(items, sep);
           } while (items.length >= 3 && hasOverlap(items, sep));
-          if (items.length < 3 && !vutils.last(source).attribute.opacity) {
-              if (items.length > 1) {
-                  vutils.last(items).setAttribute('opacity', 0);
-                  vutils.last(source).setAttribute('opacity', 1);
+          const checkLast = items.length < 3 || config.lastVisible;
+          if (checkLast) {
+              const lastSourceItem = vutils.last(source);
+              if (!lastSourceItem.attribute.opacity) {
+                  const remainLength = items.length;
+                  if (remainLength > 1) {
+                      lastSourceItem.setAttribute('opacity', 1);
+                      for (let i = remainLength - 1; i >= 0; i--) {
+                          if (intersect(items[i], lastSourceItem, sep)) {
+                              items[i].setAttribute('opacity', 0);
+                          }
+                          else {
+                              break;
+                          }
+                      }
+                  }
               }
           }
       }
@@ -22780,7 +22813,7 @@
   }
 
   function autoLimit(labels, config) {
-      const { limitLength, ellipsis = '...', orient } = config;
+      const { limitLength, verticalLimitLength, ellipsis = '...', orient } = config;
       if (vutils.isEmpty(labels) || !vutils.isValidNumber(limitLength)) {
           return;
       }
@@ -22788,14 +22821,20 @@
           if ((orient === 'top' || orient === 'bottom') && Math.floor(label.AABBBounds.height()) <= limitLength) {
               return;
           }
-          if ((orient === 'left' || orient === 'right') && Math.floor(label.AABBBounds.width()) <= limitLength) {
+          const direction = label.attribute.direction;
+          if ((orient === 'left' || orient === 'right') &&
+              ((direction === 'vertical' && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) ||
+                  (direction !== 'vertical' && Math.floor(label.AABBBounds.width()) <= limitLength))) {
               return;
           }
-          let limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
+          const angle = label.attribute.angle;
+          let limitLabelLength = angle === 0 || vutils.isNil(angle)
               ? orient === 'top' || orient === 'bottom'
                   ? null
-                  : limitLength
-              : Math.abs(limitLength / Math.sin(label.attribute.angle));
+                  : direction === 'vertical'
+                      ? verticalLimitLength
+                      : limitLength
+              : Math.abs(limitLength / Math.sin(angle));
           if (vutils.isValidNumber(label.attribute.maxLineWidth)) {
               limitLabelLength = vutils.isValidNumber(limitLabelLength)
                   ? Math.min(label.attribute.maxLineWidth, limitLabelLength)
@@ -23212,7 +23251,7 @@
           }
           const { verticalLimitSize, label, orient } = this.attribute;
           const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
-          const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation } = label;
+          const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible } = label;
           if (vutils.isFunction(layoutFunc)) {
               layoutFunc(labelShapes, labelData, layer, this);
           }
@@ -23224,8 +23263,13 @@
                   });
               }
               if (autoLimit$1 && vutils.isValidNumber(limitLength) && limitLength > 0) {
+                  const verticalLimitLength = (orient === 'left' || orient === 'right') &&
+                      labelShapes.some(label => label.attribute.direction === 'vertical')
+                      ? Math.abs(this.attribute.start.y - this.attribute.end.y) / labelShapes.length
+                      : Infinity;
                   autoLimit(labelShapes, {
                       limitLength,
+                      verticalLimitLength,
                       ellipsis: limitEllipsis,
                       orient
                   });
@@ -23234,7 +23278,8 @@
                   autoHide(labelShapes, {
                       orient,
                       method: autoHideMethod,
-                      separation: autoHideSeparation
+                      separation: autoHideSeparation,
+                      lastVisible
                   });
               }
           }
@@ -26228,7 +26273,13 @@
           let shapeSize = 0;
           let shapeSpace = 0;
           if (shapeAttr && shapeAttr.visible !== false) {
-              shapeSize = vutils.get(shapeStyle, 'style.size', DEFAULT_SHAPE_SIZE);
+              const s = vutils.get(shapeStyle, 'style.size', DEFAULT_SHAPE_SIZE);
+              if (vutils.isArray(s)) {
+                  shapeSize = s[0] || 0;
+              }
+              else {
+                  shapeSize = s;
+              }
               shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
               const itemShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeStyle.style));
               Object.keys(shapeStyle.state || {}).forEach(key => {
@@ -29809,7 +29860,7 @@
       }
   };
 
-  const version = "0.17.8";
+  const version = "0.17.10";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;