@visactor/vtable 1.19.9-alpha.3 → 1.20.0-alpha.0

package/dist/vtable.js

@@ -4635,7 +4635,8 @@
       y1: 0,
       strokeBoundsBuffer: 0,
       cornerRadius: 0,
-      cornerType: "round"
+      cornerType: "round",
+      drawStrokeWhenZeroWH: !1
     });
     Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
@@ -4644,7 +4645,8 @@
       y1: 0,
       cornerRadius: 0,
       length: 0,
-      cornerType: "round"
+      cornerType: "round",
+      drawStrokeWhenZeroWH: !1
     });
     const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       symbolType: "circle",
@@ -4871,6 +4873,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,
@@ -4884,10 +4914,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) {
@@ -4902,10 +4929,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) {
@@ -4927,10 +4951,7 @@
           y0: y0,
           x1: x1,
           y1: y1,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
+          stops: GradientParser.processColorStops(colorStops)
         };
       }
     }
@@ -5126,6 +5147,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);
       }
@@ -5518,7 +5542,11 @@
       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$$([injectable()], DefaultTextMeasureContribution);
 
     const container = new Container$2();
@@ -6099,13 +6127,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);
@@ -6118,7 +6150,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;
@@ -9298,7 +9330,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);
@@ -10123,8 +10155,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,
@@ -10715,7 +10747,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();
       }
@@ -10814,7 +10846,7 @@
         return fontSize ? .1 * fontSize : 0;
       }
       updateHorizontalMultilineAABBBounds(text) {
-        var _a;
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
           attribute = this.attribute,
           {
@@ -10841,7 +10873,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,
@@ -10859,7 +10891,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,
@@ -10885,7 +10917,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,
@@ -10917,7 +10949,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;
             }
@@ -10980,9 +11012,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,
           {
@@ -11003,7 +11035,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 => {
@@ -11117,7 +11149,7 @@
         return isArray$9(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,
@@ -11141,7 +11173,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,
@@ -11170,7 +11202,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;
             }
@@ -12274,7 +12306,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);
@@ -14673,7 +14705,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,
@@ -14681,7 +14714,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;
@@ -16742,13 +16775,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 = {
@@ -16756,7 +16789,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,
@@ -16767,7 +16800,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$6(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -16882,10 +16915,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);
@@ -23678,6 +23717,7 @@
         return this.getEndProps();
       }
       stop() {}
+      release() {}
     }
     class WaitStep extends Step {
       constructor(type, props, duration, easing) {
@@ -23685,8 +23725,6 @@
       }
       onStart() {
         super.onStart();
-      }
-      onFirstRun() {
         const fromProps = this.getFromProps();
         this.target.setAttributes(fromProps);
       }
@@ -23895,7 +23933,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;
@@ -23969,6 +24009,10 @@
       getLoop() {
         return this._loopCount;
       }
+      forEachStep(cb) {
+        let step = this._firstStep;
+        for (; step;) cb(step), step = step.next;
+      }
     }
 
     const performanceRAF = new PerformanceRAF();
@@ -24201,6 +24245,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();
@@ -24341,14 +24388,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$7(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$7(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);
       }
@@ -24568,7 +24615,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);
         }
@@ -24711,6 +24758,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) {
@@ -25093,7 +25179,7 @@
     }
     class GrowAngleIn extends GrowAngleBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25102,7 +25188,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 {
@@ -25710,7 +25796,7 @@
     }
     class GrowRadiusIn extends GrowPointsBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25719,7 +25805,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 {
@@ -25834,7 +25920,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25843,7 +25929,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);
@@ -27627,8 +27713,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 {
@@ -34442,6 +35791,25 @@
     function isZeroStyle(style) {
         return style === 0 || (isArray$7(style) && style.every(s => s === 0));
     }
+    function setActiveCellRangeState(table) {
+        const selectRanges = table.stateManager.select.ranges;
+        const setRanges = [];
+        for (let i = 0; i < selectRanges.length; i++) {
+            const range = selectRanges[i];
+            setRanges.push({
+                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)) {
@@ -34924,6 +36292,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',
@@ -34942,8 +36311,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',
@@ -34952,7 +36323,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) => {
@@ -36642,7 +38014,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;
@@ -37005,6 +38377,7 @@
         return isValid$3(mapIndex) ? mapIndex : index;
     }
     class DataSource extends EventTarget$1 {
+        addRecordRule = 'Object';
         dataConfig;
         dataSourceObj;
         _get;
@@ -37029,6 +38402,7 @@
         lastFilterRules;
         constructor(dataSourceObj, dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
             super();
+            this.addRecordRule = dataConfig?.addRecordRule || 'Object';
             this.registerAggregators();
             this.dataSourceObj = dataSourceObj;
             this.dataConfig = dataConfig;
@@ -37179,6 +38553,9 @@
             if (isHasFilterRule || isHasAggregation) {
                 for (let i = 0, len = records.length; i < len; i++) {
                     const record = records[i];
+                    if (record === undefined || record === null) {
+                        continue;
+                    }
                     if (this.dataConfig?.filterRules?.length >= 1) {
                         if (this.filterRecord(record)) {
                             filteredRecords.push(record);
@@ -37425,7 +38802,7 @@
                             record[field] = formatValue;
                         }
                         else {
-                            this.records[dataIndex] = {};
+                            this.records[dataIndex] = this.addRecordRule === 'Array' ? [] : {};
                             this.records[dataIndex][field] = formatValue;
                         }
                     }
@@ -37682,10 +39059,30 @@
             }
             const sortedIndexArray = Array.from({ length: this._sourceLength }, (_, i) => i);
             sortedIndexArray.sort((indexA, indexB) => {
+                const recordA = this.getOriginalRecord(indexA);
+                const recordB = this.getOriginalRecord(indexB);
+                const isEmptyA = recordA === null || recordA === undefined || (typeof recordA === 'object' && Object.keys(recordA).length === 0);
+                const isEmptyB = recordB === null || recordB === undefined || (typeof recordB === 'object' && Object.keys(recordB).length === 0);
                 return states.reduce((result, state) => {
                     if (result !== 0) {
                         return result;
                     }
+                    if (state.order === 'asc' || state.order === 'desc') {
+                        if (isEmptyA && !isEmptyB) {
+                            return 1;
+                        }
+                        if (!isEmptyA && isEmptyB) {
+                            return -1;
+                        }
+                        if (isEmptyA && isEmptyB) {
+                            return indexA - indexB;
+                        }
+                    }
+                    else {
+                        if (isEmptyA || isEmptyB) {
+                            return indexA - indexB;
+                        }
+                    }
                     const orderFn = state.orderFn ||
                         (state.order !== 'desc'
                             ? (v1, v2) => (v1 === v2 ? 0 : v1 > v2 ? 1 : -1)
@@ -42110,6 +43507,66 @@
         }
         return { x, y };
     }
+    function calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table) {
+        let needRowHeader = false;
+        let needRightRowHeader = false;
+        let needColumnHeader = false;
+        let needBottomColumnHeader = false;
+        let needBody = false;
+        let needCornerHeader = false;
+        let needRightTopCornerHeader = false;
+        let needRightBottomCornerHeader = false;
+        let needLeftBottomCornerHeader = false;
+        if (startCol <= table.frozenColCount - 1 && startRow <= table.frozenRowCount - 1) {
+            needCornerHeader = true;
+        }
+        if (endCol >= table.colCount - table.rightFrozenColCount && startRow <= table.frozenRowCount - 1) {
+            needRightTopCornerHeader = true;
+        }
+        if (startCol <= table.frozenColCount - 1 && endRow >= table.rowCount - table.bottomFrozenRowCount) {
+            needLeftBottomCornerHeader = true;
+        }
+        if (endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.rowCount - table.bottomFrozenRowCount) {
+            needRightBottomCornerHeader = true;
+        }
+        if (startCol <= table.frozenColCount - 1 &&
+            endRow >= table.frozenRowCount &&
+            startRow <= table.rowCount - table.bottomFrozenRowCount - 1) {
+            needRowHeader = true;
+        }
+        if (endCol >= table.colCount - table.rightFrozenColCount &&
+            endRow >= table.frozenRowCount &&
+            startRow <= table.rowCount - table.bottomFrozenRowCount - 1) {
+            needRightRowHeader = true;
+        }
+        if (startRow <= table.frozenRowCount - 1 &&
+            endCol >= table.frozenColCount &&
+            startCol <= table.colCount - table.rightFrozenColCount - 1) {
+            needColumnHeader = true;
+        }
+        if (endRow >= table.rowCount - table.bottomFrozenRowCount &&
+            endCol >= table.frozenColCount &&
+            startCol <= table.colCount - table.rightFrozenColCount - 1) {
+            needBottomColumnHeader = true;
+        }
+        if (startCol <= table.colCount - table.rightFrozenColCount - 1 &&
+            endCol >= table.frozenColCount &&
+            startRow <= table.rowCount - table.bottomFrozenRowCount - 1 &&
+            endRow >= table.frozenRowCount) {
+            needBody = true;
+        }
+        return {
+            needRowHeader,
+            needRightRowHeader,
+            needColumnHeader,
+            needBottomColumnHeader,
+            needBody,
+            needCornerHeader,
+            needRightTopCornerHeader,
+            needLeftBottomCornerHeader,
+            needRightBottomCornerHeader
+        };
+    }
 
     function getProp(name, cellStyle, col, row, _table) {
         const prop = cellStyle && isValid$3(cellStyle[name]) ? cellStyle[name] : undefined;
@@ -43700,6 +45157,10 @@
                 lineDash: cellTheme?.group?.lineDash ?? undefined,
                 y: table.scenegraph.getCellGroupY(row)
             });
+            oldCellGroup.mergeStartCol = undefined;
+            oldCellGroup.mergeStartRow = undefined;
+            oldCellGroup.mergeEndCol = undefined;
+            oldCellGroup.mergeEndRow = undefined;
             oldCellGroup.forEachChildren((child) => {
                 child.setAttributes({
                     dx: 0,
@@ -47553,7 +49014,7 @@
             const formatResult = table.options.specFormat(chart.attribute.spec, chartInstance, chart);
             if (formatResult.needFormatSpec && formatResult.spec) {
                 const spec = formatResult.spec;
-                chartInstance.updateSpecSync(spec, false, { reuse: false, morph: false });
+                chartInstance.updateSpecSync(spec);
                 updateSpec = formatResult.updateSpec ?? true;
             }
         }
@@ -47734,7 +49195,7 @@
                     const formatResult = table.options.specFormat(chart.attribute.spec, activeChartInstance, chart);
                     if (formatResult.needFormatSpec && formatResult.spec) {
                         const spec = formatResult.spec;
-                        activeChartInstance.updateSpecSync(spec, false, { reuse: false, morph: false });
+                        activeChartInstance.updateSpecSync(spec);
                     }
                 }
                 const viewBox = chart.getViewBox();
@@ -49081,17 +50542,10 @@
         type = 'chart';
         numberType = CHART_NUMBER_TYPE;
         contains(chart, point, params) {
-            const vChart = chart.activeChartInstance;
-            if (!vChart) {
-                return false;
-            }
-            const vchartStage = vChart.getStage();
-            vchartStage.dirtyBounds?.clear();
-            const pick = vchartStage.pick(point.x, point.y);
-            if (pick.graphic === null && pick.group.name === 'root') {
+            if (!chart.AABBBounds.containsPoint(point)) {
                 return false;
             }
-            return pick;
+            return true;
         }
     };
     VChartPicker = __decorate([
@@ -49255,7 +50709,7 @@
                     table.scenegraph.updateColWidth(col, newColWidth - oldColWidths[col], true, true);
                 }
             }
-            table.scenegraph.updateContainer(true);
+            table.scenegraph.updateContainer({ async: true });
         }
         if (table.isPivotTable()) {
             layoutMap.disableUseGetBodyCache();
@@ -52198,53 +53652,7 @@
             selectComp.fillhandle?.delete();
         });
         scene.selectingRangeComponents = new Map();
-        let needRowHeader = false;
-        let needRightRowHeader = false;
-        let needColumnHeader = false;
-        let needBottomColumnHeader = false;
-        let needBody = false;
-        let needCornerHeader = false;
-        let needRightTopCornerHeader = false;
-        let needRightBottomCornerHeader = false;
-        let needLeftBottomCornerHeader = false;
-        if (startCol <= table.frozenColCount - 1 && startRow <= table.frozenRowCount - 1) {
-            needCornerHeader = true;
-        }
-        if (endCol >= table.colCount - table.rightFrozenColCount && startRow <= table.frozenRowCount - 1) {
-            needRightTopCornerHeader = true;
-        }
-        if (startCol <= table.frozenColCount - 1 && endRow >= table.rowCount - table.bottomFrozenRowCount) {
-            needLeftBottomCornerHeader = true;
-        }
-        if (endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.rowCount - table.bottomFrozenRowCount) {
-            needRightBottomCornerHeader = true;
-        }
-        if (startCol <= table.frozenColCount - 1 &&
-            endRow >= table.frozenRowCount &&
-            startRow <= table.rowCount - table.bottomFrozenRowCount - 1) {
-            needRowHeader = true;
-        }
-        if (endCol >= table.colCount - table.rightFrozenColCount &&
-            endRow >= table.frozenRowCount &&
-            startRow <= table.rowCount - table.bottomFrozenRowCount - 1) {
-            needRightRowHeader = true;
-        }
-        if (startRow <= table.frozenRowCount - 1 &&
-            endCol >= table.frozenColCount &&
-            startCol <= table.colCount - table.rightFrozenColCount - 1) {
-            needColumnHeader = true;
-        }
-        if (endRow >= table.rowCount - table.bottomFrozenRowCount &&
-            endCol >= table.frozenColCount &&
-            startCol <= table.colCount - table.rightFrozenColCount - 1) {
-            needBottomColumnHeader = true;
-        }
-        if (startCol <= table.colCount - table.rightFrozenColCount - 1 &&
-            endCol >= table.frozenColCount &&
-            startRow <= table.rowCount - table.bottomFrozenRowCount - 1 &&
-            endRow >= table.frozenRowCount) {
-            needBody = true;
-        }
+        const { needRowHeader, needRightRowHeader, needColumnHeader, needBottomColumnHeader, needBody, needCornerHeader, needRightTopCornerHeader, needLeftBottomCornerHeader, needRightBottomCornerHeader } = calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table);
         if (needCornerHeader) {
             const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
             const cornerEndRow = Math.min(endRow, table.frozenRowCount - 1);
@@ -53509,7 +54917,7 @@
         scene.proxy.rowStart = scene.bodyGroup.firstChild?.firstChild?.row ?? scene.table.frozenRowCount;
         scene.bodyGroup.setAttribute('y', scene.colHeaderGroup.attribute.height);
         scene.rowHeaderGroup.setAttribute('y', scene.cornerHeaderGroup.attribute.height);
-        scene.updateContainer();
+        scene.updateContainer({ needUpdateCellY: true });
         scene.updateBorderSizeAndPosition();
         scene.hasFrozen = true;
     }
@@ -53521,6 +54929,9 @@
                 continue;
             }
             const rowCell = child.firstChild;
+            if (!scene.colHeaderGroup.children[i]) {
+                createColGroup(scene.colHeaderGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, 'columnHeader', scene.table);
+            }
             scene.colHeaderGroup.children[i]?.appendChild(rowCell);
             if (!hasSetedHeight) {
                 scene.colHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height + rowCell.attribute.height);
@@ -53537,6 +54948,9 @@
                 continue;
             }
             const rowCell = child.firstChild;
+            if (!scene.cornerHeaderGroup.children[i]) {
+                createColGroup(scene.cornerHeaderGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, scene.table.isListTable() ? 'columnHeader' : 'cornerHeader', scene.table);
+            }
             scene.cornerHeaderGroup.children[i]?.appendChild(rowCell);
             if (!hasSetedHeight) {
                 scene.cornerHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height + rowCell.attribute.height);
@@ -53553,7 +54967,10 @@
                 continue;
             }
             const rowCell = child.firstChild;
-            scene.rightTopCornerGroup.children[i]?.appendChild(rowCell);
+            if (!scene.rightTopCornerGroup.children[i]) {
+                createColGroup(scene.rightTopCornerGroup, 0, 0, rowCell.col, rowCell.col, 0, 0, 'columnHeader', scene.table);
+            }
+            scene.rightTopCornerGroup.children[i].appendChild(rowCell);
             if (!hasSetedHeight) {
                 scene.rightTopCornerGroup.setAttribute('height', scene.rightTopCornerGroup.attribute.height + rowCell.attribute.height);
                 scene.rightFrozenGroup.setAttribute('height', scene.rightFrozenGroup.attribute.height - rowCell.attribute.height);
@@ -54004,6 +55421,13 @@
         });
         return x;
     }
+    function updateContainerChildrenY(containerGroup, y) {
+        containerGroup.forEachChildrenSkipChild((row, index) => {
+            row.setAttribute('y', y);
+            y += row.attribute.height;
+        });
+        return y;
+    }
 
     function hideHoverIcon(col, row, scene) {
         if (col === -1 || row === -1) {
@@ -55173,7 +56597,7 @@
         updateColWidth(col, detaX, skipUpdateContainer, skipTableWidthMap) {
             updateColWidth(this, col, Math.round(detaX), skipTableWidthMap);
             if (!skipUpdateContainer) {
-                this.updateContainer(true);
+                this.updateContainer({ async: true });
             }
         }
         updateChartSizeForResizeColWidth(col) {
@@ -55892,26 +57316,67 @@
             this.bottomFrozenGroup.setAttribute('x', this.table.getFrozenColsWidth());
             this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
         }
-        updateContainer(async = false) {
-            if (async) {
+        updateContainerAttrHeightAndY() {
+            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(this.table.frozenRowCount ?? 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(this.table.frozenRowCount ?? 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(this.table.frozenRowCount ?? 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: false, needUpdateCellY: false }) {
+            if (updateConfig.async) {
                 if (!this._needUpdateContainer) {
                     this._needUpdateContainer = true;
                     setTimeout(() => {
-                        this.updateContainerSync();
+                        this.updateContainerSync(updateConfig.needUpdateCellY ?? false);
                     }, 0);
                 }
             }
             else {
                 this._needUpdateContainer = true;
-                this.updateContainerSync();
+                this.updateContainerSync(updateConfig.needUpdateCellY ?? false);
             }
         }
-        updateContainerSync() {
+        updateContainerSync(needUpdateCellY = false) {
             if (!this._needUpdateContainer) {
                 return;
             }
             this._needUpdateContainer = false;
             this.updateContainerAttrWidthAndX();
+            if (needUpdateCellY) {
+                this.updateContainerAttrHeightAndY();
+            }
             this.updateTableSize();
             this.component.updateScrollBar();
             this.updateNextFrame();
@@ -56561,6 +58026,7 @@
         const { table, interactionState } = state;
         const { scenegraph } = table;
         const { highlightScope, disableHeader, cellPos, disableCtrlMultiSelect } = state.select;
+        state.select.isSelectAll = isSelectAll;
         if (col !== -1 && row !== -1 && makeSelectCellVisible) {
             table._makeVisibleCell(col, row);
         }
@@ -58260,6 +59726,126 @@
         }
     }
 
+    function updateCustomSelectBorder(scene, selectRange, style) {
+        const table = scene.table;
+        const newStartCol = selectRange.start.col;
+        const newStartRow = selectRange.start.row;
+        const newEndCol = selectRange.end.col;
+        const newEndRow = selectRange.end.row;
+        selectRange.skipBodyMerge;
+        const startCol = Math.max(Math.min(newEndCol, newStartCol), 0);
+        const startRow = Math.max(Math.min(newEndRow, newStartRow), 0);
+        const endCol = Math.min(Math.max(newEndCol, newStartCol), table.colCount - 1);
+        const endRow = Math.min(Math.max(newEndRow, newStartRow), table.rowCount - 1);
+        const { needRowHeader, needRightRowHeader, needColumnHeader, needBottomColumnHeader, needBody, needCornerHeader, needRightTopCornerHeader, needLeftBottomCornerHeader, needRightBottomCornerHeader } = calculateCellRangeDistribution(startCol, startRow, endCol, endRow, table);
+        if (needCornerHeader) {
+            const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
+            const cornerEndRow = Math.min(endRow, table.frozenRowCount - 1);
+            const strokeArray = [true, !needColumnHeader, !needRowHeader, true];
+            createCustomCellSelectBorder(scene, startCol, startRow, cornerEndCol, cornerEndRow, 'cornerHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needRightTopCornerHeader) {
+            const cornerStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
+            const cornerEndRow = Math.min(endRow, table.frozenRowCount - 1);
+            const strokeArray = [true, true, !needRightRowHeader, !needColumnHeader];
+            createCustomCellSelectBorder(scene, cornerStartCol, startRow, endCol, cornerEndRow, 'rightTopCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needLeftBottomCornerHeader) {
+            const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
+            const cornerStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+            const strokeArray = [!needRowHeader, !needBottomColumnHeader, true, true];
+            createCustomCellSelectBorder(scene, startCol, cornerStartRow, cornerEndCol, endRow, 'leftBottomCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needRightBottomCornerHeader) {
+            const cornerStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
+            const cornerStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+            const strokeArray = [!needRightRowHeader, true, true, !needBottomColumnHeader];
+            createCustomCellSelectBorder(scene, cornerStartCol, cornerStartRow, endCol, endRow, 'rightBottomCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needColumnHeader) {
+            const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
+            const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
+            const columnHeaderEndRow = Math.min(endRow, table.frozenRowCount - 1);
+            const strokeArray = [true, !needRightTopCornerHeader, !needBody, !needCornerHeader];
+            createCustomCellSelectBorder(scene, columnHeaderStartCol, startRow, columnHeaderEndCol, columnHeaderEndRow, 'columnHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needBottomColumnHeader) {
+            const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
+            const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
+            const columnHeaderStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+            const strokeArray = [!needBody, !needRightBottomCornerHeader, true, !needLeftBottomCornerHeader];
+            createCustomCellSelectBorder(scene, columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, endRow, 'bottomFrozen', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needRowHeader) {
+            const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
+            const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+            const columnHeaderEndCol = Math.min(endCol, table.frozenColCount - 1);
+            const strokeArray = [!needCornerHeader, !needBody, !needLeftBottomCornerHeader, true];
+            createCustomCellSelectBorder(scene, startCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'rowHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needRightRowHeader) {
+            const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
+            const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+            const columnHeaderStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
+            const strokeArray = [!needRightTopCornerHeader, true, !needRightBottomCornerHeader, !needBody];
+            createCustomCellSelectBorder(scene, columnHeaderStartCol, columnHeaderStartRow, endCol, columnHeaderEndRow, 'rightFrozen', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+        if (needBody) {
+            const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
+            const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
+            const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
+            const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+            const strokeArray = [!needColumnHeader, !needRightRowHeader, !needBottomColumnHeader, !needRowHeader];
+            createCustomCellSelectBorder(scene, columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'body', `${startCol}${startRow}${endCol}${endRow}`, strokeArray, style);
+        }
+    }
+    function createCustomCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes, style) {
+        const startCol = Math.min(start_Col, end_Col);
+        const startRow = Math.min(start_Row, end_Row);
+        const endCol = Math.max(start_Col, end_Col);
+        const endRow = Math.max(start_Row, end_Row);
+        const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
+        const rect = createRect({
+            pickable: false,
+            fill: style.cellBgColor ?? false,
+            lineWidth: style.cellBorderLineWidth ?? 0,
+            lineDash: style.cellBorderLineDash ?? [],
+            stroke: strokes.map(stroke => {
+                if (stroke) {
+                    return style.cellBorderColor;
+                }
+                return false;
+            }),
+            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
+            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            width: 0,
+            height: 0,
+            visible: true,
+            cornerRadius: getCornerRadius(selectRangeType, scene.table.theme.frameStyle?.cornerRadius, start_Col, start_Row, end_Col, end_Row, scene.table)
+        });
+        scene.customSelectedRangeComponents.set(`${startCol}-${startRow}-${endCol}-${endRow}-${selectId}`, {
+            rect,
+            role: selectRangeType
+        });
+        scene.tableGroup.insertAfter(rect, selectRangeType === 'body'
+            ? scene.bodyGroup
+            : selectRangeType === 'columnHeader'
+                ? scene.colHeaderGroup
+                : selectRangeType === 'rowHeader'
+                    ? scene.rowHeaderGroup
+                    : selectRangeType === 'cornerHeader'
+                        ? scene.cornerHeaderGroup
+                        : selectRangeType === 'rightTopCorner'
+                            ? scene.rightTopCornerGroup
+                            : selectRangeType === 'rightFrozen'
+                                ? scene.rightFrozenGroup
+                                : selectRangeType === 'leftBottomCorner'
+                                    ? scene.leftBottomCornerGroup
+                                    : selectRangeType === 'bottomFrozen'
+                                        ? scene.bottomFrozenGroup
+                                        : scene.rightBottomCornerGroup);
+    }
+
     function deletaCustomSelectRanges(state) {
         const { customSelectedRangeComponents } = state.table.scenegraph;
         customSelectedRangeComponents.forEach((selectComp, key) => {
@@ -58269,20 +59855,8 @@
         state.select.customSelectRanges = [];
     }
     function addCustomSelectRanges(customSelectRanges, state) {
-        const { customSelectedRangeComponents } = state.table.scenegraph;
         customSelectRanges.forEach((customRange) => {
-            const { range, style } = customRange;
-            const rect = createRect({
-                fill: style.cellBgColor ?? false,
-                stroke: style.cellBorderColor ?? false,
-                lineWidth: style.cellBorderLineWidth ?? 0,
-                lineDash: style.cellBorderLineDash ?? [],
-                pickable: false
-            });
-            customSelectedRangeComponents.set(`${range.start.col}-${range.start.row}-${range.end.col}-${range.end.row}`, {
-                rect,
-                role: 'body'
-            });
+            updateCustomSelectBorder(state.table.scenegraph, customRange.range, customRange.style);
         });
         state.select.customSelectRanges = customSelectRanges;
         updateAllSelectComponent(state.table.scenegraph);
@@ -58647,7 +60221,17 @@
             if (row > this.table.rowCount - 1) {
                 row = this.table.rowCount - 1;
             }
+            const oldCellPosCol = this.select.cellPos.col;
+            const oldCellPosRow = this.select.cellPos.row;
             updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, makeSelectCellVisible, skipBodyMerge);
+            if (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);
@@ -59384,6 +60968,9 @@
                 event
             });
         }
+        setSelectInline(selectInline) {
+            this.select.selectInline = selectInline;
+        }
         updateSortState(sortState) {
             sortState = Array.isArray(sortState) ? sortState : [sortState];
             for (let index = 0; index < sortState.length; index++) {
@@ -59456,7 +61043,10 @@
             }
             this.frozen.icon = iconMark;
         }
-        updateCursor(mode = 'default') {
+        updateCursor(mode) {
+            if (!mode) {
+                mode = this.table.options.defaultCursor ?? 'default';
+            }
             this.table.getElement().style.cursor = mode;
         }
         updateDrillState(dimensionKey, title, drillDown, drillUp, col, row) {
@@ -59929,8 +61519,7 @@
                     mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
                 });
             }
-            if (stateManager.interactionState === InteractionState.grabing &&
-                !table.editorManager?.editingEditor) {
+            if (stateManager.interactionState === InteractionState.grabing) {
                 if (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) {
                     if (stateManager.isResizeCol() || stateManager.isResizeRow()) ;
                     else if (stateManager.isMoveCol()) {
@@ -60144,7 +61733,7 @@
             }
             const isCompleteEdit = table.editorManager?.completeEdit(e.nativeEvent);
             getPromiseValue(isCompleteEdit, isCompleteEdit => {
-                if (isCompleteEdit === false) {
+                if (!table.options.customConfig?.selectCellWhenCellEditorNotExists && isCompleteEdit === false) {
                     return;
                 }
                 const hitIcon = eventArgsSet?.eventArgs?.target?.role?.startsWith('icon')
@@ -60431,9 +62020,13 @@
                 eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
             }
-            const isCompleteEdit = table.editorManager?.completeEdit(e.nativeEvent);
+            let isCompleteEdit = false;
+            const target = e.target;
+            if (target !== table.scenegraph.tableGroup && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
+                isCompleteEdit = table.editorManager?.completeEdit(e.nativeEvent);
+            }
             getPromiseValue(isCompleteEdit, isCompleteEdit => {
-                if (isCompleteEdit === false) {
+                if (!table.options.customConfig?.selectCellWhenCellEditorNotExists && isCompleteEdit === false) {
                     return;
                 }
                 const hitIcon = e.target.role?.startsWith('icon') ? e.target : undefined;
@@ -60480,7 +62073,12 @@
                 stateManager.updateInteractionState(InteractionState.default);
                 eventManager.dealTableHover();
                 const isHasSelected = !!stateManager.select.ranges?.length;
-                if (table.options.select?.blankAreaClickDeselect ?? true) {
+                if (table.options.customConfig?.cancelSelectCellHook) {
+                    if (table.options.customConfig?.cancelSelectCellHook(e)) {
+                        eventManager.dealTableSelect();
+                    }
+                }
+                else if (table.options.select?.blankAreaClickDeselect ?? true) {
                     eventManager.dealTableSelect();
                 }
                 stateManager.endSelectCells(true, isHasSelected);
@@ -60814,7 +62412,7 @@
             scenegraph.table.eventManager.isDraging = false;
         });
         scenegraph.component.hScrollBar.addEventListener('pointermove', (e) => {
-            scenegraph.table.stateManager.updateCursor('default');
+            scenegraph.table.stateManager.updateCursor();
             e.stopPropagation();
         });
         scenegraph.component.hScrollBar.addEventListener('pointerdown', (e) => {
@@ -61096,121 +62694,17 @@
         }
         handler.on(table.getElement(), 'copy', async (e) => {
             if (table.keyboardOptions?.copySelected) {
-                const data = table.getCopyValue();
-                if (isValid$3(data)) {
-                    e.preventDefault();
-                    const permissionState = await navigator.permissions.query({ name: 'clipboard-write' });
-                    if (navigator.clipboard?.write && permissionState.state === 'granted') {
-                        const setDataToHTML = (data) => {
-                            const result = ['<table>'];
-                            const META_HEAD = [
-                                '<meta name="author" content="Visactor"/>',
-                                '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'
-                            ].join('');
-                            const rows = data.split('\r\n');
-                            rows.forEach(function (rowCells, rowIndex) {
-                                const cells = rowCells.split('\t');
-                                const rowValues = [];
-                                if (rowIndex === 0) {
-                                    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) => {
-                                            return `<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>');
-                                if (rowIndex === rows.length - 1) {
-                                    result.push('</tbody>');
-                                }
-                            });
-                            result.push('</table>');
-                            return [META_HEAD, result.join('')].join('');
-                        };
-                        const 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 {
-                        if (browser.IE) {
-                            window.clipboardData.setData('Text', data);
-                        }
-                        else {
-                            e.clipboardData.setData('text/plain', data);
-                        }
-                    }
-                    table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
-                        cellRange: table.stateManager.select.ranges,
-                        copyData: data
-                    });
-                }
+                eventManager.handleCopy(e);
+            }
+        });
+        handler.on(table.getElement(), 'cut', async (e) => {
+            if (table.keyboardOptions?.cutSelected) {
+                eventManager.handleCut(e);
             }
         });
         handler.on(table.getElement(), 'paste', async (e) => {
-            if (table.keyboardOptions?.pasteValueToCell && table.changeCellValues) {
-                if (table.editorManager?.editingEditor) {
-                    return;
-                }
-                if (table.stateManager.select.ranges?.length > 0) {
-                    if (navigator.clipboard?.read) {
-                        navigator.clipboard.read().then(clipboardItems => {
-                            for (const item of clipboardItems) {
-                                if (item.types.includes('text/html')) {
-                                    pasteHtmlToTable(item);
-                                }
-                                else if (item.types.length === 1 && item.types[0] === 'text/plain') {
-                                    pasteTextToTable(item);
-                                }
-                                else ;
-                            }
-                        });
-                    }
-                    else {
-                        const ranges = table.stateManager.select.ranges;
-                        const col = Math.min(ranges[0].start.col, ranges[0].end.col);
-                        const row = Math.min(ranges[0].start.row, ranges[0].end.row);
-                        const clipboardData = e.clipboardData || window.Clipboard;
-                        const pastedData = clipboardData.getData('text');
-                        const rows = pastedData.split('\n');
-                        const values = [];
-                        rows.forEach(function (rowCells, rowIndex) {
-                            const cells = rowCells.split('\t');
-                            const rowValues = [];
-                            values.push(rowValues);
-                            cells.forEach(function (cell, cellIndex) {
-                                if (cellIndex === cells.length - 1) {
-                                    cell = cell.trim();
-                                }
-                                rowValues.push(cell);
-                            });
-                        });
-                        const changedCellResults = await table.changeCellValues(col, row, values);
-                        if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
-                            table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                                col,
-                                row,
-                                pasteData: values,
-                                changedCellResults
-                            });
-                        }
-                    }
-                }
+            if (table.keyboardOptions?.pasteValueToCell) {
+                eventManager.handlePaste(e);
             }
         });
         handler.on(table.getElement(), 'contextmenu', (e) => {
@@ -61240,162 +62734,6 @@
                 }
             });
         }
-        const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g;
-        const cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
-        function pasteHtmlToTable(item) {
-            const ranges = table.stateManager.select.ranges;
-            const selectRangeLength = ranges.length;
-            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            let pasteValuesColCount = 0;
-            let pasteValuesRowCount = 0;
-            let values = [];
-            item.getType('text/html').then((blob) => {
-                blob.text().then(async (pastedData) => {
-                    if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
-                        const matches = Array.from(pastedData.matchAll(regex));
-                        for (const match of matches) {
-                            const rowContent = match[1];
-                            const cellMatches = Array.from(rowContent.matchAll(cellRegex));
-                            const rowValues = cellMatches.map(cellMatch => {
-                                return (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, rowValues?.length ?? 0);
-                        }
-                        pasteValuesRowCount = values.length ?? 0;
-                        values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-                        const changedCellResults = await table.changeCellValues(col, row, values, true);
-                        if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
-                            table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                                col,
-                                row,
-                                pasteData: values,
-                                changedCellResults
-                            });
-                        }
-                    }
-                    else {
-                        navigator.clipboard.read().then(clipboardItems => {
-                            for (const item of clipboardItems) {
-                                if (item.types.includes('text/plain')) {
-                                    item.getType('text/plain').then((blob) => {
-                                        blob.text().then(_pasteValue);
-                                    });
-                                }
-                            }
-                        });
-                    }
-                });
-            });
-        }
-        async function _pasteValue(pastedData) {
-            const ranges = table.stateManager.select.ranges;
-            const selectRangeLength = ranges.length;
-            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            let pasteValuesColCount = 0;
-            let pasteValuesRowCount = 0;
-            let values = [];
-            const rows = pastedData.split('\n');
-            rows.forEach(function (rowCells, rowIndex) {
-                const cells = rowCells.split('\t');
-                const rowValues = [];
-                values.push(rowValues);
-                cells.forEach(function (cell, cellIndex) {
-                    if (cellIndex === cells.length - 1) {
-                        cell = cell.trim();
-                    }
-                    rowValues.push(cell);
-                });
-                pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
-            });
-            pasteValuesRowCount = values.length ?? 0;
-            values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-            const changedCellResults = await table.changeCellValues(col, row, values, true);
-            if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
-                table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                    col,
-                    row,
-                    pasteData: values,
-                    changedCellResults
-                });
-            }
-        }
-        function pasteTextToTable(item) {
-            const ranges = table.stateManager.select.ranges;
-            const selectRangeLength = ranges.length;
-            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
-            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
-            let pasteValuesColCount = 0;
-            let pasteValuesRowCount = 0;
-            item.getType('text/plain').then((blob) => {
-                blob.text().then(async (pastedData) => {
-                    const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
-                    let values = [];
-                    if (rows.length > 1 && rows[rows.length - 1] === '') {
-                        rows.pop();
-                    }
-                    rows.forEach(function (rowCells, rowIndex) {
-                        const cells = rowCells.split('\t');
-                        const rowValues = [];
-                        values.push(rowValues);
-                        cells.forEach(function (cell, cellIndex) {
-                            if (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, rowValues?.length ?? 0);
-                    });
-                    pasteValuesRowCount = values.length ?? 0;
-                    values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
-                    const changedCellResults = await table.changeCellValues(col, row, values, true);
-                    if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
-                        table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
-                            col,
-                            row,
-                            pasteData: values,
-                            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;
-                            const copiedCol = j % colCount;
-                            rowPasteValue.push(values[copiedRow][copiedCol]);
-                        }
-                    }
-                    return toPasteValues;
-                }
-                return values;
-            }
-            return values;
-        }
         const globalPointerdownCallback = (e) => {
             if (table.isReleased) {
                 return;
@@ -61622,7 +62960,7 @@
                         const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
                         const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
                         if (!table.options.select?.disableDragSelect && isValid$3(targetCol) && isValid$3(targetRow)) {
-                            table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, false);
+                            table.stateManager.updateSelectPos(table.stateManager.select.selectInline === 'row' ? table.colCount - 1 : targetCol.col, table.stateManager.select.selectInline === 'col' ? table.rowCount - 1 : targetRow.row, false, false, false, false);
                         }
                     });
                 }
@@ -62242,6 +63580,11 @@
         inertiaScroll;
         bindSparklineHoverEvent;
         _enableTableScroll = true;
+        cutWaitPaste = false;
+        clipboardCheckTimer = null;
+        cutOperationTime = 0;
+        lastClipboardContent = '';
+        cutCellRange = null;
         constructor(table) {
             this.table = table;
             this.handleTextStickBindId = [];
@@ -62366,7 +63709,7 @@
                     this.table.stateManager.updateSelectPos(-1, -1);
                     return false;
                 }
-                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving ? false : this.table.options.select?.makeSelectCellVisible ?? true);
+                this.table.stateManager.updateSelectPos(this.table.stateManager.select.selectInline === 'row' ? this.table.colCount - 1 : eventArgs.col, this.table.stateManager.select.selectInline === 'col' ? this.table.rowCount - 1 : eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving ? false : this.table.options.select?.makeSelectCellVisible ?? true);
                 return true;
             }
             return false;
@@ -62609,6 +63952,383 @@
         disableScroll() {
             this._enableTableScroll = false;
         }
+        async handleCopy(e, isCut = false) {
+            const table = this.table;
+            !isCut && (this.cutWaitPaste = false);
+            const data = this.table.getCopyValue();
+            if (isValid$3(data)) {
+                e.preventDefault();
+                const permissionState = await navigator.permissions.query({ name: 'clipboard-write' });
+                if (navigator.clipboard?.write && permissionState.state === 'granted') {
+                    const setDataToHTML = (data) => {
+                        const result = ['<table>'];
+                        const META_HEAD = [
+                            '<meta name="author" content="Visactor"/>',
+                            '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'
+                        ].join('');
+                        const rows = data.split('\r\n');
+                        rows.forEach(function (rowCells, rowIndex) {
+                            const cells = rowCells.split('\t');
+                            const rowValues = [];
+                            if (rowIndex === 0) {
+                                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) => {
+                                        return `<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>');
+                            if (rowIndex === rows.length - 1) {
+                                result.push('</tbody>');
+                            }
+                        });
+                        result.push('</table>');
+                        return [META_HEAD, result.join('')].join('');
+                    };
+                    const 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 {
+                    if (browser.IE) {
+                        window.clipboardData.setData('Text', data);
+                    }
+                    else {
+                        e.clipboardData.setData('text/plain', data);
+                    }
+                }
+                table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
+                    cellRange: table.stateManager.select.ranges,
+                    copyData: data,
+                    isCut
+                });
+            }
+            if (table.keyboardOptions?.showCopyCellBorder) {
+                setActiveCellRangeState(table);
+                table.clearSelected();
+            }
+        }
+        async handleCut(e) {
+            this.handleCopy(e, true);
+            this.cutWaitPaste = true;
+            this.cutCellRange = this.table.getSelectedCellInfos();
+            if (this.clipboardCheckTimer) {
+                clearTimeout(this.clipboardCheckTimer);
+            }
+            this.clipboardCheckTimer = window.setTimeout(() => {
+                if (this.cutWaitPaste) {
+                    this.cutWaitPaste = false;
+                    this.cutCellRange = null;
+                    this.clipboardCheckTimer = null;
+                }
+            }, 30000);
+            this.saveClipboardContent();
+        }
+        handlePaste(e) {
+            if (!this.cutWaitPaste) {
+                this.executePaste(e);
+                return;
+            }
+            this.checkClipboardChanged()
+                .then(changed => {
+                this.executePaste(e);
+                if (!changed) {
+                    this.clearCutArea(this.table);
+                }
+                if (this.cutWaitPaste) {
+                    this.cutWaitPaste = false;
+                    this.cutCellRange = null;
+                    if (this.clipboardCheckTimer) {
+                        clearTimeout(this.clipboardCheckTimer);
+                        this.clipboardCheckTimer = null;
+                    }
+                }
+            })
+                .catch(() => {
+                this.executePaste(e);
+                if (this.cutWaitPaste) {
+                    this.cutWaitPaste = false;
+                    this.cutCellRange = null;
+                    if (this.clipboardCheckTimer) {
+                        clearTimeout(this.clipboardCheckTimer);
+                        this.clipboardCheckTimer = null;
+                    }
+                }
+            });
+        }
+        async executePaste(e) {
+            const table = this.table;
+            if (table.changeCellValues) {
+                if (table.editorManager?.editingEditor) {
+                    return;
+                }
+                if (table.stateManager.select.ranges?.length > 0) {
+                    if (navigator.clipboard?.read) {
+                        navigator.clipboard.read().then(clipboardItems => {
+                            for (const item of clipboardItems) {
+                                if (item.types.includes('text/html')) {
+                                    this.pasteHtmlToTable(item);
+                                }
+                                else if (item.types.length === 1 && item.types[0] === 'text/plain') {
+                                    this.pasteTextToTable(item);
+                                }
+                                else ;
+                            }
+                        });
+                    }
+                    else {
+                        const ranges = table.stateManager.select.ranges;
+                        const col = Math.min(ranges[0].start.col, ranges[0].end.col);
+                        const row = Math.min(ranges[0].start.row, ranges[0].end.row);
+                        const clipboardData = e.clipboardData || window.Clipboard;
+                        const pastedData = clipboardData.getData('text');
+                        const rows = pastedData.split('\n');
+                        const values = [];
+                        rows.forEach(function (rowCells, rowIndex) {
+                            const cells = rowCells.split('\t');
+                            const rowValues = [];
+                            values.push(rowValues);
+                            cells.forEach(function (cell, cellIndex) {
+                                if (cellIndex === cells.length - 1) {
+                                    cell = cell.trim();
+                                }
+                                rowValues.push(cell);
+                            });
+                        });
+                        const changedCellResults = await table.changeCellValues(col, row, values);
+                        if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
+                            table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                                col,
+                                row,
+                                pasteData: values,
+                                changedCellResults
+                            });
+                        }
+                    }
+                }
+            }
+            if (table.keyboardOptions?.showCopyCellBorder) {
+                clearActiveCellRangeState(table);
+            }
+        }
+        clearCutArea(table) {
+            try {
+                const selectCells = this.cutCellRange;
+                if (!selectCells || selectCells.length === 0) {
+                    return;
+                }
+                for (let i = 0; i < selectCells.length; i++) {
+                    for (let j = 0; j < selectCells[i].length; j++) {
+                        if (selectCells[i][j]) {
+                            table.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, undefined);
+                        }
+                    }
+                }
+            }
+            catch (error) {
+            }
+        }
+        async checkClipboardChanged() {
+            if (!navigator.clipboard || !navigator.clipboard.readText) {
+                return false;
+            }
+            try {
+                const currentContent = await navigator.clipboard.readText();
+                return currentContent !== this.lastClipboardContent;
+            }
+            catch (err) {
+                return false;
+            }
+        }
+        saveClipboardContent() {
+            if (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;
+            const cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
+            const table = this.table;
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            item.getType('text/html').then((blob) => {
+                blob.text().then(async (pastedData) => {
+                    if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
+                        const matches = Array.from(pastedData.matchAll(regex));
+                        for (const match of matches) {
+                            const rowContent = match[1];
+                            const cellMatches = Array.from(rowContent.matchAll(cellRegex));
+                            const rowValues = cellMatches.map(cellMatch => {
+                                return (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, rowValues?.length ?? 0);
+                        }
+                        pasteValuesRowCount = values.length ?? 0;
+                        values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                        const changedCellResults = await table.changeCellValues(col, row, values, true);
+                        if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
+                            table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                                col,
+                                row,
+                                pasteData: values,
+                                changedCellResults
+                            });
+                        }
+                    }
+                    else {
+                        navigator.clipboard.read().then(clipboardItems => {
+                            for (const item of clipboardItems) {
+                                if (item.types.includes('text/plain')) {
+                                    item.getType('text/plain').then((blob) => {
+                                        blob.text().then(this._pasteValue);
+                                    });
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+        async _pasteValue(pastedData) {
+            const table = this.table;
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            const rows = pastedData.split('\n');
+            rows.forEach(function (rowCells, rowIndex) {
+                const cells = rowCells.split('\t');
+                const rowValues = [];
+                values.push(rowValues);
+                cells.forEach(function (cell, cellIndex) {
+                    if (cellIndex === cells.length - 1) {
+                        cell = cell.trim();
+                    }
+                    rowValues.push(cell);
+                });
+                pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+            });
+            pasteValuesRowCount = values.length ?? 0;
+            values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+            const changedCellResults = await table.changeCellValues(col, row, values, true);
+            if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
+                table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                    col,
+                    row,
+                    pasteData: values,
+                    changedCellResults
+                });
+            }
+        }
+        pasteTextToTable(item) {
+            const table = this.table;
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            item.getType('text/plain').then((blob) => {
+                blob.text().then(async (pastedData) => {
+                    const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
+                    let values = [];
+                    if (rows.length > 1 && rows[rows.length - 1] === '') {
+                        rows.pop();
+                    }
+                    rows.forEach(function (rowCells, rowIndex) {
+                        const cells = rowCells.split('\t');
+                        const rowValues = [];
+                        values.push(rowValues);
+                        cells.forEach(function (cell, cellIndex) {
+                            if (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, rowValues?.length ?? 0);
+                    });
+                    pasteValuesRowCount = values.length ?? 0;
+                    values = this.handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                    const changedCellResults = await table.changeCellValues(col, row, values, true);
+                    if (table.hasListeners(TABLE_EVENT_TYPE.PASTED_DATA)) {
+                        table.fireListeners(TABLE_EVENT_TYPE.PASTED_DATA, {
+                            col,
+                            row,
+                            pasteData: values,
+                            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;
+                            const copiedCol = j % colCount;
+                            rowPasteValue.push(values[copiedRow][copiedCol]);
+                        }
+                    }
+                    return toPasteValues;
+                }
+                return values;
+            }
+            return values;
+        }
     }
 
     let defaultStyle$4;
@@ -65705,7 +67425,7 @@
             for (let col = startCol; col >= 0; col--) {
                 const width = _this.getColWidth(col);
                 const left = right - width;
-                if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
+                if (Math.round(left) <= absoluteX && absoluteX < Math.round(right)) {
                     return {
                         left,
                         col,
@@ -65723,7 +67443,7 @@
             for (let col = startCol; col < colCount; col++) {
                 const width = _this.getColWidth(col);
                 const right = left + width;
-                if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
+                if (Math.round(left) <= absoluteX && absoluteX < Math.round(right)) {
                     return {
                         left,
                         col,
@@ -67259,6 +68979,8 @@
         customRender;
         canvasWidth;
         canvasHeight;
+        contentOffsetX;
+        contentOffsetY;
         _vDataSet;
         scenegraph;
         stateManager;
@@ -67271,7 +68993,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.19.9-alpha.3";
+        version = "1.20.0-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -67311,7 +69033,7 @@
             if (options.customConfig?.imageAnonymous === false) {
                 vglobal.isImageAnonymous = false;
             }
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, containerFit = { width: false, height: false }, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, enableHeaderCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, containerFit = { width: false, height: false }, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, enableHeaderCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, contentOffsetX: translateX, contentOffsetY: translateY, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
             const { groupConfig, groupBy, groupTitleFieldFormat, groupTitleCustomLayout, enableTreeStickCell } = options;
             this.container = container;
             this.options = options;
@@ -67356,6 +69078,8 @@
             }
             this.tableNoFrameWidth = 0;
             this.tableNoFrameHeight = 0;
+            this.contentOffsetX = translateX ?? 0;
+            this.contentOffsetY = translateY ?? 0;
             this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : undefined;
             this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : undefined;
             this.columnWidthComputeMode = options.columnWidthComputeMode ?? 'normal';
@@ -67591,6 +69315,13 @@
             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() {
             this._updateSize();
             this.internalProps.legends?.forEach(legend => {
@@ -67676,6 +69407,7 @@
         }
         set frozenRowCount(frozenRowCount) {
             this.internalProps.frozenRowCount = frozenRowCount;
+            this.options.frozenRowCount = frozenRowCount;
             this.stateManager.setFrozenRow(this.internalProps.frozenRowCount);
         }
         get rightFrozenColCount() {
@@ -67883,8 +69615,8 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            this.tableX = 0;
-            this.tableY = 0;
+            this.tableX = this.contentOffsetX;
+            this.tableY = this.contentOffsetY;
             if (this.options.canvas && this.options.viewBox) {
                 widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
                 heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
@@ -67978,24 +69710,26 @@
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
                 if (this.theme.frameStyle?.innerBorder) {
-                    this.tableX = 0;
-                    this.tableY = 0;
-                    this.tableNoFrameWidth = width - (shadowWidths[1] ?? 0);
-                    this.tableNoFrameHeight = height - (shadowWidths[2] ?? 0);
+                    this.tableX += this.contentOffsetX;
+                    this.tableY += this.contentOffsetY;
+                    this.tableNoFrameWidth = width - (shadowWidths[1] ?? 0) - this.contentOffsetX;
+                    this.tableNoFrameHeight = height - (shadowWidths[2] ?? 0) - this.contentOffsetY;
                 }
                 else {
-                    this.tableX = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
-                    this.tableY = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                    this.tableX += (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
+                    this.tableY += (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
                     const rightBorder = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
                     this.tableNoFrameWidth =
                         width -
                             (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) -
-                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
+                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0)) -
+                            this.contentOffsetX;
                     const bottomBorder = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
                     this.tableNoFrameHeight =
                         height -
                             (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) -
-                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0));
+                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) -
+                            this.contentOffsetY;
                 }
             }
             this._clearColRangeWidthsMap();
@@ -68809,6 +70543,7 @@
             internalProps.tooltipHandler?.release?.();
             internalProps.menuHandler?.release?.();
             super.release?.();
+            this.pluginManager.release();
             internalProps.handler?.release?.();
             this.eventManager.release();
             internalProps.focusControl?.release?.();
@@ -68836,17 +70571,20 @@
             this.scenegraph = null;
             this.internalProps = null;
             this.reactCustomLayout?.clearCache();
-            this.pluginManager.release();
             clearChartRenderQueue();
         }
         fireListeners(type, event) {
             return super.fireListeners(type, event);
         }
-        updateOption(options) {
+        updateOption(options, updateConfig = {
+            clearColWidthCache: true,
+            clearRowHeightCache: true
+        }) {
+            this.fireListeners(TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION, { options, container: this.container });
             this.editorManager?.cancelEdit();
             this.options = options;
             this._hasAutoImageColumn = undefined;
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, enableHeaderCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, containerFit, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, enableHeaderCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, containerFit, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, contentOffsetX: translateX = 0, contentOffsetY: translateY = 0, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
             const { groupConfig, groupBy, groupTitleFieldFormat, groupTitleCustomLayout, enableTreeStickCell } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
@@ -68890,6 +70628,8 @@
                 }
             }
             this.customRender = customRender;
+            this.contentOffsetX = translateX ?? 0;
+            this.contentOffsetY = translateY ?? 0;
             this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : undefined;
             this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : undefined;
             const internalProps = this.internalProps;
@@ -68922,14 +70662,18 @@
             internalProps.groupTitleCustomLayout =
                 groupConfig?.titleCustomLayout ?? groupTitleCustomLayout;
             internalProps.enableTreeStickCell = groupConfig?.enableTreeStickCell ?? 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 = {};
+            if (updateConfig?.clearColWidthCache) {
+                internalProps._widthResizedColMap.clear();
+                this.colWidthsMap = new NumberMap();
+                this.colContentWidthsMap = new NumberMap();
+                this.colWidthsLimit = {};
+            }
+            if (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(options.theme ?? themes.DEFAULT);
             internalProps.theme.isPivot = this.isPivotTable();
@@ -69013,8 +70757,12 @@
                 internalProps.menuHandler = new MenuHandler(this);
             }
             this.clearCellStyleCache();
-            this.clearColWidthCache();
-            this.clearRowHeightCache();
+            if (updateConfig?.clearColWidthCache) {
+                this.clearColWidthCache();
+            }
+            if (updateConfig?.clearRowHeightCache) {
+                this.clearRowHeightCache();
+            }
             internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell);
             this.customCellStylePlugin?.updateCustomCell(options.customCellStyle ?? [], options.customCellStyleArrangement ?? []);
             this._adjustCanvasSizeByOption();
@@ -69144,13 +70892,17 @@
         selectCells(cellRanges) {
             const { scrollLeft, scrollTop } = this;
             cellRanges.forEach((cellRange, index) => {
-                if (cellRange.start.col === cellRange.end.col && cellRange.start.row === cellRange.end.row) {
-                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
+                const startRow = cellRange.start.row;
+                const startCol = cellRange.start.col;
+                const endRow = cellRange.end.row;
+                const endCol = cellRange.end.col;
+                if (startCol === endCol && startRow === endRow) {
+                    this.stateManager.updateSelectPos(startCol, startRow, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                 }
                 else {
-                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
+                    this.stateManager.updateSelectPos(startCol, startRow, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                     this.stateManager.updateInteractionState(InteractionState.grabing);
-                    this.stateManager.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
+                    this.stateManager.updateSelectPos(endCol, endRow, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                 }
                 this.stateManager.endSelectCells(false, false);
                 this.stateManager.updateInteractionState(InteractionState.default);
@@ -69158,6 +70910,96 @@
             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];
+                if (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];
+                if (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) {
+            const lastSelectRange = this.stateManager.select.ranges[this.stateManager.select.ranges.length - 1];
+            const startCol = isShift && lastSelectRange?.start?.col ? lastSelectRange?.start?.col : colIndex;
+            const startRow = 0;
+            const endCol = colIndex;
+            const endRow = this.rowCount - 1;
+            this.stateManager.updateSelectPos(startCol, startRow, isShift, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+            this.stateManager.updateInteractionState(InteractionState.grabing);
+            this.stateManager.updateSelectPos(endCol, endRow, isShift, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+        }
+        dragSelectCol(colIndex, isCtrl) {
+            const currentSelectRanges = this.stateManager.select.ranges;
+            const lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+            if (lastSelectRange) {
+                lastSelectRange.end.col = colIndex;
+            }
+            this.stateManager.updateSelectPos(colIndex, this.rowCount - 1, false, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+        }
+        endDragSelect() {
+            this.stateManager.updateInteractionState(InteractionState.default);
+            this.stateManager.endSelectCells(false, false);
+        }
+        startDragSelectRow(rowIndex, isCtrl, isShift) {
+            const lastSelectRange = this.stateManager.select.ranges[this.stateManager.select.ranges.length - 1];
+            const startCol = 0;
+            const startRow = isShift && lastSelectRange?.start?.row ? lastSelectRange?.start?.row : rowIndex;
+            const endCol = this.colCount - 1;
+            const endRow = rowIndex;
+            this.stateManager.updateSelectPos(startCol, startRow, isShift, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+            this.stateManager.updateInteractionState(InteractionState.grabing);
+            this.stateManager.updateSelectPos(endCol, endRow, isShift, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+        }
+        dragSelectRow(rowIndex, isCtrl) {
+            const currentSelectRanges = this.stateManager.select.ranges;
+            const lastSelectRange = currentSelectRanges[currentSelectRanges.length - 1];
+            if (lastSelectRange) {
+                lastSelectRange.end.row = rowIndex;
+            }
+            this.stateManager.updateSelectPos(this.colCount - 1, rowIndex, false, isCtrl, false, this.options.select?.makeSelectCellVisible ?? true, true);
+        }
         get recordsCount() {
             return this.records?.length;
         }
@@ -73661,7 +75503,8 @@
                 this.isValidatingValue = true;
                 const newValue = this.editingEditor.getValue();
                 const oldValue = this.table.getCellOriginValue(this.editCell.col, this.editCell.row);
-                const maybePromiseOrValue = this.editingEditor.validateValue?.(newValue, oldValue, this.editCell, this.table);
+                const target = e?.target;
+                const maybePromiseOrValue = this.editingEditor.validateValue?.(newValue, oldValue, this.editCell, this.table, !!this.table.getElement().contains(target));
                 if (isPromise(maybePromiseOrValue)) {
                     this.isValidatingValue = true;
                     return new Promise((resolve, reject) => {
@@ -73691,6 +75534,7 @@
                 }
                 changedValues.push(rowChangedValues);
             }
+            this.editingEditor.beforeEnd?.();
             this.table.changeCellValues(range.start.col, range.start.row, changedValues);
             this.editingEditor.exit && (void 0);
             this.editingEditor.exit?.();
@@ -73742,9 +75586,9 @@
         return false;
     }
 
-    function getGroupByDataConfig(groupByOption) {
+    function getGroupByDataConfig(groupByOption, addRecordRule) {
         if (isString$4(groupByOption)) {
-            return { groupByRules: [groupByOption] };
+            return { groupByRules: [groupByOption], addRecordRule };
         }
         if (isArray$7(groupByOption)) {
             const groupByRules = groupByOption.map(item => {
@@ -73753,9 +75597,9 @@
                 }
                 return item.key;
             });
-            return { groupByRules };
+            return { groupByRules, addRecordRule };
         }
-        return {};
+        return { addRecordRule };
     }
 
     function listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, table) {
@@ -74725,7 +76569,9 @@
             this.pagination = options.pagination;
             internalProps.sortState = options.sortState;
             internalProps.multipleSort = !!options.multipleSort;
-            internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy) : {};
+            internalProps.dataConfig = this.internalProps.groupBy
+                ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule)
+                : { addRecordRule: options.addRecordRule };
             internalProps.columns = options.columns
                 ? cloneDeepSpec(options.columns, ['children'])
                 : options.header
@@ -74839,9 +76685,27 @@
             this.renderAsync();
             this.eventManager.updateEventBinder();
         }
-        addColumn(column) {
+        addColumn(column, colIndex, isMaintainArrayData = true) {
             const columns = this.options.columns;
-            columns.push(column);
+            if (colIndex === undefined) {
+                columns.push(column);
+            }
+            else {
+                columns.splice(colIndex, 0, column);
+            }
+            if (isMaintainArrayData) {
+                for (let i = 0; i < this.records.length; i++) {
+                    const record = this.records[i];
+                    if (Array.isArray(record)) {
+                        record.splice(colIndex, 0, undefined);
+                    }
+                }
+            }
+            this.updateColumns(columns);
+        }
+        deleteColumn(colIndex) {
+            const columns = this.options.columns;
+            columns.splice(colIndex, 1);
             this.updateColumns(columns);
         }
         get columns() {
@@ -75038,16 +76902,19 @@
             }
             return ifCan;
         }
-        updateOption(options) {
+        updateOption(options, updateConfig = {
+            clearColWidthCache: true,
+            clearRowHeightCache: true
+        }) {
             const internalProps = this.internalProps;
-            super.updateOption(options);
+            super.updateOption(options, updateConfig);
             internalProps.frozenColDragHeaderMode =
                 options.dragOrder?.frozenColDragHeaderMode ?? options.frozenColDragHeaderMode;
             this.pagination = options.pagination;
             internalProps.sortState = options.sortState;
             internalProps.dataConfig = this.internalProps.groupBy
-                ? getGroupByDataConfig(this.internalProps.groupBy)
-                : {};
+                ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule)
+                : { addRecordRule: options.addRecordRule };
             this.showHeader = options.showHeader ?? true;
             internalProps.columns = options.columns
                 ? cloneDeepSpec(options.columns, ['children'])
@@ -75104,6 +76971,9 @@
                 }
             }
             this.pluginManager.updatePlugins(options.plugins);
+            setTimeout(() => {
+                this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+            }, 0);
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
             });
@@ -75826,6 +77696,61 @@
                 });
             }
         }
+        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;
+                    }
+                }
+            }
+            if (!this.options.customMergeCell) {
+                this.options.customMergeCell = [];
+            }
+            else if (typeof this.options.customMergeCell === 'function') {
+                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) {
+            if (!this.options.customMergeCell) {
+                this.options.customMergeCell = [];
+            }
+            else if (typeof this.options.customMergeCell === 'function') {
+                this.options.customMergeCell = [];
+            }
+            this.options.customMergeCell = this.options.customMergeCell.filter(item => {
+                const { start, 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) {
@@ -87986,9 +89911,12 @@
             }
             return ifCan;
         }
-        updateOption(options) {
+        updateOption(options, updateConfig = {
+            clearColWidthCache: true,
+            clearRowHeightCache: true
+        }) {
             const internalProps = this.internalProps;
-            super.updateOption(options);
+            super.updateOption(options, updateConfig);
             if (!options.rowHierarchyType) {
                 options.rowHierarchyType = 'grid';
             }
@@ -88121,6 +90049,9 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
+            setTimeout(() => {
+                this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+            }, 0);
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
             });
@@ -89677,9 +91608,12 @@
             }
             return ifCan;
         }
-        updateOption(options) {
+        updateOption(options, updateConfig = {
+            clearColWidthCache: true,
+            clearRowHeightCache: true
+        }) {
             const internalProps = this.internalProps;
-            super.updateOption(options);
+            super.updateOption(options, updateConfig);
             this.layoutNodeId = { seqId: 0 };
             this.internalProps.columns = cloneDeep$1(options.columns);
             this.internalProps.rows = cloneDeep$1(options.rows);
@@ -89810,6 +91744,9 @@
                     this.internalProps.emptyTip?.resetVisible();
                 }
             }
+            setTimeout(() => {
+                this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
+            }, 0);
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
             });
@@ -91202,7 +93139,7 @@
     }
 
     registerForVrender();
-    const version = "1.19.9-alpha.3";
+    const version = "1.20.0-alpha.0";
     function getIcons() {
         return get$2();
     }