k-react-vtable 1.0.17 → 1.0.18

package/dist/react-vtable.js

@@ -588,7 +588,15 @@
     const VGlobal = Symbol.for("VGlobal");
     const DEFAULT_TEXT_FONT_FAMILY$2 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
-    class Application {}
+    const container = new Container$1();
+
+    const RenderService = Symbol.for("RenderService");
+
+    class Application {
+      get renderService() {
+        return this._renderService || (this._renderService = container.get(RenderService)), this._renderService;
+      }
+    }
     const application = new Application();
 
     let idx = 0;
@@ -667,7 +675,7 @@
           decorator(target, key, paramIndex);
         };
       },
-      __awaiter$c = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      __awaiter$d = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
         return new (P || (P = Promise))(function (resolve, reject) {
           function fulfilled(value) {
             try {
@@ -833,7 +841,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
       }
       loadFont(name, source, descriptors) {
-        return __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$d(this, void 0, void 0, function* () {
           return this._env || this.setEnv("browser"), this.envContribution.loadFont(name, source, descriptors);
         });
       }
@@ -4697,7 +4705,8 @@
       y1: 0,
       strokeBoundsBuffer: 0,
       cornerRadius: 0,
-      cornerType: "round"
+      cornerType: "round",
+      drawStrokeWhenZeroWH: !1
     });
     Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
@@ -4706,7 +4715,8 @@
       y1: 0,
       cornerRadius: 0,
       length: 0,
-      cornerType: "round"
+      cornerType: "round",
+      drawStrokeWhenZeroWH: !1
     });
     const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       symbolType: "circle",
@@ -4933,6 +4943,34 @@
         }
         return c;
       }
+      static processColorStops(colorStops) {
+        if (!colorStops || 0 === colorStops.length) return [];
+        if (colorStops.some(item => item.length)) {
+          const stops = colorStops.map(item => ({
+            color: item.value,
+            offset: item.length ? parseFloat(item.length.value) / 100 : -1
+          }));
+          stops[0].offset < 0 && (stops[0].offset = 0), stops[stops.length - 1].offset < 0 && (stops[stops.length - 1].offset = 1);
+          for (let i = 1; i < stops.length - 1; i++) if (stops[i].offset < 0) {
+            const prevWithOffsetIdx = i - 1;
+            let nextWithOffsetIdx = i + 1;
+            for (; nextWithOffsetIdx < stops.length && stops[nextWithOffsetIdx].offset < 0;) nextWithOffsetIdx++;
+            const startOffset = stops[prevWithOffsetIdx].offset,
+              endOffset = stops[nextWithOffsetIdx].offset,
+              unspecCount = nextWithOffsetIdx - prevWithOffsetIdx;
+            for (let j = 1; j < unspecCount; j++) stops[prevWithOffsetIdx + j].offset = startOffset + (endOffset - startOffset) * j / unspecCount;
+            i = nextWithOffsetIdx - 1;
+          }
+          return stops;
+        }
+        return colorStops.map((item, index) => {
+          const offset = colorStops.length > 1 ? index / (colorStops.length - 1) : 0;
+          return {
+            color: item.value,
+            offset: offset
+          };
+        });
+      }
       static ParseConic(datum) {
         const {
             orientation: orientation,
@@ -4946,10 +4984,7 @@
           y: .5,
           startAngle: sa,
           endAngle: sa + pi2,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
+          stops: GradientParser.processColorStops(colorStops)
         };
       }
       static ParseRadial(datum) {
@@ -4964,10 +4999,7 @@
           y1: .5,
           r0: 0,
           r1: 1,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
+          stops: GradientParser.processColorStops(colorStops)
         };
       }
       static ParseLinear(datum) {
@@ -4989,10 +5021,7 @@
           y0: y0,
           x1: x1,
           y1: y1,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
+          stops: GradientParser.processColorStops(colorStops)
         };
       }
     }
@@ -5188,6 +5217,9 @@
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     let ATextMeasure = class {
+      constructor() {
+        this.id = "ATextMeasure";
+      }
       configure(service, env) {
         this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
       }
@@ -5580,11 +5612,13 @@
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     const TextMeasureContribution = Symbol.for("TextMeasureContribution");
-    let DefaultTextMeasureContribution = class extends ATextMeasure {};
+    let DefaultTextMeasureContribution = class extends ATextMeasure {
+      constructor() {
+        super(...arguments), this.id = "DefaultTextMeasureContribution";
+      }
+    };
     DefaultTextMeasureContribution = __decorate$15([injectable()], DefaultTextMeasureContribution);
 
-    const container = new Container$1();
-
     const CanvasFactory = Symbol.for("CanvasFactory");
     const Context2dFactory = Symbol.for("Context2dFactory");
 
@@ -6161,13 +6195,17 @@
         return this.tryInitCanvas(), this._context;
       }
       constructor(contributions) {
-        this.contributions = contributions, this.configured = !1, this.global = application.global, this.global.hooks.onSetEnv.tap("graphic-util", (lastEnv, env, global) => {
+        this.contributions = contributions, this.configured = !1, this.global = application.global, this._textMeasureMap = new Map(), this.global.hooks.onSetEnv.tap("graphic-util", (lastEnv, env, global) => {
           this.configured = !1, this.configure(global, env);
         });
       }
       get textMeasure() {
         return this._textMeasure || this.configure(this.global, this.global.env), this._textMeasure;
       }
+      getTextMeasureInstance(textMeasureId) {
+        if (!textMeasureId) return this.textMeasure;
+        return this._textMeasureMap.get(textMeasureId) || this.textMeasure;
+      }
       configure(global, env) {
         this.configured || (this.contributions.getContributions().forEach(contribution => {
           contribution.configure(this, env);
@@ -6180,7 +6218,7 @@
         }
       }
       bindTextMeasure(tm) {
-        this._textMeasure = tm;
+        this._textMeasure && "DefaultTextMeasureContribution" !== tm.id || (this._textMeasure = tm), this._textMeasureMap.has(tm.id) || this._textMeasureMap.set(tm.id, tm);
       }
       measureText(text, tc, method = "native") {
         var _a;
@@ -6414,7 +6452,7 @@
       return null;
     }
 
-    var __awaiter$b = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$c = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -6482,7 +6520,7 @@
         }
       }
       forEachChildrenAsync(cb, reverse = !1) {
-        return __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
           if (reverse) {
             let child = this._lastChild,
               i = 0;
@@ -9360,7 +9398,7 @@
         });
       }
       setAttributes(params, forceUpdateTag = !1, context) {
-        (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+        params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
       }
       _setAttributes(params, forceUpdateTag = !1, context) {
         const keys = Object.keys(params);
@@ -10185,8 +10223,8 @@
     function strokeVisible(opacity, strokeOpacity) {
       return opacity * strokeOpacity > 0;
     }
-    function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-      return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
+    function rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH) {
+      return drawStrokeWhenZeroWH ? opacity * strokeOpacity > 0 : opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
     }
     function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
       const x10 = x1 - x0,
@@ -10787,7 +10825,7 @@
           this.cache.layoutData.lines.forEach(item => {
             mergedText += item.str;
           });
-          return (Array.isArray(text) ? text.join("") : text) !== mergedText;
+          return (Array.isArray(text) ? text.join("") : text).toString() !== mergedText;
         }
         return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
       }
@@ -10886,7 +10924,7 @@
         return fontSize ? .1 * fontSize : 0;
       }
       updateHorizontalMultilineAABBBounds(text) {
-        var _a;
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
           attribute = this.attribute,
           {
@@ -10913,7 +10951,7 @@
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
-        const textMeasure = application.graphicUtil.textMeasure,
+        const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || (null === (_b = this.stage) || void 0 === _b ? void 0 : _b.textMeasureId)),
           layoutData = new CanvasTextLayout(fontFamily, {
             fontSize: fontSize,
             fontWeight: fontWeight,
@@ -10931,7 +10969,7 @@
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
       updateWrapAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const textTheme = this.getGraphicTheme(),
           {
             fontFamily = textTheme.fontFamily,
@@ -10957,7 +10995,7 @@
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
-        const textMeasure = application.graphicUtil.textMeasure,
+        const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || (null === (_b = this.stage) || void 0 === _b ? void 0 : _b.textMeasureId)),
           textOptions = {
             fontSize: fontSize,
             fontWeight: fontWeight,
@@ -10989,7 +11027,7 @@
             if ("" !== str && "" === clip.str || clip.wordBreaked) {
               if (ellipsis) {
                 const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -11052,9 +11090,9 @@
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
       updateVerticalMultilineAABBBounds(text) {
-        var _a, _b;
+        var _a, _b, _c;
         const textTheme = this.getGraphicTheme(),
-          textMeasure = application.graphicUtil.textMeasure;
+          textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.textMeasureId));
         let width;
         const attribute = this.attribute,
           {
@@ -11075,7 +11113,7 @@
         } = attribute;
         if (!verticalMode) {
           const t = textAlign;
-          textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
+          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
         }
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(item => {
@@ -11189,7 +11227,7 @@
         return isArray$b(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
       }
       updateMultilineAABBBounds(text) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const textTheme = this.getGraphicTheme(),
           {
             fontFamily = textTheme.fontFamily,
@@ -11213,7 +11251,7 @@
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
-        const textMeasure = application.graphicUtil.textMeasure,
+        const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || (null === (_c = this.stage) || void 0 === _c ? void 0 : _c.textMeasureId)),
           layoutObj = new CanvasTextLayout(fontFamily, {
             fontSize: fontSize,
             fontWeight: fontWeight,
@@ -11242,7 +11280,7 @@
             if ("" !== str && "" === clip.str) {
               if (ellipsis) {
                 const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+                clip.str = null !== (_d = clipEllipsis.str) && void 0 !== _d ? _d : "", clip.width = null !== (_e = clipEllipsis.width) && void 0 !== _e ? _e : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -12346,7 +12384,7 @@
           case "right":
             deltaX = -aabbBounds.width();
         }
-        return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
+        return height || ("middle" === this.verticalDirection ? deltaY -= aabbBounds.height() / 2 : "bottom" === this.verticalDirection && (deltaY -= aabbBounds.height())), aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -14013,7 +14051,7 @@
         doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
       }
       _runStroke(arc, context, x, y, arcAttribute, doStroke, isFullStroke, sVisible, strokeCb) {
-        doStroke && isFullStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+        doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
       }
       draw(arc, renderService, drawContext, params) {
         const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc;
@@ -14745,7 +14783,8 @@
           y1: y1,
           x: originX = rectAttribute.x,
           y: originY = rectAttribute.y,
-          fillStrokeOrder = rectAttribute.fillStrokeOrder
+          fillStrokeOrder = rectAttribute.fillStrokeOrder,
+          drawStrokeWhenZeroWH = rectAttribute.drawStrokeWhenZeroWH
         } = rect.attribute;
         let {
           width: width,
@@ -14753,7 +14792,7 @@
         } = rect.attribute;
         width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
         const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
           doFill = runFill(fill, background),
           doStroke = runStroke(stroke, lineWidth);
         if (!rect.valid || !visible) return;
@@ -15671,7 +15710,6 @@
           decorator(target, key, paramIndex);
         };
       };
-    const RenderService = Symbol.for("RenderService");
     let DefaultRenderService = class {
       constructor(drawContribution) {
         this.drawContribution = drawContribution;
@@ -15973,7 +16011,7 @@
       container.load(envModules), container.load(textMeasureModules), container.load(layerHandlerModules);
     }
 
-    var __awaiter$a = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$b = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -16043,7 +16081,7 @@
       } else graphic.forEachChildren(cb, reverse);
     }
     function foreachAsync(graphic, defaultZIndex, cb, reverse = !1) {
-      return __awaiter$a(this, void 0, void 0, function* () {
+      return __awaiter$b(this, void 0, void 0, function* () {
         yield graphic.forEachChildrenAsync(cb, reverse);
       });
     }
@@ -16413,7 +16451,7 @@
           decorator(target, key, paramIndex);
         };
       },
-      __awaiter$9 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      __awaiter$a = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
         return new (P || (P = Promise))(function (resolve, reject) {
           function fulfilled(value) {
             try {
@@ -16448,7 +16486,7 @@
         }, this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
       }
       draw(renderService, drawContext) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           if (this.checkingForDrawPromise) return;
           this.lastRenderService = renderService, this.lastDrawContext = drawContext, this.checkingForDrawPromise = this.checkForDraw(drawContext);
           const skipDraw = yield this.checkingForDrawPromise;
@@ -16469,15 +16507,15 @@
         });
       }
       _increaseRender(group, drawContext) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           this.rendering = !0, yield this._renderIncrementalGroup(group, drawContext);
         });
       }
       _renderIncrementalGroup(group, drawContext) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           this.count = group.count, yield new Promise(resolve => {
             this.renderItem(group, drawContext, {
-              drawingCb: () => __awaiter$9(this, void 0, void 0, function* () {
+              drawingCb: () => __awaiter$a(this, void 0, void 0, function* () {
                 if (2 !== group.count) yield foreachAsync(group, DefaultAttribute.zIndex, (item, i) => {
                   if (this.status === STATUS.STOP) return !0;
                   if (item.isContainer) return !1;
@@ -16498,7 +16536,7 @@
         });
       }
       waitToNextFrame() {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           return new Promise(resolve => {
             this.global.getRequestAnimationFrame()(() => {
               resolve(!1);
@@ -16507,13 +16545,13 @@
         });
       }
       checkForDraw(drawContext) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           let skip = this.rendering;
           return drawContext.restartIncremental && (skip = !1, yield this.forceStop(), this.resetToInit()), skip;
         });
       }
       forceStop() {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           this.rendering && (this.status = STATUS.STOP, yield new Promise(resolve => {
             this.hooks.completeDraw.tap("stopCb", () => {
               this.status = STATUS.NORMAL, this.hooks.completeDraw.taps = this.hooks.completeDraw.taps.filter(item => "stopCb" !== item.name), resolve(!1);
@@ -16525,11 +16563,11 @@
         this.currFrameStartAt = 0, this.currentIdx = 0;
       }
       renderGroup(group, drawContext) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
           if (!drawContext.break && !1 !== group.attribute.visibleAll) return group.incremental && drawContext.startAtId === group._uid ? (yield this._increaseRender(group, drawContext), void (drawContext.break = !0)) : void (yield new Promise(resolve => {
             this.renderItem(group, drawContext, {
-              drawingCb: () => __awaiter$9(this, void 0, void 0, function* () {
-                yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$9(this, void 0, void 0, function* () {
+              drawingCb: () => __awaiter$a(this, void 0, void 0, function* () {
+                yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$a(this, void 0, void 0, function* () {
                   drawContext.break || item.isContainer && (yield this.renderGroup(item, drawContext));
                 })), resolve(!1);
               })
@@ -16560,8 +16598,6 @@
     application.transformUtil = transformUtil;
     const graphicService = container.get(GraphicService);
     application.graphicService = graphicService;
-    const renderService = container.get(RenderService);
-    application.renderService = renderService;
     const layerService = container.get(LayerService);
     application.layerService = layerService;
 
@@ -16814,13 +16850,13 @@
             this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
           } else this._skipRender = 1;
         }, this.beforeRender = stage => {
-          this._beforeRender && this._beforeRender(stage);
+          this._beforeRenderList.forEach(cb => cb(stage));
         }, this.afterClearScreen = drawParams => {
           this._afterClearScreen && this._afterClearScreen(drawParams);
         }, this.afterClearRect = drawParams => {
           this._afterClearRect && this._afterClearRect(drawParams);
         }, this.afterRender = stage => {
-          this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
+          this.renderCount++, this._afterRenderList.forEach(cb => cb(stage)), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
           this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
@@ -16828,7 +16864,7 @@
           afterRender: new SyncHook(["stage"]),
           afterClearScreen: new SyncHook(["stage"]),
           afterClearRect: new SyncHook(["stage"])
-        }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
+        }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this._beforeRenderList = [], this._afterRenderList = [], this.window.create({
           width: params.width,
           height: params.height,
           viewBox: params.viewBox,
@@ -16839,7 +16875,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.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(), 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.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+        })), 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), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$8(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -16954,10 +16990,16 @@
         options.enableView3dTransform && this.enableView3dTransform();
       }
       setBeforeRender(cb) {
-        this._beforeRender = cb;
+        this._beforeRenderList.push(cb);
+      }
+      removeBeforeRender(cb) {
+        this._beforeRenderList = this._beforeRenderList.filter(c => c !== cb);
       }
       setAfterRender(cb) {
-        this._afterRender = cb;
+        this._afterRenderList.push(cb);
+      }
+      removeAfterRender(cb) {
+        this._afterRenderList = this._afterRenderList.filter(c => c !== cb);
       }
       afterNextRender(cb) {
         this._afterNextRenderCbs || (this._afterNextRenderCbs = []), this._afterNextRenderCbs.push(cb);
@@ -17262,7 +17304,7 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      __awaiter$9 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
         return new (P || (P = Promise))(function (resolve, reject) {
           function fulfilled(value) {
             try {
@@ -17356,7 +17398,7 @@
         };
       }
       loadFont(font, source, descriptors) {
-        return __awaiter$8(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
           return {
             loadState: "fail"
           };
@@ -19442,7 +19484,7 @@
       __metadata$k = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
         return new (P || (P = Promise))(function (resolve, reject) {
           function fulfilled(value) {
             try {
@@ -19661,7 +19703,7 @@
         };
       }
       loadFont(font, source, descriptors) {
-        return __awaiter$7(this, void 0, void 0, function* () {
+        return __awaiter$8(this, void 0, void 0, function* () {
           return new FontFace(font, isString$8(source) ? `url(${source})` : source, descriptors).load().then(function (loadedFont) {
             return document.fonts.add(loadedFont), {
               loadState: "success"
@@ -23905,6 +23947,7 @@
         return this.getEndProps();
       }
       stop() {}
+      release() {}
     }
     class WaitStep extends Step {
       constructor(type, props, duration, easing) {
@@ -23912,8 +23955,6 @@
       }
       onStart() {
         super.onStart();
-      }
-      onFirstRun() {
         const fromProps = this.getFromProps();
         this.target.setAttributes(fromProps);
       }
@@ -24122,7 +24163,9 @@
         this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
       }
       release() {
-        this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+        this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [], this.forEachStep(step => {
+          step.release();
+        });
       }
       getDuration() {
         return this._duration;
@@ -24196,6 +24239,10 @@
       getLoop() {
         return this._loopCount;
       }
+      forEachStep(cb) {
+        let step = this._firstStep;
+        for (; step;) cb(step), step = step.next;
+      }
     }
 
     const performanceRAF = new PerformanceRAF();
@@ -24428,6 +24475,9 @@
       constructor(target) {
         this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
       }
+      get started() {
+        return this._started;
+      }
       onStart(cb) {
         cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
           cb();
@@ -24568,14 +24618,14 @@
         return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
       }
       _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (custom && customType) {
           const customParams = Object.assign({
-              width: graphic.stage.width,
-              height: graphic.stage.height,
+              width: (null === (_a = graphic.stage) || void 0 === _a ? void 0 : _a.width) || 0,
+              height: (null === (_b = graphic.stage) || void 0 === _b ? void 0 : _b.height) || 0,
               group: this._target.parent
             }, this.resolveValue(customParameters, graphic)),
-            objOptions = isFunction$9(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
+            objOptions = isFunction$9(options) ? options.call(null, null !== (_d = customParams && (null === (_c = customParams.data) || void 0 === _c ? void 0 : _c[0])) && void 0 !== _d ? _d : null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, customParams) : options;
           customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
         } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
       }
@@ -24795,7 +24845,7 @@
       reApplyState(state) {
         var _a;
         const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-        if (stateInfo) {
+        if (stateInfo && stateInfo.executor.started) {
           const stateList = this.stateList.slice();
           stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
         }
@@ -24938,6 +24988,45 @@
         this._animator && this._animator.stop();
       }
     }
+    class AStageAnimate extends ACustomAnimate {
+      constructor(customFrom, customTo, duration, easing, params) {
+        super(customFrom, customTo, duration, easing, params), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0, this._beforeStageRender = () => {
+          if (!this.willCallBeforeStageRender) return;
+          this.willCallBeforeStageRender = !1;
+          const stage = this.target.stage,
+            canvas = stage.window.getContext().canvas.nativeCanvas,
+            outputCanvas = this.beforeStageRender(stage, canvas);
+          outputCanvas && this.renderToStage(stage, outputCanvas);
+        }, this._afterStageRender = () => {
+          if (!this.willCallAfterStageRender) return;
+          this.willCallAfterStageRender = !1;
+          const stage = this.target.stage,
+            canvas = stage.window.getContext().canvas.nativeCanvas,
+            outputCanvas = this.afterStageRender(stage, canvas);
+          outputCanvas && this.renderToStage(stage, outputCanvas);
+        }, this.props = {};
+      }
+      beforeStageRender(stage, canvas) {
+        return !1;
+      }
+      afterStageRender(stage, canvas) {
+        return !1;
+      }
+      onFirstRun() {
+        super.onFirstRun(), this.target.stage.setBeforeRender(this._beforeStageRender), this.target.stage.setAfterRender(this._afterStageRender), this.target.stage.disableDirtyBounds();
+      }
+      stop() {
+        super.stop(), this.target.stage.removeBeforeRender(this._beforeStageRender), this.target.stage.removeAfterRender(this._afterStageRender);
+      }
+      onUpdate(end, ratio, out) {
+        super.onUpdate(end, ratio, out), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0;
+      }
+      renderToStage(stage, canvas) {
+        const stageCanvas = stage.window.getContext().canvas.nativeCanvas,
+          ctx = stageCanvas.getContext("2d");
+        return !!ctx && (ctx.clearRect(0, 0, stageCanvas.width, stageCanvas.height), ctx.drawImage(canvas, 0, 0), stageCanvas);
+      }
+    }
 
     class ComponentAnimator {
       constructor(component) {
@@ -25320,7 +25409,7 @@
     }
     class GrowAngleIn extends GrowAngleBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25329,7 +25418,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
       }
     }
     class GrowAngleOut extends GrowAngleBase {
@@ -25937,7 +26026,7 @@
     }
     class GrowRadiusIn extends GrowPointsBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25946,7 +26035,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
     }
     class GrowRadiusOut extends GrowPointsBase {
@@ -26061,7 +26150,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -26070,7 +26159,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -27854,8 +27943,1271 @@
       }
     }
 
+    class DisappearAnimateBase extends AStageAnimate {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.webglCanvas = null, this.gl = null, this.program = null, this.currentAnimationRatio = 0, this.animationTime = 0;
+      }
+      onUpdate(end, ratio, out) {
+        super.onUpdate(end, ratio, out), this.currentAnimationRatio = ratio, this.animationTime = ratio * Math.PI * 2;
+      }
+      getAnimationTime() {
+        return this.currentAnimationRatio > 0 ? this.animationTime : Date.now() / 1e3;
+      }
+      getDurationFromParent() {
+        return this.duration || 1e3;
+      }
+      initWebGL(canvas) {
+        try {
+          if (this.webglCanvas = vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vglobal.devicePixelRatio
+          }), !this.webglCanvas) return (void 0), !1;
+          this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`, this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;
+          let glContext = null;
+          try {
+            glContext = this.webglCanvas.getContext("webgl"), glContext || (glContext = this.webglCanvas.getContext("experimental-webgl"));
+          } catch (e) {
+          }
+          if (this.gl = glContext, !this.gl) return (void 0), !1;
+          const shaders = this.getShaderSources();
+          return this.program = this.createShaderProgram(shaders.vertex, shaders.fragment), null !== this.program;
+        } catch (error) {
+          return !1;
+        }
+      }
+      createShaderProgram(vertexSource, fragmentSource) {
+        if (!this.gl) return null;
+        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource),
+          fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
+        if (!vertexShader || !fragmentShader) return null;
+        const program = this.gl.createProgram();
+        return program ? (this.gl.attachShader(program, vertexShader), this.gl.attachShader(program, fragmentShader), this.gl.linkProgram(program), this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ? program : (null)) : null;
+      }
+      createShader(type, source) {
+        if (!this.gl) return null;
+        const shader = this.gl.createShader(type);
+        return shader ? (this.gl.shaderSource(shader, source), this.gl.compileShader(shader), this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS) ? shader : (this.gl.deleteShader(shader), null)) : null;
+      }
+      setupWebGLState(canvas) {
+        this.gl && this.webglCanvas && (this.webglCanvas.width === canvas.width && this.webglCanvas.height === canvas.height || (this.webglCanvas.width = canvas.width, this.webglCanvas.height = canvas.height), this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height), this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT));
+      }
+      createFullScreenQuad() {
+        if (!this.gl) return null;
+        const vertices = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]),
+          vertexBuffer = this.gl.createBuffer();
+        return this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer), this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW), vertexBuffer;
+      }
+      createTextureFromCanvas(canvas) {
+        if (!this.gl) return null;
+        const texture = this.gl.createTexture();
+        return this.gl.activeTexture(this.gl.TEXTURE0), this.gl.bindTexture(this.gl.TEXTURE_2D, texture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), texture;
+      }
+      setupVertexAttributes() {
+        if (!this.gl || !this.program) return;
+        const positionLocation = this.gl.getAttribLocation(this.program, "a_position"),
+          texCoordLocation = this.gl.getAttribLocation(this.program, "a_texCoord");
+        this.gl.enableVertexAttribArray(positionLocation), this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, !1, 16, 0), this.gl.enableVertexAttribArray(texCoordLocation), this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, !1, 16, 8);
+      }
+      createOutputCanvas(canvas) {
+        const outputCanvas = vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vglobal.devicePixelRatio
+          }),
+          ctx = outputCanvas.getContext("2d");
+        return ctx ? (ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0), {
+          canvas: outputCanvas,
+          ctx: ctx
+        }) : null;
+      }
+      getShaderSources() {
+        return null;
+      }
+      applyWebGLEffect(canvas) {
+        return null;
+      }
+      applyCanvas2DEffect(canvas) {
+        return null;
+      }
+      supportsWebGL() {
+        return null !== this.getShaderSources();
+      }
+      supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;
+      }
+      release() {
+        super.release(), this.gl && (this.program && (this.gl.deleteProgram(this.program), this.program = null), this.gl = null), this.webglCanvas && (this.webglCanvas = null), this.currentAnimationRatio = 0, this.animationTime = 0;
+      }
+      afterStageRender(stage, canvas) {
+        let result = null;
+        if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || (void 0), this.gl)) {
+          if (result = this.applyWebGLEffect(canvas), result) return result;
+        }
+        if (this.supportsCanvas2D()) {
+          if (result = this.applyCanvas2DEffect(canvas), result) return result;
+        }
+        return this.supportsWebGL() || this.supportsCanvas2D() || (void 0), canvas;
+      }
+    }
+
+    class Canvas2DEffectBase extends DisappearAnimateBase {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+      }
+      getShaderSources() {
+        return null;
+      }
+      applyWebGLEffect(canvas) {
+        return null;
+      }
+    }
+    class HybridEffectBase extends DisappearAnimateBase {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+      }
+      getShaderSources() {
+        return null;
+      }
+      applyWebGLEffect(canvas) {
+        return null;
+      }
+      applyCanvas2DEffect(canvas) {
+        return null;
+      }
+      supportsWebGL() {
+        return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && null !== this.getShaderSources();
+      }
+      supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;
+      }
+      afterStageRender(stage, canvas) {
+        var _a, _b;
+        let result = null;
+        if (!1 !== (null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.options) || void 0 === _b ? void 0 : _b.useWebGL)) {
+          if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || (void 0), this.gl)) {
+            if (result = this.applyWebGLEffect(canvas), result) return result;
+          }
+          if (this.supportsCanvas2D()) {
+            if (result = this.applyCanvas2DEffect(canvas), result) return result;
+          }
+        } else if (this.supportsCanvas2D()) {
+          if (result = this.applyCanvas2DEffect(canvas), result) return result;
+        } else ;
+        return this.supportsWebGL() || this.supportsCanvas2D() || (void 0), canvas;
+      }
+    }
+
+    class ImageProcessUtils {
+      static createTempCanvas(width, height, dpr) {
+        return vglobal.createCanvas({
+          width: width,
+          height: height,
+          dpr: dpr || vglobal.devicePixelRatio
+        });
+      }
+      static cloneImageData(imageData) {
+        const clonedData = new Uint8ClampedArray(imageData.data);
+        return new ImageData(clonedData, imageData.width, imageData.height);
+      }
+      static lerp(start, end, t) {
+        return start * (1 - t) + end * t;
+      }
+      static smoothstep(edge0, edge1, x) {
+        const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+        return t * t * (3 - 2 * t);
+      }
+      static distance(x1, y1, x2, y2) {
+        const dx = x2 - x1,
+          dy = y2 - y1;
+        return Math.sqrt(dx * dx + dy * dy);
+      }
+      static normalizeAngle(angle) {
+        return (angle + Math.PI) / (2 * Math.PI);
+      }
+      static pixelNoise(x, y, pixelSize) {
+        if (pixelSize <= 0) return 0;
+        const gridX = Math.floor(x / pixelSize) * pixelSize,
+          gridY = Math.floor(y / pixelSize) * pixelSize,
+          n = 43758.5453 * Math.sin(12.9898 * gridX + 78.233 * gridY);
+        return n - Math.floor(n);
+      }
+      static generateNoiseTexture(width, height) {
+        const data = new Uint8Array(width * height);
+        for (let i = 0; i < data.length; i++) data[i] = Math.floor(256 * Math.random());
+        return data;
+      }
+      static applyCSSFilter(canvas, filter) {
+        const outputCanvas = this.createTempCanvas(canvas.width, canvas.height),
+          ctx = outputCanvas.getContext("2d");
+        return ctx ? (ctx.filter = filter, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas) : canvas;
+      }
+      static extractChannel(imageData, channelIndex) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          channelData = new Uint8ClampedArray(data.length);
+        for (let i = 0; i < data.length; i += 4) channelData[i] = 0, channelData[i + 1] = 0, channelData[i + 2] = 0, channelData[i + 3] = data[i + 3], channelIndex >= 0 && channelIndex <= 2 && (channelData[i + channelIndex] = data[i + channelIndex]);
+        return new ImageData(channelData, width, height);
+      }
+      static blendImageData(imageData1, imageData2, ratio) {
+        const {
+            data: data1,
+            width: width,
+            height: height
+          } = imageData1,
+          {
+            data: data2
+          } = imageData2,
+          result = new Uint8ClampedArray(data1.length);
+        for (let i = 0; i < data1.length; i += 4) result[i] = Math.round(this.lerp(data1[i], data2[i], ratio)), result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio)), result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio)), result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio));
+        return new ImageData(result, width, height);
+      }
+      static getLuminance(r, g, b) {
+        return .299 * r + .587 * g + .114 * b;
+      }
+      static applySepiaToPixel(r, g, b) {
+        return [Math.min(255, .393 * r + .769 * g + .189 * b), Math.min(255, .349 * r + .686 * g + .168 * b), Math.min(255, .272 * r + .534 * g + .131 * b)];
+      }
+      static calculateDynamicStrength(baseStrength, animationTime) {
+        return baseStrength * (animationTime / (2 * Math.PI));
+      }
+    }
+    class ShaderLibrary {}
+    ShaderLibrary.STANDARD_VERTEX_SHADER = "\n    attribute vec2 a_position;\n    attribute vec2 a_texCoord;\n    varying vec2 v_texCoord;\n\n    void main() {\n      gl_Position = vec4(a_position, 0.0, 1.0);\n      v_texCoord = a_texCoord;\n    }\n  ", ShaderLibrary.SHADER_FUNCTIONS = "\n    // 亮度计算函数\n    float luminance(vec3 color) {\n      return dot(color, vec3(0.299, 0.587, 0.114));\n    }\n\n    // 褐色调函数\n    vec3 sepia(vec3 color) {\n      float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n      float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n      float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n      return vec3(r, g, b);\n    }\n\n    // 线性插值函数\n    float lerp(float a, float b, float t) {\n      return a * (1.0 - t) + b * t;\n    }\n\n\n    // 简单噪声函数\n    float pixelNoise(vec2 coord, float pixelSize) {\n      vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n      return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n    }\n\n    // 动态强度计算\n    float calculateDynamicStrength(float baseStrength, float time) {\n      return baseStrength * (time / 6.28318531); // 2π\n    }\n  ";
+
+    class Dissolve extends HybridEffectBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d;
+        super(from, to, duration, easing, params), this.noiseData = null;
+        const rawNoiseScale = null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.noiseScale,
+          clampedNoiseScale = void 0 !== rawNoiseScale ? Math.max(0, Math.floor(rawNoiseScale)) : 8;
+        this.dissolveConfig = {
+          dissolveType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.dissolveType) || "outward",
+          useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL,
+          noiseScale: clampedNoiseScale,
+          fadeEdge: void 0 === (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.fadeEdge) || params.options.fadeEdge
+        };
+      }
+      getShaderSources() {
+        return {
+          vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
+          fragment: `\n      precision mediump float;\n      uniform sampler2D u_texture;\n      uniform sampler2D u_noiseTexture;\n      uniform float u_time;\n      uniform int u_dissolveType;\n      uniform vec2 u_resolution;\n      uniform float u_noiseScale;\n      uniform bool u_fadeEdge;\n      varying vec2 v_texCoord;\n\n      ${ShaderLibrary.SHADER_FUNCTIONS}\n\n      // 向外溶解函数\n      float outwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        vec2 center = vec2(0.5, 0.5);\n        float distFromCenter = length(uv - center);\n        float maxDist = length(vec2(0.5, 0.5));\n\n        // 归一化距离 (0为中心，1为边缘)\n        float normalizedDist = distFromCenter / maxDist;\n\n        // 向外溶解：从边缘开始溶解，time控制溶解进度\n        // 增加安全边距，确保动画结束时完全溶解\n        float edgeThreshold = 1.2 - time * 1.5;\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          // 添加基于像素大小的噪声，让边缘呈现颗粒状\n          vec2 pixelCoord = uv * resolution; // 转换为像素坐标\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.4; // 增强噪声影响\n          edgeThreshold += noiseInfluence;\n          return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.15; // 渐变宽度\n            return 1.0 - smoothstep(edgeThreshold - fadeWidth, edgeThreshold, normalizedDist);\n          } else {\n            // 硬边缘：返回0或1\n            return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 向内溶解函数\n      float inwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        vec2 center = vec2(0.5, 0.5);\n        float distFromCenter = length(uv - center);\n        float maxDist = length(vec2(0.5, 0.5));\n\n        float normalizedDist = distFromCenter / maxDist;\n\n        // 向内溶解：从中心开始溶解，time控制溶解进度\n        // 增加系数，确保动画结束时完全溶解\n        float centerThreshold = time * 1.4;\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.4;\n          centerThreshold += noiseInfluence;\n          return normalizedDist < centerThreshold ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.15; // 渐变宽度\n            return smoothstep(centerThreshold, centerThreshold + fadeWidth, normalizedDist);\n          } else {\n            // 硬边缘：返回0或1\n            return normalizedDist < centerThreshold ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 径向溶解函数\n      float radialDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        vec2 center = vec2(0.5, 0.5);\n        float angle = atan(uv.y - center.y, uv.x - center.x);\n        float normalizedAngle = (angle + 3.14159) / (2.0 * 3.14159);\n\n        // 径向溶解：按角度顺序溶解，time控制溶解进度\n        // 增加系数，确保动画结束时完全溶解\n        float angleThreshold = time * 1.2;\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.3;\n          angleThreshold += noiseInfluence;\n          return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.08; // 渐变宽度\n            return smoothstep(angleThreshold, angleThreshold + fadeWidth, normalizedAngle);\n          } else {\n            // 硬边缘：返回0或1\n            return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 从左到右溶解函数\n      float leftToRightDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        // 左到右溶解：从x=0开始向x=1溶解\n        float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.3;\n          dissolvePosition += noiseInfluence;\n          return uv.x < dissolvePosition ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.08; // 渐变宽度\n            return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.x);\n          } else {\n            // 硬边缘：返回0或1\n            return uv.x < dissolvePosition ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 从右到左溶解函数\n      float rightToLeftDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        // 右到左溶解：从x=1开始向x=0溶解\n        float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.3;\n          dissolvePosition += noiseInfluence;\n          return uv.x > dissolvePosition ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.08; // 渐变宽度\n            return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.x);\n          } else {\n            // 硬边缘：返回0或1\n            return uv.x > dissolvePosition ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 从上到下溶解函数\n      float topToBottomDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        // 上到下溶解：从y=0开始向y=1溶解\n        float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.3;\n          dissolvePosition += noiseInfluence;\n          return uv.y < dissolvePosition ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.08; // 渐变宽度\n            return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.y);\n          } else {\n            // 硬边缘：返回0或1\n            return uv.y < dissolvePosition ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      // 从下到上溶解函数\n      float bottomToTopDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n        // 下到上溶解：从y=1开始向y=0溶解\n        float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n        // 当pixelSize > 0时添加颗粒效果\n        if (pixelSize > 0.0) {\n          vec2 pixelCoord = uv * resolution;\n          float noiseValue = pixelNoise(pixelCoord, pixelSize);\n          float noiseInfluence = (noiseValue - 0.5) * 0.3;\n          dissolvePosition += noiseInfluence;\n          return uv.y > dissolvePosition ? 0.0 : 1.0;\n        } else {\n          // 平滑溶解：根据fadeEdge决定是否使用渐变\n          if (u_fadeEdge) {\n            // 柔和边缘：返回渐变值\n            float fadeWidth = 0.08; // 渐变宽度\n            return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.y);\n          } else {\n            // 硬边缘：返回0或1\n            return uv.y > dissolvePosition ? 0.0 : 1.0;\n          }\n        }\n      }\n\n      void main() {\n        vec2 uv = v_texCoord;\n        vec4 texColor = texture2D(u_texture, uv);\n\n        float alpha = 1.0;\n\n        // 根据溶解类型选择对应的溶解函数\n        if (u_dissolveType == 0) {\n          alpha = outwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 1) {\n          alpha = inwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 2) {\n          alpha = radialDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 3) {\n          alpha = leftToRightDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 4) {\n          alpha = rightToLeftDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 5) {\n          alpha = topToBottomDissolve(uv, u_time, u_noiseScale, u_resolution);\n        } else if (u_dissolveType == 6) {\n          alpha = bottomToTopDissolve(uv, u_time, u_noiseScale, u_resolution);\n        }\n\n        gl_FragColor = vec4(texColor.rgb, texColor.a * alpha);\n      }\n    `
+        };
+      }
+      applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) return canvas;
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) return canvas;
+        this.noiseData || (this.noiseData = ImageProcessUtils.generateNoiseTexture(256, 256));
+        const noiseTexture = this.gl.createTexture();
+        this.gl.activeTexture(this.gl.TEXTURE1), this.gl.bindTexture(this.gl.TEXTURE_2D, noiseTexture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, 256, 256, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, this.noiseData), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        const vertexBuffer = this.createFullScreenQuad();
+        return vertexBuffer ? (this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setUniforms(), this.gl.enable(this.gl.BLEND), this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.gl.deleteTexture(texture), this.gl.deleteTexture(noiseTexture), this.gl.deleteBuffer(vertexBuffer), this.webglCanvas) : canvas;
+      }
+      setUniforms() {
+        if (!this.gl || !this.program || !this.webglCanvas) return;
+        const textureLocation = this.gl.getUniformLocation(this.program, "u_texture"),
+          noiseTextureLocation = this.gl.getUniformLocation(this.program, "u_noiseTexture"),
+          timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
+          dissolveTypeLocation = this.gl.getUniformLocation(this.program, "u_dissolveType"),
+          resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution"),
+          noiseScaleLocation = this.gl.getUniformLocation(this.program, "u_noiseScale"),
+          fadeEdgeLocation = this.gl.getUniformLocation(this.program, "u_fadeEdge");
+        this.gl.uniform1i(textureLocation, 0), this.gl.uniform1i(noiseTextureLocation, 1), this.gl.uniform1f(timeLocation, this.currentAnimationRatio), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), this.gl.uniform1f(noiseScaleLocation, this.dissolveConfig.noiseScale), this.gl.uniform1i(fadeEdgeLocation, this.dissolveConfig.fadeEdge ? 1 : 0);
+        this.gl.uniform1i(dissolveTypeLocation, {
+          outward: 0,
+          inward: 1,
+          radial: 2,
+          leftToRight: 3,
+          rightToLeft: 4,
+          topToBottom: 5,
+          bottomToTop: 6
+        }[this.dissolveConfig.dissolveType] || 0);
+      }
+      applyCanvas2DEffect(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return canvas;
+        const {
+            canvas: outputCanvasElement,
+            ctx: ctx
+          } = outputCanvas,
+          imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+          progress = this.currentAnimationRatio;
+        let dissolvedImageData;
+        switch (this.dissolveConfig.dissolveType) {
+          case "outward":
+            dissolvedImageData = this.applyOutwardDissolve(imageData, progress);
+            break;
+          case "inward":
+            dissolvedImageData = this.applyInwardDissolve(imageData, progress);
+            break;
+          case "radial":
+            dissolvedImageData = this.applyRadialDissolve(imageData, progress);
+            break;
+          case "leftToRight":
+            dissolvedImageData = this.applyLeftToRightDissolve(imageData, progress);
+            break;
+          case "rightToLeft":
+            dissolvedImageData = this.applyRightToLeftDissolve(imageData, progress);
+            break;
+          case "topToBottom":
+            dissolvedImageData = this.applyTopToBottomDissolve(imageData, progress);
+            break;
+          case "bottomToTop":
+            dissolvedImageData = this.applyBottomToTopDissolve(imageData, progress);
+            break;
+          default:
+            dissolvedImageData = imageData;
+        }
+        return ctx.putImageData(dissolvedImageData, 0, 0), outputCanvasElement;
+      }
+      applyOutwardDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2,
+          centerY = height / 2,
+          maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
+          pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const dx = x - centerX,
+            dy = y - centerY,
+            normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
+          let dissolveThreshold = 1.2 - 1.4 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist > dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeStart = dissolveThreshold - .15;
+            alpha = normalizedDist < fadeStart ? 1 : normalizedDist > dissolveThreshold ? 0 : 1 - (normalizedDist - fadeStart) / (dissolveThreshold - fadeStart);
+          } else alpha = normalizedDist > dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyInwardDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2,
+          centerY = height / 2,
+          maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
+          pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const dx = x - centerX,
+            dy = y - centerY,
+            normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
+          let dissolveThreshold = 1.4 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist < dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeEnd = dissolveThreshold + .15;
+            alpha = normalizedDist < dissolveThreshold ? 0 : normalizedDist > fadeEnd ? 1 : (normalizedDist - dissolveThreshold) / (fadeEnd - dissolveThreshold);
+          } else alpha = normalizedDist < dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyRadialDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2,
+          centerY = height / 2,
+          pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const dx = x - centerX,
+            dy = y - centerY,
+            normalizedAngle = (Math.atan2(dy, dx) + Math.PI) / (2 * Math.PI);
+          let dissolveThreshold = 1.2 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeEnd = dissolveThreshold + .08;
+            alpha = normalizedAngle < dissolveThreshold ? 0 : normalizedAngle > fadeEnd ? 1 : (normalizedAngle - dissolveThreshold) / (fadeEnd - dissolveThreshold);
+          } else alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyLeftToRightDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const normalizedX = x / width;
+          let dissolveThreshold = 1.2 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX < dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeEnd = dissolveThreshold + .08;
+            alpha = normalizedX < dissolveThreshold ? 0 : normalizedX > fadeEnd ? 1 : (normalizedX - dissolveThreshold) / (fadeEnd - dissolveThreshold);
+          } else alpha = normalizedX < dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyRightToLeftDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const normalizedX = x / width;
+          let dissolveThreshold = 1 - 1.2 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX > dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeStart = dissolveThreshold - .08;
+            alpha = normalizedX < fadeStart ? 1 : normalizedX > dissolveThreshold ? 0 : 1 - (normalizedX - fadeStart) / (dissolveThreshold - fadeStart);
+          } else alpha = normalizedX > dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyTopToBottomDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const normalizedY = y / height;
+          let dissolveThreshold = 1.2 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY < dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeEnd = dissolveThreshold + .08;
+            alpha = normalizedY < dissolveThreshold ? 0 : normalizedY > fadeEnd ? 1 : (normalizedY - dissolveThreshold) / (fadeEnd - dissolveThreshold);
+          } else alpha = normalizedY < dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+      applyBottomToTopDissolve(imageData, progress) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const normalizedY = y / height;
+          let dissolveThreshold = 1 - 1.2 * progress,
+            alpha = 1;
+          if (pixelSize > 0) {
+            dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY > dissolveThreshold ? 0 : 1;
+          } else if (this.dissolveConfig.fadeEdge) {
+            const fadeStart = dissolveThreshold - .08;
+            alpha = normalizedY < fadeStart ? 1 : normalizedY > dissolveThreshold ? 0 : 1 - (normalizedY - fadeStart) / (dissolveThreshold - fadeStart);
+          } else alpha = normalizedY > dissolveThreshold ? 0 : 1;
+          const index = 4 * (y * width + x);
+          result[index + 3] = Math.floor(result[index + 3] * alpha);
+        }
+        return new ImageData(result, width, height);
+      }
+    }
+
+    class Grayscale extends HybridEffectBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b, _c;
+        super(from, to, duration, easing, params);
+        const rawStrength = void 0 !== (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.strength) ? params.options.strength : 1,
+          clampedStrength = Math.max(0, Math.min(1, rawStrength));
+        this.colorConfig = {
+          effectType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.effectType) || "grayscale",
+          strength: clampedStrength,
+          useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
+        };
+      }
+      getShaderSources() {
+        return {
+          vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
+          fragment: `\n      precision mediump float;\n      uniform sampler2D u_texture;\n      uniform float u_time;\n      uniform float u_strength;\n      uniform int u_effectType;\n      uniform vec2 u_resolution;\n      varying vec2 v_texCoord;\n\n      ${ShaderLibrary.SHADER_FUNCTIONS}\n\n      void main() {\n        vec2 uv = v_texCoord;\n        vec4 originalColor = texture2D(u_texture, uv);\n        vec3 color = originalColor.rgb;\n\n        // 计算动态强度\n        float dynamicStrength = calculateDynamicStrength(u_strength, u_time);\n\n        if (u_effectType == 0) {\n          // 灰度效果\n          float gray = luminance(color);\n          vec3 grayColor = vec3(gray);\n          color = mix(color, grayColor, dynamicStrength);\n        } else if (u_effectType == 1) {\n          // 褐色调效果\n          vec3 sepiaColor = sepia(color);\n          color = mix(color, sepiaColor, dynamicStrength);\n        }\n\n        gl_FragColor = vec4(color, originalColor.a);\n      }\n    `
+        };
+      }
+      applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) return null;
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) return null;
+        const vertexBuffer = this.createFullScreenQuad();
+        if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
+        try {
+          return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setColorUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
+        } finally {
+          this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
+        }
+      }
+      setColorUniforms() {
+        if (!this.gl || !this.program) return;
+        const currentTime = this.getAnimationTime(),
+          timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
+          strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
+          effectTypeLocation = this.gl.getUniformLocation(this.program, "u_effectType"),
+          resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
+        this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.colorConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        this.gl.uniform1i(effectTypeLocation, {
+          grayscale: 0,
+          sepia: 1
+        }[this.colorConfig.effectType] || 0);
+      }
+      applyCanvas2DEffect(canvas) {
+        if (this.colorConfig.strength <= 0) {
+          const outputCanvas = this.createOutputCanvas(canvas);
+          return outputCanvas ? outputCanvas.canvas : null;
+        }
+        if (this.canUseCSSFilter()) return this.applyCSSFilter(canvas);
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+            currentTime = this.getAnimationTime();
+          let processedImageData;
+          switch (this.colorConfig.effectType) {
+            case "grayscale":
+            default:
+              processedImageData = this.applyGrayscaleEffect(imageData, this.colorConfig.strength, currentTime);
+              break;
+            case "sepia":
+              processedImageData = this.applySepiaEffect(imageData, this.colorConfig.strength, currentTime);
+          }
+          return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(processedImageData, 0, 0), outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      canUseCSSFilter() {
+        var _a;
+        return !!window.useFilterAPI && "undefined" != typeof CSS && (null === (_a = CSS.supports) || void 0 === _a ? void 0 : _a.call(CSS, "filter", "grayscale(1)"));
+      }
+      applyCSSFilter(canvas) {
+        try {
+          const outputCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
+            ctx = outputCanvas.getContext("2d");
+          if (!ctx) return null;
+          const currentTime = this.getAnimationTime(),
+            dynamicStrength = ImageProcessUtils.calculateDynamicStrength(this.colorConfig.strength, currentTime);
+          let filterValue = "";
+          return "grayscale" === this.colorConfig.effectType ? filterValue = `grayscale(${Math.min(1, dynamicStrength)})` : "sepia" === this.colorConfig.effectType && (filterValue = `sepia(${Math.min(1, dynamicStrength)})`), ctx.filter = filterValue, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      applyGrayscaleEffect(imageData, strength, time) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length),
+          dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
+        for (let i = 0; i < data.length; i += 4) {
+          const r = data[i],
+            g = data[i + 1],
+            b = data[i + 2],
+            a = data[i + 3],
+            gray = ImageProcessUtils.getLuminance(r, g, b);
+          result[i] = Math.round(ImageProcessUtils.lerp(r, gray, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, gray, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, gray, dynamicStrength)), result[i + 3] = a;
+        }
+        return new ImageData(result, width, height);
+      }
+      applySepiaEffect(imageData, strength, time) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length),
+          dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
+        for (let i = 0; i < data.length; i += 4) {
+          const r = data[i],
+            g = data[i + 1],
+            b = data[i + 2],
+            a = data[i + 3],
+            [sepiaR, sepiaG, sepiaB] = ImageProcessUtils.applySepiaToPixel(r, g, b);
+          result[i] = Math.round(ImageProcessUtils.lerp(r, sepiaR, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, sepiaG, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, sepiaB, dynamicStrength)), result[i + 3] = a;
+        }
+        return new ImageData(result, width, height);
+      }
+      afterStageRender(stage, canvas) {
+        if (this.canUseCSSFilter() && this.colorConfig.strength > 0) {
+          const cssResult = this.applyCSSFilter(canvas);
+          if (cssResult) return cssResult;
+        }
+        return super.afterStageRender(stage, canvas);
+      }
+    }
+
+    class Distortion extends HybridEffectBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b, _c;
+        super(from, to, duration, easing, params), this.distortionConfig = {
+          distortionType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.distortionType) || "wave",
+          strength: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.strength) || .3,
+          useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
+        };
+      }
+      getShaderSources() {
+        return {
+          vertex: "\n      attribute vec2 a_position;\n      attribute vec2 a_texCoord;\n      varying vec2 v_texCoord;\n\n      void main() {\n        gl_Position = vec4(a_position, 0.0, 1.0);\n        v_texCoord = a_texCoord;\n      }\n    ",
+          fragment: "\n      precision mediump float;\n      uniform sampler2D u_texture;\n      uniform float u_time;\n      uniform float u_strength;\n      uniform int u_distortionType;\n      uniform vec2 u_resolution;\n      varying vec2 v_texCoord;\n\n      // 波浪扭曲函数\n      vec2 wave(vec2 uv, float time, float strength) {\n        float waveX = sin(uv.y * 10.0 + time * 3.0) * strength * 0.1;\n        float waveY = sin(uv.x * 10.0 + time * 2.0) * strength * 0.1;\n        return uv + vec2(waveX, waveY);\n      }\n\n      // 涟漪扭曲函数\n      vec2 ripple(vec2 uv, float time, float strength) {\n        vec2 center = vec2(0.5, 0.5);\n        float distance = length(uv - center);\n        float ripple = sin(distance * 20.0 - time * 5.0) * strength * 0.1;\n        vec2 direction = normalize(uv - center);\n        return uv + direction * ripple;\n      }\n\n      // 漩涡扭曲函数\n      vec2 swirl(vec2 uv, float time, float strength) {\n        vec2 center = vec2(0.5, 0.5);\n        vec2 delta = uv - center;\n        float dist = length(delta);\n        float originalAngle = atan(delta.y, delta.x);\n        float rotationAngle = dist * strength * time * 2.0;\n        float finalAngle = originalAngle + rotationAngle;\n        return center + dist * vec2(cos(finalAngle), sin(finalAngle));\n      }\n\n      void main() {\n        vec2 uv = v_texCoord;\n\n        // 根据扭曲类型应用相应变换\n        if (u_distortionType == 0) {\n          uv = wave(uv, u_time, u_strength);\n        } else if (u_distortionType == 1) {\n          uv = ripple(uv, u_time, u_strength);\n        } else if (u_distortionType == 2) {\n          uv = swirl(uv, u_time, u_strength);\n        }\n\n        // 边界检查\n        if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        } else {\n          gl_FragColor = texture2D(u_texture, uv);\n        }\n      }\n    "
+        };
+      }
+      applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) return null;
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) return null;
+        const vertexBuffer = this.createFullScreenQuad();
+        if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
+        try {
+          return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setDistortionUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
+        } finally {
+          this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
+        }
+      }
+      setDistortionUniforms() {
+        if (!this.gl || !this.program) return;
+        const currentTime = this.getAnimationTime(),
+          timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
+          strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
+          distortionTypeLocation = this.gl.getUniformLocation(this.program, "u_distortionType"),
+          resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
+        this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.distortionConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        this.gl.uniform1i(distortionTypeLocation, {
+          wave: 0,
+          ripple: 1,
+          swirl: 2
+        }[this.distortionConfig.distortionType] || 0);
+      }
+      applyCanvas2DEffect(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+            currentTime = this.getAnimationTime();
+          let distortedImageData;
+          switch (this.distortionConfig.distortionType) {
+            case "wave":
+              distortedImageData = this.applyWaveDistortion(imageData, this.distortionConfig.strength, currentTime);
+              break;
+            case "ripple":
+              distortedImageData = this.applyRippleDistortion(imageData, this.distortionConfig.strength, currentTime);
+              break;
+            case "swirl":
+              distortedImageData = this.applySwirlDistortion(imageData, this.distortionConfig.strength, currentTime);
+              break;
+            default:
+              distortedImageData = imageData;
+          }
+          return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      applyWaveDistortion(imageData, strength, time) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length);
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const waveX = Math.sin(.1 * y + 3 * time) * strength * 20,
+            waveY = Math.sin(.1 * x + 2 * time) * strength * 20,
+            sourceX = Math.round(x - waveX),
+            sourceY = Math.round(y - waveY),
+            targetIndex = 4 * (y * width + x);
+          if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+            const sourceIndex = 4 * (sourceY * width + sourceX);
+            result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
+          } else result[targetIndex + 3] = 0;
+        }
+        return new ImageData(result, width, height);
+      }
+      applyRippleDistortion(imageData, strength, time) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length),
+          centerX = width / 2,
+          centerY = height / 2;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const dx = x - centerX,
+            dy = y - centerY,
+            distance = Math.sqrt(dx * dx + dy * dy),
+            ripple = Math.sin(.2 * distance - 5 * time) * strength * 10,
+            angle = Math.atan2(dy, dx),
+            sourceX = Math.round(x - Math.cos(angle) * ripple),
+            sourceY = Math.round(y - Math.sin(angle) * ripple),
+            targetIndex = 4 * (y * width + x);
+          if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+            const sourceIndex = 4 * (sourceY * width + sourceX);
+            result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
+          } else result[targetIndex + 3] = 0;
+        }
+        return new ImageData(result, width, height);
+      }
+      applySwirlDistortion(imageData, strength, time) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data.length),
+          centerX = width / 2,
+          centerY = height / 2;
+        for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+          const dx = x - centerX,
+            dy = y - centerY,
+            distance = Math.sqrt(dx * dx + dy * dy),
+            finalAngle = Math.atan2(dy, dx) + distance * strength * time * .02,
+            sourceX = Math.round(centerX + distance * Math.cos(finalAngle)),
+            sourceY = Math.round(centerY + distance * Math.sin(finalAngle)),
+            targetIndex = 4 * (y * width + x);
+          if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+            const sourceIndex = 4 * (sourceY * width + sourceX);
+            result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
+          } else result[targetIndex + 3] = 0;
+        }
+        return new ImageData(result, width, height);
+      }
+      afterStageRender(stage, canvas) {
+        return this.distortionConfig.strength <= 0 ? canvas : super.afterStageRender(stage, canvas);
+      }
+    }
+
+    class Particle extends HybridEffectBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e;
+        super(from, to, duration, easing, params), this.particles = [], this.positionBuffer = null, this.colorBuffer = null, this.particleConfig = {
+          effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "gravity",
+          count: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.count) || 4e3,
+          size: (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.size) || 20,
+          strength: (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.strength) || 1.5,
+          useWebGL: void 0 === (null === (_e = null == params ? void 0 : params.options) || void 0 === _e ? void 0 : _e.useWebGL) || params.options.useWebGL
+        };
+      }
+      getShaderSources() {
+        return {
+          vertex: "\n      attribute vec2 a_position;\n      attribute vec4 a_color;\n      attribute float a_size;\n\n      uniform vec2 u_resolution;\n      uniform float u_time;\n      uniform float u_forceStrength;\n      uniform int u_effectType;\n\n      varying vec4 v_color;\n\n      void main() {\n        // 将像素坐标转换为剪辑空间坐标\n        vec2 clipSpace = ((a_position / u_resolution) * 2.0) - 1.0;\n        clipSpace.y = -clipSpace.y; // 翻转Y轴\n\n        gl_Position = vec4(clipSpace, 0.0, 1.0);\n        gl_PointSize = a_size;\n        v_color = a_color;\n      }\n    ",
+          fragment: "\n      precision mediump float;\n      varying vec4 v_color;\n\n      void main() {\n        // 创建圆形粒子\n        vec2 coord = gl_PointCoord - vec2(0.5);\n        float distance = length(coord);\n\n        if (distance > 0.5) {\n          discard;\n        }\n\n        // 保持原始颜色，只调整透明度渐变\n        gl_FragColor = vec4(v_color.rgb, v_color.a);\n      }\n    "
+        };
+      }
+      applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) return null;
+        this.setupWebGLState(canvas), 0 === this.particles.length && this.extractParticles(canvas), this.updateParticles(canvas);
+        const gl = this.gl;
+        return gl.enable(gl.BLEND), gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA), gl.useProgram(this.program), this.prepareAndDrawParticles(gl), this.webglCanvas;
+      }
+      applyCanvas2DEffect(canvas) {
+        const output = this.createOutputCanvas(canvas);
+        if (!output) return null;
+        const {
+            canvas: outputCanvas,
+            ctx: ctx
+          } = output,
+          progress = this.currentAnimationRatio;
+        switch (this.particleConfig.effectType) {
+          case "explode":
+            this.applyCanvas2DExplode(ctx, canvas, progress);
+            break;
+          case "gravity":
+            this.applyCanvas2DGravity(ctx, canvas, progress);
+            break;
+          case "vortex":
+            this.applyCanvas2DVortex(ctx, canvas, progress);
+            break;
+          default:
+            ctx.globalAlpha = Math.max(0, 1 - progress), ctx.drawImage(canvas, 0, 0);
+        }
+        return outputCanvas;
+      }
+      extractParticles(canvas) {
+        const tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height, 1),
+          tempCtx = tempCanvas.getContext("2d");
+        if (!tempCtx) return;
+        tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
+        const data = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;
+        this.particles = [];
+        const step = Math.max(1, Math.floor(Math.sqrt(tempCanvas.width * tempCanvas.height / (1.5 * this.particleConfig.count))));
+        for (let y = 0; y < tempCanvas.height; y += step) for (let x = 0; x < tempCanvas.width; x += step) {
+          const index = 4 * (y * tempCanvas.width + x),
+            r = data[index],
+            g = data[index + 1],
+            b = data[index + 2],
+            a = data[index + 3];
+          if (a > 5) {
+            const realX = x / tempCanvas.width * canvas.width,
+              realY = y / tempCanvas.height * canvas.height,
+              particle = {
+                x: realX,
+                y: realY,
+                originX: realX,
+                originY: realY,
+                vx: 0,
+                vy: 0,
+                r: r / 255,
+                g: g / 255,
+                b: b / 255,
+                a: Math.max(.6, a / 255),
+                life: 1,
+                size: this.particleConfig.size * (1 + .5 * Math.random())
+              };
+            this.particles.push(particle);
+          }
+        }
+      }
+      updateParticles(canvas) {
+        const centerX = canvas.width / 2,
+          centerY = canvas.height / 2,
+          progress = this.currentAnimationRatio,
+          duration = this.getDurationFromParent(),
+          isShortAnimation = duration < 2e3,
+          timeMultiplier = isShortAnimation ? Math.max(1.5, 3e3 / duration) : 1,
+          intensityBoost = isShortAnimation ? Math.min(2, 2e3 / duration) : 1;
+        this.particles.forEach(particle => {
+          const dx = particle.x - centerX,
+            dy = particle.y - centerY,
+            distance = Math.sqrt(dx * dx + dy * dy),
+            angle = Math.atan2(dy, dx);
+          this.applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas), this.updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost);
+        });
+      }
+      applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas) {
+        const time = this.getAnimationTime();
+        switch (this.particleConfig.effectType) {
+          case "explode":
+            const explodeIntensity = progress * this.particleConfig.strength * intensityBoost * 5;
+            particle.vx += Math.cos(angle) * explodeIntensity, particle.vy += Math.sin(angle) * explodeIntensity;
+            break;
+          case "gravity":
+            this.applyGravityEffect(particle, progress, intensityBoost, canvas, time);
+            break;
+          case "vortex":
+            this.applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance);
+        }
+      }
+      applyGravityEffect(particle, progress, intensityBoost, canvas, time) {
+        const gravityThreshold = (particle.originX + .7 * particle.originY) / (canvas.width + canvas.height) * .8;
+        if (progress > gravityThreshold) {
+          const gravityProgress = (progress - gravityThreshold) / (1 - gravityThreshold),
+            gravityForce = this.particleConfig.strength * gravityProgress * gravityProgress * 12 * intensityBoost;
+          particle.vy += gravityForce;
+          const turbulence = Math.sin(3 * time + .02 * particle.originX) * Math.cos(2 * time + .015 * particle.originY);
+          particle.vx += turbulence * this.particleConfig.strength * 2 * intensityBoost;
+        }
+      }
+      applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance) {
+        const centerX = canvas.width / 2,
+          centerY = canvas.height / 2,
+          spiralAngle = angle + progress * Math.PI * .8,
+          targetRadius = distance + progress * Math.max(canvas.width, canvas.height) * .7 * 1.8,
+          targetX = centerX + Math.cos(spiralAngle) * targetRadius,
+          targetY = centerY + Math.sin(spiralAngle) * targetRadius,
+          baseForce = progress * this.particleConfig.strength * .08 * intensityBoost;
+        particle.vx += (targetX - particle.x) * baseForce, particle.vy += (targetY - particle.y) * baseForce;
+      }
+      updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost) {
+        const dragCoeff = isShortAnimation ? .99 : .98;
+        if (particle.vx *= dragCoeff, particle.vy *= dragCoeff, particle.x += particle.vx, particle.y += particle.vy, isShortAnimation) {
+          const lifeDecayRate = Math.max(.1, .5 / timeMultiplier);
+          particle.life = Math.max(0, 1 - progress * lifeDecayRate), particle.a = Math.max(.2, particle.life * Math.min(1, 1.2 * particle.a)), particle.size = Math.max(.7 * this.particleConfig.size, this.particleConfig.size * (.5 + .5 * particle.life));
+        } else particle.life = Math.max(0, 1 - .2 * progress), particle.a = Math.max(.1, particle.life * Math.min(1, 1.5 * particle.a)), particle.size = Math.max(.5 * this.particleConfig.size, this.particleConfig.size * (.3 + .7 * particle.life));
+      }
+      prepareAndDrawParticles(gl) {
+        const positions = new Float32Array(2 * this.particles.length),
+          colors = new Float32Array(4 * this.particles.length),
+          sizes = new Float32Array(this.particles.length);
+        this.particles.forEach((particle, i) => {
+          positions[2 * i] = particle.x, positions[2 * i + 1] = particle.y, colors[4 * i] = particle.r, colors[4 * i + 1] = particle.g, colors[4 * i + 2] = particle.b, colors[4 * i + 3] = Math.max(.1, particle.a), sizes[i] = Math.max(6, 1.5 * particle.size);
+        }), this.updateParticleBuffers(gl, positions, colors, sizes), this.setParticleUniforms(gl), gl.drawArrays(gl.POINTS, 0, this.particles.length), this.cleanupTempBuffers(gl);
+      }
+      updateParticleBuffers(gl, positions, colors, sizes) {
+        this.positionBuffer || (this.positionBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer), gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+        const positionLocation = gl.getAttribLocation(this.program, "a_position");
+        gl.enableVertexAttribArray(positionLocation), gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, !1, 0, 0), this.colorBuffer || (this.colorBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer), gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+        const colorLocation = gl.getAttribLocation(this.program, "a_color");
+        gl.enableVertexAttribArray(colorLocation), gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, !1, 0, 0);
+        const sizeBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer), gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.DYNAMIC_DRAW);
+        const sizeLocation = gl.getAttribLocation(this.program, "a_size");
+        gl.enableVertexAttribArray(sizeLocation), gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, !1, 0, 0), this._tempSizeBuffer = sizeBuffer;
+      }
+      setParticleUniforms(gl) {
+        const resolutionLocation = gl.getUniformLocation(this.program, "u_resolution"),
+          timeLocation = gl.getUniformLocation(this.program, "u_time"),
+          forceStrengthLocation = gl.getUniformLocation(this.program, "u_forceStrength"),
+          effectTypeLocation = gl.getUniformLocation(this.program, "u_effectType");
+        gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), gl.uniform1f(timeLocation, this.getAnimationTime()), gl.uniform1f(forceStrengthLocation, this.particleConfig.strength);
+        gl.uniform1i(effectTypeLocation, {
+          explode: 0,
+          vortex: 1,
+          gravity: 2
+        }[this.particleConfig.effectType] || 0);
+      }
+      cleanupTempBuffers(gl) {
+        const tempSizeBuffer = this._tempSizeBuffer;
+        tempSizeBuffer && (gl.deleteBuffer(tempSizeBuffer), delete this._tempSizeBuffer);
+      }
+      applyCanvas2DExplode(ctx, canvas, progress) {
+        const centerX = canvas.width / 2,
+          centerY = canvas.height / 2;
+        ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY);
+        const scale = 1 + .5 * progress;
+        ctx.scale(scale, scale), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
+      }
+      applyCanvas2DGravity(ctx, canvas, progress) {
+        ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress);
+        const offsetY = progress * canvas.height * .3;
+        ctx.drawImage(canvas, 0, offsetY), ctx.restore();
+      }
+      applyCanvas2DVortex(ctx, canvas, progress) {
+        const centerX = canvas.width / 2,
+          centerY = canvas.height / 2;
+        ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY), ctx.rotate(progress * Math.PI * 2), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
+      }
+    }
+
+    class Glitch extends Canvas2DEffectBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params), this.glitchConfig = {
+          effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "rgb-shift",
+          intensity: void 0 !== (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.intensity) ? params.options.intensity : .5
+        };
+      }
+      applyCanvas2DEffect(canvas) {
+        if (this.glitchConfig.intensity <= 0) {
+          const outputCanvas = this.createOutputCanvas(canvas);
+          return outputCanvas ? outputCanvas.canvas : null;
+        }
+        try {
+          switch (this.glitchConfig.effectType) {
+            case "rgb-shift":
+            default:
+              return this.applyRGBShiftGlitch(canvas);
+            case "digital-distortion":
+              return this.applyDigitalDistortionGlitch(canvas);
+            case "scan-lines":
+              return this.applyScanLineGlitch(canvas);
+            case "data-corruption":
+              return this.applyDataCorruptionGlitch(canvas);
+          }
+        } catch (error) {
+          return null;
+        }
+      }
+      applyRGBShiftGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
+            maxOffset = Math.floor(20 * dynamicIntensity),
+            redOffset = this.generateRandomOffset(maxOffset),
+            greenOffset = this.generateRandomOffset(maxOffset, .3),
+            blueOffset = this.generateRandomOffset(-maxOffset),
+            tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
+            tempCtx = tempCanvas.getContext("2d");
+          tempCtx.drawImage(canvas, 0, 0);
+          const originalImageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height),
+            redChannelData = ImageProcessUtils.extractChannel(originalImageData, 0),
+            greenChannelData = ImageProcessUtils.extractChannel(originalImageData, 1),
+            blueChannelData = ImageProcessUtils.extractChannel(originalImageData, 2);
+          return ctx.globalCompositeOperation = "screen", tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(redChannelData, 0, 0), ctx.drawImage(tempCanvas, redOffset.x, redOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(greenChannelData, 0, 0), ctx.drawImage(tempCanvas, greenOffset.x, greenOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(blueChannelData, 0, 0), ctx.drawImage(tempCanvas, blueOffset.x, blueOffset.y), ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      applyDigitalDistortionGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+            dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
+            distortedImageData = this.processDigitalDistortion(imageData, dynamicIntensity);
+          return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      applyScanLineGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
+            lineSpacing = Math.max(2, Math.floor(10 - 8 * dynamicIntensity));
+          ctx.globalCompositeOperation = "multiply";
+          for (let y = 0; y < canvas.height; y += lineSpacing) if (Math.random() < dynamicIntensity) {
+            const opacity = .1 + .4 * dynamicIntensity;
+            ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`, ctx.fillRect(0, y, canvas.width, 1);
+          }
+          ctx.globalCompositeOperation = "screen";
+          const brightLineCount = Math.floor(20 * dynamicIntensity);
+          for (let i = 0; i < brightLineCount; i++) {
+            const y = Math.random() * canvas.height,
+              opacity = .3 * dynamicIntensity;
+            ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`, ctx.fillRect(0, Math.floor(y), canvas.width, 1);
+          }
+          return ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      applyDataCorruptionGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return null;
+        const {
+          ctx: ctx
+        } = outputCanvas;
+        try {
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+            dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
+            corruptedImageData = this.processDataCorruption(imageData, dynamicIntensity);
+          return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(corruptedImageData, 0, 0), outputCanvas.canvas;
+        } catch (error) {
+          return null;
+        }
+      }
+      generateRandomOffset(maxOffset, scale = 1) {
+        return {
+          x: (Math.random() - .5) * maxOffset,
+          y: (Math.random() - .5) * maxOffset * scale
+        };
+      }
+      processDigitalDistortion(imageData, intensity) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data),
+          sliceCount = Math.floor(20 * intensity) + 5,
+          sliceHeight = Math.floor(height / sliceCount);
+        for (let i = 0; i < sliceCount; i++) if (Math.random() < intensity) {
+          const y = i * sliceHeight,
+            sliceEnd = Math.min(y + sliceHeight, height),
+            offset = Math.floor((Math.random() - .5) * width * intensity * .1);
+          this.shiftSliceHorizontal(result, width, height, y, sliceEnd, offset);
+        }
+        const noiseIntensity = .3 * intensity;
+        for (let i = 0; i < data.length; i += 4) Math.random() < noiseIntensity && (result[i] = 255 * Math.random(), result[i + 1] = 255 * Math.random(), result[i + 2] = 255 * Math.random());
+        return new ImageData(result, width, height);
+      }
+      shiftSliceHorizontal(data, width, height, startY, endY, offset) {
+        const tempRow = new Uint8ClampedArray(4 * width);
+        for (let y = startY; y < endY; y++) {
+          const rowStart = y * width * 4;
+          for (let x = 0; x < 4 * width; x++) tempRow[x] = data[rowStart + x];
+          for (let x = 0; x < width; x++) {
+            const targetIndex = rowStart + 4 * x,
+              sourceIndex = 4 * ((x - offset + width) % width);
+            data[targetIndex] = tempRow[sourceIndex], data[targetIndex + 1] = tempRow[sourceIndex + 1], data[targetIndex + 2] = tempRow[sourceIndex + 2], data[targetIndex + 3] = tempRow[sourceIndex + 3];
+          }
+        }
+      }
+      processDataCorruption(imageData, intensity) {
+        const {
+            data: data,
+            width: width,
+            height: height
+          } = imageData,
+          result = new Uint8ClampedArray(data),
+          stripeCount = Math.floor(15 * intensity) + 5;
+        for (let i = 0; i < stripeCount; i++) if (Math.random() < intensity) {
+          const x = Math.floor(Math.random() * width),
+            stripeWidth = Math.floor(5 * Math.random()) + 1,
+            color = Math.random() < .5 ? 0 : 255;
+          for (let y = 0; y < height; y++) for (let dx = 0; dx < stripeWidth && x + dx < width; dx++) {
+            const index = 4 * (y * width + x + dx);
+            result[index] = color, result[index + 1] = color, result[index + 2] = color;
+          }
+        }
+        const corruptionCount = Math.floor(20 * intensity);
+        for (let i = 0; i < corruptionCount; i++) {
+          const blockX = Math.floor(Math.random() * width),
+            blockY = Math.floor(Math.random() * height),
+            blockW = Math.floor(20 * Math.random()) + 5,
+            blockH = Math.floor(10 * Math.random()) + 2;
+          this.corruptBlock(result, width, height, blockX, blockY, blockW, blockH);
+        }
+        return new ImageData(result, width, height);
+      }
+      corruptBlock(data, width, height, x, y, w, h) {
+        for (let dy = 0; dy < h && y + dy < height; dy++) for (let dx = 0; dx < w && x + dx < width; dx++) {
+          const index = 4 * ((y + dy) * width + (x + dx));
+          Math.random() < .7 && (data[index] = 255 * Math.random(), data[index + 1] = 255 * Math.random(), data[index + 2] = 255 * Math.random());
+        }
+      }
+    }
+
+    class GaussianBlur extends AStageAnimate {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params), this.blurConfig = {
+          blurRadius: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.blurRadius) || 8,
+          useOptimizedBlur: void 0 === (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.useOptimizedBlur) || params.options.useOptimizedBlur
+        };
+      }
+      applyCSSBlur(canvas, radius) {
+        const c = vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vglobal.devicePixelRatio
+          }),
+          ctx = c.getContext("2d");
+        return ctx ? (ctx.filter = `blur(${radius}px)`, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", c) : canvas;
+      }
+      applyDownsampleBlur(imageData, radius) {
+        const {
+            width: width,
+            height: height
+          } = imageData,
+          downsample = Math.max(1, Math.floor(radius / 2)),
+          smallWidth = Math.floor(width / downsample),
+          smallHeight = Math.floor(height / downsample),
+          tempCanvas = vglobal.createCanvas({
+            width: smallWidth,
+            height: smallHeight,
+            dpr: 1
+          }),
+          tempCtx = tempCanvas.getContext("2d");
+        if (!tempCtx) return imageData;
+        const originalCanvas = vglobal.createCanvas({
+            width: width,
+            height: height,
+            dpr: 1
+          }),
+          originalCtx = originalCanvas.getContext("2d");
+        return originalCtx ? (originalCtx.putImageData(imageData, 0, 0), tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight), tempCtx.filter = `blur(${radius / downsample}px)`, tempCtx.drawImage(tempCanvas, 0, 0), tempCtx.filter = "none", originalCtx.clearRect(0, 0, width, height), originalCtx.drawImage(tempCanvas, 0, 0, width, height), originalCtx.getImageData(0, 0, width, height)) : imageData;
+      }
+      afterStageRender(stage, canvas) {
+        if (this.blurConfig.blurRadius <= 0) return canvas;
+        let result;
+        if (this.blurConfig.useOptimizedBlur) result = this.applyCSSBlur(canvas, this.blurConfig.blurRadius);else {
+          const c = vglobal.createCanvas({
+              width: canvas.width,
+              height: canvas.height,
+              dpr: vglobal.devicePixelRatio
+            }),
+            ctx = c.getContext("2d");
+          if (!ctx) return !1;
+          ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0);
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+            blurredImageData = this.applyDownsampleBlur(imageData, this.blurConfig.blurRadius);
+          ctx.putImageData(blurredImageData, 0, 0), result = c;
+        }
+        const ctx = result.getContext("2d");
+        return ctx && (ctx.globalCompositeOperation = "overlay", ctx.fillStyle = "rgba(255, 255, 255, 0.1)", ctx.fillRect(0, 0, result.width, result.height), ctx.globalCompositeOperation = "source-over"), result;
+      }
+    }
+
+    class Pixelation extends DisappearAnimateBase {
+      constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params), this.pixelationConfig = {
+          maxPixelSize: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.maxPixelSize) || 20,
+          method: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.method) || "out"
+        };
+      }
+      applyDownsamplePixelation(canvas, pixelSize) {
+        if (pixelSize <= 1) return canvas;
+        const {
+            width: width,
+            height: height
+          } = canvas,
+          smallWidth = Math.ceil(width / pixelSize),
+          smallHeight = Math.ceil(height / pixelSize),
+          smallCanvas = vglobal.createCanvas({
+            width: smallWidth,
+            height: smallHeight,
+            dpr: 1
+          }),
+          smallCtx = smallCanvas.getContext("2d");
+        if (!smallCtx) return canvas;
+        const outputCanvas = vglobal.createCanvas({
+            width: width,
+            height: height,
+            dpr: vglobal.devicePixelRatio
+          }),
+          outputCtx = outputCanvas.getContext("2d");
+        return outputCtx ? (smallCtx.imageSmoothingEnabled = !1, outputCtx.imageSmoothingEnabled = !1, smallCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight), outputCtx.drawImage(smallCanvas, 0, 0, width, height), outputCanvas) : canvas;
+      }
+      updateAnimationProgress() {
+        if ("in" === this.pixelationConfig.method) {
+          return this.pixelationConfig.maxPixelSize - this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
+        }
+        return 1 + this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
+      }
+      afterStageRender(stage, canvas) {
+        const currentPixelSize = this.updateAnimationProgress();
+        if (currentPixelSize <= 1) return canvas;
+        return this.applyDownsamplePixelation(canvas, currentPixelSize);
+      }
+    }
+
     const registerCustomAnimate = () => {
-      AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
+      AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight), AnimateExecutor.registerBuiltInAnimate("dissolve", Dissolve), AnimateExecutor.registerBuiltInAnimate("grayscale", Grayscale), AnimateExecutor.registerBuiltInAnimate("distortion", Distortion), AnimateExecutor.registerBuiltInAnimate("particle", Particle), AnimateExecutor.registerBuiltInAnimate("glitch", Glitch), AnimateExecutor.registerBuiltInAnimate("gaussianBlur", GaussianBlur), AnimateExecutor.registerBuiltInAnimate("pixelation", Pixelation);
     };
 
     class AxisEnter extends AComponentAnimate {
@@ -33479,6 +34831,25 @@
     function isZeroStyle(style) {
       return 0 === style || isArray$9(style) && style.every(s => 0 === s);
     }
+    function setActiveCellRangeState(table) {
+      const selectRanges = table.stateManager.select.ranges,
+        setRanges = [];
+      for (let i = 0; i < selectRanges.length; i++) {
+        const range = selectRanges[i];
+        setRanges.push({
+          range: range,
+          style: {
+            cellBorderColor: "blue",
+            cellBorderLineWidth: 2,
+            cellBorderLineDash: [5, 5]
+          }
+        });
+      }
+      table.stateManager.setCustomSelectRanges(setRanges);
+    }
+    function clearActiveCellRangeState(table) {
+      table.stateManager.setCustomSelectRanges([]);
+    }
 
     const judgeType$1 = value => {
       switch (Object.prototype.toString.call(value)) {
@@ -33809,6 +35180,7 @@
       DROPDOWN_MENU_CLICK: "dropdown_menu_click",
       MOUSEOVER_CHART_SYMBOL: "mouseover_chart_symbol",
       DRAG_SELECT_END: "drag_select_end",
+      SELECTED_CHANGED: "selected_changed",
       COPY_DATA: "copy_data",
       DROPDOWN_ICON_CLICK: "dropdown_icon_click",
       DROPDOWN_MENU_CLEAR: "dropdown_menu_clear",
@@ -33827,8 +35199,10 @@
       SWITCH_STATE_CHANGE: "switch_state_change",
       BEFORE_SET_SIZE: "before_set_size",
       BEFORE_INIT: "before_init",
+      BEFORE_UPDATE_OPTION: "before_update_option",
       AFTER_RENDER: "after_render",
       INITIALIZED: "initialized",
+      UPDATED: "updated",
       CHANGE_CELL_VALUE: "change_cell_value",
       DRAG_FILL_HANDLE_END: "drag_fill_handle_end",
       MOUSEDOWN_FILL_HANDLE: "mousedown_fill_handle",
@@ -33837,7 +35211,8 @@
       EMPTY_TIP_DBLCLICK: "empty_tip_dblclick",
       BUTTON_CLICK: "button_click",
       BEFORE_CACHE_CHART_IMAGE: "before_cache_chart_image",
-      PASTED_DATA: "pasted_data"
+      PASTED_DATA: "pasted_data",
+      PLUGIN_EVENT: "plugin_event"
     };
 
     const judgeType = value => {
@@ -35409,7 +36784,7 @@
         return hasThemeProperty(obj, names) || hasThemeProperty(superTheme, names);
       }
       extends(obj) {
-        return new TableTheme(ingoreNoneValueMerge({}, obj), ingoreNoneValueMerge(this.internalTheme.superTheme, this.internalTheme.obj));
+        return new TableTheme(ingoreNoneValueMerge({}, obj), ingoreNoneValueMerge({}, this.internalTheme.superTheme, this.internalTheme.obj));
       }
       getStyle(style) {
         const that = this;
@@ -35697,7 +37072,7 @@
       }
       constructor(dataSourceObj, dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
         var _a;
-        super(), this.currentIndexedData = [], this.hierarchyExpandLevel = 0, this.hasHierarchyStateExpand = !1, this.beforeChangedRecordsMap = new Map(), this.registedAggregators = {}, this.rowHierarchyType = "grid", this.fieldAggregators = [], this.registerAggregators(), this.dataSourceObj = dataSourceObj, this.dataConfig = dataConfig, this._get = null == dataSourceObj ? void 0 : dataSourceObj.get, this.columns = columns, this._source = (null == dataSourceObj ? void 0 : dataSourceObj.records) ? this.processRecords(null == dataSourceObj ? void 0 : dataSourceObj.records) : dataSourceObj, this._sourceLength = (null === (_a = this._source) || void 0 === _a ? void 0 : _a.length) || 0, this.sortedIndexMap = new Map(), this._currentPagerIndexedData = [], this.userPagination = pagination, this.pagination = pagination || {
+        super(), this.addRecordRule = "Object", this.currentIndexedData = [], this.hierarchyExpandLevel = 0, this.hasHierarchyStateExpand = !1, this.beforeChangedRecordsMap = new Map(), this.registedAggregators = {}, this.rowHierarchyType = "grid", this.fieldAggregators = [], this.addRecordRule = (null == dataConfig ? void 0 : dataConfig.addRecordRule) || "Object", this.registerAggregators(), this.dataSourceObj = dataSourceObj, this.dataConfig = dataConfig, this._get = null == dataSourceObj ? void 0 : dataSourceObj.get, this.columns = columns, this._source = (null == dataSourceObj ? void 0 : dataSourceObj.records) ? this.processRecords(null == dataSourceObj ? void 0 : dataSourceObj.records) : dataSourceObj, this._sourceLength = (null === (_a = this._source) || void 0 === _a ? void 0 : _a.length) || 0, this.sortedIndexMap = new Map(), this._currentPagerIndexedData = [], this.userPagination = pagination, this.pagination = pagination || {
           totalCount: this._sourceLength,
           perPageCount: this._sourceLength,
           currentPage: 0
@@ -35777,7 +37152,7 @@
         if ((null === (_b = null === (_a = this.dataConfig) || void 0 === _a ? void 0 : _a.filterRules) || void 0 === _b ? void 0 : _b.length) >= 1 || (null === (_c = this.lastFilterRules) || void 0 === _c ? void 0 : _c.length) >= 1 || isHasAggregation) {
           for (let i = 0, len = records.length; i < len; i++) {
             const record = records[i];
-            (null === (_e = null === (_d = this.dataConfig) || void 0 === _d ? void 0 : _d.filterRules) || void 0 === _e ? void 0 : _e.length) >= 1 ? this.filterRecord(record) && (filteredRecords.push(record), "tree" === this.rowHierarchyType && record.children && (record.filteredChildren = this.filteredChildren(record.children)), isHasAggregation && this.processRecord(record)) : (null === (_f = this.lastFilterRules) || void 0 === _f ? void 0 : _f.length) >= 1 ? (this.clearFilteredChildren(record), isHasAggregation && this.processRecord(record)) : isHasAggregation && this.processRecord(record);
+            null != record && ((null === (_e = null === (_d = this.dataConfig) || void 0 === _d ? void 0 : _d.filterRules) || void 0 === _e ? void 0 : _e.length) >= 1 ? this.filterRecord(record) && (filteredRecords.push(record), "tree" === this.rowHierarchyType && record.children && (record.filteredChildren = this.filteredChildren(record.children)), isHasAggregation && this.processRecord(record)) : (null === (_f = this.lastFilterRules) || void 0 === _f ? void 0 : _f.length) >= 1 ? (this.clearFilteredChildren(record), isHasAggregation && this.processRecord(record)) : isHasAggregation && this.processRecord(record));
           }
           if ((null === (_h = null === (_g = this.dataConfig) || void 0 === _g ? void 0 : _g.filterRules) || void 0 === _h ? void 0 : _h.length) >= 1) return filteredRecords;
         }
@@ -35928,7 +37303,7 @@
             let formatValue = value;
             "number" == typeof beforeChangedValue && isAllDigits(value) && (formatValue = parseFloat(value)), isPromise(record) ? record.then(record => {
               record[field] = formatValue;
-            }).catch(err => {}) : record ? record[field] = formatValue : (this.records[dataIndex] = {}, this.records[dataIndex][field] = formatValue);
+            }).catch(err => {}) : record ? record[field] = formatValue : (this.records[dataIndex] = "Array" === this.addRecordRule ? [] : {}, this.records[dataIndex][field] = formatValue);
           }
         }
       }
@@ -36073,10 +37448,21 @@
         const sortedIndexArray = Array.from({
           length: this._sourceLength
         }, (_, i) => i);
-        if (sortedIndexArray.sort((indexA, indexB) => states.reduce((result, state) => {
-          if (0 !== result) return result;
-          return (state.orderFn || ("desc" !== state.order ? (v1, v2) => v1 === v2 ? 0 : v1 > v2 ? 1 : -1 : (v1, v2) => v1 === v2 ? 0 : v1 < v2 ? 1 : -1))(this.getOriginalField(indexA, state.field), this.getOriginalField(indexB, state.field), state.order);
-        }, 0)), this.currentIndexedData = sortedIndexArray, this.hierarchyExpandLevel) {
+        if (sortedIndexArray.sort((indexA, indexB) => {
+          const recordA = this.getOriginalRecord(indexA),
+            recordB = this.getOriginalRecord(indexB),
+            isEmptyA = null == recordA || "object" == typeof recordA && 0 === Object.keys(recordA).length,
+            isEmptyB = null == recordB || "object" == typeof recordB && 0 === Object.keys(recordB).length;
+          return states.reduce((result, state) => {
+            if (0 !== result) return result;
+            if ("asc" === state.order || "desc" === state.order) {
+              if (isEmptyA && !isEmptyB) return 1;
+              if (!isEmptyA && isEmptyB) return -1;
+              if (isEmptyA && isEmptyB) return indexA - indexB;
+            } else if (isEmptyA || isEmptyB) return indexA - indexB;
+            return (state.orderFn || ("desc" !== state.order ? (v1, v2) => v1 === v2 ? 0 : v1 > v2 ? 1 : -1 : (v1, v2) => v1 === v2 ? 0 : v1 < v2 ? 1 : -1))(this.getOriginalField(indexA, state.field), this.getOriginalField(indexB, state.field), state.order);
+          }, 0);
+        }), this.currentIndexedData = sortedIndexArray, this.hierarchyExpandLevel) {
           let nodeLength = sortedIndexArray.length;
           for (let i = 0; i < nodeLength; i++) {
             const record = this.getOriginalRecord(sortedIndexArray[i]),
@@ -39377,6 +40763,28 @@
         y: y
       };
     }
+    function calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table) {
+      let needRowHeader = !1,
+        needRightRowHeader = !1,
+        needColumnHeader = !1,
+        needBottomColumnHeader = !1,
+        needBody = !1,
+        needCornerHeader = !1,
+        needRightTopCornerHeader = !1,
+        needRightBottomCornerHeader = !1,
+        needLeftBottomCornerHeader = !1;
+      return startCol <= table.frozenColCount - 1 && startRow <= table.frozenRowCount - 1 && (needCornerHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && startRow <= table.frozenRowCount - 1 && (needRightTopCornerHeader = !0), startCol <= table.frozenColCount - 1 && endRow >= table.rowCount - table.bottomFrozenRowCount && (needLeftBottomCornerHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.rowCount - table.bottomFrozenRowCount && (needRightBottomCornerHeader = !0), startCol <= table.frozenColCount - 1 && endRow >= table.frozenRowCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && (needRowHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.frozenRowCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && (needRightRowHeader = !0), startRow <= table.frozenRowCount - 1 && endCol >= table.frozenColCount && startCol <= table.colCount - table.rightFrozenColCount - 1 && (needColumnHeader = !0), endRow >= table.rowCount - table.bottomFrozenRowCount && endCol >= table.frozenColCount && startCol <= table.colCount - table.rightFrozenColCount - 1 && (needBottomColumnHeader = !0), startCol <= table.colCount - table.rightFrozenColCount - 1 && endCol >= table.frozenColCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && endRow >= table.frozenRowCount && (needBody = !0), {
+        needRowHeader: needRowHeader,
+        needRightRowHeader: needRightRowHeader,
+        needColumnHeader: needColumnHeader,
+        needBottomColumnHeader: needBottomColumnHeader,
+        needBody: needBody,
+        needCornerHeader: needCornerHeader,
+        needRightTopCornerHeader: needRightTopCornerHeader,
+        needLeftBottomCornerHeader: needLeftBottomCornerHeader,
+        needRightBottomCornerHeader: needRightBottomCornerHeader
+      };
+    }
 
     function getProp(name, cellStyle, col, row, _table) {
       const prop = cellStyle && isValid$5(cellStyle[name]) ? cellStyle[name] : void 0;
@@ -40228,7 +41636,7 @@
           cornerRadius: null !== (_o = null === (_m = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _m ? void 0 : _m.cornerRadius) && void 0 !== _o ? _o : 0,
           lineDash: null !== (_q = null === (_p = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _p ? void 0 : _p.lineDash) && void 0 !== _q ? _q : void 0,
           y: table.scenegraph.getCellGroupY(row)
-        }), oldCellGroup.forEachChildren(child => {
+        }), oldCellGroup.mergeStartCol = void 0, oldCellGroup.mergeStartRow = void 0, oldCellGroup.mergeEndCol = void 0, oldCellGroup.mergeEndRow = void 0, oldCellGroup.forEachChildren(child => {
           child.setAttributes({
             dx: 0,
             dy: 0
@@ -42337,7 +43745,7 @@
           height: this.table.getDrawRange().height
         });
       }
-      setBottonFrozenColumnShadow() {
+      setBottomFrozenColumnShadow() {
         var _a, _b, _c, _d, _e;
         const rowY = getRowBottomY(this.table);
         0 === this.table.bottomFrozenRowCount || "always" !== (null === (_b = null === (_a = this.table.theme.frozenColumnLine) || void 0 === _a ? void 0 : _a.shadow) || void 0 === _b ? void 0 : _b.visible) ? this.bottonFrozenShadowLine.setAttributes({
@@ -43929,7 +45337,9 @@
           const newColWidth = table.getColWidth(col);
           newColWidth !== oldColWidths[col] && table.scenegraph.updateColWidth(col, newColWidth - oldColWidths[col], !0, !0);
         }
-        table.scenegraph.updateContainer(!0);
+        table.scenegraph.updateContainer({
+          async: !0
+        });
       }
       table.isPivotTable() && (layoutMap.disableUseGetBodyCache(), layoutMap.disableUseHeaderPathCache());
     }
@@ -44484,7 +45894,7 @@
       }
     }
 
-    var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -44510,7 +45920,7 @@
       });
     };
     function dynamicSetX(x, screenLeft, isEnd, proxy) {
-      return __awaiter$6(this, void 0, void 0, function* () {
+      return __awaiter$7(this, void 0, void 0, function* () {
         if (!screenLeft) return;
         const screenLeftCol = screenLeft.col,
           screenLeftX = screenLeft.left;
@@ -44529,7 +45939,7 @@
       deltaCol > 0 ? (moveColumn(deltaCol, "left", proxy.screenLeftCol, screenLeftX, x, proxy), proxy.updateDeltaX(x, screenLeftX, screenLeftCol), proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX)) : deltaCol < 0 ? (moveColumn(-deltaCol, "right", proxy.screenLeftCol, screenLeftX, x, proxy), proxy.updateDeltaX(x, screenLeftX, screenLeftCol), proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX)) : (proxy.updateDeltaX(x, screenLeftX, screenLeftCol), proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX));
     }
     function moveColumn(count, direction, screenLeftCol, screenLeftX, x, proxy) {
-      return __awaiter$6(this, void 0, void 0, function* () {
+      return __awaiter$7(this, void 0, void 0, function* () {
         if ("left" === direction && proxy.colEnd + count > proxy.bodyRightCol ? count = proxy.bodyRightCol - proxy.colEnd : "right" === direction && proxy.colStart - count < proxy.bodyLeftCol && (count = proxy.colStart - proxy.bodyLeftCol), 0 !== count) if (count < 0 && (direction = "left" === direction ? "right" : "left", count = -count), count < proxy.colEnd - proxy.colStart) {
           const startCol = "left" === direction ? proxy.colStart : proxy.colEnd - count + 1,
             endCol = "left" === direction ? proxy.colStart + count - 1 : proxy.colEnd,
@@ -44660,7 +46070,7 @@
       return y = row < table.frozenRowCount ? table.getRowsHeight(0, row - 1) : row >= table.rowCount - table.bottomFrozenRowCount ? table.getRowsHeight(table.rowCount - table.bottomFrozenRowCount, row - 1) : table.getRowsHeight(table.frozenRowCount, row - 1), y;
     }
 
-    var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -44686,7 +46096,7 @@
       });
     };
     function dynamicSetY(y, screenTop, isEnd, proxy) {
-      return __awaiter$5(this, void 0, void 0, function* () {
+      return __awaiter$6(this, void 0, void 0, function* () {
         if (!screenTop) return;
         const screenTopRow = screenTop.row,
           screenTopY = screenTop.top;
@@ -44704,7 +46114,7 @@
       deltaRow > 0 ? (moveCell(deltaRow, "up", screenTopRow, screenTopY, y, proxy), proxy.updateDeltaY(y, screenTopY, screenTopRow), proxy.updateBody(y - proxy.deltaY)) : deltaRow < 0 ? (moveCell(-deltaRow, "down", screenTopRow, screenTopY, y, proxy), proxy.updateDeltaY(y, screenTopY, screenTopRow), proxy.updateBody(y - proxy.deltaY)) : (proxy.updateDeltaY(y, screenTopY, screenTopRow), proxy.updateBody(y - proxy.deltaY));
     }
     function moveCell(count, direction, screenTopRow, screenTopY, y, proxy) {
-      return __awaiter$5(this, void 0, void 0, function* () {
+      return __awaiter$6(this, void 0, void 0, function* () {
         if ("up" === direction && proxy.rowEnd + count > proxy.bodyBottomRow ? count = proxy.bodyBottomRow - proxy.rowEnd : "down" === direction && proxy.rowStart - count < proxy.bodyTopRow && (count = proxy.rowStart - proxy.bodyTopRow), 0 !== count) if (count < 0 && (direction = "up" === direction ? "down" : "up", count = -count), count < proxy.rowEnd - proxy.rowStart) {
           const startRow = "up" === direction ? proxy.rowStart : proxy.rowEnd - count + 1,
             endRow = "up" === direction ? proxy.rowStart + count - 1 : proxy.rowEnd,
@@ -44804,7 +46214,7 @@
       }
     }
 
-    var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -44831,7 +46241,7 @@
     };
     function sortVertical(proxy) {
       var _a;
-      return __awaiter$4(this, void 0, void 0, function* () {
+      return __awaiter$5(this, void 0, void 0, function* () {
         let syncTopRow, syncBottomRow;
         proxy.table.scenegraph.bodyGroup.forEachChildren((colGroup, index) => {
           "group" === colGroup.type && (colGroup.needUpdate = !0, null == colGroup || colGroup.forEachChildren(cellGroup => {
@@ -44863,7 +46273,7 @@
       });
     }
 
-    var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -44889,7 +46299,7 @@
       });
     };
     function sortHorizontal(proxy) {
-      return __awaiter$3(this, void 0, void 0, function* () {
+      return __awaiter$4(this, void 0, void 0, function* () {
         proxy.table.scenegraph.bodyGroup.forEachChildren((colGroup, index) => {
           "group" === colGroup.type && (colGroup.needUpdate = !0, null == colGroup || colGroup.forEachChildren(cellGroup => {
             cellGroup.needUpdate = !0;
@@ -45128,7 +46538,7 @@
       return !!(table.theme.headerStyle.textStick || table.theme.rowHeaderStyle.textStick || table.theme.bodyStyle.textStick);
     }
 
-    var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -45211,21 +46621,21 @@
         createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin, this);
       }
       progress() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           if (!this.isProgressing) return this.isProgressing = !0, new Promise((resolve, reject) => {
-            setTimeout(() => __awaiter$2(this, void 0, void 0, function* () {
+            setTimeout(() => __awaiter$3(this, void 0, void 0, function* () {
               this.isProgressing = !1, this.isRelease || (this.colUpdatePos <= this.colEnd ? (yield this.updateColCellGroupsAsync(), yield this.progress()) : this.rowUpdatePos <= this.rowEnd ? (yield this.updateRowCellGroupsAsync(), yield this.progress()) : this.currentCol < this.totalCol ? (yield this.createCol(), yield this.progress()) : this.currentRow < this.totalRow && (yield this.createRow(), yield this.progress()), handleTextStick(this.table), this.table.scenegraph.updateNextFrame(), resolve());
             }), 16);
           });
         });
       }
       createRow() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           this.taskRowCount && this.createRowCellGroup(this.taskRowCount);
         });
       }
       createCol() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           this.taskColCount && this.createColGroup(this.taskRowCount);
         });
       }
@@ -45289,7 +46699,7 @@
         createColGroup(this.table.scenegraph.bodyGroup, xOrigin, yOrigin, this.currentCol + 1, endCol, this.rowStart, this.rowEnd, "body", this.table), this.currentCol = endCol, this.colUpdatePos = this.colEnd, this.table.scenegraph.updateContainer(), this.table.scenegraph.updateBorderSizeAndPosition();
       }
       setY(y, isEnd = !1) {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           const yLimitTop = this.table.getRowsHeight(this.bodyTopRow, this.bodyTopRow + (this.rowEnd - this.rowStart + 1)) / 2,
             yLimitBottom = this.table.getAllRowsHeight() - yLimitTop,
             screenTop = this.table.getTargetRowAt(y + this.table.scenegraph.colHeaderGroup.attribute.height);
@@ -45297,7 +46707,7 @@
         });
       }
       setX(x, isEnd = !1) {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           const xLimitLeft = this.table.getColsWidth(this.bodyLeftCol, this.bodyLeftCol + (this.colEnd - this.colStart + 1)) / 2,
             xLimitRight = this.table.getAllColsWidth() - xLimitLeft,
             screenLeft = this.table.getTargetColAt(x + this.table.scenegraph.rowHeaderGroup.attribute.width);
@@ -45305,12 +46715,12 @@
         });
       }
       dynamicSetY(y, screenTop, isEnd = !1) {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           dynamicSetY(y, screenTop, isEnd, this);
         });
       }
       dynamicSetX(x, screenLeft, isEnd = !1) {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           dynamicSetX(x, screenLeft, isEnd, this);
         });
       }
@@ -45318,7 +46728,7 @@
         this.table.scenegraph.setBodyAndRowHeaderY(-y);
       }
       updateRowCellGroupsAsync() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           this.updateCellGroups(this.taskRowCount);
         });
       }
@@ -45337,7 +46747,7 @@
         "autoWidth" === this.table.widthMode && computeColsWidth(this.table, startCol, endCol, !1), updateColContent(startCol, endCol, this), this.table.isAutoRowHeight(this.rowStart) && updateAutoColumn(startCol, endCol, this.table, this.colUpdateDirection);
       }
       updateColCellGroupsAsync() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           this.updateColGroups(this.taskRowCount);
         });
       }
@@ -45354,12 +46764,12 @@
         return cellGroup.needUpdate = !1, newCellGroup || cellGroup;
       }
       sortCellVertical() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           yield sortVertical(this);
         });
       }
       sortCellHorizontal() {
-        return __awaiter$2(this, void 0, void 0, function* () {
+        return __awaiter$3(this, void 0, void 0, function* () {
           yield sortHorizontal(this);
         });
       }
@@ -45704,16 +47114,18 @@
         var _a;
         selectComp.rect.delete(), null === (_a = selectComp.fillhandle) || void 0 === _a || _a.delete();
       }), scene.selectingRangeComponents = new Map();
-      let needRowHeader = !1,
-        needRightRowHeader = !1,
-        needColumnHeader = !1,
-        needBottomColumnHeader = !1,
-        needBody = !1,
-        needCornerHeader = !1,
-        needRightTopCornerHeader = !1,
-        needRightBottomCornerHeader = !1,
-        needLeftBottomCornerHeader = !1;
-      if (startCol <= table.frozenColCount - 1 && startRow <= table.frozenRowCount - 1 && (needCornerHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && startRow <= table.frozenRowCount - 1 && (needRightTopCornerHeader = !0), startCol <= table.frozenColCount - 1 && endRow >= table.rowCount - table.bottomFrozenRowCount && (needLeftBottomCornerHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.rowCount - table.bottomFrozenRowCount && (needRightBottomCornerHeader = !0), startCol <= table.frozenColCount - 1 && endRow >= table.frozenRowCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && (needRowHeader = !0), endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.frozenRowCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && (needRightRowHeader = !0), startRow <= table.frozenRowCount - 1 && endCol >= table.frozenColCount && startCol <= table.colCount - table.rightFrozenColCount - 1 && (needColumnHeader = !0), endRow >= table.rowCount - table.bottomFrozenRowCount && endCol >= table.frozenColCount && startCol <= table.colCount - table.rightFrozenColCount - 1 && (needBottomColumnHeader = !0), startCol <= table.colCount - table.rightFrozenColCount - 1 && endCol >= table.frozenColCount && startRow <= table.rowCount - table.bottomFrozenRowCount - 1 && endRow >= table.frozenRowCount && (needBody = !0), needCornerHeader) {
+      const {
+        needRowHeader: needRowHeader,
+        needRightRowHeader: needRightRowHeader,
+        needColumnHeader: needColumnHeader,
+        needBottomColumnHeader: needBottomColumnHeader,
+        needBody: needBody,
+        needCornerHeader: needCornerHeader,
+        needRightTopCornerHeader: needRightTopCornerHeader,
+        needLeftBottomCornerHeader: needLeftBottomCornerHeader,
+        needRightBottomCornerHeader: needRightBottomCornerHeader
+      } = calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table);
+      if (needCornerHeader) {
         const cornerEndCol = Math.min(endCol, table.frozenColCount - 1),
           cornerEndRow = Math.min(endRow, table.frozenRowCount - 1),
           strokeArray = [!0, !needColumnHeader, !needRowHeader, !0];
@@ -46225,7 +47637,7 @@
         scene.bodyGroup.setAttribute("height", scene.rowHeaderGroup.attribute.height), scene.bodyGroup.setAttribute("y", scene.rowHeaderGroup.attribute.y), scene.colHeaderGroup.setAttribute("height", scene.cornerHeaderGroup.attribute.height);
         for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) moveColumnFromRowHeaderToBody(scene), moveColumnFromCornerHeaderToColHeader(scene), moveColumnFromLeftBottomCornerToBottom(scene);
       }
-      scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.frozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.component.setBottonFrozenColumnShadow(), scene.component.setTopFrozenColumnShadow(), scene.hasFrozen = !0, scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount;
+      scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.frozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.component.setBottomFrozenColumnShadow(), scene.component.setTopFrozenColumnShadow(), scene.hasFrozen = !0, scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount;
     }
     function resetFrozen(scene) {
       var _a, _b, _c, _d, _e, _f;
@@ -46236,7 +47648,7 @@
         scene.rowHeaderGroup.setAttribute("height", scene.bodyGroup.attribute.height), scene.rowHeaderGroup.setAttribute("y", scene.bodyGroup.attribute.y), scene.cornerHeaderGroup.setAttribute("height", scene.colHeaderGroup.attribute.height);
         for (let i = 0; i < scene.table.frozenColCount - scene.frozenColCount; i++) moveColumnFromBodyToRowHeader(scene), moveColumnFromColHeaderToCornerHeader(scene), moveColumnFromBottomToLeftBottomCorner(scene);
       }
-      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount, scene.proxy.colStart = null !== (_f = null === (_e = scene.bodyGroup.firstChild) || void 0 === _e ? void 0 : _e.col) && void 0 !== _f ? _f : scene.table.frozenColCount, scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.rightFrozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.component.setBottonFrozenColumnShadow(), scene.component.setTopFrozenColumnShadow(), scene.hasFrozen = !0;
+      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount, scene.proxy.colStart = null !== (_f = null === (_e = scene.bodyGroup.firstChild) || void 0 === _e ? void 0 : _e.col) && void 0 !== _f ? _f : scene.table.frozenColCount, scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.rightFrozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.component.setBottomFrozenColumnShadow(), scene.component.setTopFrozenColumnShadow(), scene.hasFrozen = !0;
     }
     function moveColumnFromBodyToRowHeader(scene) {
       const column = scene.bodyGroup.firstChild instanceof Group$1 ? scene.bodyGroup.firstChild : null;
@@ -46418,7 +47830,9 @@
         scene.colHeaderGroup.setAttribute("width", scene.bodyGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.bodyGroup.attribute.x), scene.cornerHeaderGroup.setAttribute("width", scene.rowHeaderGroup.attribute.width);
         for (let i = 0; i < scene.table.frozenRowCount - scene.frozenRowCount; i++) moveRowFromBodyToColHeader(scene), moveRowFromRowHeaderToCornerHeader(scene), moveRowFromRightToTopRightCorner(scene);
       }
-      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenRowCount = scene.table.frozenRowCount, scene.frozenColCount = null !== (_b = null === (_a = scene.rowHeaderGroup) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : 0, scene.proxy.rowStart = null !== (_e = null === (_d = null === (_c = scene.bodyGroup.firstChild) || void 0 === _c ? void 0 : _c.firstChild) || void 0 === _d ? void 0 : _d.row) && void 0 !== _e ? _e : scene.table.frozenRowCount, scene.bodyGroup.setAttribute("y", scene.colHeaderGroup.attribute.height), scene.rowHeaderGroup.setAttribute("y", scene.cornerHeaderGroup.attribute.height), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.hasFrozen = !0;
+      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenRowCount = scene.table.frozenRowCount, scene.frozenColCount = null !== (_b = null === (_a = scene.rowHeaderGroup) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : 0, scene.proxy.rowStart = null !== (_e = null === (_d = null === (_c = scene.bodyGroup.firstChild) || void 0 === _c ? void 0 : _c.firstChild) || void 0 === _d ? void 0 : _d.row) && void 0 !== _e ? _e : scene.table.frozenRowCount, scene.bodyGroup.setAttribute("y", scene.colHeaderGroup.attribute.height), scene.rowHeaderGroup.setAttribute("y", scene.cornerHeaderGroup.attribute.height), scene.updateContainer({
+        needUpdateCellY: !0
+      }), scene.updateBorderSizeAndPosition(), scene.hasFrozen = !0;
     }
     function moveRowFromBodyToColHeader(scene) {
       var _a;
@@ -46427,7 +47841,7 @@
         const child = scene.bodyGroup.children[i];
         if (!checkBeforeMove(child)) continue;
         const rowCell = child.firstChild;
-        null === (_a = scene.colHeaderGroup.children[i]) || void 0 === _a || _a.appendChild(rowCell), hasSetedHeight || (scene.colHeaderGroup.setAttribute("height", scene.colHeaderGroup.attribute.height + rowCell.attribute.height), scene.bodyGroup.setAttribute("height", scene.bodyGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
+        scene.colHeaderGroup.children[i] || createColGroup(scene.colHeaderGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, "columnHeader", scene.table), null === (_a = scene.colHeaderGroup.children[i]) || void 0 === _a || _a.appendChild(rowCell), hasSetedHeight || (scene.colHeaderGroup.setAttribute("height", scene.colHeaderGroup.attribute.height + rowCell.attribute.height), scene.bodyGroup.setAttribute("height", scene.bodyGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
       }
     }
     function moveRowFromRowHeaderToCornerHeader(scene) {
@@ -46437,17 +47851,16 @@
         const child = scene.rowHeaderGroup.children[i];
         if (!checkBeforeMove(child)) continue;
         const rowCell = child.firstChild;
-        null === (_a = scene.cornerHeaderGroup.children[i]) || void 0 === _a || _a.appendChild(rowCell), hasSetedHeight || (scene.cornerHeaderGroup.setAttribute("height", scene.cornerHeaderGroup.attribute.height + rowCell.attribute.height), scene.rowHeaderGroup.setAttribute("height", scene.rowHeaderGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
+        scene.cornerHeaderGroup.children[i] || createColGroup(scene.cornerHeaderGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, scene.table.isListTable() ? "columnHeader" : "cornerHeader", scene.table), null === (_a = scene.cornerHeaderGroup.children[i]) || void 0 === _a || _a.appendChild(rowCell), hasSetedHeight || (scene.cornerHeaderGroup.setAttribute("height", scene.cornerHeaderGroup.attribute.height + rowCell.attribute.height), scene.rowHeaderGroup.setAttribute("height", scene.rowHeaderGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
       }
     }
     function moveRowFromRightToTopRightCorner(scene) {
-      var _a;
       let hasSetedHeight = !1;
       for (let i = 0; i < scene.rightFrozenGroup.childrenCount; i++) {
         const child = scene.rightFrozenGroup.children[i];
         if (!checkBeforeMove(child)) continue;
         const rowCell = child.firstChild;
-        null === (_a = scene.rightTopCornerGroup.children[i]) || void 0 === _a || _a.appendChild(rowCell), hasSetedHeight || (scene.rightTopCornerGroup.setAttribute("height", scene.rightTopCornerGroup.attribute.height + rowCell.attribute.height), scene.rightFrozenGroup.setAttribute("height", scene.rightFrozenGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
+        scene.rightTopCornerGroup.children[i] || createColGroup(scene.rightTopCornerGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, "columnHeader", scene.table), scene.rightTopCornerGroup.children[i].appendChild(rowCell), hasSetedHeight || (scene.rightTopCornerGroup.setAttribute("height", scene.rightTopCornerGroup.attribute.height + rowCell.attribute.height), scene.rightFrozenGroup.setAttribute("height", scene.rightFrozenGroup.attribute.height - rowCell.attribute.height), hasSetedHeight = !0);
       }
     }
     function moveRowFromColHeaderToBody(scene) {
@@ -46754,6 +48167,11 @@
         column.setAttribute("x", x), x += column.attribute.width;
       }), x;
     }
+    function updateContainerChildrenY(containerGroup, y) {
+      return containerGroup.forEachChildrenSkipChild((row, index) => {
+        row.setAttribute("y", y), y += row.attribute.height;
+      }), y;
+    }
 
     function hideHoverIcon(col, row, scene) {
       -1 !== col && -1 !== row && (updateCellRangeIcon(col, row, icon => "mouseenter_cell" === icon.attribute.visibleTime, icon => {
@@ -47462,7 +48880,9 @@
         });
       }
       updateColWidth(col, detaX, skipUpdateContainer, skipTableWidthMap) {
-        updateColWidth(this, col, Math.round(detaX), skipTableWidthMap), skipUpdateContainer || this.updateContainer(!0);
+        updateColWidth(this, col, Math.round(detaX), skipTableWidthMap), skipUpdateContainer || this.updateContainer({
+          async: !0
+        });
       }
       updateChartSizeForResizeColWidth(col) {
         updateChartSizeForResizeColWidth(this, col);
@@ -47636,7 +49056,7 @@
       }
       afterScenegraphCreated() {
         var _a;
-        this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount ? this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : this.component.setFrozenColumnShadow(-1) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottonFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.table.stateManager.checkFrozen(), this.updateContainer(), this.createFrameBorder(), this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), handleTextStick(this.table), this.table.options.animationAppear && dealWithAnimationAppear(this.table), !1 === (null === (_a = this.table.options.menu) || void 0 === _a ? void 0 : _a.contextMenuWorkOnlyCell) && this.canvasShowMenu(), this.updateNextFrame();
+        this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount ? this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : this.component.setFrozenColumnShadow(-1) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottomFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.table.stateManager.checkFrozen(), this.updateContainer(), this.createFrameBorder(), this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), handleTextStick(this.table), this.table.options.animationAppear && dealWithAnimationAppear(this.table), !1 === (null === (_a = this.table.options.menu) || void 0 === _a ? void 0 : _a.contextMenuWorkOnlyCell) && this.canvasShowMenu(), this.updateNextFrame();
       }
       dealWidthMode() {
         const table = this.table;
@@ -47766,13 +49186,30 @@
           rightX = updateContainerChildrenX(this.rightFrozenGroup.childrenCount > 0 ? this.rightFrozenGroup : this.rightTopCornerGroup, 0);
         this.bottomFrozenGroup.hasChildNodes() && this.bottomFrozenGroup.firstChild && updateContainerChildrenX(this.bottomFrozenGroup, this.bottomFrozenGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_c = this.table.frozenColCount) && void 0 !== _c ? _c : 0, this.bottomFrozenGroup.firstChild.col - 1) : 0), updateContainerChildrenX(this.leftBottomCornerGroup, 0), updateContainerChildrenX(this.rightTopCornerGroup, 0), updateContainerChildrenX(this.rightBottomCornerGroup, 0), this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width), this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width), this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width), this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width), this.bottomFrozenGroup.setDeltaWidth(colHeaderX - this.bottomFrozenGroup.attribute.width), this.rightFrozenGroup.setDeltaWidth(rightX - this.rightFrozenGroup.attribute.width), this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width), this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width), this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width), this.colHeaderGroup.setAttribute("x", this.cornerHeaderGroup.attribute.width), this.bottomFrozenGroup.setAttribute("x", this.table.getFrozenColsWidth()), this.bodyGroup.setAttribute("x", this.rowHeaderGroup.attribute.width);
       }
-      updateContainer(async = !1) {
-        async ? this._needUpdateContainer || (this._needUpdateContainer = !0, setTimeout(() => {
-          this.updateContainerSync();
-        }, 0)) : (this._needUpdateContainer = !0, this.updateContainerSync());
+      updateContainerAttrHeightAndY() {
+        var _a, _b, _c;
+        for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) updateContainerChildrenY(this.cornerHeaderGroup.children[i], 0);
+        for (let i = 0; i < this.colHeaderGroup.children.length; i++) updateContainerChildrenY(this.colHeaderGroup.children[i], 0);
+        for (let i = 0; i < this.rightTopCornerGroup.children.length; i++) updateContainerChildrenY(this.rightTopCornerGroup.children[i], 0);
+        for (let i = 0; i < this.rowHeaderGroup.children.length; i++) this.rowHeaderGroup.children[i].firstChild && updateContainerChildrenY(this.rowHeaderGroup.children[i], this.rowHeaderGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, this.rowHeaderGroup.children[i].firstChild.row - 1) : 0);
+        for (let i = 0; i < this.bodyGroup.children.length; i++) this.bodyGroup.children[i].firstChild && updateContainerChildrenY(this.bodyGroup.children[i], this.bodyGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_b = this.table.frozenRowCount) && void 0 !== _b ? _b : 0, this.bodyGroup.children[i].firstChild.row - 1) : 0);
+        for (let i = 0; i < this.rightFrozenGroup.children.length; i++) this.rightFrozenGroup.children[i].firstChild && updateContainerChildrenY(this.rightFrozenGroup.children[i], this.rightFrozenGroup.children[i].firstChild.row > 0 ? this.table.getRowsHeight(null !== (_c = this.table.frozenRowCount) && void 0 !== _c ? _c : 0, this.rightFrozenGroup.children[i].firstChild.row - 1) : 0);
+        for (let i = 0; i < this.leftBottomCornerGroup.children.length; i++) updateContainerChildrenY(this.leftBottomCornerGroup.children[i], 0);
+        for (let i = 0; i < this.bottomFrozenGroup.children.length; i++) updateContainerChildrenY(this.bottomFrozenGroup.children[i], 0);
+        for (let i = 0; i < this.rightBottomCornerGroup.children.length; i++) updateContainerChildrenY(this.rightBottomCornerGroup.children[i], 0);
+      }
+      updateContainer(updateConfig = {
+        async: !1,
+        needUpdateCellY: !1
+      }) {
+        var _a;
+        updateConfig.async ? this._needUpdateContainer || (this._needUpdateContainer = !0, setTimeout(() => {
+          var _a;
+          this.updateContainerSync(null !== (_a = updateConfig.needUpdateCellY) && void 0 !== _a && _a);
+        }, 0)) : (this._needUpdateContainer = !0, this.updateContainerSync(null !== (_a = updateConfig.needUpdateCellY) && void 0 !== _a && _a));
       }
-      updateContainerSync() {
-        this._needUpdateContainer && (this._needUpdateContainer = !1, this.updateContainerAttrWidthAndX(), this.updateTableSize(), this.component.updateScrollBar(), this.updateNextFrame());
+      updateContainerSync(needUpdateCellY = !1) {
+        this._needUpdateContainer && (this._needUpdateContainer = !1, this.updateContainerAttrWidthAndX(), needUpdateCellY && this.updateContainerAttrHeightAndY(), this.updateTableSize(), this.component.updateScrollBar(), this.updateNextFrame());
       }
       updateCellContentWhileResize(col, row) {
         var _a;
@@ -47883,10 +49320,10 @@
             newHeight = computeRowHeight(row, 0, this.table.colCount - 1, this.table);
           (row >= this.proxy.rowStart && row <= this.proxy.rowEnd || row >= this.table.rowCount - this.table.bottomFrozenRowCount && row <= this.table.rowCount - 1) && this.table.scenegraph.updateRowHeight(row, newHeight - oldHeight);
         }
-        this.table.stateManager.checkFrozen(), this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount && this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottonFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.component.updateScrollBar(), this.updateNextFrame();
+        this.table.stateManager.checkFrozen(), this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount && this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottomFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.component.updateScrollBar(), this.updateNextFrame();
       }
       updateCol(removeCells, addCells, updateCells = [], recalculateColWidths = !0) {
-        updateCol(removeCells, addCells, updateCells, this.table), recalculateColWidths && this.recalculateColWidths(), this.recalculateRowHeights(), this.table.stateManager.checkFrozen(), this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount && this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottonFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.component.updateScrollBar(), this.updateNextFrame();
+        updateCol(removeCells, addCells, updateCells, this.table), recalculateColWidths && this.recalculateColWidths(), this.recalculateRowHeights(), this.table.stateManager.checkFrozen(), this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount && this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount), this.component.setBottomFrozenColumnShadow(), this.component.setTopFrozenColumnShadow()), this.component.updateScrollBar(), this.updateNextFrame();
       }
       updateCornerHeaderCells() {
         for (let col = 0; col < this.table.frozenColCount; col++) for (let row = 0; row < this.table.frozenRowCount; row++) updateCell$1(col, row, this.table, !1);
@@ -48086,7 +49523,7 @@
           cellPos: cellPos,
           disableCtrlMultiSelect: disableCtrlMultiSelect
         } = state.select;
-      if (-1 !== col && -1 !== row && makeSelectCellVisible && table._makeVisibleCell(col, row), -1 !== col && -1 !== row && makeSelectCellVisible) if (interactionState === InteractionState.grabing && state.select.ranges.length > 0) {
+      if (state.select.isSelectAll = isSelectAll, -1 !== col && -1 !== row && makeSelectCellVisible && table._makeVisibleCell(col, row), -1 !== col && -1 !== row && makeSelectCellVisible) if (interactionState === InteractionState.grabing && state.select.ranges.length > 0) {
         const currentRange = state.select.ranges[state.select.ranges.length - 1];
         col > currentRange.start.col && col > currentRange.end.col && table._makeVisibleCell(col + 1, row), row > currentRange.start.row && row > currentRange.end.row && table._makeVisibleCell(col, row + 1), col < currentRange.start.col && col < currentRange.end.col && table._makeVisibleCell(col - 1, row), row < currentRange.start.row && row < currentRange.end.row && table._makeVisibleCell(col, row - 1);
       } else table._makeVisibleCell(col, row);
@@ -48713,7 +50150,7 @@
       }
       return state.columnMove.moving = !1, setTimeout(() => {
         delete state.columnMove.colSource, delete state.columnMove.rowSource, delete state.columnMove.colTarget, delete state.columnMove.rowTarget;
-      }, 0), state.table.scenegraph.component.hideMoveCol(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? (state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen), state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount)) : state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount) : state.table.options.frozenColCount ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1) : state.table.options.rightFrozenColCount && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.component.setBottonFrozenColumnShadow(), state.table.scenegraph.component.setTopFrozenColumnShadow(), state.table.scenegraph.updateNextFrame(), !0 === (null === (_b = state.table.options.customConfig) || void 0 === _b ? void 0 : _b.notUpdateInColumnRowMove) || moveColResult;
+      }, 0), state.table.scenegraph.component.hideMoveCol(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? (state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen), state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount)) : state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount) : state.table.options.frozenColCount ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1) : state.table.options.rightFrozenColCount && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.component.setBottomFrozenColumnShadow(), state.table.scenegraph.component.setTopFrozenColumnShadow(), state.table.scenegraph.updateNextFrame(), !0 === (null === (_b = state.table.options.customConfig) || void 0 === _b ? void 0 : _b.notUpdateInColumnRowMove) || moveColResult;
     }
     function clearWidthsAndHeightsCache(colMin, colMax, rowMin, rowMax, table) {
       for (let col = colMin; col <= colMax; col++) table._clearColRangeWidthsMap(col);
@@ -48774,7 +50211,7 @@
         }
         rightColWidth - detaX < state.table.internalProps.limitMinWidth && (detaX = rightColWidth - state.table.internalProps.limitMinWidth);
       }
-      detaX = Math.ceil(detaX), state.columnResize.col < state.table.rowHeaderLevelCount || state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount ? updateResizeColForColumn(detaX, state) : "indicator" === state.table.internalProps.columnResizeType ? updateResizeColForIndicator$1(detaX, state) : "indicatorGroup" === state.table.internalProps.columnResizeType ? updateResizeColForIndicatorGroup$1(detaX, state) : "all" === state.table.internalProps.columnResizeType ? updateResizeColForAll$1(detaX, state) : updateResizeColForColumn(detaX, state), state.columnResize.x = xInTable, state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen), state.table._updateSize(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen) : state.table.options.frozenColCount && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1), (state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose || state.table.options.rightFrozenColCount) && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.component.setBottonFrozenColumnShadow(), state.table.scenegraph.component.setTopFrozenColumnShadow(), state.table.scenegraph.updateNextFrame();
+      detaX = Math.ceil(detaX), state.columnResize.col < state.table.rowHeaderLevelCount || state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount ? updateResizeColForColumn(detaX, state) : "indicator" === state.table.internalProps.columnResizeType ? updateResizeColForIndicator$1(detaX, state) : "indicatorGroup" === state.table.internalProps.columnResizeType ? updateResizeColForIndicatorGroup$1(detaX, state) : "all" === state.table.internalProps.columnResizeType ? updateResizeColForAll$1(detaX, state) : updateResizeColForColumn(detaX, state), state.columnResize.x = xInTable, state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen), state.table._updateSize(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen) : state.table.options.frozenColCount && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1), (state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose || state.table.options.rightFrozenColCount) && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.component.setBottomFrozenColumnShadow(), state.table.scenegraph.component.setTopFrozenColumnShadow(), state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForColumn(detaX, state) {
       "adaptive" === state.table.widthMode && state.columnResize.col < state.table.colCount - 1 ? (state.table.scenegraph.updateColWidth(state.columnResize.col, detaX), state.table.scenegraph.updateColWidth(state.columnResize.col + 1, -detaX), state.table.internalProps._widthResizedColMap.add(state.columnResize.col), state.table.internalProps._widthResizedColMap.add(state.columnResize.col + 1)) : (state.table.scenegraph.updateColWidth(state.columnResize.col, detaX), state.table.internalProps._widthResizedColMap.add(state.columnResize.col));
@@ -49139,6 +50576,88 @@
       }
     }
 
+    function updateCustomSelectBorder(scene, selectRange, style) {
+      const table = scene.table,
+        newStartCol = selectRange.start.col,
+        newStartRow = selectRange.start.row,
+        newEndCol = selectRange.end.col,
+        newEndRow = selectRange.end.row,
+        startCol = (selectRange.skipBodyMerge, Math.max(Math.min(newEndCol, newStartCol), 0)),
+        startRow = Math.max(Math.min(newEndRow, newStartRow), 0),
+        endCol = Math.min(Math.max(newEndCol, newStartCol), table.colCount - 1),
+        endRow = Math.min(Math.max(newEndRow, newStartRow), table.rowCount - 1),
+        {
+          needRowHeader: needRowHeader,
+          needRightRowHeader: needRightRowHeader,
+          needColumnHeader: needColumnHeader,
+          needBottomColumnHeader: needBottomColumnHeader,
+          needBody: needBody,
+          needCornerHeader: needCornerHeader,
+          needRightTopCornerHeader: needRightTopCornerHeader,
+          needLeftBottomCornerHeader: needLeftBottomCornerHeader,
+          needRightBottomCornerHeader: needRightBottomCornerHeader
+        } = calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table);
+      if (needCornerHeader) {
+        createCustomCellSelectBorder(scene, startCol, startRow, Math.min(endCol, table.frozenColCount - 1), Math.min(endRow, table.frozenRowCount - 1), "cornerHeader", `${startCol}${startRow}${endCol}${endRow}`, [!0, !needColumnHeader, !needRowHeader, !0], style);
+      }
+      if (needRightTopCornerHeader) {
+        createCustomCellSelectBorder(scene, Math.max(startCol, table.colCount - table.rightFrozenColCount), startRow, endCol, Math.min(endRow, table.frozenRowCount - 1), "rightTopCorner", `${startCol}${startRow}${endCol}${endRow}`, [!0, !0, !needRightRowHeader, !needColumnHeader], style);
+      }
+      if (needLeftBottomCornerHeader) {
+        const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
+        createCustomCellSelectBorder(scene, startCol, Math.max(startRow, table.rowCount - table.bottomFrozenRowCount), cornerEndCol, endRow, "leftBottomCorner", `${startCol}${startRow}${endCol}${endRow}`, [!needRowHeader, !needBottomColumnHeader, !0, !0], style);
+      }
+      if (needRightBottomCornerHeader) {
+        createCustomCellSelectBorder(scene, Math.max(startCol, table.colCount - table.rightFrozenColCount), Math.max(startRow, table.rowCount - table.bottomFrozenRowCount), endCol, endRow, "rightBottomCorner", `${startCol}${startRow}${endCol}${endRow}`, [!needRightRowHeader, !0, !0, !needBottomColumnHeader], style);
+      }
+      if (needColumnHeader) {
+        createCustomCellSelectBorder(scene, Math.max(startCol, table.frozenColCount), startRow, Math.min(endCol, table.colCount - table.rightFrozenColCount - 1), Math.min(endRow, table.frozenRowCount - 1), "columnHeader", `${startCol}${startRow}${endCol}${endRow}`, [!0, !needRightTopCornerHeader, !needBody, !needCornerHeader], style);
+      }
+      if (needBottomColumnHeader) {
+        const columnHeaderStartCol = Math.max(startCol, table.frozenColCount),
+          columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
+        createCustomCellSelectBorder(scene, columnHeaderStartCol, Math.max(startRow, table.rowCount - table.bottomFrozenRowCount), columnHeaderEndCol, endRow, "bottomFrozen", `${startCol}${startRow}${endCol}${endRow}`, [!needBody, !needRightBottomCornerHeader, !0, !needLeftBottomCornerHeader], style);
+      }
+      if (needRowHeader) {
+        const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount),
+          columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+        createCustomCellSelectBorder(scene, startCol, columnHeaderStartRow, Math.min(endCol, table.frozenColCount - 1), columnHeaderEndRow, "rowHeader", `${startCol}${startRow}${endCol}${endRow}`, [!needCornerHeader, !needBody, !needLeftBottomCornerHeader, !0], style);
+      }
+      if (needRightRowHeader) {
+        const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount),
+          columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+        createCustomCellSelectBorder(scene, Math.max(startCol, table.colCount - table.rightFrozenColCount), columnHeaderStartRow, endCol, columnHeaderEndRow, "rightFrozen", `${startCol}${startRow}${endCol}${endRow}`, [!needRightTopCornerHeader, !0, !needRightBottomCornerHeader, !needBody], style);
+      }
+      if (needBody) {
+        createCustomCellSelectBorder(scene, Math.max(startCol, table.frozenColCount), Math.max(startRow, table.frozenRowCount), Math.min(endCol, table.colCount - table.rightFrozenColCount - 1), Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1), "body", `${startCol}${startRow}${endCol}${endRow}`, [!needColumnHeader, !needRightRowHeader, !needBottomColumnHeader, !needRowHeader], style);
+      }
+    }
+    function createCustomCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes, style) {
+      var _a, _b, _c, _d;
+      const startCol = Math.min(start_Col, end_Col),
+        startRow = Math.min(start_Row, end_Row),
+        endCol = Math.max(start_Col, end_Col),
+        endRow = Math.max(start_Row, end_Row),
+        firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds,
+        rect = createRect({
+          pickable: !1,
+          fill: null !== (_a = style.cellBgColor) && void 0 !== _a && _a,
+          lineWidth: null !== (_b = style.cellBorderLineWidth) && void 0 !== _b ? _b : 0,
+          lineDash: null !== (_c = style.cellBorderLineDash) && void 0 !== _c ? _c : [],
+          stroke: strokes.map(stroke => !!stroke && style.cellBorderColor),
+          x: firstCellBound.x1 - scene.tableGroup.attribute.x,
+          y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+          width: 0,
+          height: 0,
+          visible: !0,
+          cornerRadius: getCornerRadius(selectRangeType, null === (_d = scene.table.theme.frameStyle) || void 0 === _d ? void 0 : _d.cornerRadius, start_Col, start_Row, end_Col, end_Row, scene.table)
+        });
+      scene.customSelectedRangeComponents.set(`${startCol}-${startRow}-${endCol}-${endRow}-${selectId}`, {
+        rect: rect,
+        role: selectRangeType
+      }), scene.tableGroup.insertAfter(rect, "body" === selectRangeType ? scene.bodyGroup : "columnHeader" === selectRangeType ? scene.colHeaderGroup : "rowHeader" === selectRangeType ? scene.rowHeaderGroup : "cornerHeader" === selectRangeType ? scene.cornerHeaderGroup : "rightTopCorner" === selectRangeType ? scene.rightTopCornerGroup : "rightFrozen" === selectRangeType ? scene.rightFrozenGroup : "leftBottomCorner" === selectRangeType ? scene.leftBottomCornerGroup : "bottomFrozen" === selectRangeType ? scene.bottomFrozenGroup : scene.rightBottomCornerGroup);
+    }
+
     function deletaCustomSelectRanges(state) {
       const {
         customSelectedRangeComponents: customSelectedRangeComponents
@@ -49148,26 +50667,8 @@
       }), customSelectedRangeComponents.clear(), state.select.customSelectRanges = [];
     }
     function addCustomSelectRanges(customSelectRanges, state) {
-      const {
-        customSelectedRangeComponents: customSelectedRangeComponents
-      } = state.table.scenegraph;
       customSelectRanges.forEach(customRange => {
-        var _a, _b, _c, _d;
-        const {
-            range: range,
-            style: style
-          } = customRange,
-          rect = createRect({
-            fill: null !== (_a = style.cellBgColor) && void 0 !== _a && _a,
-            stroke: null !== (_b = style.cellBorderColor) && void 0 !== _b && _b,
-            lineWidth: null !== (_c = style.cellBorderLineWidth) && void 0 !== _c ? _c : 0,
-            lineDash: null !== (_d = style.cellBorderLineDash) && void 0 !== _d ? _d : [],
-            pickable: !1
-          });
-        customSelectedRangeComponents.set(`${range.start.col}-${range.start.row}-${range.end.col}-${range.end.row}`, {
-          rect: rect,
-          role: "body"
-        });
+        updateCustomSelectBorder(state.table.scenegraph, customRange.range, customRange.style);
       }), state.select.customSelectRanges = customSelectRanges, updateAllSelectComponent(state.table.scenegraph), state.table.scenegraph.updateNextFrame();
     }
 
@@ -49386,7 +50887,14 @@
         updateHoverPosition(this, col, row);
       }
       updateSelectPos(col, row, isShift = !1, isCtrl = !1, isSelectAll = !1, makeSelectCellVisible = !0, skipBodyMerge = !1) {
-        -1 !== row && -1 !== row && (this.select.selecting = !0), col < 0 && (col = -1), row < 0 && (row = -1), col > this.table.colCount - 1 && (col = this.table.colCount - 1), row > this.table.rowCount - 1 && (row = this.table.rowCount - 1), updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, makeSelectCellVisible, skipBodyMerge);
+        -1 !== row && -1 !== row && (this.select.selecting = !0), col < 0 && (col = -1), row < 0 && (row = -1), col > this.table.colCount - 1 && (col = this.table.colCount - 1), row > this.table.rowCount - 1 && (row = this.table.rowCount - 1);
+        const oldCellPosCol = this.select.cellPos.col,
+          oldCellPosRow = this.select.cellPos.row;
+        updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, makeSelectCellVisible, skipBodyMerge), !this.table.hasListeners(TABLE_EVENT_TYPE.SELECTED_CHANGED) || oldCellPosCol === col && oldCellPosRow === row || this.table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CHANGED, {
+          ranges: this.select.ranges,
+          col: col,
+          row: row
+        });
       }
       checkCellRangeInSelect(cellPosStart, cellPosEnd) {
         return checkMultiCellInSelect(cellPosStart, cellPosEnd, this.select.ranges, this.select.highlightScope);
@@ -49697,7 +51205,19 @@
             return void this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
           }
         }
-        left !== this.scroll.horizontalBarPos && this.updateHoverPos(-1, -1), this.scroll.horizontalBarPos = left, isValid$5(this.scroll.horizontalBarPos) && !isNaN(this.scroll.horizontalBarPos) || (this.scroll.horizontalBarPos = 0), this.table.scenegraph.setX(-left), this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
+        if (left !== this.scroll.horizontalBarPos && this.updateHoverPos(-1, -1), this.scroll.horizontalBarPos = left, isValid$5(this.scroll.horizontalBarPos) && !isNaN(this.scroll.horizontalBarPos) || (this.scroll.horizontalBarPos = 0), this.table.scenegraph.setX(-left), this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio), this.table.frozenColCount ? this.table.scenegraph.component.frozenShadowLine.setAttributes({
+          visible: 0 !== this.table.scrollLeft
+        }) : this.table.scenegraph.component.frozenShadowLine.setAttributes({
+          visible: !1
+        }), this.table.rightFrozenColCount) {
+          const scrollLeft = this.table.scrollLeft,
+            viewWidth = this.table.tableNoFrameWidth;
+          this.table.scenegraph.component.rightFrozenShadowLine.setAttributes({
+            visible: scrollLeft + viewWidth < totalWidth
+          });
+        } else this.table.scenegraph.component.rightFrozenShadowLine.setAttributes({
+          visible: !1
+        });
         const dx = this.scroll.horizontalBarPos - oldHorizontalBarPos;
         this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
           event: null == event ? void 0 : event.nativeEvent,
@@ -49863,6 +51383,9 @@
           event: event
         });
       }
+      setSelectInline(selectInline) {
+        this.select.selectInline = selectInline;
+      }
       updateSortState(sortState) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         sortState = Array.isArray(sortState) ? sortState : [sortState];
@@ -49917,8 +51440,9 @@
           this.frozen.icon = iconMark;
         }
       }
-      updateCursor(mode = "default") {
-        this.table.getElement().style.cursor = mode;
+      updateCursor(mode) {
+        var _a;
+        mode || (mode = null !== (_a = this.table.options.defaultCursor) && void 0 !== _a ? _a : "default"), this.table.getElement().style.cursor = mode;
       }
       updateDrillState(dimensionKey, title, drillDown, drillUp, col, row) {
         this.drill.dimensionKey = dimensionKey, this.drill.title = title, this.drill.drillDown = drillDown, this.drill.drillUp = drillUp, this.drill.col = col, this.drill.row = row, updateDrill(col, row, drillDown, drillUp, this.table);
@@ -50094,7 +51618,8 @@
         deltaX: deltaX,
         deltaY: deltaY
       } = event;
-      event.shiftKey && event.deltaY && (deltaX = deltaY, deltaY = 0);
+      const absY = Math.abs(deltaY);
+      0 !== absY && Math.abs(absY) > 10 && (deltaY /= absY > 100 ? 3 : 2), event.shiftKey && event.deltaY && (deltaX = deltaY, deltaY = 0);
       const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY(deltaX, deltaY, {
         horizontal: 1,
         vertical: 1
@@ -50209,7 +51734,7 @@
       const table = eventManager.table,
         stateManager = table.stateManager;
       table.scenegraph.tableGroup.addEventListener("pointermove", e => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const lastX = null !== (_b = null === (_a = table.eventManager.LastPointerXY) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : e.x,
           lastY = null !== (_d = null === (_c = table.eventManager.LastPointerXY) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : e.y;
         table.eventManager.LastPointerXY = {
@@ -50225,8 +51750,8 @@
           event: e.nativeEvent,
           target: null === (_e = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _e ? void 0 : _e.target,
           mergeCellInfo: null === (_f = eventArgsSet.eventArgs) || void 0 === _f ? void 0 : _f.mergeInfo
-        }), stateManager.interactionState === InteractionState.grabing && !(null === (_g = table.editorManager) || void 0 === _g ? void 0 : _g.editingEditor)) return void (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1 && (stateManager.isResizeCol() || stateManager.isResizeRow() || (stateManager.isMoveCol() ? eventManager.dealColumnMover(eventArgsSet) : stateManager.isFillHandle() ? eventManager.dealFillSelect(eventArgsSet, !0) : (null === (_h = table.options.select) || void 0 === _h ? void 0 : _h.disableDragSelect) || eventManager.dealTableSelect(eventArgsSet, !0))));
-        !(null === (_j = table.options.select) || void 0 === _j ? void 0 : _j.disableDragSelect) && table.eventManager.isDraging && stateManager.isSelecting() && !(null === (_k = table.editorManager) || void 0 === _k ? void 0 : _k.editingEditor) && eventManager.dealTableSelect(eventArgsSet, !0);
+        }), stateManager.interactionState === InteractionState.grabing) return void (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1 && (stateManager.isResizeCol() || stateManager.isResizeRow() || (stateManager.isMoveCol() ? eventManager.dealColumnMover(eventArgsSet) : stateManager.isFillHandle() ? eventManager.dealFillSelect(eventArgsSet, !0) : (null === (_g = table.options.select) || void 0 === _g ? void 0 : _g.disableDragSelect) || eventManager.dealTableSelect(eventArgsSet, !0))));
+        !(null === (_h = table.options.select) || void 0 === _h ? void 0 : _h.disableDragSelect) && table.eventManager.isDraging && stateManager.isSelecting() && !(null === (_j = table.editorManager) || void 0 === _j ? void 0 : _j.editingEditor) && eventManager.dealTableSelect(eventArgsSet, !0);
         const cellGoup = e.path.find(node => "cell" === node.role);
         if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL) && (-1 === table.stateManager.hover.cellPos.col || -1 === table.stateManager.hover.cellPos.row || (null == cellGoup ? void 0 : cellGoup.col) === table.stateManager.hover.cellPos.col && (null == cellGoup ? void 0 : cellGoup.row) === table.stateManager.hover.cellPos.row || table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, {
           col: table.stateManager.hover.cellPos.col,
@@ -50237,8 +51762,8 @@
           }),
           scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
           event: e.nativeEvent,
-          target: null === (_l = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _l ? void 0 : _l.target
-        })), table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL) && ("cell" !== (null == cellGoup ? void 0 : cellGoup.role) || !isValid$5(cellGoup.col) || !isValid$5(cellGoup.row) || cellGoup.col === table.stateManager.hover.cellPos.col && cellGoup.row === table.stateManager.hover.cellPos.row || cellGoup.col === (null === (_m = table.stateManager.hover.cellPosContainHeader) || void 0 === _m ? void 0 : _m.col) && cellGoup.row === (null === (_o = table.stateManager.hover.cellPosContainHeader) || void 0 === _o ? void 0 : _o.row) || table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
+          target: null === (_k = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _k ? void 0 : _k.target
+        })), table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL) && ("cell" !== (null == cellGoup ? void 0 : cellGoup.role) || !isValid$5(cellGoup.col) || !isValid$5(cellGoup.row) || cellGoup.col === table.stateManager.hover.cellPos.col && cellGoup.row === table.stateManager.hover.cellPos.row || cellGoup.col === (null === (_l = table.stateManager.hover.cellPosContainHeader) || void 0 === _l ? void 0 : _l.col) && cellGoup.row === (null === (_m = table.stateManager.hover.cellPosContainHeader) || void 0 === _m ? void 0 : _m.row) || table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
           col: cellGoup.col,
           row: cellGoup.row,
           cellRange: table.getCellRangeRelativeRect({
@@ -50247,12 +51772,12 @@
           }),
           scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
           event: e.nativeEvent,
-          target: null === (_p = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _p ? void 0 : _p.target,
-          mergeCellInfo: null === (_q = eventArgsSet.eventArgs) || void 0 === _q ? void 0 : _q.mergeInfo
+          target: null === (_o = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _o ? void 0 : _o.target,
+          mergeCellInfo: null === (_p = eventArgsSet.eventArgs) || void 0 === _p ? void 0 : _p.mergeInfo
         })), eventManager.dealIconHover(eventArgsSet), eventManager.dealTableHover(eventArgsSet), table.theme.columnResize.visibleOnHover && eventManager.checkColumnResize(eventArgsSet, !0), eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.MOUSEMOVE_CELL)) {
           let icon, position;
-          if (null === (_r = eventArgsSet.eventArgs) || void 0 === _r ? void 0 : _r.target) {
-            const iconInfo = getIconAndPositionFromTarget(null === (_s = eventArgsSet.eventArgs) || void 0 === _s ? void 0 : _s.target);
+          if (null === (_q = eventArgsSet.eventArgs) || void 0 === _q ? void 0 : _q.target) {
+            const iconInfo = getIconAndPositionFromTarget(null === (_r = eventArgsSet.eventArgs) || void 0 === _r ? void 0 : _r.target);
             iconInfo && (icon = iconInfo.icon, position = iconInfo.position);
           }
           table.fireListeners(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, {
@@ -50266,8 +51791,8 @@
               position: position,
               funcType: icon.attribute.funcType
             } : void 0,
-            target: null === (_t = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _t ? void 0 : _t.target,
-            mergeCellInfo: null === (_u = eventArgsSet.eventArgs) || void 0 === _u ? void 0 : _u.mergeInfo
+            target: null === (_s = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _s ? void 0 : _s.target,
+            mergeCellInfo: null === (_t = eventArgsSet.eventArgs) || void 0 === _t ? void 0 : _t.mergeInfo
           });
         }
       }), table.scenegraph.tableGroup.addEventListener("pointerout", e => {
@@ -50341,17 +51866,17 @@
         if (table.isPivotChart() && "chart" !== (null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target.type) && table.scenegraph.updateChartState(null), (null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target) !== (null === (_c = stateManager.residentHoverIcon) || void 0 === _c ? void 0 : _c.icon) && stateManager.hideMenu(), "chart" === (null === (_d = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _d ? void 0 : _d.target.type)) return;
         const isCompleteEdit = null === (_e = table.editorManager) || void 0 === _e ? void 0 : _e.completeEdit(e.nativeEvent);
         getPromiseValue(isCompleteEdit, isCompleteEdit => {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-          if (!1 === isCompleteEdit) return;
-          const hitIcon = (null === (_c = null === (_b = null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target) || void 0 === _b ? void 0 : _b.role) || void 0 === _c ? void 0 : _c.startsWith("icon")) ? eventArgsSet.eventArgs.target : (null === (_d = e.target.role) || void 0 === _d ? void 0 : _d.startsWith("icon")) ? e.target : void 0;
-          if (eventManager.downIcon = hitIcon, hitIcon && !1 !== hitIcon.attribute.interactive) hitIcon.attribute.funcType === IconFuncTypeEnum.dragReorder && (stateManager.startMoveCol(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_k = null === (_j = eventArgsSet.eventArgs) || void 0 === _j ? void 0 : _j.event) || void 0 === _k ? void 0 : _k.nativeEvent), stateManager.updateInteractionState(InteractionState.grabing));else {
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+          if (!(null === (_a = table.options.customConfig) || void 0 === _a ? void 0 : _a.selectCellWhenCellEditorNotExists) && !1 === isCompleteEdit) return;
+          const hitIcon = (null === (_d = null === (_c = null === (_b = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target) || void 0 === _c ? void 0 : _c.role) || void 0 === _d ? void 0 : _d.startsWith("icon")) ? eventArgsSet.eventArgs.target : (null === (_e = e.target.role) || void 0 === _e ? void 0 : _e.startsWith("icon")) ? e.target : void 0;
+          if (eventManager.downIcon = hitIcon, hitIcon && !1 !== hitIcon.attribute.interactive) hitIcon.attribute.funcType === IconFuncTypeEnum.dragReorder && (stateManager.startMoveCol(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_l = null === (_k = eventArgsSet.eventArgs) || void 0 === _k ? void 0 : _k.event) || void 0 === _l ? void 0 : _l.nativeEvent), stateManager.updateInteractionState(InteractionState.grabing));else {
             if (eventManager.cellIsHeaderCheck(eventArgsSet)) return;
             if ("touch" === e.pointerType) {
               if (eventManager.touchEnd = !1, eventManager.touchSetTimeout = setTimeout(() => {
                 eventManager.isTouchdown = !1, eventManager.isLongTouch = !0, (eventManager.touchEnd || !eventManager.checkColumnResize(eventArgsSet, !0) && !eventManager.checkRowResize(eventArgsSet, !0)) && (eventManager.touchEnd || !eventManager.checkColumnMover(eventArgsSet)) ? eventManager.dealTableSelect(eventArgsSet) && !eventManager.touchEnd && stateManager.updateInteractionState(InteractionState.grabing) : stateManager.updateInteractionState(InteractionState.grabing);
               }, 500), table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL)) {
                 const cellGoup = e.path.find(node => "cell" === node.role);
-                "cell" !== (null == cellGoup ? void 0 : cellGoup.role) || !isValid$5(cellGoup.col) || !isValid$5(cellGoup.row) || cellGoup.col === table.stateManager.hover.cellPos.col && cellGoup.row === table.stateManager.hover.cellPos.row || cellGoup.col === (null === (_e = table.stateManager.hover.cellPosContainHeader) || void 0 === _e ? void 0 : _e.col) && cellGoup.row === (null === (_f = table.stateManager.hover.cellPosContainHeader) || void 0 === _f ? void 0 : _f.row) || table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
+                "cell" !== (null == cellGoup ? void 0 : cellGoup.role) || !isValid$5(cellGoup.col) || !isValid$5(cellGoup.row) || cellGoup.col === table.stateManager.hover.cellPos.col && cellGoup.row === table.stateManager.hover.cellPos.row || cellGoup.col === (null === (_f = table.stateManager.hover.cellPosContainHeader) || void 0 === _f ? void 0 : _f.col) && cellGoup.row === (null === (_g = table.stateManager.hover.cellPosContainHeader) || void 0 === _g ? void 0 : _g.row) || table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
                   col: cellGoup.col,
                   row: cellGoup.row,
                   cellRange: table.getCellRangeRelativeRect({
@@ -50360,8 +51885,8 @@
                   }),
                   scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
                   event: e.nativeEvent,
-                  target: null === (_g = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _g ? void 0 : _g.target,
-                  mergeCellInfo: null === (_h = eventArgsSet.eventArgs) || void 0 === _h ? void 0 : _h.mergeInfo
+                  target: null === (_h = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _h ? void 0 : _h.target,
+                  mergeCellInfo: null === (_j = eventArgsSet.eventArgs) || void 0 === _j ? void 0 : _j.mergeInfo
                 });
               }
               eventManager.dealTableHover(eventArgsSet);
@@ -50378,7 +51903,7 @@
               col: eventArgsSet.eventArgs.col,
               row: eventArgsSet.eventArgs.row,
               event: e.nativeEvent,
-              target: null === (_l = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _l ? void 0 : _l.target,
+              target: null === (_m = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _m ? void 0 : _m.target,
               mergeCellInfo: eventArgsSet.eventArgs.mergeInfo
             });
           }
@@ -50511,11 +52036,12 @@
         var _a, _b, _c, _d;
         const eventArgsSet = getCellEventArgsSet(e);
         (null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target) && (null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target) === (null === (_c = stateManager.residentHoverIcon) || void 0 === _c ? void 0 : _c.icon) || stateManager.hideMenu();
-        const isCompleteEdit = null === (_d = table.editorManager) || void 0 === _d ? void 0 : _d.completeEdit(e.nativeEvent);
-        getPromiseValue(isCompleteEdit, isCompleteEdit => {
-          var _a;
-          if (!1 === isCompleteEdit) return;
-          const hitIcon = (null === (_a = e.target.role) || void 0 === _a ? void 0 : _a.startsWith("icon")) ? e.target : void 0;
+        let isCompleteEdit = !1;
+        const target = e.target;
+        target === table.scenegraph.tableGroup || target.isDescendantsOf(table.scenegraph.tableGroup) || (isCompleteEdit = null === (_d = table.editorManager) || void 0 === _d ? void 0 : _d.completeEdit(e.nativeEvent)), getPromiseValue(isCompleteEdit, isCompleteEdit => {
+          var _a, _b;
+          if (!(null === (_a = table.options.customConfig) || void 0 === _a ? void 0 : _a.selectCellWhenCellEditorNotExists) && !1 === isCompleteEdit) return;
+          const hitIcon = (null === (_b = e.target.role) || void 0 === _b ? void 0 : _b.startsWith("icon")) ? e.target : void 0;
           if (eventManager.downIcon = hitIcon, "touch" === e.pointerType || hitIcon || eventManager.checkCellFillhandle(eventArgsSet) || stateManager.columnResize.resizing || !eventManager.checkColumnResize(eventArgsSet, !0)) ;else {
             table.scenegraph.updateChartState(null), stateManager.updateInteractionState(InteractionState.grabing);
             const {
@@ -50531,12 +52057,12 @@
       }), table.scenegraph.stage.addEventListener("pointerup", e => {
         "grabing" === stateManager.interactionState && (stateManager.updateInteractionState(InteractionState.default), stateManager.isResizeCol() ? endResizeCol(table) : stateManager.isResizeRow() && endResizeRow(table));
       }), table.scenegraph.stage.addEventListener("pointertap", e => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const target = e.target;
         if (table.eventManager.isDraging || !target || !target.isDescendantsOf(table.scenegraph.stage) && target.stage !== target || target.isDescendantsOf(table.scenegraph.tableGroup)) table.eventManager.isDraging && stateManager.isSelecting() && stateManager.endSelectCells();else {
           stateManager.updateInteractionState(InteractionState.default), eventManager.dealTableHover();
           const isHasSelected = !!(null === (_a = stateManager.select.ranges) || void 0 === _a ? void 0 : _a.length);
-          (null === (_c = null === (_b = table.options.select) || void 0 === _b ? void 0 : _b.blankAreaClickDeselect) || void 0 === _c || _c) && eventManager.dealTableSelect(), stateManager.endSelectCells(!0, isHasSelected), stateManager.updateCursor(), table.scenegraph.updateChartState(null);
+          (null === (_b = table.options.customConfig) || void 0 === _b ? void 0 : _b.cancelSelectCellHook) ? (null === (_c = table.options.customConfig) || void 0 === _c ? void 0 : _c.cancelSelectCellHook(e)) && eventManager.dealTableSelect() : (null === (_e = null === (_d = table.options.select) || void 0 === _d ? void 0 : _d.blankAreaClickDeselect) || void 0 === _e || _e) && eventManager.dealTableSelect(), stateManager.endSelectCells(!0, isHasSelected), stateManager.updateCursor(), table.scenegraph.updateChartState(null);
         }
       }), table.scenegraph.stage.addEventListener("pointermove", e => {
         const eventArgsSet = getCellEventArgsSet(e);
@@ -50745,7 +52271,7 @@
       }), scenegraph.component.vScrollBar.addEventListener("scrollUp", e => {
         scenegraph.table.eventManager.isDraging = !1;
       }), scenegraph.component.hScrollBar.addEventListener("pointermove", e => {
-        scenegraph.table.stateManager.updateCursor("default"), e.stopPropagation();
+        scenegraph.table.stateManager.updateCursor(), e.stopPropagation();
       }), scenegraph.component.hScrollBar.addEventListener("pointerdown", e => {
         e.stopPropagation(), scenegraph.table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE) && scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
           event: e.nativeEvent
@@ -50784,7 +52310,7 @@
     }
     getPixelRatio();
 
-    var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -50876,73 +52402,15 @@
           }
         }
         handleKeydownListener(e);
-      }), handler.on(table.getElement(), "copy", e => __awaiter$1(this, void 0, void 0, function* () {
-        var _a, _b;
-        if (null === (_a = table.keyboardOptions) || void 0 === _a ? void 0 : _a.copySelected) {
-          const data = table.getCopyValue();
-          if (isValid$5(data)) {
-            e.preventDefault();
-            const permissionState = yield navigator.permissions.query({
-              name: "clipboard-write"
-            });
-            if ((null === (_b = navigator.clipboard) || void 0 === _b ? void 0 : _b.write) && "granted" === permissionState.state) {
-              const setDataToHTML = data => {
-                  const result = ["<table>"],
-                    META_HEAD = ['<meta name="author" content="Visactor"/>', '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'].join(""),
-                    rows = data.split("\r\n");
-                  return rows.forEach(function (rowCells, rowIndex) {
-                    const cells = rowCells.split("\t"),
-                      rowValues = [];
-                    0 === rowIndex && result.push("<tbody>"), cells.forEach(function (cell, cellIndex) {
-                      const parsedCellData = cell ? cell.toString().replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>").replace(/(<br(\s*|\/)>(\r\n|\n)?|\r\n|\n)/g, "<br>\r\n").replace(/\x20{2,}/gi, substring => `<span style="mso-spacerun: yes">${"&nbsp;".repeat(substring.length - 1)} </span>`).replace(/\t/gi, "&#9;") : " ";
-                      rowValues.push(`<td>${parsedCellData}</td>`);
-                    }), result.push("<tr>", ...rowValues, "</tr>"), rowIndex === rows.length - 1 && result.push("</tbody>");
-                  }), result.push("</table>"), [META_HEAD, result.join("")].join("");
-                },
-                dataHTML = setDataToHTML(data);
-              navigator.clipboard.write([new ClipboardItem({
-                "text/html": new Blob([dataHTML], {
-                  type: "text/html"
-                }),
-                "text/plain": new Blob([data], {
-                  type: "text/plain"
-                })
-              })]);
-            } else browser.IE ? window.clipboardData.setData("Text", data) : e.clipboardData.setData("text/plain", data);
-            table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
-              cellRange: table.stateManager.select.ranges,
-              copyData: data
-            });
-          }
-        }
-      })), handler.on(table.getElement(), "paste", e => __awaiter$1(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f;
-        if ((null === (_c = table.keyboardOptions) || void 0 === _c ? void 0 : _c.pasteValueToCell) && table.changeCellValues) {
-          if (null === (_d = table.editorManager) || void 0 === _d ? void 0 : _d.editingEditor) return;
-          if ((null === (_e = table.stateManager.select.ranges) || void 0 === _e ? void 0 : _e.length) > 0) if (null === (_f = navigator.clipboard) || void 0 === _f ? void 0 : _f.read) navigator.clipboard.read().then(clipboardItems => {
-            for (const item of clipboardItems) item.types.includes("text/html") ? pasteHtmlToTable(item) : 1 === item.types.length && "text/plain" === item.types[0] && pasteTextToTable(item);
-          });else {
-            const ranges = table.stateManager.select.ranges,
-              col = Math.min(ranges[0].start.col, ranges[0].end.col),
-              row = Math.min(ranges[0].start.row, ranges[0].end.row),
-              rows = (e.clipboardData || window.Clipboard).getData("text").split("\n"),
-              values = [];
-            rows.forEach(function (rowCells, rowIndex) {
-              const cells = rowCells.split("\t"),
-                rowValues = [];
-              values.push(rowValues), cells.forEach(function (cell, cellIndex) {
-                cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
-              });
-            });
-            const changedCellResults = yield table.changeCellValues(col, row, values);
-            table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-              col: col,
-              row: row,
-              pasteData: values,
-              changedCellResults: changedCellResults
-            });
-          }
-        }
+      }), handler.on(table.getElement(), "copy", e => __awaiter$2(this, void 0, void 0, function* () {
+        var _a;
+        (null === (_a = table.keyboardOptions) || void 0 === _a ? void 0 : _a.copySelected) && eventManager.handleCopy(e);
+      })), handler.on(table.getElement(), "cut", e => __awaiter$2(this, void 0, void 0, function* () {
+        var _b;
+        (null === (_b = table.keyboardOptions) || void 0 === _b ? void 0 : _b.cutSelected) && eventManager.handleCut(e);
+      })), handler.on(table.getElement(), "paste", e => __awaiter$2(this, void 0, void 0, function* () {
+        var _c;
+        (null === (_c = table.keyboardOptions) || void 0 === _c ? void 0 : _c.pasteValueToCell) && eventManager.handlePaste(e);
       })), handler.on(table.getElement(), "contextmenu", e => {
         var _a;
         !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) ? e.preventDefault() : globalPointerupCallback(e);
@@ -50950,124 +52418,6 @@
         var _a;
         table.isReleased || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$5(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio()), e.windowSizeNotChange || table.resize());
       });
-      const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g,
-        cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
-      function pasteHtmlToTable(item) {
-        const ranges = table.stateManager.select.ranges,
-          selectRangeLength = ranges.length,
-          col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-          row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
-          maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-          maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-        let pasteValuesColCount = 0,
-          pasteValuesRowCount = 0,
-          values = [];
-        item.getType("text/html").then(blob => {
-          blob.text().then(pastedData => __awaiter$1(this, void 0, void 0, function* () {
-            var _a, _b;
-            if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
-              const matches = Array.from(pastedData.matchAll(regex));
-              for (const match of matches) {
-                const rowContent = match[1],
-                  rowValues = Array.from(rowContent.matchAll(cellRegex)).map(cellMatch => cellMatch[1].replace(/(<(?!br)([^>]+)>)/gi, "").replace(/<br(\s*|\/)>[\r\n]?/gim, "\n").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#9;/gi, "\t").replace(/&nbsp;/g, " "));
-                values.push(rowValues), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
-              }
-              pasteValuesRowCount = null !== (_b = values.length) && void 0 !== _b ? _b : 0, values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-              const changedCellResults = yield table.changeCellValues(col, row, values, !0);
-              table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                col: col,
-                row: row,
-                pasteData: values,
-                changedCellResults: changedCellResults
-              });
-            } else navigator.clipboard.read().then(clipboardItems => {
-              for (const item of clipboardItems) item.types.includes("text/plain") && item.getType("text/plain").then(blob => {
-                blob.text().then(_pasteValue);
-              });
-            });
-          }));
-        });
-      }
-      function _pasteValue(pastedData) {
-        var _a;
-        return __awaiter$1(this, void 0, void 0, function* () {
-          const ranges = table.stateManager.select.ranges,
-            selectRangeLength = ranges.length,
-            col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-            row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
-            maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-            maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-          let pasteValuesColCount = 0,
-            pasteValuesRowCount = 0,
-            values = [];
-          pastedData.split("\n").forEach(function (rowCells, rowIndex) {
-            var _a;
-            const cells = rowCells.split("\t"),
-              rowValues = [];
-            values.push(rowValues), cells.forEach(function (cell, cellIndex) {
-              cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
-            }), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
-          }), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-          const changedCellResults = yield table.changeCellValues(col, row, values, !0);
-          table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-            col: col,
-            row: row,
-            pasteData: values,
-            changedCellResults: changedCellResults
-          });
-        });
-      }
-      function pasteTextToTable(item) {
-        const ranges = table.stateManager.select.ranges,
-          selectRangeLength = ranges.length,
-          col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-          row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
-          maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
-          maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-        let pasteValuesColCount = 0,
-          pasteValuesRowCount = 0;
-        item.getType("text/plain").then(blob => {
-          blob.text().then(pastedData => __awaiter$1(this, void 0, void 0, function* () {
-            var _a;
-            const rows = pastedData.replace(/\r(?!\n)/g, "\r\n").split("\r\n");
-            let values = [];
-            rows.length > 1 && "" === rows[rows.length - 1] && rows.pop(), rows.forEach(function (rowCells, rowIndex) {
-              var _a;
-              const cells = rowCells.split("\t"),
-                rowValues = [];
-              values.push(rowValues), cells.forEach(function (cell, cellIndex) {
-                cell.includes("\n") && (cell = cell.replace(/^"(.*)"$/, "$1").replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(""))), rowValues.push(cell);
-              }), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
-            }), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-            const changedCellResults = yield table.changeCellValues(col, row, values, !0);
-            table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-              col: col,
-              row: row,
-              pasteData: values,
-              changedCellResults: changedCellResults
-            });
-          }));
-        });
-      }
-      function handlePasteValues(values, rowCount, colCount, selectedRowCount, selectedColCount) {
-        if (selectedColCount > colCount || selectedRowCount > rowCount) {
-          if (selectedColCount % colCount == 0 && selectedRowCount % rowCount == 0) {
-            const toPasteValues = [];
-            for (let i = 0; i < selectedRowCount; i++) {
-              const rowPasteValue = [];
-              toPasteValues.push(rowPasteValue);
-              for (let j = 0; j < selectedColCount; j++) {
-                const copiedRow = i % rowCount,
-                  copiedCol = j % colCount;
-                rowPasteValue.push(values[copiedRow][copiedCol]);
-              }
-            }
-            return toPasteValues;
-          }
-          return values;
-        }
-        return values;
-      }
       const globalPointerdownCallback = e => {
         var _a;
         if (table.isReleased) return;
@@ -51182,7 +52532,7 @@
               right || left || (x > table.tableNoFrameWidth - table.getRightFrozenColsWidth() && x < table.tableNoFrameWidth || x > 0 && x < table.getFrozenColsWidth() ? (selectX = x, considerFrozenX = !0) : selectX = table.scrollLeft + x), bottom || top || (y > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() && y < table.tableNoFrameHeight || y > 0 && y < table.getFrozenRowsHeight() ? (selectY = y, considerFrozenY = !0) : selectY = table.scrollTop + y), table.stateManager.updateInteractionState(InteractionState.grabing);
               const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX),
                 targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
-              (null === (_a = table.options.select) || void 0 === _a ? void 0 : _a.disableDragSelect) || !isValid$5(targetCol) || !isValid$5(targetRow) || (null === (_b = table.options.select) || void 0 === _b ? void 0 : _b.disableSelect) && "function" == typeof (null === (_c = table.options.select) || void 0 === _c ? void 0 : _c.disableSelect) && (null === (_e = null === (_d = table.options.select) || void 0 === _d ? void 0 : _d.disableSelect) || void 0 === _e ? void 0 : _e.call(_d, targetCol.col, targetRow.row, table)) || table.stateManager.updateSelectPos(targetCol.col, targetRow.row, !1, !1, !1, !1);
+              (null === (_a = table.options.select) || void 0 === _a ? void 0 : _a.disableDragSelect) || !isValid$5(targetCol) || !isValid$5(targetRow) || (null === (_b = table.options.select) || void 0 === _b ? void 0 : _b.disableSelect) && "function" == typeof (null === (_c = table.options.select) || void 0 === _c ? void 0 : _c.disableSelect) && (null === (_e = null === (_d = table.options.select) || void 0 === _d ? void 0 : _d.disableSelect) || void 0 === _e ? void 0 : _e.call(_d, targetCol.col, targetRow.row, table)) || table.stateManager.updateSelectPos("row" === table.stateManager.select.selectInline ? table.colCount - 1 : targetCol.col, "col" === table.stateManager.select.selectInline ? table.rowCount - 1 : targetRow.row, !1, !1, !1, !1);
             });
           } else table.eventManager.inertiaScroll.isInertiaScrolling() ? table.eventManager.inertiaScroll.endInertia() : table.eventManager.scrollYSpeed = 0;
         }
@@ -51566,9 +52916,34 @@
       });
     }
 
+    var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) {
+          try {
+            step(generator.next(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function rejected(value) {
+          try {
+            step(generator.throw(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function step(result) {
+          var value;
+          result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          })).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+    };
     class EventManager {
       constructor(table) {
-        this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0, this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager), "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), setTimeout(() => {
+        this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0, this.cutWaitPaste = !1, this.clipboardCheckTimer = null, this.cutOperationTime = 0, this.lastClipboardContent = "", this.cutCellRange = null, this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager), "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), setTimeout(() => {
           this.bindSelfEvent();
         }, 0));
       }
@@ -51622,7 +52997,7 @@
             }
             return !1;
           }
-          return !this.table.isPivotChart() || "axis-label" !== (null === (_b = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target.name) && "chart" !== (null === (_c = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _c ? void 0 : _c.target.type) ? (this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, !1, !isSelectMoving && (null === (_e = null === (_d = this.table.options.select) || void 0 === _d ? void 0 : _d.makeSelectCellVisible) || void 0 === _e || _e)), !0) : (this.table.stateManager.updateSelectPos(-1, -1), !1);
+          return !this.table.isPivotChart() || "axis-label" !== (null === (_b = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target.name) && "chart" !== (null === (_c = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _c ? void 0 : _c.target.type) ? (this.table.stateManager.updateSelectPos("row" === this.table.stateManager.select.selectInline ? this.table.colCount - 1 : eventArgs.col, "col" === this.table.stateManager.select.selectInline ? this.table.rowCount - 1 : eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, !1, !isSelectMoving && (null === (_e = null === (_d = this.table.options.select) || void 0 === _d ? void 0 : _d.makeSelectCellVisible) || void 0 === _e || _e)), !0) : (this.table.stateManager.updateSelectPos(-1, -1), !1);
         }
         return !1;
       }
@@ -51789,6 +53164,242 @@
       disableScroll() {
         this._enableTableScroll = !1;
       }
+      handleCopy(e, isCut = !1) {
+        var _a, _b;
+        return __awaiter$1(this, void 0, void 0, function* () {
+          const table = this.table;
+          !isCut && (this.cutWaitPaste = !1);
+          const data = this.table.getCopyValue();
+          if (isValid$5(data)) {
+            e.preventDefault();
+            const permissionState = yield navigator.permissions.query({
+              name: "clipboard-write"
+            });
+            if ((null === (_a = navigator.clipboard) || void 0 === _a ? void 0 : _a.write) && "granted" === permissionState.state) {
+              const setDataToHTML = data => {
+                  const result = ["<table>"],
+                    META_HEAD = ['<meta name="author" content="Visactor"/>', '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'].join(""),
+                    rows = data.split("\r\n");
+                  return rows.forEach(function (rowCells, rowIndex) {
+                    const cells = rowCells.split("\t"),
+                      rowValues = [];
+                    0 === rowIndex && result.push("<tbody>"), cells.forEach(function (cell, cellIndex) {
+                      const parsedCellData = cell ? cell.toString().replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>").replace(/(<br(\s*|\/)>(\r\n|\n)?|\r\n|\n)/g, "<br>\r\n").replace(/\x20{2,}/gi, substring => `<span style="mso-spacerun: yes">${"&nbsp;".repeat(substring.length - 1)} </span>`).replace(/\t/gi, "&#9;") : " ";
+                      rowValues.push(`<td>${parsedCellData}</td>`);
+                    }), result.push("<tr>", ...rowValues, "</tr>"), rowIndex === rows.length - 1 && result.push("</tbody>");
+                  }), result.push("</table>"), [META_HEAD, result.join("")].join("");
+                },
+                dataHTML = setDataToHTML(data);
+              navigator.clipboard.write([new ClipboardItem({
+                "text/html": new Blob([dataHTML], {
+                  type: "text/html"
+                }),
+                "text/plain": new Blob([data], {
+                  type: "text/plain"
+                })
+              })]);
+            } else browser.IE ? window.clipboardData.setData("Text", data) : e.clipboardData.setData("text/plain", data);
+            table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
+              cellRange: table.stateManager.select.ranges,
+              copyData: data,
+              isCut: isCut
+            });
+          }
+          (null === (_b = table.keyboardOptions) || void 0 === _b ? void 0 : _b.showCopyCellBorder) && (setActiveCellRangeState(table), table.clearSelected());
+        });
+      }
+      handleCut(e) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+          this.handleCopy(e, !0), this.cutWaitPaste = !0, this.cutCellRange = this.table.getSelectedCellInfos(), this.clipboardCheckTimer && clearTimeout(this.clipboardCheckTimer), this.clipboardCheckTimer = window.setTimeout(() => {
+            this.cutWaitPaste && (this.cutWaitPaste = !1, this.cutCellRange = null, this.clipboardCheckTimer = null);
+          }, 3e4), this.saveClipboardContent();
+        });
+      }
+      handlePaste(e) {
+        this.cutWaitPaste ? this.checkClipboardChanged().then(changed => {
+          this.executePaste(e), changed || this.clearCutArea(this.table), this.cutWaitPaste && (this.cutWaitPaste = !1, this.cutCellRange = null, this.clipboardCheckTimer && (clearTimeout(this.clipboardCheckTimer), this.clipboardCheckTimer = null));
+        }).catch(() => {
+          this.executePaste(e), this.cutWaitPaste && (this.cutWaitPaste = !1, this.cutCellRange = null, this.clipboardCheckTimer && (clearTimeout(this.clipboardCheckTimer), this.clipboardCheckTimer = null));
+        }) : this.executePaste(e);
+      }
+      executePaste(e) {
+        var _a, _b, _c, _d;
+        return __awaiter$1(this, void 0, void 0, function* () {
+          const table = this.table;
+          if (table.changeCellValues) {
+            if (null === (_a = table.editorManager) || void 0 === _a ? void 0 : _a.editingEditor) return;
+            if ((null === (_b = table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) > 0) if (null === (_c = navigator.clipboard) || void 0 === _c ? void 0 : _c.read) navigator.clipboard.read().then(clipboardItems => {
+              for (const item of clipboardItems) item.types.includes("text/html") ? this.pasteHtmlToTable(item) : 1 === item.types.length && "text/plain" === item.types[0] && this.pasteTextToTable(item);
+            });else {
+              const ranges = table.stateManager.select.ranges,
+                col = Math.min(ranges[0].start.col, ranges[0].end.col),
+                row = Math.min(ranges[0].start.row, ranges[0].end.row),
+                rows = (e.clipboardData || window.Clipboard).getData("text").split("\n"),
+                values = [];
+              rows.forEach(function (rowCells, rowIndex) {
+                const cells = rowCells.split("\t"),
+                  rowValues = [];
+                values.push(rowValues), cells.forEach(function (cell, cellIndex) {
+                  cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
+                });
+              });
+              const changedCellResults = yield table.changeCellValues(col, row, values);
+              table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                col: col,
+                row: row,
+                pasteData: values,
+                changedCellResults: changedCellResults
+              });
+            }
+          }
+          (null === (_d = table.keyboardOptions) || void 0 === _d ? void 0 : _d.showCopyCellBorder) && clearActiveCellRangeState(table);
+        });
+      }
+      clearCutArea(table) {
+        try {
+          const selectCells = this.cutCellRange;
+          if (!selectCells || 0 === selectCells.length) return;
+          for (let i = 0; i < selectCells.length; i++) for (let j = 0; j < selectCells[i].length; j++) selectCells[i][j] && table.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, void 0);
+        } catch (error) {}
+      }
+      checkClipboardChanged() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+          if (!navigator.clipboard || !navigator.clipboard.readText) return !1;
+          try {
+            return (yield navigator.clipboard.readText()) !== this.lastClipboardContent;
+          } catch (err) {
+            return !1;
+          }
+        });
+      }
+      saveClipboardContent() {
+        navigator.clipboard && navigator.clipboard.readText && setTimeout(() => {
+          navigator.clipboard.readText().then(text => {
+            this.lastClipboardContent = text;
+          }).catch(err => {});
+        }, 50);
+      }
+      pasteHtmlToTable(item) {
+        const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g,
+          cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g,
+          table = this.table,
+          ranges = table.stateManager.select.ranges,
+          selectRangeLength = ranges.length,
+          col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+          row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
+          maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+          maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+        let pasteValuesColCount = 0,
+          pasteValuesRowCount = 0,
+          values = [];
+        item.getType("text/html").then(blob => {
+          blob.text().then(pastedData => __awaiter$1(this, void 0, void 0, function* () {
+            var _a, _b;
+            if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
+              const matches = Array.from(pastedData.matchAll(regex));
+              for (const match of matches) {
+                const rowContent = match[1],
+                  rowValues = Array.from(rowContent.matchAll(cellRegex)).map(cellMatch => cellMatch[1].replace(/(<(?!br)([^>]+)>)/gi, "").replace(/<br(\s*|\/)>[\r\n]?/gim, "\n").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#9;/gi, "\t").replace(/&nbsp;/g, " "));
+                values.push(rowValues), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
+              }
+              pasteValuesRowCount = null !== (_b = values.length) && void 0 !== _b ? _b : 0, values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+              const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+              table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                col: col,
+                row: row,
+                pasteData: values,
+                changedCellResults: changedCellResults
+              });
+            } else navigator.clipboard.read().then(clipboardItems => {
+              for (const item of clipboardItems) item.types.includes("text/plain") && item.getType("text/plain").then(blob => {
+                blob.text().then(this._pasteValue);
+              });
+            });
+          }));
+        });
+      }
+      _pasteValue(pastedData) {
+        var _a;
+        return __awaiter$1(this, void 0, void 0, function* () {
+          const table = this.table,
+            ranges = table.stateManager.select.ranges,
+            selectRangeLength = ranges.length,
+            col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+            row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
+            maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+            maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+          let pasteValuesColCount = 0,
+            pasteValuesRowCount = 0,
+            values = [];
+          pastedData.split("\n").forEach(function (rowCells, rowIndex) {
+            var _a;
+            const cells = rowCells.split("\t"),
+              rowValues = [];
+            values.push(rowValues), cells.forEach(function (cell, cellIndex) {
+              cellIndex === cells.length - 1 && (cell = cell.trim()), rowValues.push(cell);
+            }), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
+          }), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+          const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+          table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+            col: col,
+            row: row,
+            pasteData: values,
+            changedCellResults: changedCellResults
+          });
+        });
+      }
+      pasteTextToTable(item) {
+        const table = this.table,
+          ranges = table.stateManager.select.ranges,
+          selectRangeLength = ranges.length,
+          col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+          row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row),
+          maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col),
+          maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+        let pasteValuesColCount = 0,
+          pasteValuesRowCount = 0;
+        item.getType("text/plain").then(blob => {
+          blob.text().then(pastedData => __awaiter$1(this, void 0, void 0, function* () {
+            var _a;
+            const rows = pastedData.replace(/\r(?!\n)/g, "\r\n").split("\r\n");
+            let values = [];
+            rows.length > 1 && "" === rows[rows.length - 1] && rows.pop(), rows.forEach(function (rowCells, rowIndex) {
+              var _a;
+              const cells = rowCells.split("\t"),
+                rowValues = [];
+              values.push(rowValues), cells.forEach(function (cell, cellIndex) {
+                cell.includes("\n") && (cell = cell.replace(/^"(.*)"$/, "$1").replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(""))), rowValues.push(cell);
+              }), pasteValuesColCount = Math.max(pasteValuesColCount, null !== (_a = null == rowValues ? void 0 : rowValues.length) && void 0 !== _a ? _a : 0);
+            }), pasteValuesRowCount = null !== (_a = values.length) && void 0 !== _a ? _a : 0, values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+            const changedCellResults = yield table.changeCellValues(col, row, values, !0);
+            table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA) && table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+              col: col,
+              row: row,
+              pasteData: values,
+              changedCellResults: changedCellResults
+            });
+          }));
+        });
+      }
+      handlePasteValues(values, rowCount, colCount, selectedRowCount, selectedColCount) {
+        if (selectedColCount > colCount || selectedRowCount > rowCount) {
+          if (selectedColCount % colCount == 0 && selectedRowCount % rowCount == 0) {
+            const toPasteValues = [];
+            for (let i = 0; i < selectedRowCount; i++) {
+              const rowPasteValue = [];
+              toPasteValues.push(rowPasteValue);
+              for (let j = 0; j < selectedColCount; j++) {
+                const copiedRow = i % rowCount,
+                  copiedCol = j % colCount;
+                rowPasteValue.push(values[copiedRow][copiedCol]);
+              }
+            }
+            return toPasteValues;
+          }
+          return values;
+        }
+        return values;
+      }
     }
 
     let defaultStyle$4;
@@ -53723,7 +55334,7 @@
         for (let col = startCol; col < colCount; col++) {
           const width = _this.getColWidth(col),
             right = left + width;
-          if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) return {
+          if (Math.round(left) <= absoluteX && absoluteX < Math.round(right)) return {
             left: left,
             col: col,
             right: right,
@@ -53737,7 +55348,7 @@
         for (let col = startCol; col >= 0; col--) {
           const width = _this.getColWidth(col),
             left = right - width;
-          if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) return {
+          if (Math.round(left) <= absoluteX && absoluteX < Math.round(right)) return {
             left: left,
             col: col,
             right: right,
@@ -54818,7 +56429,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.0.15", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.0.18", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -54865,6 +56476,8 @@
             modeParams: modeParams,
             canvasWidth: canvasWidth,
             canvasHeight: canvasHeight,
+            contentOffsetX: translateX,
+            contentOffsetY: translateY,
             overscrollBehavior: overscrollBehavior,
             limitMinWidth: limitMinWidth,
             limitMinHeight: limitMinHeight,
@@ -54891,7 +56504,7 @@
           right: 0,
           left: 0,
           bottom: 0
-        }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), (isValid$5(canvasHeight) || isValid$5(canvasWidth)) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.canvasWidth = isNumber$6(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$6(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal";
+        }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), (isValid$5(canvasHeight) || isValid$5(canvasWidth)) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.contentOffsetX = null != translateX ? translateX : 0, this.contentOffsetY = null != translateY ? translateY : 0, this.canvasWidth = isNumber$6(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$6(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal";
         const internalProps = this.internalProps = {};
         void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), this.options.canvas ? ("node" !== Env.mode && (internalProps.element = this.options.canvas.parentElement, internalProps.element.style.position = "relative"), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== Env.mode && (internalProps.element = createRootElement(this.padding), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), internalProps.context = internalProps.canvas.getContext("2d"), (null === (_e = options.customConfig) || void 0 === _e ? void 0 : _e.createReactContainer) && createReactContainer(this)), internalProps.handler = new EventHandler(), isNumber$6(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, internalProps.frozenRowCount = frozenRowCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = null === (_f = null != enableCheckboxCascade ? enableCheckboxCascade : null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox) || void 0 === _f || _f, internalProps.enableHeaderCheckboxCascade = enableCheckboxCascade || null == enableHeaderCheckboxCascade || enableHeaderCheckboxCascade, internalProps.columnResizeMode = null !== (_g = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _g ? _g : columnResizeMode, internalProps.rowResizeMode = null !== (_h = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _h ? _h : rowResizeMode, internalProps.dragHeaderMode = null !== (_k = null !== (_j = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _j ? _j : dragHeaderMode) && void 0 !== _k ? _k : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.groupBy = null !== (_l = null == groupConfig ? void 0 : groupConfig.groupBy) && void 0 !== _l ? _l : groupBy, internalProps.groupTitleCheckbox = null !== (_m = null == groupConfig ? void 0 : groupConfig.titleCheckbox) && void 0 !== _m ? _m : !!(null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox), internalProps.groupCellMerge = null == groupConfig ? void 0 : groupConfig.groupCellMerge, internalProps.customDealGroupData = null == groupConfig ? void 0 : groupConfig.customDealGroupData, internalProps.groupTitleFieldFormat = null !== (_o = null == groupConfig ? void 0 : groupConfig.titleFieldFormat) && void 0 !== _o ? _o : groupTitleFieldFormat, internalProps.groupTitleCustomLayout = null !== (_p = null == groupConfig ? void 0 : groupConfig.titleCustomLayout) && void 0 !== _p ? _p : groupTitleCustomLayout, internalProps.enableTreeStickCell = null !== (_q = null == groupConfig ? void 0 : groupConfig.enableTreeStickCell) && void 0 !== _q ? _q : enableTreeStickCell, internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {};
         const that = this;
@@ -54978,6 +56591,9 @@
       setCanvasSize(canvasWidth, canvasHeight) {
         this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight, this.options.canvasHeight = canvasHeight, this.options.canvasWidth = canvasWidth, this.resize();
       }
+      setContentInsetXY(contentOffsetX, contentOffsetY) {
+        this.contentOffsetX = contentOffsetX, this.contentOffsetY = contentOffsetY, this.options.contentOffsetX = contentOffsetX, this.options.contentOffsetY = contentOffsetY, this.resize();
+      }
       resize() {
         var _a;
         this._updateSize(), null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach(legend => {
@@ -55030,6 +56646,9 @@
         return null !== (_e = null !== (_c = null === (_b = null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.layoutMap) || void 0 === _b ? void 0 : _b.frozenRowCount) && void 0 !== _c ? _c : null === (_d = this.internalProps) || void 0 === _d ? void 0 : _d.frozenRowCount) && void 0 !== _e ? _e : 0;
       }
       set frozenRowCount(frozenRowCount) {
+        this.internalProps.frozenRowCount = frozenRowCount, this.options.frozenRowCount = frozenRowCount, this.stateManager.setFrozenRow(this.internalProps.frozenRowCount);
+      }
+      _setFrozenRowCount(frozenRowCount) {
         this.internalProps.frozenRowCount = frozenRowCount, this.stateManager.setFrozenRow(this.internalProps.frozenRowCount);
       }
       get rightFrozenColCount() {
@@ -55204,7 +56823,7 @@
         } = this;
         let widthP = 0,
           heightP = 0;
-        if (this.tableX = 0, this.tableY = 0, this.options.canvas && this.options.viewBox) widthP = this.options.viewBox.x2 - this.options.viewBox.x1, heightP = this.options.viewBox.y2 - this.options.viewBox.y1, (null === (_a = null == this ? void 0 : this.scenegraph) || void 0 === _a ? void 0 : _a.stage) && (this.options.viewBox ? this.scenegraph.stage.setViewBox(this.options.viewBox, !1) : this.scenegraph.stage.resize(widthP, heightP));else if ("browser" === Env.mode) {
+        if (this.tableX = this.contentOffsetX, this.tableY = this.contentOffsetY, this.options.canvas && this.options.viewBox) widthP = this.options.viewBox.x2 - this.options.viewBox.x1, heightP = this.options.viewBox.y2 - this.options.viewBox.y1, (null === (_a = null == this ? void 0 : this.scenegraph) || void 0 === _a ? void 0 : _a.stage) && (this.options.viewBox ? this.scenegraph.stage.setViewBox(this.options.viewBox, !1) : this.scenegraph.stage.resize(widthP, heightP));else if ("browser" === Env.mode) {
           const element = this.getElement();
           let widthWithoutPadding = 0,
             heightWithoutPadding = 0;
@@ -55230,12 +56849,12 @@
         if (null === (_l = this.internalProps.theme) || void 0 === _l ? void 0 : _l.frameStyle) {
           const lineWidths = toBoxArray(null !== (_o = null === (_m = this.internalProps.theme.frameStyle) || void 0 === _m ? void 0 : _m.borderLineWidth) && void 0 !== _o ? _o : [null]),
             shadowWidths = toBoxArray(null !== (_q = null === (_p = this.internalProps.theme.frameStyle) || void 0 === _p ? void 0 : _p.shadowBlur) && void 0 !== _q ? _q : [0]);
-          if (null === (_r = this.theme.frameStyle) || void 0 === _r ? void 0 : _r.innerBorder) this.tableX = 0, this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_s = shadowWidths[1]) && void 0 !== _s ? _s : 0), this.tableNoFrameHeight = height - (null !== (_t = shadowWidths[2]) && void 0 !== _t ? _t : 0);else {
-            this.tableX = (null !== (_u = lineWidths[3]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[3]) && void 0 !== _v ? _v : 0), this.tableY = (null !== (_w = lineWidths[0]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[0]) && void 0 !== _x ? _x : 0);
+          if (null === (_r = this.theme.frameStyle) || void 0 === _r ? void 0 : _r.innerBorder) this.tableX += this.contentOffsetX, this.tableY += this.contentOffsetY, this.tableNoFrameWidth = width - (null !== (_s = shadowWidths[1]) && void 0 !== _s ? _s : 0) - this.contentOffsetX, this.tableNoFrameHeight = height - (null !== (_t = shadowWidths[2]) && void 0 !== _t ? _t : 0) - this.contentOffsetY;else {
+            this.tableX += (null !== (_u = lineWidths[3]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[3]) && void 0 !== _v ? _v : 0), this.tableY += (null !== (_w = lineWidths[0]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[0]) && void 0 !== _x ? _x : 0);
             const rightBorder = (null !== (_y = lineWidths[1]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[1]) && void 0 !== _z ? _z : 0);
-            this.tableNoFrameWidth = width - (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) - ((null !== (_0 = lineWidths[3]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[3]) && void 0 !== _1 ? _1 : 0));
+            this.tableNoFrameWidth = width - (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) - ((null !== (_0 = lineWidths[3]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[3]) && void 0 !== _1 ? _1 : 0)) - this.contentOffsetX;
             const bottomBorder = (null !== (_2 = lineWidths[2]) && void 0 !== _2 ? _2 : 0) + (null !== (_3 = shadowWidths[2]) && void 0 !== _3 ? _3 : 0);
-            this.tableNoFrameHeight = height - (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) - ((null !== (_4 = lineWidths[0]) && void 0 !== _4 ? _4 : 0) + (null !== (_5 = shadowWidths[0]) && void 0 !== _5 ? _5 : 0));
+            this.tableNoFrameHeight = height - (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) - ((null !== (_4 = lineWidths[0]) && void 0 !== _4 ? _4 : 0) + (null !== (_5 = shadowWidths[0]) && void 0 !== _5 ? _5 : 0)) - this.contentOffsetY;
           }
         }
         this._clearColRangeWidthsMap(), this._clearRowRangeHeightsMap();
@@ -55733,7 +57352,7 @@
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const internalProps = this.internalProps;
         if (this.isReleased) return;
-        null === (_b = null === (_a = internalProps.tooltipHandler) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), null === (_d = null === (_c = internalProps.menuHandler) || void 0 === _c ? void 0 : _c.release) || void 0 === _d || _d.call(_c), null === (_e = super.release) || void 0 === _e || _e.call(this), null === (_g = null === (_f = internalProps.handler) || void 0 === _f ? void 0 : _f.release) || void 0 === _g || _g.call(_f), this.eventManager.release(), null === (_j = null === (_h = internalProps.focusControl) || void 0 === _h ? void 0 : _h.release) || void 0 === _j || _j.call(_h), null === (_k = internalProps.legends) || void 0 === _k || _k.forEach(legend => {
+        null === (_b = null === (_a = internalProps.tooltipHandler) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), null === (_d = null === (_c = internalProps.menuHandler) || void 0 === _c ? void 0 : _c.release) || void 0 === _d || _d.call(_c), null === (_e = super.release) || void 0 === _e || _e.call(this), this.pluginManager.release(), null === (_g = null === (_f = internalProps.handler) || void 0 === _f ? void 0 : _f.release) || void 0 === _g || _g.call(_f), this.eventManager.release(), null === (_j = null === (_h = internalProps.focusControl) || void 0 === _h ? void 0 : _h.release) || void 0 === _j || _j.call(_h), null === (_k = internalProps.legends) || void 0 === _k || _k.forEach(legend => {
           null == legend || legend.release();
         }), null === (_l = internalProps.title) || void 0 === _l || _l.release(), internalProps.title = null, null === (_m = internalProps.emptyTip) || void 0 === _m || _m.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), internalProps.releaseList && (internalProps.releaseList.forEach(releaseObj => {
           var _a;
@@ -55742,14 +57361,20 @@
         const {
           parentElement: parentElement
         } = internalProps.element;
-        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), null === (_q = null === (_p = null === (_o = this.editorManager) || void 0 === _o ? void 0 : _o.editingEditor) || void 0 === _p ? void 0 : _p.onEnd) || void 0 === _q || _q.call(_p), this.isReleased = !0, this.scenegraph = null, this.internalProps = null, null === (_r = this.reactCustomLayout) || void 0 === _r || _r.clearCache(), this.pluginManager.release(), clearChartRenderQueue();
+        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), null === (_q = null === (_p = null === (_o = this.editorManager) || void 0 === _o ? void 0 : _o.editingEditor) || void 0 === _p ? void 0 : _p.onEnd) || void 0 === _q || _q.call(_p), this.isReleased = !0, this.scenegraph = null, this.internalProps = null, null === (_r = this.reactCustomLayout) || void 0 === _r || _r.clearCache(), clearChartRenderQueue();
       }
       fireListeners(type, event) {
         return super.fireListeners(type, event);
       }
-      updateOption(options) {
+      updateOption(options, updateConfig = {
+        clearColWidthCache: !0,
+        clearRowHeightCache: !0
+      }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-        null === (_a = this.editorManager) || void 0 === _a || _a.cancelEdit(), this.options = options, this._hasAutoImageColumn = void 0;
+        this.fireListeners(TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION, {
+          options: options,
+          container: this.container
+        }), null === (_a = this.editorManager) || void 0 === _a || _a.cancelEdit(), this.options = options, this._hasAutoImageColumn = void 0;
         const {
             frozenColCount = 0,
             unfreezeAllOnExceedsMaxWidth: unfreezeAllOnExceedsMaxWidth,
@@ -55786,6 +57411,8 @@
             renderChartAsyncBatchCount: renderChartAsyncBatchCount,
             canvasWidth: canvasWidth,
             canvasHeight: canvasHeight,
+            contentOffsetX: translateX = 0,
+            contentOffsetY: translateY = 0,
             overscrollBehavior: overscrollBehavior,
             limitMinWidth: limitMinWidth,
             limitMinHeight: limitMinHeight
@@ -55806,9 +57433,9 @@
         } : {
           width: !1,
           height: !1
-        }), this.customRender = customRender, this.canvasWidth = isNumber$6(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$6(canvasHeight) ? canvasHeight : void 0;
+        }), this.customRender = customRender, this.contentOffsetX = null != translateX ? translateX : 0, this.contentOffsetY = null != translateY ? translateY : 0, this.canvasWidth = isNumber$6(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$6(canvasHeight) ? canvasHeight : void 0;
         const internalProps = this.internalProps;
-        if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = null === (_e = null != enableCheckboxCascade ? enableCheckboxCascade : null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox) || void 0 === _e || _e, internalProps.enableHeaderCheckboxCascade = enableCheckboxCascade || null == enableHeaderCheckboxCascade || enableHeaderCheckboxCascade, internalProps.columnResizeMode = null !== (_f = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _f ? _f : columnResizeMode, internalProps.rowResizeMode = null !== (_g = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _g ? _g : rowResizeMode, internalProps.dragHeaderMode = null !== (_j = null !== (_h = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _h ? _h : dragHeaderMode) && void 0 !== _j ? _j : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps.groupBy = null !== (_k = null == groupConfig ? void 0 : groupConfig.groupBy) && void 0 !== _k ? _k : groupBy, internalProps.groupTitleCheckbox = null == groupConfig ? void 0 : groupConfig.titleCheckbox, internalProps.groupTitleFieldFormat = null !== (_l = null == groupConfig ? void 0 : groupConfig.titleFieldFormat) && void 0 !== _l ? _l : groupTitleFieldFormat, internalProps.groupTitleCustomLayout = null !== (_m = null == groupConfig ? void 0 : groupConfig.titleCustomLayout) && void 0 !== _m ? _m : groupTitleCustomLayout, internalProps.enableTreeStickCell = null !== (_o = null == groupConfig ? void 0 : groupConfig.enableTreeStickCell) && void 0 !== _o ? _o : enableTreeStickCell, internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}, internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_p = options.theme) && void 0 !== _p ? _p : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_q = options.allowFrozenColCount) && void 0 !== _q ? _q : 0, internalProps.limitMaxAutoWidth = null !== (_r = options.limitMaxAutoWidth) && void 0 !== _r ? _r : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_s = internalProps.legends) || void 0 === _s || _s.forEach(legend => {
+        if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = null === (_e = null != enableCheckboxCascade ? enableCheckboxCascade : null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox) || void 0 === _e || _e, internalProps.enableHeaderCheckboxCascade = enableCheckboxCascade || null == enableHeaderCheckboxCascade || enableHeaderCheckboxCascade, internalProps.columnResizeMode = null !== (_f = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _f ? _f : columnResizeMode, internalProps.rowResizeMode = null !== (_g = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _g ? _g : rowResizeMode, internalProps.dragHeaderMode = null !== (_j = null !== (_h = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _h ? _h : dragHeaderMode) && void 0 !== _j ? _j : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps.groupBy = null !== (_k = null == groupConfig ? void 0 : groupConfig.groupBy) && void 0 !== _k ? _k : groupBy, internalProps.groupTitleCheckbox = null == groupConfig ? void 0 : groupConfig.titleCheckbox, internalProps.groupTitleFieldFormat = null !== (_l = null == groupConfig ? void 0 : groupConfig.titleFieldFormat) && void 0 !== _l ? _l : groupTitleFieldFormat, internalProps.groupTitleCustomLayout = null !== (_m = null == groupConfig ? void 0 : groupConfig.titleCustomLayout) && void 0 !== _m ? _m : groupTitleCustomLayout, internalProps.enableTreeStickCell = null !== (_o = null == groupConfig ? void 0 : groupConfig.enableTreeStickCell) && void 0 !== _o ? _o : enableTreeStickCell, (null == updateConfig ? void 0 : updateConfig.clearColWidthCache) && (internalProps._widthResizedColMap.clear(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}), (null == updateConfig ? void 0 : updateConfig.clearRowHeightCache) && (internalProps._heightResizedRowMap.clear(), internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map()), internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_p = options.theme) && void 0 !== _p ? _p : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_q = options.allowFrozenColCount) && void 0 !== _q ? _q : 0, internalProps.limitMaxAutoWidth = null !== (_r = options.limitMaxAutoWidth) && void 0 !== _r ? _r : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_s = internalProps.legends) || void 0 === _s || _s.forEach(legend => {
           null == legend || legend.release();
         }), null === (_t = internalProps.title) || void 0 === _t || _t.release(), internalProps.title = null, null === (_u = internalProps.emptyTip) || void 0 === _u || _u.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), clearChartRenderQueue(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
           internalProps.legends = [];
@@ -55840,7 +57467,7 @@
           const MenuHandler = Factory.getComponent("menuHandler");
           internalProps.menuHandler = new MenuHandler(this);
         }
-        this.clearCellStyleCache(), this.clearColWidthCache(), this.clearRowHeightCache(), internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), null === (_z = this.customCellStylePlugin) || void 0 === _z || _z.updateCustomCell(null !== (_0 = options.customCellStyle) && void 0 !== _0 ? _0 : [], null !== (_1 = options.customCellStyleArrangement) && void 0 !== _1 ? _1 : []), this._adjustCanvasSizeByOption();
+        this.clearCellStyleCache(), (null == updateConfig ? void 0 : updateConfig.clearColWidthCache) && this.clearColWidthCache(), (null == updateConfig ? void 0 : updateConfig.clearRowHeightCache) && this.clearRowHeightCache(), internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), null === (_z = this.customCellStylePlugin) || void 0 === _z || _z.updateCustomCell(null !== (_0 = options.customCellStyle) && void 0 !== _0 ? _0 : [], null !== (_1 = options.customCellStyleArrangement) && void 0 !== _1 ? _1 : []), this._adjustCanvasSizeByOption();
       }
       renderWithRecreateCells() {
         this.internalProps.stick.changedCells.clear();
@@ -55946,9 +57573,94 @@
         } = this;
         cellRanges.forEach((cellRange, index) => {
           var _a, _b, _c, _d, _e, _f;
-          cellRange.start.col === cellRange.end.col && cellRange.start.row === cellRange.end.row ? this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, !1, index >= 1, !1, null === (_b = null === (_a = this.options.select) || void 0 === _a ? void 0 : _a.makeSelectCellVisible) || void 0 === _b || _b, !0) : (this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, !1, index >= 1, !1, null === (_d = null === (_c = this.options.select) || void 0 === _c ? void 0 : _c.makeSelectCellVisible) || void 0 === _d || _d, !0), this.stateManager.updateInteractionState(InteractionState.grabing), this.stateManager.updateSelectPos(cellRange.end.col, cellRange.end.row, !1, index >= 1, !1, null === (_f = null === (_e = this.options.select) || void 0 === _e ? void 0 : _e.makeSelectCellVisible) || void 0 === _f || _f, !0)), this.stateManager.endSelectCells(!1, !1), this.stateManager.updateInteractionState(InteractionState.default);
+          const startRow = cellRange.start.row,
+            startCol = cellRange.start.col,
+            endRow = cellRange.end.row,
+            endCol = cellRange.end.col;
+          startCol === endCol && startRow === endRow ? this.stateManager.updateSelectPos(startCol, startRow, !1, index >= 1, !1, null === (_b = null === (_a = this.options.select) || void 0 === _a ? void 0 : _a.makeSelectCellVisible) || void 0 === _b || _b, !0) : (this.stateManager.updateSelectPos(startCol, startRow, !1, index >= 1, !1, null === (_d = null === (_c = this.options.select) || void 0 === _c ? void 0 : _c.makeSelectCellVisible) || void 0 === _d || _d, !0), this.stateManager.updateInteractionState(InteractionState.grabing), this.stateManager.updateSelectPos(endCol, endRow, !1, index >= 1, !1, null === (_f = null === (_e = this.options.select) || void 0 === _e ? void 0 : _e.makeSelectCellVisible) || void 0 === _f || _f, !0)), this.stateManager.endSelectCells(!1, !1), this.stateManager.updateInteractionState(InteractionState.default);
         }), this.setScrollTop(scrollTop), this.setScrollLeft(scrollLeft);
       }
+      selectRow(rowIndex, isCtrl, isShift) {
+        const currentSelectRanges = this.stateManager.select.ranges;
+        if (isCtrl) currentSelectRanges.push({
+          start: {
+            col: 0,
+            row: rowIndex
+          },
+          end: {
+            col: this.colCount - 1,
+            row: rowIndex
+          }
+        }), this.selectCells(currentSelectRanges);else if (isShift) {
+          const lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+          lastSelectRange && (lastSelectRange.end.row = rowIndex), this.selectCells(currentSelectRanges);
+        } else this.selectCells([{
+          start: {
+            col: 0,
+            row: rowIndex
+          },
+          end: {
+            col: this.colCount - 1,
+            row: rowIndex
+          }
+        }]);
+      }
+      selectCol(colIndex, isCtrl, isShift) {
+        const currentSelectRanges = this.stateManager.select.ranges;
+        if (isCtrl) currentSelectRanges.push({
+          start: {
+            col: colIndex,
+            row: 0
+          },
+          end: {
+            col: colIndex,
+            row: this.rowCount - 1
+          }
+        }), this.selectCells(currentSelectRanges);else if (isShift) {
+          const lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+          lastSelectRange && (lastSelectRange.end.col = colIndex), this.selectCells(currentSelectRanges);
+        } else this.selectCells([{
+          start: {
+            col: colIndex,
+            row: 0
+          },
+          end: {
+            col: colIndex,
+            row: this.rowCount - 1
+          }
+        }]);
+      }
+      startDragSelectCol(colIndex, isCtrl, isShift) {
+        var _a, _b, _c, _d, _e, _f;
+        const lastSelectRange = this.stateManager.select.ranges[this.stateManager.select.ranges.length - 1],
+          startCol = isShift && (null === (_a = null == lastSelectRange ? void 0 : lastSelectRange.start) || void 0 === _a ? void 0 : _a.col) ? null === (_b = null == lastSelectRange ? void 0 : lastSelectRange.start) || void 0 === _b ? void 0 : _b.col : colIndex,
+          endCol = colIndex,
+          endRow = this.rowCount - 1;
+        this.stateManager.updateSelectPos(startCol, 0, isShift, isCtrl, !1, null === (_d = null === (_c = this.options.select) || void 0 === _c ? void 0 : _c.makeSelectCellVisible) || void 0 === _d || _d, !0), this.stateManager.updateInteractionState(InteractionState.grabing), this.stateManager.updateSelectPos(endCol, endRow, isShift, isCtrl, !1, null === (_f = null === (_e = this.options.select) || void 0 === _e ? void 0 : _e.makeSelectCellVisible) || void 0 === _f || _f, !0);
+      }
+      dragSelectCol(colIndex, isCtrl) {
+        var _a, _b;
+        const currentSelectRanges = this.stateManager.select.ranges,
+          lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+        lastSelectRange && (lastSelectRange.end.col = colIndex), this.stateManager.updateSelectPos(colIndex, this.rowCount - 1, !1, isCtrl, !1, null === (_b = null === (_a = this.options.select) || void 0 === _a ? void 0 : _a.makeSelectCellVisible) || void 0 === _b || _b, !0);
+      }
+      endDragSelect() {
+        this.stateManager.updateInteractionState(InteractionState.default), this.stateManager.endSelectCells(!1, !1);
+      }
+      startDragSelectRow(rowIndex, isCtrl, isShift) {
+        var _a, _b, _c, _d, _e, _f;
+        const lastSelectRange = this.stateManager.select.ranges[this.stateManager.select.ranges.length - 1],
+          startRow = isShift && (null === (_a = null == lastSelectRange ? void 0 : lastSelectRange.start) || void 0 === _a ? void 0 : _a.row) ? null === (_b = null == lastSelectRange ? void 0 : lastSelectRange.start) || void 0 === _b ? void 0 : _b.row : rowIndex,
+          endCol = this.colCount - 1,
+          endRow = rowIndex;
+        this.stateManager.updateSelectPos(0, startRow, isShift, isCtrl, !1, null === (_d = null === (_c = this.options.select) || void 0 === _c ? void 0 : _c.makeSelectCellVisible) || void 0 === _d || _d, !0), this.stateManager.updateInteractionState(InteractionState.grabing), this.stateManager.updateSelectPos(endCol, endRow, isShift, isCtrl, !1, null === (_f = null === (_e = this.options.select) || void 0 === _e ? void 0 : _e.makeSelectCellVisible) || void 0 === _f || _f, !0);
+      }
+      dragSelectRow(rowIndex, isCtrl) {
+        var _a, _b;
+        const currentSelectRanges = this.stateManager.select.ranges,
+          lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+        lastSelectRange && (lastSelectRange.end.row = rowIndex), this.stateManager.updateSelectPos(this.colCount - 1, rowIndex, !1, isCtrl, !1, null === (_b = null === (_a = this.options.select) || void 0 === _a ? void 0 : _a.makeSelectCellVisible) || void 0 === _b || _b, !0);
+      }
       get recordsCount() {
         var _a;
         return null === (_a = this.records) || void 0 === _a ? void 0 : _a.length;
@@ -59392,7 +61104,8 @@
           this.isValidatingValue = !0;
           const newValue = this.editingEditor.getValue(),
             oldValue = this.table.getCellOriginValue(this.editCell.col, this.editCell.row),
-            maybePromiseOrValue = null === (_b = (_a = this.editingEditor).validateValue) || void 0 === _b ? void 0 : _b.call(_a, newValue, oldValue, this.editCell, this.table);
+            target = null == e ? void 0 : e.target,
+            maybePromiseOrValue = null === (_b = (_a = this.editingEditor).validateValue) || void 0 === _b ? void 0 : _b.call(_a, newValue, oldValue, this.editCell, this.table, !!this.table.getElement().contains(target));
           return isPromise(maybePromiseOrValue) ? (this.isValidatingValue = !0, new Promise((resolve, reject) => {
             maybePromiseOrValue.then(result => {
               dealWithValidateValue(result, this, oldValue, resolve);
@@ -59404,7 +61117,7 @@
         return this.doExit(), !0;
       }
       doExit() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const changedValue = null === (_b = (_a = this.editingEditor).getValue) || void 0 === _b ? void 0 : _b.call(_a),
           range = this.table.getCellRange(this.editCell.col, this.editCell.row),
           changedValues = [];
@@ -59413,7 +61126,7 @@
           for (let col = range.start.col; col <= range.end.col; col++) rowChangedValues.push(changedValue);
           changedValues.push(rowChangedValues);
         }
-        this.table.changeCellValues(range.start.col, range.start.row, changedValues), this.editingEditor.exit, null === (_d = (_c = this.editingEditor).exit) || void 0 === _d || _d.call(_c), null === (_f = (_e = this.editingEditor).onEnd) || void 0 === _f || _f.call(_e), this.editingEditor = null, this.isValidatingValue = !1, this.beginTriggerEditCellMode = null;
+        null === (_d = (_c = this.editingEditor).beforeEnd) || void 0 === _d || _d.call(_c), this.table.changeCellValues(range.start.col, range.start.row, changedValues), this.editingEditor.exit, null === (_f = (_e = this.editingEditor).exit) || void 0 === _f || _f.call(_e), null === (_h = (_g = this.editingEditor).onEnd) || void 0 === _h || _h.call(_g), this.editingEditor = null, this.isValidatingValue = !1, this.beginTriggerEditCellMode = null;
       }
       cancelEdit() {
         var _a, _b, _c, _d;
@@ -59429,18 +61142,23 @@
       return editManager.isValidatingValue = !1, "validate-exit" === validateValue ? (editManager.doExit(), null == resolve || resolve(!0), !0) : "invalidate-exit" === validateValue ? (editManager.editingEditor.setValue(oldValue), editManager.doExit(), null == resolve || resolve(!0), !0) : "validate-not-exit" === validateValue || "invalidate-not-exit" === validateValue ? (null == resolve || resolve(!1), !1) : !0 === validateValue ? (editManager.doExit(), null == resolve || resolve(!0), !0) : (null == resolve || resolve(!1), !1);
     }
 
-    function getGroupByDataConfig(groupByOption, customDealGroupData) {
+    function getGroupByDataConfig(groupByOption, addRecordRule, customDealGroupData) {
       if (isString$6(groupByOption)) return {
         groupByRules: [groupByOption],
+        addRecordRule: addRecordRule,
         customDealGroupData: customDealGroupData
       };
       if (isArray$9(groupByOption)) {
         return {
           groupByRules: groupByOption.map(item => isString$6(item) ? item : item.key),
+          addRecordRule: addRecordRule,
           customDealGroupData: customDealGroupData
         };
       }
-      return {};
+      return {
+        addRecordRule: addRecordRule,
+        customDealGroupData: customDealGroupData
+      };
     }
 
     var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -60096,7 +61814,10 @@
         var _a, _b, _c, _d, _e, _f, _g, _h;
         super(container, options), this.showHeader = !0, options = this.options;
         const internalProps = this.internalProps;
-        if (internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.multipleSort = !!options.multipleSort, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, this.internalProps.customDealGroupData) : {}, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_d = null !== (_c = options.enableTreeNodeMerge) && void 0 !== _c ? _c : isValid$5(this.internalProps.groupBy)) && void 0 !== _d && _d, this.internalProps.headerHelper.setTableColumnsEditor(), this.showHeader = null === (_e = options.showHeader) || void 0 === _e || _e, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, "node" !== Env.mode && (this.editorManager = new EditManager(this)), this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
+        if (internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.multipleSort = !!options.multipleSort, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule, this.internalProps.customDealGroupData) : {
+          addRecordRule: options.addRecordRule,
+          customDealGroupData: this.internalProps.customDealGroupData
+        }, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_d = null !== (_c = options.enableTreeNodeMerge) && void 0 !== _c ? _c : isValid$5(this.internalProps.groupBy)) && void 0 !== _d && _d, this.internalProps.headerHelper.setTableColumnsEditor(), this.showHeader = null === (_e = options.showHeader) || void 0 === _e || _e, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, "node" !== Env.mode && (this.editorManager = new EditManager(this)), this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
           sortState: internalProps.sortState
         }) : this.setRecords([]), options.title) {
           const Title = Factory.getComponent("title");
@@ -60151,9 +61872,21 @@
         };
         this._hasAutoImageColumn = void 0, this.refreshHeader(), this.records && checkHasAggregationOnColumnDefine(this.internalProps.columns) && this.dataSource.processRecords(null !== (_b = null === (_a = this.dataSource.dataSourceObj) || void 0 === _a ? void 0 : _a.records) && void 0 !== _b ? _b : this.dataSource.dataSourceObj), this.internalProps.useOneRowHeightFillAll = !1, this.headerStyleCache = new Map(), this.bodyStyleCache = new Map(), this.bodyBottomStyleCache = new Map(), this._updateSize(), this.scenegraph.createSceneGraph(), this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this.renderAsync(), this.eventManager.updateEventBinder();
       }
-      addColumn(column) {
+      addColumn(column, colIndex, isMaintainArrayData = !0) {
+        const columns = this.options.columns;
+        if (void 0 === colIndex) columns.push(column);else {
+          if (isMaintainArrayData) for (let i = 0; i < columns.length; i++) "number" == typeof columns[i].field && columns[i].field >= colIndex && (columns[i].field = columns[i].field + 1);
+          columns.splice(colIndex, 0, column);
+        }
+        if (isMaintainArrayData) for (let i = 0; i < this.records.length; i++) {
+          const record = this.records[i];
+          Array.isArray(record) && record.splice(colIndex, 0, void 0);
+        }
+        this.updateColumns(columns);
+      }
+      deleteColumn(colIndex) {
         const columns = this.options.columns;
-        columns.push(column), this.updateColumns(columns);
+        columns.splice(colIndex, 1), this.updateColumns(columns);
       }
       get columns() {
         return this.internalProps.layoutMap.columnTree.getCopiedTree();
@@ -60194,7 +61927,7 @@
           } else {
             const define = table.getBodyColumnDefine(col, row),
               checkboxSeriesNumberStyle = table.getFieldData(define.field, col, row);
-            value = "string" == typeof checkboxSeriesNumberStyle ? checkboxSeriesNumberStyle : (null == checkboxSeriesNumberStyle ? void 0 : checkboxSeriesNumberStyle.text) ? null !== (_a = checkboxSeriesNumberStyle.text) && void 0 !== _a ? _a : "" : row - this.columnHeaderLevelCount + 1;
+            value = ["number", "string"].includes(typeof checkboxSeriesNumberStyle) ? checkboxSeriesNumberStyle : (null == checkboxSeriesNumberStyle ? void 0 : checkboxSeriesNumberStyle.text) ? null !== (_a = checkboxSeriesNumberStyle.text) && void 0 !== _a ? _a : "" : row - this.columnHeaderLevelCount + 1;
           }
           const {
             format: format
@@ -60324,10 +62057,15 @@
         }
         return ifCan;
       }
-      updateOption(options) {
+      updateOption(options, updateConfig = {
+        clearColWidthCache: !0,
+        clearRowHeightCache: !0
+      }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const internalProps = this.internalProps;
-        if (super.updateOption(options), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, this.internalProps.customDealGroupData) : {}, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$5(this.internalProps.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, internalProps.releaseList) for (let i = internalProps.releaseList.length - 1; i >= 0; i--) {
+        if (super.updateOption(options, updateConfig), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule, this.internalProps.customDealGroupData) : {
+          addRecordRule: options.addRecordRule
+        }, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$5(this.internalProps.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, internalProps.releaseList) for (let i = internalProps.releaseList.length - 1; i >= 0; i--) {
           const releaseObj = internalProps.releaseList[i];
           releaseObj instanceof DataSource ? releaseObj.updateColumns(this.internalProps.columns) : (null === (_g = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _g || _g.call(releaseObj), internalProps.releaseList.splice(i, 1));
         }
@@ -60341,7 +62079,9 @@
           const EmptyTip = Factory.getComponent("emptyTip");
           this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_j = this.internalProps.emptyTip) || void 0 === _j || _j.resetVisible();
         }
-        return this.pluginManager.updatePlugins(options.plugins), new Promise(resolve => {
+        return this.pluginManager.updatePlugins(options.plugins), setTimeout(() => {
+          this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+        }, 0), new Promise(resolve => {
           setTimeout(resolve, 0);
         });
       }
@@ -60363,7 +62103,7 @@
           } = table.internalProps;
         if (!layoutMap) return;
         const dataCount = null !== (_b = null === (_a = table.internalProps.dataSource) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
-        layoutMap.recordsCount = dataCount + (dataCount > 0 || this.options.showAggregationWhenEmpty ? layoutMap.hasAggregationOnTopCount + layoutMap.hasAggregationOnBottomCount : 0), table.transpose ? (table.rowCount = null !== (_c = layoutMap.rowCount) && void 0 !== _c ? _c : 0, table.colCount = null !== (_d = layoutMap.colCount) && void 0 !== _d ? _d : 0, this.internalProps.frozenColCount = Math.max((null !== (_e = layoutMap.headerLevelCount) && void 0 !== _e ? _e : 0) + layoutMap.leftRowSeriesNumberColumnCount, null !== (_f = this.options.frozenColCount) && void 0 !== _f ? _f : 0), this.internalProps.frozenRowCount = null !== (_g = this.options.frozenRowCount) && void 0 !== _g ? _g : 0, table.bottomFrozenRowCount !== (null !== (_h = this.options.bottomFrozenRowCount) && void 0 !== _h ? _h : 0) && (table.bottomFrozenRowCount = null !== (_j = this.options.bottomFrozenRowCount) && void 0 !== _j ? _j : 0), table.rightFrozenColCount !== (null !== (_k = this.options.rightFrozenColCount) && void 0 !== _k ? _k : 0) && (table.rightFrozenColCount = null !== (_l = this.options.rightFrozenColCount) && void 0 !== _l ? _l : 0)) : (table.colCount = null !== (_m = layoutMap.colCount) && void 0 !== _m ? _m : 0, table.rowCount = layoutMap.recordsCount * layoutMap.bodyRowSpanCount + layoutMap.headerLevelCount, this.internalProps.frozenColCount = null !== (_o = this.options.frozenColCount) && void 0 !== _o ? _o : 0, this.options.frozenColCount >= this.colCount && (this.internalProps.frozenColCount = 0), table.frozenRowCount = Math.max(layoutMap.headerLevelCount, null !== (_p = this.options.frozenRowCount) && void 0 !== _p ? _p : 0), table.bottomFrozenRowCount !== (null !== (_q = this.options.bottomFrozenRowCount) && void 0 !== _q ? _q : 0) && (table.bottomFrozenRowCount = null !== (_r = this.options.bottomFrozenRowCount) && void 0 !== _r ? _r : 0), table.rightFrozenColCount !== (null !== (_s = this.options.rightFrozenColCount) && void 0 !== _s ? _s : 0) && (table.rightFrozenColCount = null !== (_t = this.options.rightFrozenColCount) && void 0 !== _t ? _t : 0)), this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
+        layoutMap.recordsCount = dataCount + (dataCount > 0 || this.options.showAggregationWhenEmpty ? layoutMap.hasAggregationOnTopCount + layoutMap.hasAggregationOnBottomCount : 0), table.transpose ? (table.rowCount = null !== (_c = layoutMap.rowCount) && void 0 !== _c ? _c : 0, table.colCount = null !== (_d = layoutMap.colCount) && void 0 !== _d ? _d : 0, this.internalProps.frozenColCount = Math.max((null !== (_e = layoutMap.headerLevelCount) && void 0 !== _e ? _e : 0) + layoutMap.leftRowSeriesNumberColumnCount, null !== (_f = this.options.frozenColCount) && void 0 !== _f ? _f : 0), this.internalProps.frozenRowCount = null !== (_g = this.options.frozenRowCount) && void 0 !== _g ? _g : 0, table.bottomFrozenRowCount !== (null !== (_h = this.options.bottomFrozenRowCount) && void 0 !== _h ? _h : 0) && (table.bottomFrozenRowCount = null !== (_j = this.options.bottomFrozenRowCount) && void 0 !== _j ? _j : 0), table.rightFrozenColCount !== (null !== (_k = this.options.rightFrozenColCount) && void 0 !== _k ? _k : 0) && (table.rightFrozenColCount = null !== (_l = this.options.rightFrozenColCount) && void 0 !== _l ? _l : 0)) : (table.colCount = null !== (_m = layoutMap.colCount) && void 0 !== _m ? _m : 0, table.rowCount = layoutMap.recordsCount * layoutMap.bodyRowSpanCount + layoutMap.headerLevelCount, this.internalProps.frozenColCount = null !== (_o = this.options.frozenColCount) && void 0 !== _o ? _o : 0, this.options.frozenColCount >= this.colCount && (this.internalProps.frozenColCount = 0), table._setFrozenRowCount(Math.max(layoutMap.headerLevelCount, null !== (_p = this.options.frozenRowCount) && void 0 !== _p ? _p : 0)), table.bottomFrozenRowCount !== (null !== (_q = this.options.bottomFrozenRowCount) && void 0 !== _q ? _q : 0) && (table.bottomFrozenRowCount = null !== (_r = this.options.bottomFrozenRowCount) && void 0 !== _r ? _r : 0), table.rightFrozenColCount !== (null !== (_s = this.options.rightFrozenColCount) && void 0 !== _s ? _s : 0) && (table.rightFrozenColCount = null !== (_t = this.options.rightFrozenColCount) && void 0 !== _t ? _t : 0)), this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
       }
       getFieldData(field, col, row) {
         if (null === field) return null;
@@ -60775,6 +62515,38 @@
           }
         }));
       }
+      mergeCells(startCol, startRow, endCol, endRow) {
+        for (let i = startCol; i <= endCol; i++) for (let j = startRow; j <= endRow; j++) {
+          const cellRange = this.getCellRange(i, j);
+          if (cellRange.start.col !== cellRange.end.col || cellRange.start.row !== cellRange.end.row) return;
+        }
+        this.options.customMergeCell ? "function" == typeof this.options.customMergeCell && (this.options.customMergeCell = []) : this.options.customMergeCell = [], this.options.customMergeCell.push({
+          text: this.getCellValue(startCol, startRow),
+          range: {
+            start: {
+              col: startCol,
+              row: startRow
+            },
+            end: {
+              col: endCol,
+              row: endRow
+            }
+          }
+        }), this.internalProps.customMergeCell = getCustomMergeCellFunc(this.options.customMergeCell);
+        for (let i = startCol; i <= endCol; i++) for (let j = startRow; j <= endRow; j++) this.scenegraph.updateCellContent(i, j);
+        this.scenegraph.updateNextFrame();
+      }
+      unmergeCells(startCol, startRow, endCol, endRow) {
+        this.options.customMergeCell ? "function" == typeof this.options.customMergeCell && (this.options.customMergeCell = []) : this.options.customMergeCell = [], this.options.customMergeCell = this.options.customMergeCell.filter(item => {
+          const {
+            start: start,
+            end: end
+          } = item.range;
+          return !(start.col === startCol && start.row === startRow && end.col === endCol && end.row === endRow);
+        }), this.internalProps.customMergeCell = getCustomMergeCellFunc(this.options.customMergeCell);
+        for (let i = startCol; i <= endCol; i++) for (let j = startRow; j <= endRow; j++) this.scenegraph.updateCellContent(i, j);
+        this.scenegraph.updateNextFrame();
+      }
     };
 
     function isXAxis(orient) {
@@ -68465,10 +70237,13 @@
         }
         return ifCan;
       }
-      updateOption(options) {
+      updateOption(options, updateConfig = {
+        clearColWidthCache: !0,
+        clearRowHeightCache: !0
+      }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         const internalProps = this.internalProps;
-        if (super.updateOption(options), options.rowHierarchyType || (options.rowHierarchyType = "grid"), options.columnHierarchyType || (options.columnHierarchyType = "grid"), this.layoutNodeId = {
+        if (super.updateOption(options, updateConfig), options.rowHierarchyType || (options.rowHierarchyType = "grid"), options.columnHierarchyType || (options.columnHierarchyType = "grid"), this.layoutNodeId = {
           seqId: 0
         }, this.internalProps.columns = cloneDeep$1(options.columns), this.internalProps.rows = cloneDeep$1(options.rows), this.internalProps.indicators = (null === (_a = options.indicators) || void 0 === _a ? void 0 : _a.length) ? cloneDeepSpec(options.indicators) : [], null === (_b = options.indicators) || void 0 === _b || _b.forEach((indicatorDefine, index) => {
           "object" == typeof indicatorDefine && (null == indicatorDefine ? void 0 : indicatorDefine.editor) && (this.internalProps.indicators[index].editor = indicatorDefine.editor);
@@ -68513,7 +70288,9 @@
           const EmptyTip = Factory.getComponent("emptyTip");
           this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_1 = this.internalProps.emptyTip) || void 0 === _1 || _1.resetVisible();
         }
-        return new Promise(resolve => {
+        return setTimeout(() => {
+          this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+        }, 0), new Promise(resolve => {
           setTimeout(resolve, 0);
         });
       }
@@ -68532,7 +70309,7 @@
           {
             layoutMap: layoutMap
           } = table.internalProps;
-        layoutMap && (table.colCount = null !== (_a = layoutMap.colCount) && void 0 !== _a ? _a : 0, table.rowCount = null !== (_b = layoutMap.rowCount) && void 0 !== _b ? _b : 0, this.internalProps.frozenColCount = this.options.frozenColCount ? this.options.frozenColCount : (null !== (_c = layoutMap.rowHeaderLevelCount) && void 0 !== _c ? _c : 0) + layoutMap.leftRowSeriesNumberColumnCount, table.frozenRowCount = Math.max(layoutMap.headerLevelCount, null !== (_d = this.options.frozenRowCount) && void 0 !== _d ? _d : 0), table.bottomFrozenRowCount !== (null !== (_e = this.options.bottomFrozenRowCount) && void 0 !== _e ? _e : 0) && (table.bottomFrozenRowCount = null !== (_f = this.options.bottomFrozenRowCount) && void 0 !== _f ? _f : 0), table.rightFrozenColCount !== (null !== (_g = this.options.rightFrozenColCount) && void 0 !== _g ? _g : 0) && (table.rightFrozenColCount = null !== (_h = this.options.rightFrozenColCount) && void 0 !== _h ? _h : 0), this.stateManager.setFrozenCol(this.internalProps.frozenColCount), this.stateManager.setFrozenRow(this.frozenRowCount));
+        layoutMap && (table.colCount = null !== (_a = layoutMap.colCount) && void 0 !== _a ? _a : 0, table.rowCount = null !== (_b = layoutMap.rowCount) && void 0 !== _b ? _b : 0, this.internalProps.frozenColCount = this.options.frozenColCount ? this.options.frozenColCount : (null !== (_c = layoutMap.rowHeaderLevelCount) && void 0 !== _c ? _c : 0) + layoutMap.leftRowSeriesNumberColumnCount, table._setFrozenRowCount(Math.max(layoutMap.headerLevelCount, null !== (_d = this.options.frozenRowCount) && void 0 !== _d ? _d : 0)), table.bottomFrozenRowCount !== (null !== (_e = this.options.bottomFrozenRowCount) && void 0 !== _e ? _e : 0) && (table.bottomFrozenRowCount = null !== (_f = this.options.bottomFrozenRowCount) && void 0 !== _f ? _f : 0), table.rightFrozenColCount !== (null !== (_g = this.options.rightFrozenColCount) && void 0 !== _g ? _g : 0) && (table.rightFrozenColCount = null !== (_h = this.options.rightFrozenColCount) && void 0 !== _h ? _h : 0), this.stateManager.setFrozenCol(this.internalProps.frozenColCount), this.stateManager.setFrozenRow(this.frozenRowCount));
       }
       _getSortFuncFromHeaderOption(columns, field, fieldKey) {}
       get rowHierarchyType() {
@@ -69441,11 +71218,14 @@
         }
         return ifCan;
       }
-      updateOption(options) {
+      updateOption(options, updateConfig = {
+        clearColWidthCache: !0,
+        clearRowHeightCache: !0
+      }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         const internalProps = this.internalProps;
         let columnDimensionTree, rowDimensionTree;
-        super.updateOption(options), this.layoutNodeId = {
+        super.updateOption(options, updateConfig), this.layoutNodeId = {
           seqId: 0
         }, this.internalProps.columns = cloneDeep$1(options.columns), this.internalProps.rows = cloneDeep$1(options.rows), this.internalProps.indicators = (null === (_a = options.indicators) || void 0 === _a ? void 0 : _a.length) ? cloneDeepSpec(options.indicators) : [], this.internalProps.columnTree = !options.indicatorsAsCol || (null === (_b = options.columns) || void 0 === _b ? void 0 : _b.length) || options.columnTree ? cloneDeep$1(options.columnTree) : [], this.internalProps.rowTree = options.indicatorsAsCol || (null === (_c = options.rows) || void 0 === _c ? void 0 : _c.length) || options.rowTree ? cloneDeep$1(options.rowTree) : [], options.records && (this.internalProps.records = options.records), this.setCustomStateNameToSpec(), this._selectedDataItemsInChart = [], internalProps.columnResizeType = null !== (_f = null !== (_e = null === (_d = options.resize) || void 0 === _d ? void 0 : _d.columnResizeType) && void 0 !== _e ? _e : options.columnResizeType) && void 0 !== _f ? _f : "column", internalProps.rowResizeType = null !== (_j = null !== (_h = null === (_g = options.resize) || void 0 === _g ? void 0 : _g.rowResizeType) && void 0 !== _h ? _h : options.rowResizeType) && void 0 !== _j ? _j : "row", internalProps.dataConfig = {
           isPivotChart: !0
@@ -69479,7 +71259,9 @@
           const EmptyTip = Factory.getComponent("emptyTip");
           this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_1 = this.internalProps.emptyTip) || void 0 === _1 || _1.resetVisible();
         }
-        return new Promise(resolve => {
+        return setTimeout(() => {
+          this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+        }, 0), new Promise(resolve => {
           setTimeout(resolve, 0);
         });
       }
@@ -69493,7 +71275,7 @@
           {
             layoutMap: layoutMap
           } = table.internalProps;
-        layoutMap && (table.colCount = null !== (_a = layoutMap.colCount) && void 0 !== _a ? _a : 0, table.rowCount = null !== (_b = layoutMap.rowCount) && void 0 !== _b ? _b : 0, table.internalProps.frozenColCount = null !== (_c = layoutMap.rowHeaderLevelCount) && void 0 !== _c ? _c : 0, table.frozenRowCount = Math.max(layoutMap.headerLevelCount, null !== (_d = this.options.frozenRowCount) && void 0 !== _d ? _d : 0), table.bottomFrozenRowCount !== (null !== (_e = null == layoutMap ? void 0 : layoutMap.bottomFrozenRowCount) && void 0 !== _e ? _e : 0) && (table.bottomFrozenRowCount = null !== (_f = null == layoutMap ? void 0 : layoutMap.bottomFrozenRowCount) && void 0 !== _f ? _f : 0), table.rightFrozenColCount !== (null !== (_g = null == layoutMap ? void 0 : layoutMap.rightFrozenColCount) && void 0 !== _g ? _g : 0) && (table.rightFrozenColCount = null !== (_h = null == layoutMap ? void 0 : layoutMap.rightFrozenColCount) && void 0 !== _h ? _h : 0), this.stateManager.setFrozenCol(this.internalProps.frozenColCount));
+        layoutMap && (table.colCount = null !== (_a = layoutMap.colCount) && void 0 !== _a ? _a : 0, table.rowCount = null !== (_b = layoutMap.rowCount) && void 0 !== _b ? _b : 0, table.internalProps.frozenColCount = null !== (_c = layoutMap.rowHeaderLevelCount) && void 0 !== _c ? _c : 0, table._setFrozenRowCount(Math.max(layoutMap.headerLevelCount, null !== (_d = this.options.frozenRowCount) && void 0 !== _d ? _d : 0)), table.bottomFrozenRowCount !== (null !== (_e = null == layoutMap ? void 0 : layoutMap.bottomFrozenRowCount) && void 0 !== _e ? _e : 0) && (table.bottomFrozenRowCount = null !== (_f = null == layoutMap ? void 0 : layoutMap.bottomFrozenRowCount) && void 0 !== _f ? _f : 0), table.rightFrozenColCount !== (null !== (_g = null == layoutMap ? void 0 : layoutMap.rightFrozenColCount) && void 0 !== _g ? _g : 0) && (table.rightFrozenColCount = null !== (_h = null == layoutMap ? void 0 : layoutMap.rightFrozenColCount) && void 0 !== _h ? _h : 0), this.stateManager.setFrozenCol(this.internalProps.frozenColCount));
       }
       _getSortFuncFromHeaderOption(columns, field, fieldKey) {}
       syncHierarchyState(sourceNode, targetNode) {
@@ -78072,7 +79854,7 @@
     const Checkbox = React.forwardRef(CheckboxComponent);
     Checkbox.displayName = 'Checkbox';
 
-    const version = "1.0.17";
+    const version = "1.0.18";
 
     exports.Arc = Arc;
     exports.Avatar = Avatar;