@visactor/vrender 0.17.8 → 0.17.10

package/dist/index.js

@@ -2728,6 +2728,63 @@
     out.a = scaleX * a1, out.b = scaleX * b1, out.c = scaleY * c1, out.d = scaleY * d1, out.e = oe + oa * rotateCenterX + oc * rotateCenterY - a1 * offsetX - c1 * offsetY, out.f = of + ob * rotateCenterX + od * rotateCenterY - b1 * offsetX - d1 * offsetY;
   }
 
+  var LRU = /*#__PURE__*/function () {
+    function LRU() {
+      _classCallCheck(this, LRU);
+      this.CLEAN_THRESHOLD = 1e3, this.L_TIME = 1e3, this.R_COUNT = 1, this.R_TIMESTAMP_MAX_SIZE = 20;
+    }
+    _createClass(LRU, [{
+      key: "clearCache",
+      value: function clearCache(cache, params) {
+        var _params$CLEAN_THRESHO = params.CLEAN_THRESHOLD,
+          CLEAN_THRESHOLD = _params$CLEAN_THRESHO === void 0 ? this.CLEAN_THRESHOLD : _params$CLEAN_THRESHO,
+          _params$L_TIME = params.L_TIME,
+          L_TIME = _params$L_TIME === void 0 ? this.L_TIME : _params$L_TIME,
+          _params$R_COUNT = params.R_COUNT,
+          R_COUNT = _params$R_COUNT === void 0 ? this.R_COUNT : _params$R_COUNT;
+        if (cache.size < CLEAN_THRESHOLD) return 0;
+        var clearNum = 0;
+        var clear = function clear(key) {
+            clearNum++, cache["delete"](key);
+          },
+          now = Date.now();
+        return cache.forEach(function (item, key) {
+          if (item.timestamp.length < R_COUNT) return clear(key);
+          var useCount = 0;
+          for (; now - item.timestamp[item.timestamp.length - 1 - useCount] < L_TIME && (useCount++, !(useCount >= R_COUNT)););
+          if (useCount < R_COUNT) return clear(key);
+          for (; now - item.timestamp[0] > L_TIME;) item.timestamp.shift();
+        }), clearNum;
+      }
+    }, {
+      key: "addLimitedTimestamp",
+      value: function addLimitedTimestamp(cacheItem, t, params) {
+        var _params$R_TIMESTAMP_M = params.R_TIMESTAMP_MAX_SIZE,
+          R_TIMESTAMP_MAX_SIZE = _params$R_TIMESTAMP_M === void 0 ? this.R_TIMESTAMP_MAX_SIZE : _params$R_TIMESTAMP_M;
+        cacheItem.timestamp.length > R_TIMESTAMP_MAX_SIZE && cacheItem.timestamp.shift(), cacheItem.timestamp.push(t);
+      }
+    }, {
+      key: "clearTimeStamp",
+      value: function clearTimeStamp(cache, params) {
+        var _params$L_TIME2 = params.L_TIME,
+          L_TIME = _params$L_TIME2 === void 0 ? this.L_TIME : _params$L_TIME2,
+          now = Date.now();
+        cache.forEach(function (item) {
+          for (; now - item.timestamp[0] > L_TIME;) item.timestamp.shift();
+        });
+      }
+    }, {
+      key: "clearItemTimestamp",
+      value: function clearItemTimestamp(cacheItem, params) {
+        var _params$L_TIME3 = params.L_TIME,
+          L_TIME = _params$L_TIME3 === void 0 ? this.L_TIME : _params$L_TIME3,
+          now = Date.now();
+        for (; now - cacheItem.timestamp[0] > L_TIME;) cacheItem.timestamp.shift();
+      }
+    }]);
+    return LRU;
+  }();
+
   function hslToRgb(h, s, l) {
     s /= 100, l /= 100;
     var c = (1 - Math.abs(2 * l - 1)) * s,
@@ -4221,6 +4278,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 : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN;
+    return "monotoneY" === curveType ? new ReflectSegContext(curveType, curveDirection) : new SegContext(curveType, curveDirection);
+  }
 
   var Linear = /*#__PURE__*/function () {
     function Linear(context, startPoint) {
@@ -4276,7 +4337,7 @@
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = new SegContext("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
   }
   function genLinearTypeSegments(path, points) {
@@ -4346,7 +4407,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 : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("basis", direction, points);
     return genBasisTypeSegments(new Basis(segContext, startPoint), points), segContext;
   }
 
@@ -4453,7 +4514,7 @@
     }]);
     return MonotoneY;
   }(MonotoneX);
-  function genMonotpneXTypeSegments(path, points) {
+  function genMonotoneXTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneXSegments(points) {
@@ -4462,10 +4523,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 : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.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) {
@@ -4474,8 +4535,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 : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.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 () {
@@ -4544,61 +4605,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 : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
   }
   function genLinearClosedTypeSegments(path, points) {
@@ -5153,6 +5180,8 @@
     strokeSeg: null,
     pickable: !0,
     childrenPickable: !0,
+    fillPickable: !0,
+    strokePickable: !0,
     visible: !0,
     zIndex: 0,
     layout: null,
@@ -13351,19 +13380,27 @@
     }]);
     return ConicalCanvas;
   }();
-  var ColorInterpolate = /*#__PURE__*/function () {
+  var ColorInterpolate = /*#__PURE__*/function (_LRU) {
+    _inherits(ColorInterpolate, _LRU);
+    var _super = _createSuper(ColorInterpolate);
     function ColorInterpolate() {
+      var _this;
       var stops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
       _classCallCheck(this, ColorInterpolate);
+      _this = _super.call(this), _this.cacheParams = {
+        CLEAN_THRESHOLD: 100,
+        L_TIME: 1e3
+      }, _this.dataMap = new Map();
       var canvas = ConicalCanvas.GetCanvas(),
         conicalCtx = ConicalCanvas.GetCtx();
-      if (canvas.width = precision, canvas.height = 1, !conicalCtx) return;
+      if (canvas.width = precision, canvas.height = 1, !conicalCtx) return _possibleConstructorReturn(_this);
       if (conicalCtx.translate(0, 0), !conicalCtx) throw new Error("获取ctx发生错误");
       var gradient = conicalCtx.createLinearGradient(0, 0, precision, 0);
       stops.forEach(function (stop) {
         gradient.addColorStop(stop[0], stop[1]);
-      }), conicalCtx.fillStyle = gradient, conicalCtx.fillRect(0, 0, precision, 1), this.rgbaSet = conicalCtx.getImageData(0, 0, precision, 1).data;
+      }), conicalCtx.fillStyle = gradient, conicalCtx.fillRect(0, 0, precision, 1), _this.rgbaSet = conicalCtx.getImageData(0, 0, precision, 1).data;
+      return _this;
     }
     _createClass(ColorInterpolate, [{
       key: "getColor",
@@ -13371,32 +13408,32 @@
         var rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);
         return "rgba(".concat(rgba[0], ", ").concat(rgba[1], ", ").concat(rgba[2], ", ").concat(rgba[3] / 255, ")");
       }
-    }], [{
+    }, {
       key: "GetOrCreate",
-      value: function GetOrCreate() {
-        var stops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
-        var str = "";
+      value: function GetOrCreate(x, y, w, h) {
+        var stops = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+        var precision = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 100;
+        var str = "".concat(x).concat(y).concat(w).concat(h);
         stops.forEach(function (item) {
           return str += item.join();
         }), str += precision;
-        var colorInter = ColorInterpolate.dataMap.get(str);
-        return colorInter || (colorInter = new ColorInterpolate(stops, precision), ColorInterpolate.dataMap.set(str, colorInter)), colorInter;
-      }
-    }, {
-      key: "SetColorInterpolateInstance",
-      value: function SetColorInterpolateInstance(stops, ins) {
-        ColorInterpolate.dataMap.set(stops, ins);
+        var colorInter = this.dataMap.get(str);
+        if (!colorInter) {
+          colorInter = {
+            data: new ColorInterpolate(stops, precision),
+            timestamp: []
+          }, this.addLimitedTimestamp(colorInter, Date.now(), {}), this.dataMap.set(str, colorInter);
+        }
+        return this.clearCache(this.dataMap, this.cacheParams), colorInter.data;
       }
-    }, {
-      key: "GetColorInterpolateInstance",
-      value: function GetColorInterpolateInstance(stops) {
-        return ColorInterpolate.dataMap.get(stops);
+    }], [{
+      key: "getInstance",
+      value: function getInstance() {
+        return ColorInterpolate._instance || (ColorInterpolate._instance = new ColorInterpolate()), ColorInterpolate._instance;
       }
     }]);
     return ColorInterpolate;
-  }();
-  ColorInterpolate.dataMap = new Map();
+  }(LRU);
   var ConicalPatternStore = /*#__PURE__*/function () {
     function ConicalPatternStore() {
       _classCallCheck(this, ConicalPatternStore);
@@ -13468,7 +13505,7 @@
     var r = Math.sqrt(Math.max(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)), Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2)))),
       stepNum = deltaDeg + 1,
       step = deltaAngle / Math.max(1, stepNum - 1),
-      colorInter = ColorInterpolate.GetOrCreate(stops, stepNum),
+      colorInter = ColorInterpolate.getInstance().GetOrCreate(x, y, width, height, stops, stepNum),
       lineWidth = 2 * Math.PI * r / 360;
     conicalCanvas.width = width, conicalCanvas.height = height, conicalCtx.setTransform(1, 0, 0, 1, 0, 0), conicalCtx.clearRect(0, 0, width, height), conicalCtx.translate(x, y), conicalCtx.rotate(startAngle);
     for (var i = 0, len = stepNum - 1; i < len && !(startAngle + i * step > endAngle); i++) {
@@ -18461,6 +18498,7 @@
     return DefaultBaseInteractiveRenderContribution;
   }();
   exports.DefaultBaseInteractiveRenderContribution = __decorate$1w([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(InteractiveSubRenderContribution)), __metadata$19("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
+
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -18561,16 +18599,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":
@@ -19086,6 +19128,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 = exports.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$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -19326,6 +19399,26 @@
   }(BaseRender);
   exports.DefaultCanvasCircleRender = __decorate$1t([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(CircleRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.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 || {},
@@ -19368,7 +19461,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;
     }
@@ -19407,7 +19500,7 @@
           needMoveTo = !0;
           continue;
         }
-        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min(_p, 1), params), needMoveTo = !1;
+        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, min(_p, 1), params), needMoveTo = !1;
       }
     }
   }
@@ -19444,25 +19537,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$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
@@ -19534,10 +19608,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,
@@ -19770,83 +19844,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 = exports.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;
 
@@ -19903,39 +19901,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 (isArray$1(_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());
         }
       }
     }, {
@@ -23731,7 +23733,7 @@
     }, {
       key: "tryInitInteractiveLayer",
       value: function tryInitInteractiveLayer() {
-        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.nextFrameRenderLayerSet.add(this.interactiveLayer));
+        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
     }, {
       key: "clearViewBox",
@@ -33309,13 +33311,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;
       }
     }]);
@@ -34437,7 +34450,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.8";
+  const version = "0.17.10";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -34514,6 +34527,7 @@
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
   exports.DefaultAreaAllocate = DefaultAreaAllocate;
   exports.DefaultAreaAttribute = DefaultAreaAttribute;
+  exports.DefaultAreaTextureRenderContribution = DefaultAreaTextureRenderContribution;
   exports.DefaultAttribute = DefaultAttribute;
   exports.DefaultBaseBackgroundRenderContribution = DefaultBaseBackgroundRenderContribution;
   exports.DefaultBaseTextureRenderContribution = DefaultBaseTextureRenderContribution;
@@ -34813,9 +34827,9 @@
   exports.genLinearSegments = genLinearSegments;
   exports.genLinearTypeSegments = genLinearTypeSegments;
   exports.genMonotoneXSegments = genMonotoneXSegments;
+  exports.genMonotoneXTypeSegments = genMonotoneXTypeSegments;
   exports.genMonotoneYSegments = genMonotoneYSegments;
-  exports.genMonotpneXTypeSegments = genMonotpneXTypeSegments;
-  exports.genMonotpneYTypeSegments = genMonotpneYTypeSegments;
+  exports.genMonotoneYTypeSegments = genMonotoneYTypeSegments;
   exports.genNumberType = genNumberType;
   exports.genStepSegments = genStepSegments;
   exports.genStepTypeSegments = genStepTypeSegments;