@visactor/vtable 1.10.5-alpha.0 → 1.10.6-alpha.0

package/dist/vtable.js

@@ -3050,11 +3050,12 @@
       for (let i = 0, len = paths.length; i < len; i++) if (currPath = paths[i], coordsStr = currPath.slice(1), commandChar = currPath[0], currCommandData = [commandChar], coordsStrArr = coordsStr.match(rePathCommand), null !== coordsStrArr) {
         for (let i = 0, len = coordsStrArr.length; i < len; i++) coordStr = coordsStrArr[i], coordNumber = parseFloat(coordStr), Number.isNaN(coordNumber) || currCommandData.push(coordNumber);
         if (standardCommandLen = commandLengths[commandChar], currCommandData.length - 1 > standardCommandLen) {
-          let subCommand;
+          let subCommand,
+            bestCommandChar = commandChar;
           for (let i = 1, len = currCommandData.length; i < len; i += standardCommandLen) {
-            subCommand = [commandChar];
+            subCommand = [bestCommandChar];
             for (let j = i, subLen = i + standardCommandLen; j < subLen; j++) subCommand.push(currCommandData[j]);
-            result.push(subCommand);
+            result.push(subCommand), "m" === bestCommandChar ? bestCommandChar = "l" : "M" === bestCommandChar && (bestCommandChar = "L");
           }
         } else result.push(currCommandData);
       } else result.push(currCommandData);
@@ -4265,6 +4266,7 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
+      fillStrokeOrder: 0,
       renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
@@ -4335,6 +4337,7 @@
     });
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
+      fillStrokeOrder: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -4647,6 +4650,14 @@
         return data;
       }
       _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+        if (leftIdx === rightIdx) {
+          Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+          const subText = text.substring(0, rightIdx + 1);
+          return {
+            str: subText,
+            width: this.measureTextWidth(subText, options)
+          };
+        }
         const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
           subText = text.substring(0, middleIdx + 1),
           strWidth = this.measureTextWidth(subText, options);
@@ -4680,7 +4691,7 @@
       }
       _clipTextStart(text, options, width, leftIdx, rightIdx) {
         const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-          subText = text.substring(middleIdx - 1, text.length - 1),
+          subText = text.substring(middleIdx - 1, text.length),
           strWidth = this.measureTextWidth(subText, options);
         let length;
         if (strWidth > width) {
@@ -4688,18 +4699,18 @@
             str: "",
             width: 0
           };
-          const str = text.substring(middleIdx, text.length - 1);
+          const str = text.substring(middleIdx, text.length);
           return length = this.measureTextWidth(str, options), length <= width ? {
             str: str,
             width: length
-          } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+          } : this._clipTextStart(text, options, width, middleIdx, text.length);
         }
         if (strWidth < width) {
           if (middleIdx <= 0) return {
             str: text,
             width: this.measureTextWidth(text, options)
           };
-          const str = text.substring(middleIdx - 2, text.length - 1);
+          const str = text.substring(middleIdx - 2, text.length);
           return length = this.measureTextWidth(str, options), length >= width ? {
             str: subText,
             width: strWidth
@@ -5008,7 +5019,7 @@
       }
       hasSubView() {
         const viewBox = this._handler.getViewBox();
-        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -5932,7 +5943,7 @@
               timeStamp: now
             });
             const clickHistory = trackingData.clicksByButton[from.button];
-            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
+            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this._config.supportsTouchEvents && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
           }
           this.freeEvent(e);
         }, this.onPointerUpOutside = (from, target) => {
@@ -6149,7 +6160,8 @@
           supportsPointerEvents = global.supportsPointerEvents
         } = params;
         this.manager = new EventManager$1(rootNode, {
-          clickInterval: clickInterval
+          clickInterval: clickInterval,
+          supportsTouchEvents: supportsTouchEvents
         }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
@@ -7241,7 +7253,7 @@
       }
       static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
-        return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+        return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
           type: type,
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -9499,7 +9511,7 @@
       }
     }
 
-    const parse$3 = function () {
+    const parse$4 = function () {
       const tokens = {
         linearGradient: /^(linear\-gradient)/i,
         radialGradient: /^(radial\-gradient)/i,
@@ -9652,7 +9664,7 @@
       }
       static Parse(c) {
         if (GradientParser.IsGradientStr(c)) try {
-          const datum = parse$3(c)[0];
+          const datum = parse$4(c)[0];
           if (datum) {
             if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
             if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
@@ -10335,8 +10347,9 @@
       constructor() {
         super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
       }
-      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-        return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+      drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        if (!(image.isGifImage && image.renderFrame && image.playing)) return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+        image.renderFrame(context, x, y);
       }
     }
     const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -10489,7 +10502,8 @@
             fill = arcAttribute.fill,
             stroke = arcAttribute.stroke,
             x: originX = arcAttribute.x,
-            y: originY = arcAttribute.y
+            y: originY = arcAttribute.y,
+            fillStrokeOrder = arcAttribute.fillStrokeOrder
           } = arc.attribute,
           data = this.valid(arc, arcAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -10525,7 +10539,17 @@
           isFullStroke: isFullStroke,
           stroke: arrayStroke
         } = parseStroke(stroke);
-        if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
+        if (doFill || isFullStroke) {
+          context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+          const _runFill = () => {
+              doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+            },
+            _runStroke = () => {
+              doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
+            };
+          fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
+        }
+        if (!isFullStroke && doStroke) {
           context.beginPath();
           drawArcPath(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
           beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -10543,14 +10567,20 @@
                 fill = arcAttribute.fill
               } = arc.attribute,
               startAngle = endAngle;
-            if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
-              const color = fill;
-              if ("conical" === color.gradient) {
-                const lastColor = getConicGradientAt(0, 0, endAngle, color);
-                fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
-              }
-            }
-            doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+            this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+            const _runFill = () => {
+                if (doFill) {
+                  const color = fill;
+                  if ("conical" === color.gradient) {
+                    const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                    fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
+                  }
+                }
+              },
+              _runStroke = () => {
+                doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+              };
+            _runFill(), _runStroke();
           }
         }
         this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
@@ -10588,7 +10618,8 @@
             startAngle = circleAttribute.startAngle,
             endAngle = circleAttribute.endAngle,
             x: originX = circleAttribute.x,
-            y: originY = circleAttribute.y
+            y: originY = circleAttribute.y,
+            fillStrokeOrder = circleAttribute.fillStrokeOrder
           } = circle.attribute,
           data = this.valid(circle, circleAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -10598,7 +10629,14 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+        context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
       }
       draw(circle, renderService, drawContext, params) {
         const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle;
@@ -11039,7 +11077,7 @@
         super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
       }
       drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const {
           points: points
         } = area.attribute;
@@ -11063,28 +11101,31 @@
           x: originX = 0,
           x: originY = 0
         } = area.attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+        !1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
           attribute: area.attribute
-        }), stroke) {
-          const {
-            stroke = areaAttribute && areaAttribute.stroke
-          } = area.attribute;
-          if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-            context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
-            for (let i = 1; i < points.length; i++) {
-              const p = points[i];
-              context.lineTo(p.x + offsetX, p.y + offsetY, z);
-            }
-          } else if (stroke[2]) {
-            const endP = points[points.length - 1];
-            context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
-            for (let i = points.length - 2; i >= 0; i--) {
-              const p = points[i];
-              context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
+        }), (() => {
+          var _a, _b;
+          if (stroke) {
+            const {
+              stroke = areaAttribute && areaAttribute.stroke
+            } = area.attribute;
+            if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
+              context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
+              for (let i = 1; i < points.length; i++) {
+                const p = points[i];
+                context.lineTo(p.x + offsetX, p.y + offsetY, z);
+              }
+            } else if (stroke[2]) {
+              const endP = points[points.length - 1];
+              context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
+              for (let i = points.length - 2; i >= 0; i--) {
+                const p = points[i];
+                context.lineTo((null !== (_a = p.x1) && void 0 !== _a ? _a : p.x) + offsetX, (null !== (_b = p.y1) && void 0 !== _b ? _b : p.y) + offsetY, z);
+              }
             }
+            strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
           }
-          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
-        }
+        })();
       }
       drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e, _f;
@@ -11249,23 +11290,24 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
           attribute: attribute
-        }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
-          const {
-            stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
-          } = attribute;
-          isArray$1(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", {
-            offsetX: offsetX,
-            offsetY: offsetY,
-            offsetZ: offsetZ,
-            drawConnect: connect,
-            mode: connectedType,
-            zeroX: connectedX,
-            zeroY: connectedY
-          })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
-        }
-        return !1;
+        }), (() => {
+          if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+            const {
+              stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
+            } = attribute;
+            isArray$1(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", {
+              offsetX: offsetX,
+              offsetY: offsetY,
+              offsetZ: offsetZ,
+              drawConnect: connect,
+              mode: connectedType,
+              zeroX: connectedX,
+              zeroY: connectedY
+            })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+          }
+        })(), !1;
       }
     };
     DefaultCanvasAreaRender = __decorate$Q([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(AreaRenderContribution)), __metadata$E("design:paramtypes", [Object])], DefaultCanvasAreaRender);
@@ -11297,7 +11339,8 @@
         const pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
           {
             x: originX = pathAttribute.x,
-            y: originY = pathAttribute.y
+            y: originY = pathAttribute.y,
+            fillStrokeOrder = pathAttribute.fillStrokeOrder
           } = path.attribute,
           z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
           data = this.valid(path, pathAttribute, fillCb, strokeCb);
@@ -11312,7 +11355,14 @@
           const path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
           renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
         }
-        context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+        const _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke()));
+          },
+          _runFill = () => {
+            doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
       }
       draw(path, renderService, drawContext, params) {
         const pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
@@ -11356,7 +11406,8 @@
             x1: x1,
             y1: y1,
             x: originX = rectAttribute.x,
-            y: originY = rectAttribute.y
+            y: originY = rectAttribute.y,
+            fillStrokeOrder = rectAttribute.fillStrokeOrder
           } = rect.attribute;
         let {
           width: width,
@@ -11375,7 +11426,14 @@
           doFill: doFill,
           doStroke: doStroke
         };
-        context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke())), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
+        const _runFill = () => {
+            doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
       }
       draw(rect, renderService, drawContext, params) {
         const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -11411,7 +11469,8 @@
             x: originX = symbolAttribute.x,
             y: originY = symbolAttribute.y,
             scaleX = symbolAttribute.scaleX,
-            scaleY = symbolAttribute.scaleY
+            scaleY = symbolAttribute.scaleY,
+            fillStrokeOrder = symbolAttribute.fillStrokeOrder
           } = symbol.attribute,
           data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -11434,14 +11493,27 @@
             const obj = Object.assign({}, a);
             obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
           }
-          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+          const _runFill = () => {
+              a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill()));
+            },
+            _runStroke = () => {
+              a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+            };
+          fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
         };
         if (keepDirIn3d && context.camera && context.project) {
           const p = context.project(x, y, z),
             camera = context.camera;
           context.camera = null, !1 === parsedPath.draw(context, isArray$1(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
         } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
-        context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
       }
       draw(symbol, renderService, drawContext, params) {
         const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -11815,7 +11887,8 @@
             cornerRadius = polygonAttribute.cornerRadius,
             x: originX = polygonAttribute.x,
             y: originY = polygonAttribute.y,
-            closePath = polygonAttribute.closePath
+            closePath = polygonAttribute.closePath,
+            fillStrokeOrder = polygonAttribute.fillStrokeOrder
           } = polygon.attribute,
           data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -11825,7 +11898,14 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+        context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
       }
       draw(polygon, renderService, drawContext, params) {
         const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon;
@@ -11868,7 +11948,10 @@
             cornerRadius = groupAttribute.cornerRadius,
             path = groupAttribute.path,
             lineWidth = groupAttribute.lineWidth,
-            visible = groupAttribute.visible
+            visible = groupAttribute.visible,
+            fillStrokeOrder = groupAttribute.fillStrokeOrder,
+            x: originX = groupAttribute.x,
+            y: originY = groupAttribute.y
           } = group.attribute,
           fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
           sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -11894,7 +11977,14 @@
         };
         this._groupRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-        }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute), doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke())), this._groupRenderContribitions.forEach(c => {
+        }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+        const _runFill = () => {
+            doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
         });
       }
@@ -11960,6 +12050,7 @@
             x: originX = imageAttribute.x,
             y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
+            fillStrokeOrder = imageAttribute.fillStrokeOrder,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -11970,29 +12061,37 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        if (context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-          if (!url || !image.resources) return;
-          const res = image.resources.get(url);
-          if ("success" !== res.state) return;
-          let needRestore = !1;
-          0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-          let repeat = 0;
-          if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-            const pattern = context.createPattern(res.data, repeatStr[repeat]);
-            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-          } else context.drawImage(res.data, x, y, width, height);
-          needRestore && context.restore();
-        }
-        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        const _runFill = () => {
+            if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+              if (!url || !image.resources) return;
+              const res = image.resources.get(url);
+              if ("success" !== res.state) return;
+              let needRestore = !1;
+              0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+              let repeat = 0;
+              if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+                const pattern = context.createPattern(res.data, repeatStr[repeat]);
+                context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+              } else context.drawImage(res.data, x, y, width, height);
+              needRestore && context.restore();
+            }
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
           image: url
         } = image.attribute;
-        if (!url || !image.resources) return;
-        const res = image.resources.get(url);
-        if ("loading" === res.state && isString$2(url)) return void ResourceLoader.improveImageLoading(url);
-        if ("success" !== res.state) return;
+        if (!image.isGifImage) {
+          if (!url || !image.resources) return;
+          const res = image.resources.get(url);
+          if ("loading" === res.state && isString$2(url)) return void ResourceLoader.improveImageLoading(url);
+          if ("success" !== res.state) return;
+        }
         const {
           context: context
         } = renderService.drawParams;
@@ -15848,6 +15947,42 @@
       }
     }
 
+    class AutoRefreshPlugin {
+      constructor() {
+        this.name = "AutoRefreshPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.handleChange = graphic => {
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage === this.pluginService.stage && null != graphic.stage && graphic.stage.renderNextFrame();
+        };
+      }
+      activate(context) {
+        this.pluginService = context, this.dpr = application.global.devicePixelRatio, this.refresh();
+      }
+      refresh() {
+        this._refreshByMediaQuery() || this._refreshByRaf();
+      }
+      _refreshByRaf() {
+        const raf = application.global.getRequestAnimationFrame();
+        this.rafId = raf(() => {
+          application.global.devicePixelRatio !== this.dpr && (this.dpr = application.global.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0)), this.refresh();
+        });
+      }
+      _refreshByMediaQuery() {
+        try {
+          const mqString = `(resolution: ${window.devicePixelRatio}dppx)`,
+            updatePixelRatio = () => {
+              window.devicePixelRatio !== this.dpr && (this.dpr = window.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0));
+            };
+          matchMedia(mqString).addEventListener("change", updatePixelRatio);
+        } catch (err) {
+          return !1;
+        }
+        return !0;
+      }
+      deactivate(context) {
+        const craf = application.global.getCancelAnimationFrame();
+        craf && this.rafId && craf(this.rafId);
+      }
+    }
+
     class IncrementalAutoRenderPlugin {
       constructor() {
         this.name = "IncrementalAutoRenderPlugin", this.activeEvent = "onRegister", this.nextFrameRenderGroupSet = new Set(), this.willNextFrameRender = !1, this.nextUserParams = {}, this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
@@ -16047,7 +16182,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$2(this._background) && this._background.includes("/") && this.setAttributes({
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$2(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
         });
       }
@@ -16182,6 +16317,14 @@
           this.pluginService.unRegister(plugin);
         }));
       }
+      enableAutoRefresh() {
+        this.autoRefresh || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
+      }
+      disableAutoRefresh() {
+        this.autoRefresh && (this.autoRefresh = !1, this.pluginService.findPluginsByName("AutoRefreshPlugin").forEach(plugin => {
+          this.pluginService.unRegister(plugin);
+        }));
+      }
       enableIncrementalAutoRender() {
         this.increaseAutoRender || (this.increaseAutoRender = !0, this.pluginService.register(new IncrementalAutoRenderPlugin()));
       }
@@ -17392,9 +17535,11 @@
           name: name,
           id: id,
           attribute: attribute,
-          stateProxy: stateProxy
+          stateProxy: stateProxy,
+          animation: animation,
+          timeline: timeline
         } = _a,
-        props = __rest$4(_a, ["key", "name", "id", "attribute", "stateProxy"]);
+        props = __rest$4(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
       let c = type;
       isString$2(type) && (c = graphicCreator[type]);
       const childrenList = [];
@@ -17403,7 +17548,13 @@
       }
       children.length && flatten(1 === children.length ? children[0] : children, childrenList);
       const g = "Group" === c.name ? new c(attribute) : c(config);
-      return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+      if (parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), name && (g.name = name), isArray$1(animation)) {
+        const animate = g.animate();
+        timeline && animate.setTimeline(timeline), animation.forEach(item => {
+          animate[item[0]](...item.slice(1));
+        });
+      }
+      return g;
     }
     function parseToGraphic$1(g, childrenList, props) {
       let out,
@@ -17456,7 +17607,7 @@
         let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         super(), this.cachedEvents = [], this.startPoints = [], this.processEvent = {}, this.throttleTimer = 0, this.emitThrottles = [], this.lastTapTarget = null, this.onStart = ev => {
-          this.reset(), this.startTime = clock.now();
+          this.cachedEvents = [], this.startPoints = [], this.reset(), this.startTime = clock.now();
           const {
             cachedEvents: cachedEvents,
             startPoints: startPoints
@@ -17476,7 +17627,7 @@
           if (1 !== startPoints.length) this.startDistance = calcDistance(startPoints[0], startPoints[1]), this.center = getCenter([startPoints[0], startPoints[1]]);else {
             const event = cachedEvents[0];
             this.pressTimeout = setTimeout(() => {
-              event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none";
+              event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none", this.pressTimeout = null;
             }, this.config.press.time);
           }
         }, this.onMove = ev => {
@@ -17539,10 +17690,10 @@
                   lastMovePoint = this.lastMovePoint || startPoints[0],
                   distance = calcDistance(prevMovePoint, lastMovePoint),
                   velocity = distance / intervalTime;
-                velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent));
+                if (velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold) return endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent), this.cachedEvents = [], this.startPoints = [], void this.reset();
               }
             }
-            now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0);
+            now - this.startTime < this.config.press.time && (now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0));
           }
           for (let i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
             cachedEvents.splice(i, 1), startPoints.splice(i, 1);
@@ -17618,6 +17769,7 @@
           emitThrottles: emitThrottles
         } = this;
         throttleTimer || (this.throttleTimer = application.global.getRequestAnimationFrame()(() => {
+          application.global.getCancelAnimationFrame()(this.throttleTimer), this.throttleTimer = null;
           for (let i = 0, len = emitThrottles.length; i < len; i++) {
             const {
               type: type,
@@ -17625,7 +17777,7 @@
             } = emitThrottles[i];
             this.emitEvent(type, ev);
           }
-          this.throttleTimer = 0, this.emitThrottles.length = 0;
+          this.emitThrottles.length = 0;
         }));
       }
       triggerStartEvent(type, ev) {
@@ -21618,21 +21770,23 @@
         axisLength: axisLength
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
+      const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength),
+        firstLabel = labels[0],
+        angle = firstLabel.attribute.angle,
+        hasAngle = !isNil$1(angle),
+        cos = hasAngle ? Math.cos(angle) : 1,
+        sin = hasAngle ? Math.sin(angle) : 0,
+        isHorizontal = isAngleHorizontal(angle),
+        isVertical = isAngleVertical(angle),
+        isX = "top" === orient || "bottom" === orient,
+        direction = firstLabel.attribute.direction,
+        checkBox = !isHorizontal && !isVertical && isX && (labels.length < 2 || labels.some(label => Math.abs(label.AABBBounds.width() - firstLabel.AABBBounds.width()) >= 2)) && firstLabel.AABBBounds.width() > Math.abs(limitLength / sin);
       labels.forEach(label => {
         var _a;
-        const angle = label.attribute.angle,
-          hasAngle = !isNil$1(angle),
-          cos = hasAngle ? Math.cos(angle) : 1,
-          sin = hasAngle ? Math.sin(angle) : 0,
-          isHorizontal = isAngleHorizontal(angle),
-          isVertical = isAngleVertical(angle),
-          isX = "top" === orient || "bottom" === orient;
         if (isX) {
           if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
           if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
         }
-        const direction = label.attribute.direction;
         if (!isX) {
           if ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
           if ("vertical" !== direction) {
@@ -21648,11 +21802,11 @@
             } = label.AABBBounds,
             tan = sin / cos,
             verticalSizeLimit = Math.abs(limitLength / sin);
-          if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
-            const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+          if (checkBox && tan > 0 && x1 <= axisLength + overflowLimitLength.right && limitLength / tan + x1 > axisLength + overflowLimitLength.right) {
+            const lengthLimit = (axisLength - x1 + overflowLimitLength.right) / Math.abs(cos);
             limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
-          } else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
-            const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+          } else if (checkBox && tan < 0 && x2 >= -overflowLimitLength.left && limitLength / tan + x2 < -overflowLimitLength.left) {
+            const lengthLimit = (x2 + overflowLimitLength.left) / Math.abs(cos);
             limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
           } else limitLabelLength = verticalSizeLimit;
         } else limitLabelLength = Math.abs(limitLength / cos);
@@ -21671,30 +21825,40 @@
         orient: orient
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const verticalLimitLength = axisLength / labels.length;
-      labels.forEach(label => {
-        var _a;
-        const angle = label.attribute.angle,
-          isHorizontal = isAngleHorizontal(angle),
-          isVertical = isAngleVertical(angle),
-          isX = "top" === orient || "bottom" === orient;
+      const angle = labels[0].attribute.angle,
+        isHorizontal = isAngleHorizontal(angle),
+        isVertical = isAngleVertical(angle),
+        isX = "top" === orient || "bottom" === orient;
+      let verticalLimitLength = axisLength / labels.length;
+      labels.forEach((label, index) => {
+        var _a, _b, _c, _d, _e;
         if (isX) {
           if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
-          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+          if (isHorizontal) {
+            const minGap = getLabelMinGap(label.attribute.x, null === (_a = labels[index + 1]) || void 0 === _a ? void 0 : _a.attribute.x, null === (_b = labels[index - 1]) || void 0 === _b ? void 0 : _b.attribute.x);
+            isValidNumber$1(minGap) && (verticalLimitLength = min(verticalLimitLength, minGap));
+          }
         } else {
-          if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          if (isVertical) {
+            const minGap = getLabelMinGap(label.attribute.y, null === (_c = labels[index + 1]) || void 0 === _c ? void 0 : _c.attribute.y, null === (_d = labels[index - 1]) || void 0 === _d ? void 0 : _d.attribute.y);
+            isValidNumber$1(minGap) && (verticalLimitLength = min(verticalLimitLength, minGap));
+          }
           if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
         }
         let limitLabelLength = null,
           heightLimit = null;
         isX ? isVertical ? (limitLabelLength = limitLength, heightLimit = verticalLimitLength) : (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : isVertical ? (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : (limitLabelLength = limitLength, heightLimit = verticalLimitLength), label.setAttributes({
           maxLineWidth: limitLabelLength,
-          ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis,
+          ellipsis: null !== (_e = label.attribute.ellipsis) && void 0 !== _e ? _e : ellipsis,
           whiteSpace: "normal",
           heightLimit: heightLimit
         });
       });
     }
+    function getLabelMinGap(current, next, prev) {
+      let minGap;
+      return isValidNumber$1(next) && (minGap = Math.abs(next - current)), isValidNumber$1(prev) && (minGap = isValidNumber$1(minGap) ? Math.min(Math.abs(current - prev), minGap) : Math.abs(current - prev)), minGap;
+    }
 
     function alignAxisLabels(labels, start, containerSize, orient, align) {
       "left" === orient || "right" === orient ? "left" === align ? labels.forEach(label => {
@@ -23698,20 +23862,20 @@
       render() {
         this.removeAllChild(!0);
         const {
-            interactive = !0,
-            title: title,
-            padding = 0
-          } = this.attribute,
-          parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator.group({
-            x: parsedPadding[3],
-            y: parsedPadding[0],
-            pickable: interactive,
-            childrenPickable: interactive
-          });
+          interactive = !0,
+          title: title,
+          padding = 0
+        } = this.attribute;
+        this._parsedPadding = normalizePadding(padding);
+        const innerView = graphicCreator.group({
+          x: this._parsedPadding[3],
+          y: this._parsedPadding[0],
+          pickable: interactive,
+          childrenPickable: interactive
+        });
         innerView.name = LEGEND_ELEMENT_NAME.innerView, this.add(innerView), this._innerView = innerView, (null == title ? void 0 : title.visible) && this._renderTitle(title), this._renderContent(), this._adjustLayout(), interactive && this._bindEvents();
         const viewBounds = this._innerView.AABBBounds;
-        this.attribute.width = viewBounds.width() + parsedPadding[1] + parsedPadding[3], this.attribute.height = viewBounds.height() + parsedPadding[0] + parsedPadding[2];
+        this.attribute.width = viewBounds.width() + this._parsedPadding[1] + this._parsedPadding[3], this.attribute.height = viewBounds.height() + this._parsedPadding[0] + this._parsedPadding[2];
       }
       _renderTitle(title) {
         const {
@@ -23787,7 +23951,7 @@
     loadDiscreteLegendComponent();
     class DiscreteLegend extends LegendBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._onHover = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._contentMaxHeight = 0, this._onHover = e => {
           const target = e.target;
           if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
             const legendItem = target.delegate;
@@ -23850,7 +24014,6 @@
             maxCol = 1,
             maxRow = 2,
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             defaultSelected: defaultSelected,
             lazyload: lazyload,
             autoPage: autoPage
@@ -23866,7 +24029,8 @@
             startIndex: startIndex,
             isScrollbar: isScrollbar
           } = this._itemContext,
-          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol,
+          maxHeight = this._contentMaxHeight;
         let item,
           {
             doWrap: doWrap,
@@ -23898,11 +24062,12 @@
           item = {},
           items: items,
           reversed: reversed,
-          maxWidth: maxWidth
+          maxWidth: maxWidth,
+          maxHeight: maxHeight
         } = this.attribute;
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
-        reversed && (legendItems = null == items ? void 0 : items.reverse());
+        reversed && (legendItems = null == items ? void 0 : items.reverse()), this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
         const itemsContainer = graphicCreator.group({
           x: 0,
           y: 0
@@ -23933,7 +24098,8 @@
           items: legendItems,
           isHorizontal: isHorizontal,
           totalPage: 1 / 0,
-          isScrollbar: pager && "scrollbar" === pager.type
+          isScrollbar: pager && "scrollbar" === pager.type,
+          clipContainer: void 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
         this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
@@ -23945,7 +24111,15 @@
           hover = !0,
           select = !0
         } = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
+        if (hover) {
+          let trigger = "pointermove",
+            triggerOff = "pointerleave";
+          isObject$4(hover) && (hover.trigger && (trigger = hover.trigger), hover.triggerOff && (triggerOff = hover.triggerOff)), this._itemsContainer.addEventListener(trigger, this._onHover), this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
+        }
+        if (select) {
+          let trigger = "pointerdown";
+          isObject$4(select) && select.trigger && (trigger = select.trigger), this._itemsContainer.addEventListener(trigger, this._onClick);
+        }
       }
       _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
         var _a, _b;
@@ -24120,12 +24294,12 @@
           direction: "horizontal",
           disableTriggerEvent: disableTriggerEvent,
           range: [0, .5],
-          height: 12
+          height: !1 === compStyle.visible ? 0 : 12
         }, compStyle), {
           width: compSize
         })) : new ScrollBar(Object.assign(Object.assign({
           direction: "vertical",
-          width: 12,
+          width: !1 === compStyle.visible ? 0 : 12,
           range: [0, .5]
         }, compStyle), {
           height: compSize,
@@ -24155,13 +24329,24 @@
           });
         }
       }
+      _computeScrollbarDelta() {
+        const {
+            isHorizontal: isHorizontal,
+            clipContainer: clipContainer
+          } = this._itemContext,
+          itemContainerBounds = this._itemsContainer.AABBBounds,
+          clipContainerBounds = clipContainer.AABBBounds;
+        let delta, innerViewSize;
+        return isHorizontal ? (innerViewSize = clipContainerBounds.width(), delta = innerViewSize / itemContainerBounds.width()) : (innerViewSize = clipContainerBounds.height(), delta = innerViewSize / itemContainerBounds.height()), delta;
+      }
       _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
         const {
-          currentPage: currentPage,
-          totalPage: totalPage,
-          isHorizontal: isHorizontal
-        } = this._itemContext;
-        this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]), isHorizontal ? this._pagerComponent.setAttributes({
+            isHorizontal: isHorizontal,
+            currentPage: currentPage,
+            totalPage: totalPage
+          } = this._itemContext,
+          start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([start, start + this._computeScrollbarDelta()]), isHorizontal ? this._pagerComponent.setAttributes({
           x: 0,
           y: renderStartY + contentHeight
         }) : this._pagerComponent.setAttributes({
@@ -24181,7 +24366,7 @@
               value: value
             } = e.detail;
             let newPage;
-            return 0 === value[0] ? newPage = 1 : 1 === value[1] ? newPage = this._itemContext.totalPage : (newPage = value[0] * this._itemContext.totalPage, pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1), newPage;
+            return newPage = 0 === value[0] ? 1 : 1 === value[1] ? this._itemContext.totalPage : value[0] * this._itemContext.totalPage + 1, newPage;
           } : e => e.detail.current,
           onScroll = e => {
             const scrollComponent = this._pagerComponent,
@@ -24194,7 +24379,7 @@
                 height: height
               } = scrollComponent.getSliderRenderBounds(),
               currentScrollValue = "vertical" === direction ? e.deltaY / height : e.deltaX / width;
-            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0);
+            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this.updateScrollMask();
           },
           onPaging = e => {
             const newPage = pageParser(e);
@@ -24202,9 +24387,21 @@
               if (this._itemContext.currentPage = newPage, this._itemContext && this._itemContext.startIndex < this._itemContext.items.length) {
                 this._renderItems();
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
-                this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
+                if (this._itemContext.totalPage = newTotalPage, this._itemContext.isScrollbar && this._pagerComponent) {
+                  const newDelta = this._computeScrollbarDelta(),
+                    [start] = this._pagerComponent.getScrollRange();
+                  this._pagerComponent.setScrollRange([start, start + newDelta]);
+                }
               }
-              animation ? this._itemsContainer.animate().to({
+              if (this._itemContext.isScrollbar) {
+                const [start] = this._pagerComponent.getScrollRange();
+                let containerSize;
+                containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
+                const startOffset = containerSize * start;
+                this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
+                  [channel]: -startOffset
+                }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
+              } else animation ? this._itemsContainer.animate().to({
                 [channel]: -(newPage - 1) * pageSize
               }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
@@ -24220,7 +24417,6 @@
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             maxCol = 1,
             maxRow = 2,
             item = {},
@@ -24238,7 +24434,8 @@
           compStyle = __rest(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
-          } = this._itemContext;
+          } = this._itemContext,
+          maxHeight = this._contentMaxHeight;
         let comp,
           compWidth = 0,
           compHeight = 0,
@@ -24284,13 +24481,13 @@
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
       }
       _renderScrollbar() {
+        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             item = {},
             pager = {}
           } = this.attribute,
@@ -24306,23 +24503,39 @@
           compStyle = __rest(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
-          } = this._itemContext;
+          } = this._itemContext,
+          maxHeight = this._contentMaxHeight;
         let comp,
-          compSize = 0,
           contentWidth = 0,
           contentHeight = 0,
           startY = 0,
           pages = 1;
-        if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);else {
-          if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
-          itemsContainer.getChildren().forEach((item, index) => {
+        if (isHorizontal) contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, contentWidth), this._pagerComponent = comp, this._innerView.add(comp);else {
+          if (contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, comp = this._createScrollbar(compStyle, contentHeight), this._pagerComponent = comp, this._innerView.add(comp), contentHeight <= 0) return this._innerView.removeChild(comp), !1;
+          const items = itemsContainer.getChildren(),
+            itemsHeightArr = items.map(item => item.attribute.height);
+          if (1 === itemsHeightArr.length || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) {
+            const itemHeight = itemsHeightArr[0],
+              maxContentHeight = contentHeight,
+              pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
+            contentHeight = pageItemsCount * (spaceRow + itemHeight), pages = Math.ceil(items.length / pageItemsCount);
+          } else items.forEach((item, index) => {
             const {
-              height: height
-            } = item.attribute;
-            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height;
-          }), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+                height: height
+              } = item.attribute,
+              prePages = pages,
+              preStartY = startY;
+            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height, prePages !== pages && index === itemsContainer.getChildren().length - 1 && startY - contentHeight >= 1 / 3 * height && (contentHeight = preStartY + height, pages -= 1);
+          });
+          this._itemContext.totalPage = pages, this._itemContext.pages = pages;
+        }
+        if (defaultCurrent > 1) if (isHorizontal) {
+          const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
+          itemsContainer.setAttribute("x", -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
+        } else {
+          const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
+          itemsContainer.setAttribute("y", -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
         }
-        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
         const clipGroup = graphicCreator.group({
           x: 0,
           y: renderStartY,
@@ -24331,7 +24544,64 @@
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY), (null === (_a = pager.scrollMask) || void 0 === _a ? void 0 : _a.visible) && this.renderScrollMask(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+      }
+      renderScrollMask(clipGroup) {
+        const {
+            scrollMask = {}
+          } = this.attribute.pager,
+          {
+            visible = !0,
+            gradientLength = 16,
+            gradientStops: gradientStops
+          } = scrollMask;
+        if (!visible || !gradientStops) return;
+        const width = clipGroup.AABBBounds.width(),
+          height = clipGroup.AABBBounds.height(),
+          totalLength = this._itemContext.isHorizontal ? width : height,
+          startStops = gradientStops.map(stop => ({
+            offset: gradientLength * stop.offset / totalLength,
+            color: stop.color
+          })),
+          endStops = gradientStops.map(stop => ({
+            offset: (totalLength - gradientLength * stop.offset) / totalLength,
+            color: stop.color
+          })),
+          mask = graphicCreator.rect({
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+          });
+        this._scrollMask = mask, this._scrollMaskContext = {
+          startStops: startStops,
+          endStops: endStops
+        }, this.updateScrollMask(), clipGroup.add(mask);
+      }
+      updateScrollMask() {
+        if (!this._scrollMask || !this._pagerComponent) return;
+        if (!this._itemContext.isScrollbar) return;
+        const [start, end] = this._pagerComponent.getScrollRange(),
+          stops = [];
+        isNumberClose(clamp$1(end, 0, 1), 1) || stops.push(...this._scrollMaskContext.endStops), isNumberClose(clamp$1(start, 0, 1), 0) || stops.push(...this._scrollMaskContext.startStops), stops.length && (this._itemContext.isHorizontal ? this._scrollMask.setAttributes({
+          fill: {
+            gradient: "linear",
+            x0: 0,
+            y0: 0,
+            x1: 1,
+            y1: 0,
+            stops: stops
+          }
+        }) : this._scrollMask.setAttributes({
+          fill: {
+            gradient: "linear",
+            x0: 0,
+            y0: 0,
+            x1: 0,
+            y1: 1,
+            stops: stops
+          }
+        }));
       }
       _renderPagerComponent() {
         return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), !0;
@@ -25888,6 +26158,598 @@
       }
     };
 
+    var lib$1 = {};
+
+    var gif = {};
+
+    var lib = {};
+
+    Object.defineProperty(lib, "__esModule", {
+      value: true
+    });
+    lib.loop = lib.conditional = lib.parse = void 0;
+    var parse$3 = function parse(stream, schema) {
+      var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : result;
+      if (Array.isArray(schema)) {
+        schema.forEach(function (partSchema) {
+          return parse(stream, partSchema, result, parent);
+        });
+      } else if (typeof schema === 'function') {
+        schema(stream, result, parent, parse);
+      } else {
+        var key = Object.keys(schema)[0];
+        if (Array.isArray(schema[key])) {
+          parent[key] = {};
+          parse(stream, schema[key], result, parent[key]);
+        } else {
+          parent[key] = schema[key](stream, result, parent, parse);
+        }
+      }
+      return result;
+    };
+    lib.parse = parse$3;
+    var conditional = function conditional(schema, conditionFunc) {
+      return function (stream, result, parent, parse) {
+        if (conditionFunc(stream, result, parent)) {
+          parse(stream, schema, result, parent);
+        }
+      };
+    };
+    lib.conditional = conditional;
+    var loop = function loop(schema, continueFunc) {
+      return function (stream, result, parent, parse) {
+        var arr = [];
+        var lastStreamPos = stream.pos;
+        while (continueFunc(stream, result, parent)) {
+          var newParent = {};
+          parse(stream, schema, result, newParent); // cases when whole file is parsed but no termination is there and stream position is not getting updated as well
+          // it falls into infinite recursion, null check to avoid the same
+
+          if (stream.pos === lastStreamPos) {
+            break;
+          }
+          lastStreamPos = stream.pos;
+          arr.push(newParent);
+        }
+        return arr;
+      };
+    };
+    lib.loop = loop;
+
+    var uint8 = {};
+
+    Object.defineProperty(uint8, "__esModule", {
+      value: true
+    });
+    uint8.readBits = uint8.readArray = uint8.readUnsigned = uint8.readString = uint8.peekBytes = uint8.readBytes = uint8.peekByte = uint8.readByte = uint8.buildStream = void 0;
+
+    // Default stream and parsers for Uint8TypedArray data type
+    var buildStream = function buildStream(uint8Data) {
+      return {
+        data: uint8Data,
+        pos: 0
+      };
+    };
+    uint8.buildStream = buildStream;
+    var readByte = function readByte() {
+      return function (stream) {
+        return stream.data[stream.pos++];
+      };
+    };
+    uint8.readByte = readByte;
+    var peekByte = function peekByte() {
+      var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return function (stream) {
+        return stream.data[stream.pos + offset];
+      };
+    };
+    uint8.peekByte = peekByte;
+    var readBytes = function readBytes(length) {
+      return function (stream) {
+        return stream.data.subarray(stream.pos, stream.pos += length);
+      };
+    };
+    uint8.readBytes = readBytes;
+    var peekBytes = function peekBytes(length) {
+      return function (stream) {
+        return stream.data.subarray(stream.pos, stream.pos + length);
+      };
+    };
+    uint8.peekBytes = peekBytes;
+    var readString = function readString(length) {
+      return function (stream) {
+        return Array.from(readBytes(length)(stream)).map(function (value) {
+          return String.fromCharCode(value);
+        }).join('');
+      };
+    };
+    uint8.readString = readString;
+    var readUnsigned = function readUnsigned(littleEndian) {
+      return function (stream) {
+        var bytes = readBytes(2)(stream);
+        return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1];
+      };
+    };
+    uint8.readUnsigned = readUnsigned;
+    var readArray = function readArray(byteSize, totalOrFunc) {
+      return function (stream, result, parent) {
+        var total = typeof totalOrFunc === 'function' ? totalOrFunc(stream, result, parent) : totalOrFunc;
+        var parser = readBytes(byteSize);
+        var arr = new Array(total);
+        for (var i = 0; i < total; i++) {
+          arr[i] = parser(stream);
+        }
+        return arr;
+      };
+    };
+    uint8.readArray = readArray;
+    var subBitsTotal = function subBitsTotal(bits, startIndex, length) {
+      var result = 0;
+      for (var i = 0; i < length; i++) {
+        result += bits[startIndex + i] && Math.pow(2, length - i - 1);
+      }
+      return result;
+    };
+    var readBits = function readBits(schema) {
+      return function (stream) {
+        var _byte = readByte()(stream); // convert the byte to bit array
+
+        var bits = new Array(8);
+        for (var i = 0; i < 8; i++) {
+          bits[7 - i] = !!(_byte & 1 << i);
+        } // convert the bit array to values based on the schema
+
+        return Object.keys(schema).reduce(function (res, key) {
+          var def = schema[key];
+          if (def.length) {
+            res[key] = subBitsTotal(bits, def.index, def.length);
+          } else {
+            res[key] = bits[def.index];
+          }
+          return res;
+        }, {});
+      };
+    };
+    uint8.readBits = readBits;
+
+    (function (exports) {
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports["default"] = void 0;
+      var _ = lib;
+      var _uint = uint8;
+
+      // a set of 0x00 terminated subblocks
+      var subBlocksSchema = {
+        blocks: function blocks(stream) {
+          var terminator = 0x00;
+          var chunks = [];
+          var streamSize = stream.data.length;
+          var total = 0;
+          for (var size = (0, _uint.readByte)()(stream); size !== terminator; size = (0, _uint.readByte)()(stream)) {
+            // size becomes undefined for some case when file is corrupted and  terminator is not proper 
+            // null check to avoid recursion
+            if (!size) break; // catch corrupted files with no terminator
+
+            if (stream.pos + size >= streamSize) {
+              var availableSize = streamSize - stream.pos;
+              chunks.push((0, _uint.readBytes)(availableSize)(stream));
+              total += availableSize;
+              break;
+            }
+            chunks.push((0, _uint.readBytes)(size)(stream));
+            total += size;
+          }
+          var result = new Uint8Array(total);
+          var offset = 0;
+          for (var i = 0; i < chunks.length; i++) {
+            result.set(chunks[i], offset);
+            offset += chunks[i].length;
+          }
+          return result;
+        }
+      }; // global control extension
+
+      var gceSchema = (0, _.conditional)({
+        gce: [{
+          codes: (0, _uint.readBytes)(2)
+        }, {
+          byteSize: (0, _uint.readByte)()
+        }, {
+          extras: (0, _uint.readBits)({
+            future: {
+              index: 0,
+              length: 3
+            },
+            disposal: {
+              index: 3,
+              length: 3
+            },
+            userInput: {
+              index: 6
+            },
+            transparentColorGiven: {
+              index: 7
+            }
+          })
+        }, {
+          delay: (0, _uint.readUnsigned)(true)
+        }, {
+          transparentColorIndex: (0, _uint.readByte)()
+        }, {
+          terminator: (0, _uint.readByte)()
+        }]
+      }, function (stream) {
+        var codes = (0, _uint.peekBytes)(2)(stream);
+        return codes[0] === 0x21 && codes[1] === 0xf9;
+      }); // image pipeline block
+
+      var imageSchema = (0, _.conditional)({
+        image: [{
+          code: (0, _uint.readByte)()
+        }, {
+          descriptor: [{
+            left: (0, _uint.readUnsigned)(true)
+          }, {
+            top: (0, _uint.readUnsigned)(true)
+          }, {
+            width: (0, _uint.readUnsigned)(true)
+          }, {
+            height: (0, _uint.readUnsigned)(true)
+          }, {
+            lct: (0, _uint.readBits)({
+              exists: {
+                index: 0
+              },
+              interlaced: {
+                index: 1
+              },
+              sort: {
+                index: 2
+              },
+              future: {
+                index: 3,
+                length: 2
+              },
+              size: {
+                index: 5,
+                length: 3
+              }
+            })
+          }]
+        }, (0, _.conditional)({
+          lct: (0, _uint.readArray)(3, function (stream, result, parent) {
+            return Math.pow(2, parent.descriptor.lct.size + 1);
+          })
+        }, function (stream, result, parent) {
+          return parent.descriptor.lct.exists;
+        }), {
+          data: [{
+            minCodeSize: (0, _uint.readByte)()
+          }, subBlocksSchema]
+        }]
+      }, function (stream) {
+        return (0, _uint.peekByte)()(stream) === 0x2c;
+      }); // plain text block
+
+      var textSchema = (0, _.conditional)({
+        text: [{
+          codes: (0, _uint.readBytes)(2)
+        }, {
+          blockSize: (0, _uint.readByte)()
+        }, {
+          preData: function preData(stream, result, parent) {
+            return (0, _uint.readBytes)(parent.text.blockSize)(stream);
+          }
+        }, subBlocksSchema]
+      }, function (stream) {
+        var codes = (0, _uint.peekBytes)(2)(stream);
+        return codes[0] === 0x21 && codes[1] === 0x01;
+      }); // application block
+
+      var applicationSchema = (0, _.conditional)({
+        application: [{
+          codes: (0, _uint.readBytes)(2)
+        }, {
+          blockSize: (0, _uint.readByte)()
+        }, {
+          id: function id(stream, result, parent) {
+            return (0, _uint.readString)(parent.blockSize)(stream);
+          }
+        }, subBlocksSchema]
+      }, function (stream) {
+        var codes = (0, _uint.peekBytes)(2)(stream);
+        return codes[0] === 0x21 && codes[1] === 0xff;
+      }); // comment block
+
+      var commentSchema = (0, _.conditional)({
+        comment: [{
+          codes: (0, _uint.readBytes)(2)
+        }, subBlocksSchema]
+      }, function (stream) {
+        var codes = (0, _uint.peekBytes)(2)(stream);
+        return codes[0] === 0x21 && codes[1] === 0xfe;
+      });
+      var schema = [{
+        header: [{
+          signature: (0, _uint.readString)(3)
+        }, {
+          version: (0, _uint.readString)(3)
+        }]
+      }, {
+        lsd: [{
+          width: (0, _uint.readUnsigned)(true)
+        }, {
+          height: (0, _uint.readUnsigned)(true)
+        }, {
+          gct: (0, _uint.readBits)({
+            exists: {
+              index: 0
+            },
+            resolution: {
+              index: 1,
+              length: 3
+            },
+            sort: {
+              index: 4
+            },
+            size: {
+              index: 5,
+              length: 3
+            }
+          })
+        }, {
+          backgroundColorIndex: (0, _uint.readByte)()
+        }, {
+          pixelAspectRatio: (0, _uint.readByte)()
+        }]
+      }, (0, _.conditional)({
+        gct: (0, _uint.readArray)(3, function (stream, result) {
+          return Math.pow(2, result.lsd.gct.size + 1);
+        })
+      }, function (stream, result) {
+        return result.lsd.gct.exists;
+      }),
+      // content frames
+      {
+        frames: (0, _.loop)([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) {
+          var nextCode = (0, _uint.peekByte)()(stream); // rather than check for a terminator, we should check for the existence
+          // of an ext or image block to avoid infinite loops
+          //var terminator = 0x3B;
+          //return nextCode !== terminator;
+
+          return nextCode === 0x21 || nextCode === 0x2c;
+        })
+      }];
+      var _default = schema;
+      exports["default"] = _default;
+    })(gif);
+
+    var deinterlace$1 = {};
+
+    Object.defineProperty(deinterlace$1, "__esModule", {
+      value: true
+    });
+    deinterlace$1.deinterlace = void 0;
+
+    /**
+     * Deinterlace function from https://github.com/shachaf/jsgif
+     */
+    var deinterlace = function deinterlace(pixels, width) {
+      var newPixels = new Array(pixels.length);
+      var rows = pixels.length / width;
+      var cpRow = function cpRow(toRow, fromRow) {
+        var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
+        newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
+      }; // See appendix E.
+
+      var offsets = [0, 4, 2, 1];
+      var steps = [8, 8, 4, 2];
+      var fromRow = 0;
+      for (var pass = 0; pass < 4; pass++) {
+        for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+          cpRow(toRow, fromRow);
+          fromRow++;
+        }
+      }
+      return newPixels;
+    };
+    deinterlace$1.deinterlace = deinterlace;
+
+    var lzw$1 = {};
+
+    Object.defineProperty(lzw$1, "__esModule", {
+      value: true
+    });
+    lzw$1.lzw = void 0;
+
+    /**
+     * javascript port of java LZW decompression
+     * Original java author url: https://gist.github.com/devunwired/4479231
+     */
+    var lzw = function lzw(minCodeSize, data, pixelCount) {
+      var MAX_STACK_SIZE = 4096;
+      var nullCode = -1;
+      var npix = pixelCount;
+      var available, clear, code_mask, code_size, end_of_information, in_code, old_code, bits, code, i, datum, data_size, first, top, bi, pi;
+      var dstPixels = new Array(pixelCount);
+      var prefix = new Array(MAX_STACK_SIZE);
+      var suffix = new Array(MAX_STACK_SIZE);
+      var pixelStack = new Array(MAX_STACK_SIZE + 1); // Initialize GIF data stream decoder.
+
+      data_size = minCodeSize;
+      clear = 1 << data_size;
+      end_of_information = clear + 1;
+      available = clear + 2;
+      old_code = nullCode;
+      code_size = data_size + 1;
+      code_mask = (1 << code_size) - 1;
+      for (code = 0; code < clear; code++) {
+        prefix[code] = 0;
+        suffix[code] = code;
+      } // Decode GIF pixel stream.
+
+      var datum, bits, first, top, pi, bi;
+      datum = bits = first = top = pi = bi = 0;
+      for (i = 0; i < npix;) {
+        if (top === 0) {
+          if (bits < code_size) {
+            // get the next byte
+            datum += data[bi] << bits;
+            bits += 8;
+            bi++;
+            continue;
+          } // Get the next code.
+
+          code = datum & code_mask;
+          datum >>= code_size;
+          bits -= code_size; // Interpret the code
+
+          if (code > available || code == end_of_information) {
+            break;
+          }
+          if (code == clear) {
+            // Reset decoder.
+            code_size = data_size + 1;
+            code_mask = (1 << code_size) - 1;
+            available = clear + 2;
+            old_code = nullCode;
+            continue;
+          }
+          if (old_code == nullCode) {
+            pixelStack[top++] = suffix[code];
+            old_code = code;
+            first = code;
+            continue;
+          }
+          in_code = code;
+          if (code == available) {
+            pixelStack[top++] = first;
+            code = old_code;
+          }
+          while (code > clear) {
+            pixelStack[top++] = suffix[code];
+            code = prefix[code];
+          }
+          first = suffix[code] & 0xff;
+          pixelStack[top++] = first; // add a new string to the table, but only if space is available
+          // if not, just continue with current table until a clear code is found
+          // (deferred clear code implementation as per GIF spec)
+
+          if (available < MAX_STACK_SIZE) {
+            prefix[available] = old_code;
+            suffix[available] = first;
+            available++;
+            if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
+              code_size++;
+              code_mask += available;
+            }
+          }
+          old_code = in_code;
+        } // Pop a pixel off the pixel stack.
+
+        top--;
+        dstPixels[pi++] = pixelStack[top];
+        i++;
+      }
+      for (i = pi; i < npix; i++) {
+        dstPixels[i] = 0; // clear missing pixels
+      }
+
+      return dstPixels;
+    };
+    lzw$1.lzw = lzw;
+
+    Object.defineProperty(lib$1, "__esModule", {
+      value: true
+    });
+    var decompressFrames_1 = lib$1.decompressFrames = lib$1.decompressFrame = parseGIF_1 = lib$1.parseGIF = void 0;
+    var _gif = _interopRequireDefault(gif);
+    var _jsBinarySchemaParser = lib;
+    var _uint = uint8;
+    var _deinterlace = deinterlace$1;
+    var _lzw = lzw$1;
+    function _interopRequireDefault(obj) {
+      return obj && obj.__esModule ? obj : {
+        "default": obj
+      };
+    }
+    var parseGIF = function parseGIF(arrayBuffer) {
+      var byteData = new Uint8Array(arrayBuffer);
+      return (0, _jsBinarySchemaParser.parse)((0, _uint.buildStream)(byteData), _gif["default"]);
+    };
+    var parseGIF_1 = lib$1.parseGIF = parseGIF;
+    var generatePatch = function generatePatch(image) {
+      var totalPixels = image.pixels.length;
+      var patchData = new Uint8ClampedArray(totalPixels * 4);
+      for (var i = 0; i < totalPixels; i++) {
+        var pos = i * 4;
+        var colorIndex = image.pixels[i];
+        var color = image.colorTable[colorIndex] || [0, 0, 0];
+        patchData[pos] = color[0];
+        patchData[pos + 1] = color[1];
+        patchData[pos + 2] = color[2];
+        patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;
+      }
+      return patchData;
+    };
+    var decompressFrame = function decompressFrame(frame, gct, buildImagePatch) {
+      if (!frame.image) {
+        return;
+      }
+      var image = frame.image; // get the number of pixels
+
+      var totalPixels = image.descriptor.width * image.descriptor.height; // do lzw decompression
+
+      var pixels = (0, _lzw.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels); // deal with interlacing if necessary
+
+      if (image.descriptor.lct.interlaced) {
+        pixels = (0, _deinterlace.deinterlace)(pixels, image.descriptor.width);
+      }
+      var resultImage = {
+        pixels: pixels,
+        dims: {
+          top: frame.image.descriptor.top,
+          left: frame.image.descriptor.left,
+          width: frame.image.descriptor.width,
+          height: frame.image.descriptor.height
+        }
+      }; // color table
+
+      if (image.descriptor.lct && image.descriptor.lct.exists) {
+        resultImage.colorTable = image.lct;
+      } else {
+        resultImage.colorTable = gct;
+      } // add per frame relevant gce information
+
+      if (frame.gce) {
+        resultImage.delay = (frame.gce.delay || 10) * 10; // convert to ms
+
+        resultImage.disposalType = frame.gce.extras.disposal; // transparency
+
+        if (frame.gce.extras.transparentColorGiven) {
+          resultImage.transparentIndex = frame.gce.transparentColorIndex;
+        }
+      } // create canvas usable imagedata if desired
+
+      if (buildImagePatch) {
+        resultImage.patch = generatePatch(resultImage);
+      }
+      return resultImage;
+    };
+    lib$1.decompressFrame = decompressFrame;
+    var decompressFrames = function decompressFrames(parsedGif, buildImagePatches) {
+      return parsedGif.frames.filter(function (f) {
+        return f.image;
+      }).map(function (f) {
+        return decompressFrame(f, parsedGif.gct, buildImagePatches);
+      });
+    };
+    decompressFrames_1 = lib$1.decompressFrames = decompressFrames;
+
     let registed = false;
     function registerForVrender() {
         if (registed) {
@@ -25943,6 +26805,7 @@
         HierarchyState["expand"] = "expand";
         HierarchyState["collapse"] = "collapse";
         HierarchyState["none"] = "none";
+        HierarchyState["loading"] = "loading";
     })(HierarchyState || (HierarchyState = {}));
 
     var AggregationType;
@@ -26004,6 +26867,7 @@
         InternalIconName["expandIconName"] = "expand";
         InternalIconName["collapseIconName"] = "collapse";
         InternalIconName["dragReorderIconName"] = "dragReorder";
+        InternalIconName["loadingIconName"] = "loading";
     })(InternalIconName || (InternalIconName = {}));
 
     var index$1 = /*#__PURE__*/Object.freeze({
@@ -27184,7 +28048,9 @@
     }
     function cellInRange(range, col, row) {
         return ((range.start.col <= col && col <= range.end.col && range.start.row <= row && row <= range.end.row) ||
-            (range.end.col <= col && col <= range.start.col && range.end.row <= row && row <= range.start.row));
+            (range.end.col <= col && col <= range.start.col && range.end.row <= row && row <= range.start.row) ||
+            (range.end.col <= col && col <= range.start.col && range.start.row <= row && row <= range.end.row) ||
+            (range.start.col <= col && col <= range.end.col && range.end.row <= row && row <= range.start.row));
     }
     function cellInRanges(ranges, col, row) {
         for (let i = 0; i < ranges.length; i++) {
@@ -27269,6 +28135,8 @@
         RESIZE_ROW_END: 'resize_row_end',
         CHANGE_HEADER_POSITION_START: 'change_header_position_start',
         CHANGE_HEADER_POSITION: 'change_header_position',
+        CHANGING_HEADER_POSITION: 'changing_header_position',
+        CHANGE_HEADER_POSITION_FAIL: 'change_header_position_fail',
         SORT_CLICK: 'sort_click',
         AFTER_SORT: 'after_sort',
         FREEZE_CLICK: 'freeze_click',
@@ -32291,6 +33159,15 @@
     let Icon$1 = class Icon extends Image$2 {
         role;
         tooltip;
+        frameImageData;
+        tempCanvas;
+        tempCtx;
+        gifCanvas;
+        gifCtx;
+        loadedFrames;
+        frameIndex;
+        playing;
+        lastTime;
         constructor(params) {
             super(params);
             if (this.attribute.visibleTime === 'mouseenter_cell' || this.attribute.visibleTime === 'click_cell') {
@@ -32299,6 +33176,24 @@
             if (this.attribute.hoverImage) {
                 this.attribute.originImage = this.attribute.image;
             }
+            if (this.attribute.isGif && this.attribute.gif) {
+                this.loadGif();
+            }
+        }
+        loadGif() {
+            this.playing = false;
+            ResourceLoader.GetFile(this.attribute.gif, 'arrayBuffer')
+                .then((res) => {
+                const gif = parseGIF_1(res);
+                const frames = decompressFrames_1(gif, true);
+                this.renderGIF(frames);
+                this.resources.set(this.attribute.image, {
+                    state: 'success',
+                    data: this.gifCanvas
+                });
+            })
+                .catch((e) => {
+            });
         }
         get backgroundWidth() {
             return this.attribute.backgroundWidth ?? this.attribute.width ?? 0;
@@ -32306,6 +33201,67 @@
         get backgroundHeight() {
             return this.attribute.backgroundHeight ?? this.attribute.height ?? 0;
         }
+        renderGIF(frames) {
+            this.loadedFrames = frames;
+            this.frameIndex = 0;
+            if (!this.tempCanvas) {
+                this.tempCanvas = document.createElement('canvas');
+                this.tempCtx = this.tempCanvas.getContext('2d');
+            }
+            if (!this.gifCanvas) {
+                this.gifCanvas = document.createElement('canvas');
+                this.gifCtx = this.gifCanvas.getContext('2d');
+            }
+            this.gifCanvas.width = frames[0].dims.width;
+            this.gifCanvas.height = frames[0].dims.height;
+            this.playing = true;
+            this.lastTime = new Date().getTime();
+            this.animate().to({}, 1000, 'linear').loop(Infinity);
+        }
+        renderFrame(context, x, y) {
+            const frame = this.loadedFrames[this.frameIndex || 0];
+            if (frame.disposalType === 2) {
+                this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height);
+            }
+            this.drawPatch(frame);
+            this.manipulate(context, x, y);
+            const diff = new Date().getTime() - this.lastTime;
+            if (frame.delay < diff) {
+                this.frameIndex++;
+                this.lastTime = new Date().getTime();
+            }
+            if (this.frameIndex >= this.loadedFrames.length) {
+                this.frameIndex = 0;
+            }
+        }
+        drawPatch(frame) {
+            const dims = frame.dims;
+            if (!this.frameImageData ||
+                dims.width !== this.frameImageData.width ||
+                dims.height !== this.frameImageData.height) {
+                this.tempCanvas.width = dims.width;
+                this.tempCanvas.height = dims.height;
+                this.frameImageData = this.tempCtx.createImageData(dims.width, dims.height);
+            }
+            this.frameImageData.data.set(frame.patch);
+            this.tempCtx.putImageData(this.frameImageData, 0, 0);
+            this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
+        }
+        manipulate(context, x, y) {
+            context.drawImage(this.gifCanvas, 0, 0, this.gifCanvas.width, this.gifCanvas.height, x, y, this.attribute.width, this.attribute.height);
+        }
+        setAttribute(key, value, forceUpdateTag, context) {
+            super.setAttribute(key, value, forceUpdateTag, context);
+            if (key === 'gif') {
+                this.loadGif();
+            }
+        }
+        setAttributes(params, forceUpdateTag, context) {
+            super.setAttributes(params, forceUpdateTag, context);
+            if (params.gif) {
+                this.loadGif();
+            }
+        }
     };
 
     function emptyCustomLayout(args) {
@@ -32600,7 +33556,7 @@
             };
             const customRenderObj = customLayout(arg);
             if (customRenderObj.rootContainer) {
-                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
+                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer, table.animationManager.timeline);
             }
             if (customRenderObj.rootContainer instanceof Group$2) {
                 elementsGroup = customRenderObj.rootContainer;
@@ -32902,14 +33858,14 @@
             }
         });
     }
-    function decodeReactDom(dom) {
+    function decodeReactDom(dom, timeline) {
         if (!dom ||
             (!isValid$1(dom.$$typeof) &&
                 !isValid$1(dom.vtype))) {
             return dom;
         }
         const type = dom.type;
-        const { attribute, children, stateProxy } = dom.props;
+        const { attribute, children, stateProxy, animation } = dom.props;
         const g = type({ attribute });
         parseToGraphic(g, dom.props);
         if (stateProxy) {
@@ -32919,12 +33875,19 @@
         g.name = attribute.name;
         if (isArray$1(children)) {
             children.forEach((item) => {
-                const c = decodeReactDom(item);
+                const c = decodeReactDom(item, timeline);
                 c && c.type && g.add(c);
             });
         }
         else if (children) {
-            g.add(decodeReactDom(children));
+            g.add(decodeReactDom(children, timeline));
+        }
+        if (isArray$1(animation) && timeline) {
+            const animate = g.animate();
+            animate.setTimeline(timeline);
+            animation.forEach((item) => {
+                animate[item[0]](...item.slice(1));
+            });
         }
         return g;
     }
@@ -33311,6 +34274,24 @@
                 cursor: 'pointer'
             };
         },
+        get loading() {
+            return {
+                type: 'image',
+                src: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/loading-circle.gif',
+                width: collapse_size,
+                height: collapse_size,
+                name: 'loading',
+                positionType: IconPosition.contentLeft,
+                marginLeft: 0,
+                marginRight: 4,
+                hover: {
+                    width: collapse_size_2,
+                    height: collapse_size_2,
+                    bgColor: 'rgba(101, 117, 168, 0.1)'
+                },
+                isGif: true
+            };
+        },
         get drillDown() {
             return {
                 name: 'drillDown',
@@ -33543,6 +34524,9 @@
                 this._AABBBounds.setValue(x, y, x + width, y + height);
                 this.parent && this.parent.addChildUpdateBoundTag();
                 this.clearUpdateBoundTag();
+                if (this.shadowRoot) {
+                    this.shadowRoot.tryUpdateAABBBounds();
+                }
                 return this._AABBBounds;
             }
             else if (this.role === 'body' ||
@@ -33973,12 +34957,18 @@
                     autoWrapText,
                     lineClamp,
                     wordBreak: 'break-word',
-                    heightLimit: autoRowHeight && !table.options.customConfig?.multilinesForXTable
+                    heightLimit: table.options.customConfig?.limitContentHeight === false
                         ? -1
-                        : cellHeight - Math.floor(padding[0] + padding[2]),
+                        : autoRowHeight && !table.options.customConfig?.multilinesForXTable
+                            ? -1
+                            : cellHeight - Math.floor(padding[0] + padding[2]),
                     pickable: false,
                     dx: (textAlign === 'left' ? hierarchyOffset : 0) + _contentOffset,
-                    whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
+                    whiteSpace: table.options.customConfig?.limitContentHeight === false
+                        ? 'normal'
+                        : text.length === 1 && !autoWrapText
+                            ? 'no-wrap'
+                            : 'normal'
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
                 wrapText.name = 'text';
@@ -34015,14 +35005,20 @@
                         ? Infinity
                         : cellWidth - (padding[1] + padding[3]) - leftIconWidth - rightIconWidth - hierarchyOffset,
                     textBaseline: 'top',
-                    heightLimit: autoRowHeight && !table.options.customConfig?.multilinesForXTable
+                    heightLimit: table.options.customConfig?.limitContentHeight === false
                         ? -1
-                        : cellHeight - Math.floor(padding[0] + padding[2]),
+                        : autoRowHeight && !table.options.customConfig?.multilinesForXTable
+                            ? -1
+                            : cellHeight - Math.floor(padding[0] + padding[2]),
                     pickable: false,
                     autoWrapText,
                     lineClamp,
                     wordBreak: 'break-word',
-                    whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
+                    whiteSpace: table.options.customConfig?.limitContentHeight === false
+                        ? 'normal'
+                        : text.length === 1 && !autoWrapText
+                            ? 'no-wrap'
+                            : 'normal',
                     dx: (textAlign === 'left' ? (!contentLeftIcons.length ? hierarchyOffset : 0) : 0) + _contentOffset
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
@@ -34151,7 +35147,13 @@
     function dealWithIcon(icon, mark, col, row, range, table, dealWithIconComputeVar) {
         const iconAttribute = {};
         if (icon.type === 'image') {
-            iconAttribute.image = icon.src;
+            if (icon.isGif) {
+                iconAttribute.gif = icon.src;
+                iconAttribute.image = icon.src;
+            }
+            else {
+                iconAttribute.image = icon.src;
+            }
         }
         else if (icon.type === 'svg' || 'svg' in icon) {
             iconAttribute.image = icon.svg;
@@ -34161,6 +35163,7 @@
         iconAttribute.visibleTime = icon.visibleTime ?? 'always';
         iconAttribute.funcType = icon.funcType;
         iconAttribute.interactive = icon.interactive;
+        iconAttribute.isGif = icon.isGif;
         let hierarchyOffset = 0;
         if ((!dealWithIconComputeVar || dealWithIconComputeVar?.addedHierarchyOffset === 0) &&
             isNumber$2(col) &&
@@ -34197,10 +35200,13 @@
         if (mark) {
             mark.setAttributes(iconAttribute);
             mark.loadImage(iconAttribute.image);
+            mark.tooltip = icon.tooltip;
+            mark.name = icon.name;
             return mark;
         }
         const iconMark = new Icon$1(iconAttribute);
         iconMark.tooltip = icon.tooltip;
+        iconMark.name = icon.name;
         return iconMark;
     }
     function dealWithRichTextIcon(icon) {
@@ -34345,12 +35351,12 @@
         }
         return false;
     }
-    function updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline) {
+    function updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline, table) {
         const newHeight = distHeight - Math.floor(padding[0] + padding[2]);
         const textMark = cellGroup.getChildByName('text');
         if (textMark instanceof Text$1 && !autoRowHeight) {
             textMark.setAttributes({
-                heightLimit: newHeight
+                heightLimit: table.options.customConfig?.limitContentHeight === false ? -1 : newHeight
             });
         }
         else if (textMark instanceof RichText && !autoRowHeight) {
@@ -34915,6 +35921,107 @@
         });
     }
 
+    function isSameRange$1(range1, range2) {
+        if (!range1 && !range2) {
+            return true;
+        }
+        if (!range1 || !range2) {
+            return false;
+        }
+        return (range1.start.col === range2.start.col &&
+            range1.start.row === range2.start.row &&
+            range1.end.col === range2.end.col &&
+            range1.end.row === range2.end.row);
+    }
+
+    class InvertHighlightPlugin {
+        table;
+        range;
+        _fill;
+        _opacity;
+        constructor(table, options) {
+            this.table = table;
+            this._fill = options?.fill ?? '#000';
+            this._opacity = options?.opacity ?? 0.5;
+        }
+        setInvertHighlightRange(range) {
+            if (isSameRange$1(this.range, range)) {
+                return;
+            }
+            this.range = range;
+            if (!range) {
+                this.deleteAllCellGroupShadow();
+            }
+            else {
+                this.updateCellGroupShadow();
+            }
+            this.table.scenegraph.updateNextFrame();
+        }
+        deleteAllCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup);
+        }
+        updateCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup, this.range);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup, this.range);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), this.range;
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);
+        }
+        updateCellGroupShadowInContainer(container, range) {
+            container.forEachChildrenSkipChild((column) => {
+                if (column.role === 'column') {
+                    column.forEachChildrenSkipChild((cell) => {
+                        if (cell.role !== 'cell') {
+                            return;
+                        }
+                        cell.attachShadow(cell.shadowRoot);
+                        const shadowGroup = cell.shadowRoot;
+                        if (!range) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (cellInRange(range, cell.col, cell.row)) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (!shadowGroup.firstChild) {
+                            const shadowRect = createRect({
+                                x: 0,
+                                y: 0,
+                                width: cell.attribute.width,
+                                height: cell.attribute.height,
+                                fill: this._fill,
+                                opacity: this._opacity
+                            });
+                            shadowRect.name = 'shadow-rect';
+                            shadowGroup.appendChild(shadowRect);
+                        }
+                    });
+                }
+            });
+        }
+    }
+    function onBeforeAttributeUpdateForInvertHighlight(val, attribute) {
+        const graphic = this;
+        if (graphic.shadowRoot && graphic.shadowRoot.childrenCount && (isValid$1(val.width) || isValid$1(val.height))) {
+            const shadowRect = graphic.shadowRoot.findChildrenByName('shadow-rect')[0];
+            if (shadowRect) {
+                shadowRect.setAttributes({
+                    width: val.width ?? shadowRect.attribute.width,
+                    height: val.height ?? shadowRect.attribute.height
+                });
+            }
+        }
+    }
+
     function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         let isAsync = false;
         let cellGroup;
@@ -35033,6 +36140,7 @@
             const createRadioCellGroup = Factory.getFunction('createRadioCellGroup');
             cellGroup = createRadioCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define);
         }
+        cellGroup.onBeforeAttributeUpdate = onBeforeAttributeUpdateForInvertHighlight;
         return cellGroup;
     }
     function updateCell$1(col, row, table, addNew, isShadow) {
@@ -35288,7 +36396,7 @@
                     continue;
                 }
                 if (range.start.row !== range.end.row && cellGroup.contentHeight !== cellHeight) {
-                    updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.isAutoRowHeight(row), padding, textAlign, textBaseline);
+                    updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.isAutoRowHeight(row), padding, textAlign, textBaseline, table);
                 }
                 if (range.start.col !== range.end.col && cellGroup.contentWidth !== cellWidth) {
                     updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.isAutoRowHeight(row), padding, textAlign, textBaseline, table.scenegraph);
@@ -35304,7 +36412,7 @@
     function dealWithMergeCellSizeForShadow(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellGroup) {
         const { col, row } = cellGroup;
         if (range.start.row !== range.end.row && cellGroup.contentHeight !== cellHeight) {
-            updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.isAutoRowHeight(row), padding, textAlign, textBaseline);
+            updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.isAutoRowHeight(row), padding, textAlign, textBaseline, table);
         }
         if (range.start.col !== range.end.col && cellGroup.contentWidth !== cellWidth) {
             updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.isAutoRowHeight(row), padding, textAlign, textBaseline, table.scenegraph);
@@ -35709,7 +36817,8 @@
         table.defaultHeaderColWidth;
         const isDefaultHeaderHasAuto = table.defaultHeaderRowHeight === 'auto' ||
             (isArray$1(table.defaultHeaderRowHeight) && table.defaultHeaderRowHeight.some(item => item === 'auto'));
-        const isAllRowsAuto = table.heightMode === 'autoHeight' || table.heightMode === 'adaptive';
+        const isAllRowsAuto = table.heightMode === 'autoHeight' ||
+            (table.heightMode === 'adaptive' && table.options.autoHeightInAdaptiveMode !== false);
         if (isAllRowsAuto || isDefaultHeaderHasAuto) {
             rowStart = rowStart ?? 0;
             rowEnd = rowEnd ?? table.rowCount - 1;
@@ -35729,7 +36838,9 @@
                 if (isAllRowsAuto || table.getDefaultRowHeight(row) === 'auto') {
                     const height = computeRowHeight(row, startCol, endCol, table);
                     newHeights[row] = Math.round(height);
-                    table._setRowHeight(row, height);
+                    if (table.heightAdaptiveMode === 'only-body' || !update) {
+                        table._setRowHeight(row, height);
+                    }
                 }
             }
             for (let row = table.rowCount - table.bottomFrozenRowCount; row <= rowEnd; row++) {
@@ -35894,7 +37005,7 @@
         if (update) {
             for (let row = rowStart; row <= rowEnd; row++) {
                 const newRowHeight = newHeights[row] ?? table.getRowHeight(row);
-                if (newRowHeight !== (oldRowHeights[row] ?? table.getRowHeight(row))) {
+                if (isValid$1(newRowHeight)) {
                     table._setRowHeight(row, newRowHeight);
                 }
             }
@@ -36503,7 +37614,7 @@
                     });
                     if (renderDefault) {
                         const style = table._getCellStyle(colStart, rowStart);
-                        updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
+                        updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, table);
                     }
                     const rangeHeight = table.getRowHeight(row);
                     const rangeWidth = table.getColWidth(col);
@@ -36526,7 +37637,7 @@
         }
         else {
             const style = table._getCellStyle(cellGroup.col, cellGroup.row);
-            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
+            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, table);
         }
     }
 
@@ -37366,6 +38477,12 @@
                 y: symbolY,
                 angle: symbolRotate
             });
+            return {
+                backX: rectX - rectDx,
+                lineX: symbolX,
+                backY: rectY - rectDy,
+                lineY: symbolY
+            };
         }
         hide() {
             this.columnMoverLabel.setAttribute('visible', false);
@@ -37904,7 +39021,7 @@
             this.cellMover.hide();
         }
         showMoveCol(col, row, delta) {
-            this.cellMover.show(col, row, delta);
+            return this.cellMover.show(col, row, delta);
         }
         updateMoveCol(backX, lineX, backY, lineY) {
             this.cellMover.update(backX, lineX, backY, lineY);
@@ -38569,17 +39686,18 @@
         bodyBound.x2 = tableBound.x2;
         bodyBound.y1 = tableBound.y1;
         bodyBound.y2 = tableBound.y2;
-        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
-        }
-        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
+        if (layoutMap.isLeftBottomCorner(col, row) ||
+            layoutMap.isRightTopCorner(col, row) ||
+            layoutMap.isLeftTopCorner(col, row) ||
+            layoutMap.isRightBottomCorner(col, row)) ;
         else if (layoutMap.isFrozenColumn(col, row)) {
             bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
             bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
         }
+        else if (layoutMap.isFrozenRow(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+        }
         else if (layoutMap.isRightFrozenColumn(col, row)) {
             bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
             bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
@@ -38588,6 +39706,12 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
+        else if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
         bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
         bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
         bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
@@ -38927,6 +40051,36 @@
     AfterImageRenderContribution = __decorate([
         injectable()
     ], AfterImageRenderContribution);
+    let BeforeGifImageRenderContribution = class BeforeGifImageRenderContribution {
+        time = BaseRenderContributionTime.beforeFillStroke;
+        useStyle = true;
+        order = 0;
+        drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, imageAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
+            const { isGif } = image.attribute;
+            if (isGif && image.playing) {
+                image.attribute.opacity = 0;
+            }
+        }
+    };
+    BeforeGifImageRenderContribution = __decorate([
+        injectable()
+    ], BeforeGifImageRenderContribution);
+    let AfterGifImageRenderContribution = class AfterGifImageRenderContribution {
+        time = BaseRenderContributionTime.afterFillStroke;
+        useStyle = true;
+        order = 0;
+        drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, imageAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
+            const { isGif } = image.attribute;
+            if (isGif && image.playing) {
+                image.attribute.opacity = 1;
+                context.globalAlpha = image.attribute.opacity;
+                image.renderFrame(context, x, y);
+            }
+        }
+    };
+    AfterGifImageRenderContribution = __decorate([
+        injectable()
+    ], AfterGifImageRenderContribution);
 
     function getCellHoverColor(cellGroup, table) {
         let colorKey;
@@ -39086,45 +40240,97 @@
         const fillColor = getProp(colorKey, selectStyle, cellGroup.col, cellGroup.row, table);
         return fillColor;
     }
-    function isCellSelected(state, col, row, cellGroup) {
-        const { highlightScope, disableHeader, cellPos, ranges } = state.select;
+    function isSelectMultipleRange(range) {
+        return range.start.col !== range.end.col || range.start.row !== range.end.row;
+    }
+    function getSelectModeRange(state, col, row) {
         let selectMode;
-        if (ranges?.length === 1 && ranges[0].end.col === ranges[0].start.col && ranges[0].end.row === ranges[0].start.row) {
-            const table = state.table;
-            const isHeader = table.isHeader(col, row);
-            if (isHeader && disableHeader) {
-                return undefined;
+        const { highlightScope, cellPos, ranges } = state.select;
+        const range = ranges[0];
+        const rangeColStart = Math.min(range.start.col, range.end.col);
+        const rangeColEnd = Math.max(range.start.col, range.end.col);
+        const rangeRowStart = Math.min(range.start.row, range.end.row);
+        const rangeRowEnd = Math.max(range.start.row, range.end.row);
+        if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
+            selectMode = 'cellBgColor';
+        }
+        else if (highlightScope === HighlightScope.column && col >= rangeColStart && col <= rangeColEnd) {
+            if (cellInRange(ranges[0], col, row)) {
+                selectMode = 'cellBgColor';
             }
-            if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
+            else {
+                selectMode = 'inlineColumnBgColor';
+            }
+        }
+        else if (highlightScope === HighlightScope.row && row >= rangeRowStart && row <= rangeRowEnd) {
+            if (cellInRange(ranges[0], col, row)) {
                 selectMode = 'cellBgColor';
             }
-            else if (highlightScope === HighlightScope.column && cellPos.col === col) {
-                if (cellPos.col === col && cellPos.row === row) {
-                    selectMode = 'cellBgColor';
-                }
-                else {
-                    selectMode = 'inlineColumnBgColor';
-                }
+            else {
+                selectMode = 'inlineRowBgColor';
             }
-            else if (highlightScope === HighlightScope.row && cellPos.row === row) {
-                if (cellPos.col === col && cellPos.row === row) {
-                    selectMode = 'cellBgColor';
-                }
-                else {
-                    selectMode = 'inlineRowBgColor';
-                }
+        }
+        else if (highlightScope === HighlightScope.cross) {
+            if (cellInRange(ranges[0], col, row)) {
+                selectMode = 'cellBgColor';
             }
-            else if (highlightScope === HighlightScope.cross) {
-                if (cellPos.col === col && cellPos.row === row) {
-                    selectMode = 'cellBgColor';
-                }
-                else if (cellPos.col === col) {
-                    selectMode = 'inlineColumnBgColor';
-                }
-                else if (cellPos.row === row) {
-                    selectMode = 'inlineRowBgColor';
-                }
+            else if (col >= rangeColStart && col <= rangeColEnd) {
+                selectMode = 'inlineColumnBgColor';
             }
+            else if (row >= rangeRowStart && row <= rangeRowEnd) {
+                selectMode = 'inlineRowBgColor';
+            }
+        }
+        return selectMode;
+    }
+    function getSelectMode(state, col, row) {
+        let selectMode;
+        const { highlightScope, cellPos } = state.select;
+        if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
+            selectMode = 'cellBgColor';
+        }
+        else if (highlightScope === HighlightScope.column && cellPos.col === col) {
+            if (cellPos.col === col && cellPos.row === row) {
+                selectMode = 'cellBgColor';
+            }
+            else {
+                selectMode = 'inlineColumnBgColor';
+            }
+        }
+        else if (highlightScope === HighlightScope.row && cellPos.row === row) {
+            if (cellPos.col === col && cellPos.row === row) {
+                selectMode = 'cellBgColor';
+            }
+            else {
+                selectMode = 'inlineRowBgColor';
+            }
+        }
+        else if (highlightScope === HighlightScope.cross) {
+            if (cellPos.col === col && cellPos.row === row) {
+                selectMode = 'cellBgColor';
+            }
+            else if (cellPos.col === col) {
+                selectMode = 'inlineColumnBgColor';
+            }
+            else if (cellPos.row === row) {
+                selectMode = 'inlineRowBgColor';
+            }
+        }
+        return selectMode;
+    }
+    function isCellSelected(state, col, row, cellGroup) {
+        const { highlightInRange, disableHeader, ranges } = state.select;
+        let selectMode;
+        const isSelectRange = ranges.length === 1 && isSelectMultipleRange(ranges?.[0]) && highlightInRange;
+        if (isSelectRange
+            ? ranges?.length === 1 && ranges[0].start && ranges[0].end
+            : ranges?.length === 1 && ranges[0].end.col === ranges[0].start.col && ranges[0].end.row === ranges[0].start.row) {
+            const table = state.table;
+            const isHeader = table.isHeader(col, row);
+            if (isHeader && disableHeader) {
+                return undefined;
+            }
+            selectMode = isSelectRange ? getSelectModeRange(state, col, row) : getSelectMode(state, col, row);
             if (selectMode) {
                 let cellDisable;
                 if (isHeader) {
@@ -40038,12 +41244,15 @@
             return false;
         }
         drawItem(graphic, renderService, drawContext, drawContribution, params) {
-            const { image: url } = graphic.attribute;
+            const { image: url, gif } = graphic.attribute;
+            if (gif && graphic.playing) {
+                return false;
+            }
             if (!url || !graphic.resources) {
                 return false;
             }
             const res = graphic.resources.get(url);
-            if (res.state !== 'loading') {
+            if (!res || res.state !== 'loading') {
                 return false;
             }
             if (!loadingImage) {
@@ -40198,6 +41407,10 @@
         bind(ImageRenderContribution).toService(BeforeImageRenderContribution);
         bind(AfterImageRenderContribution).toSelf().inSingletonScope();
         bind(ImageRenderContribution).toService(AfterImageRenderContribution);
+        bind(BeforeGifImageRenderContribution).toSelf().inSingletonScope();
+        bind(ImageRenderContribution).toService(BeforeGifImageRenderContribution);
+        bind(AfterGifImageRenderContribution).toSelf().inSingletonScope();
+        bind(ImageRenderContribution).toService(AfterGifImageRenderContribution);
         bind(AdjustColorGroupBeforeRenderContribution).toSelf().inSingletonScope();
         bind(GroupRenderContribution).toService(AdjustColorGroupBeforeRenderContribution);
         bind(AdjustColorGroupAfterRenderContribution).toSelf().inSingletonScope();
@@ -43949,10 +45162,7 @@
             }
         }
         updateReactComponentContainer(scene);
-        scene.deleteAllSelectBorder();
-        scene.table.stateManager.select.ranges.forEach(range => {
-            scene.updateCellSelectBorder(range);
-        });
+        scene.recreateAllSelectRangeComponents();
         scene.frozenColCount = scene.table.frozenColCount;
         scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
         scene.proxy.colStart = scene.bodyGroup.firstChild?.col ?? scene.table.frozenColCount;
@@ -44401,10 +45611,13 @@
                 cellNode.children.forEach((node) => {
                     if (node.type === 'chart') {
                         node.updateData(table.getCellValue(col, row));
-                        const newAxes = table.internalProps.layoutMap.getChartAxes(col, row);
-                        node.setAttribute('axes', newAxes);
                         const chartSpec = node.attribute.spec;
-                        chartSpec.axes = newAxes;
+                        const chartType = chartSpec.type;
+                        if (chartType !== 'gauge' && chartType !== 'rose' && chartType !== 'radar') {
+                            const newAxes = table.internalProps.layoutMap.getChartAxes(col, row);
+                            node.setAttribute('axes', newAxes);
+                            chartSpec.axes = newAxes;
+                        }
                         node.setAttribute('spec', chartSpec);
                     }
                 });
@@ -45289,6 +46502,7 @@
                 enableLayout: true,
                 beforeRender: (stage) => {
                     this.table.options.beforeRender && this.table.options.beforeRender(stage);
+                    this.table.animationManager.ticker.start();
                 },
                 afterRender: (stage) => {
                     this.table.options.afterRender && this.table.options.afterRender(stage);
@@ -45661,8 +46875,8 @@
             deleteAllSelectBorder(this);
             this.table.stateManager.select.ranges.forEach((cellRange) => {
                 updateCellSelectBorder(this, cellRange);
+                moveSelectingRangeComponentsToSelectedRangeComponents(this);
             });
-            moveSelectingRangeComponentsToSelectedRangeComponents(this);
         }
         updateColWidth(col, detaX, skipUpdateContainer, skipTableWidthMap) {
             updateColWidth(this, col, Math.round(detaX), skipTableWidthMap);
@@ -46527,7 +47741,7 @@
             this.stage.render();
             this.stage.enableDirtyBounds();
         }
-        updateRow(removeCells, addCells, updateCells = []) {
+        updateRow(removeCells, addCells, updateCells = [], recalculateColWidths = true) {
             this.table.internalProps.layoutMap.clearCellRangeMap();
             this.table.internalProps.useOneRowHeightFillAll = false;
             const addRows = deduplication$1(addCells.map(cell => cell.row)).sort((a, b) => a - b);
@@ -46538,7 +47752,7 @@
                 }, 0) <=
                 this.table.tableNoFrameHeight;
             updateRow(removeCells, addCells, updateCells, this.table);
-            this.recalculateColWidths();
+            recalculateColWidths && this.recalculateColWidths();
             if (this.table.heightMode === 'adaptive' ||
                 (this.table.autoFillHeight && (this.table.getAllRowsHeight() <= this.table.tableNoFrameHeight || isNotFillHeight))) {
                 this.table.scenegraph.recalculateRowHeights();
@@ -46625,6 +47839,15 @@
         updateDomContainer() {
             updateReactContainer(this.table);
         }
+        setLoadingHierarchyState(col, row) {
+            const cellGroup = this.getCell(col, row);
+            const iconGraphic = cellGroup.getChildByName('collapse', true);
+            if (iconGraphic) {
+                const regedIcons = get$2();
+                const loadingIcon = regedIcons[InternalIconName.loadingIconName];
+                dealWithIcon(loadingIcon, iconGraphic, col, row);
+            }
+        }
     }
 
     function checkCellInSelect(col, row, cellRanges) {
@@ -46899,11 +48122,11 @@
         return table._getLayoutCellId(col, row) === table._getLayoutCellId(range1Col, range1Row);
     }
 
-    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll, isSelectMoving = false, skipBodyMerge = false) {
+    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll, isSelectMoving = false, skipBodyMerge = false, forceSelect = false) {
         const { table, interactionState } = state;
         const { scenegraph } = table;
         const { highlightScope, disableHeader, cellPos } = state.select;
-        if ((disableHeader && table.isHeader(col, row)) || highlightScope === 'none') {
+        if (((disableHeader && table.isHeader(col, row)) || highlightScope === 'none') && forceSelect === false) {
             if (col !== -1 && row !== -1 && !isSelectMoving) {
                 table._makeVisibleCell(col, row);
             }
@@ -47458,7 +48681,7 @@
         return target;
     }
 
-    function startMoveCol(col, row, x, y, state) {
+    function startMoveCol(col, row, x, y, state, event) {
         if (!('canMoveHeaderPosition' in state.table.internalProps.layoutMap)) {
             return;
         }
@@ -47474,13 +48697,24 @@
                 state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)
                 ? state.columnMove.y
                 : 0;
-        state.table.scenegraph.component.showMoveCol(col, row, delta);
+        const { backX, lineX, backY, lineY } = state.table.scenegraph.component.showMoveCol(col, row, delta);
+        state.table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_START, {
+            col,
+            row,
+            x,
+            y,
+            backX,
+            lineX,
+            backY,
+            lineY,
+            event
+        });
         const isHasSelected = !!state.select.ranges?.length;
         state.table.stateManager.updateSelectPos(-1, -1);
         state.table.stateManager.endSelectCells(true, isHasSelected);
         state.table.scenegraph.updateNextFrame();
     }
-    function updateMoveCol(col, row, x, y, state) {
+    function updateMoveCol(col, row, x, y, state, event) {
         if (!('canMoveHeaderPosition' in state.table.internalProps.layoutMap)) {
             return;
         }
@@ -47543,6 +48777,17 @@
                 }
             }
             state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY);
+            state.table.fireListeners(TABLE_EVENT_TYPE.CHANGING_HEADER_POSITION, {
+                col,
+                row,
+                x,
+                y,
+                backX,
+                lineX,
+                backY,
+                lineY,
+                event
+            });
             state.table.scenegraph.updateNextFrame();
         }
     }
@@ -48597,11 +49842,12 @@
             }
         }
         setSelectState() {
-            const { headerSelectMode, disableSelect, disableHeaderSelect, highlightMode } = Object.assign({}, {
+            const { headerSelectMode, disableSelect, disableHeaderSelect, highlightMode, highlightInRange } = Object.assign({}, {
                 headerSelectMode: 'inline',
                 disableSelect: false,
                 disableHeaderSelect: false,
-                highlightMode: 'cell'
+                highlightMode: 'cell',
+                highlightInRange: false
             }, this.table.options.select);
             if (!disableSelect) {
                 if (highlightMode === 'cross') {
@@ -48623,6 +49869,7 @@
             this.select.singleStyle = !disableSelect;
             this.select.disableHeader = disableHeaderSelect;
             this.select.headerSelectMode = headerSelectMode;
+            this.select.highlightInRange = highlightInRange;
         }
         isSelected(col, row) {
             let seled = false;
@@ -48664,16 +49911,16 @@
                         prev.push({
                             field: item.field,
                             order: item.order,
-                            row: column.startInTotal + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount ?? 0,
-                            col: column.level
+                            row: column?.startInTotal + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount ?? 0,
+                            col: column?.level
                         });
                     }
                     else {
                         prev.push({
                             field: item.field,
                             order: item.order,
-                            col: column.startInTotal + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount ?? 0,
-                            row: column.level
+                            col: column?.startInTotal + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount ?? 0,
+                            row: column?.level
                         });
                     }
                     return prev;
@@ -48703,11 +49950,11 @@
         updateHoverPos(col, row) {
             updateHoverPosition(this, col, row);
         }
-        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false, isSelectMoving = false, skipBodyMerge = false) {
+        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false, isSelectMoving = false, skipBodyMerge = false, forceSelect = false) {
             if (row !== -1 && row !== -1) {
                 this.select.selecting = true;
             }
-            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving, skipBodyMerge);
+            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving, skipBodyMerge, forceSelect);
         }
         checkCellRangeInSelect(cellPosStart, cellPosEnd) {
             return checkMultiCellInSelect(cellPosStart, cellPosEnd, this.select.ranges, this.select.highlightScope);
@@ -48897,11 +50144,10 @@
             this.fillHandle.beforeFillMinRow = undefined;
         }
         startMoveCol(col, row, x, y, event) {
-            startMoveCol(col, row, x, y, this);
-            this.table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_START, { col, row, x, y, event });
+            startMoveCol(col, row, x, y, this, event);
         }
-        updateMoveCol(col, row, x, y) {
-            updateMoveCol(col, row, x, y, this);
+        updateMoveCol(col, row, x, y, event) {
+            updateMoveCol(col, row, x, y, this, event);
         }
         isMoveCol() {
             return this.columnMove.moving;
@@ -50127,6 +51373,18 @@
                             event: e.nativeEvent
                         });
                     }
+                    else if (!endMoveColSuccess) {
+                        if (table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL)) {
+                            table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL, {
+                                target: { col: table.stateManager.columnMove.colTarget, row: table.stateManager.columnMove.rowTarget },
+                                source: {
+                                    col: table.stateManager.columnMove.colSource,
+                                    row: table.stateManager.columnMove.rowSource
+                                },
+                                event: e
+                            });
+                        }
+                    }
                 }
                 else if (stateManager.isSelecting()) {
                     table.stateManager.endSelectCells();
@@ -51192,6 +52450,18 @@
                         });
                     }
                 }
+                else if (!endMoveColSuccess) {
+                    if (table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL)) {
+                        table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL, {
+                            target: { col: table.stateManager.columnMove.colTarget, row: table.stateManager.columnMove.rowTarget },
+                            source: {
+                                col: table.stateManager.columnMove.colSource,
+                                row: table.stateManager.columnMove.rowSource
+                            },
+                            event: e
+                        });
+                    }
+                }
             }
             else if (stateManager.isSelecting()) {
                 if (table.stateManager.select?.ranges?.length) {
@@ -51941,7 +53211,7 @@
         dealColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
             if (isValid$1(eventArgs.col) && isValid$1(eventArgs.row)) {
-                this.table.stateManager.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                this.table.stateManager.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs?.event?.nativeEvent);
             }
         }
         startColumnResize(eventArgsSet) {
@@ -52174,7 +53444,8 @@
         'hover',
         'cursor',
         'shape',
-        'interactive'
+        'interactive',
+        'isGif'
     ];
     const iconPropKeys = ICON_PROP_KEYS;
 
@@ -54042,19 +55313,24 @@
         }
         getCustomCellStyleId(col, row) {
             let customStyleId;
-            this.customCellStyleArrangement.forEach(style => {
-                if (style.cellPosition.range) {
-                    if (style.cellPosition.range.start.col <= col &&
-                        style.cellPosition.range.end.col >= col &&
-                        style.cellPosition.range.start.row <= row &&
-                        style.cellPosition.range.end.row >= row) {
-                        customStyleId = style.customStyleId;
-                    }
-                }
-                else if (style.cellPosition.col === col && style.cellPosition.row === row) {
-                    customStyleId = style.customStyleId;
+            const range = this.table.getCellRange(col, row);
+            for (let c = range.start.col; c <= range.end.col; c++) {
+                for (let r = range.start.row; r <= range.end.row; r++) {
+                    this.customCellStyleArrangement.forEach(style => {
+                        if (style.cellPosition.range) {
+                            if (style.cellPosition.range.start.col <= c &&
+                                style.cellPosition.range.end.col >= c &&
+                                style.cellPosition.range.start.row <= r &&
+                                style.cellPosition.range.end.row >= r) {
+                                customStyleId = style.customStyleId;
+                            }
+                        }
+                        else if (style.cellPosition.col === c && style.cellPosition.row === r) {
+                            customStyleId = style.customStyleId;
+                        }
+                    });
                 }
-            });
+            }
             return customStyleId;
         }
         getCustomCellStyleOption(customStyleId) {
@@ -54101,7 +55377,10 @@
                 }
                 return style.cellPosition.col === cellPos.col && style.cellPosition.row === cellPos.row;
             });
-            if (index === -1) {
+            if (index === -1 && !customStyleId) {
+                return;
+            }
+            else if (index === -1 && customStyleId) {
                 this.customCellStyleArrangement.push({
                     cellPosition: {
                         col: cellPos.col,
@@ -54114,13 +55393,21 @@
             else if (this.customCellStyleArrangement[index].customStyleId === customStyleId) {
                 return;
             }
-            else {
+            else if (customStyleId) {
                 this.customCellStyleArrangement[index].customStyleId = customStyleId;
             }
+            else {
+                this.customCellStyleArrangement.splice(index, 1);
+            }
             if (cellPos.range) {
                 for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) {
                     for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {
-                        this.table.scenegraph.updateCellContent(col, row);
+                        const range = this.table.getCellRange(col, row);
+                        for (let c = range.start.col; c <= range.end.col; c++) {
+                            for (let r = range.start.row; r <= range.end.row; r++) {
+                                this.table.scenegraph.updateCellContent(c, r);
+                            }
+                        }
                     }
                 }
             }
@@ -56096,7 +57383,10 @@
         constructor(table) {
             this.table = table;
             this.timeline = new DefaultTimeline();
-            this.ticker = new DefaultTicker([this.timeline]);
+            this.ticker = new DefaultTicker();
+            this.ticker.addTimeline(this.timeline);
+            const TICKER_FPS = 60;
+            this.ticker.setFPS(TICKER_FPS);
             this.tempGraphic = createRect({});
         }
         scrollTo(position, animationOption) {
@@ -56157,7 +57447,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.10.5-alpha.0";
+        version = "1.10.6-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57394,6 +58684,9 @@
         }
         release() {
             const internalProps = this.internalProps;
+            if (this.isReleased) {
+                return;
+            }
             internalProps.tooltipHandler?.release?.();
             internalProps.menuHandler?.release?.();
             IconCache.clearAll();
@@ -57676,9 +58969,9 @@
         clearSelected() {
             this.stateManager.updateSelectPos(-1, -1);
         }
-        selectCell(col, row, isShift, isCtrl, makeSelectCellVisible = true) {
+        selectCell(col, row, isShift, isCtrl, makeSelectCellVisible = true, skipBodyMerge = false, forceSelect = false) {
             const isHasSelected = !!this.stateManager.select.ranges?.length;
-            this.stateManager.updateSelectPos(col, row, isShift, isCtrl, false, !makeSelectCellVisible);
+            this.stateManager.updateSelectPos(col, row, isShift, isCtrl, false, !makeSelectCellVisible, skipBodyMerge, forceSelect);
             this.stateManager.endSelectCells(true, isHasSelected);
         }
         selectCells(cellRanges) {
@@ -60513,14 +61806,20 @@
             }
             return false;
         }
+        isLeftTopCorner(col, row) {
+            if (col >= 0 && col < this.frozenColCount && row >= 0 && row < this.frozenRowCount) {
+                return true;
+            }
+            return false;
+        }
         isLeftBottomCorner(col, row) {
-            if (col >= 0 && col < this.rowHeaderLevelCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+            if (col >= 0 && col < this.frozenColCount && row >= this.rowCount - this.bottomFrozenRowCount) {
                 return true;
             }
             return false;
         }
         isRightTopCorner(col, row) {
-            if (col >= this.colCount - this.rightFrozenColCount && row >= 0 && row < this.columnHeaderLevelCount) {
+            if (col >= this.colCount - this.rightFrozenColCount && row >= 0 && row < this.frozenRowCount) {
                 return true;
             }
             return false;
@@ -62554,11 +63853,11 @@
             const index = this.getRecordShowIndexByCell(col, row);
             return this.dataSource.getHierarchyState(index);
         }
-        toggleHierarchyState(col, row) {
+        toggleHierarchyState(col, row, recalculateColWidths = true) {
             this.stateManager.updateHoverIcon(col, row, undefined, undefined);
             const hierarchyState = this.getHierarchyState(col, row);
             if (hierarchyState === HierarchyState.expand) {
-                this._refreshHierarchyState(col, row);
+                this._refreshHierarchyState(col, row, recalculateColWidths);
                 this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
                     col: col,
                     row: row,
@@ -62568,7 +63867,7 @@
             else if (hierarchyState === HierarchyState.collapse) {
                 const record = this.getCellOriginRecord(col, row);
                 if (Array.isArray(record.children)) {
-                    this._refreshHierarchyState(col, row);
+                    this._refreshHierarchyState(col, row, recalculateColWidths);
                 }
                 this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
                     col: col,
@@ -62578,7 +63877,10 @@
                 });
             }
         }
-        _refreshHierarchyState(col, row) {
+        setLoadingHierarchyState(col, row) {
+            this.scenegraph.setLoadingHierarchyState(col, row);
+        }
+        _refreshHierarchyState(col, row, recalculateColWidths = true) {
             let notFillWidth = false;
             let notFillHeight = false;
             const checkHasChart = this.internalProps.layoutMap.checkHasChart();
@@ -62616,7 +63918,7 @@
                 diffPositions.removeCellPositions = [];
                 this.scenegraph.proxy.refreshRowCount();
             }
-            this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions, updateCells);
+            this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions, updateCells, recalculateColWidths);
             if (checkHasChart) {
                 if (this.autoFillWidth && !notFillWidth) {
                     notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
@@ -62773,8 +64075,10 @@
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.scenegraph.clearCells();
             if (sort !== undefined) {
-                this.internalProps.sortState = this.internalProps.multipleSort ? (Array.isArray(sort) ? sort : [sort]) : sort;
-                this.stateManager.setSortState(this.sortState);
+                if (sort === null || (!Array.isArray(sort) && isValid$1(sort.field)) || Array.isArray(sort)) {
+                    this.internalProps.sortState = this.internalProps.multipleSort ? (Array.isArray(sort) ? sort : [sort]) : sort;
+                    this.stateManager.setSortState(this.sortState);
+                }
             }
             if (records) {
                 _setRecords(this, records);
@@ -62825,12 +64129,12 @@
                 }, 0);
             }
         }
-        setRecordChildren(records, col, row) {
+        setRecordChildren(records, col, row, recalculateColWidths = true) {
             const record = this.getCellOriginRecord(col, row);
             record.children = records;
             const index = this.getRecordShowIndexByCell(col, row);
             this.dataSource.setRecord(record, index);
-            this._refreshHierarchyState(col, row);
+            this._refreshHierarchyState(col, row, recalculateColWidths);
         }
         startEditCell(col, row, value) {
             if (isValid$1(col) && isValid$1(row)) {
@@ -68661,14 +69965,20 @@
             }
             return false;
         }
+        isLeftTopCorner(col, row) {
+            if (col >= 0 && col < this.frozenColCount && row >= 0 && row < this.frozenRowCount) {
+                return true;
+            }
+            return false;
+        }
         isLeftBottomCorner(col, row) {
-            if (col >= 0 && col < this.rowHeaderLevelCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+            if (col >= 0 && col < this.frozenColCount && row >= this.rowCount - this.bottomFrozenRowCount) {
                 return true;
             }
             return false;
         }
         isRightTopCorner(col, row) {
-            if (col >= this.colCount - this.rightFrozenColCount && row >= 0 && row < this.columnHeaderLevelCount) {
+            if (col >= this.colCount - this.rightFrozenColCount && row >= 0 && row < this.frozenRowCount) {
                 return true;
             }
             return false;
@@ -73354,10 +74664,10 @@
             }
             return null;
         }
-        toggleHierarchyState(col, row) {
+        toggleHierarchyState(col, row, recalculateColWidths = true) {
             const hierarchyState = this.getHierarchyState(col, row);
             if (hierarchyState === HierarchyState.expand) {
-                this._refreshHierarchyState(col, row);
+                this._refreshHierarchyState(col, row, recalculateColWidths);
                 this.fireListeners(PIVOT_TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
                     col: col,
                     row: row,
@@ -73367,7 +74677,7 @@
             else if (hierarchyState === HierarchyState.collapse) {
                 const headerTreeNode = this.internalProps.layoutMap.getHeadNode(col, row);
                 if (Array.isArray(headerTreeNode.children)) {
-                    this._refreshHierarchyState(col, row);
+                    this._refreshHierarchyState(col, row, recalculateColWidths);
                 }
                 this.fireListeners(PIVOT_TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
                     col: col,
@@ -73377,7 +74687,7 @@
                 });
             }
         }
-        _refreshHierarchyState(col, row, beforeUpdateCell) {
+        _refreshHierarchyState(col, row, recalculateColWidths = true, beforeUpdateCell) {
             let notFillWidth = false;
             let notFillHeight = false;
             this.stateManager.updateHoverIcon(col, row, undefined, undefined);
@@ -73395,7 +74705,7 @@
             this.refreshRowColCount();
             this.clearCellStyleCache();
             this.scenegraph.updateHierarchyIcon(col, row);
-            this.scenegraph.updateRow(result.removeCellPositions, result.addCellPositions, result.updateCellPositions);
+            this.scenegraph.updateRow(result.removeCellPositions, result.addCellPositions, result.updateCellPositions, recalculateColWidths);
             if (checkHasChart) {
                 if (this.autoFillWidth && !notFillWidth) {
                     notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
@@ -73831,7 +75141,7 @@
             if (this.flatDataToObjects) {
                 const headerTreeNode = this.internalProps.layoutMap.getHeadNode(col, row);
                 headerTreeNode.children = children;
-                this._refreshHierarchyState(col, row, () => {
+                this._refreshHierarchyState(col, row, true, () => {
                     this.flatDataToObjects.changeDataConfig({
                         rows: this.internalProps.layoutMap.fullRowDimensionKeys,
                         columns: this.internalProps.layoutMap.colDimensionKeys,
@@ -73845,7 +75155,7 @@
             else {
                 const headerTreeNode = this.internalProps.layoutMap.getHeadNode(col, row);
                 headerTreeNode.children = children;
-                this._refreshHierarchyState(col, row, () => {
+                this._refreshHierarchyState(col, row, true, () => {
                     this.dataset._rowTreeHasChanged();
                     this.dataset.changeDataConfig({
                         rows: this.internalProps.layoutMap.fullRowDimensionKeys,
@@ -74454,7 +75764,7 @@
             }
             return null;
         }
-        toggleHierarchyState(col, row) {
+        toggleHierarchyState(col, row, recalculateColWidths = true) {
         }
         getHeaderCellAddressByPath(dimensionPaths) {
             const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensionPaths);
@@ -74690,6 +76000,12 @@
                     delete spec.area.state.selected;
                     delete spec.area.state.selected_reverse;
                 }
+                if (spec.pie?.state?.selected) {
+                    spec.pie.state.vtable_selected = spec.pie.state.selected;
+                    spec.pie.state.vtable_selected_reverse = spec.pie.state.selected_reverse;
+                    delete spec.pie.state.selected;
+                    delete spec.pie.state.selected_reverse;
+                }
             };
             this.internalProps.indicators?.forEach((indicator) => {
                 if (indicator.chartSpec) {
@@ -75512,8 +76828,237 @@
         return new Radio(params ? params.attribute : {});
     }
 
+    class CarouselAnimationPlugin {
+        table;
+        rowCount;
+        colCount;
+        animationDuration;
+        animationDelay;
+        animationEasing;
+        replaceScrollAction;
+        playing;
+        row;
+        col;
+        constructor(table, options) {
+            this.table = table;
+            this.rowCount = options?.rowCount ?? undefined;
+            this.colCount = options?.colCount ?? undefined;
+            this.animationDuration = options?.animationDuration ?? 500;
+            this.animationDelay = options?.animationDelay ?? 1000;
+            this.animationEasing = options?.animationEasing ?? 'linear';
+            this.replaceScrollAction = options?.replaceScrollAction ?? false;
+            this.playing = false;
+            this.row = table.frozenRowCount;
+            this.col = table.frozenColCount;
+            this.init();
+        }
+        init() {
+            if (this.replaceScrollAction) {
+                this.table.disableScroll();
+                this.table.scenegraph.stage.addEventListener('wheel', this.onScrollEnd.bind(this));
+            }
+        }
+        onScrollEnd(e) {
+            if (this.rowCount) {
+                if (e.deltaY > 0) {
+                    this.row += this.rowCount;
+                    this.row = Math.min(this.row, this.table.rowCount - this.table.frozenRowCount);
+                }
+                else if (e.deltaY < 0) {
+                    this.row -= this.rowCount;
+                    this.row = Math.max(this.row, this.table.frozenRowCount);
+                }
+                this.table.scrollToRow(this.row, { duration: this.animationDuration, easing: this.animationEasing });
+            }
+            else if (this.colCount) {
+                if (e.deltaX > 0) {
+                    this.col += this.colCount;
+                    this.col = Math.min(this.col, this.table.colCount - this.table.frozenColCount);
+                }
+                else if (e.deltaX < 0) {
+                    this.col -= this.colCount;
+                    this.col = Math.max(this.col, this.table.frozenColCount);
+                }
+                this.table.scrollToCol(this.col, { duration: this.animationDuration, easing: this.animationEasing });
+            }
+        }
+        play() {
+            this.playing = true;
+            if (this.rowCount) {
+                this.updateRow();
+            }
+            else if (this.colCount) {
+                this.updateCol();
+            }
+        }
+        pause() {
+            this.playing = false;
+        }
+        updateRow() {
+            if (!this.playing) {
+                return;
+            }
+            if (this.table.scenegraph.proxy.screenTopRow !== this.row) {
+                this.row = this.table.frozenRowCount;
+            }
+            else {
+                this.row += this.rowCount;
+            }
+            this.table.scrollToRow(this.row, { duration: this.animationDuration, easing: this.animationEasing });
+            setTimeout(() => {
+                this.updateRow();
+            }, this.animationDuration + this.animationDelay);
+        }
+        updateCol() {
+            if (!this.playing) {
+                return;
+            }
+            if (this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+                this.col = this.table.frozenColCount;
+            }
+            else {
+                this.col += this.colCount;
+            }
+            this.table.scrollToCol(this.col, { duration: this.animationDuration, easing: this.animationEasing });
+            setTimeout(() => {
+                this.updateCol();
+            }, this.animationDuration + 50);
+        }
+    }
+
+    class HeaderHighlightPlugin {
+        table;
+        options;
+        colHeaderRange;
+        rowHeaderRange;
+        constructor(table, options) {
+            this.table = table;
+            this.options = options;
+            this.registerStyle();
+            this.bindEvent();
+        }
+        registerStyle() {
+            this.table.registerCustomCellStyle('col-highlight', {
+                bgColor: this.options?.colHighlightBGColor ?? '#82b2f5',
+                color: this.options?.colHighlightColor ?? '#FFF'
+            });
+            this.table.registerCustomCellStyle('row-highlight', {
+                bgColor: this.options?.rowHighlightBGColor ?? '#82b2f5',
+                color: this.options?.rowHighlightColor ?? '#FFF'
+            });
+        }
+        bindEvent() {
+            this.table.on('selected_cell', e => {
+                this.updateHighlight();
+            });
+            this.table.on('selected_clear', () => {
+                this.clearHighlight();
+            });
+        }
+        clearHighlight() {
+            this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);
+            this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);
+            this.colHeaderRange = undefined;
+            this.rowHeaderRange = undefined;
+        }
+        updateHighlight() {
+            if (this.options?.colHighlight === false && this.options?.rowHighlight === false) {
+                return;
+            }
+            const selectRanges = this.table.getSelectedCellRanges();
+            if (selectRanges.length === 0) {
+                this.clearHighlight();
+                return;
+            }
+            const selectRange = selectRanges[0];
+            const rowSelectRange = [selectRange.start.row, selectRange.end.row];
+            rowSelectRange.sort((a, b) => a - b);
+            const colSelectRange = [selectRange.start.col, selectRange.end.col];
+            colSelectRange.sort((a, b) => a - b);
+            let colHeaderRange;
+            let rowHeaderRange;
+            if (this.table.isPivotTable()) {
+                colHeaderRange = {
+                    start: {
+                        col: colSelectRange[0],
+                        row: 0
+                    },
+                    end: {
+                        col: colSelectRange[1],
+                        row: this.table.columnHeaderLevelCount - 1
+                    }
+                };
+                rowHeaderRange = {
+                    start: {
+                        col: 0,
+                        row: rowSelectRange[0]
+                    },
+                    end: {
+                        col: this.table.rowHeaderLevelCount - 1,
+                        row: rowSelectRange[1]
+                    }
+                };
+            }
+            else if (this.table.internalProps.transpose) {
+                rowHeaderRange = {
+                    start: {
+                        col: 0,
+                        row: rowSelectRange[0]
+                    },
+                    end: {
+                        col: this.table.rowHeaderLevelCount - 1,
+                        row: rowSelectRange[1]
+                    }
+                };
+            }
+            else {
+                colHeaderRange = {
+                    start: {
+                        col: colSelectRange[0],
+                        row: 0
+                    },
+                    end: {
+                        col: colSelectRange[1],
+                        row: this.table.columnHeaderLevelCount - 1
+                    }
+                };
+                if (this.table.internalProps.rowSeriesNumber) {
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: 0,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+            }
+            if (this.options?.colHighlight !== false && !isSameRange(this.colHeaderRange, colHeaderRange)) {
+                this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);
+                colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
+                this.colHeaderRange = colHeaderRange;
+            }
+            if (this.options?.rowHighlight !== false && !isSameRange(this.rowHeaderRange, rowHeaderRange)) {
+                this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);
+                rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
+                this.rowHeaderRange = rowHeaderRange;
+            }
+        }
+    }
+    function isSameRange(a, b) {
+        if (a === undefined && b === undefined) {
+            return true;
+        }
+        if (a === undefined || b === undefined) {
+            return false;
+        }
+        return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
+    }
+
     registerForVrender();
-    const version = "1.10.5-alpha.0";
+    const version = "1.10.6-alpha.0";
     function getIcons() {
         return get$2();
     }
@@ -75521,8 +77066,11 @@
         clearAll();
     }
 
+    exports.CarouselAnimationPlugin = CarouselAnimationPlugin;
     exports.CustomLayout = index;
     exports.DataStatistics = DataStatistics;
+    exports.HeaderHighlightPlugin = HeaderHighlightPlugin;
+    exports.InvertHighlightPlugin = InvertHighlightPlugin;
     exports.ListTable = ListTableAll;
     exports.ListTableSimple = ListTableSimple;
     exports.PIVOT_CHART_EVENT_TYPE = PIVOT_CHART_EVENT_TYPE;
@@ -75555,6 +77103,7 @@
     exports.getTargetCell = getTargetCell;
     exports.graphicUtil = graphicUtil;
     exports.jsx = jsx;
+    exports.onBeforeAttributeUpdateForInvertHighlight = onBeforeAttributeUpdateForInvertHighlight;
     exports.register = register$1;
     exports.registerAxis = registerAxis;
     exports.registerChartCell = registerChartCell;