@visactor/vtable 0.17.5 → 0.17.6

package/dist/vtable.js

@@ -2115,6 +2115,54 @@
       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;
     }
 
+    class LRU {
+      constructor() {
+        this.CLEAN_THRESHOLD = 1e3, this.L_TIME = 1e3, this.R_COUNT = 1, this.R_TIMESTAMP_MAX_SIZE = 20;
+      }
+      clearCache(cache, params) {
+        const {
+          CLEAN_THRESHOLD = this.CLEAN_THRESHOLD,
+          L_TIME = this.L_TIME,
+          R_COUNT = this.R_COUNT
+        } = params;
+        if (cache.size < CLEAN_THRESHOLD) return 0;
+        let clearNum = 0;
+        const clear = key => {
+            clearNum++, cache.delete(key);
+          },
+          now = Date.now();
+        return cache.forEach((item, key) => {
+          if (item.timestamp.length < R_COUNT) return clear(key);
+          let 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;
+      }
+      addLimitedTimestamp(cacheItem, t, params) {
+        const {
+          R_TIMESTAMP_MAX_SIZE = this.R_TIMESTAMP_MAX_SIZE
+        } = params;
+        cacheItem.timestamp.length > R_TIMESTAMP_MAX_SIZE && cacheItem.timestamp.shift(), cacheItem.timestamp.push(t);
+      }
+      clearTimeStamp(cache, params) {
+        const {
+            L_TIME = this.L_TIME
+          } = params,
+          now = Date.now();
+        cache.forEach(item => {
+          for (; now - item.timestamp[0] > L_TIME;) item.timestamp.shift();
+        });
+      }
+      clearItemTimestamp(cacheItem, params) {
+        const {
+            L_TIME = this.L_TIME
+          } = params,
+          now = Date.now();
+        for (; now - cacheItem.timestamp[0] > L_TIME;) cacheItem.timestamp.shift();
+      }
+    }
+
     function hslToRgb$1(h, s, l) {
       s /= 100, l /= 100;
       const c = (1 - Math.abs(2 * l - 1)) * s,
@@ -3430,6 +3478,10 @@
       let defined0 = !1;
       for (let 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) {
+      const curveDirection = null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN;
+      return "monotoneY" === curveType ? new ReflectSegContext$1(curveType, curveDirection) : new SegContext$1(curveType, curveDirection);
+    }
 
     let Linear$1 = class Linear {
       constructor(context, startPoint) {
@@ -3472,7 +3524,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext$1("linear", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("linear", direction, points);
       return genLinearTypeSegments$1(new Linear$1(segContext, startPoint), points), segContext;
     }
     function genLinearTypeSegments$1(path, points) {
@@ -3529,7 +3581,7 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments$1(points, params);
-      const segContext = new SegContext$1("basis", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("basis", direction, points);
       return genBasisTypeSegments$1(new Basis$1(segContext, startPoint), points), segContext;
     }
 
@@ -3614,7 +3666,7 @@
         });
       }
     };
-    function genMonotpneXTypeSegments$1(path, points) {
+    function genMonotoneXTypeSegments(path, points) {
       return genCurveSegments$1(path, points);
     }
     function genMonotoneXSegments$1(points) {
@@ -3625,10 +3677,10 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments$1(points, params);
-      const segContext = new SegContext$1("monotoneX", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
-      return genMonotpneXTypeSegments$1(new MonotoneX$1(segContext, startPoint), points), segContext;
+      const segContext = genSegContext("monotoneX", direction, points);
+      return genMonotoneXTypeSegments(new MonotoneX$1(segContext, startPoint), points), segContext;
     }
-    function genMonotpneYTypeSegments$1(path, points) {
+    function genMonotoneYTypeSegments(path, points) {
       return genCurveSegments$1(path, points);
     }
     function genMonotoneYSegments$1(points) {
@@ -3639,8 +3691,8 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments$1(points, params);
-      const segContext = new ReflectSegContext$1("monotoneY", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
-      return genMonotpneYTypeSegments$1(new MonotoneY$1(segContext, startPoint), points), segContext;
+      const segContext = genSegContext("monotoneY", direction, points);
+      return genMonotoneYTypeSegments(new MonotoneY$1(segContext, startPoint), points), segContext;
     }
 
     let Step$3 = class Step {
@@ -3696,39 +3748,10 @@
       return genCurveSegments$1(path, points);
     }
 
-    let LinearClosed$1 = class LinearClosed {
-      constructor(context, startPoint) {
-        this.context = context, startPoint && (this.startPoint = startPoint);
-      }
-      areaStart() {
-        this._line = 0;
-      }
-      areaEnd() {
-        this._line = NaN;
-      }
-      lineStart() {
-        this._point = 0, this.startPoint && this.point(this.startPoint);
-      }
+    let LinearClosed$1 = class LinearClosed extends Linear$1 {
       lineEnd() {
         this.context.closePath();
       }
-      point(p) {
-        const 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;
-      }
-      tryUpdateLength() {
-        return this.context.tryUpdateLength();
-      }
     };
     function genLinearClosedSegments$1(points) {
       let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -3737,7 +3760,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext$1("linear", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("linear", direction, points);
       return genLinearClosedTypeSegments$1(new LinearClosed$1(segContext, startPoint), points), segContext;
     }
     function genLinearClosedTypeSegments$1(path, points) {
@@ -4146,6 +4169,8 @@
       strokeSeg: null,
       pickable: !0,
       childrenPickable: !0,
+      fillPickable: !0,
+      strokePickable: !0,
       visible: !0,
       zIndex: 0,
       layout: null,
@@ -8535,10 +8560,17 @@
         return ConicalCanvas.ctx;
       }
     }
-    class ColorInterpolate {
+    class ColorInterpolate extends LRU {
+      static getInstance() {
+        return ColorInterpolate._instance || (ColorInterpolate._instance = new ColorInterpolate()), ColorInterpolate._instance;
+      }
       constructor() {
         let stops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+        super(), this.cacheParams = {
+          CLEAN_THRESHOLD: 100,
+          L_TIME: 1e3
+        }, this.dataMap = new Map();
         const canvas = ConicalCanvas.GetCanvas(),
           conicalCtx = ConicalCanvas.GetCtx();
         if (canvas.width = precision, canvas.height = 1, !conicalCtx) return;
@@ -8552,22 +8584,21 @@
         const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);
         return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;
       }
-      static GetOrCreate() {
-        let stops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
-        let str = "";
+      GetOrCreate(x, y, w, h) {
+        let stops = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+        let precision = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 100;
+        let str = `${x}${y}${w}${h}`;
         stops.forEach(item => str += item.join()), str += precision;
-        let colorInter = ColorInterpolate.dataMap.get(str);
-        return colorInter || (colorInter = new ColorInterpolate(stops, precision), ColorInterpolate.dataMap.set(str, colorInter)), colorInter;
-      }
-      static SetColorInterpolateInstance(stops, ins) {
-        ColorInterpolate.dataMap.set(stops, ins);
-      }
-      static GetColorInterpolateInstance(stops) {
-        return ColorInterpolate.dataMap.get(stops);
+        let 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;
       }
     }
-    ColorInterpolate.dataMap = new Map();
     class ConicalPatternStore {
       static GetSize(minSize) {
         for (let i = 0; i < ConicalPatternStore.ImageSize.length; i++) if (ConicalPatternStore.ImageSize[i] >= minSize) return ConicalPatternStore.ImageSize[i];
@@ -8628,7 +8659,7 @@
       const 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 (let i = 0, len = stepNum - 1; i < len && !(startAngle + i * step > endAngle); i++) {
@@ -12488,6 +12519,7 @@
       }
     };
     DefaultBaseInteractiveRenderContribution$1 = __decorate$23([injectable$1(), __param$11(0, inject$1(ContributionProvider$1)), __param$11(0, named$1(InteractiveSubRenderContribution$1)), __metadata$1h("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution$1);
+
     let DefaultBaseTextureRenderContribution$1 = class DefaultBaseTextureRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime$1.afterFillStroke, this.useStyle = !0, this.order = 10;
@@ -12571,7 +12603,9 @@
           textureSize = graphicAttribute.textureSize,
           texturePadding = graphicAttribute.texturePadding
         } = graphic.attribute;
-        if (!texture) return;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+      drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
         let pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
           case "circle":
@@ -13011,6 +13045,26 @@
     const defaultSymbolTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultSymbolBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+    let DefaultAreaTextureRenderContribution$1 = class DefaultAreaTextureRenderContribution extends DefaultBaseTextureRenderContribution$1 {
+      constructor() {
+        super(...arguments), this.time = BaseRenderContributionTime$1.afterFillStroke;
+      }
+      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);
+        const {
+            attribute = graphic.attribute
+          } = options || {},
+          {
+            texture = null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList$1(graphicAttribute, "texture"),
+            textureColor = null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList$1(graphicAttribute, "textureColor"),
+            textureSize = null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList$1(graphicAttribute, "textureSize"),
+            texturePadding = null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList$1(graphicAttribute, "texturePadding")
+          } = attribute;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    };
+
     var __decorate$21 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -13224,6 +13278,22 @@
     };
     DefaultCanvasCircleRender$1 = __decorate$20([injectable$1(), __param$$(0, inject$1(ContributionProvider$1)), __param$$(0, named$1(CircleRenderContribution$1)), __metadata$1f("design:paramtypes", [Object])], DefaultCanvasCircleRender$1);
 
+    function drawSegItem$2(ctx, curve, endPercent, params) {
+      if (!curve.p1) return;
+      const {
+        offsetX = 0,
+        offsetY = 0,
+        offsetZ = 0
+      } = params || {};
+      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) {
+        const [curve1] = divideCubic$1(curve, endPercent);
+        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 {
+        const p = curve.getPointAt(endPercent);
+        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
+      }
+    }
+
     function drawSegments$1(path, segPath, percent, clipRangeByDimension, params) {
       var _a;
       const {
@@ -13266,7 +13336,7 @@
             } else lastCurve = curve;
           });
         } else curves.forEach(curve => {
-          curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$3(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+          curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$2(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
         });
         return;
       }
@@ -13307,7 +13377,7 @@
             needMoveTo = !0;
             continue;
           }
-          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$3(path, curve, min$1(_p, 1), params), needMoveTo = !1;
+          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$2(path, curve, min$1(_p, 1), params), needMoveTo = !1;
         }
       }
     }
@@ -13344,21 +13414,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$3(ctx, curve, endPercent, params) {
-      if (!curve.p1) return;
-      const {
-        offsetX = 0,
-        offsetY = 0,
-        offsetZ = 0
-      } = params || {};
-      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) {
-        const [curve1] = divideCubic$1(curve, endPercent);
-        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 {
-        const p = curve.getPointAt(endPercent);
-        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-      }
-    }
 
     var __decorate$1$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -13419,10 +13474,10 @@
             points: points
           } = line.attribute,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
           const 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);
         const {
@@ -13642,68 +13697,7 @@
       }
       path.closePath();
     }
-    function drawSegItem$2(ctx, curve, endPercent, params) {
-      if (!curve.p1) return;
-      const {
-        offsetX = 0,
-        offsetY = 0,
-        offsetZ = 0
-      } = params || {};
-      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) {
-        const [curve1] = divideCubic$1(curve, endPercent);
-        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 {
-        const p = curve.getPointAt(endPercent);
-        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-      }
-    }
 
-    let DefaultAreaTextureRenderContribution$1 = class DefaultAreaTextureRenderContribution extends DefaultBaseTextureRenderContribution$1 {
-      constructor() {
-        super(...arguments), this.time = BaseRenderContributionTime$1.afterFillStroke;
-      }
-      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);
-        const {
-            attribute = graphic.attribute
-          } = options || {},
-          {
-            texture = null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList$1(graphicAttribute, "texture"),
-            textureColor = null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList$1(graphicAttribute, "textureColor"),
-            textureSize = null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList$1(graphicAttribute, "textureSize"),
-            texturePadding = null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList$1(graphicAttribute, "texturePadding")
-          } = attribute;
-        if (!texture) return;
-        let 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());
-      }
-    };
     const defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution$1();
     const defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -13755,39 +13749,43 @@
             points: points
           } = area.attribute,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
           const p = points[i];
-          context.lineTo(p.x, p.y, z);
+          context.lineTo(p.x + offsetX, p.y + offsetY, z);
         }
         for (let i = points.length - 1; i >= 0; i--) {
           const 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
+        });
         const {
           x: originX = 0,
           x: originY = 0
         } = area.attribute;
-        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) {
           const {
             stroke = areaAttribute && areaAttribute.stroke
           } = area.attribute;
           if (isArray$3(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 (let i = 1; i < points.length; i++) {
               const p = points[i];
-              context.lineTo(p.x, p.y, z);
+              context.lineTo(p.x + offsetX, p.y + offsetY, z);
             }
           } else if (stroke[2]) {
             const endP = points[points.length - 1];
-            context.moveTo(endP.x, endP.y, z);
+            context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
             for (let i = points.length - 2; i >= 0; i--) {
               const p = points[i];
-              context.lineTo(null !== (_d = p.x1) && void 0 !== _d ? _d : p.x, null !== (_e = p.y1) && void 0 !== _e ? _e : p.y, z);
+              context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.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());
         }
       }
       drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -16730,7 +16728,7 @@
         return this.removeChild(this.findChildByUid(ILayerId));
       }
       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));
       }
       clearViewBox(color) {
         this.window.clearViewBox(this._viewBox, color);
@@ -19923,12 +19921,22 @@
           x = areaAttribute.x,
           y = areaAttribute.y
         } = area.attribute;
+        const {
+          fillPickable = areaAttribute.fillPickable,
+          strokePickable = areaAttribute.strokePickable
+        } = area.attribute;
         if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
           const point = area.getOffsetXY(areaAttribute);
           x += point.x, y += point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
         let picked = !1;
-        return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked)), pickContext.highPerformanceRestore(), picked;
+        return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || !!fillPickable && (picked = context.isPointInPath(point.x, point.y), picked), (context, areaAttribute, themeAttribute) => {
+          if (picked) return !0;
+          if (!strokePickable) return !1;
+          const lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth,
+            pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+          return pickContext.lineWidth = getScaledStroke$1(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        }), pickContext.highPerformanceRestore(), picked;
       }
     };
     DefaultCanvasAreaPicker = __decorate$1h([injectable$1(), __param$F(0, inject$1(AreaRender$1)), __metadata$I("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
@@ -24287,7 +24295,8 @@
             padding = 4,
             visible: visible,
             state: state,
-            type: type
+            type: type,
+            textAlwaysCenter: textAlwaysCenter
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
           group = this.createOrUpdateChild("tag-content", {
@@ -24393,7 +24402,10 @@
           (isValid$3(minWidth) || isValid$3(maxWidth)) && (isValid$3(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$3(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2])));
           let x = 0,
             y = 0;
-          "center" === textAlign ? (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)) : "right" === textAlign || "end" === textAlign ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : "left" !== textAlign && "start" !== textAlign || group.setAttribute("x", parsedPadding[3]), "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
+          "center" === textAlign ? (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)) : "right" === textAlign || "end" === textAlign ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : "left" !== textAlign && "start" !== textAlign || group.setAttribute("x", parsedPadding[3]), !textAlwaysCenter || "left" !== textAlign && "start" !== textAlign || textShape.setAttributes({
+            x: textX + tagWidth / 2,
+            textAlign: "center"
+          }), "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
           const {
               visible: bgVisible
             } = panel,
@@ -25167,6 +25179,24 @@
             const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer),
               labels = layerLabelGroup.getChildren();
             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,
+              maxTextHeight = 0,
+              textAlign = "center",
+              textBaseline = "middle";
+            labels.forEach(label => {
+              var _a;
+              const labelStyle = label.attribute,
+                angle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0,
+                textBounds = label.AABBBounds;
+              let textWidth = textBounds.width(),
+                textHeight = textBounds.height();
+              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: textAlign,
+              textBaseline: textBaseline
+            };
           });
         }
         title && title.visible && this.renderTitle(axisContainer);
@@ -25218,13 +25248,8 @@
             y: 0,
             pickable: !1
           });
-        labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup);
-        let maxTextWidth = 0,
-          maxTextHeight = 0,
-          textAlign = "center",
-          textBaseline = "middle";
-        return data.forEach((item, index) => {
-          var _a, _b, _c, _d;
+        return labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup), data.forEach((item, index) => {
+          var _a, _b, _c;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
           if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator$1.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
@@ -25236,14 +25261,7 @@
             }), text.states = labelState;
           }
           labelGroup.add(text);
-          const angle = null !== (_d = labelStyle.angle) && void 0 !== _d ? _d : 0;
-          maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width()), maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height()), 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: textAlign,
-          textBaseline: textBaseline
-        }, labelGroup;
+        }), labelGroup;
       }
       renderTitle(container) {
         const titleAttributes = this.getTitleAttribute(),
@@ -25367,7 +25385,7 @@
         const axisVector = this.getRelativeVector(tickDatum.point);
         layer > 0 && (0 === axisVector[1] ? offset += (this.axisLabelLayerSize[layer - 1].height + get$5(this.attribute, "label.space", 4)) * layer : offset += (this.axisLabelLayerSize[layer - 1].width + get$5(this.attribute, "label.space", 4)) * layer);
         const point = this.getVerticalCoord(tickDatum.point, offset, inside),
-          vector = this.getVerticalVector(offset, inside, point),
+          vector = this.getVerticalVector(offset || 1, inside, point),
           textContent = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
         let {
           style: textStyle
@@ -25471,7 +25489,16 @@
         do {
           items = reduce(items, sep);
         } while (items.length >= 3 && hasOverlap$1(items, sep));
-        items.length < 3 && !last$1(source).attribute.opacity && items.length > 1 && (last$1(items).setAttribute("opacity", 0), last$1(source).setAttribute("opacity", 1));
+        if (items.length < 3 || config.lastVisible) {
+          const lastSourceItem = last$1(source);
+          if (!lastSourceItem.attribute.opacity) {
+            const remainLength = items.length;
+            if (remainLength > 1) {
+              lastSourceItem.setAttribute("opacity", 1);
+              for (let i = remainLength - 1; i >= 0 && intersect$2(items[i], lastSourceItem, sep); i--) items[i].setAttribute("opacity", 0);
+            }
+          }
+        }
       }
       source.forEach(item => {
         item.setAttribute("visible", !!item.attribute.opacity);
@@ -25549,13 +25576,16 @@
     function autoLimit(labels, config) {
       const {
         limitLength: limitLength,
+        verticalLimitLength: verticalLimitLength,
         ellipsis = "...",
         orient: orient
       } = config;
       !isEmpty(labels) && isValidNumber$1(limitLength) && labels.forEach(label => {
         if (("top" === orient || "bottom" === orient) && Math.floor(label.AABBBounds.height()) <= limitLength) return;
-        if (("left" === orient || "right" === orient) && Math.floor(label.AABBBounds.width()) <= limitLength) return;
-        let limitLabelLength = 0 === label.attribute.angle || isNil$3(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : Math.abs(limitLength / Math.sin(label.attribute.angle));
+        const direction = label.attribute.direction;
+        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
+        const angle = label.attribute.angle;
+        let limitLabelLength = 0 === angle || isNil$3(angle) ? "top" === orient || "bottom" === orient ? null : "vertical" === direction ? verticalLimitLength : limitLength : Math.abs(limitLength / Math.sin(angle));
         isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
           maxLineWidth: limitLabelLength,
           ellipsis: label.attribute.ellipsis || ellipsis
@@ -25901,20 +25931,29 @@
             limitEllipsis: limitEllipsis,
             autoHide: autoHide$1,
             autoHideMethod: autoHideMethod,
-            autoHideSeparation: autoHideSeparation
+            autoHideSeparation: autoHideSeparation,
+            lastVisible: lastVisible
           } = label;
-        isFunction$3(layoutFunc) ? layoutFunc(labelShapes, labelData, layer, this) : (autoRotate$1 && autoRotate(labelShapes, {
-          labelRotateAngle: autoRotateAngle,
-          orient: orient
-        }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0 && autoLimit(labelShapes, {
-          limitLength: limitLength,
-          ellipsis: limitEllipsis,
-          orient: orient
-        }), autoHide$1 && autoHide(labelShapes, {
-          orient: orient,
-          method: autoHideMethod,
-          separation: autoHideSeparation
-        }));
+        if (isFunction$3(layoutFunc)) layoutFunc(labelShapes, labelData, layer, this);else {
+          if (autoRotate$1 && autoRotate(labelShapes, {
+            labelRotateAngle: autoRotateAngle,
+            orient: orient
+          }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
+            const verticalLimitLength = "left" !== orient && "right" !== orient || !labelShapes.some(label => "vertical" === label.attribute.direction) ? 1 / 0 : Math.abs(this.attribute.start.y - this.attribute.end.y) / labelShapes.length;
+            autoLimit(labelShapes, {
+              limitLength: limitLength,
+              verticalLimitLength: verticalLimitLength,
+              ellipsis: limitEllipsis,
+              orient: orient
+            });
+          }
+          autoHide$1 && autoHide(labelShapes, {
+            orient: orient,
+            method: autoHideMethod,
+            separation: autoHideSeparation,
+            lastVisible: lastVisible
+          });
+        }
       }
       afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         const {
@@ -26383,7 +26422,8 @@
           shapeSize = 0,
           shapeSpace = 0;
         if (shapeAttr && !1 !== shapeAttr.visible) {
-          shapeSize = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE), shapeSpace = get$5(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
+          const s = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
+          shapeSize = isArray$3(s) ? s[0] || 0 : s, shapeSpace = get$5(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
           const itemShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
@@ -48924,6 +48964,9 @@
             return;
         }
         group.forEachChildren((child) => {
+            if (!child) {
+                return;
+            }
             if (isObject$6(child.attribute.width) && child.attribute.width.percent) {
                 child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
                     (child.attribute.width.delta ?? 0));
@@ -48938,7 +48981,7 @@
         });
     }
     function decodeReactDom(dom) {
-        if (!dom.$$typeof) {
+        if (!dom || !dom.$$typeof) {
             return dom;
         }
         const type = dom.type;
@@ -66947,7 +66990,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.17.5";
+        version = "0.17.6";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -77690,7 +77733,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.17.5";
+    const version = "0.17.6";
     function getIcons() {
         return get$2();
     }