@visactor/vtable 0.13.1-alpha.0 → 0.13.1

package/dist/vtable.js

@@ -738,6 +738,87 @@
     };
     var clampRange$1 = clampRange;
 
+    let hasRaf = !1;
+    try {
+      hasRaf = "function" == typeof requestAnimationFrame && "function" == typeof cancelAnimationFrame;
+    } catch (err) {
+      hasRaf = !1;
+    }
+    function debounce$1(func, wait, options) {
+      let lastArgs,
+        lastThis,
+        maxWait,
+        result,
+        timerId,
+        lastCallTime,
+        lastInvokeTime = 0,
+        leading = !1,
+        maxing = !1,
+        trailing = !0;
+      const useRAF = !wait && 0 !== wait && hasRaf;
+      if ("function" != typeof func) throw new TypeError("Expected a function");
+      function invokeFunc(time) {
+        const args = lastArgs,
+          thisArg = lastThis;
+        return lastArgs = lastThis = void 0, lastInvokeTime = time, result = func.apply(thisArg, args), result;
+      }
+      function startTimer(pendingFunc, wait) {
+        return useRAF ? (cancelAnimationFrame(timerId), requestAnimationFrame(pendingFunc)) : setTimeout(pendingFunc, wait);
+      }
+      function shouldInvoke(time) {
+        const timeSinceLastCall = time - lastCallTime;
+        return void 0 === lastCallTime || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && time - lastInvokeTime >= maxWait;
+      }
+      function timerExpired() {
+        const time = Date.now();
+        if (shouldInvoke(time)) return trailingEdge(time);
+        timerId = startTimer(timerExpired, function (time) {
+          const timeSinceLastInvoke = time - lastInvokeTime,
+            timeWaiting = wait - (time - lastCallTime);
+          return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+        }(time));
+      }
+      function trailingEdge(time) {
+        return timerId = void 0, trailing && lastArgs ? invokeFunc(time) : (lastArgs = lastThis = void 0, result);
+      }
+      function debounced() {
+        const time = Date.now(),
+          isInvoking = shouldInvoke(time);
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        if (lastArgs = args, lastThis = this, lastCallTime = time, isInvoking) {
+          if (void 0 === timerId) return function (time) {
+            return lastInvokeTime = time, timerId = startTimer(timerExpired, wait), leading ? invokeFunc(time) : result;
+          }(lastCallTime);
+          if (maxing) return timerId = startTimer(timerExpired, wait), invokeFunc(lastCallTime);
+        }
+        return void 0 === timerId && (timerId = startTimer(timerExpired, wait)), result;
+      }
+      return wait = +wait || 0, isObject$4(options) && (leading = !!options.leading, maxing = "maxWait" in options, maxing && (maxWait = Math.max(isValidNumber$1(options.maxWait) ? options.maxWait : 0, wait)), trailing = "trailing" in options ? !!options.trailing : trailing), debounced.cancel = function () {
+        void 0 !== timerId && function (id) {
+          if (useRAF) return cancelAnimationFrame(id);
+          clearTimeout(id);
+        }(timerId), lastInvokeTime = 0, lastArgs = lastCallTime = lastThis = timerId = void 0;
+      }, debounced.flush = function () {
+        return void 0 === timerId ? result : trailingEdge(Date.now());
+      }, debounced.pending = function () {
+        return void 0 !== timerId;
+      }, debounced;
+    }
+    hasRaf = !1;
+
+    function throttle$1(func, wait, options) {
+      let leading = !0,
+        trailing = !0;
+      if ("function" != typeof func) throw new TypeError("Expected a function");
+      return isObject$4(options) && (leading = "leading" in options ? !!options.leading : leading, trailing = "trailing" in options ? !!options.trailing : trailing), debounce$1(func, wait, {
+        leading: leading,
+        trailing: trailing,
+        maxWait: wait
+      });
+    }
+
     const epsilon = 1e-12;
     const pi = Math.PI;
     const halfPi$1 = pi / 2;
@@ -1979,7 +2060,7 @@
         }
     };
 
-    let defaultStyle$7;
+    let defaultStyle$8;
     const STYLE_EVENT_TYPE = {
         CHANGE_STYLE: 'change_style'
     };
@@ -2014,7 +2095,7 @@
             return STYLE_EVENT_TYPE;
         }
         static get DEFAULT() {
-            return defaultStyle$7 ? defaultStyle$7 : (defaultStyle$7 = new Style());
+            return defaultStyle$8 ? defaultStyle$8 : (defaultStyle$8 = new Style());
         }
         constructor(style = {}, bodyStyle = {}) {
             super();
@@ -2199,10 +2280,10 @@
         }
     };
 
-    let defaultStyle$6;
+    let defaultStyle$7;
     let ImageStyle$1 = class ImageStyle extends Style$1 {
         static get DEFAULT() {
-            return defaultStyle$6 ? defaultStyle$6 : (defaultStyle$6 = new ImageStyle());
+            return defaultStyle$7 ? defaultStyle$7 : (defaultStyle$7 = new ImageStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -2212,12 +2293,12 @@
         }
     };
 
-    let defaultStyle$5;
+    let defaultStyle$6;
     class TextStyle extends Style$1 {
         _autoWrapText;
         _lineClamp;
         static get DEFAULT() {
-            return defaultStyle$5 ? defaultStyle$5 : (defaultStyle$5 = new TextStyle());
+            return defaultStyle$6 ? defaultStyle$6 : (defaultStyle$6 = new TextStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -2260,7 +2341,7 @@
         return StyleClassDef.DEFAULT;
     }
 
-    let defaultStyle$4;
+    let defaultStyle$5;
     const EVENT_TYPE$1 = {
         CHANGE_STYLE: 'change_style'
     };
@@ -2295,7 +2376,7 @@
             return EVENT_TYPE$1;
         }
         static get DEFAULT() {
-            return defaultStyle$4 ? defaultStyle$4 : (defaultStyle$4 = new Style());
+            return defaultStyle$5 ? defaultStyle$5 : (defaultStyle$5 = new Style());
         }
         constructor(style = {}, headerStyle = {}) {
             super();
@@ -2480,12 +2561,12 @@
         }
     }
 
-    let defaultStyle$3;
+    let defaultStyle$4;
     class TextHeaderStyle extends Style {
         _autoWrapText;
         _lineClamp;
         static get DEFAULT() {
-            return defaultStyle$3 ? defaultStyle$3 : (defaultStyle$3 = new TextHeaderStyle());
+            return defaultStyle$4 ? defaultStyle$4 : (defaultStyle$4 = new TextHeaderStyle());
         }
         constructor(style = {}, headerStyle = null) {
             super(style, headerStyle);
@@ -6313,7 +6394,7 @@
     const EnvContribution = Symbol.for("EnvContribution");
     const VGlobal = Symbol.for("VGlobal");
 
-    var __decorate$1N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -6338,18 +6419,33 @@
       get supportEvent() {
         return this._env || this.setEnv("browser"), this.envContribution.supportEvent;
       }
+      set supportEvent(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportEvent = support;
+      }
       get supportsTouchEvents() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents;
       }
+      set supportsTouchEvents(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents = support;
+      }
       get supportsPointerEvents() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents;
       }
+      set supportsPointerEvents(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents = support;
+      }
       get supportsMouseEvents() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents;
       }
+      set supportsMouseEvents(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents = support;
+      }
       get applyStyles() {
         return this._env || this.setEnv("browser"), this.envContribution.applyStyles;
       }
+      set applyStyles(support) {
+        this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
+      }
       constructor(contributions) {
         this.contributions = contributions, this.hooks = {
           onSetEnv: new SyncHook(["lastEnv", "env", "global"])
@@ -6465,7 +6561,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
       }
     };
-    DefaultGlobal = __decorate$1N([injectable(), __param$T(0, inject(ContributionProvider)), __param$T(0, named(EnvContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGlobal);
+    DefaultGlobal = __decorate$1O([injectable(), __param$T(0, inject(ContributionProvider)), __param$T(0, named(EnvContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGlobal);
 
     const circleThreshold$1 = tau - 1e-8;
     let BoundsContext$1 = class BoundsContext {
@@ -6617,10 +6713,10 @@
     !function (AnimateStepType) {
       AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
     }(AnimateStepType$1 || (AnimateStepType$1 = {}));
-    var Direction$1;
+    var Direction$2;
     !function (Direction) {
       Direction[Direction.ROW = 1] = "ROW", Direction[Direction.COLUMN = 2] = "COLUMN";
-    }(Direction$1 || (Direction$1 = {}));
+    }(Direction$2 || (Direction$2 = {}));
     var CurveTypeEnum$1;
     !function (CurveTypeEnum) {
       CurveTypeEnum[CurveTypeEnum.CubicBezierCurve = 0] = "CubicBezierCurve", CurveTypeEnum[CurveTypeEnum.QuadraticBezierCurve = 1] = "QuadraticBezierCurve", CurveTypeEnum[CurveTypeEnum.ArcCurve = 2] = "ArcCurve", CurveTypeEnum[CurveTypeEnum.LineCurve = 3] = "LineCurve", CurveTypeEnum[CurveTypeEnum.EllipseCurve = 4] = "EllipseCurve", CurveTypeEnum[CurveTypeEnum.MoveCurve = 5] = "MoveCurve";
@@ -6790,7 +6886,7 @@
         return this._validPoint() ? cubicLength$1(this.p0, this.p1, this.p2, this.p3) : 60;
       }
       calcProjLength(direction) {
-        return direction === Direction$1.ROW ? abs(this.p0.x - this.p3.x) : direction === Direction$1.COLUMN ? abs(this.p0.y - this.p3.y) : 0;
+        return direction === Direction$2.ROW ? abs(this.p0.x - this.p3.x) : direction === Direction$2.COLUMN ? abs(this.p0.y - this.p3.y) : 0;
       }
       getAngleAt(t) {
         const minT = max(t - .01, 0),
@@ -6827,7 +6923,7 @@
         return this._validPoint() ? PointService.distancePP(this.p0, this.p1) : 60;
       }
       calcProjLength(direction) {
-        return direction === Direction$1.ROW ? abs(this.p0.x - this.p1.x) : direction === Direction$1.COLUMN ? abs(this.p0.y - this.p1.y) : 0;
+        return direction === Direction$2.ROW ? abs(this.p0.x - this.p1.x) : direction === Direction$2.COLUMN ? abs(this.p0.y - this.p1.y) : 0;
       }
     };
 
@@ -6884,14 +6980,14 @@
       }
       getLength(direction) {
         var _a, _b;
-        if (direction === Direction$1.COLUMN) {
+        if (direction === Direction$2.COLUMN) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
             ec = this.curves[this.curves.length - 1],
             endP = null !== (_a = ec.p3) && void 0 !== _a ? _a : ec.p1;
           return abs(sc.p0.y - endP.y);
         }
-        if (direction === Direction$1.ROW) {
+        if (direction === Direction$2.ROW) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
             ec = this.curves[this.curves.length - 1],
@@ -6962,7 +7058,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext$1("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new SegContext$1("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genLinearTypeSegments$1(new Linear$1(segContext, startPoint), points), segContext;
     }
     function genLinearTypeSegments$1(path, points) {
@@ -7019,7 +7115,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(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new SegContext$1("basis", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genBasisTypeSegments$1(new Basis$1(segContext, startPoint), points), segContext;
     }
 
@@ -7062,10 +7158,10 @@
       lineEnd() {
         switch (this._point) {
           case 2:
-            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2, this.lastPoint1);
+            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
             break;
           case 3:
-            point$4(this, this._t0, slope2$1(this, this._t0), !1 !== this._lastDefined2, this.lastPoint1);
+            point$4(this, this._t0, slope2$1(this, this._t0), !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
         }
         (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
       }
@@ -7117,7 +7213,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("monotoneX", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new SegContext$1("monotoneX", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genMonotpneXTypeSegments$1(new MonotoneX$1(segContext, startPoint), points), segContext;
     }
     function genMonotpneYTypeSegments$1(path, points) {
@@ -7131,7 +7227,7 @@
       } = 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(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new ReflectSegContext$1("monotoneY", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genMonotpneYTypeSegments$1(new MonotoneY$1(segContext, startPoint), points), segContext;
     }
 
@@ -7181,7 +7277,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext$1("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new SegContext$1("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genStepTypeSegments$1(new Step$3(segContext, t, startPoint), points), segContext;
     }
     function genStepTypeSegments$1(path, points) {
@@ -7229,7 +7325,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext$1("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      const segContext = new SegContext$1("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
       return genLinearClosedTypeSegments$1(new LinearClosed$1(segContext, startPoint), points), segContext;
     }
     function genLinearClosedTypeSegments$1(path, points) {
@@ -7328,7 +7424,7 @@
         } = line.attribute;
         if (!points) return;
         const cache = calcLineCache$2(points, curveType);
-        "x" === clipRangeByDimension ? this.direction = Direction$1.ROW : "y" === clipRangeByDimension ? this.direction = Direction$1.COLUMN : "auto" === clipRangeByDimension && (this.direction = cache.direction), this.curves = cache.curves;
+        "x" === clipRangeByDimension ? this.direction = Direction$2.ROW : "y" === clipRangeByDimension ? this.direction = Direction$2.COLUMN : "auto" === clipRangeByDimension && (this.direction = cache.direction), this.curves = cache.curves;
       }
       fromCustomPath2D(path, x, y, sX, sY) {
         return this.clear(), this._runCommandList(path.commandList, x, y, sX, sY), this._updateBounds(), this;
@@ -7490,13 +7586,13 @@
         this.commandList = [], this._boundsContext = null, this._ctx = null;
       }
       getLength() {
-        if (this.direction === Direction$1.COLUMN) {
+        if (this.direction === Direction$2.COLUMN) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
             ec = this.curves[this.curves.length - 1];
           return abs(sc.p0.y - ec.p1.y);
         }
-        if (this.direction === Direction$1.ROW) {
+        if (this.direction === Direction$2.ROW) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
             ec = this.curves[this.curves.length - 1];
@@ -7881,7 +7977,7 @@
       return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
     }
 
-    var __decorate$1M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -8061,9 +8157,9 @@
         return data.str += suffix, data.width += suffixWidth, data;
       }
     };
-    ATextMeasure = __decorate$1M([injectable()], ATextMeasure);
+    ATextMeasure = __decorate$1N([injectable()], ATextMeasure);
 
-    var __decorate$1L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -8072,7 +8168,7 @@
     };
     const TextMeasureContribution = Symbol.for("TextMeasureContribution");
     let DefaultTextMeasureContribution = class extends ATextMeasure {};
-    DefaultTextMeasureContribution = __decorate$1L([injectable()], DefaultTextMeasureContribution);
+    DefaultTextMeasureContribution = __decorate$1M([injectable()], DefaultTextMeasureContribution);
 
     const container = new Container$2();
 
@@ -8444,7 +8540,7 @@
       return containPath(commands, lineWidth, !0, x, y);
     }
 
-    var __decorate$1K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -8507,7 +8603,7 @@
         }, null != option ? option : {}), textSpec);
       }
     };
-    DefaultGraphicUtil = __decorate$1K([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(TextMeasureContribution)), __param$S(1, inject(VGlobal)), __metadata$16("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+    DefaultGraphicUtil = __decorate$1L([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(TextMeasureContribution)), __param$S(1, inject(VGlobal)), __metadata$16("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
     var TransformMode;
     !function (TransformMode) {
       TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -8565,7 +8661,7 @@
         return this;
       }
     };
-    DefaultTransformUtil = __decorate$1K([injectable(), __metadata$16("design:paramtypes", [])], DefaultTransformUtil);
+    DefaultTransformUtil = __decorate$1L([injectable(), __metadata$16("design:paramtypes", [])], DefaultTransformUtil);
 
     const defaultThemeObj$1 = {
         arc: DefaultArcAttribute$1,
@@ -9293,14 +9389,14 @@
         e.propagationStopped = !1, e.propagationImmediatelyStopped = !1, this.propagate(e, type), this.dispatch.emit(type || e.type, e);
       }
       mapEvent(e) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.rootTarget) return;
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage.renderCount) === (null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
           [cacheKey]: target,
-          stageRenderCount: null !== (_e = null == target ? void 0 : target.stage.renderCount) && void 0 !== _e ? _e : -1
+          stageRenderCount: null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1
         })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);
       }
       propagate(e, type) {
@@ -10389,6 +10485,11 @@
     RafBasedSTO.TimeOut = 1e3 / 60;
     const rafBasedSto = new RafBasedSTO();
 
+    var Direction$1;
+    !function (Direction) {
+      Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", Direction[Direction.STROKE = 4] = "STROKE";
+    }(Direction$1 || (Direction$1 = {}));
+
     const {
       Color: Color$2
     } = ColorUtil$1;
@@ -10519,6 +10620,10 @@
       return ColorStore$1.Get(fromColor, ColorType$1.Color255, _fromColorRGB$1), ColorStore$1.Get(toColor, ColorType$1.Color255, _toColorRGB$1), `rgba(${Math.round(_fromColorRGB$1[0] + (_toColorRGB$1[0] - _fromColorRGB$1[0]) * ratio)},${Math.round(_fromColorRGB$1[1] + (_toColorRGB$1[1] - _fromColorRGB$1[1]) * ratio)},${Math.round(_fromColorRGB$1[2] + (_toColorRGB$1[2] - _fromColorRGB$1[2]) * ratio)},${_fromColorRGB$1[3] + (_toColorRGB$1[3] - _fromColorRGB$1[3]) * ratio})`;
     }
 
+    Object.keys(DEFAULT_COLORS$1).forEach(k => {
+      DEFAULT_COLORS$1[k];
+    });
+
     let ResourceLoader$1 = class ResourceLoader {
       static GetImage(url, mark) {
         var _a;
@@ -11799,7 +11904,7 @@
     const DynamicLayerHandlerContribution = Symbol.for("DynamicLayerHandlerContribution");
     const VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
 
-    var __decorate$1J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -11836,12 +11941,13 @@
           main: !1
         };
         this.tryInit();
-        const layerMode = this.getRecommendedLayerType(options.layerMode),
-          layerHandler = this.getLayerHandler(layerMode),
+        let layerMode = this.getRecommendedLayerType(options.layerMode);
+        layerMode = options.canvasId ? "static" : layerMode;
+        const layerHandler = this.getLayerHandler(layerMode),
           layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({
             main: !1
           }, options), {
-            layerMode: options.canvasId ? "static" : layerMode,
+            layerMode: layerMode,
             canvasId: options.canvasId,
             layerHandler: layerHandler
           })),
@@ -11867,9 +11973,9 @@
         return "browser" === this.global.env ? 10 : 0;
       }
     };
-    DefaultLayerService = __decorate$1J([injectable(), __param$R(0, inject(VGlobal)), __metadata$15("design:paramtypes", [Object])], DefaultLayerService);
+    DefaultLayerService = __decorate$1K([injectable(), __param$R(0, inject(VGlobal)), __metadata$15("design:paramtypes", [Object])], DefaultLayerService);
 
-    var __decorate$1I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -11982,7 +12088,7 @@
         return this._handler.getTopLeft(baseWindow);
       }
     };
-    __decorate$1I([postConstruct(), __metadata$14("design:type", Function), __metadata$14("design:paramtypes", []), __metadata$14("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1I([injectable(), __param$Q(0, inject(VGlobal)), __metadata$14("design:paramtypes", [Object])], DefaultWindow);
+    __decorate$1J([postConstruct(), __metadata$14("design:type", Function), __metadata$14("design:paramtypes", []), __metadata$14("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1J([injectable(), __param$Q(0, inject(VGlobal)), __metadata$14("design:paramtypes", [Object])], DefaultWindow);
 
     var coreModule = new ContainerModule(bind => {
       bind(DefaultGlobal).toSelf().inSingletonScope(), bind(VGlobal).toService(DefaultGlobal), bind(DefaultWindow).to(DefaultWindow), bind(VWindow).toService(DefaultWindow), bind(DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(DefaultGraphicUtil), bind(DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(DefaultTransformUtil), bind(DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(DefaultLayerService);
@@ -14735,6 +14841,29 @@
       cap: 1
     }, NOWORK_ANIMATE_ATTR$1);
 
+    class Arc3d extends Arc {
+      constructor(params) {
+        super(params), this.type = "arc3d", this.numberType = ARC3D_NUMBER_TYPE;
+      }
+      doUpdateAABBBounds() {
+        const polygonTheme = getTheme$1(this).arc;
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        const attribute = this.attribute,
+          bounds = application$1.graphicService.updateArc3dAABBBounds(attribute, getTheme$1(this).polygon, this._AABBBounds, this),
+          {
+            boundsPadding = polygonTheme.boundsPadding
+          } = attribute,
+          paddingArray = parsePadding$1(boundsPadding);
+        return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), this._AABBBounds;
+      }
+      getNoWorkAnimateAttr() {
+        return Arc3d.NOWORK_ANIMATE_ATTR;
+      }
+    }
+    Arc3d.NOWORK_ANIMATE_ATTR = Object.assign({
+      cap: 1
+    }, NOWORK_ANIMATE_ATTR$1);
+
     const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY$1];
     class Polygon extends Graphic$1 {
       constructor(params) {
@@ -14791,7 +14920,97 @@
     }
     Polygon.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
 
-    var __decorate$1H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    class Pyramid3d extends Polygon {
+      constructor(params) {
+        super(params), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+      }
+      doUpdateAABBBounds() {
+        const polygonTheme = getTheme$1(this).polygon;
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        const attribute = this.attribute,
+          bounds = application$1.graphicService.updatePyramid3dAABBBounds(attribute, getTheme$1(this).polygon, this._AABBBounds, this),
+          {
+            boundsPadding = polygonTheme.boundsPadding
+          } = attribute,
+          paddingArray = parsePadding$1(boundsPadding);
+        return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), this._AABBBounds;
+      }
+      findFace() {
+        const {
+            points: points
+          } = this.attribute,
+          kList = points.map((p, i) => {
+            const p1 = 3 === i ? points[0] : points[i + 1],
+              dx = p.x - p1.x;
+            return 0 === dx ? 0 : (p.y - p1.y) / dx;
+          }),
+          pointsMap = points.map(p => ({
+            p: p,
+            d: 0
+          }));
+        let find = !1,
+          maxD = 0;
+        for (let i = 0; i < kList.length - 1; i++) {
+          for (let j = i + 1; j < kList.length; j++) {
+            if (kList[i] === kList[j]) {
+              find = !0;
+              const d1 = PointService.distancePP(pointsMap[i].p, pointsMap[i + 1].p);
+              pointsMap[i].d = d1, pointsMap[i + 1].d = d1, maxD = max(maxD, d1);
+              const d2 = PointService.distancePP(pointsMap[j].p, pointsMap[j + 1].p);
+              pointsMap[j].d = d2, pointsMap[j + 1].d = d2, maxD = max(maxD, d2);
+            }
+            if (find) break;
+          }
+          if (find) break;
+        }
+        for (let i = points.length - 1; i >= 0; i--) {
+          const p = points[i];
+          pointsMap.unshift({
+            p: p,
+            d: 0
+          });
+        }
+        for (let i = 0; i < points.length; i++) {
+          const delta = (maxD - pointsMap[i + points.length].d) / 2;
+          pointsMap[i].d += delta, pointsMap[i + points.length].d += delta;
+        }
+        const faces = {
+          polygons: [],
+          vertices: [],
+          edges: []
+        };
+        return pointsMap.forEach(p => {
+          faces.vertices.push([p.p.x, p.p.y, p.d]);
+        }), faces.polygons.push({
+          polygon: [0, 4, 5, 1],
+          normal: [0, -1, 0]
+        }), faces.polygons.push({
+          polygon: [7, 6, 2, 3],
+          normal: [0, 1, 0]
+        }), faces.polygons.push({
+          polygon: [0, 4, 7, 3],
+          normal: [-1, 0, 0]
+        }), faces.polygons.push({
+          polygon: [1, 5, 6, 2],
+          normal: [1, 0, 0]
+        }), faces.polygons.push({
+          polygon: [0, 1, 2, 3],
+          normal: [0, 0, -1]
+        }), faces.polygons.push({
+          polygon: [4, 5, 6, 7],
+          normal: [0, 0, 1]
+        }), faces.edges = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [3, 7], [1, 5], [2, 6]], faces;
+      }
+      _isValid() {
+        return super._isValid() && 4 === this.attribute.points.length;
+      }
+      getNoWorkAnimateAttr() {
+        return Pyramid3d.NOWORK_ANIMATE_ATTR;
+      }
+    }
+    Pyramid3d.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
+
+    var __decorate$1I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14815,9 +15034,9 @@
         return aabbBounds;
       }
     };
-    DefaultOuterBorderBoundsContribution = __decorate$1H([injectable()], DefaultOuterBorderBoundsContribution);
+    DefaultOuterBorderBoundsContribution = __decorate$1I([injectable()], DefaultOuterBorderBoundsContribution);
 
-    var __decorate$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14826,9 +15045,9 @@
     };
     const RectBoundsContribution = Symbol.for("RectBoundsContribution");
     let DefaultRectOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-    DefaultRectOuterBorderBoundsContribution = __decorate$1G([injectable()], DefaultRectOuterBorderBoundsContribution);
+    DefaultRectOuterBorderBoundsContribution = __decorate$1H([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-    var __decorate$1F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14854,9 +15073,9 @@
         return aabbBounds;
       }
     };
-    DefaultSymbolOuterBorderBoundsContribution = __decorate$1F([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+    DefaultSymbolOuterBorderBoundsContribution = __decorate$1G([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-    var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14865,9 +15084,9 @@
     };
     const CircleBoundsContribution = Symbol.for("CircleBoundsContribution");
     let DefaultCircleOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-    DefaultCircleOuterBorderBoundsContribution = __decorate$1E([injectable()], DefaultCircleOuterBorderBoundsContribution);
+    DefaultCircleOuterBorderBoundsContribution = __decorate$1F([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-    var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14876,9 +15095,9 @@
     };
     const ArcBoundsContribution = Symbol.for("ArcBoundsContribution");
     let DefaultArcOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-    DefaultArcOuterBorderBoundsContribution = __decorate$1D([injectable()], DefaultArcOuterBorderBoundsContribution);
+    DefaultArcOuterBorderBoundsContribution = __decorate$1E([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-    var __decorate$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14887,7 +15106,7 @@
     };
     const PathBoundsContribution = Symbol.for("PathBoundsContribution");
     let DefaultPathOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-    DefaultPathOuterBorderBoundsContribution = __decorate$1C([injectable()], DefaultPathOuterBorderBoundsContribution);
+    DefaultPathOuterBorderBoundsContribution = __decorate$1D([injectable()], DefaultPathOuterBorderBoundsContribution);
 
     function createMat4() {
       return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -14947,7 +15166,7 @@
     const matrixAllocate = new DefaultMatrixAllocate();
     const mat4Allocate = new DefaultMat4Allocate();
 
-    var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15498,7 +15717,7 @@
         this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
       }
     };
-    DefaultGraphicService = __decorate$1B([injectable(), __param$P(0, inject(GraphicCreator)), __param$P(1, inject(ContributionProvider)), __param$P(1, named(RectBoundsContribution)), __param$P(2, inject(ContributionProvider)), __param$P(2, named(SymbolBoundsContribution)), __param$P(3, inject(ContributionProvider)), __param$P(3, named(CircleBoundsContribution)), __param$P(4, inject(ContributionProvider)), __param$P(4, named(ArcBoundsContribution)), __param$P(5, inject(ContributionProvider)), __param$P(5, named(PathBoundsContribution)), __metadata$13("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$1C([injectable(), __param$P(0, inject(GraphicCreator)), __param$P(1, inject(ContributionProvider)), __param$P(1, named(RectBoundsContribution)), __param$P(2, inject(ContributionProvider)), __param$P(2, named(SymbolBoundsContribution)), __param$P(3, inject(ContributionProvider)), __param$P(3, named(CircleBoundsContribution)), __param$P(4, inject(ContributionProvider)), __param$P(4, named(ArcBoundsContribution)), __param$P(5, inject(ContributionProvider)), __param$P(5, named(PathBoundsContribution)), __metadata$13("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
     class ShadowRoot extends Group$1 {
       constructor(graphic) {
@@ -15606,7 +15825,7 @@
     }
     createRichText$1({});
 
-    var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15740,9 +15959,9 @@
         this.z = z, drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
       }
     };
-    BaseRender = __decorate$1A([injectable()], BaseRender);
+    BaseRender = __decorate$1B([injectable()], BaseRender);
 
-    var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15908,9 +16127,9 @@
         this._draw(arc, arcAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasArcRender = __decorate$1z([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$12("design:paramtypes", [Object])], DefaultCanvasArcRender);
+    DefaultCanvasArcRender = __decorate$1A([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$12("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-    var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15953,7 +16172,7 @@
         this._draw(circle, circleAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasCircleRender = __decorate$1y([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(CircleRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+    DefaultCanvasCircleRender = __decorate$1z([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(CircleRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
     function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
       var _a;
@@ -16003,7 +16222,7 @@
       }
       if (percent <= 0) return;
       let direction;
-      "x" === clipRangeByDimension ? direction = Direction$1.ROW : "y" === clipRangeByDimension ? direction = Direction$1.COLUMN : "auto" === clipRangeByDimension && (direction = segPath.direction);
+      "x" === clipRangeByDimension ? direction = Direction$2.ROW : "y" === clipRangeByDimension ? direction = Direction$2.COLUMN : "auto" === clipRangeByDimension && (direction = segPath.direction);
       const totalDrawLength = percent * segPath.tryUpdateLength(direction);
       let drawedLengthUntilLast = 0,
         defined0 = !0,
@@ -16091,7 +16310,7 @@
       }
     }
 
-    var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16225,7 +16444,7 @@
         } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
       }
     };
-    DefaultCanvasLineRender = __decorate$1x([injectable()], DefaultCanvasLineRender);
+    DefaultCanvasLineRender = __decorate$1y([injectable()], DefaultCanvasLineRender);
 
     function drawAreaSegments(path, segPath, percent, params) {
       var _a;
@@ -16281,8 +16500,8 @@
         endP = null !== (_a = topCurves[topCurves.length - 1].p3) && void 0 !== _a ? _a : topCurves[topCurves.length - 1].p1,
         xTotalLength = abs(endP.x - topCurves[0].p0.x),
         yTotalLength = abs(endP.y - topCurves[0].p0.y);
-      direction = null != direction ? direction : xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN, Number.isFinite(xTotalLength) || (direction = Direction$1.COLUMN), Number.isFinite(yTotalLength) || (direction = Direction$1.ROW);
-      const totalDrawLength = percent * (direction === Direction$1.ROW ? xTotalLength : yTotalLength);
+      direction = null != direction ? direction : xTotalLength > yTotalLength ? Direction$2.ROW : Direction$2.COLUMN, Number.isFinite(xTotalLength) || (direction = Direction$2.COLUMN), Number.isFinite(yTotalLength) || (direction = Direction$2.ROW);
+      const totalDrawLength = percent * (direction === Direction$2.ROW ? xTotalLength : yTotalLength);
       let drawedLengthUntilLast = 0,
         lastDefined = !0;
       const topList = [],
@@ -16365,7 +16584,7 @@
       }
     }
 
-    var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16536,12 +16755,12 @@
         } = area.attribute;
         let endP,
           startP,
-          direction = Direction$1.ROW;
+          direction = Direction$2.ROW;
         if (segments) {
           const endSeg = segments[segments.length - 1];
           startP = segments[0].points[0], endP = endSeg.points[endSeg.points.length - 1];
         } else startP = points[0], endP = points[points.length - 1];
-        direction = abs(endP.x - startP.x) > abs(endP.y - startP.y) ? Direction$1.ROW : Direction$1.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+        direction = abs(endP.x - startP.x) > abs(endP.y - startP.y) ? Direction$2.ROW : Direction$2.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
@@ -16563,7 +16782,7 @@
           const {
             stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
           } = attribute;
-          isArray$5(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
+          isArray$5(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$2.ROW ? "x" : "y", {
             offsetX: offsetX,
             offsetY: offsetY,
             offsetZ: offsetZ,
@@ -16576,9 +16795,9 @@
         return !1;
       }
     };
-    DefaultCanvasAreaRender = __decorate$1w([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(AreaRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+    DefaultCanvasAreaRender = __decorate$1x([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(AreaRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
-    var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16624,7 +16843,7 @@
         this._draw(path, pathAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasPathRender = __decorate$1v([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(PathRenderContribution)), __metadata$$("design:paramtypes", [Object])], DefaultCanvasPathRender);
+    DefaultCanvasPathRender = __decorate$1w([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(PathRenderContribution)), __metadata$$("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
     const halfPi = pi / 2;
     function createRectPath(path, x, y, width, height, rectCornerRadius) {
@@ -16681,7 +16900,7 @@
       return path.closePath(), path;
     }
 
-    var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16736,9 +16955,9 @@
         this._draw(rect, rectAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasRectRender = __decorate$1u([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(RectRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasRectRender);
+    DefaultCanvasRectRender = __decorate$1v([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(RectRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-    var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16797,9 +17016,9 @@
         this._draw(symbol, symbolAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasSymbolRender = __decorate$1t([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(SymbolRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+    DefaultCanvasSymbolRender = __decorate$1u([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(SymbolRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
-    var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -17007,7 +17226,17 @@
         }
       }
     };
-    DefaultCanvasTextRender = __decorate$1s([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(TextRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasTextRender);
+    DefaultCanvasTextRender = __decorate$1t([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(TextRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasTextRender);
+
+    var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    let AbstractGraphicRender = class {};
+    AbstractGraphicRender = __decorate$1s([injectable()], AbstractGraphicRender);
 
     function drawPolygon(path, points, x, y) {
       path.moveTo(points[0].x + x, points[0].y + y);
@@ -20443,7 +20672,10 @@
           canvasControled: !1 !== params.canvasControled,
           title: params.title || "",
           canvas: params.canvas
-        }), this._viewBox = new AABBBounds(), params.viewBox ? this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : this._viewBox.setValue(0, 0, this.width, this.height), this.state = "normal", this.renderCount = 0, this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
+        }), this._viewBox = new AABBBounds(), params.viewBox ? this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : this._viewBox.setValue(0, 0, this.width, this.height), this.state = "normal", this.renderCount = 0, this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, params.canvas && isString$3(params.canvas) ? {
+          main: !0,
+          canvasId: params.canvas
+        } : {
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, this.global.supportEvent && (this.eventSystem = new EventSystem({
           targetElement: this.window,
@@ -20616,7 +20848,8 @@
       createLayer(canvasId, layerMode) {
         const layer = this.layerService.createLayer(this, {
           main: !1,
-          layerMode: layerMode
+          layerMode: layerMode,
+          canvasId: canvasId
         });
         return this.appendChild(layer), layer;
       }
@@ -20795,6 +21028,11 @@
       return new Stage(params);
     }
 
+    var params;
+    !function (params) {
+      params[params.W = 1] = "W", params[params.H = 2] = "H", params[params.WH = 3] = "WH";
+    }(params || (params = {}));
+
     var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -21275,7 +21513,11 @@
         return result;
       }
       containsPoint(graphic, point, params) {
-        return !!this.pickItem(graphic, point, null, params);
+        var _a;
+        return !!(null === (_a = this.pickItem(graphic, point, null, null != params ? params : {
+          pickContext: this.pickContext,
+          pickerService: this
+        })) || void 0 === _a ? void 0 : _a.graphic);
       }
       pickGroup(group, point, parentMatrix, params) {
         let result = {
@@ -21949,7 +22191,8 @@
           getBoundingClientRect: () => ({
             height: domref.height,
             width: domref.width
-          })
+          }),
+          nativeCanvas: _canvas
         };
         canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
       });
@@ -24646,6 +24889,10 @@
       init() {
         this._context = new LynxContext2d(this, this._dpr);
       }
+      resize(width, height) {
+        this._pixelWidth = width * this._dpr, this._pixelHeight = height * this._dpr, this._displayWidth = width, this._displayHeight = height, this._nativeCanvas.width = this._pixelWidth, this._nativeCanvas.height = this._pixelHeight, this._nativeCanvas.nativeCanvas && (this._nativeCanvas.nativeCanvas.width = this._pixelWidth, this._nativeCanvas.nativeCanvas.height = this._pixelHeight);
+        this._context.dpr = this._dpr;
+      }
       release() {}
     };
     LynxCanvas.env = "lynx", LynxCanvas = __decorate$d([injectable(), __metadata$8("design:paramtypes", [Object])], LynxCanvas);
@@ -24745,7 +24992,9 @@
         });
       }
       releaseWindow() {}
-      resizeWindow(width, height) {}
+      resizeWindow(width, height) {
+        this.canvas.resize(width, height);
+      }
       setDpr(dpr) {
         this.canvas.dpr = dpr;
       }
@@ -25479,6 +25728,10 @@
       }
     }
 
+    const delayMap = {
+      debounce: debounce$1,
+      throttle: throttle$1
+    };
     class ScrollBar extends AbstractComponent {
       constructor(attributes) {
         super(merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
@@ -25513,29 +25766,44 @@
           } = this.attribute;
           this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), this._slider.addEventListener("pointerup", this._onSliderPointerUp), this._slider.addEventListener("pointerupoutside", this._onSliderPointerUp));
-        }, this._onSliderPointerMove = e => {
-          e.stopPropagation();
+          }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
+        }, this._computeScrollValue = e => {
           const {
             direction: direction
           } = this.attribute;
           let currentScrollValue,
             currentPos,
             delta = 0;
+          const {
+            width: width,
+            height: height
+          } = this._getSliderRenderBounds();
+          return "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
+        }, this._onSliderPointerMove = delayMap[this.attribute.delayType](e => {
+          e.stopPropagation();
           const preScrollRange = this.getScrollRange(),
-            {
-              width: width,
-              height: height
-            } = this._getSliderRenderBounds();
-          "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
-        }, this._onSliderPointerUp = e => {
-          e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
+            [currentPos, currentScrollValue] = this._computeScrollValue(e);
+          this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
+        }, this.attribute.delayTime), this._onSliderPointerUp = e => {
+          e.preventDefault();
+          const {
+              realTime = !0,
+              range: preRange,
+              limitRange = [0, 1]
+            } = this.attribute,
+            preScrollRange = this.getScrollRange(),
+            [currentPos, currentScrollValue] = this._computeScrollValue(e),
+            range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
+          realTime || this._onChange({
+            pre: preRange,
+            value: clampRange$1(range, limitRange[0], limitRange[1])
+          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+          }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
       }
       setScrollRange(range) {
@@ -25544,14 +25812,15 @@
         const {
             direction = "horizontal",
             limitRange = [0, 1],
-            range: preRange
+            range: preRange,
+            realTime = !0
           } = this.attribute,
           currScrollRange = clampRange$1(range, limitRange[0], limitRange[1]);
         if (render) {
           const sliderPos = this._getSliderPos(currScrollRange);
           this._slider && ("horizontal" === direction ? this._slider.setAttribute("x", sliderPos[0], !0) : this._slider.setAttribute("y", sliderPos[0], !0), (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.autoRender) || null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
         }
-        this.attribute.range = currScrollRange, this._onChange({
+        this.attribute.range = currScrollRange, realTime && this._onChange({
           pre: preRange,
           value: currScrollRange
         });
@@ -25560,7 +25829,12 @@
         return this.attribute.range;
       }
       bindEvents() {
-        this.attribute.disableTriggerEvent || (this._rail && this._rail.addEventListener("pointerdown", this._onRailPointerDown), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown));
+        if (this.attribute.disableTriggerEvent) return;
+        const {
+          delayType = "throttle",
+          delayTime = 0
+        } = this.attribute;
+        this._rail && this._rail.addEventListener("pointerdown", delayMap[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
       }
       render() {
         this._reset();
@@ -25690,7 +25964,10 @@
         fill: "rgba(0, 0, 0, .0)"
       },
       padding: 2,
-      scrollRange: [0, 1]
+      scrollRange: [0, 1],
+      delayType: "throttle",
+      delayTime: 0,
+      realTime: !0
     };
 
     function traverseGroup(group, cb) {
@@ -26236,7 +26513,12 @@
     PopTipPlugin = __decorate$1([injectable()], PopTipPlugin);
     let PopTipForClipedTextPlugin = class {
       constructor() {
-        this.name = "poptipForText", this.activeEvent = "onRegister", this._uid = Generator$1.GenAutoIncrementId(), this.key = this.name + this._uid, this.poptip = e => {
+        this.name = "poptipForText", this.activeEvent = "onRegister", this._uid = Generator$1.GenAutoIncrementId(), this.key = this.name + this._uid, this.pointerlave = e => {
+          const {
+            stage: stage
+          } = this.pluginService;
+          e.target === stage && this.unpoptip(e);
+        }, this.poptip = e => {
           const graphic = e.target;
           if ("text" !== graphic.type || !graphic.cliped || graphic.isContainer || !graphic.attribute) return void this.unpoptip(e);
           if (graphic === this.activeGraphic) return;
@@ -26253,7 +26535,7 @@
         const {
           stage: stage
         } = this.pluginService;
-        stage.addEventListener("pointerover", this.poptip);
+        stage.addEventListener("pointerover", this.poptip), stage.addEventListener("pointerleave", this.pointerlave);
       }
       setActiveGraphic(graphic, rerender) {
         this.activeGraphic = graphic, this.pluginService.stage.renderNextFrame();
@@ -26262,7 +26544,7 @@
         const {
           stage: stage
         } = this.pluginService;
-        stage.removeEventListener("pointerover", this.poptip);
+        stage.removeEventListener("pointerover", this.poptip), stage.removeEventListener("pointerleave", this.pointerlave);
       }
     };
     PopTipForClipedTextPlugin = __decorate$1([injectable()], PopTipForClipedTextPlugin);
@@ -26816,11 +27098,14 @@
           value: tickDatum.rawValue,
           index: tickDatum.index,
           layer: layer
-        })), Object.assign(Object.assign(Object.assign({}, point), {
+        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, text, textStyle)), {
           text: text,
           lineHeight: null == textStyle ? void 0 : textStyle.fontSize
         }), textStyle);
       }
+      getLabelPosition(point, vector, text, style) {
+        return point;
+      }
       _transformItems(items) {
         const data = [];
         return items.forEach(item => {
@@ -27828,10 +28113,10 @@
         }));
         this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, null == labelAttr ? void 0 : labelAttr.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
         const labelSpace = get$4(labelAttr, "space", DEFAULT_LABEL_SPACE);
-        if (focusStartX += shapeSize / 2 + shapeSpace + labelShape.AABBBounds.width() + labelSpace, isValid$6(value)) {
+        if (isValid$6(value)) {
           const valueSpace = get$4(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
             valueShape = createText$1(Object.assign(Object.assign({
-              x: focusStartX + labelSpace,
+              x: 0,
               y: 0,
               textAlign: "start",
               textBaseline: "middle",
@@ -27845,13 +28130,13 @@
               labelBounds = labelShape.AABBBounds,
               valueWidth = valueBounds.width(),
               labelWidth = labelBounds.width();
-            labelWidth > layoutWidth ? (layoutWidth - valueWidth) / labelWidth > .4 ? labelShape.setAttribute("maxLineWidth", layoutWidth - valueWidth) : (valueShape.setAttribute("maxLineWidth", .5 * layoutWidth), labelShape.setAttribute("maxLineWidth", .5 * layoutWidth)) : valueShape.setAttribute("maxLineWidth", layoutWidth - labelWidth), valueAttr.alignRight && valueShape.setAttributes({
+            labelWidth > layoutWidth ? (layoutWidth - valueWidth) / labelWidth > .4 ? labelShape.setAttribute("maxLineWidth", layoutWidth - valueWidth) : (valueShape.setAttribute("maxLineWidth", .5 * layoutWidth), labelShape.setAttribute("maxLineWidth", .5 * layoutWidth)) : valueShape.setAttribute("maxLineWidth", layoutWidth - labelWidth), valueAttr.alignRight ? valueShape.setAttributes({
               textAlign: "right",
               x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
-            });
-          }
+            }) : valueShape.setAttribute("x", labelShape.AABBBounds.x2 + valueSpace);
+          } else valueShape.setAttribute("x", labelShape.AABBBounds.x2 + valueSpace);
           focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
-        } else this._itemWidthByUser && labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace);
+        } else this._itemWidthByUser ? (labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace), focusStartX = labelShape.AABBBounds.x2 + labelSpace) : focusStartX = labelShape.AABBBounds.x2 + labelSpace;
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
         const innerGroupBounds = innerGroup.AABBBounds,
           innerGroupWidth = innerGroupBounds.width(),
@@ -29485,9 +29770,9 @@
         super(merge$1({}, Slider.defaultAttributes, attributes)), this.name = "slider", this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, this._onHandlerPointerdown = e => {
           e.stopPropagation(), this._currentHandler = e.target, this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this._currentHandler.addEventListener("pointermove", this._onHandlerPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), this._currentHandler.addEventListener("pointerup", this._onHandlerPointerUp), this._currentHandler.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+          }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onHandlerPointerMove = e => {
           var _a, _b;
           e.stopPropagation();
@@ -29507,20 +29792,17 @@
             currentValue = newPos / railLen * (max - min) + min;
           "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onHandlerPointerUp = e => {
-          if (e.preventDefault(), this._currentHandler = null, "browser" === vglobal.env) vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          e.preventDefault(), this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp);else {
-            const currentTarget = e.target;
-            currentTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-              capture: !0
-            }), currentTarget.removeEventListener("pointerup", this._onHandlerPointerUp), currentTarget.removeEventListener("pointerupoutside", this._onHandlerPointerUp);
-          }
+          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onTrackPointerdown = e => {
           e.stopPropagation(), this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this._track.addEventListener("pointermove", this._onTrackPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), this._track.addEventListener("pointerup", this._onTrackPointerUp), this._track.addEventListener("pointerupoutside", this._onTrackPointerUp));
+          }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onTrackPointerMove = e => {
           e.stopPropagation();
           const {
@@ -29559,9 +29841,9 @@
         }, this._onTrackPointerUp = e => {
           e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+          }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
         }, this._onRailPointerDown = e => {
           e.stopPropagation();
           const {
@@ -30306,7 +30588,7 @@
         }
         if (isValid$6(verticalAlign) || isValid$6(null == textStyle ? void 0 : textStyle.verticalAlign)) {
           const mainTitleVerticalAlign = (null == textStyle ? void 0 : textStyle.verticalAlign) ? null == textStyle ? void 0 : textStyle.verticalAlign : verticalAlign,
-            mainTitleHeight = (null == textStyle ? void 0 : textStyle.height) ? null == textStyle ? void 0 : textStyle.height : titleWidth;
+            mainTitleHeight = (null == textStyle ? void 0 : textStyle.height) ? null == textStyle ? void 0 : textStyle.height : titleHeight;
           "top" === mainTitleVerticalAlign ? (null === (_18 = this._mainTitle) || void 0 === _18 || _18.setAttribute("y", 0), null === (_19 = this._mainTitle) || void 0 === _19 || _19.setAttribute("textBaseline", "top")) : "middle" === mainTitleVerticalAlign ? (null === (_20 = this._mainTitle) || void 0 === _20 || _20.setAttribute("y", mainTitleHeight / 2), null === (_21 = this._mainTitle) || void 0 === _21 || _21.setAttribute("textBaseline", "middle")) : "bottom" === mainTitleVerticalAlign && (null === (_22 = this._mainTitle) || void 0 === _22 || _22.setAttribute("y", mainTitleHeight), null === (_23 = this._mainTitle) || void 0 === _23 || _23.setAttribute("textBaseline", "bottom"));
         }
         if (isValid$6(align) || isValid$6(null == subtextStyle ? void 0 : subtextStyle.align)) {
@@ -30341,7 +30623,8 @@
       }
     };
 
-    const svg = '<svg width="200" height="200" viewBox="0 0 1024 1024" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"></path></svg>';
+    const checkSvg = '<svg width="200" height="200" viewBox="0 0 1024 1024" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"></path></svg>',
+      indeterminateSvg = '<svg width="200" height="200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" d="M5 12h14"/></svg>';
     class CheckBox extends AbstractComponent {
       constructor(attributes) {
         super(merge$1({}, CheckBox.defaultAttributes, attributes)), this.renderGroup(), this.onBeforeAttributeUpdate = (val, attributes, key) => {
@@ -30352,16 +30635,22 @@
         this.removeAllChild(), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
       }
       renderBox() {
-        this._box = new Rect$1(merge$1({}, this.attribute.box)), this.attribute.checked && this.attribute.disabled ? this._box.setAttributes({
+        this._box = new Rect$1(merge$1({}, this.attribute.box));
+        const isCheckedOrIndeterminate = this.attribute.checked || this.attribute.indeterminate;
+        isCheckedOrIndeterminate && this.attribute.disabled ? this._box.setAttributes({
           fill: this.attribute.box.disableCheckedFill,
           stroke: this.attribute.box.disableCheckedStroke
-        }) : this.attribute.checked && this._box.setAttributes({
+        }) : isCheckedOrIndeterminate && this._box.setAttributes({
           fill: this.attribute.box.checkedFill,
           stroke: this.attribute.box.checkedStroke
         }), this.appendChild(this._box);
       }
       renderIcon() {
-        this._icon = new Image$3(merge$1({}, this.attribute.icon)), this.attribute.checked || this._icon.setAttribute("visible", !1), this.appendChild(this._icon);
+        this._checkIcon = new Image$3(merge$1({
+          image: this.attribute.icon.checkIconImage
+        }, this.attribute.icon)), this.appendChild(this._checkIcon), this._indeterminateIcon = new Image$3(merge$1({
+          image: this.attribute.icon.indeterminateIconImage
+        }, this.attribute.icon)), this.appendChild(this._indeterminateIcon), this.attribute.checked ? (this._checkIcon.setAttribute("visible", !0), this._indeterminateIcon.setAttribute("visible", !1)) : this.attribute.indeterminate ? (this._checkIcon.setAttribute("visible", !1), this._indeterminateIcon.setAttribute("visible", !0)) : (this._checkIcon.setAttribute("visible", !1), this._indeterminateIcon.setAttribute("visible", !1));
       }
       renderText() {
         this._text = new WrapText(merge$1({}, this.attribute.text)), this.attribute.disabled && this._text.setAttribute("fill", this.attribute.text.disableFill), this.appendChild(this._text);
@@ -30386,7 +30675,10 @@
         this._box.setAttributes({
           x: boxX,
           y: boxY
-        }), this._icon.setAttributes({
+        }), this._checkIcon.setAttributes({
+          x: iconX,
+          y: iconY
+        }), this._indeterminateIcon.setAttributes({
           x: iconX,
           y: iconY
         }), this._text.setAttributes({
@@ -30397,7 +30689,7 @@
       handleClick() {
         var _a;
         if (this.attribute.disabled) return;
-        this.attribute.checked ? this.setAttribute("checked", !1) : this.setAttribute("checked", !0);
+        this.attribute.checked ? (this.setAttribute("checked", !1), this.setAttribute("indeterminate", !1)) : (this.setAttribute("checked", !0), this.setAttribute("indeterminate", !1));
         const changeEvent = new CustomEvent$1("checkbox_state_change", {
           eventType: "checkbox_state_change",
           checked: this.attribute.checked
@@ -30409,6 +30701,7 @@
       interactive: !0,
       disabled: !1,
       checked: !1,
+      indeterminate: !1,
       cursor: "pointer",
       disableCursor: "not-allowed",
       spaceBetweenTextAndIcon: 8,
@@ -30421,7 +30714,8 @@
         pickable: !1
       },
       icon: {
-        image: svg,
+        checkIconImage: checkSvg,
+        indeterminateIconImage: indeterminateSvg,
         width: 10,
         height: 10,
         pickable: !1
@@ -36670,12 +36964,12 @@
         }
         return maybePromiseOrValue;
     }
-    function getField(record, field, promiseCallBack) {
+    function getField(record, field, col, row, table, promiseCallBack) {
         if (record === null) {
             return undefined;
         }
         if (isPromise$1(record)) {
-            return record.then((r) => getField(r, field, promiseCallBack));
+            return record.then((r) => getField(r, field, col, row, table, promiseCallBack));
         }
         const fieldGet = isFieldAssessor(field) ? field.get : field;
         if (fieldGet in record) {
@@ -36683,7 +36977,7 @@
             return getValue(fieldResult, promiseCallBack);
         }
         if (typeof fieldGet === 'function') {
-            const fieldResult = fieldGet(record);
+            const fieldResult = fieldGet(record, col, row, table);
             return getValue(fieldResult, promiseCallBack);
         }
         if (Array.isArray(fieldGet)) {
@@ -36695,7 +36989,7 @@
             const fieldResult = record[fieldGet];
             return getValue(fieldResult, promiseCallBack);
         }
-        const fieldResult = applyChainSafe(record, (val, name) => getField(val, name, emptyFn), ...fieldArray);
+        const fieldResult = applyChainSafe(record, (val, name) => getField(val, name, col, row, table, emptyFn), ...fieldArray);
         return getValue(fieldResult, promiseCallBack);
     }
     function _getIndex(sortedIndexMap, index) {
@@ -36823,8 +37117,11 @@
         getIndexKey(index) {
             return _getIndex(this.currentPagerIndexedData, index);
         }
-        getField(index, field) {
-            return this.getOriginalField(_getIndex(this.currentPagerIndexedData, index), field);
+        getTableIndex(colOrRow) {
+            return this.currentPagerIndexedData.findIndex(value => value === colOrRow);
+        }
+        getField(index, field, col, row, table) {
+            return this.getOriginalField(_getIndex(this.currentPagerIndexedData, index), field, col, row, table);
         }
         hasField(index, field) {
             return this.hasOriginalField(_getIndex(this.currentPagerIndexedData, index), field);
@@ -37016,12 +37313,12 @@
                 this.recordPromiseCallBack(index, val);
             });
         }
-        getOriginalField(index, field) {
+        getOriginalField(index, field, col, row, table) {
             if (field === null) {
                 return undefined;
             }
             const record = this.getOriginalRecord(index);
-            return getField(record, field, (val) => {
+            return getField(record, field, col, row, table, (val) => {
                 this.fieldPromiseCallBack(index, field, val);
             });
         }
@@ -37079,7 +37376,7 @@
             }
             return super.getOriginalRecord(index);
         }
-        getOriginalField(index, field) {
+        getOriginalField(index, field, col, row, table) {
             const rowCache = this._fieldCache && this._fieldCache[index];
             if (rowCache) {
                 const cache = rowCache.get(field);
@@ -37087,7 +37384,7 @@
                     return cache;
                 }
             }
-            return super.getOriginalField(index, field);
+            return super.getOriginalField(index, field, col, row, table);
         }
         clearCache() {
             if (this._recordCache) {
@@ -37991,9 +38288,6 @@
                 table
             };
             const customRenderObj = customLayout(arg);
-            if (customRenderObj.rootContainer) {
-                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
-            }
             if (customRenderObj.rootContainer instanceof Group$1) {
                 elementsGroup = customRenderObj.rootContainer;
                 elementsGroup.name = 'custom-container';
@@ -38242,23 +38536,6 @@
         }
         return parseInt(str, 10);
     }
-    function decodeReactDom(dom) {
-        if (!dom.$$typeof) {
-            return dom;
-        }
-        const type = dom.type;
-        const { attribute, children } = dom.props;
-        const g = type({ attribute });
-        g.id = attribute.id;
-        g.name = attribute.name;
-        children &&
-            children.length &&
-            children.forEach((item) => {
-                const c = decodeReactDom(item);
-                g.add(c);
-            });
-        return g;
-    }
 
     const icons = {};
     class IconCache {
@@ -39594,7 +39871,7 @@
         else {
             const define = table.getBodyColumnDefine(col, row);
             if (define?.tree) {
-                const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByRow(col, row));
+                const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row));
                 cellHierarchyIndent =
                     Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none
                         ? (indexArr.length - 1) * (layoutMap.hierarchyIndent ?? 0)
@@ -40956,9 +41233,6 @@
             };
             if (customLayout) {
                 const customLayoutObj = customLayout(arg);
-                if (customLayoutObj.rootContainer) {
-                    customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
-                }
                 if (customLayoutObj.rootContainer instanceof Group$1) {
                     height = customLayoutObj.rootContainer.AABBBounds.height() ?? 0;
                 }
@@ -43536,7 +43810,7 @@
             else {
                 const define = table.getBodyColumnDefine(col, row);
                 if (define?.tree) {
-                    const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByRow(col, row));
+                    const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row));
                     cellHierarchyIndent =
                         Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none
                             ? (indexArr.length - 1) * (layoutMap.hierarchyIndent ?? 0)
@@ -43576,9 +43850,6 @@
             };
             if (customLayout) {
                 const customLayoutObj = customLayout(arg);
-                if (customLayoutObj.rootContainer) {
-                    customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
-                }
                 if (customLayoutObj.rootContainer instanceof Group$1) {
                     width = customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
                 }
@@ -43947,25 +44218,33 @@
         const dataValue = table.getCellOriginValue(col, row);
         let isChecked;
         let isDisabled;
-        let text = value;
+        let text = value ?? '';
         if (isObject$4(value)) {
             isChecked = value.checked;
             isDisabled = value.disable;
             text = value.text;
         }
+        else if (typeof value === 'boolean') {
+            isChecked = value;
+            text = '';
+        }
+        isChecked = table.stateManeger.syncCheckedState(col, row, define.field, isChecked);
         const hierarchyOffset = getHierarchyOffset(col, row, table);
         const cellStyle = table._getCellStyle(col, row);
         const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const { lineClamp } = cellStyle;
         const { checked, disable } = define;
-        const globalChecked = getOrApply(checked, {
-            col,
-            row,
-            table,
-            context: null,
-            value,
-            dataValue
-        });
+        if (isChecked === undefined || isChecked === null || typeof isChecked === 'function') {
+            const globalChecked = getOrApply(checked, {
+                col,
+                row,
+                table,
+                context: null,
+                value,
+                dataValue
+            });
+            isChecked = table.stateManeger.syncCheckedState(col, row, define.field, globalChecked);
+        }
         const globalDisable = getOrApply(disable, {
             col,
             row,
@@ -43988,13 +44267,27 @@
             dx: hierarchyOffset
         };
         const testAttribute = cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute;
-        const checkbox = new CheckBox({
-            x: 0,
-            y: 0,
-            text: testAttribute,
-            checked: isChecked ?? globalChecked ?? false,
-            disabled: isDisabled ?? globalDisable ?? false
-        });
+        let checkbox;
+        if (isChecked === 'indeterminate') {
+            checkbox = new CheckBox({
+                x: 0,
+                y: 0,
+                text: testAttribute,
+                checked: undefined,
+                indeterminate: true,
+                disabled: isDisabled ?? globalDisable ?? false
+            });
+        }
+        else {
+            checkbox = new CheckBox({
+                x: 0,
+                y: 0,
+                text: testAttribute,
+                checked: isChecked,
+                indeterminate: undefined,
+                disabled: isDisabled ?? globalDisable ?? false
+            });
+        }
         checkbox.name = 'checkbox';
         return checkbox;
     }
@@ -47115,6 +47408,68 @@
         updateChartState(datum) {
             this.table.isPivotChart() && updateChartState(this, datum);
         }
+        updateCheckboxCellState(col, row, checked) {
+            if (this.transpose) {
+                this.bodyGroup.children?.forEach((columnGroup) => {
+                    columnGroup
+                        .getChildAt(row)
+                        .getChildren()
+                        .forEach((node) => {
+                        if (node.name === 'checkbox') {
+                            node.setAttribute('checked', checked);
+                        }
+                    });
+                });
+            }
+            else {
+                const columnGroup = this.getColGroup(col);
+                columnGroup.children?.forEach((cellNode) => {
+                    cellNode.getChildren().find(node => {
+                        if (node.name === 'checkbox') {
+                            node.setAttribute('checked', checked);
+                        }
+                    });
+                });
+            }
+        }
+        updateHeaderCheckboxCellState(col, row, checked) {
+            if (this.transpose) {
+                this.rowHeaderGroup.children?.forEach((columnGroup) => {
+                    columnGroup
+                        .getChildAt(row)
+                        .getChildren()
+                        .forEach((node) => {
+                        if (node.name === 'checkbox') {
+                            if (checked === 'indeterminate') {
+                                node.setAttribute('indeterminate', true);
+                                node.setAttribute('checked', undefined);
+                            }
+                            else {
+                                node.setAttribute('indeterminate', undefined);
+                                node.setAttribute('checked', checked);
+                            }
+                        }
+                    });
+                });
+            }
+            else {
+                const columnGroup = this.getColGroup(col, true);
+                columnGroup.children?.forEach((cellNode) => {
+                    cellNode.getChildren().find(node => {
+                        if (node.name === 'checkbox') {
+                            if (checked === 'indeterminate') {
+                                node.setAttribute('indeterminate', true);
+                                node.setAttribute('checked', undefined);
+                            }
+                            else {
+                                node.setAttribute('indeterminate', undefined);
+                                node.setAttribute('checked', checked);
+                            }
+                        }
+                    });
+                });
+            }
+        }
         updateAutoColWidth(col) {
             this.table.internalProps._widthResizedColMap.delete(col);
             const oldWidth = this.table.getColWidth(col);
@@ -48602,6 +48957,10 @@
         _clearVerticalScrollBar;
         _clearHorizontalScrollBar;
         fastScrolling = false;
+        checkedState = [];
+        headerCheckedState = {};
+        _checkboxCellTypeFields = [];
+        _headerCheckFuncs = {};
         resetInteractionState = debounce(() => {
             this.updateInteractionState(InteractionState.default);
         }, 100);
@@ -49207,6 +49566,155 @@
                 this.sparkLine.row = -1;
             }
         }
+        setCheckedState(col, row, field, checked) {
+            const recordIndex = this.table.getRecordIndexByCell(col, row);
+            if (recordIndex >= 0) {
+                const dataIndex = this.table.dataSource.getIndexKey(recordIndex);
+                if (this.checkedState[dataIndex]) {
+                    this.checkedState[dataIndex][field] = checked;
+                }
+                else {
+                    this.checkedState[dataIndex] = {};
+                    this.checkedState[dataIndex][field] = checked;
+                }
+            }
+        }
+        setHeaderCheckedState(field, checked) {
+            this.headerCheckedState[field] = checked;
+            this.checkedState?.forEach(recordCheckState => {
+                recordCheckState[field] = checked;
+            });
+        }
+        syncCheckedState(col, row, field, checked) {
+            if (this.table.isHeader(col, row)) {
+                if (isValid$6(this.headerCheckedState[field])) {
+                    return this.headerCheckedState[field];
+                }
+                else if (typeof checked === 'function') {
+                    return undefined;
+                }
+                else if (isValid$6(checked)) {
+                    this.headerCheckedState[field] = checked;
+                }
+                else if (this.checkedState?.length > 0) {
+                    const isAllChecked = this.updateHeaderCheckedState(field);
+                    return isAllChecked;
+                }
+                return this.headerCheckedState[field];
+            }
+            const recordIndex = this.table.getRecordIndexByCell(col, row);
+            if (recordIndex >= 0) {
+                const dataIndex = this.table.dataSource.getIndexKey(recordIndex);
+                if (isValid$6(this.checkedState[dataIndex]?.[field])) {
+                    return this.checkedState[dataIndex][field];
+                }
+                if (this.checkedState[dataIndex]) {
+                    this.checkedState[dataIndex][field] = checked;
+                }
+                else {
+                    this.checkedState[dataIndex] = {};
+                    this.checkedState[dataIndex][field] = checked;
+                }
+            }
+            return checked;
+        }
+        initCheckedState(records) {
+            let isNeedInitHeaderCheckedStateFromRecord = false;
+            this._checkboxCellTypeFields = [];
+            this._headerCheckFuncs = {};
+            this.table.internalProps.layoutMap.headerObjects.forEach((hd, index) => {
+                if (hd.headerType === 'checkbox') {
+                    const headerChecked = hd.define.checked;
+                    if (headerChecked === undefined || headerChecked === null || typeof headerChecked === 'function') {
+                        isNeedInitHeaderCheckedStateFromRecord = true;
+                        if (typeof headerChecked === 'function') {
+                            this._headerCheckFuncs[hd.field] = headerChecked;
+                        }
+                    }
+                    else {
+                        this.headerCheckedState[hd.field] = headerChecked;
+                    }
+                    if (hd.define.cellType === 'checkbox' && !hd.fieldFormat) {
+                        this._checkboxCellTypeFields.push(hd.field);
+                    }
+                }
+            });
+            if (isNeedInitHeaderCheckedStateFromRecord) {
+                records.forEach((record, index) => {
+                    this._checkboxCellTypeFields.forEach(field => {
+                        const value = record[field];
+                        let isChecked;
+                        if (isObject$4(value)) {
+                            isChecked = value.checked;
+                        }
+                        else if (typeof value === 'boolean') {
+                            isChecked = value;
+                        }
+                        if (isChecked === undefined || isChecked === null) {
+                            const headerCheckFunc = this._headerCheckFuncs[field];
+                            if (headerCheckFunc) {
+                                const cellAddr = this.table.getCellAddrByFieldRecord(field, index);
+                                const globalChecked = getOrApply(headerCheckFunc, {
+                                    col: cellAddr.col,
+                                    row: cellAddr.row,
+                                    table: this.table,
+                                    context: null,
+                                    value
+                                });
+                                isChecked = globalChecked;
+                            }
+                        }
+                        if (!this.checkedState[index]) {
+                            this.checkedState[index] = {};
+                        }
+                        this.checkedState[index][field] = isChecked;
+                    });
+                });
+            }
+        }
+        updateHeaderCheckedState(field) {
+            const allChecked = this.checkedState.every((state) => {
+                return state[field] === true;
+            });
+            if (allChecked) {
+                this.headerCheckedState[field] = true;
+                return allChecked;
+            }
+            const allUnChecked = this.checkedState.every((state) => {
+                return state[field] === false;
+            });
+            if (allUnChecked) {
+                this.headerCheckedState[field] = false;
+                return false;
+            }
+            const hasChecked = this.checkedState.find((state) => {
+                return state[field] === true;
+            });
+            if (hasChecked) {
+                this.headerCheckedState[field] = 'indeterminate';
+                return 'indeterminate';
+            }
+            return false;
+        }
+        initLeftRecordsCheckState(records) {
+            for (let index = this.checkedState.length; index < records.length; index++) {
+                const record = records[index];
+                this._checkboxCellTypeFields.forEach(field => {
+                    const value = record[field];
+                    let isChecked;
+                    if (isObject$4(value)) {
+                        isChecked = value.checked;
+                    }
+                    else if (typeof value === 'boolean') {
+                        isChecked = value;
+                    }
+                    if (!this.checkedState[index]) {
+                        this.checkedState[index] = {};
+                    }
+                    this.checkedState[index][field] = isChecked;
+                });
+            }
+        }
     }
 
     function bindMediaClick(table) {
@@ -49848,6 +50356,24 @@
                 target: eventArgsSet?.eventArgs?.target,
                 checked: e.detail.checked
             };
+            if (table.isHeader(col, row)) {
+                table.stateManeger.setHeaderCheckedState(cellInfo.field, e.detail.checked);
+                const define = table.getBodyColumnDefine(col, row);
+                if (define.cellType === 'checkbox') {
+                    table.scenegraph.updateCheckboxCellState(col, row, e.detail.checked);
+                }
+            }
+            else {
+                table.stateManeger.setCheckedState(col, row, cellInfo.field, e.detail.checked);
+                const define = table.getBodyColumnDefine(col, row);
+                if (define.headerType === 'checkbox') {
+                    const oldHeaderCheckedState = table.stateManeger.headerCheckedState[cellInfo.field];
+                    const newHeaderCheckedState = table.stateManeger.updateHeaderCheckedState(cellInfo.field);
+                    if (oldHeaderCheckedState !== newHeaderCheckedState) {
+                        table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
+                    }
+                }
+            }
             table.fireListeners(TABLE_EVENT_TYPE.CHECKBOX_STATE_CHANGE, cellsEvent);
         });
     }
@@ -50486,7 +51012,7 @@
         }
     }
 
-    let defaultStyle$2;
+    let defaultStyle$3;
     const DEFAULT_BAR_COLOR = (args) => {
         const num = args.value;
         if (Number(num) > 80) {
@@ -50517,7 +51043,7 @@
         _barMarkPosition;
         _barRightToLeft;
         static get DEFAULT() {
-            return defaultStyle$2 ? defaultStyle$2 : (defaultStyle$2 = new ProgressBarStyle());
+            return defaultStyle$3 ? defaultStyle$3 : (defaultStyle$3 = new ProgressBarStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -50655,10 +51181,10 @@
     ];
     const iconPropKeys = ICON_PROP_KEYS;
 
-    let defaultStyle$1;
-    class CheckboxStyle extends Style$1 {
+    let defaultStyle$2;
+    let CheckboxStyle$1 = class CheckboxStyle extends Style$1 {
         static get DEFAULT() {
-            return defaultStyle$1 ? defaultStyle$1 : (defaultStyle$1 = new CheckboxStyle());
+            return defaultStyle$2 ? defaultStyle$2 : (defaultStyle$2 = new CheckboxStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -50666,7 +51192,7 @@
         clone() {
             return new CheckboxStyle(this, null);
         }
-    }
+    };
 
     class BodyHelper {
         expandIcon;
@@ -50747,7 +51273,7 @@
                 case 'progressbar':
                     return ProgressBarStyle;
                 case 'checkbox':
-                    return CheckboxStyle;
+                    return CheckboxStyle$1;
             }
         }
         getCellIconFromRecordValue(icon, col, row) {
@@ -51386,10 +51912,10 @@
         return itemContainer;
     }
 
-    let defaultStyle;
+    let defaultStyle$1;
     class ImageStyle extends Style {
         static get DEFAULT() {
-            return defaultStyle ? defaultStyle : (defaultStyle = new ImageStyle());
+            return defaultStyle$1 ? defaultStyle$1 : (defaultStyle$1 = new ImageStyle());
         }
         constructor(style = {}, headerStyle = {}) {
             super(style, headerStyle);
@@ -51400,6 +51926,19 @@
         }
     }
 
+    let defaultStyle;
+    class CheckboxStyle extends Style {
+        static get DEFAULT() {
+            return defaultStyle ? defaultStyle : (defaultStyle = new CheckboxStyle());
+        }
+        constructor(style = {}, headerStyle = {}) {
+            super(style, headerStyle);
+        }
+        clone() {
+            return new CheckboxStyle(this);
+        }
+    }
+
     class HeaderHelper {
         normalIcon;
         upIcon;
@@ -51688,6 +52227,8 @@
                     return ImageStyle;
                 case 'link':
                     return TextHeaderStyle;
+                case 'checkbox':
+                    return CheckboxStyle;
             }
         }
     }
@@ -53294,7 +53835,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.13.1-alpha.0";
+        version = "0.13.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -54668,11 +55209,14 @@
         getContext() {
             return this.internalProps.context;
         }
-        getRecordByRowCol(col, row) {
+        getRecordByCell(col, row) {
             if (this.internalProps.layoutMap.isHeader(col, row)) {
                 return undefined;
             }
-            return this.internalProps.dataSource?.get(this.getRecordIndexByRow(col, row));
+            return this.internalProps.dataSource?.get(this.getRecordIndexByCell(col, row));
+        }
+        getRecordByRowCol(col, row) {
+            return this.getRecordByCell(col, row);
         }
         getRecordStartRowByRecordIndex(index) {
             return this.internalProps.layoutMap.getRecordStartRowByRecordIndex(index);
@@ -54754,6 +55298,7 @@
             else {
                 _setRecords(this, records);
             }
+            this.stateManeger.initCheckedState(records);
             this.internalProps.frozenColCount = this.options.frozenColCount || this.rowHeaderLevelCount;
             this.scenegraph.createSceneGraph();
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
@@ -54764,7 +55309,7 @@
             this.render();
         }
         setRecord(record, col, row) {
-            const index = this.getRecordIndexByRow(col, row);
+            const index = this.getRecordIndexByCell(col, row);
             this.dataSource.setRecord(record, index);
         }
         setDropDownMenuHighlight(cells) {
@@ -54828,7 +55373,7 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return false;
             }
-            const index = table.getRecordIndexByRow(col, row);
+            const index = table.getRecordIndexByCell(col, row);
             return table.internalProps.dataSource.hasField(index, field);
         }
         _getCellStyle(col, row) {
@@ -56157,7 +56702,7 @@
                 range1.start.row === range2.start.row &&
                 range1.end.row === range2.end.row);
         }
-        getRecordIndexByRow(col, row) {
+        getRecordIndexByCell(col, row) {
             if (this.transpose) {
                 if (col < this.headerLevelCount) {
                     return -1;
@@ -56663,13 +57208,33 @@
             const { field } = table.internalProps.layoutMap.getBody(col, row);
             return table.getFieldData(field, col, row);
         }
-        getRecordIndexByRow(col, row) {
+        getRecordIndexByCell(col, row) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByRow(col, row);
+            return layoutMap.getRecordIndexByCell(col, row);
+        }
+        getTableIndexByRecordIndex(recordIndex) {
+            if (this.transpose) {
+                return this.dataSource.getTableIndex(recordIndex) + this.rowHeaderLevelCount;
+            }
+            return this.dataSource.getTableIndex(recordIndex) + this.columnHeaderLevelCount;
+        }
+        getTableIndexByField(field) {
+            const colObj = this.internalProps.layoutMap.columnObjects.find((col) => col.field === field);
+            const layoutRange = this.internalProps.layoutMap.getBodyLayoutRangeById(colObj.id);
+            if (this.transpose) {
+                return layoutRange.start.row;
+            }
+            return layoutRange.start.col;
+        }
+        getCellAddrByFieldRecord(field, recordIndex) {
+            if (this.transpose) {
+                return { col: this.getTableIndexByRecordIndex(recordIndex), row: this.getTableIndexByField(field) };
+            }
+            return { col: this.getTableIndexByField(field), row: this.getTableIndexByRecordIndex(recordIndex) };
         }
         getCellOriginRecord(col, row) {
             const table = this;
-            const index = table.getRecordIndexByRow(col, row);
+            const index = table.getRecordIndexByCell(col, row);
             if (index > -1) {
                 return table.dataSource.get(index);
             }
@@ -56795,8 +57360,8 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return null;
             }
-            const index = table.getRecordIndexByRow(col, row);
-            return table.internalProps.dataSource.getField(index, field);
+            const index = table.getRecordIndexByCell(col, row);
+            return table.internalProps.dataSource.getField(index, field, col, row, this);
         }
         moveHeaderPosition(source, target) {
             const moveContext = this.internalProps.layoutMap.moveHeaderPosition(source, target);
@@ -56902,7 +57467,7 @@
             if (!define.tree) {
                 return HierarchyState.none;
             }
-            const index = this.getRecordIndexByRow(col, row);
+            const index = this.getRecordIndexByCell(col, row);
             return this.dataSource.getHierarchyState(index);
         }
         toggleHierarchyState(col, row) {
@@ -56922,7 +57487,7 @@
                     originData: this.getCellOriginRecord(col, row)
                 });
             }
-            const index = this.getRecordIndexByRow(col, row);
+            const index = this.getRecordIndexByCell(col, row);
             const diffDataIndices = this.dataSource.toggleHierarchyState(index);
             const diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices);
             this.refreshRowColCount();
@@ -57006,6 +57571,17 @@
             }
             this.stateManeger.updateSortState(sortState);
         }
+        getCheckboxState(field) {
+            if (this.stateManeger.checkedState.length < this.rowCount - this.columnHeaderLevelCount) {
+                this.stateManeger.initLeftRecordsCheckState(this.records);
+            }
+            if (isValid$6(field)) {
+                return this.stateManeger.checkedState.map(state => {
+                    return state[field];
+                });
+            }
+            return this.stateManeger.checkedState;
+        }
     }
 
     class DimensionTree {
@@ -58252,7 +58828,7 @@
                 range1.start.row === range2.start.row &&
                 range1.end.row === range2.end.row);
         }
-        getRecordIndexByRow(row) {
+        getBodyIndexByRow(row) {
             if (row < this.columnHeaderLevelCount) {
                 return -1;
             }
@@ -58261,7 +58837,7 @@
             }
             return row - this.columnHeaderLevelCount;
         }
-        getRecordIndexByCol(col) {
+        getBodyIndexByCol(col) {
             if (col < this.rowHeaderLevelCount) {
                 return -1;
             }
@@ -58273,12 +58849,15 @@
         getRecordStartRowByRecordIndex(index) {
             return this.columnHeaderLevelCount + index;
         }
+        getRecordIndexByCell(col, row) {
+            return undefined;
+        }
         getCellHeaderPathsWidthTreeNode(col, row) {
             if (this._CellHeaderPathMap.has(`${col}-${row}`)) {
                 return this._CellHeaderPathMap.get(`${col}-${row}`);
             }
-            const recordCol = this.getRecordIndexByCol(col);
-            const recordRow = this.getRecordIndexByRow(row) + this.currentPageStartIndex;
+            const recordCol = this.getBodyIndexByCol(col);
+            const recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex;
             let colPath;
             let rowPath;
             if (row >= 0 && recordCol >= 0) {
@@ -59387,10 +59966,10 @@
             this.formatFun = formatFun;
             this.isRecord = isRecord ?? this.isRecord;
         }
-        formatValue() {
+        formatValue(col, row, table) {
             if (!this._formatedValue) {
                 if (this.formatFun) {
-                    this._formatedValue = this.formatFun(this.value());
+                    this._formatedValue = this.formatFun(this.value(), col, row, table);
                 }
                 else {
                     this._formatedValue = this.value();
@@ -61179,13 +61758,25 @@
                 });
             }
         }
-        getRecordIndexByRow(row) {
+        getRecordIndexByCell(col, row) {
+            return undefined;
+        }
+        getTableIndexByRecordIndex(recordIndex) {
+            return undefined;
+        }
+        getTableIndexByField(field) {
+            return undefined;
+        }
+        getCellAddrByFieldRecord(field, recordIndex) {
+            return undefined;
+        }
+        getBodyIndexByRow(row) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByRow(row);
+            return layoutMap.getBodyIndexByRow(row);
         }
-        getRecordIndexByCol(col) {
+        getBodyIndexByCol(col) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByCol(col);
+            return layoutMap.getBodyIndexByCol(col);
         }
         getFieldData(field, col, row) {
             if (field === null || field === undefined) {
@@ -61195,12 +61786,12 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return null;
             }
-            const rowIndex = this.getRecordIndexByRow(row);
-            const colIndex = this.getRecordIndexByCol(col);
-            const dataValue = table.dataSource?.getField(rowIndex, colIndex);
+            const rowIndex = this.getBodyIndexByRow(row);
+            const colIndex = this.getBodyIndexByCol(col);
+            const dataValue = table.dataSource?.getField(rowIndex, colIndex, col, row, this);
             if (typeof field !== 'string') {
                 const cellHeaderPaths = table.internalProps.layoutMap.getCellHeaderPaths(col, row);
-                return getField({ dataValue, ...cellHeaderPaths }, field, emptyFn);
+                return getField({ dataValue, ...cellHeaderPaths }, field, col, row, this, emptyFn);
             }
             return dataValue;
         }
@@ -61218,7 +61809,7 @@
                     return rowPath.indicatorKey ?? rowPath.value;
                 });
                 const aggregator = this.dataset.getAggregator(!this.internalProps.layoutMap.indicatorsAsCol ? rowKeys.slice(0, -1) : rowKeys, this.internalProps.layoutMap.indicatorsAsCol ? colKeys.slice(0, -1) : colKeys, this.internalProps.layoutMap.getIndicatorKey(col, row));
-                return aggregator.formatValue ? aggregator.formatValue() : '';
+                return aggregator.formatValue ? aggregator.formatValue(col, row, this) : '';
             }
             else if (this.flatDataToObjects) {
                 const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row);
@@ -61230,7 +61821,9 @@
                 });
                 const valueNode = this.flatDataToObjects.getTreeNode(rowKeys, colKeys, this.internalProps.layoutMap.getBody(col, row).indicatorKey);
                 const { fieldFormat } = this.internalProps.layoutMap.getBody(col, row);
-                return typeof fieldFormat === 'function' ? fieldFormat(valueNode?.record) : valueNode?.value ?? '';
+                return typeof fieldFormat === 'function'
+                    ? fieldFormat(valueNode?.record, col, row, this)
+                    : valueNode?.value ?? '';
             }
             const { field, fieldFormat } = this.internalProps.layoutMap.getBody(col, row);
             return this.getFieldData(fieldFormat || field, col, row);
@@ -61650,13 +62243,25 @@
                 });
             }
         }
-        getRecordIndexByRow(row) {
+        getRecordIndexByCell(col, row) {
+            return undefined;
+        }
+        getTableIndexByRecordIndex(recordIndex) {
+            return undefined;
+        }
+        getTableIndexByField(field) {
+            return undefined;
+        }
+        getCellAddrByFieldRecord(field, recordIndex) {
+            return undefined;
+        }
+        getBodyIndexByRow(row) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByRow(row);
+            return layoutMap.getBodyIndexByRow(row);
         }
-        getRecordIndexByCol(col) {
+        getBodyIndexByCol(col) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByCol(col);
+            return layoutMap.getBodyIndexByCol(col);
         }
         getFieldData(field, col, row) {
             if (field === null || field === undefined) {
@@ -61666,12 +62271,12 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return null;
             }
-            const rowIndex = this.getRecordIndexByRow(row);
-            const colIndex = this.getRecordIndexByCol(col);
-            const dataValue = table.dataSource?.getField(rowIndex, colIndex);
+            const rowIndex = this.getBodyIndexByRow(row);
+            const colIndex = this.getBodyIndexByCol(col);
+            const dataValue = table.dataSource?.getField(rowIndex, colIndex, col, row, this);
             if (typeof field !== 'string') {
                 const cellHeaderPaths = table.internalProps.layoutMap.getCellHeaderPaths(col, row);
-                return getField({ dataValue, ...cellHeaderPaths }, field, emptyFn);
+                return getField({ dataValue, ...cellHeaderPaths }, field, col, row, this, emptyFn);
             }
             return dataValue;
         }
@@ -61856,12 +62461,16 @@
             return result;
         }
         _generateCollectValuesConfig(columnKeys, rowKeys) {
-            const option = this.options;
+            const indicators = this.internalProps.indicators;
             const collectValuesBy = {};
-            for (let i = 0, len = option.indicators?.length; i < len; i++) {
-                if (typeof option.indicators[i] !== 'string' && option.indicators[i].chartSpec) {
-                    if (option.indicatorsAsCol === false) {
-                        const indicatorDefine = option.indicators[i];
+            for (let i = 0, len = indicators?.length; i < len; i++) {
+                if (typeof indicators[i] !== 'string' && indicators[i].chartSpec) {
+                    if (this.options.indicatorsAsCol === false) {
+                        const indicatorDefine = indicators[i];
+                        indicatorDefine.chartSpec?.stack !== false &&
+                            (indicatorDefine.chartSpec?.type === 'bar' ||
+                                indicatorDefine.chartSpec?.type === 'area') &&
+                            (indicatorDefine.chartSpec.stack = true);
                         collectValuesBy[indicatorDefine.indicatorKey] = {
                             by: rowKeys,
                             range: true,
@@ -61881,6 +62490,9 @@
                                         : undefined
                                 };
                                 const yField = chartSeries.yField;
+                                chartSeries.stack !== false &&
+                                    (chartSeries.type === 'bar' || chartSeries.type === 'area') &&
+                                    (chartSeries.stack = true);
                                 collectValuesBy[yField] = {
                                     by: rowKeys,
                                     range: chartSeries.direction !== 'horizontal',
@@ -61904,10 +62516,14 @@
                                     ? indicatorDefine.chartSpec?.data?.fields?.[xField]?.domain
                                     : undefined
                             };
+                            indicatorDefine.chartSpec?.stack !== false &&
+                                (indicatorDefine.chartSpec?.type === 'bar' ||
+                                    indicatorDefine.chartSpec?.type === 'area') &&
+                                (indicatorDefine.chartSpec.stack = true);
                             const yField = indicatorDefine.chartSpec.yField;
                             collectValuesBy[yField] = {
                                 by: rowKeys,
-                                range: option.indicators[i].chartSpec.direction !== 'horizontal',
+                                range: indicators[i].chartSpec.direction !== 'horizontal',
                                 sumBy: indicatorDefine.chartSpec.stack !== false &&
                                     columnKeys.concat(indicatorDefine.chartSpec?.xField),
                                 sortBy: indicatorDefine.chartSpec.direction === 'horizontal'
@@ -61917,7 +62533,11 @@
                         }
                     }
                     else {
-                        const indicatorDefine = option.indicators[i];
+                        const indicatorDefine = indicators[i];
+                        indicatorDefine.chartSpec?.stack !== false &&
+                            (indicatorDefine.chartSpec?.type === 'bar' ||
+                                indicatorDefine.chartSpec?.type === 'area') &&
+                            (indicatorDefine.chartSpec.stack = true);
                         collectValuesBy[indicatorDefine.indicatorKey] = {
                             by: columnKeys,
                             range: true,
@@ -61937,6 +62557,9 @@
                                         : undefined
                                 };
                                 const xField = chartSeries.xField;
+                                chartSeries.stack !== false &&
+                                    (chartSeries.type === 'bar' || chartSeries.type === 'area') &&
+                                    (chartSeries.stack = true);
                                 collectValuesBy[xField] = {
                                     by: columnKeys,
                                     range: chartSeries.direction === 'horizontal',
@@ -61960,10 +62583,14 @@
                                     ? indicatorDefine.chartSpec?.data?.fields?.[yField]?.domain
                                     : undefined
                             };
+                            indicatorDefine.chartSpec?.stack !== false &&
+                                (indicatorDefine.chartSpec?.type === 'bar' ||
+                                    indicatorDefine.chartSpec?.type === 'area') &&
+                                (indicatorDefine.chartSpec.stack = true);
                             const xField = indicatorDefine.chartSpec.xField;
                             collectValuesBy[xField] = {
                                 by: columnKeys,
-                                range: option.indicators[i].chartSpec.direction === 'horizontal',
+                                range: indicators[i].chartSpec.direction === 'horizontal',
                                 sumBy: indicatorDefine.chartSpec.stack !== false &&
                                     rowKeys.concat(indicatorDefine.chartSpec?.yField),
                                 sortBy: indicatorDefine.chartSpec.direction !== 'horizontal'
@@ -63055,7 +63682,7 @@
         return new Tag(params ? params.attribute : {});
     }
 
-    const version = "0.13.1-alpha.0";
+    const version = "0.13.1";
     function getIcons() {
         return get$1();
     }